Google Combo Chart add horizontal and vertical line in column chart

Question

How do I create a Google Combo Chart that replicates the image below? It seems once I add the column for the vertical line the green columns lose their groupWidth property and turn into skinny lines.

    data.addColumn('number', 'X');
    data.addColumn('number', 'Y');
    data.addColumn('number', 'Average');
    data.addColumn('number', 'Vertical Line');

    data.addRows([
        [1, 5, 3, null],
        [3, 4, 3, null],
        [5, 2, 3, null],
        [2, null, null, 0], // add vertical line
        [2, null, null, 5],
    ]);

Here is a jsfiddle: http://jsfiddle.net/vmb4odkt/

Answer 1

The whole thing can use some cleanup especially depending on your final data, but here's a good solution I think. I used the inspection methods to find out where on the chart's div the line should go and then add a new div to draw the line over the SVG chart. You can similarly add an SVG node to the SVG element in the DOM.

http://jsfiddle.net/vmb4odkt/2/

I had to make the container div position: relative to make calculations easier.

The main code is this:

var line = document.createElement("div");
var interface = chart.getChartLayoutInterface();
var cli = chart.getChartLayoutInterface();
line.style.background = "red";
line.style.width = "2px";
line.style.position = "absolute";
line.style.left = (interface.getXLocation(2) - 1) + "px";
line.style.top = interface.getYLocation(5) + "px";
line.style.height = (interface.getYLocation(1) - interface.getYLocation(5)) + "px";
el.appendChild(line);

All of the hardcoded values can be removed and replaced with either calculations or constants depending on your data source.