Back

DoughnutChart

The same as the pie chart, doughnut charts are also one of 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. Unlike the pie chart, doughnut charts has inner radius cut-off.

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

You just have to pass "doughnut" 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

DoughnutChart - 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"]
                }
            ]
        }
        
        dnt = chart.CreateChart(data, 'doughnut', 0.9, 0.5)
        lay.AddChild(dnt)
        
    app.AddLayout(lay)
}
Copy Run

DoughnutChart - 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"]
            }
        ]
    }
    
    dnt = chart.CreateChart(data, 'doughnut', 0.9, 0.5)
    lay.AddChild(dnt)

    app.AddLayout(lay)
}
Copy Run

DoughnutChart - 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"]
                }
        	]
        }
        
        dnt = chart.CreateChart(data, 'doughnut', 0.9, 0.5)
        lay.AddChild(dnt)

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

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

    dnt.updateData(newData)
}
Copy Run