Динамически заполняет диаграмму Google с данными из MYSQL

Question

Моя конечная цель - получить график, который отображает несколько линейных диаграмм (в зависимости от количества лет) с указанием всех месяцев, отображаемых на оси X, с отображением количества на Y-ось. Это самое близкое, что я видел, что напоминает то, что я хочу добиться:

На рисунке выше показано, что я хочу достичь. Как указывалось ранее, месяцы на оси X с количеством на оси Y. то «ценности» были бы те годы, которые были возвращены из запроса то есть каждый год будет иметь свою собственную линию диаграммы

Это бит PHP, который возвращает JSON:

<?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; 
?> 

Это 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}]}]} 

И, наконец, это функция, которая делает диаграмму:

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

Вывод из всего этого выглядит следующим образом:

Как было показано выше, я совершенно некоторое расстояние в достижении того, что я хочу. Я застрял на этом и любая помощь была бы оценена

EDIT

На основании ответа Ram Kannan Раджа, я добавил ORDER BY ClaimDate ASC на мой запрос и линейный график делает выглядит немного более презентабельно:

, но еще не мой желаемый выход. Каждый год должен иметь свой собственный линейный график, и ось Х будет все месяцы

Answer 1

для того, чтобы получить диаграмму, вы можете описать ...

1) отдельные линии для каждого года требуются отдельные столбцы (серия) для каждого
2) всех месяцев поперек hAxis требует дискретной оси (строковые значения)
3) график также должен быть достаточно широкими, чтобы показать все этикетки

производить DataTable следующим образом, с 12 рядами, по одному на каждый месяц

{ 
    "cols":[ 
    {"label":"Month","type":"string"}, 
    {"label":"2014","type":"number"}, 
    {"label":"2015","type":"number"}, 
    {"label":"2016","type":"number"} 
    ], 
    "rows":[ 
    {"c":[{"v":"January"},{"v":1000},{"v":1200},{"v":1400}]}, 
    {"c":[{"v":"February"},{"v":1600},{"v":1800},{"v":2000}]}, 
    {"c":[{"v":"March"},{"v":2200},{"v":2400},{"v":2600}]}, 
    ... 
    ] 
} 

создать это динамически, см комментарии в следующем PHP

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

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

    $dates = array(); 

    // create data table with initial month column 
    $results = array(
     'cols' => array(
     array('label' => 'Month', 'type' => 'string') 
    ), 
     'rows' => array() 
    ); 

    // create a column for each year in the data 
    $colYear = ""; 
    foreach($rows1 as $row) { 
     $year = DateTime::createFromFormat('Y-m-d H:i:s', $row['ClaimDate'])->format('Y'); 
     $year = strval($year); 

     if ($year != $colYear) { 
     $results['cols'][] = array('label' => $year, 'type' => 'number'); 
     $colYear = $year; 
     } 
    } 

    // create hAxis ticks 
    $hTicks = array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'); 

    // create 12 blank rows for each month 
    $chartRows = array(); 
    foreach($hTicks as $hMonth) { 
     $blankRow = array(array('v' => $hMonth)); 
     for ($x = 1; $x < count($results['cols']); ++$x) { 
     $blankRow[] = array('v' => null); 
     } 
     $chartRows[] = array('c' => $blankRow); 
    } 

    // fill in the rows from the data 
    foreach($rows1 as $row) { 
     // get year and month for current row 
     $year = DateTime::createFromFormat('Y-m-d H:i:s', $row['ClaimDate'])->format('Y'); 
     $month = DateTime::createFromFormat('Y-m-d H:i:s', $row['ClaimDate'])->format('F'); 
     $colYear = strval($year); 

     // find month row 
     for ($i = 0; $i < count($hTicks); ++$i) { 
     if ($hTicks[$i] == $month) { 
      // find year column 
      for ($x = 0; $x < count($results['cols']); ++$x) { 
      if ($results['cols'][$x]['label'] == $colYear) { 
       $chartRows[$i]['c'][$x]['v'] = $row['amount']; 
      } 
      } 
     } 
     } 
    } 

    $results['rows'] = $chartRows; 

    $json = json_encode($results); 

?> 

и на стороне клиента ...

примечание опция для hAxis.ticks
и удалена опция для width

<script src="https://www.google.com/jsapi"></script> 
<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, { 
     hAxis: { 
     ticks: <?php echo json_encode($hTicks); ?> 
     }, 
     height: 400 
    }); 
} 
</script> 
<div id="line_chart"></div> 

Answer 2

Try, ClaimDate, чтобы Asc с вашим запросом

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