How to: |
The xaxis:labelLayout:scroll property enables or disables x-axis scrolling. Even if scrolling is enabled, it will only be implemented when needed. You have a choice between two forms of scroll bar:
xaxis: { scroll: { style: 'sbarstyle', groups: { minSize: msize, maxCount: mcount }, miniChartProperties: { height: height dataSelection: { selectionRect: {fill: 'rgba(r, g, b, a)' } } } } }
where:
Specifies the type of scroll bar. Valid values are:
Defines a minimum number of pixels for each group. The default value is 'auto', which leaves the decision to the chart engine.
Note: Use either maxCount or minSize. If both minSize and maxCount are undefined, all groups are fit into the frame and scrollbars are disabled.
Specifies the maximum number of groups to show at once, unless fewer are available. The default value is undefined.
Note: Use either maxCount or minSize. If both minSize and maxCount are undefined, all groups are fit into the frame and scrollbars are disabled.
Is the height of the minichart in pixels, or a percent string that represents a percentage of the height of the main chart. The selection rectangle on the scrollable minichart is always the same height as the minichart itself. By default, the minichart height is 20% of the height of the main chart.
Is a color definition and transparency for the selection rectangle. If you use a color definition without a transparency value, the selection rectangle will be fully opaque and block the view of the minichart group on which it is positioned.
The following request generates a minichart scrollbar on the x-axis. The selection rectangle is orchid and 45% opaque:
GRAPH FILE WF_RETAIL_LITE SUM COGS_US GROSS_PROFIT_US MSRP_US REVENUE_US BY PRODUCT_CATEGORY ON GRAPH PCHOLD FORMAT JSCHART ON GRAPH SET LOOKGRAPH BAR ON GRAPH SET STYLE * INCLUDE=ENID_Default.sty,$ *GRAPH_JS xaxis: { scroll: { style: 'miniChart', groups: { maxCount: 3 }, miniChartProperties: { height:70, dataSelection:{ selectionRect: { fill: 'rgba(218, 112, 214, 0.45)' } } } } } *END TYPE=DATA, COLUMN=COGS_US, BUCKET=y-axis, $ TYPE=DATA, COLUMN=GROSS_PROFIT_US, BUCKET=y-axis, $ TYPE=DATA, COLUMN=MSRP_US, BUCKET=y-axis, $ TYPE=DATA, COLUMN=REVENUE_US, BUCKET=y-axis, $ TYPE=DATA, COLUMN=PRODUCT_CATEGORY, BUCKET=x-axis, $ ENDSTYLE END
The output is shown on the following image, with the selection rectangle (which spans a maximum of three groups) scrolled to the second block of groups:
WebFOCUS | |
Feedback |