Filament•5mo ago

Line Chart not displayed caused by Alpine Error Exception

Hi there, I am following the official tutorial on drawing charts (https://filamentphp.com/docs/3.x/widgets/charts). I am using the Trend package as suggested to use Eloquent models. I have an OrdersChart Class. It is very simple and follows the tutorial structure. I included it in the AdminPanelProvider::widgets() array parameter.

// OrdersChart
return [
            'datasets' => [
                'label' => 'Bestellungen',
                'data' =>  $data->map(fn (TrendValue $value) => $value->aggregate),
            ],
            'labels' => $data->map(fn (TrendValue $value) => $value->date),
        ];

// OrdersChart
return [
            'datasets' => [
                'label' => 'Bestellungen',
                'data' =>  $data->map(fn (TrendValue $value) => $value->aggregate),
            ],
            'labels' => $data->map(fn (TrendValue $value) => $value->date),
        ];

What doesn't work? The line chart is not displayed. What exceptions do I see?

Alpine Expression Error: s.data.datasets.forEach is not a function

Expression: "function () {
            this.initChart(), this.$wire.$on("updateChartData", ({data: i}) => {
                mn = this.getChart(), mn.data = i, mn.update("resize")
            }), Alpine.effect(() => {
                Alpine.store("theme"), this.$nextTick(() => {
                    this.getChart().destroy(), this.initChart()
                })
            }), window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => {
                Alpine.store("theme") === "system" && this.$nextTick(() => {
                    this.getChart().destroy(), this.initChart()
                })
            })
        }"

Alpine Expression Error: s.data.datasets.forEach is not a function

Expression: "function () {
            this.initChart(), this.$wire.$on("updateChartData", ({data: i}) => {
                mn = this.getChart(), mn.data = i, mn.update("resize")
            }), Alpine.effect(() => {
                Alpine.store("theme"), this.$nextTick(() => {
                    this.getChart().destroy(), this.initChart()
                })
            }), window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => {
                Alpine.store("theme") === "system" && this.$nextTick(() => {
                    this.getChart().destroy(), this.initChart()
                })
            })
        }"

I have tried to console log the s.data.datasets in the function td(s, t) the charts.js file to ensure I am not running crazy. It would be great if someone could point me in a direction so I can see my mistake.

Installation - Panel Builder - Filament

Solution:

Ok got it solved. An additional array bracket was missing! 🤦 ```php 'datasets' => [ [ // <--- this one!!! 'label' => 'Bestellungen',...

Jump to solution

1 Reply

Solution

JanV•5mo ago

Ok got it solved. An additional array bracket was missing! 🤦

  'datasets' => [
                [ // <--- this one!!!
                    'label' => 'Bestellungen',
                    'data' => $data->map(fn (TrendValue $value) => $value->aggregate),
                ],
            ],
            'labels' => $data->map(fn (TrendValue $value) => $value->date),

  'datasets' => [
                [ // <--- this one!!!
                    'label' => 'Bestellungen',
                    'data' => $data->map(fn (TrendValue $value) => $value->aggregate),
                ],
            ],
            'labels' => $data->map(fn (TrendValue $value) => $value->date),

Gaming

Programming

Line Chart not displayed caused by Alpine Error Exception