
This sample program demonstrates a track cursor programmed with the following features:
- A vertical line that follows the mouse cursor on the plot area and snaps to the nearest x data value.
- Small dots that shows the data points at the nearest x data value.
- Dynamically updated legend entries that shows the value of the data points at the nearest x data value.
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 trackLineLegend to draw the track cursor when the mouse moves on the plot area. The windows onload event handler also directly calls trackLineLegend to initialize the track cursor to the right side of the plot area. This is to ensure the chart initially has a legend that reflects the latest data values.
The trackLineLegend 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.
- A vertical line is drawn at the nearest x data value using JsChartViewer.drawVLine.
- The code then iterates through all data sets in all layers to find all the data points at the nearest x data value. For each of these points, it formats a legend entry for the point, which consists of a colored square as the icon (creating using JsChartViewer.htmlRect), the data set name (obtained using JsDataSet.getDataName), and data value (obtained using JsDataSet.getValue). The code also gets the point's y position using DataSet.getPosition, and draws a square dot using JsChartViewer.showTextBox and JsChartViewer.htmlRect.
- Finally, the code combines all the legend entries and draws them at the top of the plot area using JsChartViewer.showTextBox.