Faire des graphs avec Highcharts

Et oui c’est l’été, et je passe beaucoup moins de temps devant l’ordinateur. Les projets avancent moins. Mais néanmoins, je vous propose de vous partager des morceaux de codes php pour faire des graphiques Highcharts.

Qu’est ce que Highcharts ?

Highcharts est un ensemble de scripts php qui permettent de générer des graphiques interactifs. Utilisé par domotiz par exemple, ce moteur est très puissant et je m’en suis servi pour le site météo (pas encore en production mais bientôt).

Voici quelques exemples de graphiques que l’on peut générer :

Graphique de température journalier

Pour le site de météo, j’ai créé un graphique qui permet de voir les 24h dernières heures pas tranche de 5 min.

Pour obtenir le résultat ci dessus, il faut tout d’abord récupérer les valeurs de la base mysql. On créé 2 tableaux, un avec les données et un avec les labels.

$sql = "SELECT date,value FROM temperature where  date > (NOW() - INTERVAL 24 HOUR)";
$result = $conn->query($sql);


if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $data[] = $row['value'];
        $data_label[] = $row['date'];
    }
} else {
    echo "0 results";
}

$sql2 = "SELECT cast(avg(value) AS DECIMAL(10,2)) as avg FROM temperature where date > (NOW() - INTERVAL 24 HOUR)";
$result2 = $conn->query($sql2);
$row = $result2->fetch_assoc();
for($i=0;$i<count($data);$i++){
	$moyenne[$i] = $row;
}

Ensuite, on créé le graphique.
On voit notamment que l’ajout de données se fait via la ligne

data: [<php echo join($data, ','); ?>],

Voici le morceau de code complet pour le graphique :

Highcharts.setOptions({
 global: { useUTC: false }
});
Highcharts.chart('container_temp', {
    chart: {
        type: 'spline',
        scrollablePlotArea: {
            minWidth: 600,
            scrollPositionX: 1
        }
    },
    title: {
        text: 'Temperature sur 24 heures'
    },
    xAxis: {
        type: 'datetime',
        labels: {
            overflow: 'justify'
        },        
    },
    yAxis: {
        title: {
            text: 'Temperature °C'
        },
        minorGridLineWidth: 0,
        gridLineWidth: 0,
        alternateGridColor: null, 
    },
    tooltip: {
        valueSuffix: ' °C'
    },
    plotOptions: {
        spline: {
            lineWidth: 4,
            states: {
                hover: {
                    lineWidth: 5
                }
            },
            marker: {
                enabled: false
            },
            pointInterval: 300000,
          pointStart:<?php echo strtotime($data_label[0])*1000;?>
            
        }
    },
    series: [{
        name: 'Temp',
        data: [<?php echo join($data, ',') ?>],
        color: '#00c0ef'
        

    	},
    ],
    navigation: {
        menuItemStyle: {
            fontSize: '10px'
        }
    }
});

Enfin, on créé un div dans le code à l’endroit où l’on souhaite notre graphique, avec en référence l’id du container créé (ici container_temp).

<div id="container_temp" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Graphique de pluie hebdomadaire

Même principe ici mais pour un graph de baton.

Voici le code highchart (en javascript):

    var arr = [];
   <?php for ($i=0;$i<count($data_label3);$i++){ ?>
   arr.push(['<?php echo $data_label3[$i];?>']);
   <?php } ?>


Highcharts.chart('container_rainweek', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Total pluie 7 derniers jours'
    },
    xAxis: {
        type: 'datetime',
        labels: {
            overflow: 'center'
        },
        startOnTick: true,
        showFirstLabel: true,
        endOnTick: true,
        showLastLabel: true,
        categories: arr,
        tickInterval: 1,
        labels: {
            formatter: function() {
                return this.value.toString();
            },
            rotation: 0.1,
            align: 'center',
            step: 1,
            enabled: true
        },
        style: {
            fontSize: '8px'
        }
    },
    yAxis: {
        min: 0,
        title: {
            text: 'mm'
        },
        stackLabels: {
            enabled: true,
            style: {
                fontWeight: 'bold',
                color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
            }
        }
    },
    legend: {
        align: 'right',
        x: -30,
        verticalAlign: 'top',
        y: 25,
        floating: true,
        backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
        borderColor: '#CCC',
        borderWidth: 1,
        shadow: false
    },
    tooltip: {
        headerFormat: '<b>{point.x}</b>
',
        pointFormat: 'Total: {point.stackTotal}'
    },
    plotOptions: {
        column: {
            stacking: 'normal',
            dataLabels: {
                enabled: false,
                color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
            }
        }
    },
    series: [{
        name: 'Pluie',
        data: [<?php echo join($data3, ',') ?>],
        color: '#0073b7'
    }]
});