Amcharts добавить значение к набору данных из внешнего источника (температура)

У меня есть датчик температуры, подключенный через http, и я хотел бы добавить температуру в Amcharts каждые 5 секунд. Есть ли у кого-нибудь пример, как добавить новое значение к текущему набору данных? Я буду использовать линейную диаграмму для представления температуры на оси у и DateTime на хAmcharts добавить значение к набору данных из внешнего источника (температура)

спасибо

источник

2016-11-04 Ferguson

Общая идея динамического обновления диаграммы, чтобы добавить новый элемент в DataProvider вашей диаграммы затем вызвать метод validateData. В то время как он не использует AJAX, this demo в основном имеет структуру выложенный для вас в функции, которая вызывается в setInterval вызова:

setInterval(function() { 
    // make your ajax call here, then on a successful callback: 
    // add data item to the array 
    chart.dataProvider.push({ 
    /* new data */ 
    }); 
    chart.validateData(); 

}, 5000);

Это также смещает старые данные с диаграммы, которые вы можете захотеть подумайте, есть ли у вас много точек данных, добавленных в диаграмму. Производительность регулярного последовательного графика ухудшится после нескольких сотен до тысячи пунктов или около того.

источник

2016-11-04 21:09:20 xorspark

Хорошо. Я сделал этот пример, но это только показывает мне одно значение. Это потому, что charData [] (массив) содержит только одно значение? (В функции generateChartData)

То, что я хочу сделать случайное значение каждый второй и нажмите каждый раз, когда график на левой стороне ..

здесь пример (копировать/вставить)

<!DOCTYPE html> 
<html> 
    <head> 
     <title>chart created with amCharts | amCharts</title> 
     <meta name="description" content="chart created using amCharts live editor" /> 

     <!-- amCharts javascript sources --> 
     <script type="text/javascript" src="https://www.amcharts.com/lib/3/amcharts.js"></script> 
     <script type="text/javascript" src="https://www.amcharts.com/lib/3/serial.js"></script> 


     <!-- amCharts javascript code --> 
     <script type="text/javascript"> 


      function getRandomArbitrary(min, max) { 
                 return Math.random() * (max - min) + min; 
                } 
      var chartData = generateChartData(); 
      function generateChartData() { 
              var chartData = []; 
              var firstDate = new Date(); 

              firstDate.setSeconds(firstDate.getDate()); 

              chartData.push({ 
               date: firstDate, 
               temp: 0 
              }); 

              return chartData; 
             } 


      var timeout; 
      setInterval(function() { 

       chart.dataProvider.shift(); 

       var newDate = new Date(); 
       var temp = Math.round(Math.random() * 40 + 100); 

      // dodamo podatek v graf 
       chart.dataProvider.push({ 
       date: newDate, 
       temp: temp 
       }); 

       if (timeout) 
       clearTimeout(timeout); 
       timeout = setTimeout(function() { 
       chart.validateData(); 
       }); 
      }, 1000); 


      var chart = AmCharts.makeChart("chartdiv", { 
              "type": "serial", 
              "theme": "light", 
              "dataProvider": chartData, 
              "valueAxes": [ { 
              "position": "left", 
              "title": "Temperatura v °C" 
              } ], 
              "graphs": [ { 
              "valueField": "temp" 
              } ], 
              "categoryField": "date", 
              "categoryAxis": { 
              "minPeriod": "mm", 
              "parseDates": true 
              } 
             }); 
     </script> 
    </head> 
    <body> 
     <div id="chartdiv" style="width: 100%; height: 400px; background-color: #FFFFFF;" ></div> 
    </body> 
</html>

источник

2016-11-05 11:04:14 Ferguson

Да, так как вы трогании с одним значением, сдвиг просто удаляет его при следующем вызове. Опустите вызов chart.dataProvider.shift() или, если вы хотите в конечном итоге начать удалять точки, вы можете обернуть это в проверку его длины [как в этом примере] (http://codepen.io/team/amcharts/ручка/816d3455a31ef901cd164edce4e4d538? редакторы = 0010). Заметьте, я изменил minPeriod на «ss», так как ваши данные поступают каждую секунду. Кроме того, FYI, это должен быть комментарий к моему ответу с деталями, отредактированными в ваш исходный вопрос, а не новый ответ, поскольку другие не получают уведомлений о новых ответах. – xorspark

Amcharts добавить значение к набору данных из внешнего источника (температура)

ответ

Смежные вопросы