List Variables
Cell Content 1 Cell Content 2

List Time Range

Select Deployment Time Range:

X Parameter
Cell Content 1 Cell Content 2
Y Parameter
Cell Content 1 Cell Content 2
Symbol
Cell Content 1 Cell Content 2

Symbol Options

Symbol Color:

Other Options

Plot Title:

X Axis

Y Axis

Time Domain

Select Deployment Time Range:

Select Deployment Time Range:

Select Deployment Time Range:

Map Type:

Preliminary Data Style
Symbol
Cell Content 1 Cell Content 2

Symbol Color:

Line Color:

Legend:

Finalized Data Style
Symbol
Cell Content 1 Cell Content 2

Symbol Color:

Line Color:

Legend:

Y Parameter
Cell Content 1 Cell Content 2 Cell Content 3
Y-Axis Options

Other Options
Color:
Color:
Color:
Background Color:
Primary Y Axis
Cell Content 1 Cell Content 2 Cell Content 3
Secondary Y Axis
Cell Content 1 Cell Content 2 Cell Content 3
Y-Axis Options
Time-Axis Options
Select Deployment Time Range:
Other Options
Background Color:
Grid Color:
Preliminary Data Style
Symbol
Cell Content 1 Cell Content 2

Symbol Color:

Line Color:

Legend:

Finalized Data Style
Symbol
Cell Content 1 Cell Content 2

Symbol Color:

Line Color:

Legend:

Y-Axis Settings
Other Settings

Loading Page...

Introduction

This an example of a web-based time series charting application built with modern web technologies such as Javascript, HTML5 Canvas, and JQuery. Although I use scientific data to demonstrate this app, it is compatible with any time series data. I have defined specifications for how data and plots are modeled that can be easily applied to other domains of data.

Browser Compatibility

This app has been tested with Firefox (Mac, Win7, Debian, and ARM tablet ("Open Pandora")), Safari (Mac and Win7), Chrome (Mac and Win 7), ChromeOS, and IE 10 (Win 7)
Because of some anomalies in Firefox and IE, I recommend Chrome or Safari.

Browse Data (alpha)

Data Type Filter:


Time Filter:

Location Filter:
Latitude:
Longitude:
(Shift-drag on map defines custom lat/lon filter)
Depth:
Files
Cell Content 1 Cell Content 2

Plot Features and Instructions

Create a Time Series Chart!

Add a preconfigured time series chart to page by clicking one of these two buttons (you can click them multiple times):



Click this button to add a custom chart to page:

About

About the Data

The test data come from a NOAA buoy near La Push, WA that measures CO2 in the air and seawater (along with other ancillary and computed values).
These data consist of 16 parameters measured at 1965 unique times between 5/26/2012 12:17:00 AM and 1/18/2013 9:17:00 PM

About the Technologies

HTML, CSS, JSON, AJAX, HTML5 Canvas, JavaScript, JQuery, JQuery UI, and Google Maps. This app includes about 12K lines of code, HTML, and CSS.

Known Bugs

The plot close button is flakey.
The symbol scrolling lists in IE 10 are "weird". The custom chart dialog has serious layout issues in FireFox

Credits

John "Oz" Osborne did the software development and user interface design. He takes full blame for bugs and "features".
The JavaScript implementations of TimeAxis, GeoDate, and TimeRange are ported from Don Denbo's Java SGT library
I felt fortunate to stumble across the Spectrum JavaScript Colorpicker--it saved me a lot of work!
Loupe was inspired by David Geary's Core HTML5 Canvas
Oz is incredibly thankful to Steven Ohmert for giving up his quality ferry time helping me try to grok the idiosyncrasies of JavaScript.