Standard Range Selector

A standard range selector is an extension used to select standard time periods. There are three sections of standard time periods as, ALL, business-friendly dates like year-to-date (YTD), quarter-to-date (QTD) and month-to-date (MTD), and contextual time periods. The options of the contextual time periods will vary based on the atomicity of the data and the current data displayed. Refer to the image below:

Standard Range Selector

The three sections of Standard Range Selector are:

  • All - Selects all of the available data values.

  • Contextual time periods - 10Y | 5Y | 3Y | 2Y | 1Y | 6M | 3M | 1M | 15D | etc. - You can select and display data for the last ten years, five years, three years, two years, one year, six months, three months, one month, or 15 days of the currently visible time interval, respectively. The options of the contextual time periods will vary based on the atomicity of the data and the current data displayed.

  • Business friendly dates - YTD | QTD | MTD | WTD - YTD, QTD, MTD, and WTD display data from the beginning of the last year, quarter, month, or week (respectively) of the total time interval in the data to the present date. These options will apppear only if the data is of the current year, quarter, month and week.

A chart with standard range selector is shown below:

Online Sales of a SuperStore in India & the US2011Jul2012Jul2013Jul2014Jul2015Sales5001k1.5k2k2011201220132014Jan 04, 2011 - Dec 31, 2014United StatesIndia3YAll

Show/Hide Standard Range Selector#

By default, the standard range selector is visible in every chart. However, to turn it off, set the value of the enabled attribute within the standardRangeSelector extension of the extensions object to 0.

Refer to the code below:

{
    type: 'timeseries',
    dataSource: {
        data: fusionTable,
        // Show/Hide Standard Range Selector
        "extensions": {
            "standardRangeSelector": {
                "enabled": "0"
            }
        }
    }
}
Were you able to implement this?

Add styling#

Styling can be applied to the buttons of the Standard Range Selector.

You can add style to the Standard Range Selector using style object under standardRangeSelector object.

The standardRangeSelector object should be created under extensions object.

Syntax:

new FusionCharts({
    type: "timeseries",
    dataSource: {
        "extensions": {
            "standardRangeSelector": {
                "style": {
                    "button-text": {}, //Object | String
                    "button-background": {}, //Object | String
                    "button-text:hover": {}, //Object | String
                    "button-background:hover": {}, //Object | String
                    "button-text:active": {}, //Object | String
                    "button-background:active": {}, //Object | String
                    "separator": {} //Object | String
                }
            }
        }
    }
})
Were you able to implement this?