Comme on me l’a gentiment demandé, j’ai écrit un petit tutoriel sur le moyen d’intégrer Highcharts à du PHP sans passer par un framework. Donc je vais vous montrer comment générer un graphique à l’aide d’un csv. Dans un premier temps, vous devez télécharger la librairie PHP – Highcharts de Ghunti.

Transformer un CSV en Array()

Pour transformer un CSV en array() on va utiliser la fonction fgetcsv()

 1function get_array() {
 2
 3$file = fopen('highcharts_demo.csv', 'r');
 4while (($line = fgetcsv($file,'',';')) !== FALSE) {
 5    $array_data[] = $line;
 6}
 7fclose($file);
 8unset($array_data[0]);
 9return $array_data;
10}

Ce qui vous donnera un array() de cette forme

 1Array
 2(
 3    [0] => Array
 4        (
 5            [0] => Livre
 6            [1] => Nombre de fois lue
 7            [2] => Mois de lecture
 8            [3] => Lecteur
 9        )
10
11    [1] => Array
12        (
13            [0] => WordPress
14            [1] => 2
15            [2] => janvier
16            [3] => Mickaël
17        )
18
19    [2] => Array
20        (
21            [0] => PHP
22            [1] => 3
23            [2] => janvier
24            [3] => Raphaël
25        )
26
27    [3] => Array
28        (
29            [0] => SQL
30            [1] => 1
31            [2] => fevrier
32            [3] => Virginie
33        )
34
35    [4] => Array
36        (
37            [0] => Jquery
38            [1] => 5
39            [2] => mars
40            [3] => Mickaël
41        )
42)

[]

Transformation de l’array

Nous allons voir comment obtenir un graphique comme celui de droite. Tout d’abord il faudra impérativement modifier le tableau, pour qu’il nous renvoie ce que nous voulons, ce sera un tableau multidimensionnel, contenant la valeur et le libellé. On va donc récupérer les livres qui sont les plus lus. Pour qu’une portion du camembert soit détaché au moment de la visualisation, il faut insérer deux valeurs au tableau sliced => true et selected => true.

 1
 2function get_livres() {
 3
 4$array = get_array();
 5foreach ($array as $value) :
 6$totaux[$value[0]] += $value[1];
 7endforeach;
 8foreach ($totaux as $key => $value) :
 9if($value > 30) :
10$livres[] = array(
11
12'name' => $key , 
13'sliced' => true,
14'selected' => true, 
15'y' => intval($value)
16
17);
18
19else :
20
21$livres[] = array(utf8_decode($key),intval($value));
22endif;
23endforeach;
24return $livres;
25}

Générer le graphique

Maintenant, il manque juste à incorporer la fonction get_livres() au code pour que le graphique prenne forme.

 1
 2function pie_chart() {
 3
 4$chart1 = new Highchart();
 5
 6$chart1->chart->renderTo = "contain";
 7$chart1->chart->plotBackgroundColor = null;
 8$chart1->chart->plotBorderWidth = null;
 9$chart1->chart->plotShadow = false;
10$chart1->title->text = "Pourcentage de lecture par livre";
11
12$chart1->tooltip->formatter = new HighchartJsExpr("function() {
13    return '<b>'+ this.point.name +'</b>: '+ Math.round(this.percentage*100)/100 +' %';}");
14
15$chart1->plotOptions->pie->allowPointSelect = 1;
16$chart1->plotOptions->pie->cursor = "pointer";
17$chart1->plotOptions->pie->dataLabels->enabled = 1;
18$chart1->plotOptions->pie->dataLabels->color = "#000000";
19$chart1->plotOptions->pie->dataLabels->connectorColor = "#000000";
20
21$chart1->plotOptions->pie->dataLabels->formatter = new HighchartJsExpr("function() {
22    return '<b>'+ this.point.name +'</b>: '+ Math.round(this.percentage*100)/100 +' %'; }");
23
24$chart1->series[] = array('type' => "pie",
25                         'name' => "Lecture de Livre",
26                         'data' =>  get_livres());
27
28return $chart1->render();
29}

Démonstration et téléchargement

Vous pouvez télécharger les fichiers et avoir un aperçu de ce qu’on peut faire dans mon labo. Il y à deux fichiers important, chart.php qui regroupe les fonctions pour créer le graphique, functions.php contient toutes les fonctions pour modifier l’array obtenu à partir du CSV. Maintenant c’est à vous d’adapter cet exemple.