NetChart replaceData() displays blank. How to replace data dynamically?

Question

I followed the example in zoomcharts documentation on how to replace data on NetChart. When I call replaceData() on the chart instance, nothing happened, nothing is displayed, no error shown.

But when I set the data as preloaded (as per below), the network appears.

chart = new zc.NetChart({
  data: [
     {
       preloaded: {
         nodes: [Array of nodes],
         links: [Array of links],
       },
     },
  ],
...
})

Answer 1

When I visit the documentation for the "Replace Data" example, I see a JSFiddle for it. That example changes the data dynamically with the "replaceData()" function and it seems to work fine for me. See here: https://jsfiddle.net/egd1kj9x/

Maybe you could copy that example and work from there to figure out what's different between the example and what you're trying to do?

Here's the example in full:

var randomSeed = 10; // this can be changed to generate different data sets
function getRandomNumber() {
  var x = Math.sin(randomSeed++) * 10000;
  return x - Math.floor(x);
}

var nextNodeId = 0;
chart = null;

function buildData() {
  var nodes = [];
  var links = [];
  var i;
  var numNodes = 10;
  for (i = 0; i < numNodes; i++) {
    nodes.push({ "id": i, "loaded": true });
  }

  //make some random links
  for (i = 0; i < 10; i++) {
    var from = Math.floor(getRandomNumber() * numNodes);
    var to = Math.floor(getRandomNumber() * numNodes);
    links.push({ "id": i + "_" + from + "_" + to, "from": from, "to": to });
  }

  chart.replaceData({ "nodes": nodes, "links": links });
}

chart = new NetChart({
  style: { 
    node: { 
      display: "text",
      fillColor: "rgba(47,195,47,0.9)",
    },
    link: {
      fillColor: "rgba(86,185,247,0.4)"
    }

  },
  container: document.getElementById("demo"),
  area: { height: 350 }
});
buildData();
var intervalHandle = setInterval(buildData, 2400);
function disposeDemo() {
  window.clearInterval(intervalHandle);
  disposeDemo = null;
  intervalHandle = null;
}