Incremental loading

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

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

//No CSS for this example 

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

//No separate data for this example