The ChartDirector Javascript Chart Model is a read-only representation of a ChartDirector chart as Javascript objects on the browser side. It is designed to facilitate implementing track cursors on the browser side.

To draw track cursors on the browser side, certain chart configuration (such as the position and size of the plot area, the axis scale of all axes, the data values, etc) needs to be accessible on the browser side. To do this, BaseChart.getJsChartModel can be used on the server side to generate a data structure containing the chart configuration. The data structure can then be passed to the WebChartViewer using WebChartViewer.ChartModel, which will send it to the browser. On the browser side, the Javascript Chart Viewer will use the data structure to construct Javascript objects representing the chart. These objects can be accessed using JsChartViewer.getChart.

Currently, the Javascript Chart Model only supports XYChart objects.

A chart can contain a huge amount of data. Sending all of them over the network to the browser can be slow, inefficient and unnecessary for the purpose of drawing track cursors. ChartDirector addresses this issue by sending only a subset of the chart configuration items that are commonly used to draw track cursors.

For example, consider a line layer containing 50000 data points with the line flowing horizontally. If the plot area is 500 pixels wide, a track cursor "sweep line" that moves with the mouse can have at most 500 different coordinates. It is because the mouse coordinate must be an integer. In other words, even on average there can be 500 data points between two pixels, the "sweep line" must jump from one pixel directly to the next pixel, skipping all the data points in between. In this case, in generating the Javascript Chart Model, ChartDirector will omit the data points that cannot be addressed by a track cursor. In practice, this method limits the data for each data set to no more than 2 times the number of x pixels in the plot area.