Back

PieChart with data function

By default, PieChart will load all available data. You can configure data loading behavior with a custom function in 'dataFunction' under 'data'. In this example, the pie chart loads data incrementally and requests data only when the user performs a drill 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