Chart.js with JSON data error
Question
Having a tough time trying to get this to work...
Required scripts
<script src="Chart.js"></script>
<script src="jquery-1.11.3.min.js"></script>
Full code of what I am trying to work with.
<body>
<div id="chartCanvas">
<canvas id="StatusChart"></canvas>
<br>
</div>
<script type="text/javascript">
$.ajax({url:"json.php",dataType:"json"})
.fail(function(){alert("Doh! We have an error some where!")})
.done(function(data){
var myData = (data);
console.log(myData[0].status);
Array.prototype.mapProperty = function(status) {
return this.map(function (obj) {
return obj[status];
});
};
lineChartData = {
labels : myData.mapProperty('status'),
datasets : [
{
label: "My First dataset",
fillColor : "rgba(220,220,220,0.2)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(220,220,220,1)",
data : myData.mapProperty('count')
}
]
};
//window.onload = function(){
console.log("cheerio")
var ctx = document.getElementById("StatusChart").getContext("3D");
window.myLine = new Chart(ctx).Line(lineChartData);
//}
});
</script>
</body>
I have been successful on getting the JSON data to ouput in the following format.
[{"status":"Status_Name_Here","count":"1"}]
Upon load of the page I get an error.
In console everything seems to load correctly, then I get a "Use of Mutation Events is deprecated. Use MutationObserver instead."
Here is a copy & paste of console.
GET
https://sitee.com/chart/ [HTTP/1.1 200 OK 191ms]
GET
https://sitee.com/chart/Chart.js [HTTP/1.1 304 Not Modified 50ms]
GET
https://sitee.com/chart/jquery-1.11.3.min.js [HTTP/1.1 304 Not Modified 98ms]
GET
XHR
https://sitee.com/chart/json.php [HTTP/1.1 404 Not Found 62ms]
Use of Mutation Events is deprecated. Use MutationObserver instead.
Anyone have any clue as to where I am going wrong?
2 answers
solution1
1 ACCPTED
Fix your JSON
$query = " SELECT column_name,COUNT(*) FROM tablename GROUP BY column_name; ";
$result = mysql_query( $query );
if ( !$result ) {
$ErrorMessage = 'Invalid query: ' . mysql_error() . "\n";
$ErrorMessage .= 'Whole query: ' . $query;
die( $ErrorMessage );
}
$JSON_output = array();
while ( $row = mysql_fetch_assoc( $result ) )
{
$JSON_output[] = array('ItemToCount' => $row['ItemToCount'],
'count' => $row['COUNT(*)'],
);
}
solution2
0 2015-09-22 03:42:56
I was able to resolve the issue. Appreciate the help for pointing out the few mistakes :) . @spencer wieczorek
Required scripts
<script src="Chart.js"></script>
<script src="jquery-1.11.3.min.js"></script>
Code
<script type="text/javascript">
$.ajax({url:"json.php",dataType:"json"})
.fail(function(){alert("Im a failure")})
.done(function(data){
var myData = (data);
console.log(myData[0].kpi);
Array.prototype.mapProperty = function(property) {
return this.map(function (obj) {
return obj[property];
});
};
// Example: myData.mapProperty('rank') to get an array of all ranks
lineChartData = {
labels : myData.mapProperty('column_name'),
datasets : [
{
label: "Data",
fillColor : "rgba(220,220,220,0.2)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
data : myData.mapProperty('count')
}
]
};
//window.onload = function(){
console.log("cheerio")
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx).Line(lineChartData);
//}
}); </script>
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.