A line chart is a way of plotting data points on a line. Often, it is used to show trend data, or the comparison of two data sets.
You just have to pass "line" 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: "#5E35B1", borderColor: "#5E35B1", data: [5, 10, -4, 12, 15] }] }
var data = { labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'], datasets: [ { label: 'Downloads', backgroundColor: "#5E35B1", borderColor: "#5E35B1", data: [2, 5, -3, 15, 10] }, { label: 'Uploads', backgroundColor: "#E91E63", borderColor: "#E91E63", 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', data: [5, 10, -4, 12, 15], backgroundColor: "#5E35B1", borderColor: "#5E35B1", borderWidth: 2, fill: false }] } line = chart.CreateChart(data, 'line', 0.9, 0.5) lay.AddChild(line) 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: "#5E35B1", borderColor: "#5E35B1", data: [2, 5, -3, 15, 10], borderWidth: 2, fill: false }, { label: 'Uploads', backgroundColor: "#E91E63", borderColor: "#E91E63", data: [12, -8, 10, -2, 7], borderWidth: 2, fill: false } ] } line = chart.CreateChart(data, 'line', 0.9, 0.5) lay.AddChild(line) 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', backgroundColor: "#6626A69A", borderWidth: 3, borderColor: "#26A69A", data: [5, 10, 20, 12, 15] } ] } line = chart.CreateChart(data, 'line', 0.9, 0.5) lay.AddChild(line) 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: "#66039BE5", borderColor: "#039BE5", data: [5, 10, 20, 12, 15] } ] } line = chart.CreateChart(data, 'line', 0.9, 0.5) lay.AddChild(line) btn = app.CreateButton("UPDATE DATA") btn.SetOnTouch(UpdateData) lay.AddChild(btn) app.AddLayout(lay) } function UpdateData() { var newData = [ [5, 20, -5, 20, 10] ] line.updateData(newData) }