Hi I am trying to generate a simple page with a couple of gauges on using google's api. I've been over and over all the info I can find online and can't work out why it is displaying a blank page. I suspect my json as I've not used it before.
The json output by getData.php is :
[{"hostname":"bongo","value":24},{"hostname":"chappie","value":78}]
The php script which should be generating the gauges is:
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages:['gauge']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var jsonData = $.ajax({
url: "getData.php",
dataType:"json",
async: false
}).responseText;
var data = new google.visualization.DataTable(jsonData);
var options = {
width: 400, height: 120,
redFrom: 90, redTo: 100,
yellowFrom:75, yellowTo: 90,
minorTicks: 5
};
var chart = new google.visualization.Guage(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id='chart_div'></div>
</body>
</html>
Your json data format is incorrect and u mis-typed Gauge as Guage. I corrected your code and it works on my php server as follows (by the way, you can nest arrays and use json_encode php function to output a json string that conforms to google Datatable json string format) :
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages:['gauge']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var jsonData = {
cols: [{id: 'Host Name', label: 'Host Name', type: 'string'},
{id: 'Value', label: 'Value', type: 'number'}],
rows: [{c:[{v: 'bongo'}, {v: 24}]},
{c:[{v: 'chappie'}, {v: 78}]}]
}
var data = new google.visualization.DataTable(jsonData);
var options = {
width: 400, height: 120,
redFrom: 90, redTo: 100,
yellowFrom:75, yellowTo: 90,
minorTicks: 5
};
var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id='chart_div'></div>
</body>
For debugging, you can do: google.visualization.events.addListener(bar_chart_example, 'error', function(err) { document.getElementById('bar_chart_example_div').innerHTML = err.message; });
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.