Home forums Using CanvasJS Dynamic chart extra lines being added Reply To: Dynamic chart extra lines being added

#26153

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&gt;
<script src=”https://canvasjs.com/assets/script/canvasjs.min.js”></script&gt;
<script type=”text/javascript”>

var dataPoints = [];
var chart;
$.getJSON(‘http://localhost:8080/SpringREST/rasp/json&#8217;, 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&#8217;, 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>