Using Time Series Data

ZingChart allows you to utilize time series data quickly with the chart types line or bar. Here's how.

What Type of Time Series Data Do I Have?

Linear

Linear time-series data is defined from a specified starting time with each data point occurring at a fixed time interval. Linear data is most common in data conveying real-time events such as server uptime or stock price fluctuations.

Linear data is represented as a single-dimensional array :

• Dataset: [23.32, 24.23, 27.35, 29.23, ...]

• Start time: Tue Apr 26 2016 08:00:00 GMT-0700 (PDT)

• Interval: 1 second

Irregular

Irregular time series data associates every datum with a corresponding time value. These points do not have to be consecutive, nor follow a consistent interval of time elapsed between datum.

Irregular data is represented as a multi-dimensional array:

• Dataset: [[1452412800000, 23.32], [1452585600000, 27.43], ...]]

Each index in the dataset represents a datum with x and y coordinates. The x coordinate represents UNIX time, and the y is the value.

Creating a Chart with Linear Time Series Data

Creating a linear time series chart requires a few simple steps.

We start with a simple configuration object:

{  
  type: 'line',  
  scaleX: {},  
  series: [  
    {  
      values : [23.32, 24.23, 27.35, 29.23, 24.32, 26.34, 15.34, 19.23]  
    }  
  ]  
}  

1. Configure the Start Date.

Inside of the scaleX object, set the minValue object to your state date in UNIX epoch time.

minValue: 1373045400000

Our Unix epoch time of 1373045400000 translates to 07/05/2013 at 10:30AM PST.

2. Set the Step (interval).

The step value is the rate at which the data is plot in milliseconds.

step: 60000

Our step is set to 60000 milliseconds (1 minute).

3. Transform the Scale-x Labels.

By default, our chart will display the scale-x axis with Unix time (1373045400000, 1373045460000, ...), which is nice for computers but not for humans. We utilized ZingChart's transform object that will transform our Unix time into a human readable date.

transform: {  
    type: 'date'  
    all: '%m/%d/%y  %h:%i %A'  
}  

Our example will convert 1373045400000 into: 07/05/2013 10:30AM

We set the type to date to let ZingChart know we want a date label. The all property accepts a number of token values such as month, day, year, hour, minute, second, etc. All of the date tokens can be found below.

• %A Displays the ante or post meridiem time in upper case letters: AM or PM.

• %a Displays the ante or post meridiem time in lower case letters: am or pm.

• %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.

• %dd 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 without a leading 0 if the month is single digit.

• %mm 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.

4. Render the Chart!

Uh oh! My data is supposed to be linear, but my data skipped a few values.

In the cases where your linear data set has small interruptions, simply omitting the value from your array but maintaining the same number of commas will interpret the missing value as null.

e.g. [23.32, 24.23, 27.35, , 24.32, 26.34, 15.34, 19.23]

Creating a Chart with Irregular Time Series Data

Creating an irregular time series chart is similar to creating one with linear time series data... with a few important differences.

We again start with the following configuration object:

{  
    type: "line",  
    scaleX: {},  
    series: [  
        {  
            values : [[1452412800000, 23.32],[1452585600000, 27.43],[1452844800000, 34.23], [1453276800000,27.23], [1454054400000, 29.32],[1454313600000, 22.45], [1454400000000, 53.32]]  
        }  
    ]  
}

1. No minValue or step Required.

Since our data contains x and y pair values, the scale is created dynamically based upon the times provided.

2. Transform the Scale-x Labels.

Our scale-x labels still display Unix time from our dataset. We need to let ZingChart know these are time datum and to transform them for us. We utilize the same transform object as our linear scale example.

transform: {  
    type: 'date'  
    all: '%m/%d/%y  %h:%i %A'  
}  

3. Render!