Time Axis

The X-axis of a chart in FusionTime represents the date column from the data table and is known as the Time Axis. Based on the atomicity of the data and the active window (of the time navigator) the time axis intelligently creates a timescale to display the chart data. Refer to the image below:

Time Axis

The salient features of the time axis are:

  • Intelligently creates a timescale to represent the chart data.

  • Uses major ticks, minor ticks and the contextual labels to help understand the timescale.

  • Each tick is associated with a label. The label is center aligned with the tick and appears right below it.

  • The visibility of each label is smartly controlled to reduce clutter and provide better clarity of the timescale.

  • The Time Axis supports almost all types of time-related units, from milliseconds (smallest) to years (largest).

  • The Time Axis automatically updates itself whenever there is a change in the time period from any of the components like standard range selector, custom range selector, and time navigator, or interactions such as zoom/pan from the chart canvas.

A sample chart is shown below:

Loading data for chart…

In the above chart, try and change the time period and see how the time axis adjusts automatically to respond to the change occured. For example - try and zoom into the data from the chart canvas.

Multiple time columns in data

Let's suppose that you have a tabular data which has multiple date/time columns. For example - Order Date and Shipping Date. The time axis of FusionTime can only represent one date/time column on the timescale. In such a scenario, specify which date/time column you want the time axis to represent. To do so, refer to the code below:

new FusionCharts({
    type: 'timeseries',
    dataSource: {
        xAxis {
            "plot": "Order Date"
        }
    },
});

In th above code:

  • Create the xAxis object.
  • Set the column name which you want to represent on the time axis as the value of the plot property. In this case, Order Date is the column name.

If the tabular data has only one date type column, then FT automatically represents it in the xAxis.

If multiple data type columns are available in the tabular data and we do not specify the data type column in xAxis, then FT will assign the first date type column in the tabular data to the xAxis.

Data binning

Binning stages can be defined for the following time units:

  • Year
  • Month
  • Day
  • Hour
  • Minute
  • Second
  • Millisecond

Default binning happens for each time unit, and if you want to modify it, you can specify the valid multipliers for each time unit.

Valid multipliers for each time unit are:

Time Units Valid Multipliers
Year 1, 2, 3, 5, 10
Month 1, 2, 3, 4, 6
Day 1, 2, 3, 5, 6, 10, 15
Hour 1, 2, 3, 4, 6, 8, 12
Minute 1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30
Second 1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30
Millisecond 10, 20, 50, 100, 200, 250, 500

The structure to apply the above multipliers is shown below:

new FusionCharts({
    type: 'timeseries',
    dataSource: {
        xAxis: {
            binning: {
                "year": [Array of multipliers] // Ex - [1,2,3,5,10]
                "month": [Array of multipliers] // Ex - [1,2,3,4,6]
                "day": [Array of multipliers] // Ex - [1,2,3,5,6,10,15]
                "hour": [Array of multipliers] // Ex - [1,2,3,4,6,8,12]
                "minute": [Array of multipliers] // Ex - [1,2,3,4,5,6,10,12,15,20,30]
                "second": [Array of multipliers] // Ex - [1,2,3,4,5,6,10,12,15,20,30]
                "millisecond": [Array of multipliers] // Ex - [10,20,50,100,200,250,500]
            }
        },
    }
});

Refer the example below where we have just modified the binning stages for month, day & hour time unit.

Loading data for chart…