Get x-axis datetime value client side

TeeChart for Microsoft Visual Studio .NET, Xamarin Studio (Android, iOS & Forms) & Monodevelop.
Post Reply
norman
Newbie
Newbie
Posts: 82
Joined: Fri Jan 25, 2008 12:00 am

Get x-axis datetime value client side

Post by norman » Wed Apr 01, 2009 2:55 pm

Hi,

I'm trying to implement some javascript that will popup an alert showing the x-axis datetime value when the x-axis is clicked.

I have added a new element to the hotspot map that corresponds (approximatly) to the coords of the x-axis and I have an alert that popups telling me whenever I have clicked on the axis, however I don't know how to (a) retrieve the mouse coordinates on the image (not the screen) and (b) how to convert these to a datetime value (e.g. message might say "you clicked at [100, 150] or 01/01/2008 00:00:00").

When drawing the polygon that defines the x-axis I used the following logic:

Code: Select all

Dim ch As Steema.TeeChart.Chart = WebChart1.Chart
Dim rectTop As Integer = ch.Axes.Bottom.Position
Dim rectLeft As Integer = ch.Axes.Bottom.CalcXPosValue(ch.Axes.Bottom.Minimum)
Dim rectHeight As Integer = 10 ' give some room for the user to click below the axis
Dim rectWidth As Integer = ch.Axes.Bottom.CalcXPosValue(ch.Axes.Bottom.Maximum) - ch.Axes.Bottom.CalcXPosValue(ch.Axes.Bottom.Minimum)

mapElements &= "><AREA shape=""Poly"" " & _
   "onclick=""axisClick();"" " & _
   "coords=""" & _
   rectLeft & _
   "," & _
   rectTop & _
   "," & _
   rectLeft + rectWidth & _
   "," & _
   rectTop & _
   "," & _
   rectLeft + rectWidth & _
   "," & _
   rectTop + rectHeight & _
   "," & _
   rectLeft & _
   "," & _
   rectTop + rectHeight & _
   """"
   ' e.g. <AREA shape="Poly" onclick="axisClick();" coords="53,267,316,267,316,277,53,277">

The resulting rectangle doesn't quite line up with the bounds of the x-axis in that there is some room (e.g. 5 pixels) to the extreme left (i.e. nearest the left axis) and to the right (i.e. nearest right axis if visible) that does not respond to mouse clicks because ch.Axes.Bottom.Minimum and ch.Axes.Bottom.Maximum correspond to the min and max series value which doesn't seem to correlate exactly with the actual min and max that is visible. Can I make it make it a bit more accurate by using some other base marker (e.g. ch.Axes.Left.Position?). Any tips would be appreciated, however its the primary question of how to get the coords and corresponding value that is more important.

(I know that you can accomplish this server side using the ClickAxis event but I need to do it client side to avoid a postback).

Thanks,

Norman

Post Reply