Back

Realtime data source

Real time JavaScript chart that continuously updates data and instantly shows it in the time series. Can be achieved with using 'addData'. This example demonstrates the feature with function that randomly generates data, but you can use your own functions for real-life applications, such as stock index, IoT monitoring, web traffic or other real-time data sources.

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

Data

Data 
//No separate data for this example