How implement the following chart in google chart api?

Question

I want to implement the following chart in google chart api. how can i get it. I want to separate 4 quarters between two data points and indicators for each quarters need to display. And vertical line with number is that point has annotations. how can i get this in google chart api.

Answer 1

You can use an "annotation" role column to create the lines you want. Here's an example:

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'Year');
    data.addColumn({type: 'string', role: 'annotation'});
    data.addColumn('number', 'Value');

    data.addRows([
        [2009, null, 5],
        [2010, '1', 4],
        [2011, null, 7],
        [2011.25, '2', null],
        [2011.5, '3', null],
        [2012, null, 7]
    ]);

    var chart = new google.visualization.LineChart(document.querySelector('#chart_div'));
    chart.draw(data, {
        height: 400,
        width: 600,
        interpolateNulls: true,
        annotation: {
            1: {
                style: 'line'
            }
        },
        hAxis: {
            format: '#',
            minorGridlines: {
                count: 3
            },
            ticks: [2009, 2010, 2011, 2012]
        },
        vAxis: {
            textPosition: 'none',
            minValue: 0,
            maxValue: 10
        },
        legend: {
            position: 'none'
        }
    });
};
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});

See it working here: http://jsfiddle.net/asgallant/H5K29/