Динамический график с Highcharts с использованием JSON

У меня есть вопрос о том, как создать динамическую диаграмму с использованием json, я попытался, и мой график не показал результат, когда я проверил, у меня нет ошибок с моим кодом. Это мой код:

    <script>
    var chart; // global

    function requestData() {
        $.ajax({
            url: 'api_heartrate.php', 
            success: function(point) {
                var series = chart.series[0],
                    shift = series.data.length > 20; // shift if the series is longer than 20

                // add the point
                chart.series[0].addPoint(eval(point), true, shift);

                // call it again after one second
                setTimeout(requestData, 1000);  
            },
            cache: false
        });
    }

    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                defaultSeriesType: 'spline',
                events: {
                    load: requestData
                }
            },
            title: {
                text: 'Live random data'
            },
            xAxis: {
                type: 'datetime',
                tickPixelInterval: 150,
                maxZoom: 20 * 1000
            },
            yAxis: {
                minPadding: 0.2,
                maxPadding: 0.2,
                title: {
                    text: 'Value',
                    margin: 80
                }
            },
            series: [{
                name: 'Random data',
                data: []
            }]
        });     
    });
    </script>

</head>
<body>

    <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>`

это мой JSON: http://health.barrukurniawan.tech/api_heartrate.php[{"time":"2018-08-02 09:30:11","nilai_sensor":"78"}]

Я попробовал следовать руководству по этой ссылке: Динамическая диаграмма Highcharts с данными MySQL не перезагружается

Спасибо за внимание, с удовольствием жду ответа:)

Источник

1 ответ

Решение

В вашем подходе есть несколько мелких ошибок

  1. eval плохо, разбери его используя JSON.parse вместо.
  2. Во время загрузки график еще не определен, поэтому ваш обратный вызов не будет работать.
  3. Highcharts требует времени в миллисекундах с 1970 года.
  4. Highcharts ожидает объект {x: , y: ,...} Вы даете это {time: , nilai_sensor: },

Решения:

  1. point = JSON.parse(point)
  2. events: {
  load: function() {
    setInterval(function() {
      requestData(chart)
    }, 1000);
  }
}
  3. new Date(point[0].time).getTime()
  4. {x: new Date(point[0].time).getTime(), y: point[0].nilai_sensor}

Вот рабочий пример использования вашего ввода со статическими данными(и некоторым дополнительным временем, чтобы поддерживать их движение): https://jsfiddle.net/ewolden/md975oLk/23/

Источник
Другие вопросы по тегам