I am new to PHP and first time using JSON for plotting graphs using Google charts. I am pulling data from sql server database and generate JSON file.
JSON file is generated fine on the server as below:
{"cols":[{"label":"SecurityID","type":"string"},{"label":"PositionDate","type":"string"},{"label":"LastUpdate","type":"string"}],"rows":[{"c":[{"v":"528228"},{"v":"10-08-2017"},{"v":"10 Aug 2017 19:47:04:067"}]},{"c":[{"v":"271239"},{"v":"07-09-2017"},{"v":"06 Sep 2017 15:07:08:023"}]},{"c":[{"v":"271240"},{"v":"08-09-2017"},{"v":"12 Sep 2017 09:42:09:883"}]},{"c":[{"v":"614800"},{"v":"08-09-2017"},{"v":"15 Oct 2017 14:26:10:600"}]},{"c":[{"v":"703806"},{"v":"15-09-2017"},{"v":"15 Sep 2017 16:24:20:913"}]},{"c":[{"v":"580428"},{"v":"20-09-2017"},{"v":"19 Sep 2017 17:35:15:130"}]},{"c":[{"v":"267909"},{"v":"22-09-2017"},{"v":"21 Sep 2017 18:06:05:800"}]},{"c":[{"v":"639862"},{"v":"27-09-2017"},{"v":"06 Nov 2017 11:58:12:310"}]}]}
while, I try to plot it I get no output. Looking at error on chrome I see below:
Uncaught (in promise) Error: https://www.gstatic.com/charts/45.2/js/jsapi_compiled_format_module.js Invalid JSON string:
My code to plot is as below:
<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: "getData.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>