MYSQLデータからGoogle Line Chartを作成

Question

私の目的は、mysqlデータベースからpullするデータを使って、同じグラフ上に複数の折れ線グラフを作成することです。

私はコードを用意していますが、私は期待していた出力が得られないため、ステップが欠落しています。ここに私のコード：

<?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チャートを使用して推薦することで支援を提供しようとしています。感謝しましたが、これはGoogleのチャートを使用して行うことはできませんか？

Answer 1

これはTopnew 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 topnew 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);