Back

Pie Chart - donut, one level

Example on raised theme and with just one level of data.

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 

    function success(data) {
        var r = { subvalues: [] };
        for (var k in data.subvalues) {
            r.subvalues.push(
                {
                    name: data.subvalues[k][0] + " - " + data.subvalues[k][1],
                    value: data.subvalues[k][2]
                }
            );
        }
        t = new PieChart(
            settings = {
                theme: PieChart.themes.raised,
                container: document.getElementById("demo"),
                data: {
                    preloaded: r,
                    sortField: "value"
                },
                slice: {
                    styleFunction: function (slice, data) {
                        slice.insideLabel.text = (slice.percent.toFixed()) + "%";
                        if (data.name) {
                            slice.label.text = data.name + " " + data.value + " units";
                        }
                    }
                },
                interaction: { resizing: { enabled: false } },
                pie: { innerRadius: 0.75 }
            }
        );
    }
    // using a custom library to load CSV data
    loadCSV("/dvsl/data/pie-chart/britney-spears.csv", null, [
            { type: "string", name: "name" },
            { type: "decimal", name: "year" },
            { type: "decimal", name: "units" },
    ], "\t", function (data) {
        success(data);
    });

Data

Data 
Femme Fatale	2011	1750000
Circus	2008	4100000
Blackout	2007	3200000
In The Zone	2003	10250000
Britney	2001	15500000
Oops!… I Did It Again	2000	25000000
…Baby One More Time	1999	31000000
Download Data