Back

Replacing data

addData will request new data upon activation, which will replace or update the existing data. The chart will instantly visualize the changes.

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