FORUMS

Select any forum below to ask question

Home › Forums › Chart Support › Dynamic chart extra lines being added › Reply To: Dynamic chart extra lines being added

August 2, 2019 at 4:53 pm #26153

shyamcanvas1992

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>