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 invisible to the user. The actual reporting of data, however, is a bulk of an experience a user has with our application.
This book is a practical step-by-step guide to using FusionCharts Suite to create delightful web reports and dashboards. After creating your first chart in 15 minutes, you will learn advanced reporting capabilities such as drill-down and JavaScript integration. Finally, you round up the experience by learning reporting best practices including the right chart type selection and practical usability tips to become the data visualization guru among your peers.
Chapter 1, Introducing FusionCharts, introduces you to FusionCharts Suite and teaches you how to build your first chart in under 15 minutes. You will learn the XML and JSON data formats that FusionCharts Suite supports, and apply it to build different types of charts.
Chapter 2, Customizing your Chart, brings to you the wide spectrum of customization options you have with FusionCharts Suite, both aesthetically and functionally. You will learn how to customize the chart background and font, control how numbers appear on the chart, and add more context to charts using trendlines.
Chapter 3, JavaScript Capabilities, familiarizes you with the JavaScript programmability of FusionCharts Suite. Using them, you will be able to develop rich and interactive features around your charts and also learn ways to integrate FusionCharts with your web applications.
Chapter 4, Enabling Drill-down on Charts, introduces you to the concept of drill-down in charts, which helps you drill down from a macroscopic view to a more detailed one.
Chapter 5, Exporting Charts, introduces the capability of FusionCharts Suite to be exported as images and PDF documents for use in e-mails and presentations.
Chapter 6, Integrating with Server-side Scripts, explains how to power FusionCharts using server-side technologies such as ASP.NET, PHP, and Java, and drive them through databases.
Chapter 7, Creating Maps for your Applications, introduces you to the interactive maps present in FusionMaps, a part of the FusionCharts Suite. After downloading and setting up FusionMaps, you will be able to create a simple US map and then add drill-down to go from the US map to individual states.
Chapter 8, Selecting the Right Visualization for your Data, takes a step-by-step approach to selecting the right visualization for business dashboards. You start by understanding your dashboard's audience, identify the metrics they need to see, move on to the kind of analysis the metric will need, and finally come to the chart best suited for the case in question. You will also take a closer look at at specialized charts such as gauges and Gantt charts.
Chapter 9, Increasing the Usability of your Charts, rounds up the experience by introducing simple tips and techniques that can make your charts more usable. From obvious tips such as having descriptive captions, to less obvious ones such as removing excess detail from data, these tips will go a long way in making your dashboards more usable.
In order to follow and and understand the steps and code mentioned in the book, you will require the following software:
FusionCharts Suite Evaluation version, which can be downloaded from www.fusioncharts.com/download
Any text editor to write your HTML, XML, and JavaScript code
Access to a server, when connecting to server-side scripts
This book is both for beginners and advanced web developers who need to create interactive charts for their web applications. No previous knowledge of FusionCharts Suite is assumed, and the book takes you from downloading it to creating complete reports and dashboards.
In this book, you will find several headings appearing frequently.
To give clear instructions of how to complete a procedure or task, we use:
1. Action 1
2. Action 2
3. Action 3
Instructions often need some extra explanation so that they make sense, so they are followed with:
This heading explains the working of tasks or instructions that you have just completed.
You will also find some other learning aids in the book, including:
These are short multiple choice questions intended to help you test your own understanding.
These set practical challenges and give you ideas for experimenting with what you have learned.
You will also find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.
Code words in text are shown as follows: " When you run Index.html, you will see a page as the following screenshot".
A block of code is set as follows:
<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>
When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:
<html>
<body>
<div id="chartContainer">FusionCharts will load here!</div>
<script type="text/javascript">
<!--FusionCharts.setCurrentRenderer('javascript');
var myChart = new FusionCharts("../FusionCharts/
Column3D.swf", "myChartId", "400", "300", "0", "1" );
myChart.setXMLUrl("Data.xml");
myChart.render("chartContainer");// -->
</script>
</body>
</html>
New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: "Note how the Dashboard has a very clean and non-cluttered look, despite the large data set it represents ".
Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.
To send us general feedback, simply send an e-mail to <[email protected]>, and mention the book title through the subject of your message.
If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.
Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.
You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.
Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you would report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/support, selecting your book, clicking on the errata submission form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded to our website, or added to any list of existing errata, under the Errata section of that title.
Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works, in any form, on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.
Please contact us at <[email protected]>with a link to the suspected pirated material.
We appreciate your help in protecting our authors, and our ability to bring you valuable content.
You can contact us at <[email protected]>if you are having a problem with any aspect of the book, and we will do our best to address it.