CODEWITHSUNDEEP
javascriptgoogle-apigoogle-visualization
CesarCarrillo
CesarCarrillo

Reputation: 157

Google line chart dividing grid line

I have created a google line chart that has multiple values over time like this

I have this

The data refers to historical data and from a point in time is forecasted data. I want to divide (split) the chart to differentiate the historical information of forecast information. And get a chart like this:

I wan to do this

Is there a way to do that?

Upvotes: 0

Views: 926

Answers (1)

asgallant
asgallant

Reputation: 26340

You can get a vertical line like that by adding an 'annotation' role column to your domain (x-axis) column in the DataTable, and setting the annotation.<annotation column index>.style option to 'line'. Here's an example:

function drawChart () {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Month');
    data.addColumn({type: 'string', role: 'annotation'});
    data.addColumn('number', 'Value');
    data.addRows([
        ['Jun', null, 3],
        ['Jul', null, 5],
        ['Aug', null, 4],
        ['Sep', null, 4],
        ['Oct', null, 8],
        ['Nov', 'this month', 6],
        ['Dec', null, 2]
    ]);

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, {
        height: 400,
        width: 600,
        annotation: {
            1: {
                style: 'line'
            }
        }
    });
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});

see it working here: http://jsfiddle.net/asgallant/pkwqt/

Upvotes: 2

Related Questions