Implementation of a Charting Plugin for ExtJS based on D3JS for the Visualization of Time Series Data

IN PROGRESS
Bids
15
Avg Bid (USD)
$1308
Project Budget (USD)
$750 - $1500

Project Description:
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

Navigation-Tools:
- 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)

Legend:
- Visible time series are listed in an ExtJS gridpanel (marker, color, caption, unit)

Series properties:
- 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

Axes:
- 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.

Skills required:
D3.js, Data Processing, Javascript, MVC, User Interface / IA
Additional Files: Screenshot+Charting.pdf
Hire davidds
Project posted by:
davidds Switzerland
Verified
Public Clarification Board
Bids are hidden by the project creator. Log in as the employer to view bids or to bid on this project.
You will not be able to bid on this project if you are not qualified in one of the job categories. To see your qualifications click here.


$ 1300
in 21 days
$ 1360
in 11 days
$ 2000
in 10 days
$ 1100
in 30 days
$ 1000
in 20 days
$ 875
in 15 days
$ 900
in 7 days
$ 900
in 30 days
$ 1500
in 30 days
$ 1300
in 21 days