1. Create an empty XML file within the
FirstChartfolder named asData.xml. This can be done using your text editor (Notepad on Windows, or TextEdit on Mac). To do so, while saving an empty text file, rename the extension to.xml.2. Write the following XML code in the file and save it:
<chart caption='Harry's SuperMart' subcaption='Revenue by Year' xAxisName='Year' yAxisName='Amount' numberPrefix='$'> <set label='2009' value='1487500' /> <set label='2010' value='2100600' /> <set label='2011' value='2445400' /> </chart>
3. Check whether the XML is valid by opening
Data.xmlin Internet Explorer or Firefox. If the browser shows the XML properly, you are good to go. Otherwise, review the error message and fix the error in XML accordingly.
Here, we have encoded the data, as shown in the following table, to an XML format supported by FusionCharts:
|
Year |
Revenue |
|---|---|
|
2009 |
$1,487,500 |
|
2010 |
$2,100,600 |
|
2011 |
$2,445,400 |
Each chart in FusionCharts is powered by data. This data could be static and hand-coded as we will build in this example, or dynamically generated by live scripts that are connected to databases or web services which we will explore later in Chapter 6, Integrating with Server-side Scripts. FusionCharts can accept this data in two formats—XML and JSON. Both are commonly used formats for data exchange on the Web, with XML being easy on the human eyes.
The XML format that we just created is called single-series XML in FusionCharts parlance, as we are plotting just one series of data. Later in this chapter, we will explore multi-series charts that let you compare more than one series of data, for example, revenue split across Food and Non-Food products for each year across last three years.
All FusionCharts XML files start with the<chart> element. The attributes of the<chart> element help you configure the functional and cosmetic properties of the chart. In our example, we have defined the chart caption, subcaption, axis titles, and the currency prefix for numbers on the chart, as in the following line of code:
<chart caption='Harry's SuperMart' subcaption='Revenue by Year' xAxisName='Year' yAxisName='Amount' numberPrefix='$'>
For each chart type, there are hundreds of optional attributes that you can define. If these are not defined, the chart assumes the default values for each of them.
Note
Special characters in XML need to be encoded
XML documents can contain non-ASCII characters or special characters. However, these need to be encoded before they are provided in the XML document. In our example, note how we have encoded the apostrophe in Harry's to Harry's. Had we not done that, the XML document would have been an invalid one and raised errors when opened in a browser.
Each row of data to be plotted on the chart is represented by the<set> element. The label attribute defines the text label for each data point, and the value attribute defines its numerical value to be plotted. There are additional attributes that can be defined for the<set> element, for example, user-defined colors, which we will explore in later chapters. An important thing to note is how the $ prefix or comma separators have been stripped off the revenue numbers, before encoding them as a value for the<set> element, that is, $1,487,500 has been converted to 1487500, as shown in the following line of code:
<set ... value='1487500' />
This is necessary as FusionCharts can interpret only standard numeric values.
Note
While the standard attributes for the<chart> and<set> elements are common across chart types, many chart types have special features that are controlled by attributes that are specific for the chart. You can explore a list of all such attributes for each chart in the documentation of FusionCharts, under the section Chart XML API.
With both the basic setup and data in place, we are just one step away from seeing our chart live—writing the HTML and JavaScript to embed this chart, which we will do next.