Back

PieChart with data URL

JavaScript pie chart that loads data from a URL - in this example, a JSON file. PieChart also easily integrates with MongoDB, MySQL, and other data sources - read more in the 'Integrations' section of our website.

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: { url: "/dvsl/data/pie-chart/browsers.json" },
        info: { contentsFunction: infoContents },
        slice: { styleFunction: sliceStyle }
    });

    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 
//Data too large to output
Download Data