更新highcharts实时数据不起作用

Question

我有一些UV传感器（目前在Thingspeak上运行） - 但我需要在同一个图表上有多个系列，所以我在我的网站上制作了一个示例.php页面。

我的基本图表运行良好，但我无法让它进行实时更新 - 我的编码技巧非常缺乏＆amp;我很感激能得到的任何帮助！

示例图表位于：this answer

我在JSFiddle上有代码：http://www.sesupply.co.nz/test.php

    // variables for the first series
 var series_1_channel_id = 43330;
 var series_1_field_number = 4;
 var series_1_read_api_key = '7ZPHNX2SXPM0CA1K';
 var series_1_results = 480;
 var series_1_color = '#d62020';
 var series_1_name = 'Zims Sensor';

 // variables for the second series
 var series_2_channel_id = 45473;
 var series_2_field_number = 2;
 var series_2_read_api_key = 'N12T3CWQB5IWJAU9';
 var series_2_results = 480;
 var series_2_color = '#00aaff';
 var series_2_name = 'UVM30A';

 // chart title
 var chart_title = 'UV Sensors Zim / UVM30A';
 // y axis title
 var y_axis_title = 'UV Index';

 // user's timezone offset
 var my_offset = new Date().getTimezoneOffset();
 // chart variable
 var my_chart;

 // when the document is ready
 $(document).on('ready', function () {
     // add a blank chart
     addChart();
     // add the first series
     addSeries(series_1_channel_id, series_1_field_number, series_1_read_api_key, series_1_results, series_1_color, series_1_name);
     // add the second series
     addSeries(series_2_channel_id, series_2_field_number, series_2_read_api_key, series_2_results, series_2_color, series_2_name);
 });

 // add the base chart
 function addChart() {
     // variable for the local date in milliseconds
     var localDate;

     // specify the chart options
     var chartOptions = {
         chart: {
             renderTo: 'chart-container',
             defaultSeriesType: 'spline',
             zoomType: 'x', // added here
             panning: true,
             panKey: 'shift',
             backgroundColor: '#ffffff',
             events: {
                 load: addSeries
             }
         },
         title: {
             text: chart_title
         },
         subtitle: {
             text: 'Click and drag to zoom in. Hold down shift key to pan.'
         },
         plotOptions: {
             series: {
                 marker: {
                     radius: 2
                 },
                 animation: true,
                 step: false,
                 borderWidth: 0,
                 turboThreshold: 0
             }
         },

         scrollbar: {
             enabled: true
             //       barBackgroundColor: 'gray',
             //       barBorderRadius: 7,
             //       barBorderWidth: 0,
             //       buttonBackgroundColor: 'gray',
             //       buttonBorderWidth: 0,
             //       buttonArrowColor: 'yellow',
             //       buttonBorderRadius: 7,
             //       rifleColor: 'yellow',
             //       trackBackgroundColor: 'white',
             //       trackBorderWidth: 1,
             //       trackBorderColor: 'silver',
             //       trackBorderRadius: 7
         },



         tooltip: {
             // reformat the tooltips so that local times are displayed
             formatter: function () {
                 var d = new Date(this.x + (my_offset * 60000));
                 var n = (this.point.name === undefined) ? '' : '<br>' + this.point.name;
                 return this.series.name + ':<b>' + this.y + '</b>' + n + '<br>' + d.toDateString() + '<br>' + d.toTimeString().replace(/\(.*\)/, "");
             }
         },
         xAxis: {
             type: 'datetime',

             title: {
                 text: 'Date'
             }
         },
         rangeSelector: {
             enabled: true,
             buttons: [{
                 type: 'minute',
                 count: 60,
                 text: 'Hour'
             }, {
                 type: 'day',
                 count: 1,
                 text: 'Day'
             }, {
                 type: 'week',
                 count: 1,
                 text: 'Week'
             }, {
                 type: 'all',
                 text: 'All'
             }]
         },

         yAxis: {
             title: {
                 text: y_axis_title
             }
         },
         exporting: {
             enabled: true
         },
         legend: {
             enabled: true
         },

         credits: {
             text: 'ThingSpeak.com',
             href: 'https://thingspeak.com/',
             style: {
                 color: '#D62020'
             }
         }
     };

     // draw the chart
     my_chart = new Highcharts.Chart(chartOptions);
 }

 // add a series to the chart
 function addSeries(channel_id, field_number, api_key, results, color, name) {
     var field_name = 'field' + field_number;
     // get the data with a webservice call
     $.getJSON('https://api.thingspeak.com/channels/' + channel_id + '/fields/' + field_number + '.json?offset=0&round=2&results=' + results + '&api_key=' + api_key, function (data) {

         // blank array for holding chart data
         var chart_data = [];

         // iterate through each feed
         $.each(data.feeds, function () {
             var point = new Highcharts.Point();
             // set the proper values
             var value = this[field_name];
             point.x = getChartDate(this.created_at);
             point.y = parseFloat(value);
             // add location if possible
             if (this.location) {
                 point.name = this.location;
             }
             // if a numerical value exists add it
             if (!isNaN(parseInt(value))) {
                 chart_data.push(point);
             }
         });

         // add the chart data
         my_chart.addSeries({
             data: chart_data,
             name: name,
             color: color
         });

     });
     setTimeout(addSeries, 1000);
 }
 cache: false;

 // converts date format from JSON
 function getChartDate(d) {
     // offset in minutes is converted to milliseconds and subtracted so that chart's x-axis is correct
     return Date.parse(d) - (my_offset * 60000);
 }

我试过跟随livingata的例子，但似乎失败了。传感器大约每60秒更新一次（仅在白天 - 因为夜间没有紫外线，我将传感器置于“睡眠”模式以节省电池电量）