You must be logged in to post your query.
Home › Forums › Chart Support › I want to Live line chart update by json data
This is my code but there is issue that chart not update
I don’t know where is the problem so can u help me please, i’m newbe in that area. thanks!
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.util.*" %>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
<script type="text/javascript">
var dataPoints = [];
var chart;
$.getJSON('http://localhost:8080/SpringREST/rasp/json', function(data) {
$.each(data, function(key, value){
dataPoints.push({x:(value)["creation_time"], y:Number(value["temp"])});
});
chart = new CanvasJS.Chart("chartContainer",{
title:{
text:"Live Chart with dataPoints from External JSON"
},
zoomEnabled: true,
axisX:{
scaleBreaks:{
autoCalculate: true,
maxNumberOfAutoBreaks: 5,
collapsibleThreshold: "15%"
},
},
zoomType: "xy",
//backgroundColor: "#bdcfed",
animationEnabled: true,
animationDuration: 5000,
exportEnabled: true,
theme: "dark1",
data: [{
showInLegend: true,
legendText: "Temperature",
markerType: "circle",
markerSize: "3",
markerColor: "red",
xValueType: "dateTime",
xValueFormatString: "YYYY-MM-DD HH:mm:ss",
toolTipContent: "x:{x}, y: {y}",
type: "line",
dataPoints : dataPoints,
}]
});
chart.render();
updateChart();
});
function updateChart() {
$.getJSON('http://localhost:8080/SpringREST/rasp/json', function(data) {
dataPoints = [];
$.each(data, function(key, value) {
dataPoints.push({
x:(value["creation_time"]),
y: Number(value["temp"]),
});
});
console.log(chart.options)
chart.render();
});
}
setTimeout(function(){updateChart()}, 1000);
</script>
</head>
<body>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>
</body>
</html>
Please take a look at this Gallery example for working code on rendering chart with data from JSON.
Considering this as duplicate of Dynamic chart extra lines being added hence closing the same.
—
Shashi Ranjan
Team CanvasJS
I tried but not getting any success basically my chart is render properly by json data, but i want that my chart dynamically render json data every second when new data come in json object. I fetching two data from json object first is temp and second is time. please help.
Can you kindly share sample project reproducing the issue along with sample JSON over Google-Drive or Onedrive so that we can look into code, run it locally to understand the scenario better and help you resolve?
—
Shashi Ranjan
Team CanvasJS
this is my code and json data on jsfiddle : jsfiddle.net/shyam1992/d9aL2cnv/10
My chart is properly render but not real time data update when new data is coming.
As you are updating dataPoints by reading JSON every second, the chart gets updated with a new set of dataPoints that are being passed at every 1 second. You are unable to see updated datapoints in the chart as the JSON file itself is not updated. Please take a look at our documentation page for an example on Live Updating Charts from JSON API & AJAX.
—
Shashi Ranjan
Team CanvasJS
You must be logged in to reply to this topic.