如何按谷歌圖表的日期迭代數據庫值

Question

我已經看到類似的問題，但仍不明白它是如何炒作..我有這個while循環循環我的數據庫日期，導致和出售。對於數據庫中的每個日期，我想要顯示日線圖，並以折線圖形式顯示數據庫中的每個日期。

$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>