Dynamic external JSON data without scrolling.

[zekageri]

Hello guys! I have a huge problem with dynamic chart. All the part is working fine , except when i update my datapoints , i dont want to scroll the data and than shift it , but when i get a new data , i want the previous data to dissappear , or deleted and the new one comes to its place without scrolling or increasing the x axis values.Here is my code:

<script type="text/javascript">
var dataLength = 60;
window.onload = function() {
  var dataPoints = [];
  var chart;
  $.getJSON("test.svg", function(data) {  
    $.each(data, function(key, value){
      dataPoints.push({x: value[0], y: parseInt(value[1])});
    });
    chart = new CanvasJS.Chart("chartContainer",{
          zoomEnabled: true,
          panEnabled: true,
          //animationEnabled: true,
          exportEnabled: true,
      title:{
        text:"Dynamic-Data Renderelés Json formában DB-ből.",
                fontColor: "rgba(100,149,237,.8)"
      },
      axisX: [{
        gridColor: "lightgreen" ,
        gridThickness: 1,
    tickLength: 0,
    lineThickness: 0,
    labelFormatter: function(e) {
      return "";
    },
    margin: -5
  }, {
    viewportMinimum: 0,
    viewportMaximum: 100,
    interval: 10,
    stripLines: [{
      value: 0,
      label: "Trigger",
      labelPlacement: "inside"
    }]
  }],
    axisY:{
        interval: 10,
        gridColor: "lightgreen",
      maximum: 150,
      labelFormatter: function(e){
      return  e.value +"%";
      },
    },
      data: [{
        type: "line",
        color: "red",//"rgba(0,135,147,.3)",
        dataPoints : dataPoints,
      }]
    });
    chart.render();
    updateChart();
  });
  function updateChart() {
  $.getJSON("test.svg", function(data) {  
    $.each(data, function(key, value){
      dataPoints.push({x: value[0], y: parseInt(value[1])});
    });
    chart.render();
    setTimeout(function(){updateChart()}, 1000);
  });
  }
}
</script>

This code now looks like this , when i get data , it displayes in the chart. Thats okay until i get a new one. When the new data comes , my old data remains at the same place and the new data is stacked to the old data and i can’t see sh***t. No matter what i do , shift or destroy or anything else , the old data is remains at on the chart.

[Priyanka M S]

@zekageri,

Can you kindly share a jsfiddle along with the sample JSON data(test.svg) reproducing the issue you are facing, so that we can look into your code, understand it better and help you out?

__
Priyanka M S
Team CanvasJS

[zekageri]

Thank you for your answer! I think i figured it out , not as smart as i wanted because the web throws me errors but the code is working fine so no problem. xd