Back

Replacing data

Uses `addData` to dynamically replace part of the loaded data in the chart.

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 },
            container: document.getElementById("demo"),
            navigation: {
                initialDisplayAnchor: "now",
                initialDisplayPeriod: "3 m",
                initialDisplayUnit: "5 s"
            },
            series: [{ type: "line", style: { fillColor: "#c1cc89" } }],
            data: {},
            valueAxisDefault: { position: "outside" },
            advanced: { logging: true, timeUpdateInterval: 300 }
        });

        function genData(f, t, random) {
            var vv = [];
            for (var i = f; i < t; i += 1000) {
                if (random)
                    vv.push([i, getRandomNumber() * 2000]);
                else
                    vv.push([i, 1500.11]);
            }
            return vv;
        }

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

        var t = Date.UTC(2016, 1, 1, 1, 0, 0);
        var f = t - (3 * 60 * 1000);
        // set initial data for given time period
        setData(f, t, "s", genData(f, t, false));

        var timeoutHandle = window.setTimeout(function () {
            f = f + 60 * 1000;
            // replace previously set data for given time period with random data
            setData(f, t, "s", genData(f, t, true));
            timeoutHandle = null;
        }, 2000);

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

Data

Data 
//No separate data for this example