Home forums Using CanvasJS Dynamic external JSON data without scrolling.

This topic contains 2 replies, has 2 voices, and was last updated by  zekageri 1 month ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #23075

    zekageri
    Member

    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.

    #23089

    Priyanka M S
    Member

    @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

    #23098

    zekageri
    Member

    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

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.