Page 2 sur 2

Re: Graphique et modification échelle sur l'axe Y

Publié : 06 mai 2018, 14:16
par Bodom
Bonjour,
Bon voilà où j'en suis, comme expliqué plus haut j'ai choisi de me servir du fichier csv crée dans l'historique et ça marche!!
Comme mon code le récupère à la volée, donc il est mis automatiquement à jour juste avant d'afficher le graphique.
Sans titre.png
Sans titre.png (28.81 Kio) Consulté 3186 fois
Voici mon code:

Code : Tout sélectionner

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
                      <html>
                      <head>
                      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript">

    $(document).ready(function() {

        var c = [];
        var d = [];
        var options = {
                chart: {
                    renderTo: 'chart',
                    defaultSeriesType: 'line'
                },
                title: {
                    text: 'Humidité'
                },
                xAxis: {
                    title: {
                        text: 'Date Measurement'
                    },
                    categories: c
                },
                yAxis: {
                        min: 0, 
                        max: 100,
                    title: {
                        text: 'Humidité'
                    }
                },
                series: [{
                    data: d
                }]
        };

        var jqxhr = $.get('../../core/php/export.php?type=cmdHistory&id=2', function(data) {
            var lines = data.split('\n');
            $.each(lines, function(lineNo, line) {
                var items = line.split(';');
                c.push(items[0]);
                d.push(parseInt(items[1]));
            })
            var chart = new Highcharts.Chart(options);

        });
    });



 $(document).ready(function() {

        var c = [];
        var d = [];
        var options = {
                chart: {
                    renderTo: 'chart2',
                    defaultSeriesType: 'line'
                },
                title: {
                    text: 'Température'
                },
                xAxis: {
                    title: {
                        text: 'Date Measurement'
                    },
                    categories: c
                },
                yAxis: {

                    title: {
                        text: 'Température'
                    }
             
                },
        
                series: [{
                    data: d
                }]
        };

        var jqxhr = $.get('../../core/php/export.php?type=cmdHistory&id=1', function(data) {
            var lines = data.split('\n');
            $.each(lines, function(lineNo, line) {
                var items = line.split(';');
                c.push(items[0]);
                d.push(parseInt(items[1]));
            })
            var chart2 = new Highcharts.Chart(options);

        });
    });





</script>
   </head>
   <body>
        <div id="chart" style="width: 800px; height: 400px; margin: 0 auto"></div>
  <div id="chart2" style="width: 800px; height: 400px; margin: 0 auto"></div>
   </body>
</html>
Voilà, il suffit de changer l'id de la commande par celle que l'on veux afficher.

Code : Tout sélectionner

var jqxhr = $.get('../../core/php/export.php?type=cmdHistory&id=2'
Par contre, je rencontre 2 problèmes que je n'ai pas encore réussi à résoudre:

1) mon code php pour Highchart n'est pas très propre et me fais l'erreur de "Token invalide" sur le mode design de Jeedom.
J'ai contourné ce problème provisoirement en créant un fichier php à la racine de jeedom grâce au plugin outils de développement et collé mon code dedans. On peux ensuite l'appeler dans design avec un iframe ou avec le plugin webview.

2) Je ne comprends pas trop pourquoi mais mon code ne m'affichent pas les décimales, je n'ai droit qu'aux unités. c'est la première fois que je fais des graphs à partir d'un csv et après plusieurs test, je n'arrive pas à les afficher. Je suis sûr que cela ne doit pas être grands choses. Si qqn de plus expert que moi pouvait y jeté un oeil.

voici comment se présente les données générés par Jeedom:

Code : Tout sélectionner

2018-04-26 11:05:00;24,55
2018-04-26 11:35:00;24,75
2018-04-26 11:45:00;24,8
Quand je m'en sers pour générer mon graph, J'ai bien le 24 qui s'affiche mais pas 24,55. Il me manque qqc dans mon code.

En tout cas de cette manière, toutes les customisations Highcharts deviennent possible et fonctionnent parfaitement. J'en suis ravi, c'est exactement ce que je voulais faire.

J’espère arriver à corriger au moins le problème des décimales.
Je pense que ça pourras servir à certain.
Cordialement,
Bodom.

Re: Graphique et modification échelle sur l'axe Y

Publié : 13 mai 2018, 13:00
par Loic74
Petit update, le post ci-dessous de benj29 explique comment afficher un chart en allant chercher les données dans la BD:

Re: Graphique et modification échelle sur l'axe Y

Publié : 13 mai 2018, 13:51
par bibimax
Bodom a écrit :
06 mai 2018, 14:16
J’espère arriver à corriger au moins le problème des décimales.
Salut,

ça ne serait pas un problème de virgule vs point pour le marqueur des décimales ?

Re: Graphique et modification échelle sur l'axe Y

Publié : 14 mai 2018, 13:37
par Bodom
Bonjour,
Merci @Loic74,
J'avais déjà vu ce post, il est un peu dur à mettre en oeuvre pour mes compétences. Je préfère le faire avec le csv cela me parait moins complexe et certainement moins risqué.
Mon projet est pas mal avancé mais n'ai pas trop de temps en ce moment a lui accorder.
Effectivement @bibimax, c'était bien ça mon erreur, j'ai dû modifier la façon d'appeler le fichier csv, tout est rentré dans l'ordre. Merci.
Je reviendrait sur ce topic pour faire voir mes avancements.
Cordialement,
Bodom.

Re: Graphique et modification échelle sur l'axe Y

Publié : 14 mai 2018, 13:49
par Loic74
Franchement, n'y connaissant rien en php j'ai réussi à l'intégrer assez facilement, résultat ci-dessous.
Il faut juste changer l'ID de la commande à suivre + éditer ta clé API à deux endroits, c'est tout.

En fait je galère plus pour trouver un moyen d'éditer les icones du menu avec un logiciel libre (j'ai pas photoshop) pour me faire un icone de suivi conso... :oops:
Conso.png
Conso.png (108.48 Kio) Consulté 3138 fois

Re: Graphique et modification échelle sur l'axe Y

Publié : 14 mai 2019, 11:27
par Jef73
Si ça peut t'aider (moi j'utilise celles du soleil sur le toit et les panneaux, ainsi que celle de l'éclair pour suivre conso et production électrique), voici toutes celles que j'ai récupérées et d'autres que je me suis créées grâce au masque totoshiote :)
Il y a deux catégories : l'icône (icone_xxxxx.png) et la même dans un cercle (icone_cercle_xxxxx.png). Le nom de chaque fichier permet de bien les repérer ;)
Annotation 2019-05-14 112428.png
Annotation 2019-05-14 112428.png (219.91 Kio) Consulté 2848 fois
 
Fichier archive à télécharger :
images.rar
(1002.44 Kio) Téléchargé 31 fois
 
Tu peux aussi en trouver une quantité impressionnante ici :
- https://www.flaticon.com/
- https://www.freepng.fr/


PS : et le nez de cochon, ce n'est pas parce qu'on abuse du cassoulet à la maison, c'est pour mes afficheurs de pollution atmosphérique :lol:

Re: Graphique et modification échelle sur l'axe Y

Publié : 14 mai 2019, 11:50
par Jef73
Bodom a écrit :
14 mai 2018, 13:37
[...]
Effectivement @bibimax, c'était bien ça mon erreur, j'ai dû modifier la façon d'appeler le fichier csv, tout est rentré dans l'ordre. Merci.
Je reviendrait sur ce topic pour faire voir mes avancements.
Cordialement,
Bodom.
Tu pourras donner la modif que tu as faite pour les virgules STP quand tu auras le temps ?
Merci par avance :)