Affichage Graphique Highcharts sur page Design

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

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

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?

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

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>

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.

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

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>

Salut kaktusatomik,

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

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

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

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.

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

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


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