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.
You just have to pass "pie" for the type argument. For data and options arguments, refer to the samples below.
Samples
var data = { labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'], datasets: [ { label: 'First Dataset', data: [2, 5, 3, 15, 10], backgroundColor: ["#9C27B0", "#5E35B1", "#039BE5", "#FF9800", "#26A69A"] } ] }
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"] } ] }
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) }
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) }
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) }