A bar chart provides a way of showing data values represented as vertical bars. It is sometimes used to show trend data, and the comparison of multiple data sets side by side.
You just have to pass "bar" 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: 'Downloads', backgroundColor: "#E91E63", borderColor: "#C2185B", borderWidth: 1, data: [5, 10, -4, 12, 15] }] }
var data = { labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'], datasets: [ { label: 'Downloads', backgroundColor: "#9C27B0", borderColor: "#7B1FA2", borderWidth: 1, data: [2, 5, -3, 15, 10] }, { label: 'Uploads', backgroundColor: "#5C6BC0", borderColor: "#3949AB", borderWidth: 1, data: [12, -8, 10, -2, 7] } ] }
app.LoadPlugin('ChartJS') function OnStart() { chart = app.LoadChartJS() lay = app.CreateLayout('Linear', 'VCenter, FillXY') data = { labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'], datasets: [ { label: 'Downloads', backgroundColor: "#9C27B0", borderColor: "#7B1FA2", borderWidth: 1, data: [5, 10, -4, 12, 15] } ] } bar = chart.CreateChart(data, 'bar', 0.9, 0.5) lay.AddChild(bar) 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: 'Downloads', backgroundColor: "#9C27B0", borderColor: "#7B1FA2", borderWidth: 1, data: [2, 5, 4, 15, 10] }, { label: 'Uploads', backgroundColor: "#5C6BC0", borderColor: "#3949AB", borderWidth: 1, data: [12, 8, 10, 2, 7] } ] } bar = chart.CreateChart(data, 'bar', 0.9, 0.5) lay.AddChild(bar) 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: 'Downloads', backgroundColor: ["#9C27B0", "#5E35B1", "#039BE5", "#FF9800", "#26A69A"], borderWidth: 0, data: [5, 10, 20, 12, 15] } ] } bar = chart.CreateChart(data, 'bar', 0.9, 0.5) lay.AddChild(bar) 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: 'Downloads', backgroundColor: ["#9C27B0", "#5E35B1", "#039BE5", "#FF9800", "#26A69A"], borderWidth: 0, data: [5, 10, 20, 12, 15] } ] } bar = chart.CreateChart(data, 'bar', 0.9, 0.5) lay.AddChild(bar) btn = app.CreateButton("UPDATE DATA") btn.SetOnTouch(UpdateData) lay.AddChild(btn) app.AddLayout(lay) } function UpdateData() { var newData = [ [5, 20, -5, 20, 10] ] bar.updateData(newData) }