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
FusionCharts Suite is a collection of four products, each of which help generate different types of charts, gauges, or maps in web applications. These data-visualization components are ideal for use within reports, dashboards, analytics, surveys, and monitors in web and enterprise applications. The visualizations are rendered using both Adobe Flash and JavaScript (HTML5), thereby making the experience seamless across PCs, Macs and a wide spectrum of devices including iPads and iPhones.
The four products in the suite are:
FusionCharts XT: This helps create the 45 most used chart types such as pie, column, bar, area, line, stacked, combination, and advanced ones such as Pareto and Marimekko.
FusionWidgets XT: This helps create Key Performance Indicators (KPI) and make real-time data in dashboards, monitors, and reports more insightful. It includes a wide variety of charts and gauges such as dial charts, linear gauges, Gantt charts, funnel charts, sparklines, data-streaming column, line, and area charts.
PowerCharts XT: This helps create charts for domain-specific usage such as those in network diagrams, performance analysis, profit-loss analysis, financial planning, stock price plotting, and hierarchical structures.
FusionMaps XT: This consists of over 550 geographical maps, including all countries, US states, and regions in Europe for plotting business data.
All the products are built on a common framework and offer similar ways to use and configure them. To start with, we will create charts using FusionCharts XT and later explore charts of other products in Chapter 8, Selecting the Right Visualization for your Data and Chapter 7, Creating Maps for your Applications. Without further ado, let us get started and build our first chart. For that, you will first need to download FusionCharts Suite.