code-diesel

Using lines, points and other geometrical objects to visualize data has always fascinated me; specially time series. Time series charts let you visualize data points separated by time intervals.

The following image shows an example of a time series data representing the salary of software engineers for a particular duration.

Timeplot is a javascript widget which lets you visualize time series data in a colorful manner with many options to tweak the final output. In this post we will build a time series plot for visualizing yearly US immigrant population. You can download the raw data here.
Lets start with creating a time series plot.

Shown below is a sample excerpt from the data file.

STEP 1. Creating the basic container.
The basic setup is simple. A javascript library and a container to hold the plot as shown below.

STEP 2. The main display block.
The main display code is executed in the onLoad event. There are many options to tweak the display but the one shown below will get you started. You can save the below code in a separate file or embeded in a script tag.

The final output is show below.
<br /> Your browser does not support inline frames or is currently configured not to display inline frames.<br />

Download code