Laravel Livewire Charts

app#Charts#WanSpeedTestsChart.php

<?php

namespace App\Charts;

use App\Support\Livewire\ChartComponentData;
use ConsoleTVs\Charts\Classes\Chartjs\Chart;

/**
 * Class WanSpeedTestsChart
 *
 * @package App\Charts
 */
class WanSpeedTestsChart extends Chart
{

    /**
     * WanSpeedTestsChart constructor.
     *
     * @param \App\Support\Livewire\ChartComponentData $data
     */
    public function __construct(ChartComponentData $data)
    {
        parent::__construct();

        $this->loader(false);

        $this->options([
            'maintainAspectRatio' => false,
            'legend' => [
                'display' => false,
            ],
            'scales' => [
                'yAxes' => [
                    [
                        'ticks' => [
                            'maxTicksLimit' => 6,
                            'beginAtZero'   => true,
                        ],
                    ],
                ],
                'xAxes' => [
                    [
                        'display' => false,
                    ],
                ],
            ],
        ]);

        $this->labels($data->labels());

        $this->dataset("Upload speed (Mbps)", "line", $data->datasets()[0])->options([
            'backgroundColor'           => 'rgb(127,156,245, 0.4)',
            'borderColor'               => '#7F9CF5',
            'pointBackgroundColor'      => 'rgb(255, 255, 255, 0)',
            'pointBorderColor'          => 'rgb(255, 255, 255, 0)',
            'pointHoverBackgroundColor' => '#7F9CF5',
            'pointHoverBorderColor'     => '#7F9CF5',
            'borderWidth'               => 1,
            'pointRadius'               => 1,
        ]);

        $this->dataset("Download speed (Mbps)", "line", $data->datasets()[1])->options([
            'backgroundColor'           => 'rgb(127, 156, 245, 0.4)',
            'borderColor'               => '#A3BFFA',
            'pointBackgroundColor'      => 'rgb(255, 255, 255, 0)',
            'pointBorderColor'          => 'rgb(255, 255, 255, 0)',
            'pointHoverBackgroundColor' => '#A3BFFA',
            'pointHoverBorderColor'     => '#A3BFFA',
            'borderWidth'               => 1,
            'pointRadius'               => 1,
        ]);
    }

}

app#Http#Livewire#WanSpeedTests.php

<?php

namespace App\Http\Livewire;

use App\Charts\WanSpeedTestsChart;
use App\Models\WanSpeedTest;
use App\Support\Livewire\ChartComponent;
use App\Support\Livewire\ChartComponentData;
use Carbon\Carbon;
use Illuminate\Support\Collection;

/**
 * Class WanSpeedTests
 *
 * @package App\Http\Livewire
 */
class WanSpeedTests extends ChartComponent
{

    /**
     * @return string
     */
    protected function view(): string
    {
        return '_livewire.wan-speed-tests';
    }

    /**
     * @return string
     */
    protected function chartClass(): string
    {
        return WanSpeedTestsChart::class;
    }

    /**
     * @return \App\Support\Livewire\ChartComponentData
     */
    protected function chartData(): ChartComponentData
    {
        $wan_speed_tests = WanSpeedTest::query()
            ->select(['id', 'created_at', 'speed_down_mbps', 'speed_up_mbps', 'ping_ms'])
            ->where('created_at', '>=', Carbon::now()->subDay())
            ->where('created_at', '<=', Carbon::now())
            ->get();

        $labels = $wan_speed_tests->map(function(WanSpeedTest $wan_speed_test, $key) {
            return $wan_speed_test->created_at->format('Y-m-d H:i:s');
        });

        $datasets = new Collection([
            $wan_speed_tests->map(function(WanSpeedTest $wan_speed_test) {
                return number_format($wan_speed_test->speed_up_mbps, 2, '.', '');
            }),
            $wan_speed_tests->map(function(WanSpeedTest $wan_speed_test) {
                return number_format($wan_speed_test->speed_down_mbps, 2, '.', '');
            })
        ]);

        return (new ChartComponentData($labels, $datasets));
    }

}

app#Support#Livewire#ChartComponent.php

<?php

namespace App\Support\Livewire;

use Illuminate\View\View;
use Livewire\Component;

/**
 * Class ChartComponent
 *
 * @package App\Support\Livewire
 */
abstract class ChartComponent extends Component
{

    /**
     * @var string|null
     */
    public ?string $chart_id = null;

    /**
     * @var string|null
     */
    public ?string $chart_data_checksum = null;

    /**
     * @return string
     */
    protected abstract function chartClass(): string;

    /**
     * @return \App\Support\Livewire\ChartComponentData
     */
    protected abstract function chartData(): ChartComponentData;

    /**
     * @return string
     */
    protected abstract function view(): string;

    /**
     * @return \Illuminate\View\View
     */
    public function render(): View
    {
        $chart_data = $this->chartData();

        if(!$this->chart_id)
        {
            $chart_class = $this->chartClass();

            $chart = new $chart_class($chart_data);

            $this->chart_id = $chart->id;
        }

        elseif($chart_data->checksum()!==$this->chart_data_checksum)
        {
            $this->emit('chartUpdate', $this->chart_id, $chart_data->labels(), $chart_data->datasets());
        }

        $this->chart_data_checksum = $chart_data->checksum();

        return view($this->view(), [
            'chart' => ($chart ?? null)
        ]);
    }

}

app#Support#Livewire#ChartComponentData.php

<?php

namespace App\Support\Livewire;

use Illuminate\Contracts\Support\Arrayable;
use Illuminate\Support\Collection;

/**
 * Class ChartComponentData
 *
 * @package App\Support\Livewire
 */
class ChartComponentData implements Arrayable
{

    /**
     * @var \Illuminate\Support\Collection
     */
    private Collection $labels;

    /**
     * @var \Illuminate\Support\Collection
     */
    private Collection $datasets;

    /**
     * ChartComponentData constructor.
     *
     * @param \Illuminate\Support\Collection $labels
     * @param \Illuminate\Support\Collection $datasets
     */
    public function __construct(Collection $labels, Collection $datasets)
    {
        $this->labels = $labels;
        $this->datasets = $datasets;
    }

    /**
     * @return array
     */
    public function toArray(): array
    {
        return [
            'labels'    => $this->labels,
            'datasets'  => $this->datasets
        ];
    }

    /**
     * @return string
     */
    public function checksum(): string
    {
        return md5(json_encode($this->toArray()));
    }

    /**
     * @return \Illuminate\Support\Collection
     */
    public function labels(): Collection
    {
        return $this->labels;
    }

    /**
     * @return \Illuminate\Support\Collection
     */
    public function datasets(): Collection
    {
        return $this->datasets;
    }

}

resources#js#app.js

window.livewire.on('chartUpdate', (chartId, labels, datasets) => {
    let chart = window[chartId].chart;

    chart.data.datasets.forEach((dataset, key) => {
        dataset.data = datasets[key];
    });

    chart.data.labels = labels;

    chart.update();
});

resources#views#_livewire#wan-speed-tests.blade.php

<div wire:poll.10s>

    <header>
        <h2>WAN speed tests <small>Past 24hours</small></h2>
    </header>

    <div wire:ignore wire:key={{ $chart->id }}>
        @if($chart)
            {!! $chart->container() !!}
        @endif
    </div>

</div>

@if($chart)
    @push('scripts')
        {!! $chart->script() !!}
    @endpush
@endif

resources#views#dashboard.blade.php

@extends('skeleton')

@section('body')

    <livewire:dashboard.wan-speed-tests/>

@endsection

resources#views#skeleton.blade.php

<!DOCTYPE html>
<html lang="en" class="w-full h-full">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="stylesheet" href="{{ mix('/assets/build/css/app.css') }}" type="text/css">
    @livewireStyles
</head>
<body>

    <div>
        @yield('body')
    </div>

    @livewireScripts

    <script type="text/javascript" src="{{ mix('/assets/build/js/chartjs.js') }}"></script>
    <script type="text/javascript" src="{{ mix('/assets/build/js/app.js') }}"></script>

    @stack('scripts')

</body>
</html>

@messi89 - thank you for the feedback!

I've updated the gist, so hopefully it will help someone else too.

@gbuckingham89, what does netmonDateTime() actually do ?

@gbuckingham89, what does netmonDateTime() actually do ?

Hey @comtelindodev - that is just a little helper function in my project that converts a Carbon date instance to a string based on the user's preferences (format & timezone).

I've updated this gist to remove the function and replace it with a normal call to $carbon->format() to remove any confusion.

I've read the part when you said the tag 6.0 of charts is neede. It feels like the new branch (7.0 at the time of writing this comment) breaks up all the example and all possible ways to make the chart works and feel reactive. ¿does anyone make it work with chart 7.0?

@josegus yes, a new version of Laravel Charts (v7) was released shortly after I wrote my blog post. The new version of the package is a major rewrite, so I don't think you'll be able to follow my examples, unless you use the older version (v6).

If / when I upgrade, I'll be sure to update, or even publish a new blog post with instructions.

@gbuckingham89 thanks, and hopefully you'll keep us updated!

Hi ! Is this code updated with the new version of chartisan ?

@lilouch no unfortunately not. I also believe there is a newer release of Livewire now - so there maybe more changes needed to support that too.

Unfortunately I think it's now unlikely that I'll publish any update - for this particular project I can see myself moving to Inertia.js with Vue3 instead of Livewire.

I'm having an issue with the \Illuminate\view\view the return type. It keeps on telling me that it is receiving an \illuminate\contract\view\view. How do I overcome this?

I'm having an issue with $chart->id it keeps on reporting: Attempt to read property "id" on null. What can be the problem?

I'm having the same issue as the before commenter. Attempt to read property "id" on null, file wan-speed-tests.blade.php, line 5 <div wire:ignore wire:key={{ $chart->id }}>

Any ideas on how to solve this?

Hello, anyone help me, i want to create real-time chart cards in the PHP Laravel updated version.