
Chapter 1. Introducing FusionCharts
As web developers, we build applications that feed on data. We parse it, process it and report it. Our reports take the form of tables, grids, and diagrams such as charts, gauges, and maps. Parsing and processing are backend tasks that are unseen by the user. The actual reporting of data, however, is the bulk of the experience a user has with our application.
To make our reports interesting and insightful, it is important to provide a highly engaging and functional face to the data in context. While tables, grids, and basic charting are natively supported by most web scripting languages, creating advanced or interactive charts require the use of third-party components. FusionCharts Suite is one such suite of components that help you deliver a delightful experience by aiding the creation of animated and interactive charts, gauges, and maps.
Before we jump in and look at what FusionCharts can do for you, let us see where charts, gauges, and maps can be helpful. Google Analytics, a tool that most web developers swear by, is a beautiful example of effective data presentation. In case you do not know, it is a tool that records a ton of information such as visitor demographics, referrers, advertising, browser information, and so on. With so much data recorded, it is of utmost importance to present it in a compact, yet insightful way, as shown in the following screenshot:

Note how the Dashboard has a very clean and non-cluttered look, despite the large data set it represents. Extra information, which is not required in the main layout, is displayed as tool tips and annotations. Interactive features such as a clickable world map lets you explore the data the way you want to. The selection of chart types is also immaculate, with the line chart showing the trend of the most commonly used metric—the number of visitors to the site. Other relevant metrics such as Pageviews and Pages/Visit are communicated in large text along with sparklines providing a historical context. A world map is used to display where the traffic is coming from.
FusionCharts Suite helps you build similar dashboards with a lot more chart types and interactivity. Without further ado, let us proceed and set the goals for this chapter.
In this chapter, you will:
- Learn how to set up FusionCharts
- Build your first chart and configure basic parameters
- Understand the eXtensible Markup Language (XML) and JavaScript Object Notation (JSON) data format supported by FusionCharts and different ways to provide it to the chart
- Learn how to build charts with multiple series and axes
- Create advanced charts such as Combination charts