What just happened?

Here, we have encoded the data, as shown in the following table, to an XML format supported by FusionCharts:

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&apos;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.

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.

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.