
This sample program demonstrates a track cursor programmed as a crosshair cursor with axis labels. In additional, it demonstrates using hot spot events to pop up a box when the mouse is over a data point or the trend line, showing information about these objects with HTML formatting.
The key elements of the server side charting code are as follows:
- The code draws the chart as usual.
- The code configures the image map for the scatter layer to call the Javascript function showDataPointToolTip on mouse over, and call hideToolTip on mouse out.
- The code configures the image map for the trend layer to call the Javascript function showTrendLineToolTip on mouse over, and call hideToolTip on mouse out.
- The code outputs the chart image, the image map and the Javascript Chart Model to the browser.
-
On the browser side, in the window onload event handler, Javascript is used to set up the JsChartViewer.MouseMovePlotArea event handler. The MouseMovePlotArea event handler calls crossHairAxisLabel to draw the track cursor when the mouse moves on the plot area. It also calls JsChartViewer.setAutoHide to automatically remove the track cursor when the mouse leaves the plot area.
- The code uses JsChartViewer.showCrossHair to draw a crosshair on the chart.
- The code gets the JsAxis objects representing the x and y axes of the chart, and draws labels on them using JsChartViewer.showTextBox.
The crossHairAxisLabel Javascript function is the routine that draws the track cursor. Its key elements are:
- The code uses JsChartViewer.showCrossHair to draw a crosshair on the chart.