Exercices ChartDirector

Voici quelques graphiques réalisés à partir de la bibliothèque logicielle ChartDirector. Les graphiques sont placés dans l'ordre croissant de mon apprentissage.

Quelques détails qui peuvent être importants :

Premier graphique avec ajout d'un premier bloc texte. C'est l'occasion également d'utiliser les propriétés background, pos, width et height. Découverte des méthodes qu concernent BarLayer, les axes x et y, la police d'écriture.
Ajout d'une couleur différente pour chaque barre, effet métallisé sur les barres, barres arrondies, disparition des numéros de l'axe Y et ajout des valeurs directement au dessus des barres. Gradient sur le background du plotArea et suppression des lignes du quadrillage.
Utilisation de setTickOffset(0.5) pour décaller les dates de l'axe x, effet verre teinté sur les barres. Axe y de chaque côté, correction de son épaisseur avec setWidth.
Intervertir les axes x et y avec swapXY(). Mettre des bords arrondis avec setRoundedFrame. Calculer la hauteur ou la largeur avec $c->getWidth() et $c->getHeight(). Calculer la taille et la position du plotArea en fonction de l'emplacement du titre et de la taille du graphique grâce à packPlotArea.
Arrière-plan avec effet métallisé grace à brushedSilverColor() en paramètre de new XYChart et effet relief du graphique avec le 5e paramètre. Effet cylindre sur les barres grâce à setBarShape(CircleShape) et effet 3D avec set3D(). A noter que PolygonShape(x) avec x pour le nombre de côtés permet de choisir une forme différente pour les barres.
Sélectionner une barre en particulier pour lui appliquer une forme grâce à setBarShape.
Exemple : $layer->setBarShape(StarShape(5), 0, 0)
Le 1er paramètre est la forme, le 2e le groupe et le 3e l'id de l'objet. Il s'agît de tableau donc l'index commence à 0.
Utiliser setBarLayer2 pour remplir une barre avec plusieurs données et ajout d'une légende. Afficher les données et le total de chaque barre en gras. Centrer les éléments.
Utilisation de setDropShadow pour placer un boxShadow en dessous du graphique. setSearchPath(dirname(__FILE__)) permet de s'assurer que le chemin utilisé par certaines méthodes soit bien celui du fichier. Ajout des données pour chaque élément de la légende (Si 5 couleurs, alors 5 groupes de données) avec addDataSet(groupe de données, couleur du bloc, label). Dans le label, il est possible d'y ajouter une image grâce à cette nomenclature : "<*block,valign=absmiddle*><*img=img/service.png*> Service<*/*>". La taille du bloc couleur dans la légende est fixé grâce à $legendBox->setKeySize(16, 32).
Utilisation de deux couleurs différentes en background du setPlotArea. Le contenu de la légende est affiché en ligne (3e argument passe detrue à false). Marge de 20px dans l'axe y pour pouvoir y placer la légende. addBarLayer2(Side, 3) pour avoir 3 barres côte à côte par intitulé. Faire en sorte que la légende fasse toujours la même taille de le plotArea en plaçant au même x et avec la même width ($legendObj->setWidth($plotArea->getWidth())). Les bordures des barres ont un effet de lumière grâce à $layer->setBorderColor(Transparent, softLighting(Top)). Quadrillage en pointillé avec $c->dashLineColor(0xcccccc, DotLine) (dans les deux derniers paramètres de setPlotArea).
Utilisation de $layer->setOverlapRatio(0.5) afin que les trois barres passent l'une devant l'autre.
Création d'un graphique complexe. Organisation des données : le graphique peut être considéré comme la fusion de deux graphiques que l'on voudrait comparer. Chaque graphique informe sur les revenus de trois filières, chaque filière ayant des revenus locaux et internationaux. Ces deux informations sont affichées en "stacked". L'un des graphiques renseigne l'année 2001 (1er groupe de données), et l'autre l'année 2002 (2e groupe de données). On part donc de quatres tableaux de données (locaux 2001, internationaux 2001, locaux 2002, internationaux 2002) chacun renseignant dans l'ordre les trois filières.
Les groupes données sont créés avec $layer->addDataGroup("2001") puis les tableaux y sont ajoutés à la suite avec $layer->addDataSet(tableau, couleur, label). On gère l'espace entre les barres avec $layer->setBarGap(Dans le même x, entre les x). Réserver 20% de l'espace du graphique pour afficher la valeur avec $c->yAxis->setAutoScale(0.2). Personnaliser le label de la légende avec $legendBox->setText("Year {dataGroupName} {dataSetName} Revenue").
Sélectionner une partie des données en fonction d'un critère numérique. Ici tout ce qui est en dessous de zéro sera orange, le reste en bleu. Pour faire la sélection, on crée deux tableaux identiques à partir de $data, mais on y applique deux méthodes différentes. $tmpArrayMath1->selectGEZ(null, NoValue) vérifie si la valeur est égale ou supérieure à zéro; Dans le cas contraire, le NoValue indique que l'index sera vide. Même principe pour $tmpArrayMath1->selectLTZ(null, NoValue) mais pour les valeurs négatives ici. Enfin, chaque tableau est ajouté avec $layer->addDataSet($tmpArrayMath1->result(), couleur) (A faire deux fois donc). $layer->yZoneColor(0, 0xcc3300, 0x3333ff) est utilisé pour créer deux zones, dont la frontière est à y = 0 dans lesquels les labels des barres ne seront pas écrits de la même couleur. Le background du plotArea change grâce à la création de zones comme $c->yAxis->addZone(0, 9999, 0xccccff) et $c->yAxis->addZone(-9999, 0, 0xffcccc). L'axe Y est placé à droite avec $c->setYAxisOnRight(true). AxeY et ses labels transparents avec $c->yAxis->setColors(Transparent, Transparent).
Il s'agît de deux graphiques créés l'un après l'autre puis rassemblés dans un 3e. Les barres sont collées les uns aux autres grâce à $femaleLayer->setBarGap(TouchBar). Pour s'assurer que l'AxeY bleu et l'AxeY rose aient le même gap, on ajoute en réalité toutes les données dans chacun des tableaux. On choisit d'ajouter les données qu'on ne veut pas voir affichées sous la forme d'une courbe (addLineLayer) transparente. Le label au milieu est ajouté en étant considéré comme les labels de l'axeX rose. Il faut donc prévoir une taille de graphique plus importante. POur le deuxième graphique, on n'oublie pas de mettre l'axeY de l'autre côté avec $c2->yAxis->setReverse(). Le graphique qui réunit les deux autres est créé avec new MultiChart(), on y ajoute les graphiques avec $m->addChart(125, 25, $c) par exemple.