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

 
  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

9 commentaires:

  1. Super serie d'articles, après pas mal d'adaptations pour que la plupart du code tourne sur mon NAS j'ai quand même un soucis avec le graph chauffage. Peut etre a tu eu ce genre de soucis ? Quand je regarde l’exécution de la page j'ai une erreur :
    Uncaught Highcharts error #19: www.highcharts.com/errors/19
    Uncaught TypeError: Cannot read property 'length' of undefined
    Et là je suis un peu sec...

    RépondreSupprimer
    Réponses
    1. Ce commentaire a été supprimé par l'auteur.

      Supprimer
    2. Merci beaucoup, max ça fait plaisir. Non je n'ai pas eu ce souci sur le graph de chauffage. Tu peux voir la documentation relative à l'erreur qui semble indiquer trop de valeurs sur l'axe des abscisses. En t'aidant de la doc highchart et en utilisant la propriété tickpixelinterval cela peut résoudre ton problème. Désolé de ne pouvoir t'aider davantage mais n'ayant pas réussi à reproduire l'erreur, je ne peux faire mieux....Courage tu vas trouver et n'hésite pas à poster la réponse ici si tu l'as trouve, ça peut toujours aider. Domotiquement.

      Supprimer
  2. Bizarre ce message, j'avais vu cette traduction mais je ne comprends pas bien. Voici mes 3 listes de valeurs :
    Liste 1 = [23583685000,1],[23583692000,0],[1380576266000,0],[1380576878000,1],[1380578399000,0],[1380578401000,1],[1380578492000,0],[1380657450000,1],[1380657505000,0],[1380659110000,1],[1380659166000,0],
    Liste 2 = [23583600000,0.05],[1380492000000,0.02],[1380578400000,0.06],
    Liste 3 = [23583600000,0.05],[1377986400000,0.02],[1380578400000,0.06],

    Je n'ai pas l'impression que ca fasse vraiment trop de données !!
    Je vais regarder comment utiliser cette propriété tickpixelinterval

    RépondreSupprimer
  3. Bon ben je crois que j'ai trouvé, a priori il me manquait une propriété sur Xaxis : ordinal : false
    j'ai trouvé ça sur un forum :
    Found it, the nomenclature between highcharts and highstock are different.

    for hightstock its xAxis: {
    ordinal: false }

    Voilà si ça peut aider quelqu'un.

    RépondreSupprimer
  4. Ce commentaire a été supprimé par un administrateur du blog.

    RépondreSupprimer