google-visualization - how to connect selected points in scatter plot in google api

Question

I'm using scatter plot for my application, so I selected google API for scatter charts. For my application I need to connect some points with line marker. I followed this link for test. please help me to improve.

Answer 1

If you need to connect points on your ScatterChart, you can do so by setting either the lineWidth option (creates lines connecting points for all data series) or the series.<series index>.lineWidth option (which creates lines connecting the points of a single series). Here are some examples:

Use the lineWidth option to connect points in all series (jsfiddle example):

function drawChart () {
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'X');
    data.addColumn('number', 'Y1');
    data.addColumn('number', 'Y2');
    data.addRows([
        [0, 2, 5],
        [1, 6, 6],
        [2, 5, 9],
        [3, 6, 5],
        [4, 5, 4],
        [7, 9, 2],
        [8, 4, 6],
        [9, 3, 7]
    ]);

    var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));

    chart.draw(data, {
        height: 400,
        width: 600,
        lineWidth: 1
    });
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});

Connect all the points in one data series using the series.<series index>.lineWidth option (jsfiddle example):

function drawChart () {
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'X');
    data.addColumn('number', 'Y1');
    data.addColumn('number', 'Y2');
    data.addRows([
        [0, 2, 5],
        [1, 6, 6],
        [2, 5, 9],
        [3, 6, 5],
        [4, 5, 4],
        [7, 9, 2],
        [8, 4, 6],
        [9, 3, 7]
    ]);

    var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));

    chart.draw(data, {
        height: 400,
        width: 600,
        series: {
            0: {
                // connect the points in Y1 with a line
                lineWidth: 1
            }
        }
    });
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});

If you want to connect only certain points in a data series, you must insert null values between all points that you do not want lines to connect. Here's an example connecting points (2, 5) and (3, 6) in series Y1 (jsfiddle example):

function drawChart () {
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'X');
    data.addColumn('number', 'Y1');
    data.addColumn('number', 'Y2');
    data.addRows([
        [0, 2, 5],
        [null, null, null],
        [1, 6, 6],
        [null, null, null],
        [2, 5, 9],
        [3, 6, 5],
        [null, null, null],
        [4, 5, 4],
        [null, null, null],
        [7, 9, 2],
        [null, null, null],
        [8, 4, 6],
        [null, null, null],
        [9, 3, 7]
    ]);

    var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));

    chart.draw(data, {
        height: 400,
        width: 600,
        series: {
            0: {
                // connect the points in Y1 with a line
                lineWidth: 1
            }
        }
    });
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});

The important thing to note here is that points which are adjacent in the DataTable will be connected with lines. If you want to connect points which are not adjacent in the chart, you need to re-arrange the data. Here's an example that connects the points (2, 5) and (8, 4) in Y1 and (4, 4) and (8, 6) in Y2 (jsfiddle example):

function drawChart () {
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'X');
    data.addColumn('number', 'Y1');
    data.addColumn('number', 'Y2');
    data.addRows([
        [null, null, null],
        // Y1 data
        // make (2, 5) and (8, 4) adjacent in the DataTable
        [2, 5, null],
        [8, 4, null],
        // split all others with nulls
        [null, null, null],
        [0, 2, null],
        [null, null, null],
        [1, 6, null],
        [null, null, null],
        [3, 6, null],
        [null, null, null],
        [4, 5, null],
        [null, null, null],
        [7, 9, null],
        [null, null, null],
        [9, 3, null],
        // Y2 data
        // make (4, 4) and (8, 6) adjacent in the DataTable
        [4, null, 4],
        [8, null, 6],
        // split all others with nulls
        [null, null, null],
        [0, null, 5],
        [null, null, null],
        [1, null, 6],
        [null, null, null],
        [2, null, 9],
        [null, null, null],
        [3, null, 5],
        [null, null, null],
        [7, null, 2],
        [null, null, null],
        [9, null, 7]
    ]);

    var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));

    chart.draw(data, {
        height: 400,
        width: 600,
        series: {
            0: {
                // connect the points in Y1 with a line
                lineWidth: 1
            },
            1: {
                // connect the points in Y2 with a line
                lineWidth: 1
            }
        }
    });
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});

That should get you started on connecting points with lines in ScatterCharts.