Back

Incremental loading for TimeChart

This example shows how functions can be used to alter the data loading behavior of TimeChart. In this example, the visual loads only data for the visible time span, and makes new requests only on demand.

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 


    // Timestamps are in UTC
    var max = Date.UTC(2016, 1, 1);
    var min = max - 86400000 * 20; // 20 days

    function myDataFunction(from, to, step, callback) {
        if (from == null) from = min;
        if (to == null) to = max;
        from = Math.max(from, min);
        to = Math.min(to, max);
        var time = from;
        var timeIncrements = { "s": 1000, "m": 60000, "h": 3600000, "d": 86400000 }; //increments in ms

        // Generate only first 10 results, chart will ask for more
        var values = [];
        while (time < to && values.length < 10) {
            //let's make up some values
            var pos = (time - min) / (max - min);
            var value = Math.round(pos * pos * 100 + Math.sin(pos * 1000) * 20);
            values.push([time, value]);
            time += timeIncrements[step];
        }

        callback({ dataLimitFrom: min, dataLimitTo: max, values: values, from: from, to: time, unit: step });
    }


    var t = new TimeChart({
        container: document.getElementById("demo"),

        data:
        {
            units: ["d", "h", "m", "s"],
            dataFunction: function (from, to, step, success, fail) {
                if (window.console) console.log("request for " + new Date(from).toUTCString() + ", " + new Date(to).toUTCString() + ", " + step);

                // as a sample let's use a javascript function, normally server request would go here.
                myDataFunction(from, to, step, success);
            },

            // instruct the chart NOT to request data for ranges that are now shown on the screen
            prefetchRatio: 0
        }
    });

Data

Data 
//No separate data for this example