Bar chart with target range

[C Z]

Hello,

I'm looking for a way to add a horizontal target range to a bar/combo chart. My application provides data for the vertical bars and a value for a lower and upper bound for a target range. The result i'm looking for looks somewhat like this:

So the solution i'm looking for would require me to enter a lower and upper bound and it would fill in the area between the two bounds. I haven't found a way in the API docs to implement this. 

Is there a simple solution to implement this with the charts library ? Or has anyone found a similar charting library that can do this job?

[Sean Larson]

I needed to do a similar task, except a line, but we can adapt my code snippet for a box.

We are using the "Overlay" method from the documentation if you want to read that for more detail.

This is using the "getYLocation" method to return the screen location of a vAxis value. For my line I just used a fixed height, but for your box you will want to set the height of the overlay element based on getYLocation(a) - getYLocation(b). Since I set the top, you only need the height. I guess you could set top and bottom as well.

You need to add another div to your HTML to be the overlay, with absolute or fixed positioning. 

make sure you call the placeMarker function after the chart ready event fires.

    google.visualization.events.addListener(myChart, 'ready', function () {

                placeMarker();

            });

function placeMarker() {


var cli = myChart.getChart().getChartLayoutInterface();
var chartArea = cli.getChartAreaBoundingBox();

tempTop = cli.getYLocation(95);
document.querySelector('.overlay-marker').style.top = tempTop - 2.5 + "px";
document.querySelector('.overlay-marker').style.left = 0;
document.querySelector('.overlay-marker').style.opacity = 1;

}

myChart.draw();