Googleのグラフの日付でデータベースの値を反復する方法

Question

私は同様の質問を見たことがありますが、それはどうしたのかまだ分かりません..私はこのループを日付、 DB内の各日付について、毎日のリード線を表示し、DB内の各日付に対してライン・チャートで販売したいと考えています。ここで

$sql = "SELECT * FROM customers WHERE source = 'website' ORDER BY date ASC"; 
$result = $conn->query($sql); 
if ($result->num_rows > 0) { 
    while($row = $result->fetch_assoc()) { 
     $sold = $row['sold']; 
     $visit= $row['visit']; 
     $date= $row['date']; 
    }else{ 

    }  
} 

は、チャートスクリプトです -

<script type="text/javascript"> 

    google.charts.setOnLoadCallback(drawChartl); 

    function drawChartl() { 
    var data = google.visualization.arrayToDataTable([ 
     ['Date', 'Leads', 'Sold'], 
     ['1st', 6,  2], 
     ['2nd', 3,  1], 
     ['3rd', 2,  3], 
    ]); 

    var options = { 
     title: 'Internet Performance', 
     curveType: 'function', 
     legend: { position: 'top' } 
    }; 

    var chart = new google.visualization.LineChart(document.getElementById('curve_chart')); 

    chart.draw(data, options); 
    } 
</script> 


<div id="curve_chart" style="width: 1900px; height: 500px"></div> 

Answer 1

次のスニペットを参照してください...

は、すべてのデータを保持する配列を必要とする - >$json

各行を追加します〜$json - >$dataRow

nはjavascriptに結果を書く - ...>data.addRows(<?= $jsonstring ?>);

は、このような何かをしようと、おそらくあまりにも日付をフォーマットする必要があり、このことができます

<?php 
    $json = array(); 
    $sql = "SELECT * FROM customers WHERE source = 'website' ORDER BY date ASC"; 
    $result = $conn->query($sql); 
    if ($result->num_rows > 0) { 
     while($row = $result->fetch_assoc()) { 
      $dataRow = array(
       $row['date'], 
       $row['visit'], 
       $row['sold'] 
     ); 
      array_push($json, $dataRow); 
     } 
    } 

    $jsonstring = json_encode($json); 
?> 

<script src="https://www.gstatic.com/charts/loader.js"></script> 
<script type="text/javascript"> 
    google.charts.load('current', { 
    'callback': function() { 
     var data = google.visualization.arrayToDataTable([ 
     [{type: 'string', label: 'Date'}, {type: 'number', label: 'Leads'}, {type: 'number', label: 'Sold'}] 
     ]); 

     data.addRows(<?= $jsonstring ?>); 

     var options = { 
     title: 'Internet Performance', 
     curveType: 'function', 
     legend: { position: 'top' } 
     }; 

     var chart = new google.visualization.LineChart(document.getElementById('curve_chart')); 
     chart.draw(data, options); 
    }, 
    'packages': ['corechart'] 
    }); 
</script> 

<div id="curve_chart" style="width: 1900px; height: 500px"></div>