chart is not showing from JSON data
Question
Actually i want to show chart by using JSON data.When i entered the url the JSON data is coming but it is not showing in chart form.I am not getting any error in console.
try.jsp
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;">
</div>
<script type="text/javascript">
var dataPoints = [];
$.getJSON("http://localhost:8080/FRA-UI/api/report19graph/all", function(data) {
$.each(data, function(key, value){
dataPoints.push({x: value[0], y: value[1]});
});
var chart = new CanvasJS.Chart("chartContainer",{
title:{
text:"Rendering Chart with dataPoints from External JSON"
},
data: [{
type: "line",
dataPoints : dataPoints,
}]
});
chart.render();
});
</script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script></head>
</body>
</html>
restwebcontroller.java
@GetMapping(value="/report19graph/all")
@ResponseBody
public List<Report19Graph> getReport19GraphData(){
List<Report19Graph> list=reportService.getReport19GraphData();
return list;
}
2 answers
solution1
1 ACCPTED 2018-06-05 05:26:02
So I think there are a couple of issues with your code. First, I created an object similar to the screenshot you posted of your data:
let data = [{
"rangeLab": "10-15",
"rangeVal": 220.763
}, {
"rangeLab": "15-20",
"rangeVal": 128.554
}, {
"rangeLab": "20-25",
"rangeVal": 150
}];
To get this in the format you want, I looped over each object in the array, and specified "x" to be the value of the first object and "y" to be the value of the second object:
$.each(data, function(key, value) {
dataPoints.push({
x: value[Object.keys(value)[0]],
y: value[Object.keys(value)[1]]
});
});
That gave me the dataPoints object in the correct format expected by CanvasJS:
[{"x":"10-15","y":220.763},{"x":"15-20","y":128.554},{"x":"20-25","y":150}]
The next issue is that CanvasJS seems to expect a Number for values of x and y . To do what you want, I think you need to use the label property. So I changed the loop code to:
$.each(data, function(key, value) {
dataPoints.push({
label: value[Object.keys(value)[0]],
y: value[Object.keys(value)[1]]
});
});
And then it seemed to render correctly.
Working Example: https://jsfiddle.net/nzr5ds12/10/
solution2
0 2018-06-06 04:55:58
x-value can be numeric or a dateTime value and can't be string. As @androidnoobie suggested you can consider rangeLab as label .
Also I would suggest you to create chart once, outside the AJAX request, and just update dataPoints within AJAX. Else, it creates new chart on every AJAX request. Please refer Tutorial on Charts from JSON Data API and AJAX .
var dataPoints = [];
var chart = new CanvasJS.Chart("chartContainer",{
title:{
text:"Rendering Chart with dataPoints from External JSON"
},
data: [{
type: "line",
dataPoints : dataPoints,
}]
});
$.getJSON("http://localhost:8080/FRA-UI/api/report19graph/all", function(data) {
$.each(data, function(key, value){
dataPoints.push({x: value[0], y: value[1]});
});
chart.render();
});
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.