Back

Incremental data-loading

Pie chart that requests data on-demand to load it incrementally. For complex data sets, this can be used as a way to reduce requests and save resources. This example has an event log that displays each request, showcasing incremental loading in action.

Event log:

Documentation Open in JSFiddle
Start Free Trial Purchase

HTML

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

<div>
    <div id="demo" style="float:right; width: 60%">	</div>
    <p><strong>Event log:</strong></p>
    <div id="example-log" style="width:30%; height: 300px; overflow-y: scroll;border: 1px solid grey"></div>
</div>
<div style="clear:both;"></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);
    }

    function genData(id, dp, limit, offset) {
        var azd = [
            "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L",
            "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"
        ];
        var ds = [];
        var max = 1;
        var min = 99;
        var myLimit = (limit == null || limit < 0 || limit > azd.length) ? azd.length : Math.min(azd.length, limit);
        var myOffset = (offset == null || offset < 0 || offset > azd.length) ? 0 : Math.max(0, offset);
        var a = Math.max(0, myOffset);
        var till = Math.min(myOffset + myLimit, azd.length);

        if (id === "") {
            for (; a < till; a++) {
                ds.push({
                    id: azd[a],
                    name: dp === 1 ? azd[a] : azd[a] + "" + dp,
                    value: (getRandomNumber() * (max - min) + min).toFixed(0)
                });
            }
        } else {
            for (; a < till; a++) {
                ds.push({
                    id: id + a,
                    name: id + a,
                    value: (getRandomNumber() * (max - min) + min).toFixed(0)
                });
            }
        }
        return { subvalues: ds };
    }

    var chart = new PieChart({
        container: document.getElementById("demo"),
        area: { height: null },
        data:
        {
            dataFunction: function (id, limit, offset, success, fail) {
                var dp = chart.getActivePies().length;
                var d = genData(id, dp, limit, offset);
                addToLog("Requested data for ID '" + id + "', limit=" + limit + ", offset=" + offset + ", returning " + d.subvalues.length + " items");
                success(d);
            },
            itemsToLoad: 30
        },
        navigation: { initialOffset: 0 }
    });

    function addToLog(text) {
        var theParent = document.getElementById("example-log");
        var theKid = document.createElement("div");
        theKid.innerHTML = text;
        theParent.insertBefore(theKid, theParent.firstChild);
    }

Data

Data 
//No separate data for this example