Comment coder un graphique avec ChartDirector en 8 étapes ?

jeudi 19 septembre 2019
PHP

Etape 1 : l'objet

Il faut d'abord identifier le type de Chart souhaité. Voici quelques cas concret : $c = new XYChart(width, height);

Etape 2 : les données

Pour les tutoriels, on créera un tableau de données brutes par Layer tel que : $data = array(6.3, 2.3, 0.7, 3.4, 2.2, 2.9);

Etape 3 : les labels de l'axe X

Il s'agit des annotations qui apparaîtront en dessous de l'axe horizontal (par défaut).

Pour une création manuelle, on créera un tableau de labels. Son nombre d'entrées doit être égal au nombre d'entrées du tableau de données de l'étape 2 tel que : $labels = array("Jan", "Feb", "Mar", "Apr", "May", "Jun");

Ne pas oublier de l'ajouter à l'axe X une fois que ce dernier sera créé (étape 7).

Etape 4 : le titre

Il est à placer assez tôt car s'il est placé en haut, il déterminera la position des autres éléments.$c->addTitle("Contenu du titre", "policeEcriture.ttf", fontSize);

Etape 5 : la zone du graphique

La fonction à utiliser est la suivante : $c->setPlotArea(PosX, PosY, width, height, backgroundColor);

Pour que celui-ci s'adapte à la taille du graphique et soit bien positionné, il y a quelques reflexes à avoir :

Prévoir une marge suffisante à gauche pour le label de l'axe Y (si vous avez prévu de l'afficher). Pour l'exemple : PosX = 30px.

Si un titre a été placé en haut, il faut récupérer sa hauteur pour bien placer le plotArea. On fera par exemple PosY = $titre->getHeight().

Prévoir la marge à droite maintenant. Si l'axe Y n'est présent qu'une fois, il vaut mieux prévoir une marge deux fois plus petite que celle de gauche. Sinon, il faut prendre la même. On calcule la largeur en faisant, pour notre exemple, Width = $c->getWidth() - 30 - 15.

Enfin, la hauteur sera déterminée par deux choses : est-ce que vous avez un titre en haut ? Est-ce que vous avez prévu de placer la légende en bas ? Sachant que pour les cas classiques, il y a également les labels de l'axe X à afficher. Pour simplifier, je calcule en attribuant aux labels de l'axe X la même valeur que la marge pour l'axe Y, et pour la légende je donne l'équivalent de la marge de gauche et de la marge de droite. Pour notre exemple ça donne : Height = $c->getHeight() - $title->getHeight() - 30 - 45.

Etape 6 : la légende

Il faut prévoir l'emplacement de la légende avant la création du PlotArea car, comme dit plus haut, sa largeur et sa hauteur ne seront pas calculées de la même façon si la légende est située en bas, en haut ou sur le côté.

La fonction de base pour créer la légende est : $c->addLegend(PosX, PosY, boolVertical, "font", fontSize);.

Quelques précisions :

boolVertical attend true ou false. True signifiera que les entrées s'afficheront en colonne les unes en dessous les autres.

PosX et PosY sont prises en compte en fonction d'un point de référence de la boîte. Par défaut, ce point est le coin en haut à gauche.

Pour aligner la boîte verticalement, il peut être intéressant de changer ce point de référence avec $legendBox->setAlignment(Bottom); Il suffira d'avoir prévu PosX égal à la moitié de la boîte, par exemple en faisant $c->getWidth()/2.

Les entrées dans la légende sont à ajouter en même temps que l'ajout d'un nouveau Layer (étape suivante).

Etape 7 : les barres et l'axe X

Pour simplifier la compréhension de cette partie, il faut garder en tête que si vous avez deux entrées dans votre légende, c'est que vous allez avoir deux layers.

Pour ajouter un layer on utilise $barLayer = $c->addBarLayer($tabData, color, "Name");

Etape 8 : la récupération du graphique

ChartDirector, après avoir récupéré tout votre paramétrage, créera le graphique sous la forme d'une image.

Le code suivant permet de choisir le format et de récupérer l'image : header("Content-type: image/png");
print($c->makeChart2(PNG));

Conclusion : exemple complet

Ceci est le récapitulatif de toutes les étapes utilisées pour créer l'exemple ci-dessous.

Exemple concret de l'utilisation du tutoriel

<!-- Etape 1 : création de l'objet -->
$c = new XYChart(300, 300);

<!-- Etape 2 : récupération des données -->
$data = array(6.3, 2.3, 0.7, 3.4, 2.2, 2.9);

<!-- Etape 3 : création des labels de l'axe X -->
$labels = array("Jan", "Feb", "Mar", "Apr", "May", "Jun");

<!-- Etape 4 : création du titre -->
$title = $c->addTitle("Titre de test", "arial.ttf");

<!-- Etape 5 : création de la zone du graphique -->
$plotArea = $c->setPlotArea(30, $title->getHeight(), $c->getWidth() - 30 - 15, $c->getHeight() - $title->getHeight() - 30 - 45);

<!-- Etape 6 : création et positionnement de la légende -->
$legendBox = $c->addLegend($c->getWidth()/2, $c->getHeight() - 15, false, "arial.ttf", 8);
$legendBox->setAlignment(Bottom);
$c->xAxis->setLabels($labels);

<!-- Etape 7 : création des barres et ajout des labels de l'axe X -->
$barLayer = $c->addBarLayer($data, 0xce32d8, "Joueur 1");

<!-- Etape 8 : création de l'image -->
header("Content-type: image/png");
print($c->makeChart2(PNG));