[SOLVED] Growing memory consumption when refresh data with anychart gantt

Growing memory consumption when refresh data with anychart gantt

I have a simple anychart code for refreshing gantt chart, which is run every 1 second:

function init_schedule(){
    anychart.onDocumentReady(function () {
        anychart.data.loadJsonFile("../scheduler?type=getschedule", function (data) {
            document.getElementById("container").innerHTML = "";
            var treeData = anychart.data.tree(data, "as-tree");

            var chart = anychart.ganttResource(); 
            ...other logic, etc
       });
    });
}


var intervalId = setInterval(function() {
    init_schedule();
}, 1000);

if I run var chart = anychart.ganttResource() method in loop, the browser doesnt free memory for page, VM memory consumption is growing continously to infinity and the page starts to freeze. Is there any other method to refresh gantt data from server?

I commented out all other code to find the reason on growing memory consumption. Did I make it wrong?

Solution

To refresh gantt data regulary you'll just need to extract data and then update chart with data() method as shown in the sample below.

anychart.onDocumentReady(function() {

  // create data
  var data = [{
    id: "1",
    name: "Server 1",
    periods: [{
        id: "1_1",
        start: "2018-01-05",
        end: "2018-01-25"
      },
      {
        id: "1_2",
        start: "2018-01-28",
        end: "2018-02-22"
      },
      {
        id: "1_3",
        start: "2018-03-03",
        end: "2018-03-25"
      }
    ]
  }];

  // create a data tree
  var treeData = anychart.data.tree(data, "as-tree");

  // create a chart
  var chart = anychart.ganttResource();

  // imitate new data coming from a server and update chart with it
   const dataUpdateCallback = () =>{
    if (data[0].id == 1){
      data = [
        {
          id: "2",
          name: "Server 2",
          periods: [
            {id: "2_1", start: "2018-01-07", end: "2018-02-15"},
            {id: "2_2", start: "2018-02-26", end: "2018-03-20"}
          ]
        }
      ];
    } else if (data[0].id == 2){
      data = [
        {
          id: "3",
          name: "Server 3",
          periods: [
            {id: "3_1", start: "2018-01-04", end: "2018-03-25"}
          ]
        }
      ];
    } else if (data[0].id == 3){
      data = [
        {
          id: "1",
          name: "Server 1",
          periods: [
            {id:"1_1", start: "2018-01-05", end: "2018-01-25"},
            {id:"1_2", start: "2018-01-28", end: "2018-02-22"},
            {id:"1_3", start: "2018-03-03", end: "2018-03-25"}
          ]}
      ];
    }
    
    // update a data tree
    treeData = anychart.data.tree(data, "as-tree");
    // set the data
    chart.data(treeData); 
    
    // fit elements to the width of the timeline
    chart.fitAll()    
  }  

  // imitation of updates coming from a server
  const intervalID = setInterval(dataUpdateCallback, 1000);

  // set the data
  chart.data(treeData);

  // set the container id
  chart.container("container").draw();

  // fit elements to the width of the timeline
  chart.fitAll();
});

html,
body,
#container {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

<link href="https://cdn.anychart.com/releases/8.12.0/css/anychart-ui.min.css" rel="stylesheet" />
<script src="https://cdn.anychart.com/releases/8.12.0/js/anychart-base.min.js?hcode=a0c21fc77e1449cc86299c5faa067dc4"></script>
<script src="https://cdn.anychart.com/releases/8.12.0/js/anychart-gantt.min.js?hcode=a0c21fc77e1449cc86299c5faa067dc4"></script>
<script src="https://cdn.anychart.com/releases/8.12.0/js/anychart-exports.min.js?hcode=a0c21fc77e1449cc86299c5faa067dc4"></script>
<script src="https://cdn.anychart.com/releases/8.12.0/js/anychart-ui.min.js?hcode=a0c21fc77e1449cc86299c5faa067dc4"></script>

<div id="container"></div>