Back

Replace Data

Chart.replaceData discards all existing data and replaces by the new data. Coordinates are specified in the data so they are not animated.

Documentation Open in JSFiddle
Start Free Trial Purchase

HTML

HTML 
<script src="https://cdn.zoomcharts-cloud.com/1/nightly/zoomcharts.js"></script>

<div id="demo"></div>

CSS

CSS 
//No CSS for this example

JavaScript

JavaScript 


    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);
    }

    function buildData() {
        var nodes = [];
        var links = [];
        var i;
        var numNodes = 10;
        for (i = 0; i < numNodes; i++) {
            nodes.push({ "id": i, "loaded": true, x: getRandomNumber() * 300, y: getRandomNumber() * 300, style: { 
                radius: 15,
                fillColor: "rgba(47,195,47,0.9)",
                labelStyle: {textStyle: { fillColor: "white" }}
            } });
        }

        //make a circle
        for (i = 0; i < numNodes; i++) {
            links.push({ "id": i, "from": i, "to": (i + 1) % numNodes });
        }

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

    chart = new NetChart({
        style: { 
            node: { 
                display: "text" 
            },
            link: {
                fillColor: "rgba(86,185,247,0.4)"
            }
        },
        layout: { mode: "static" },
        container: document.getElementById("demo"),
        area: { height: null },
    });
    buildData();
    var intervalHandle = setInterval(buildData, 1400);
    function disposeDemo() {
        window.clearInterval(intervalHandle);
        disposeDemo = null;
        intervalHandle = null;
    }

Data

Data 
//No separate data for this example