In our examples, we will create charts for a fictional supermarket, Harry's SuperMart, so that Harry, the owner of the supermarket, can make more sense out of his data. Harry's SuperMart, with 11 stores located in four states in the US, offering over 2,000 types of products and a customer base of around 25,000, records an intensive amount of data, which when presented effectively gives a lot of actionable insights. We will learn how to build meaningful charts that can facilitate this. For our first chart, let us build a simple Revenue by Year chart.
Once completed, the chart should look similar to the following screenshot:
 |
Fundamentally, for each chart you build, you should ask yourself the following questions to ensure that the chart serves a meaningful purpose, as opposed to just being a fancy object on the page:
Who will view this chart and why will this data interest him? This person is the end user.
What type of chart is best suited to represent this data? Are there any alternate charts that we can use?
Is this chart part of a bigger report/dashboard, or standalone? This helps us decide how to split information across multiple charts.
For our first chart that we build, Harry is the end user. This chart lets him compare the revenues of this year against the last two years. We would plot this data on a 3D Column chart, as Harry uses this to compare the revenues instead of seeing the overall trend. Had Harry wanted to see the trend of revenues over multiple years, we would have used an area or line chart. Also, to keep things simple, we will build this as a standalone chart.
Thereafter, technically, there are three steps to build a chart using FusionCharts:
1. Set up FusionCharts for the entire application, typically done only once per application.
2. Encode the data for the chart, either in XML or JSON format.
3. Write the HTML and JavaScript code to include the chart in a web page.