Back

RadarChart

A radar chart is a way of showing multiple data points and the variation between them. They are often useful for comparing the points of two or more different data sets.

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

You just have to pass "radar" 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: 'My First Dataset',
            data: [20, 50, 30, 15, 10],
            backgroundColor: "#673AB7",
            borderColor: "#673AB7",
            pointBackgroundColor: "#673AB7"
        }
    ]
}
Copy

More Dataset

var data = {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
    datasets: [
        {
            label: 'My First Dataset',
            data: [20, 50, 30, 15, 10],
            backgroundColor: "#673AB7",
            borderColor: "#673AB7",
            pointBackgroundColor: "#673AB7"
        }, {
            label: 'My Second Dataset',
            data: [10, 30, 40, 25, 12],
            backgroundColor: "#E91E63",
            borderColor: "#E91E63",
            pointBackgroundColor: "#E91E63"
        }
    ]
}
Copy

RadarChart - 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: 'My First Dataset',
                    data: [20, 50, 30, 15, 10],
                    backgroundColor: "#673AB7",
                    borderColor: "#673AB7",
                    pointBackgroundColor: "#673AB7"
                }
            ]
        }
        
        radar = chart.CreateChart(data, 'radar', 0.9, 0.5)
        lay.AddChild(radar)
        
    app.AddLayout(lay)
}
Copy Run

RadarChart - 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: 'My First Dataset',
                data: [20, 50, 30, 15, 10],
                backgroundColor: "#673AB7",
                borderColor: "#673AB7",
                pointBackgroundColor: "#673AB7"
            }, {
                label: 'My Second Dataset',
                data: [10, 30, 40, 25, 12],
                backgroundColor: "#E91E63",
                borderColor: "#E91E63",
                pointBackgroundColor: "#E91E63"
            }
        ]
    }
    
    radar = chart.CreateChart(data, 'radar', 0.9, 0.5)
    lay.AddChild(radar)

    app.AddLayout(lay)
}
Copy Run

RadarChart - 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: 'My First Dataset',
                    data: [20, 50, 30, 15, 10],
                    backgroundColor: "#673AB7",
                    borderColor: "#673AB7",
                    pointBackgroundColor: "#673AB7"
                }
        	]
        }
        
        radar = chart.CreateChart(data, 'radar', 0.9, 0.5)
        lay.AddChild(radar)

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

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

    radar.updateData(newData)
}
Copy Run