Amcharts爲外部數據源添加數值（溫度）

我有一個通過http連接的溫度傳感器，我想每5秒爲Amcharts添加溫度。有人舉例說明如何爲當前數據集添加新值？我會用折線圖來表示對Y軸和日期時間溫度對XAmcharts爲外部數據源添加數值（溫度）

謝謝

2016-11-04 Ferguson

總體思路背後動態更新的圖表是一個新的元素添加到您的圖表的數據提供程序然後調用其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」，因爲您的數據每秒都會傳出。另外，僅供參考，這應該是一個評論我的答案與編輯到您的原始問題的細節，而不是一個新的答案，因爲其他人不會收到新答案的通知。 – xorspark

Amcharts爲外部數據源添加數值（溫度）

回答

相關問題