Affichage Graphique Highcharts sur page Design

Interfaces
1

Bonjour tout le monde,

j’ai une question concernant les personnes qui utilisent les graphiques Highcharts sur leur page design.

Sur mon Design, quand je change de page pour aller sur une page affichant un graphique highcharts, il est toujours vide, sans aucune valeur. Il faut que je recharge de nouveau cette page pour que les graphiques s’affichent avec les données.

Quand j’accède à la page j’ai ça:

image
image1280×799 190 KB

Si je recharge la page, tout s’affiche correctement:

image
image1280×799 299 KB

Je n’ai rien trouvé à ce sujet en parcourant le forum.
Est-ce que quelqu’un d’autre à ce problème?
Qu’est-ce qui pourrait causer cela?

2

Tu es sur quel navigateur ?
Tu as essayé avec un autre ?

3

Le problème apparaît aussi bien sur chrome sur PC que sur ma tablette murale avec fully kiosk.

Peut-être cela viendrait de la structure de mon code pour générer le graphique, voici un exemple:

<div id="Graphique_1" style="min-width: 150px; height: 410px;"></div>
<script>

    
    var chauffage;
    jeedom.cmd.execute({ id: '1156',
          success:  function(resultat) {   
            chauffage = parseFloat(resultat);
        }
  });
    var ecs;
    jeedom.cmd.execute({ id: '1191',
          success:  function(resultat) {   
            ecs = parseFloat(resultat);
        }
  });
    var prises;
    jeedom.cmd.execute({ id: '1123',
          success:  function(resultat) {   
            prises = parseFloat(resultat);
        }
  });
  var eclairage;
    jeedom.cmd.execute({ id: '1031',
          success:  function(resultat) {   
            eclairage = parseFloat(resultat);
        }
  });
    
    
  setTimeout(graph, 10); 
  function graph(){
    
    Highcharts.chart('Graphique_1', {
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie'
    },
    title: {
        text: ''
    },
    tooltip: {
        pointFormat: '{series.name}<b>{point.y}kWh soit: {point.percentage:.1f}%</b><b></b>'
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b>: {point.percentage:.1f} %'
            }
        }
    },
    series: [{
        type: 'pie',
        name: '',
        size: '100%',
        colorByPoint: true,
        data: [{
            name: 'Chauffage',
            y: chauffage,
            color: '#FE0000'
        }, {
            name: 'Eau Chaude',
            y: ecs,
            color: '#0021FF'         
        }, {
            name: 'Prises',
            y: prises,
            color: '#018100'
        }, {
            name: 'Autres',
            y: eclairage,
            color: '#FEB000'
        }]
    }]
});
}
  </script>
4

Huuuum en postant le message précédent je crois avoir trouvé une solution.
Si j’augmente le temps avant génération du graphique, c’est bon j’ai plus le problème.
Possible qu’il génère le graphique avant de pouvoir récupérer toutes les valeurs ce qui causerait le problème.

5

Rectification du message précédent, ça marche pas à tous les coups donc le problème reste entier…

6

Salut,
Il faudrait chainer tes appels du genre :

<div id="Graphique_1" style="min-width: 150px; height: 410px;"></div>
<script>
var chauffage, ecs, prises, eclairage;
jeedom.cmd.execute({
    id: '1156',
    success: function(resultat) {
        chauffage = parseFloat(resultat);
        jeedom.cmd.execute({
            id: '1191',
            success: function(resultat) {
                ecs = parseFloat(resultat);
                jeedom.cmd.execute({
                    id: '1123',
                    success: function(resultat) {
                        prises = parseFloat(resultat);
                        jeedom.cmd.execute({
                            id: '1031',
                            success: function(resultat) {
                                eclairage = parseFloat(resultat);
                                graph();
                            }
                        });
                    }
                });
            }
        });
    }
});



function graph() {

    Highcharts.chart('Graphique_1', {
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
        },
        title: {
            text: ''
        },
        tooltip: {
            pointFormat: '{series.name}<b>{point.y}kWh soit: {point.percentage:.1f}%</b><b></b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                }
            }
        },
        series: [{
            type: 'pie',
            name: '',
            size: '100%',
            colorByPoint: true,
            data: [{
                name: 'Chauffage',
                y: chauffage,
                color: '#FE0000'
            }, {
                name: 'Eau Chaude',
                y: ecs,
                color: '#0021FF'
            }, {
                name: 'Prises',
                y: prises,
                color: '#018100'
            }, {
                name: 'Autres',
                y: eclairage,
                color: '#FEB000'
            }]
        }]
    });
}
  </script>
7

Salut kaktusatomik,

merci pour ta réponse. J’ai essayé ta syntaxe. Malheureusement, toujours le même problème d’affichage.

8

ok, une erreur dans la console de chrome peut être ?

9

A priori, Chrome n’est pas en cause car j’ai le même problème sur IE et Fully Kiosk.

10

Bonjour @djedje,

J’arrive à faire un pie grace à ton code et j’ai aussi le pb de refresh du camembert. Dans ma page design essai l’acualisation de la page chrome efface le pie et je suis même obligé systématiquement de prendre la zone texte en édition et refaire sauvegarde. Pas encore vu le comportement sur tablette.

En // je tente le highchart sur des spline.
Pour l’instant je galère avec une anomalie « Uncaught SyntaxError: Invalid or unexpected token »
qu’il me reste à identifier.

EDIT :
PIE : Si je passe d’une page à l’autre cela se rafraichit correctement.
SPLINE : Ano code spline corrigé mais rien ne s’affiche. Si tu as un bout de code spline ou column a partagé ce serait sympa.

11

Bonjour @djedje et @kaktusatomik

Je suis arrivé à faire un code pour mélanger column + spline sur des id historiques (code moche mais pour l’instant ok).

Capture%20d%E2%80%99%C3%A9cran%20du%202020-02-23%2012-11-58
Capture%20d%E2%80%99%C3%A9cran%20du%202020-02-23%2012-11-58766×461 81.9 KB

est-ce que votre pb ne serait pas résolu par un setTimeout juste devant la fonction graph() :

…
setTimeout(graph, 1000);
function graph(){
…

12

Salut @raqpub
j’avais essayé différentes valeurs de timeout mais ça ne change rien, j’ai toujours ce problème d’affichage…

13

Effectivement je n’ai pas le pb sur mon Ubuntu+chrome, ni sur Android, et quelquefois sur la tablette avec habit browser.

14

Bonjour,

Je reviens sur ce sujet et j’aimerais savoir comment forcer le thème DarkSobre que pour les graphiques sur pages design (pour l’instant j’ai forcé DarSobre en thème principal et alternatif dans la config de Jeedom) ?

15

Bonjour à tous, je voudrais également me lancer dans un Highcharts perso. Grace au code du graphique camenbert je suis arriver à m’en faire un perso. Par contre celas fait 2h que j’essai de faire un graphique avec des colonne « stacked » et les lignes comme dans celui de djedje sans y parvenir. Si une âme charitable veut bien partager son code avec moi ça m’aiderai beaucoup.

Merci d’avance

16

Bonjour #djedje, je suis tombé sur votre post d’il y a deux an car je cherche à créer exactement le même graphique que celui de votre suivi journalier, il est top pour un bilan de production photovoltaïque… avez-vous pu résoudre vos problème?
J’aimerai adapter un code de HighCharts mais je galère à l’adapter à Jeedom via Htmldisplay.

17

Bonjour à tous,
Finalement quelqu’un a trouvé une solution pour l’affichage du graphique highcharts sur le design sans être obligé de recharger la page une deuxième fois ?
A plus.
Samuel.

18

J’ai réussi à adapter le code mon lien, il reste à lier les valeurs jeedom…

Je n’ai pas le soucis décrit par @djedje . Si quelqu’un a un conseil à me donner pour l’intégration des valeurs…

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Test</title>

		<style type="text/css">
#container {
    height: 400px;
}

.highcharts-figure,
.highcharts-data-table table {
    min-width: 310px;
    max-width: 800px;
    margin: 1em auto;
}

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #ebebeb;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}

.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
    padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}

.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

		</style>
	</head>
	<body>
<script src="modules/highcharts.js"></script>
<script src="modules/exporting.js"></script>
<script src="modules/export-data.js"></script>
<script src="modules/accessibility.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
Test
    </p>
</figure>


		<script type="text/javascript">
Highcharts.chart('container', {
    chart: {
        type: 'areaspline'
    },
    title: {
        text: 'Legende de test'
    },
    legend: {
        layout: 'vertical',
        align: 'left',
        verticalAlign: 'top',
        x: 150,
        y: 100,
        floating: true,
        borderWidth: 1,
        backgroundColor:
            Highcharts.defaultOptions.legend.backgroundColor || '#FFFFFF'
    },
    xAxis: {
        categories: [
            'Monday',
            'Tuesday',
            'Wednesday',
            'Thursday',
            'Friday',
            'Saturday',
            'Sunday'
        ],
        plotBands: [{ // visualize the weekend
            from: 4.5,
            to: 6.5,
            color: 'rgba(68, 170, 213, .2)'
        }]
    },
    yAxis: {
        title: {
            text: 'Fruit units'
        }
    },
    tooltip: {
        shared: true,
        valueSuffix: ' units'
    },
    credits: {
        enabled: false
    },
    plotOptions: {
        areaspline: {
            fillOpacity: 0.5
        }
    },
    series: [{
        name: 'John',
        data: [3, 4, 3, 5, 4, 10, 12]
    }, {
        name: 'Jane',
        data: [1, 3, 4, 3, 3, 5, 4]
    }]
});
		</script>
	</body>
</html>