FusionCharts uses XML (eXtensible Markup Language) to create and manipulate charts. XML is a simple and structured language that is easy to read and understand. In case you're not aware of XML as yet, here are a few basics things to know about an XML document:
- An XML document is a simple text file consisting of tags and data associated with them.
- You can make up your own tags like <mytag></mytag> to store data
- Every opening tag requires a matching closing tag like <name> requires </name>. e.g., <name>John Doe</name>. If an element has no content, the opening and closing tags may be combined into a single "shortcut" tag such as <name/>.
- XML tags are case-sensitive. So <name> should be closed with </name> and not </Name> or </NAME> or any other variant of the same.
- You can define attributes for a tag to render more details. For example - <name isPetName='true'>John Doe</name>. Here isPetName is an attribute of the <name> element. In FusionCharts v3, we've four types of attributes:
- Boolean - Attributes, which take a 0 or 1 value. Like <chart showNames='1' >
- Number - Attributes which take a numeric value. Like <chart yAxisMaxValue='200' >
- String - Attributes, which take a string value. Like <chart caption='My Chart' >
- Hex Color Code - Attributes that take a hex color code (without #). Like <chart bgColor='FFFFDD' >
- Special characters like ' (quote), " (double quote), % (percentage), etc are to be replaced by the XML converts. Like, the character " (double quote) in a string constant must be denoted as ".
The entire FusionCharts chart is controlled by XML parameters i.e., you use XML to define the cosmetic as well as functional properties for the chart. There are a lot of properties that you can define for each chart type.
However, it is not necessary to define all the attributes for a given chart. For example, if you do not want to change the default setting of the canvas (color, alpha etc.), you don't need to define any attributes for the canvas - the default values will be assumed. Thus, each chart can be generated using minimal attributes without concern for every fine detail. As you become more proficient in chart attributes, you will be able to use them for creating complex charts with a wide range of features and an informative appearance.
FusionCharts has a specific XML structure for each chart. Broadly, we define the XML structure into following types, depending on the chart type:
- Single Series Charts
Single Series Charts are those that depict only one set of data on the chart. Like, our previous example of Monthly sales summary was a single series chart, as we had just one data set (i.e., data for 1 year). In that chart, we were not comparing data between two datasets (e.g., monthly sales comparison between two or more years).
XML for the single series chart is the simplest one to understand, as you've already seen in the previous examples.
- Multi-Series Charts
Multi-series charts are used to compare 2 or more datasets like monthly comparison for 2 or more years. Under multi-series charts, we can define the following subcategories:
- Standard Multi-Series Charts
Standard multi-series charts, like multi-series column, line, area, etc. are used for straightforward comparison of various datasets on the chart.
- Stacked Charts
Stacked charts, like stacked column, area etc. are used to compare cumulative or grouped data. For example - monthly summary of sales on a chart. Say if we wanted to display - which part of revenue came from products and which part came from services, we can use the stacked column chart to depict the data. Each month would represent a data column and the column would be divided into two parts- one representing service and the other product.
- Combination Charts
Combination Charts are a combination of two or more charts. There are two sub-types of combination charts:
- Single Y-Axis Combination Chart
- Dual Y-Axis Combination Chart
- Multi-series XY Plot Charts
XY Plot Charts are charts where both axis are numeric, like bubble and scatter chart.
- Multi-series Stacked Charts
In the charts like multi-series stacked column and multi-series stacked column line combination, you've nested data-sets, which allow you to create multi-series stacked charts.