Chart Templates Tutorial
- Overview
- Templates Explained
- How to create template
- How to apply Template
- Templates Use in Dashboard Mode
- Templates to modify Series Node
Overview
To simplify the creation of chart AnyChart provides "Chart Templates" technique. Chart template is a named preset for any of the chart settings (except certain points settings). Templates can be stored within char XML and in an external file.
In this tutorial we will explain what templates can be used for and how they can be used.
Templates Explained
The main idea of templates is to segregate chart settings and data section for easy changing and/or reuse in another charts that should look the same way.
For example you can create a template that defines that chart should be of column type, has a certain title, certain axes titles and scales. This type of chart will be widely used on your site, so you just store it in some xml file and when you need such chart you just specify what template should be used - you don't need to configure chart again an copy-paste settings from one place to another.
Another example of templates use - you can create several templates that configure different chart look (colors, border, etc.), store them in a single place and then you can choose how chart should look like (depending on users choice, for example).
How to create template
The best way to create a template is first to create a desired chart, then choose what parts of its settings should be included into template and then - move them there.
For example, you've took a sample Bar Chart from Bar Chart Tutorial, its XML look like that:
Suppose you will create such charts many times, and all of them will have the same axes titles, will have no chart title and they should be of bar type, so you want to move to the template these settings:
So, the template should look like that (we will name it "Bar Chart With No Title #1"):
Now, when template is ready we will learn where we can store them and how to apply them.
Internal Templates
You can store you templates within chart XML, in <templates> subnode of <anychart> node:
Sample chart using internal template, click to view live sample and XML settings:
External Templates
Next, you can create a file with templates and attach it to the certain chart XML's.
In templates files root node will be <templates>:
Sample chart using external template, click to view live sample and XML settings:
How to apply Template
If you want to apply template to the chart all you have to do is to set its name in template attribute of <chart> node:
Internal Templates: if template is specified within an XML file in <templates> node - you just specify a name:
External Templates: if template is specified in an external XML file - you should set its name (with path, if needed)in path attribute of <templates> node:
Templates Use in Dashboard Mode
Important note about dashboard mode: all templates for all the charts in dashboard mode will be taken from the path specified in <templates path=""> in a file where dashboard is defined, all paths from chart source files will be ignored.
You can find a sample of templates usage in dashboards in Dashboard Creation Tutorial.
Templates to modify Series Node
You can change certina series setting using templates if you set the same name of the series both in chart and template.
In the sample below chart contain two series: Test1 and Test2, by default they are colored in different colors from the palette and attached to main y axis:
Now we create template that changes the type and attaches Test2 series to extra y axis:
As the result - series are modified: