Back

ScatterChart

Scatter charts are based on basic line charts with the x axis changed to a linear axis. To use a scatter chart, data must be passed as objects containing X and Y properties.

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

You just have to pass "scatter" for the type argument. For data and options arguments, refer to the samples below.

Samples

One Dataset

var data = {
    datasets: [
        {
            label: 'Dataset 1',
            backgroundColor: "#889C27B0",
            borderColor: "#FF9C27B0",
            borderWidth: 1,
            data: [
                {x: 10, y: 5},
                {x: 5, y: -5},
                {x: 3, y: 10},
                {x: -3, y: 5},
                {x: 10, y: 4},
                {x: 20, y: 4},
                {x: -3, y: 10},
                {x: 4, y: -5},
                {x: 7, y: 5},
                {x: 12, y: 15},
                {x: -6, y: 16},
                {x: -20, y: -18}
            ]
        }
    ]
}
Copy

ScatterChart - One Dataset

app.LoadPlugin('ChartJS')

function OnStart()
{
    chart = app.LoadChartJS()
    
    lay = app.CreateLayout('Linear', 'VCenter, FillXY')
        
        data = {
            datasets: [
                {
                    label: 'Dataset 1',
                    backgroundColor: "#889C27B0",
                    borderColor: "#FF9C27B0",
                    borderWidth: 1,
                    fill: false,
                    data: [
                        {x: 10, y: 5},
                        {x: 5, y: -5},
                        {x: 3, y: 10},
                        {x: -3, y: 5},
                        {x: 10, y: 4},
                        {x: 20, y: 4},
                        {x: -3, y: 10},
                        {x: 4, y: -5},
                        {x: 7, y: 5},
                        {x: 12, y: 15},
                        {x: -6, y: 16},
                        {x: -20, y: -18}
                    ]
                }
            ]
        }
        
        scat = chart.CreateChart(data, 'scatter', 0.98, 0.5)
        lay.AddChild(scat)
        
    app.AddLayout(lay)
}
Copy Run

ScatterChart - More Dataset

app.LoadPlugin('ChartJS')

function OnStart()
{
    chart = app.LoadChartJS()
    
    lay = app.CreateLayout('Linear', 'VCenter, FillXY')
        
        data = {
            datasets: [
                {
                    label: 'Dataset 1',
                    backgroundColor: "#889C27B0",
                    borderColor: "#FF9C27B0",
                    borderWidth: 1,
                    fill: false,
                    data: [
                        {x: 10, y: 5},
                        {x: 5, y: -5},
                        {x: 3, y: 10},
                        {x: -3, y: 5},
                        {x: 10, y: 4},
                        {x: 20, y: 4},
                        {x: -3, y: 10},
                        {x: 4, y: -5},
                        {x: 7, y: 5},
                        {x: 12, y: 15},
                        {x: -6, y: 16},
                        {x: -20, y: -18}
                    ]
                },
                {
                    label: 'Dataset 1',
                    backgroundColor: "#889C27B0",
                    borderColor: "#FF9C27B0",
                    borderWidth: 1,
                    fill: false,
                    data: [
                        {x: -10, y: 6},
                        {x: 15, y: -17},
                        {x: 8, y: 0},
                        {x: -5, y: 1},
                        {x: -9, y: 10},
                        {x: -20, y: 4},
                        {x: 5, y: -10},
                        {x: -10, y: 12},
                        {x: -7, y: -5},
                        {x: 12, y: 5},
                        {x: 8, y: -16},
                        {x: 18, y: -5}
                    ]
                }
            ]
        }
        
        scat = chart.CreateChart(data, 'scatter', 0.98, 0.5)
        lay.AddChild(scat)
        
    app.AddLayout(lay)
}
Copy Run