How to add points in chart by clicking on different areas of it?

[saurabh hirani]

Hi all,

Thanks for developing a great product like GChart which integrates so
easily with GWT and works like charm. I had a query - I want to draw a
chart where I can click on any point along the x-y axis to determine
the point cordinates in model units. Once I get that, I can do an
addPoint() to add the point to the curve.

I tried doing that in GChart but I did not find any methods through
which I can handle a mouse click event to get the x-y cordinates in
model units. I can get the cordinates by implementing an EventListener
for the chart but those cordinates are of the browser window and in
different units. So it does not help. How can we accomplish this in
GChart?

Also, as GChart is a subclass of widget, I can use widget's methods on
it. But as Curve, Point are classes enclosed within GChart, I cannot
use widget methods on it. Am I right in saying this?

[Sumit Chandel]

Hi Saurabh,

Your best bet is to post this question to the Google Visualization API group. Since the mapping in the GALGWT project is generally 1:1, you should be able to get a solution there and code up the equivalent in your GWT application.

Google Visualization API group:
http://groups.google.com/group/google-visualization-api

Cheers,
-Sumit Chandel

[saurabh hirani]

Hi Sumeet,

Thanks for the pointer. Will post in the visualization group.

regards,
Saurabh.

[John Gunther]

Client-side GChart 2.4 was just released today, It supports click
events, so that might help you. Unfortunately,
there are still no client to model coordinate conversion functions.
Please consider adding a request for this feature to the GChart issue
tracker. In the meantime, looking at the setClientX, setClientY,
xToPixel, yToPixel internal methods in GChart.java might help you to
implement such conversion functions on your own (I had considered
adding a clientToModel method within the Axis class for 2.4, which is
where I think this fits into the current API).

Appreciate hearing that you found the product helpful.

John C. Gunther
http://gchart.googlecode.com

[John Gunther]

Saurabh,

Just added a new example chart titled "World's Simplest Line Chart
Editor" that shows you how to add points to a Client-side GChart curve
by clicking on empty space on the chart (you'll need to download the
latest v2.4 version of Cllient-side GChart to use this code):

Code: http://gchart.googlecode.com/svn/trunk/gcharttestapp/src/com/googlecode/gchart/gcharttestapp/client/GChartExample22.java
Screen-shot: http://gchart.googlecode.com/svn/trunk/gchart/src/com/googlecode/gchart/client/doc-files/gchartexample22.png

This example will eventually make its way into GChart's Chart Gallery,
but for now you have to grab them directly from subversion using the
links above.(Don't forget to add the chart to the RootPanel and call
the chart's update method--these steps are not included in the code
above. See note at top of the Chart Gallery for details),

I've pasted in the key lines from this example below, which transform
from client to model coordinates. The first two code lines use generic
GWT methods that anyone who just need to shift the origin of the
client coordinates to the upper left corner of the current element
could use (after removing the GChart calls from these two lines):

// 1st, translate mouse client x,y coordinates into
// pixel distances from upper-left of plot area:
double xPx = Window.getScrollLeft()
+ Event.getCurrentEvent().getClientX()
- getAbsoluteLeft()
- getYAxis().getAxisLabelThickness()
- getYAxis().getTickLabelThickness()
- getYAxis().getTickLength();
double yPx = Window.getScrollTop()
+ Event.getCurrentEvent().getClientY()
- getAbsoluteTop()
- getChartTitleThickness();
// 2nd, transform those pixel offsets to model units:
double x = getXAxis().getAxisMin()*(1-xPx/getXChartSize()) +
getXAxis().getAxisMax()*(xPx/getXChartSize());
// note the pixelY-to-cartesianY min/max swap
double y = getYAxis().getAxisMax()*(1-yPx/getYChartSize()) +
getYAxis().getAxisMin()*(yPx/getYChartSize());
// add point, using the model units:
getCurve().addPoint(insertionPoint++, x, y);

HTH,

John C. Gunther
http://gchart.googlecode.com

On Jan 28, 12:34 am, John Gunther <johncurtisgunt...@yahoo.com> wrote:
> Client-sideGChart2.4 was just released today, It supports click

> events, so that might help you. Unfortunately,
> there are still no client to model coordinate conversion functions.
> Please consider adding a request for this feature to theGChartissue
> tracker. In the meantime, looking at the setClientX, setClientY,

> xToPixel, yToPixel internal methods inGChart.java might help you to

> implement such conversion functions on your own (I had considered
> adding a clientToModel method within the Axis class for 2.4, which is
> where I think this fits into the current API).
>
> Appreciate hearing that you found the product helpful.
>

> John C. Guntherhttp://gchart.googlecode.com

>
> On Jan 9, 7:53 am, saurabh hirani <saurabh.hir...@gmail.com> wrote:
>
> > Hi all,
>

> > Thanks for developing a great product likeGChartwhich integrates so

> > easily with GWT and works like charm. I had a query - I want to draw a
> > chart where I can click on any point along the x-y axis to determine
> > the point cordinates in model units. Once I get that, I can do an
> > addPoint() to add the point to the curve.
>

> > I tried doing that inGChartbut I did not find any methods through

> > which I can handle a mouse click event to get the x-y cordinates in
> > model units. I can get the cordinates by implementing an EventListener
> > for the chart but those cordinates are of the browser window and in
> > different units. So it does not help. How can we accomplish this in
> >GChart?
>

> > Also, asGChartis a subclass of widget, I can use widget's methods on
> > it. But as Curve, Point are classes enclosed withinGChart, I cannot

[saurabh hirani]

Hi John,

> Just added a new example chart titled "World's Simplest Line Chart
> Editor" that shows you how to add points to a Client-side GChart curve
> by clicking on empty space on the chart (you'll need to download the
> latest v2.4 version of Cllient-side GChart to use this code):
>

> Code:http://gchart.googlecode.com/svn/trunk/gcharttestapp/src/com/googleco...
> Screen-shot:http://gchart.googlecode.com/svn/trunk/gchart/src/com/googlecode/gcha...


Thanks a lot for providing such a thorough explanation of how this can
be done. I really appreciate your putting in time to answer these
queries. I will download 2.4 and check it out.

Basically, I wanted to do this because I wanted to highlight an area
of an already drawn chart. In the meantime, while I could not know how
to do this, I had checked out orkut's photo-tagging feature which
allows us to draw a rectangle over an already existing image. While I
implemented drawing a rectangle over an image using GWT with client
cordinates, I realized that it fails when my image is larger than my
browser window. Because as I scroll down or on the side my client
cordinates with respect to a reference point at the top are lost. As
in, my image's top left edge whose cordinate was say (20, 100) before
I scroll is no longer in the frame and (20, 100) becomes the cordinate
of the point at the top left of the browser window which is not the
top left edge but a portion of the image which came into picture when
I scrolled down. I saw that you are using clientX and clientY. So I
thought maybe this information would be useful.

I don't know if I could communicate my thoughts clearly. But I will
check out your code and I have put in an enhancement request on the
GChart issue tracker.

regards,
Saurabh Hirani.
saurabh...@gmail.com

[John Gunther]

Thank, good to know what you were trying to do. Unfortunately, there
are not specific tools in GChart that do the drag-selection rectangle
thing, or let you highlight more than a single point. There are "poor
man's" ways to do similar things. You might let the user click in the
upper left, then lower right, and use the two clicks to define the
rectangle. Not quite the same, I know, but doable via the new
ClickEvents support. You could add a curve with one point
(BOX_SOUTHEAST) and manipulate width and height to draw the selection
rectangle after the second click. You might also try using Annotations
(which can be widgets centered on the point which overwrite it, for
example) on each selected point to represent that fact that they are
selected.

John

On Feb 2, 8:54 am, saurabh hirani <saurabh.hir...@gmail.com> wrote:
> Hi John,
>
> > Just added a new example chart titled "World's Simplest Line Chart
> > Editor" that shows you how to add points to a Client-sideGChartcurve
> > by clicking on empty space on the chart (you'll need to download the

> > latest v2.4 version of Cllient-sideGChartto use this code):

>
> > Code:http://gchart.googlecode.com/svn/trunk/gcharttestapp/src/com/googleco...
> > Screen-shot:http://gchart.googlecode.com/svn/trunk/gchart/src/com/googlecode/gcha...
>
> Thanks a lot for providing such a thorough explanation of how this can
> be done. I really appreciate your putting in time to answer these
> queries. I will download 2.4 and check it out.
>
> Basically, I wanted to do this because I wanted to highlight an area
> of an already drawn chart. In the meantime, while I could not know how
> to do this, I had checked out orkut's photo-tagging feature which
> allows us to draw a rectangle over an already existing image.  While I
> implemented drawing a rectangle over an image using GWT with client
> cordinates, I realized that it fails when my image is larger than my
> browser window. Because as I scroll down or on the side my client
> cordinates with respect to a reference point at the top are lost. As
> in, my image's top left edge whose cordinate was say (20, 100) before
> I scroll is no longer in the frame and (20, 100) becomes the cordinate
> of the point at the top left of the browser window which is not the
> top left edge but a portion of the image which came into picture when
> I scrolled down. I saw that you are using clientX and clientY. So I
> thought maybe this information would be useful.
>
> I don't know if I could communicate my thoughts clearly. But I will
> check out your code and I have put in an enhancement request on theGChartissue tracker.
>
> regards,
> Saurabh Hirani.

> saurabh.hir...@gmail.com

[saurabh hirani]

> Thank, good to know what you were trying to do. Unfortunately, there
> are not specific tools in GChart that do the drag-selection rectangle
> thing, or let you highlight more than a single point. There are "poor
> man's" ways to do similar things. You might let the user click in the
> upper left, then lower right, and use the two clicks to define the
> rectangle. Not quite the same, I know, but doable via the new
> ClickEvents support.

In fact, when I started out with GWT that is what I was trying to do -
the poor man's way - click, click, click, click, click - rectangle.
The fifth click being at the same point as the first as I was drawing
lines between points. When I could not get through with it by getting
client2model units, I started looking how others might have
implemented it and then I saw the photo tagging feature of orkut,
which does the rectangle thing. I implemented that in GWT but with the
client window problems that I described above.

regards,
Saurabh Hirani.
saurabh...@gmail.com

[saurabh hirani]

And due to your example I found the missing piece to my puzzle.
getScrollLeft and getScrollTop - I was searching for methods which
could give me these cordinates to solve the problem as described
above. I was studying your code and I used it in my work of drawing
rectangle using GWT and it worked. Thanks a lot.

- Saurabh

[John Gunther]

GChart 2.41 is out and it incorporates a getMouseCoordinate method and
adds an improved version of the simple line chart editor I linked to
above to the "Chart Gallery" and live demo. Thanks for adding your
request for these features to the GChart issue tracker. See this
related post for more details about v2.41:

http://groups.google.com/group/Google-Web-Toolkit/msg/137e190dfa0c17af

John

On Feb 3, 11:20 am, saurabh hirani <saurabh.hir...@gmail.com> wrote:
> On Feb 2, 6:54 pm, saurabh hirani <saurabh.hir...@gmail.com> wrote:
>
>
>
> > Hi John,
>
> > > Just added a new example chart titled "World's Simplest Line Chart
> > > Editor" that shows you how to add points to a Client-sideGChartcurve
> > > by clicking on empty space on the chart (you'll need to download the

> > > latest v2.4 version of Cllient-sideGChartto use this code):