Back

Adding data incrementally

Graph chart where new data is constantly added with 'addData'. In this example, new data is randomly generated with 'getRandomData' function, but real use cases include realtime data updates or 'addData' calls on certain event listeners.

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

    var nextNodeId = 0;
    var chart = null;

    function addData() {
        // limit the maximum number of nodes added.
        if (nextNodeId > 500)
            return;

        //let's make some DNA
        var colors = { "T": "#67B486", "A": "#F7CE40", "G": "#FF3D6D", "C": "#46D0F7" };
        var first = ["T", "A", "G", "C"][Math.floor(getRandomNumber() * 4)];
        var second = { "T": "A", "A": "T", "C": "G", "G": "C" }[first];

        var data = {
            nodes: [
                { id: nextNodeId, loaded: true, style: { label: first, fillColor: colors[first] } },
                { id: nextNodeId + 1, loaded: true, style: { label: second, fillColor: colors[second] } }
            ], links: [
                { id: nextNodeId, from: nextNodeId + 1, to: nextNodeId }
            ]
        };

        if (nextNodeId > 0) {
            data.links.push({ id: nextNodeId + "A", from: nextNodeId - 2, to: nextNodeId });
            data.links.push({ id: nextNodeId + "B", from: nextNodeId - 1, to: nextNodeId + 1 });
        }
        chart.addData(data);
        nextNodeId += 2;
    }

    chart = new NetChart({
        style: { node: { display: "text" } },
        container: document.getElementById("demo"),
        area: { height: null },
        interaction: {
            zooming: {
                autoZoomExtent: [0.01, 2],
                zoomExtent: [0.01, 2]
            }
        }
    });

    var intervalHandle = setInterval(addData, 400);


    function disposeDemo() {
        window.clearInterval(intervalHandle);
        disposeDemo = null;
        intervalHandle = null;
    }

Data

Data 
//No separate data for this example