This project aims at the development of a charting widget for the visualization of process data (time series) stored on a server. The widget must be capable to draw one or more date series on one or more axes.
The implementation shall be done with D3.js, integrated into an ExtJS widget (version 4.1.3 or later). A prototype will be made available to the freelancer.
A particular challenge of this project is the massive amount of data available on the server, which makes loading all data into the client unpractical and thus requires smart data loading and caching algorithms.
Please note, however, that the server pre-aggregates all data (hourly, daily and weekly averages, maximum and minimum values etc.) which should be used when many days’ data should be visible.
* Data Characterization *
- Expect all time series to be real-valued
- Each time series has its own sampling interval (which may even vary over time)
- Time series might have missing values, but they will be marked (quality information)
* Client-Server Communication *
- Data is stored on the server and can be queried via Ajax. The query and return format can be changed according to the freelancer’s requirements. A non-exhaustive list of query arguments includes: time_series_id, from_date, to_date, limit, aggregation level; the returned json object typically contains and array of data points (date-value-quality triples).
- Client and server are in the same network, so latency is low and bandwidth high. Also, there will typically only be one or two clients performing requests on the server. So, both, performing many little and few large queries will be fine.
* Frontend *
The screenshot of the frontend prototype (will be made available) is attached to this project proposal. Key aspects of the user experience are detailed here:
Choice of the visible time domain:
- The user specifies a time span by choosing from_date and to_date from calendar widgets
- The user specifies the number of days he/she wants to display
- The user scrolls forward or backward by means of arrows
- Zoom and pan (mouse wheel scrolls, left-click and mouse-move pans)
- Zoom only (user draws rectangle to zoom in (rectangle and shift-key to zoom out)
- Hover: a vertical hover line is displayed and data values are shown
- Selection: A user selects data points by drawing a rectangle (and a callback function is called with the rectangle bounds)
- Visible time series are listed in an ExtJS gridpanel (marker, color, caption, unit)
- The user must be able to change style properties of the selected series (selected in legend gridpanel), which includes colors (line and marker), whether or not to display line, line and marker size, and on which axis to draw
- Because values of time series that are visualized together may have different magnitudes, it must be possible to add additional axis on the left (and if possible also right) of the plot and to switch the axis a time series is plotted on.
Automatic selection of aggregation levels:
- On zoom in and zoom out, aggregation levels should automatically be switched (e.g., from raw to hourly data, from hourly to daily data etc.). When aggregated values are displayed, minimum and maximum values within the aggregation window must be visible, in addition to the average value.
Load and save:
- It must be possible to load and save the chart configuration (JSON object)
* Material and Documents *
- A standalone prototype application implementing some of the features pointed out above will be made available
- Additionally, http://bl.ocks.org/benjchristensen/2657838 might be a good starting point in terms of interactive line graphs for D3
- A more appropriate solution to ExtJS Stores might be the Dataset module of “The Miso Project” (http://misoproject.com/dataset/)
Please feel free to contact me should you require additional information.