[ChartJS] Error Connecting Controller

[TheDonBase]

Trying to render a Chart and i get this error. Using Asset-Map

and i am importing the css and javascript

[smnandre]

Hello @TheDonBase ! Could you share the PHP code to generate the graph and the twig template were you call it ?

[TheDonBase]

Hello @TheDonBase ! Could you share the PHP code to generate the graph and the twig template were you call it ?

Sure thing!

Controller code:

#[Route('/dashboard', name: 'app_admin')]
    public function index(ChartBuilderInterface $chartBuilder): Response
    {
        $applicationChart = $chartBuilder->createChart(Chart::TYPE_LINE);
        $applicationChart->setData([
            'labels' => ['Januari', 'Februari', 'Mars', 'April', 'Maj', 'Juni', 'Juli', 'Augusti', 'September', 'Oktober', 'November', 'December'],
            'datasets' => [
                'label' => 'Ansökningar',
                'backgroundColor' => 'rgb(72, 93, 105)',
                'borderColor' => 'rgb(255, 99, 132)',
                'data' => [0, 10, 5, 2, 20, 30, 45, 60, 75, 10, 2, 5],
            ],
        ]);

        $applicationChart->setOptions([
            'scales' => [
                'y' => [
                    'suggestedMin' => 0,
                    'suggestedMax' => 100,
                ],
            ],
        ]);

        $messageChart = $chartBuilder->createChart(Chart::TYPE_LINE);
        $messageChart->setData([
            'labels' => ['Januari', 'Februari', 'Mars', 'April', 'Maj', 'Juni', 'Juli', 'Augusti', 'September', 'Oktober', 'November', 'December'],
            'datasets' => [
                'label' => 'Meddelanden',
                'backgroundColor' => 'rgb(72, 93, 105)',
                'borderColor' => 'rgb(255, 99, 132)',
                'data' => [0, 10, 5, 2, 20, 30, 45, 60, 75, 10, 2, 5],
            ],
        ]);

        $messageChart->setOptions([
            'scales' => [
                'y' => [
                    'suggestedMin' => 0,
                    'suggestedMax' => 100,
                ],
            ],
        ]);
        return $this->render('admin/index.html.twig', [
            'controller_name' => 'AdminController',
            'applicationChart' => $applicationChart,
            'messageChart' => $messageChart,
        ]);
    }

Twig:

{% extends 'admin_base.html.twig' %}

{% block title %}Sellmaz AB Administratörs panel{% endblock %}

{% block body %}
        {{ render_chart(applicationChart) }}
        {{ render_chart(messageChart) }}
{% endblock %}

{% block custom_js %}

{% endblock %}

And here you can see it is rendered but not visible.

[smnandre]

The datasets key requires a "set of datasets" so i think this fix would make your code work

Could you try ?

#[Route('/dashboard', name: 'app_admin')]
    public function index(ChartBuilderInterface $chartBuilder): Response
    {
        $applicationChart = $chartBuilder->createChart(Chart::TYPE_LINE);
        $applicationChart->setData([
            'labels' => ['Januari', 'Februari', 'Mars', 'April', 'Maj', 'Juni', 'Juli', 'Augusti', 'September', 'Oktober', 'November', 'December'],
            'datasets' => [
+                [
                'label' => 'Ansökningar',
                'backgroundColor' => 'rgb(72, 93, 105)',
                'borderColor' => 'rgb(255, 99, 132)',
                'data' => [0, 10, 5, 2, 20, 30, 45, 60, 75, 10, 2, 5],
+                ],
            ],
        ]);

        $applicationChart->setOptions([
            'scales' => [
                'y' => [
                    'suggestedMin' => 0,
                    'suggestedMax' => 100,
                ],
            ],
        ]);

        $messageChart = $chartBuilder->createChart(Chart::TYPE_LINE);
        $messageChart->setData([
            'labels' => ['Januari', 'Februari', 'Mars', 'April', 'Maj', 'Juni', 'Juli', 'Augusti', 'September', 'Oktober', 'November', 'December'],
            'datasets' => [
+                [
                'label' => 'Meddelanden',
                'backgroundColor' => 'rgb(72, 93, 105)',
                'borderColor' => 'rgb(255, 99, 132)',
                'data' => [0, 10, 5, 2, 20, 30, 45, 60, 75, 10, 2, 5],
+                ],
            ],
        ]);

        $messageChart->setOptions([
            'scales' => [
                'y' => [
                    'suggestedMin' => 0,
                    'suggestedMax' => 100,
                ],
            ],
        ]);
        return $this->render('admin/index.html.twig', [
            'controller_name' => 'AdminController',
            'applicationChart' => $applicationChart,
            'messageChart' => $messageChart,
        ]);
    }

[TheDonBase]

Yes that did wonders, i have no clue how i did not see that in the documentation, Thanks!

[smnandre]

Happy to help :)

And this kind of thing happen to me.... let's say... "more than sometimes" 😅