Advanced updateView and updateChart Actions
Overview
AnyChart offers you a wide variety of option that allow to make charts and dashboard really interactive, one of this features - actions.
There is an option of updateChart and updateView actions, which is named token replacing. Using it requires full understanding of AnyChart XML templates and dashboards, but as a result of this understanding you can create interactive dashboards that receive all data in XML and all the rest (updating and interaction) is configured and performed with AnyChart XML settings.
In this article we will explain what is token replacing and demonstrate how it can be used.
Description
You can define one or several actions be performed when user clicks a point on the chart or custom label control.
We are interested in two types of actions:
Type | Description |
---|---|
updateChart | Used to update the current chart data. |
updateView | Used to update a certain view in dashboard mode. |
Typical usage of this actions is updating current chart or chart in another dashboard:
But both updateChart and updateView actions can have several <replace> nodes in them, typical settings:
What <replace> node does?
When it is specified updateChart or updateView action will search for token in source and replace this token by the value ("sample title" or value supplied by {%param} keyword in the sample above).
What we can do using tokens?
We can prepare XML settings for chart where some parts of XML (attribute values or even parts of XML) are not specified in full - there are only tokens instead of them.
What results exactly can be achieved using tokens?
- We can once output an XML that will allow to switch chart type on client side with no JavaScript involved.
- We can configure several maps without creation of the number of XML settings files for each of them.
- We can create drill-down charts and maps to create amazing dashboards executed on client side only.
Below several samples of tokens usage will be shown.
Sample Chart Type Switching
Type Switching sample will use tokens to change plot_type attribute of <chart> node and type attribute of <series> node. Note that when you see "Click to start..." message it is actually a "no data" message configured within XML.
Chart XML with tokens look like that:
Only data and type are configured here, all other chart parameters are configured in ChartTemplate template in <templates> node.
Sample XML for actions in labels looks like that:
Launch the live sample and try switching types yourself:
Sample Map Source Switching
In this sample we will use an updateChart action - replace token option, the action defined like that:
Which means that AnyChart will take "State" chart XML and replace {$region_amap} and {$title} tokens by {%REGION_ID} and {%REGION_NAME} keywords values, which allows us to create drill-down map for all USA with a rather easy and compact settings (you can view them in live sample XML preview), also note that we are using updateChart action to create "Back" button.
State map XML has tokens built-in:
Click on any state to see its counties:
Changing Data
The sample below shows an ability to show certain geo-related data on chart elements clicks, we will display a column chart that will show a sales amount by managers, and when user will click on the certain column - map will show in which regions this manager works and what are the sales amounts in certain regions.
Action XML Settings for updateView actions:
USA map settings XML has tokens built in like that:
Each point in Column chart has data in custom attribute:
As a result we get a dashboard that allows us to drilldown to see certain manager sales by region with a single XML file configuration: