Draw a custom line into the an existing Chart

[HansDampf]

HI,

I want to let the user draw a custom line into an existing Chart, for analytical stuff like this: http://phenxdesign.net/projects/flotr/examples/prototype/click-event.html.
this framework can draw it with Click Event Hook. I m not able to find anything like that for google API, did they support something like that?

 

[asgallant]

That is an interesting idea.  I suspect that you could make it work by hooking the "click" event of the "body" element inside the chart's iframe.  If you interpolate the mouse position into chart coordinates, you can add a point to the DataTable object and redraw the chart.  ScatterCharts would probably work best for this, as line charts will draw evenly spaced data points.

You'd need a way to hook into the iframe's contents (I find jQuery is best for this).  You can use this as a basis:

$("#chart_div").find("iframe").contents().find("body").click(function(e) {
    // get X and Y coordinates in the chart
    var x = e.pageX - this.offsetLeft;
    var y = e.pageY - this.offsetTop;
    /*  
     *  transform coordinates into chart values
     *  and insert into data table object
     *  
     *  redraw the chart with new data
     */

});

You'll need to custom code your own function to interpolate the coordinates into data.  Put this in your draw function after you draw the chart the first time. 

[asgallant]

Better yet, put this in after you call the draw method (otherwise the chart might not finish drawing before this is called, and jQuery could throw an error):

/*  assumes that chart is your chart object
 *  hooks the 'click' event of the chart div's iframe's body element
 *  interpolates the mouse coordinates into chart values
 *  adds them to the chart and redraws the chart
 */
google.events.addListener(chart, 'ready', function () {

    $("#chart_div").find("iframe").contents().find("body").click(function(e) {
        // get X and Y coordinates in the chart
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        /*  
         *  transform coordinates into chart values
         *  and insert into data table object
         *  
         *  redraw the chart with new data
         */
    });

});

[Riccardo Govoni ☢]

I'd suspect the transformation between pixel coordinates and data coordinates in the chart reference frame to be the really tricky part, since charts do quite a lot of magic behind the scene to decide what the axes scale is (and what paddings to use, which also affects the conversion).

Fixating as many chart parameters as possible (forcing a specific axis scale, extent, removing all visual aspects like the legend which may affect the positioning of the chart inside the iframe...) may help in the calculation, but it'll probably still remain a fragile process until charts start exposing more of their internals to accommodate these needs.

-- R.

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

To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/zRTsQAAWn64J.

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.

[HansDampf]

I can get an event with the function selectHandler(e) {} in the Line Chart, but not within the candlesticks.
But It should be possible, just listen for an event and redraw the chart on every event...

[asgallant]

Are you using something like I posted?  If so, it may be necessary to register the chart event handler after creating the chart object but before drawing it, not after as I stated (the chart could finish drawing and throw the ready event before the event handler gets registered).  The event handler for the chart's iframe should work as posted in 99% of cases (there are some corner-cases where it is impossible to access the contents of an iframe, but they are rather unlikely to occur).