Back

PieChart with data function

Data function provides finer control of the loading process. This demo shows how to incrementally load data as the user drills down.

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 t = new PieChart({
        container: document.getElementById("demo"),
        area: { height: null },
        data: { dataFunction: myDataFunction },
        info: { contentsFunction: infoContents },
        slice: { styleFunction: sliceStyle },
        navigation: { initialDrilldown: ['browsers'] }
    });


    function myDataFunction(pieId, limit, offset, successCallback, errorCallback) {
        //let's have a custom error handling code
        var myErrorCallback = function () {
            if (window.console) console.log("There was an error while requesting data for pie '" + pieId + "'");
            errorCallback();
        };

        // using jquery for ajax call
        //construct URL for requested pie and let jQuery do the rest.
        jQuery.ajax({
            url: "/dvsl/data/pie-chart/browsersById/" + pieId + ".json",
            success: successCallback,
            error: myErrorCallback
        });
    }

    function sliceStyle(slice, data) {
        slice.insideLabel.text = slice.percent.toFixed(2) + "%";
        slice.label.text = data.name;
    }
    function infoContents(data) {
        return "<h3>" + data.name + '</h3><a class="DVSL-info">Visits:<b>' + data.value + "</b></a>";
    }

Data

Data 
//No separate data for this example