Table has no columns. How do i add column titles

Question

Hi I have a code that successfully pulls data from my SQLSVR into a JSON record

<?php

$db = new PDO("sqlsrv:Server=DK-MatthewClay\SQLExpress2012;Database=FFP_WebServices", "LocalAdmin", "");

$row=$db->prepare("FFP_WebServices.dbo.WEBSERV_DAILY_PERIOD_FIGURES_SELECT");

$row->execute();//execute the query  
$json_data=array();//create the array  

foreach($row as $rec)//foreach loop  
{  
  $json_array['Dates']=$rec['Dates'];
  $json_array['OrdersTD']=$rec['OrdersTD'];
  $json_array['OrdersAD']=$rec['OrdersAD'];

  //here pushing the values in to an array  
  array_push($json_data,$json_array);  
}  

//built in PHP function to encode the data in to JSON format  
echo json_encode($json_data, JSON_NUMERIC_CHECK);  
?>

This builds my JSON like this

[{"Dates":"2018/03/26","OrdersTD":86043,"OrdersAD":85900.55},{"Dates":"2018/03/27","OrdersTD":86043,"OrdersAD":46288.81}]

But has no column titles. so, I can not create a google chart when I try with this code any help would be great

This is what I tried to create the chart

<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">

// Load the Visualization API and the piechart package.
google.charts.load('current', {'packages':['corechart']});

// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var jsonData = $.ajax({
      url: "includes/buildJson.php",
      dataType: "json",
      async: false
      }).responseText;

  // Create our data table out of JSON data loaded from server.
  var data = new google.visualization.DataTable(jsonData);

  // Instantiate and draw our chart, passing in some options.
  var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
  chart.draw(data, {width: 400, height: 240});
}

</script>
</head>

<body>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
</body>
</html>

Answer 1

when creating a DataTable directly from json, the json has to be in a certain format,
found here --> Format of the Constructor's JavaScript Literal data Parameter

see following php to generate the needed json...

<?php

$db = new PDO("sqlsrv:Server=DK-MatthewClay\SQLExpress2012;Database=FFP_WebServices", "LocalAdmin", "");

$row=$db->prepare("FFP_WebServices.dbo.WEBSERV_DAILY_PERIOD_FIGURES_SELECT");

$row->execute();//execute the query

//create the array
$json_data['cols'] = array(
  array('label' => 'Dates', 'type' => 'string'),
  array('label' => 'OrdersTD', 'type' => 'number'),
  array('label' => 'OrdersAD', 'type' => 'number')
);

$rows = array();
foreach($row as $rec)//foreach loop
{
  $temp = array();
  $temp[] = array('v' => (string) $rec['Dates']);
  $temp[] = array('v' => (float) $rec['OrdersTD']);
  $temp[] = array('v' => (float) $rec['OrdersAD']);
  $rows[] = array('c' => $temp);
}
$json_data['rows'] = $rows;

//built in PHP function to encode the data in to JSON format
echo json_encode($json_data, JSON_NUMERIC_CHECK);
?>

also, async: false on ajax has been deprecated, use the done callback instead...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  $.ajax({
    url: 'includes/buildJson.php',
    dataType: 'json'
  }).done(function (jsonData) {
    var data = new google.visualization.DataTable(jsonData);
    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, {width: 400, height: 240});
  });
});

Table has no columns. How do i add column titles

Question

1 answers

solution1
0 2018-04-16 13:46:26

Table has no columns. How do i add column titles

Question

1 answers

solution1 0 2018-04-16 13:46:26

solution1
0 2018-04-16 13:46:26