Introduction

The core plotting routines for time series data are derived from the Dygraphs library. However, they should be considered a fork of this library, as they implement a much faster model-view-controller interface instead of a pure plot-from-raw-data interface.

Details

The main code you are likely to care about is:

• JsArrayDygraph.java: this is the GWT wrapper around the graph rendering kit, which takes JsArray (i.e., !Javascript array) data and plots the contents on the screen.

• dygraph.js: This is the core JavaScript code for Dygraphs.

• dygraph-canvas.js: This is the actual plotter code for rendering the data and annotations.

• !Dygraph*Handler.java: These are event handler interfaces, written in GWT, for trapping various events, such as double-clicks, zoom requests, etc. To attach a handler, you will need to call JsArrayDygraph.set*Handler().

• DygraphPointMapper.java: This interface is used for remontaging and other signal manipulation. It gets called with information about the current y-value, baseline, other y-values, scale (zoom) factor, and information about whether to invert the signal. It should return a new y-coordinate to be plotted.

Model-View-Controller Additions

At a lower level, the key point of difference between our implementation and traditional Dygraphs is the underlying model-view-controller architecture. Here, instead of going from raw data --> canvas coordinates --> rendering in each redraw cycle, we separate the raw data, canvas coordinates, and render paths into stages with state preservation. This enables two main benefits: (1) we can keep more data around than fits within the current canvas, enabling prefetching and caching; (2) we can refresh the screen (re-render) without recomputing the canvas coordinates.

The new JavaScript classes are: * DDataSet represents the "raw" data matrix to be rendered, with rows representing channels and columns representing points. Row 0 is the x-value of each column. * DDataView represents the data after it has been mapped into the coordinate space of the canvas. It can be very rapidly re-rendered. * The key function here is getCoord(row,col), which maps the DDataSet data into the DDataView coordinate space. If a DygraphPointMapper is defined, it will be used to do this mapping. The default logic allows for specification of plot-against-baseline, plot-against-average, signal inversion, scale-up, etc.

On the client-side, the main points of connection are: * EEGPane.getData() fires events to request snapshot data * EEGPresenter.onSnapshotReceived() triggers the view-update and rendering routines in Dygraphs * ServerAccess and SnapshotCache handle caching of request data, reuse of the cache, incremental requests, prefetching, etc.