Back

PieChart

Pie charts are probably the most commonly used charts. They are divided into segments, the arc of each segment shows the proportional value of each piece of data. They are excellent at showing the relational proportions between data.

pie = cht.CreateChart(data, "pie", width, height, options);

You just have to pass "pie" for the type argument. For data and options arguments, refer to the samples below.

Samples

One Dataset

var data = {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
    datasets: [
        {
            label: 'First Dataset',
            data: [2, 5, 3, 15, 10],
            backgroundColor: ["#9C27B0", "#5E35B1", "#039BE5", "#FF9800", "#26A69A"]
        }
    ]
}
Copy

More Dataset

var data = {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
    datasets: [
        {
            label: 'First Dataset',
            data: [2, 5, 3, 15, 10],
            backgroundColor: ["#9C27B0", "#5E35B1", "#039BE5", "#FF9800", "#26A69A"]
        }, {
            label: 'Second Dataset',
            data: [10, 20, 12, 5, 10],
            backgroundColor: ["#FB8C00", "#AFB42B", "#29B6F6", "#3F51B5", "#D81B60"]
        }
    ]
}
Copy

PieChart - One Dataset

app.LoadPlugin('ChartJS')

function OnStart()
{
    chart = app.LoadChartJS()
    
    lay = app.CreateLayout('Linear', 'VCenter, FillXY')
        
        data = {
            labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
            datasets: [
                {
                    label: 'First Dataset',
                    data: [2, 5, 3, 15, 10],
                    backgroundColor: ["#9C27B0", "#5E35B1", "#039BE5", "#FF9800", "#26A69A"]
                }
            ]
        }
        
        pie = chart.CreateChart(data, 'pie', 0.9, 0.5)
        lay.AddChild(pie)
        
    app.AddLayout(lay)
}
Copy Run

PieChart - More Datasets

app.LoadPlugin('ChartJS')

function OnStart()
{
    chart = app.LoadChartJS()
    
    lay = app.CreateLayout('Linear', 'VCenter, FillXY')
        
    data = {
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
        datasets: [
            {
                label: 'First Dataset',
                data: [2, 5, 3, 15, 10],
                backgroundColor: ["#9C27B0", "#5E35B1", "#039BE5", "#FF9800", "#26A69A"]
            }, {
                label: 'Second Dataset',
                data: [10, 20, 12, 5, 10],
                backgroundColor: ["#FB8C00", "#AFB42B", "#29B6F6", "#3F51B5", "#D81B60"]
            }
        ]
    }
    
    pie = chart.CreateChart(data, 'pie', 0.9, 0.5)
    lay.AddChild(pie)

    app.AddLayout(lay)
}
Copy Run

PieChart - Update Data

app.LoadPlugin('ChartJS')

function OnStart()
{
    chart = app.LoadChartJS()
    
    lay = app.CreateLayout('Linear', 'VCenter, FillXY')
        
        data = {
            labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
        	datasets: [
        	    {
                    label: 'Uploads',
                    data: [2, 5, 3, 15, 10],
                    backgroundColor: ["#9C27B0", "#5E35B1", "#039BE5", "#FF9800", "#26A69A"]
                }
        	]
        }
        
        pie = chart.CreateChart(data, 'pie', 0.9, 0.5)
        lay.AddChild(pie)

        btn = app.CreateButton("UPDATE DATA")
        btn.SetOnTouch(UpdateData)
        lay.AddChild(btn)
        
    app.AddLayout(lay)
}

function UpdateData()
{
    var newData = [
        [5, 20, 20, 14, 10]
    ]

    pie.updateData(newData)
}
Copy Run