Home › Forums › Chart Support › Dynamic chart extra lines being added › Reply To: Dynamic chart extra lines being added
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://canvasjs.com/assets/script/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>