從MYSQL數據創建谷歌折線圖

Question

我的目標是使用從MySQL數據庫中提取的數據在同一圖上創建多個折線圖。

我有代碼，但我失去了一步，因此沒有得到我期望的輸出。這是我的代碼：

<?php 
    $results = array('cols' => array (array('label' => 'Date', 'type' => date'), 
       array('label' => 'Amount', 'type' => 'number') 
       ), 
       'rows' => array() 
      ); 

    $query = $db->prepare('SELECT * FROM Claims GROUP BY EXTRACT(MONTH FROM ClaimDate) , EXTRACT(YEAR FROM ClaimDate) '); 

    $query->execute(); 
    $rows1 = $query->fetchAll(PDO::FETCH_ASSOC); 

    foreach($rows1 as $row) 
    { 
     $ClaimDate = DateTime::createFromFormat('Y-m-d H:i:s', $row['ClaimDate'])->format('Y-m-d'); 

     $dateArr = explode('-', $ClaimDate); 
     $year = (int) $dateArr[0]; 
     $month = (int) $dateArr[1] - 1; 
     $day = (int) $dateArr[2]; 

     $results['rows'][] = array('c' => array(array('v' => "Date($year, $month, $day)"), array('v' => $row['amount']) 
     )); 
    } 
    $json = json_encode($results, JSON_NUMERIC_CHECK); 
    // print_r($json);exit; 
?> 

<script type="text/javascript"> 
google.load("visualization", "1", { packages: ["corechart"]}); 
google.setOnLoadCallback(drawChart); 

function drawChart() 
{ 
    var data = new google.visualization.DataTable(<?php echo json_encode($json); ?>); 
    var chart = new google.visualization.LineChart(document.getElementById('line_chart')); 
    chart.draw(data, {width: 400, height: 240}); 
} 
</script> 
<div id="line_chart"></div> 

這就是我的代碼。這是傳遞給圖表從數據庫中JSON：

{"cols":[{"label":"Date","type":"date"},{"label":"Amount","type":"number"}],"rows":[{"c":[{"v":"Date(2015, 5, 23)"},{"v":6000}]},{"c":[{"v":"Date(2016, 5, 23)"},{"v":16000}]},{"c":[{"v":"Date(2015, 6, 23)"},{"v":10000}]},{"c":[{"v":"Date(2016, 6, 23)"},{"v":10000}]},{"c":[{"v":"Date(2015, 7, 23)"},{"v":5000}]},{"c":[{"v":"Date(2016, 7, 23)"},{"v":60000}]}]} 

及以下線路圖是輸出：

line chart output from above code

這不是我想要的。我的最終目標是獲取顯示多個折線圖（取決於現有年數）的圖形，並在X軸上顯示所有月份並顯示Y軸上的數量。這是我見過的最接近類似於我想達到的目標：

linechart

上圖顯示我想達到的目標。如前所述，X軸上的月份和Y軸上的數量。那麼'價值'將是從查詢返回的年份，即每年將有它自己的折線圖

我有點卡住這個，並且想請求指導如何完成這個

附加要求

SIDU試圖通過建議我使用SVG圖表提供援助。讚賞但不能使用谷歌圖表完成？

Answer 1

這會很容易與銅牛SVG圖表：

http://topnew.net/cms/cms_chart.php?data=ymd,Hit,IP;2016-01-01,2000,1000;2016-02-05,3000,1800;2016-03-20,4000,3000&chart=line&fmt=str_xss&xFormat=date|M

如果你下載的9K銅牛SVG的圖表，你可以調用它，而不是通過以下方式：

<?php 
include 'topnew_svg_chart.php'; 
$data = [ 
    'Hit' => [ 
     '2016-01-01' => 12345, 
     '2016-02-03' => 12345, 
    ], 
    'IP' => [ 
     '2016-01-01' => 2345, 
     '2016-02-03' => 2345, 
    ] 
]; 
$init = [ 
    'chart' => 'line', 
    'xFormat' => 'date|M', 
]; 
cms_chart($data, $init);