Back

Preloaded data for PieChart

JavaScript pie chart with preloaded data. For simple datasets, preloading data will improve performance and limit data requests during navigation.

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 data = {
        "subvalues": [
        {
            "value": 50, "name": "Apples", "subvalues": [
               { "value": 25, "name": "Red apples" },
               { "value": 15, "name": "Yellow apples" },
               { "value": 10, "name": "Green apples" }]
        },
        {
            "value": 30, "name": "Oranges", "subvalues": [
               { "value": 10, "name": "Big oranges" },
               { "value": 9, "name": "Small oranges" },
               { "value": 7, "name": "Green oranges" },
               { "value": 4, "name": "Pink oranges" }]
        },
        {
            "value": 20, "name": "Grapes", "subvalues": [
               { "value": 15, "name": "Sweet grapes" },
               { "value": 5, "name": "Sour grapes" }]
        },
        { "value": 50, "name": "Vegetables", style: { fillColor: "yellow" } }]
    };

    var t = new PieChart({
        container: document.getElementById("demo"),
        area: { height: null },
        data: { preloaded: data }
    });

Data

Data 
//No separate data for this example