Back

Preloaded data

Preloaded data is the most simplies data preparation method.

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