comment ajouter des données dynamiques dans un highchart ?

Question

J'ai un Highchart qui reçoit des données JSON via AJAX et jQuery. Mais mon graphique n'affiche pas les points tant que je ne passe pas la souris sur le graphique. Et même dans ce cas, les points se trouvent tous tout en haut du graphique. Je ne pense pas que j'ajoute correctement mes points à la série. Veuillez me dire ce que je fais de mal dans la fonction jsonpcallback.

Gracias.

        <script type="text/javascript">
    <!-- Begin Chart options-->

    // define the options
            var options = {
                            chart: {renderTo: 'container'},
                            title: {text: 'Brewery'},
                            subtitle: {text: ' '},
                            xAxis: {text: 'Time',type: 'datetime'},
                            yAxis: [{ // left y axis
                                        title: {text: 'Temperature ()'},
                                        labels: {align: 'left', x: 3, y: 16,
                                                formatter: function() {
                                        return Highcharts.numberFormat(this.value, 0);}
                                    },
                                    showFirstLabel: false}, 
                                    { // right y axis
                                        linkedTo: 0, gridLineWidth: 0, opposite: true,
                                        title: {text: 'Temperature ()'},
                                                labels: {align: 'right', x: -3, y: 16,
                                                    formatter: function() {
                                        return Highcharts.numberFormat(this.value, 0);}
                                    },
                                    showFirstLabel: false
                            }],
                            legend: {align: 'left', verticalAlign: 'top', y: 20,
                                    floating: true, borderWidth: 0},
                            tooltip: {shared: true, crosshairs: true},
                            plotOptions: {  series: {cursor: 'pointer',
                                                    point: {events: {
                                                    click: function() {
                                                    hs.htmlExpand(null, {
                                                    pageOrigin: {
                                                        x: this.pageX, 
                                                        y: this.pageY
                                                    },
                                                    headingText: this.series.name,
                                                    maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) +':<br/> '+ 
                                                    this.y +'()',
                                                    width: 200});
                                                    }}},
                            marker: {lineWidth: 1}}},
                            series: [   {name: 'Hot Liqour Tank'},
                                        {name: 'MashTun'},
                                        {name: 'Brew Kettle'},
                                        {name: 'Post Chiller'},
                                        {name: 'Control Box'}
                                    ]
            };
    <!-- End Chart Options -->
    var chart;
    //after DOM is loaded setup timeout to call the ajax method
    $(document).ready(function() {
        //call function to render the chart and setup the options
        renderChart();
    });

    //this function requests the data
    function reqData(){
        $.ajax({
            url: "http://192.168.0.11/"+Math.random(),
            dataType: "jsonp",              
            jsonp: "callback",
            jsonpCallback: "jsonpcallback"
        });
    }

    function jsonpcallback(rtndata) { 
        for(var i = 0; i < rtndata.length; i++){
            if(rtndata[i].sensor=="hlt")
            {
                chart.series[0].addPoint([rtndata[i].time, rtndata[i].temp]);
            }
            else if(rtndata[i].sensor=="mt")
            {
                chart.series[1].addPoint([rtndata[i].time, rtndata[i].temp]);
            }
            else if(rtndata[i].sensor=="bk")
            {
                chart.series[2].addPoint([rtndata[i].time, rtndata[i].temp]);
            }
            else if(rtndata[i].sensor=="pc")
            {
                chart.series[3].addPoint([rtndata[i].time, rtndata[i].temp]);
            }
            else if(rtndata[i].sensor=="box")
            {
                chart.series[4].addPoint([rtndata[i].time, rtndata[i].temp]);
            }       
        }
    }

    function renderChart(){
        chart = new Highcharts.Chart(options);
    }

    //continually poll for data
    setInterval(reqData, 5000);
    </script>

Answer 1

Je pense que vous y êtes presque ; la seule pièce qui vous manque est une carte de crédit. initial appel à votre regData de la fonction événement de chargement .

Donc, à votre deuxième ligne après définir les options modifiez cette ligne :

 chart: {renderTo: 'container'},

à ça :

chart: {renderTo: 'container', events: {load: regData}},

Answer 2

Essayez de convertir les chaînes de temps en objets datetime Javascript. Highcharts lira alors les dates correctement. Par exemple, si la date JSON est au format 'YYYY-MM-DD', vous pouvez utiliser ce code :

    var dates = [];
    $.each(jsondata[0], function(itemNo, item) {
        year = parseInt(item.split('-')[0], 10);
        month = parseInt(item.split('-')[1], 10);
        day = parseInt(item.split('-')[2], 10);
        dt = Date.UTC(parseInt(year), parseInt(month), parseInt(day));
        series[0].data.push([dt, parseInt(jsondata[2][itemNo], 10)]);
        series[1].data.push([dt, parseInt(jsondata[1][itemNo], 10)]);
        dates.push(dt);
    });

    options.series = series;