Incremental data-loading
Data can be incrementally loaded on demand - for example when expanding a slice.
Event log:
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