Updating Chart using Object Model

• Overview
• Obtaining Access to Configuration Object Model
• Changing Settings and Committing Changes
• Helper Methods for Working with Object Model
• Event Markers Specifics
• Object Model Update Samples
• Turning On/Off Additional Charts Dynamically
• Switching Y-Axis Modes
• Turning On/Off Series Dynamically
• Turning On/Off Technical Indicators Dynamically
• Changing Technical Indicator Settings
• Comparing Data Series

Overview

The AnyChart Stock component offers a unique and convenient way to update configuration of chart embedded in a page dynamically. Once the component is embedded in the page and configured one way or the other, you can obtain its current configuration as a JavaScript Object, then edit the required settings and pass the command to the component to commit the changes.

Unlike with the setConfig() and setSettings() methods, direct interaction with object model allows avoiding the forming of the complete configuration, as object model is already stored in the Flash Object and is available for editing.

Obtaining Access to Configuration Object Model

To obtain access to configuration object model, when embedding the chart you need to explicitly "tell" the component that we are going to need access to the object model.

To do so, set the needConfig property of the JS instance of the AnyChartStock class to true before calling the write() method. Here is a listing of the code that demonstrates turning on this flag:

var chart = new AnyChartStock("./swf/AnyChartStock.swf"); chart.needConfig = true; chart.onChartDraw = function() { alert(chart.objectModel); }; chart.write("chartContainer");

Once the chart has been initialized, the component converts the passed configuration XML to the JSON format and saves it in the objectModel property. If the initial chart configuration used JSON, it is simply passed to that property.

The default value of the objectModel property is null; the object model gets there only after the entire cycle of the component initialization is over. That point can be traced by the occurrence of the onChartDraw event; i.e. when this event occurs, the object model becomes available for further operations.

Here is a custom sample demonstrating manipulations over the objectModel property. When the chart is initialized, it throws the content of the objectModel property to the text block under the chart:

Changing Settings and Committing Changes

Once you have obtained the component configuration object model, you can manipulate it any way you want: add new elements, delete or modify them.

For a chart modification example you can take changing some settings in a series. The listing below demonstrates an example of changing series color and type:

chart.objectModel.settings.charts[0].seriesList[0].color="Red"; chart.objectModel.settings.charts[0].seriesList[0].type="SplineArea"; chart.applySettingsChanges();

Once the modifications in the configuration object model are made, they need to be committed. There are three methods for committing changes:

• applyConfigChanges() - commits changes made in the objectModel.data.*, objectModel.settings.* and objectModel.eventMarkers.* objects; completely reloads data and resets chart. This method is recommended only for the cases when some changes are made in the objectMode.data.* object; e.g., new data set or data provider is added.
• applySettingsChanges() - commits changes made in the objectModel.settings object. Refreshes chart softly and quickly, without reloading anything.
• applyEventMarkersChanges() - commits changes made in the objectModel.eventMarkers object. Refreshes chart softly and quickly, without reloading anything.

Sample 1: Data Update. Here is a custom sample that demonstrates modifying data and settings in both objects. In the sample, clicking on the "Add" button adds new data set, data provider and series using that data to the object model. To commit the changes, the sample uses the applyConfigChanges() method:

Sample 2: Changing Series Settings. Another custom sample demonstrates committing changes with the applySettingsChanges() method. This sample demonstrates the modification of the series type, color and name:

Sample 3: Event Markers Update. Custom sample shows changing event markers and using of applyEventMarkersChanges():

Helper Methods for Working with Object Model

For your convenience, JavaScript API offers a number of methods for obtaining object model for some elements of chart quickly, by their identifiers, for further modification.

For example, if you need to change the color for a certain series, you can obtain the object of the series with the getSeriesById() method, then modify just one property, color, and then commit the change with the applySettingsChanges() method.

Here are the methods available in the AnyChart Stock class:

• getChartById() - returns chart object by given identifier.
• getSeriesById() - returns series object by given identifier.
• getTechIndicatorById() - returns technical indicator object by given identifier.
• getEventMarkerById() - returns event marker by given identifier.
• getEventMarkersGroupById() - returns event marker group object by given identifier.

To obtain access to the object of a specific element, you must set its identifier in the primary configuration. Here is a listing that demonstrates setting identifiers for all the elements that we need to obtain access to:

Here is a custom sample demonstrating the functioning of these methods. Clicking on a button throws the object model of the corresponding element to the text block under the chart:

Event Markers Specifics

When you work with event markers in Object Model you should note one important thing: there are two ways to set timestamp for event marker, as described in Event Markers: Difference between date and locale_based_date article, but no matter how you set it - in object model you should always use date property and this property is an instance of Java Script Date class.

For example, Java Script code to read event marker date can be:

var chart = new AnyChartStock("./swf/AnyChartStock.swf"); chart.needConfig = true; chart.onChartDraw = function() { var eventMarker = chart.getEventMarkerById("idGroupA","idEM1"); // event marker date property in an instance of JavaScript Date class. alert(eventMarker.date.toUTCString()); }; chart.write("chartContainer");

Sample code to set new date:

function setEventMarkerDate() { var eventMarker = chart.getEventMarkerById("idGroupA","idEM1"); eventMarker.date = new Date(Date.UTC(2010,1,12)); chart.applyEventMarkerChanges(); }

In this sample you can see how the date is read:

And in this sample you can see how event markers date is updated:

Object Model Update Samples

This section provides the most common chart modification samples.

Turning On/Off Additional Charts Dynamically

The simplest way to turn on additional charts is to toggle the enabled attribute in the <chart> node. Setting this attribute to false tells the component to ignore this chart when calling the new settings commitment methods, and the chart doesn't appear on the canvas. By default, the enabled attribute for all charts is set to true.

Here is a custom sample that demonstrates the use of that technique. The sample uses four charts simultaneously; toggling a checkbox to the right of the component hides or shows the corresponding chart:

Switching Y-Axis Modes

Another sample that can be considered common is switching axis mode for displaying absolute values, value differences and percentage difference. Switching axis mode affects many elements, which are to be configured for operating in the new mode.

When switching mode, it is expedient to change the format of presenting the series in the legend, tooltips and also replace the format of the Y-Axis labels.

The custom sample below demonstrates the option for switching Y-Axis mode on the fly; it modifies all the above mentioned elements for presenting the data with allowance for the selected mode:

Turning On/Off Series Dynamically

To hide or show data series dynamically, use the enabled attribute in the <series> node. This attribute can accept the values true - the series is visible - and false - the series is hidden.

The custom sample below demonstrates the operations with this attribute. The sample page has four checkboxes to the right of the chart; each of them enables/disables one or the other data series:

Turning On/Off Technical Indicators Dynamically

Technical indicators fall into two groups: overlay, i.e. indicators drawn on top of data series they use as source of data; external - that use separate chart for the visualization.

To enable or disable overlay indicators, such as SMA, EMA, BBands and Parabolic SAR, use the enabled attribute in the <technical_indicator> node. This attribute works the same way as it does for the <series> node.

To enable or disable external indicators, such as Volume, Stochastic Oscillator, MACD, etc., you need to enable/disable the chart with that indicator, not the indicator itself.

Here is a custom sample that demonstrates the option for enabling/disabling both overlay and external indicators dynamically:

Changing Technical Indicator Settings

To change technical indicator settings on the fly, modify the required settings for the selected indicator and then call the applySettingsChanges() method.

Let's take the Simple Moving Average indicator for an example. This indicator has the only setting - period. Here is a listing that demonstrates how that setting can be modified:

var indicator = chart.getTechnicalIndicatorById("idMainChart", "idSma"); indicator.smaIndicator.period = 25; chart.applySettingsChanges();

Here is a custom sample that demonstrates changing settings for technical indicators using the same principle:

Comparing Data Series

Comparing data series could be a very common case too. This scenario uses one primary series - it appears on both the chart and the scroller - and one or several data series, which the primary one is compared with.

In this scenario, the primary series doesn't differ technically from the other ones; that is only a matter of meaning. For comparing value changes or percentage changes in data series, you need to simply switch Y-Axis to the required mode, as it was demonstrated in the Switching Y-Axis Modes sample.

Here is a custom sample demonstrating the classic series comparison routine. On the drop-down menu, select the tick of the company that is going to be the primary series - it will appear first on the legend list, and the scroller will display the data for the company. Now you can select which companies you would like to compare the selected company's stock quotes: