Using Time Series Data and the Transform Object

One of the most commonly charted types of data is time series data. It lends itself to visualization because the human brain likes to detect patterns and order, and plotting data points on a linear axis puts time series data in visual order.

Setting up user-friendly data visualizations with time series data may sound complicated. However, ZingChart can make it easy to bring your time series data to life, and the results can really impress the users of your charts and graphs.

Time Series Data

calendar_data
Some of the most popular applications for time series data include:

Stocks, commodities, and financials
Web analytics
Public utility usage
Experiment monitoring

Since this is such a popular area of charting, the ZingChart team thought it would be helpful to explain the steps for taking a dataset and making it presentable to end users in terms of time series.

Unix Time in Data

watch_for_time_series

When working with a time series dataset, there are a couple things to consider: What format is your data already in and how do you want to display it? Are your dates Unix timestamps?

Excellent! You’re ready to get started using the ZingChart transform object to display your date. What if they are date strings, like “12/31/2014”, or full timestamps like “11/28/04 16:30”? If you’re happy with your values as they are, then just plug them into the values array inside of the appropriate scale object.

Alternatively, do you want the day of the week displayed or the name of the month? Do you want dates formatted as DD/MM/YY instead of MM/DD/YY? If you have a substantial amount of data, it might be prohibitively time-consuming to make these edits manually.

This is when it becomes more convenient to convert your dates to Unix timestamps and format them with the transform object.

Unix Time Converters

There are multiple conversion tools on the web that convert both to and from Unix time. Epoch Converter offers a batch conversion tool (max 500 items) where you can paste your values in and it will return Unix timestamps that you can copy out.

If the tool does not provide a side-by-side comparison of the new Unix timestamp and its original date, it’s always a good idea to convert a couple values back to a human readable date to ensure the conversion went smoothly and the new timestamps are accurate.

Unix Time Conversion Function

If you have a sizable dataset and/or prefer to process your data yourself, then you can always write your own function to convert your values. Here is a simple JavaScript function that returns an array of converted dates:

function convertToUnix(arr){  
    var newDates = arr.map(function(val){  
        return Date.parse(val);  
    });  
    return newDates;  
}

As with conversion tools, it’s wise to double check a couple of your dates to ensure proper conversion as Date.parse has been known to behave unpredictably with some string formats.

Using Unix Time Series Data

In ZingChart, you can include the transform object within the scale object to set the type to date. This tells ZingChart to transform the Unix time into a date.

Time Formatting Options

ZingChart lets you format in combinations of the following tokens:

%q	Displays milliseconds.
%s	Displays seconds.
%i	Displays minutes.
%H	Displays the hour in 24-hour format with a leading 0 if the hour is single digit.
%h	Displays the hour in 12-hour format with a leading 0 if the hour is single digit.
%G	Displays the hour in 24-hour format without a leading 0.
%g	Displays the hour in 12-hour format without a leading 0.
%D	Displays the day of the week in abbreviated form.
%d	Displays the day's date with a leading 0 if the date is single digit.
%M	Displays the month in abbreviated form.
%m	Displays the month numerically with a leading 0 if the month is single digit.
%Y	Displays the year in 4 digit format.
%y	Displays the year in 2 digit format.

The data we chose was collected on our hourly basis, so we displayed the date in DD/MM/YYYY format and the time in 24 hour format. Separating date and time with a line break reduces clutter on our x axis and improves readability.

"type":"date",  
"all": "%m/%d/%Y&lt;br&gt;%H:%i"

Do you have the time?

ZingChart’s flexibility makes creating charts with time series data easy and guarantees your end users will be provided with the information they need to make crucial decisions.

How have you formatted time series data to help users? Share your dataviz tips in the comments section below. You might also want to check out our other post on using time series data effectively!