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();
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit
https://groups.google.com/d/msgid/google-visualization-api/5d2767f1-c484-49ba-9f22-c0fa773a02bb%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
