Replacing Chart Configuration on the Fly

• Overview
• Set New Configuration as File
  • setXMLFile()
  • setJSONFile()
• Set New Configuration from JavaScript as String
  • setConfig()
  • setSettings()
  • setEventMarkers()

Overview

This article describes the methods for replacing current configuration of the component embedded in an HTML page to a new one using an external XML/JSON file or a string containing the new configuration in the XML/JSON format.

Set New Configuration as File

If you want to modify the component's configuration and are planning to use an external file in the XML or JSON format for setting the new configuration, you can take advantage of the setXMLFile() and setJSONFile() methods described in this section.

setXMLFile()

setXMLFile() - sets a new configuration for the chart using an external file in the XML format. It creates the chart all over and reloads all the external data.

When calling this method, you need to pass the url of the file containing the component's configuration for the argument. The listing below demonstrates an example of such call:

Here is a custom sample where the configuration file is switched by the setXMLFile() method:

setJSONFile()

setJSONFile() - sets a new configuration for the component using an external file in the JSON format. Calling this method creates the chart all over and reloads the external data.

When calling this method, you need to pass the url of the file containing the component's configuration for the argument. The listing below demonstrates an example of such call:

Here is a custom sample where the configuration file is switched by the setJSONFile method:

Set New Configuration from JavaScript as String

There is another mechanism for changing current chart configuration dynamically; that is setting the configuration as a string in the XML or JSON format using a certain JavaScript method of the AnyChartStock class.

setConfig()

The setConfig() method replaces the configuration entirely, including the chart's data and configuration section. This method is recommended for the cases when you need to replace the chart's data and configuration entirely. Calling the method completely reloads all the data from external sources and partially creates and plots the chart all over.

Here is a custom sample demonstrating setting a new configuration as a string containing XML:

Here is a custom sample demonstrating setting a new configuration as a string containing JS Object:

setSettings()

The setSettings() method replaces only the content of the <settings> node. This method is very helpful when changing the way data appears on a chart. Calling this method initiates the soft update - it doesn't reload the data, and the chart is plotted over unnoticeably for user.

Here is a custom sample demonstrating setting configuration in the XML format:

Here is a custom sample demonstrating setting configuration as a JavaScript Object:

setEventMarkers()

The setEventMarkers() method replaces only the content of the <event_markers> node. This method is useful, when you need to do something with event markers only - add/remover marker(s) or change appearance settings.

This method doesn't affect any other chart elements and works very fast.

Custom sample below shows the changing of event markers in XML format:

Custom sample below shows the changing of event markers in JSON format: