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.

enter image description here

I think the only one way is to add code that changes SVG markup after the chart is drawn. Or use some other chart framework, but it will still require writing custom code. — vortexwolf
– vortexwolf, Commented Mar 1, 2014 at 10:40

asgallant · Accepted Answer · 2014-03-03 16:11:23Z

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/

answered Mar 3, 2014 at 16:11

asgallant

26.4k6 gold badges75 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Hariprasath Over a year ago

is any way to get the annotation to the top of the chart as like the expected chart shown above?

asgallant Over a year ago

No, you cannot control the positioning of the text.

Collectives™ on Stack Overflow

How implement the following chart in google chart api?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related