How to use this sample?
Use the controls to the right of the chart to select series to compare and comparison mode.
How it works
This sample shows how to make chart show so-called comparison chart, rather popular and useful way to show financial data. All controls are custom HTML controls and the chart is controlled using Object Model modifications. Let's see in details what happens here and how it is done:
When you load the chart you see four series on the chart, one of them is base and is always shown, and three others are compared to it and can be shown or hidden. Also, there is a combobox control, which allows you to change axis mode and show changes in percents or in absolute values.
Show/Hide Series to which main is Compared
Showing/hiding series is done by altering their enabled attribute (as shown in Show/Hide Series sample): getSeriesById method is used to obtain link to series and enabled attribute is set as needed.
Note: if you hide all series to compare and leave only base series displayed - chart is switched to "Changes" mode.
Change Comparison Scale
Changing scale mode is done via object model too, but includes several modifications: you need not only to change scale mode, but also have to modify legend and labels format - to make visualization proper. Illustration below marks these visual elements and how these changes are done you can see in updateComparisionMode function in source code:
Switching Main Series
Combobox is used to switch base series - when you do so switchBaseSeries function is called and several actions are performed: list of checkboxes is recreated, series list in the component is rearranged, so the base series is displayed in the legend first and Scroller Data Provider is switched to and Scroller Thumbnail series is recolored.
Scroller Data Provider
Scroller can show thumbnail series in background to make navigation easier and many more other features, which you can learn from Scroller section. In this sample scroller data provider is switched when base series is changed - to show base series thumbnail in scroller, and this thumbnail is recolored. Scroller data provider is switched in switchBaseSeries function and coloring is changed in switchScrollerColorScheme function. Illustration below shows how scroller changes when different providers and colors are set:
Note: in this sample we have made switching data provider easy with a little trick - config.xml contains four predefined and ready to use scroller data providers and we just change the name in dataProvider attribute. Read more about scroller data provider in Scroller Data Provider article and note, that this approach (creating predefined data providers) may not be applicable in real application.
||Defines whether the access to full chart configuration object model is required.
||Gets chart configuration as an Object.
||Commits changes made to settings element of the objectModel.
||Returns link to a chart object in the objectModel.
||Gets series object from the object model by its id.
||Sets chart XML configuration file path.
||Adds the chart to HTML DOM as a child of the specified container.
||This event is dispatched when the AnyChart Stock is drawn.
This section lists all configuration, data and auxiliary files required for this sample.
- AnyChartStock.swf - AnyChart Stock component.
- Preloader.swf - AnyChart Stock helper component that loads the main component (AnyChartStock.swf) and displays loading progress.