
This sample program demonstrates a track cursor programmed with the following features:
- A vertical line that connects the data points to the x-axis, with an x-axis label displaying the x value.
- Horizontal lines that connect the data points to the y-axes, with y-axis labels displaying their values.
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 trackLineAxis 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 trackLineAxis Javascript function is the routine that draws the track cursor. Its key elements are:
- The code first uses JsChartViewer.hideObj to clear the previous track cursor, if any.
- The nearest x data value is obtained using JsXYChart.getNearestXValue.
- The code iterates through all data sets in all layers to find the highest data point at the nearest x data value. It then draws a vertical line from that point to the x-axis using JsChartViewer.drawVLine, and the corresponding x-axis label using JsChartViewer.showTextBox.
- The code iterates through all data sets in all layers once more to find all the data points at the nearest x data value. For each of these points, it draws a horizontal line to connect the point to the y-axis using JsChartViewer.drawHLine, draws the axis label using JsChartViewer.showTextBox, and draws a square dot at the point using JsChartViewer.showTextBox and JsChartViewer.htmlRect.