Column chart with horizontal line

270 views
Skip to first unread message

Ben

unread,
Mar 15, 2011, 1:24:21 PM3/15/11
to Google Visualization API
Hi All,

Is that possible to draw a horizontal line in a column chart graph.
Assuming I have production and target for each month and I want to
display the production column bar for each month but because target is
same for all months I would like to show it as a single figure using a
horizontal line. This line will cross all production bars horizontally
if we reach the target so it will be clearer that how far we are from
target in each month.


Regards


Behnam Divsalar


asgallant

unread,
Mar 15, 2011, 3:48:48 PM3/15/11
to Google Visualization API
I have tried something similar, and as far as I'm aware, you can't do
it with the charts API. There is another way if you're willing to get
your hands dirty, though: make an image of the horizontal line, and
append it to the chart's div after the chart has been drawn. You'll
need to experiment to get the placement right, but it's not that
hard. It works something like this:

function appendImage(div, top, left){
var img;
img = document.createElement("img");
img.src = "path/to/image/file.ext";
img.style.position = "absolute";
img.style.top = top + "px";
img.style.left = left + "px";
div.appendChild(img);
}

function drawChart(){
...
chart.draw(data, options);
var div = document.getElementById(chart.id);
var top = *distance from top of chart in pixels*;
var left = *distance from left edge of chart in pixels*;
appendImage(div, top, left);
Reply all
Reply to author
Forward
0 new messages