FusionCharts Beginner's Guide

Table of Contents

FusionCharts

Credits

About the Authors

About the Reviewer

www.PacktPub.com

Support files, eBooks, discount offers and more

Why Subscribe?

Free Access for Packt account holders

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Time for action — heading

What just happened?

Pop quiz — heading

Have a go hero — heading

Reader feedback

Customer support

Downloading the example code

Errata

Piracy

Questions

1. Introducing FusionCharts

What is FusionCharts Suite?

Getting FusionCharts

Time for action — downloading and extracting FusionCharts

What just happened?

Creating your first chart

Steps to create a chart using FusionCharts

Time for action — set up FusionCharts for our first chart

What just happened?

Time for action — creating XML data for our first chart

What just happened?

Time for action — Writing the HTML and JavaScript code to embed the chart

What just happened?

What to look for if your chart is not rendered?

Converting the chart to a pure JavaScript chart

Time for action — creating JavaScript only charts

What just happened?

Have a go hero — build a dashboard for Harry

Using the Data String method to provide data

Time for action — embedding XML in the web page and using the Data String method

What just happened?

Using JSON data with FusionCharts

Time for action — converting FusionCharts XML format to JSON

What just happened?

Time for action — powering a chart using JSON data stored in a file

What just happened?

Time for action — powering a chart using JSON data embedded in the page

What just happened?

Creating charts with multiple series

Time for action — creating a multi-series chart

What just happened?

Can the number of and elements mismatch?

Representing missing or non-existent data on the chart

Combination charts

Time for action — the chart showing the actual versus the projected revenue

What just happened?

Time for action — a chart showing revenue versus units sold

What just happened?

Summary

2. Customizing your Chart

Know thy chart

Customizing the chart background

Time for action — customizing the chart background

What just happened?

Have a go hero — set a gradient fill for the canvas on a 2D Column chart

Image as chart background

Time for action — setting currency notes as the chart background

What just happened?

Customizing the chart border

Customizing the data plot

Customizing the color of the data plot

Customizing the border of the data plot

Have a go hero — highlight an anchor in a line chart

Customizing the font properties

Configuring the y-axis and divisional lines

Time for action — customizing the chart limits and the number of divisional lines

What just happened?

Formatting the numbers on the chart

Adding a prefix or suffix to the numbers

Configuring decimal places on the chart

Setting up your own number scale

Time for action — setting up a number scale to understand billions as well

What just happened?

Have a go hero — create a number scale to convert seconds to minutes, hours, and days

Customizing data labels and values on the chart

Different modes to display data labels.

Different modes to display data values

Configuring the tooltips

Configuring the legend in multi-series charts

Adding a trendline to the chart

Time for action — adding a trendline to show target revenue

What just happened?

Have a go hero — add a trendzone to the chart

Personalizing the chart

Time for action — adding a logo and link to the chart

What just happened?

Using multilingual characters on the chart

Adding the BOM stamp in the Data URL method

Adding the BOM stamp in the Data String method

Changing chart messages

Time for action — changing the Invalid data message

What just happened?

Summary

3. JavaScript Capabilities

Access your charts using JavaScript

Time for action — setting up the audit report page

What just happened?

Pop quiz — know your chart object

Listening to chart events

The simple event model

Time for action — show chart controls when a chart is fully rendered

What just happened?

The advanced event model

Time for action — replace simple events with the advanced event model

What just happened?

Event arguments in the advanced model

Pop quiz — know when to use the advanced event model

Dynamically updating chart data

Time for action — change chart data on the click of a button

What just happened?

Time for action — update chart data from a drop-down list

What just happened?

Retrieve data from chart

Time for action — retrieve data from the chart and sort them

What just happened?

Pop quiz — do you recall the JSON data API?

Retrieving chart data as comma-separated values

Time for action — retrieve CSV data from the chart and update a textarea

What just happened?

Manipulate chart cosmetics using JavaScript

Time for action — hide data values of the columns

What just happened?

Debugging your charts

Using the JavaScript debug mode

Time for action — set up the JavaScript debug mode to output in a browser console

What just happened?

Have a go hero

Summary

4. Enabling Drill-down on Charts

How does drill-down work in FusionCharts?

Building our first drill-down chart

Time for action:building the parent chart

What just happened?

Time for action — building the descendant chart

What just happened?

Opening descendant charts in a new window

Opening descendant charts in a pop-up window

Opening descendant charts in a frame

Invoking JavaScript functions on a link click event

LinkedCharts for simplified drill-downs

Time for action — using LinkedCharts to eliminate multiple web pages for descendant charts

What just happened?

Time for action — creating LinkedCharts using a single XML source

What just happened?

Summary

5. Exporting Charts

A word on how the export process works

Export charts at client-side

Time for action — enable exporting of charts using the context menu

What just happened?

Pop quiz — know the possibilities

Customizing the export component

Time for action — customize the export component attributes

What just happened?

Export charts using JavaScript API

Time for action — create a button to export the chart

What just happened?

Configure charts' export parameters using JavaScript

Time for action — create separate buttons to export the chart as image and PDF

What just happened?

Pop quiz — JavaScript Export API

Export charts directly to the server

Time for action — configure the server-side export handler

What just happened?

Time for action — create a button to perform server-side export of the chart

What just happened?

Have a go hero — put the export features to use

Summary

6. Integrating with Server-side Scripts

FusionCharts and server-side scripts

Setting FusionCharts for your dynamic web application

Embedding FusionCharts in a web page without using JavaScript

Dynamic data and FusionCharts

Scope of our dynamic charts and the basic setup

Time for action — getting ready to build dynamic charts

Creating FusionCharts in PHP

Time for action — creating a chart using data from array

What just happened?

Time for action — creating a chart in PHP using data from MySQL

What just happened

Time for action — adding drill-down to a database-driven chart

What just happened?

Have a go hero — build a dashboard for Harry

Creating FusionCharts in ASP.NET using C#

Time for action — using FusionCharts.dll in a new Visual Studio project

What just happened

Time for action — create a chart in C# using data from an array

What just happened

Time for action — creating a chart in ASP.NET using data from an SQL Server

What just happened

Time for action — creating a drill-down chart in ASP.NET using data from an SQL Server

What just happened?

Have a go hero — build a dashboard for Harry

Creating charts in Java using Eclipse

Time for action — creating a new project in Eclipse and adding the tag library

What just happened?

Time for action — creating a chart in Java using data from an array

What just happened?

Time for action — creating a chart in Java using data from MySQL

What just happened?

Time for action — creating a drill-down chart in Java using data from MySQL

What just happened?

Have a go hero — build a dashboard for Harry

Summary

7. Creating Maps for your Applications

Getting FusionMaps

Time for action — downloading and extracting FusionMaps

What just happened?

Creating the first map

Time for action — set up FusionMaps for our first map

What just happened?

Time for action — creating the XML for our first map

What just happened?

Time for action — writing the HTML and the JavaScript code to embed the map in a page

What just happened?

Have a go hero — remove the 3D effect of the map

Defining new IDs for the entities

Creating drill-down maps

Time for action — drilling down from the US map to the individual states

What just happened?

Have a go hero — drill-down from the map to a chart

Summary

8. Selecting the Right Visualization for your Data

Understanding the audience

Pop quiz — know your dashboard audience

Common types of data analysis

Comparison of data

Transition of data

Composition of data

Combination of multiple forms of analysis

Combination of comparison and transition charts

Case 1: Combination chart with a single numeric axis

Case 2: Combination chart with dual numeric axes

Case 3: Combination chart with dual numeric axes having the same units

Combination of comparison and composition charts

Pop quiz — empowering your CEO

Specialized charts

Gauges

Bullet graphs

Funnel chart

Editable charts

Gantt chart

Heat map chart

Pop quiz — know thy heat map

XY chart

Summary

9. Increasing the Usability of your Charts

Use descriptive captions

Arrange data whenever possible

Delegate detailed info to tooltips

Mention the chart has drill-down

Add context to data using trendlines

Remove excess precision from data

Show predicted values using a dashed border

Start the y-axis at zero at all times

Use vertical separators when plotting data for irregular intervals

Summary

A. Pop quiz Answers

Chapter 3: JavaScript Capabilities

Know your chart object

Know when to use the advanced event model

Do you recall the JSON data API?

Chapter 5: Exporting Charts

Know the possibilities

JavaScript Export API

Chapter 8: Selecting the Right Visualization for your Data

Know your dashboard audience

Empowering your CEO

Know thy heat map

Index

FusionCharts

FusionCharts

Beginner's Guide

Copyright © 2012 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

First published: April 2011

Production Reference: 1170412

Published by Packt Publishing Ltd. Livery Place 35 Livery Street Birmingham B3 2PB, UK.

ISBN 978-1-84969-176-5

www.packtpub.com

Cover Image by Quirk Brand Communication ( <[email protected]>)

Credits

Authors

Sanket Nadhani

Shamasis Bhattacharya

Pallav Nadhani

Reviewers

Adit Gupta

Karoline Osaland Klever

Acquisition Editor

Wilson D'souza

Lead Technical Editor

Shreerang Deshpande

Technical Editor

Unnati Shah

Project Coordinator

Sai Gamare

Proofreader

Kevin McGowan

Indexer

Tejal Daruwala

Graphics

Manu Joseph

Production Coordinator

Melwyn D'sa

Cover Work

Melwyn D'sa

About the Authors

Sanket Nadhani previously headed Marketing and Sales at FusionCharts, fresh out of college. As part of the role, he had to conceptualize different dashboards and demos and was often frustrated with the lack of practical resources on data visualization to learn from. Once he learned them after his daily bouts with tons of data, he started writing about the usability and best practices on the FusionCharts blog that have been well received.

He loves food, beer, and travelling. You can follow him on Twitter at http://twitter.com/sanketnadhani.

I want to thank the wonderful web community for sharing all their learning and experiences so selflessly. A lot of what I know and do today is because of you guys.

Shamasis Bhattacharya has been a part of FusionCharts since 2008. As a JavaScript architect, he heads the JavaScript development team and spends most of his time analyzing, modeling, and coding the FusionCharts JavaScript charting library with attention to smart software design and innovative data visualization countenances.

He writes on his blog http://www.shamasis.net/ and spends the rest of his time with his wife, Madhumita.

My part in this book wouldn't have been worth reading had my wife not been around helping me and had not Pallav e-mailed me questioning whether I had been smoking while writing the draft!

Pallav Nadhani is the co-founder and CEO of FusionCharts, and an angel investor. He started FusionCharts at the age of 17 as a way to make pocket money. Today, FusionCharts has around 20,000 customers and 400,000 users in over 110 countries. His entrepreneurial journey has been covered by various magazines such as Forbes, Entrepreneur, Business Today, Economic Times, and numerous blogs and websites. He holds a Masters in Computer Science from The University of Edinburgh and loves traveling, beer, and poker.

He has also worked on the book Flash.NET, Friends of Ed Publication.

I want to dedicate this book to Mom, who has always been my inspiration, and Puja, who has been my cheerful support throughout. I would also like to thank the entire FusionCharts team for taking FusionCharts to where it is today, and Hrishikesh for helping me with this book.

About the Reviewer

Karoline Osaland Klever works as a Senior Developer and Consultant at Epinova, focusing on web development with EPiServer and integrations with Microsoft Dynamics CRM. She was honored as one of the top three computer science students in Norway the year she graduated from the university and has, since then, released an open source framework for integration with Microsoft Dynamics CRM. She lives in Oslo, Norway.

www.PacktPub.com

Support files, eBooks, discount offers and more

You might want to visit www.PacktPub.com for support files and downloads related to your book.

Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at for more details.

At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks.

http://PacktLib.PacktPub.com

Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here, you can access, read and search across Packt's entire library of books.

Why Subscribe?

Fully searchable across every book published by Packt

Copy and paste, print and bookmark content

On demand and accessible via web browser

Free Access for Packt account holders

If you have an account with Packt at www.PacktPub.com, you can use this to access PacktLib today and view nine entirely free books. Simply use your login credentials for immediate access.

Preface

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.

What this book covers

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