Realtime data source

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

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

//No CSS for this example 

    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 chart = new TimeChart({
        area: {
            height: null,
            displayUnits: [{ unit: "5 s", name: "5 seconds" }]
        },
        container: document.getElementById("demo"),
        navigation: {
            initialDisplayAnchor: "now",
            initialDisplayPeriod: "3 m",
            initialDisplayUnit: "5 s",
            followAnchor: true
        },
        series: [{ type: "line", style: { lineColor: "red", fillColor: "pink", smoothing: true } }],
        data: {},
        timeAxis: { timeZone: "local" },
        currentTime: { overrideLimits: true }
    });

    function genData(f, t, u) {
        var vv = [];
        // generate random data for the given time period
        for (var i = f; i < t; i += 1000)
            vv.push([i, getRandomNumber() * 1000]);

        chart.addData({
            from: f,
            to: t,
            unit: u,
            values: vv
        });
    }

    var timeoutHandle;

    function realTimeData() {
        var t = new Date().getTime();
        var v = [t, getRandomNumber() * 1000];
        chart.addData({ unit: "ms", values: [v] });
        timeoutHandle = setTimeout(realTimeData, 1000);
    }

    // set initial data for given time period
    var t = new Date().getTime();
    var f = t - (2 * 60 * 1000); // add data for 2 minutes
    genData(f, t, "ms");

    // start generating real time data
    realTimeData();

    function disposeDemo() {
        window.clearTimeout(timeoutHandle);
        disposeDemo = null;
        timeoutHandle = null;
    }

//No separate data for this example