Back

LineChart

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.

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

You just have to pass "line" 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: 'Downloads',
		backgroundColor: "#5E35B1",
		borderColor: "#5E35B1",
		data: [5, 10, -4, 12, 15]
	}]
}
Copy

More Data

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]
    	}
	]
}
Copy

LineChart - 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: '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)
}
Copy Run

LineChart - 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: '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)
}
Copy Run

LineChart - With Background Color

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)
}
Copy Run

LineChart - 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: '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)
}
Copy Run