please give me ur sample code please, That same problem is bothering me also.
This is my code :
———————-
<%@ 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>
