Google Charts JSON and Array Problems

Question

Having trouble passing the JSON into the arrayToDataTable. I am creating the JSON from with a PHP While Loop...

I am trying to replace the hard coded JSON data with the DataArray which is updated dynamically from the DB...

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['bar']}]}"></script>



while ($row = oci_fetch_array($query1, OCI_ASSOC+OCI_RETURN_NULLS)) {

$i++;
$total_obs += $row['CN'];

}

$dataArray = array($i,$total_obs);   
json_encode($dataArray);


<script>

  google.setOnLoadCallback(drawChart);

  function drawChart() {


     var data = google.visualization.arrayToDataTable([
      ['Week', 'Totals'],
      ['1', 4],
      ['2', 5],
      ['3', 5],
      ['4', 8],
      ['5', 11],
      ['6', 13],
      ['7', 13],
      ['8', 14],
      ['9', 15],
      ['10', 0],
      ['11', 0],
      ['12', 0],
      ['13', 0],
      ['14', 0],
      ['15', 0],
      ['16', 0],
      ['17', 0],
      ['18', 0],
      ['19', 0],
      ['20', 0],
      ['21', 0],
      ['22', 0],
      ['23', 0],
      ['24', 0],
      ['25', 0],
      ['26', 0],
      ['27', 0],
      ['28', 0],
      ['29', 0],
      ['30', 0],
      ['31', 0],
      ['32', 0],
      ['33', 0],
      ['34', 0],
      ['35', 0],
      ['36', 0],
      ['37', 0],
      ['38', 0],
      ['39', 0],
      ['40', 0],
      ['41', 0],
      ['42', 0],
      ['43', 0],
      ['44', 0],
      ['45', 0],
      ['46', 0],
      ['47', 0],
      ['48', 0],
      ['49', 0],
      ['50', 0],
      ['51', 0],
      ['52', 0],
      ['53', 0]             
    ]);

    var options = {
      chart: {
        title: 'Totals in Fiscal Year 2016 - Cumulative Total',
        subtitle: 'Oct 1, 2015 to Sep 30, 2016',
      },
      trendlines: {
0: {
  type: 'linear',
  color: 'green',
  lineWidth: 3,
  opacity: 0.3,
  showR2: true,
  visibleInLegend: true
}
  },    
          bars: 'vertical', // Required for Material Bar Charts.
          hAxis: {format: 'decimal'},
          height: 400,
          colors: ['#d95f02'],
         // trendlines: { 0: {} }    // Draw a trendline for data series 0.
        };

    var chart = new google.charts.Bar(document.getElementById('chart_div'));

    chart.draw(data, google.charts.Bar.convertOptions(options));




  }

Answer 1

Google visualization needs a continuous 2d array with x,y values. Under the assumption that $row['CN'] hold the values, you should construct the PHP array like this :

$total_obs = array();
$total_obs[] = array('Week', 'Totals');
$i=0;
while ($row = oci_fetch_array($query1, OCI_ASSOC+OCI_RETURN_NULLS)) {
   $i++;
   $total_obs[] = array($i, $row['CN']);
}

And echo it out in the <script> like this :

var data = google.visualization.arrayToDataTable(<? echo json_encode($total_obs); ?>);

This will result in (example) :

var data = google.visualization.arrayToDataTable([["Week","Totals"],[1,4],[2,5],..]);

Which is exactly what both you and google visualization wants ..:)

---

Update the array to hold 52 weeks, if all weeks not is present, by doing this after the while loop :

for ($i=count($total_obs);$i<53;$i++) {
    $total_obs[] = array($i, 0);
}