01 | { |
02 | settings: { |
03 | scroller: { |
04 | timeScale: { |
05 | maxTicksCount: 3 |
06 | } |
07 | } |
08 | } |
09 | } |
The scale in Scroller is pretty similar to the scale in the chart, but it shows all time scale at once and doesn't have some minor features.
Just as for the chart scale you can define the maximum number of ticks with labels. By default scroller shows no more than ten labels, but you can change this value as you wish.
Sample XML to set the limit:
Live sample where scroller shows no more than three labels:
You can configure either the format of the and how they look like and where they are placed.
You can place labels on the top, in the center or at the bottom of the scroller and define relative paddings
Sample XML for changing the position:
Live sample with such settings:
Typical <font> node described in Font tutorial, allows you to change the look of the labels. Sample XML follows:
Live sample of such settings:
You can change the background of the labels if you need to make them more readable. This can be done using typical <background> node described in Background and Borders article.
Sample XML with background settings:
Live sample with such settings:
Just as for the general Timescale, scroller timescale has a predefined set of formats for different time intervals, but there is only one level in scroller scale, so there is only one set.
By default the component tries to display intervals in the best way, but sometimes you may need to alter them. The following list of intervals is supported:
For example if you have rather small data set with daily data fro three years - the scroller may jump to half a year mode and user will see the following: Jan, Jul, Jan, Jul, Jan, Jul - which is not good.
To solve this issue you can defined more detailed format. Sample XML of such formatting:
Live sample if such formatting:
As you can see formatting uses tokens to specify date time display, you can find the list of these tokens in Date Time Formatting article.
Also you can use this formatting to localize the scale, for example XML to make scroller display date time in Chinese:
Live sample of such settings:
Learn more about intervals settings in XML Reference.
You can configure the look of the grid lines on the scroller independently from chart axis grid lines. Sample XML of grid line settings:
Live sample with grid line settings:
You can learn more about line settings in the Background and Border tutorial or in XML Reference.