Symfony UX Chart JS – Algo & Bug

Pour installer le package, utiliser la commande :

composer require symfony/ux-chartjs

Dans un premier temps, nous allons voir comment créer un graphique statique, c’est-à-dire qui ne se met pas à jour sans rechargement de page.

Le contrôleur

Commençons par créer un contrôleur qui va générer le graphique.

symfony console make:controller GraphController

qui contiendra le code suivant :

#[Route('/graph', name: 'app_graph')]
    public function index(ChartBuilderInterface $chartBuilder): Response
    {
        $chart = $chartBuilder->createChart(Chart::TYPE_LINE);

        $chart->setData([
            'labels' => ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            'datasets' => [
                [
                    'label' => 'My First dataset',
                    'backgroundColor' => 'rgb(255, 99, 132)',
                    'borderColor' => 'rgb(255, 99, 132)',
                    'data' => [0, 10, 5, 2, 20, 30, 45],
                ],
            ],
        ]);

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

        return $this->render('graph/index.html.twig', [
            'controller_name' => 'GraphController',
            'chart' => $chart,
        ]);
    }

Ce contrôleur utilise le service ChartBuilderInterface qui va permettre de créer un objet représentant le graphique (ligne 4). Lors de la création de cet objet, vous devez préciser le type de graphique souhaité parmi les choix suivant :

Chart::TYPE_BAR
Chart::TYPE_BUBBLE
Chart::TYPE_DOUGHNUT
Chart::TYPE_LINE
Chart::TYPE_PIE
Chart::TYPE_POLAR_AREA
Chart::TYPE_RADAR
Chart::TYPE_SCATTER

Vous pouvez trouver des exemples et des codes d’applications sur la documentation de Chart JS : Chart.js Samples | Chart.js

Il vous faudra faire quelques modifications par rapport à la documentation officielle, car celle-ci est écrit en javascript. Mais on comparant avec l’exemple ci-dessus, il est aisé de faire les adaptations (lignes 6 à 16).

De la même manière, vous pouvez ajouter des options, en transformant les objets javascript en tableaux PHP (lignes 18 à 25).

Une fois l’objet $graph complet, on l’envoie à la vue, comme d’habitude (ligne 29).

la vue

Dans le fichier templates/graph/index.html.twig, nous allons ajouter la ligne suivante au niveau du bloc body :

{{ render_chart(chart) }}

Il est également possible d’ajouter des attributs à la balise <canvas> qui sera créée en ajoutant un deuxième argument :

{{ render_chart(chart, {'class': 'my-chart'}) }}

Approfondissement

Il est possible d’ajouter des plugins à Chart JS ou des évènements sur les graphiques. Pour cela, vous pouvez consultez la documentation Symfony : Symfony UX Chart.js Documentation