Mysql、PHPからアクティブな、動的な棒グラフを作成するには？

Question

タイトルを明確にするために、MySqlを使用してデータベーステーブルからデータを読み込み、新しいデータに合わせて自動的に高さを変更する棒グラフを作成します。データはArduinoマイクロコントローラーを介してデータベースに送られているので、0.5秒間連続してデータが追加されます。私は、グラフがデータを検出し、それに応じて高さを増やしたいと思っています。 0.5秒ごとにウェブページを常にリフレッシュせずにこれを行う方法はありますか？

Answer 1

0.5秒ごとにページ全体をリフレッシュしないでください。より良い方法があります！

あなたはjQueryのに反対していない場合は、何jqueryの、使用した場合

$("#someDiv").load("somePage.PHP"); 

を使用します。

var xhttp; 
    if (str.length == 0) { 
    document.getElementById("someDiv").innerHTML = ""; 
    return; 
    } 
    xhttp = new XMLHttpRequest(); 
    xhttp.onreadystatechange = function() { 
    if (xhttp.readyState == 4 && xhttp.status == 200) { 
     document.getElementById("someDiv").innerHTML = xhttp.responseText; 
    } 
    }; 
    xhttp.open("GET", "somePage.PHP", true); 
    xhttp.send(); 

今すぐ内容をロードするためのdivをしない：

<div id="someDiv"> 

読み込んだPHPページで、グラフを描きたいと思うでしょう。この方法では、Chart.jsの棒グラフを使用します。http://www.chartjs.org/docs/#bar-chart

詳細はリンクを参照してください。あなたのコードは次のようになります：

var data = { 
    labels: ["January", "February", "March", "April", "May", "June", "July"], 
    datasets: [ 
     { 
      label: "My First dataset", 
      backgroundColor: "rgba(255,99,132,0.2)", 
      borderColor: "rgba(255,99,132,1)", 
      borderWidth: 1, 
      hoverBackgroundColor: "rgba(255,99,132,0.4)", 
      hoverBorderColor: "rgba(255,99,132,1)", 
      data: [65, 59, 80, 81, 56, 55, 40], 
     } 
    ] 
}; 
var myBarChart = new Chart(ctx, { 
    type: 'bar', 
    data: data, 
    options: options 
}); 

Answer 2

AJAXを使用して0.5秒ごとにスクリプトを呼び出して、ページの一部（グラフ）を更新することができます。 AJAXを使用すると、JavaScriptを使用してPHP（またはその他の）スクリプトからフェッチするデータに応じてグラフを変更できます。