[4/5] CREER SON SITE DOMOTIQUE AVEC ZIBASE, NAS SYNOLOGY, MYSQL ET WORDPRESS

Aller à l'article précédent sur le même thème

 

  Aller à l'article suivant sur le même thème (dispo depuis le 06/07/2013)

PRÉSENTATION DE GRAPHIQUES DE RELEVES DE SONDES VIA HIGHCHARTS.COM

 

Si vous avez suivi les articles précédents (sinon il n'est pas trop tard :-D), vous avez maintenant l'ensemble de vos sondes enregistrés en base de données. Le présent article va vous permettre d'effectuer des graphiques basés sur ces données enregistrées. 

J'avais à l'époque utilisés l'API google chart et j'ai découvert la librairie highcharts.com qui permet d'obtenir des graphiques plus dynamiques avec des possibilités multiples. Je vous invite à vous rendre directement sur le site highcharts.com qui présente de nombreux exemples et permet de générer le code automatiquement. Le petit inconvénient de cette API est peut être sa lourdeur qui sur tablette pourra présenter quelques lags.

Les graphiques que je vous propose ne sont pas forcément exhaustifs et vous pouvez utiliser tout autre types de modèles. De mon coté, je n'ai pas encore exploré l'ensemble des possibilités de cette excellente API.

Vous trouverez dans l'archive ZIP en pied de cet article, l'intégralité du site mais avec un nouveau répertoire dédié aux graphiques et nommé étrangement graphiques ^^ :

• Répertoire graphiques composé de 3 sous répertoires.  : 
• jquery : js correspondant au jquery
• js : librairie permettant de faire tourner highcharts
• themes : rhème de highcharts

• Les graphiques eux-mêmes se trouve à la racine du répertoire ; il y a 5 pages php :
• highcharts_temp.php qui présente des graphiques de températures et hygrométrie de mes 3 sondes,
• highcharts_meteo.php qui présente les mesures des sondes anénométrique, pluviométrique et UV,
• highcharts_chauffage.php qui présente le chauffage on/off (quotidien, par jour et par mois)
• highcharts_vmc.php qui présente la vitesse de la VMC 1ère vitesse ou 2 ème vitesse (quotidien, par jour et par mois)
• highcharts_alarme.php qui présente si l'alarme est on/off.

Cela donne des graphes entièrement dynamiques où il est possible de choisir la période (via la saisie de dates ou le slider dessous le graphe) et dynamiquement le graphe correspondant s'affiche. Je trouve cela très sympa sans avoir eu à faire de grands développements.

Voici quelques captures de rendus :

Pour intégrer cela dans le site WORDPRESS, j'ai utilisé la même technique décrite dans l'article précédent grâce à l'extension Shortcode Exec PHP. J'ai intégré le tout dans un menu WORDPRESS en quelques clics.

Cela donne :

J'espère que ces captures vous donneront envie de vous lancer dans l'utilisation de cette API. Un dernier article vous présentant l’affichage des évènements et l'interface pour modifier les sondes devrait voir le jour d'ici le 6/7 juillet 2013. En attendant, vous trouverez ci-dessous le ZIP contenant le site complet avec l'ajout de ces graphiques.


Télécharger le ZIP

Aller à l'article précédent sur le même thème

Aller à l'article suivant sur le même thème (dispo depuis le 06/07/2013)