Google Chart not displaying

1,625 views
Skip to first unread message

KC

unread,
May 18, 2016, 3:12:09 PM5/18/16
to Google Visualization API

I am very new to this and looking for a little assistance. I am running an Apache server Jquery is installed in the htdocs folder. I followed the example to A ‘T ‘ as this is all example code. What am I doing wrong ?



My HTML looks like this 


<html>
<head>
<script type=”text/javascript” src=”https://www.google.com/jsapi”></script>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js”></script>
<script type=”text/javascript”>
google.load(“visualization”, “1″, {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var jsonData = $.ajax({
url: “getData_json.php”,
dataType:”json”,
async: false
}).responseText;
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(jsonData);
var options = {
width: 800, height: 480,
title: ‘Company Performance’
};
var chart = new google.visualization.LineChart(document.getElementById(‘chart_div’));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id=”chart_div”></div>
</body>
</

My PHP file looks like this 
<?php

// This is just an example of reading server side data and sending it to the client.
// It reads a json formatted text file and outputs it.

$string = file_get_contents(“c:\xampp\htdocs\sampleData_json.json”);
echo $string;

// Instead you can query your database and parse into JSON etc etc

?>


My JSON file looks like this

{
“cols”: [
{"id":"","label":"year","type":"string"},
{"id":"","label":"sales","type":"number"},
{"id":"","label":"expenses","type":"number"}
],
“rows”: [
{"c":[{"v":"2001"},{"v":3},{"v":5}]},
{“c”:[{"v":"2002"},{"v":5},{"v":10}]},
{“c”:[{"v":"2003"},{"v":6},{"v":4}]},
{“c”:[{"v":"2004"},{"v":8},{"v":32}]},
{“c”:[{"v":"2005"},{"v":3},{"v":56}]}
]
}



Daniel LaLiberte

unread,
May 18, 2016, 3:34:58 PM5/18/16
to Google Visualization API
Many things might be failing.  Here are some ideas on things to try:

* Check your JavaScript console to see if there is an error message.  
* Replace the LineChart with a Table chart, just to see if the data looks as you expect.  
* Use local data, to bypass the ajax fetching. 
* Could you set up a jsfiddle example so we could be looking at the same code?

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/0f8fcdc2-f4f5-4413-9c11-851e0c4c7104%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.



--

perspektive42

unread,
May 19, 2016, 7:46:35 AM5/19/16
to Google Visualization API
Check your usage of various kinds of quote characters. Make sure to only use " or ', and not ” or “ or ` or ´.


KC

unread,
May 19, 2016, 12:20:36 PM5/19/16
to Google Visualization API
Could you provide an example of hot to make the data local ?
All the same, I have a JS fiddle set up. 

Daniel LaLiberte

unread,
May 19, 2016, 1:40:31 PM5/19/16
to Google Visualization API
Here is a good place to start for how to create a datatable within a page:  https://developers.google.com/chart/interactive/docs/datatables_dataviews#emptytable

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/659e6d7f-974d-4f16-afc9-73a6cc52f525%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.
Reply all
Reply to author
Forward
0 new messages