draw something on google charts

[pallavi karpaklu]

Hi,

I want to draw some geometric shapes on the line chart.
is that possible?

please guide me on this if its possible since i am new to this.

Regards,
Pallavi

[asgallant]

Do you mean you want to create a chart that draws geometric shapes?  Or do you want to overlay images on the chart?

[Rajesh G]

Hi,
     Yes We can draw lines in the Google map



Regards,
Rajesh

[ChartALot]

Hi, 

Our API does not support overlaying elements on top of the chart (unlike the Google maps API which does so).

Sorry.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.

To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

[pallavi karpaklu]

Thanks for the reply.

I think i was'nt much clear about it. 

let me  just explain you what actually i am searching for. 

i have a normal google line chart and i want some dynamic icons to be placed on the chart. 

i could just do with the URL request with parameters like this

http://chart.apis.google.com/chart?chs=400x400&chdl=Asleep|Awake&chd=t:1,11,1,11,1,11,1,11,1,11,1,11|1,11,12,14,13|20,31,4,26&cht=lc&chco=586F8E,7D858F,586F8E&chem=y;s=map_xpin_letter;d=pin_sright,A,FF0000;dp=4;ds=0;py=1;of=12,20|y;s=map_pin_icon;d=baby,FF5555;ds=1;dp=6;of=0,22|y;s=map_pin_icon;d=camping,DEF763;ds=2;dp=range,2,5

but i what to draw dynamic icons with

  var chart= new google.visualization.AreaChart(document.getElementById('chart_div'));

chart.draw(data1, {curveType: "function",

                    width: 800, height: 400},{<parameters chem or chd????>}); 

can we do something like this.

i need it very badly. 

Regards,

Pallavi

[pallavi karpaklu]

Thanks for reply.

I think i was'nt much clear about it. 

let me  just explain you what actually i am searching for. 

i have a normal google line chart and i want some dynamic icons to be placed on the chart. 

i could just do with the URL request with parameters like this

http://chart.apis.google.com/chart?chs=400x400&chdl=Asleep|Awake&chd=t:1,11,1,11,1,11,1,11,1,11,1,11|1,11,12,14,13|20,31,4,26&cht=lc&chco=586F8E,7D858F,586F8E&chem=y;s=map_xpin_letter;d=pin_sright,A,FF0000;dp=4;ds=0;py=1;of=12,20|y;s=map_pin_icon;d=baby,FF5555;ds=1;dp=6;of=0,22|y;s=map_pin_icon;d=camping,DEF763;ds=2;dp=range,2,5

but i what to draw dynamic icons with

  var chart= new google.visualization.AreaChart(document.getElementById('chart_div'));

chart.draw(data1, {curveType: "function",

                    width: 800, height: 400},{<parameters chem=? & chd=?>}); 

[asgallant]

The interactive charts don't support anything like that.  You can try to do the overlay yourself, though it is quite tricky to get positioning correct, especially if your data is rather dynamic.  I dug up a function I wrote that does something like what I think you want, feel free to modify it.

/*    appends a marker to a chart representing a national goal target
 *    parameters:
 *        div = the id of the div to add the markers to
 *        percents = array of percent values representing the positions of each marker in the chart
 *            array values represent markers in descending order from the top (ie index 0 = topmost marker)
 *            values of "-1" represent skipped elements (to put markers at 20% for the first and third bar, use {0.2, -1, 0.2}
 *            the total number of values passed must equal the total number of bars
 *        top = array of distances from the top of the chart in pixels for marker positions in the chart
 *            array values represent markers in descending order from the top (ie index 0 = topmost marker)
 *            values of "-1" represent skipped elements
 *            the total number of values passed must equal the total number of bars
 *        left = distance in pixels from the left edge of the chart to the zero point on the x-axis
 *        width = width of the chart area (excluding axes, labels, and legends) in pixels.
 *            alternatively, distance from 0% to 100% in pixels if chart goes higher than 100%
 *        src = the URL of the image for the marker
 */
function appendMarkers(div, percents, top, left, width, src) {
    var img;
    for (i = 0; i < percents.length; i++) {
        if (percents[i] >= 0) {
            img = document.createElement("img");
            img.src = src;
            img.style.position = "absolute";
            img.id = div.id + "_marker_" + i;
            img.style.top = top[i] + "px";
            img.style.left = left + (percents[i] * width) + "px";
            div.appendChild(img);
        }
    }
}

The function overlays a marker that represents a goal target onto a bar chart.  It must be called after the chart is drawn or the markers get wiped out.  You can adapt this for other chart types, though it could be considerably more complicated to work with some chart types.