MySQLとPHPのchartJs

Question

私はchartJsとラインチャットをしようとしています。

PHPを使用してMySQLデータをchartJsにプッシュしたいとします。

MySQLのテーブル

id | page_views | visitors | month | 
------------------------------------| 
1 | 200  | 20  | Jan | 
2 | 100  | 10  | Feb | 
3 | 500  | 30  | March | 
------------------------------------| 

chartJs

var randomScalingFactor = function(){ return Math.round(Math.random()*100)}; 
     var lineChartData = { 
      labels : ["January","February","March","April","May","June","July"], 
      datasets : [ 
       { 
        label: "My First dataset", 
        fillColor : "rgba(220,220,220,0.2)", 
        strokeColor : "rgba(220,220,220,1)", 
        pointColor : "rgba(220,220,220,1)", 
        pointStrokeColor : "#fff", 
        pointHighlightFill : "#fff", 
        pointHighlightStroke : "rgba(220,220,220,1)", 
        data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()] 
       }, 
       { 
        label: "My Second dataset", 
        fillColor : "rgba(151,187,205,0.2)", 
        strokeColor : "rgba(151,187,205,1)", 
        pointColor : "rgba(151,187,205,1)", 
        pointStrokeColor : "#fff", 
        pointHighlightFill : "#fff", 
        pointHighlightStroke : "rgba(151,187,205,1)", 
        data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()] 
       } 
      ] 

     } 

    window.onload = function(){ 
     var ctx = document.getElementById("canvas").getContext("2d"); 
     window.myLine = new Chart(ctx).Line(lineChartData, { 
      responsive: true 
     }); 
    } 

私はこのために、MySQLのループを適用したいです。

誰も私に簡単な例を教えてもらえますか？

Answer 1

ChartJSはJSON形式のデータを受け取ります。

JSONデータはAJAXで取得できます。

var jsonData = $.ajax({ 
    url: 'http://yourdomain.com/yourfile.php', 
    dataType: 'json', 
}).done(function (results){ 

呼び出し元のPHPファイルでは、ロジックとデータベースへのアクセスをプログラムできます。 json_encodeでデータをエコーし​​て、配列をJSON形式で出力することができます。

header('Content-Type: application/json'); 
echo json_encode($dataArray); 

あなたは、このようなグラフにデータを追加することができます。

var myChart = new Chart(ctx).Line(jsonData); 

Answer 2

http GETまたはPOSTリクエストを使用してデータをロードすることができます。これはjavascriptで行います。

たとえば、あなたのPHPメソッドにルーティングするGETリクエストを行います。このメソッドはSQLクエリを実行し、結果を（JavaScriptに）返します。