Why is my canvasjs chart not loading?
Question
I have a problem. My chart doesn't render at all.
this is the JSON data that the service is returning. [{"label":"A","y":0},{"label":"B","y":5},{"label":"C","y":2},{"label":"D","y":0},{"label":"T","y":7}][{"label":"A","y":0},{"label":"B","y":5},{"label":"C","y":2},{"label":"D","y":0},{"label":"T","y":7}] [{"label":"A","y":0},{"label":"B","y":10},{"label":"C","y":4},{"label":"D","y":0},{"label":"T","y":14}]
here is my code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<script src="jquery/jquery-1.11.1.js"></script>
<script src="jquery/jquery.canvasjs.min.js"></script>
<script type='text/javascript'>
$(document).ready(function () {
$.getJSON('data.php', function (result) {
var chart = new CanvasJS.Chart('Container', {
title:{
text: 'Results of Survey',
},
data: [
{
type: 'column',
dataPoints: result
}
]
});
chart.render();
});
});
</script>
</head>
<body>
<div id="Container" style="width: 800px; height: 380px;"></div>
</body>
</html>
1 answers
solution1
0 ACCPTED 2016-02-23 05:39:51
Your data is malformed. If you are trying to do multi-series, see this doc:
http://canvasjs.com/docs/charts/basics-of-creating-html5-chart/multi-series-charts/
This:
[{"label":"A","y":0},{"label":"B","y":5},{"label":"C","y":2},{"label":"D","y":0},{"label":"T","y":7}]
[{"label":"A","y":0},{"label":"B","y":5},{"label":"C","y":2},{"label":"D","y":0},{"label":"T","y":7}]
[{"label":"A","y":0},{"label":"B","y":10},{"label":"C","y":4},{"label":"D","y":0},{"label":"T","y":14}]
Should be:
[{"label":"A","y":0},{"label":"B","y":5},{"label":"C","y":2},{"label":"D","y":0},{"label":"T","y":7},{"label":"A","y":0},{"label":"B","y":5},{"label":"C","y":2},{"label":"D","y":0},{"label":"T","y":7},{"label":"A","y":0},{"label":"B","y":10},{"label":"C","y":4},{"label":"D","y":0},{"label":"T","y":14}]
You have repeating column labels though which is why I mentioned the docs above. Are you trying to do multiple series instead of a column chart?
Edit:
This code displays your data fine assuming you are doing a straight column chart:
<!DOCTYPE HTML>
<html>
<head>
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
title:{
text: "My First Chart in CanvasJS"
},
data: [
{
// Change type to "doughnut", "line", "splineArea", etc.
type: "column",
dataPoints: [{"label":"A","y":0},{"label":"B","y":5},{"label":"C","y":2},{"label":"D","y":0},{"label":"T","y":7},{"label":"A","y":0},{"label":"B","y":5},{"label":"C","y":2},{"label":"D","y":0},{"label":"T","y":7},{"label":"A","y":0},{"label":"B","y":10},{"label":"C","y":4},{"label":"D","y":0},{"label":"T","y":14}]
}
]
});
chart.render();
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
</body>
</html>
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.