Google Charts problems to display in the page.
28 views
Skip to first unread message
Christophe Costa
Sep 23, 2015, 11:36:30 AM9/23/15
to Google Visualization API
Hello, the graphic i want to build is not showing the data i am trying to pass from the database.
Index:
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="/jquery-1.11.3.js"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
function drawChart() {
$.ajax({
url: "localhost/teste/getpiechartdata.php",
dataType: ""json",
success: function (jsonData) {
}
});
// 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.LineChart(document.getElementById('chart_div'));
chart.draw(data, {width: 400, height: 240});
}
});
}
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
getpiechartdata.php
<?php
$mysqli =mysqli_connect('localhost', 'root', '', 'dissertacao');
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: ".mysqli_connect_error();
}
$sql = mysqli_query($mysqli, 'SELECT * FROM utilizadores');
$results = array(
'cols' => array (
array('label' => 'Date', 'type' => 'string'),
array('label' => 'Id', 'type' => 'number')
),
'rows' => array()
);
while($row = mysqli_fetch_array($sql)) {
// date assumes "yyyy-MM-dd" format
$dateArr = explode('-', $row['registado']);
$year = (int) $dateArr[0];
$month = (int) $dateArr[1] - 1; // subtract 1 to make month compatible with javascript months
$day = (int) $dateArr[2];
if (!$sql) {
printf("Error: %s\n", mysqli_error($con));
exit();
}
$results['rows'][] = array('c' => array(
array('v' => "Date($year, $month, $day)"),
array('v' => $row['id'])
));
}
$json = json_encode($results, JSON_NUMERIC_CHECK);
echo $json;
?>
Output:
{"cols":[{"label":"registado","type":"number"},{"label":"id","type":"number"}],"rows":[{"c":[{"v":"Date(2014, 4, 4)"},{"v":1}]},{"c":[{"v":"Date(2014, 4, 15)"},{"v":2}]},{"c":[{"v":"Date(2014, 4, 15)"},{"v":3}]},{"c":[{"v":"Date(2014, 4, 15)"},{"v":4}]},{"c":[{"v":"Date(2014, 4, 15)"},{"v":5}]},{"c":[{"v":"Date(2014, 4, 15)"},{"v":6}]},{"c":[{"v":"Date(2014, 4, 15)"},{"v":7}]},{"c":[{"v":"Date(2014, 6, 26)"},{"v":8}]},{"c":[{"v":"Date(2014, 6, 26)"},{"v":9}]},{"c":[{"v":"Date(2014, 6, 26)"},{"v":10}]},{"c":[{"v":"Date(2014, 7, 27)"},{"v":11}]},{"c":[{"v":"Date(2014, 7, 27)"},{"v":12}]},{"c":[{"v":"Date(2014, 7, 30)"},{"v":13}]},{"c":[{"v":"Date(2014, 7, 30)"},{"v":14}]},{"c":[{"v":"Date(2015, 8, 7)"},{"v":15}]}]}
That is the first thing i want to do group by year and month the users are registed in that time. The problem is the graphic don´t appears.
All the help is necessary.
Daniel LaLiberte
Sep 23, 2015, 12:03:09 PM9/23/15
to Google Visualization API
I see in the output you included at the end that your first column has type: "number", but your values for that column look like dates, in string format. So you should probably use type: "date" instead.
But in your date values, I see multiple dates with different values. You probably don't mean to do that. Instead, you should include the hour, and use type: "datetime". Hope that helps.
--
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 http://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/9acd22cb-8269-4f84-b05b-48556e6dd81b%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA
Reply all
Reply to author
Forward
0 new messages