Back

Reload data

Real time network chart where data is automatically reloaded at the selected interval (here - 500ms). The chart instantly reflects any changes in data, making ZoomCharts visualizations suitable for use cases with real time updates.

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
    var nextNodeId = 0;
    var iter = 80;
    var chart = null;

    function buildData(nodeList, success, fail) {
        //build a random graph
        var nodes = [];
        var links = [];
        var i;
        var numNodes = 10;
        iter += 10;
        for (i = 0; i < numNodes; i++) {
            nodes.push({
                "id": i.toString(),
                "loaded": true,
                "style": {
                    fillColor: "rgb(" + (iter * (i + 1) * 0.2) % 255 + ", " + (iter * (i + 3) * 0.2) % 255 + ", " + (iter * (i + 2) * 0.2) % 255 + ")",
                    label: "" + i
                }
            });
        }

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

        links.push({ "id": iter, from: 0, to: ((iter - 1) % (numNodes - 1)) + 1 });

        success({ "nodes": nodes, "links": links });
    }

    chart = new NetChart({
        style: { node: { display: "text" } },
        container: document.getElementById("demo"),
        data: { dataFunction: buildData },
        area: { height: null }
    });

    //reload data every 500 ms
    var intervalHandle = setInterval(function () { chart.reloadData() }, 500);
    function disposeDemo() {
        window.clearInterval(intervalHandle);
        disposeDemo = null;
        intervalHandle = null;
    }

Data

Data 
//No separate data for this example