FusionCharts Beginner’s Guide: The Official Guide for FusionCharts Suite

Create interactive charts in JavaScript (HTML5) and Flash for your web and enterprise applications with this book and ebook

FusionCharts Beginner’s Guide: The Official Guide for FusionCharts Suite

Beginner's Guide
Sanket Nadhani, Pallav Nadhani, Shamasis Bhattacharya

Create interactive charts in JavaScript (HTML5) and Flash for your web and enterprise applications with this book and ebook
$26.99
$44.99
RRP $26.99
RRP $44.99
eBook
Print + eBook
$12.99 p/month

Want this title & more? Subscribe to PacktLib

Enjoy full and instant access to over 2000 books and videos – you’ll find everything you need to stay ahead of the curve and make sure you can always get the job done.
+ Collection
Free Sample

Book Details

ISBN 139781849691765
Paperback252 pages

About This Book

  • Go from nothing to delightful reports and dashboards in your web applications in super quick time
  • Create your first chart in 15 minutes and customize it both aesthetically and functionally
  • Create a powerful reporting experience with advanced capabilities like drill-down and JavaScript integration
  • Integrate the charts with PHP, ASP.NET, Java or other server-side scripts pulling data from databases
  • Learn reporting best practices including right chart type selection and practical usability tips
  • A fast-paced yet comprehensive guide to FusionCharts Suite filled with examples and practical tips

Who This Book Is For

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 right from downloading it to creating complete reports and dashboards.

Table of Contents

Chapter 1: Introducing FusionCharts
What is FusionCharts Suite?
Getting FusionCharts
Time for action — downloading and extracting FusionCharts
Creating your first chart
Time for action — set up FusionCharts for our first chart
Time for action — creating XML data for our first chart
Time for action — Writing the HTML and JavaScript code to embed the chart
Time for action — creating JavaScript only charts
Using the Data String method to provide data
Time for action — embedding XML in the web page and using the Data String method
Using JSON data with FusionCharts
Time for action — converting FusionCharts XML format to JSON
Time for action — powering a chart using JSON data stored in a file
Time for action — powering a chart using JSON data embedded in the page
Creating charts with multiple series
Time for action — creating a multi-series chart
Combination charts
Time for action — the chart showing the actual versus the projected revenue
Time for action — a chart showing revenue versus units sold
Summary
Chapter 2: Customizing your Chart
Know thy chart
Customizing the chart background
Time for action — customizing the chart background
Time for action — setting currency notes as the chart background
Customizing the chart border
Customizing the data plot
Customizing the font properties
Configuring the y-axis and divisional lines
Time for action — customizing the chart limits and the number of divisional lines
Formatting the numbers on the chart
Time for action — setting up a number scale to understand billions as well
Customizing data labels and values on the chart
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
Personalizing the chart
Time for action — adding a logo and link to the chart
Using multilingual characters on the chart
Changing chart messages
Time for action — changing the Invalid data message
Summary
Chapter 3: JavaScript Capabilities
Access your charts using JavaScript
Time for action — setting up the audit report page
Listening to chart events
Time for action — show chart controls when a chart is fully rendered
Time for action — replace simple events with the advanced event model
Dynamically updating chart data
Time for action — change chart data on the click of a button
Time for action — update chart data from a drop-down list
Retrieve data from chart
Time for action — retrieve data from the chart and sort them
Time for action — retrieve CSV data from the chart and update a textarea
Manipulate chart cosmetics using JavaScript
Time for action — hide data values of the columns
Debugging your charts
Time for action — set up the JavaScript debug mode to output in a browser console
Summary
Chapter 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
Time for action — building the descendant chart
LinkedCharts for simplified drill-downs
Time for action — using LinkedCharts to eliminate multiple web pages for descendant charts
Time for action — creating LinkedCharts using a single XML source
Summary
Chapter 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
Time for action — customize the export component attributes
Export charts using JavaScript API
Time for action — create a button to export the chart
Time for action — create separate buttons to export the chart as image and PDF
Export charts directly to the server
Time for action — configure the server-side export handler
Time for action — create a button to perform server-side export of the chart
Summary
Chapter 6: Integrating with Server-side Scripts
FusionCharts and server-side scripts
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
Time for action — creating a chart in PHP using data from MySQL
Time for action — adding drill-down to a database-driven chart
Creating FusionCharts in ASP.NET using C#
Time for action — using FusionCharts.dll in a new Visual Studio project
Time for action — create a chart in C# using data from an array
Time for action — creating a chart in ASP.NET using data from an SQL Server
Time for action — creating a drill-down chart in ASP.NET using data from an SQL Server
Creating charts in Java using Eclipse
Time for action — creating a new project in Eclipse and adding the tag library
Time for action — creating a chart in Java using data from an array
Time for action — creating a chart in Java using data from MySQL
Time for action — creating a drill-down chart in Java using data from MySQL
Summary
Chapter 7: Creating Maps for your Applications
Getting FusionMaps
Time for action — downloading and extracting FusionMaps
Creating the first map
Time for action — set up FusionMaps for our first map
Time for action — creating the XML for our first map
Time for action — writing the HTML and the JavaScript code to embed the map in a page
Creating drill-down maps
Time for action — drilling down from the US map to the individual states
Summary
Chapter 8: Selecting the Right Visualization for your Data
Understanding the audience
Common types of data analysis
Specialized charts
Summary
Chapter 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

What You Will Learn

  • Create different charts like column, bar, line, pie, multi-series and combination, each of them in under 15 minutes
  • Render the chart in Flash and JavaScript, and provide data in XML or JSON
  • Customize the charts both aesthetically and functionally including background, font, chart limits, tooltips and use of multi-lingual characters
  • Add advanced reporting capabilities like drill-down and JavaScript integration to give your users a powerful reporting experience
  • Integrate the charts with PHP, ASP.NET, Java and any other server-side script pulling data from databases
  • Create interactive maps to plot geographical data like revenue by regions, election results and office locations on interactive maps using FusionMaps
  • Understand how to select the right chart for your data, and how to make them more usable with practical tips

In Detail

User experience can make or break any app these days, no matter whether it's a commercial product or an internal solution. While most web applications out there are boring and outdated when it comes to their charting, you can make yours both stunning and powerful using FusionCharts Suite. Once you have mastered it, you can give your users a delightful reporting experience in no time at all.

FusionCharts Beginner’s Guide is a practical, step-by-step guide to using FusionCharts Suite for creating delightful web reports and dashboards. Getting you started quickly, you will learn advanced reporting capabilities like drill-down and JavaScript integration, and charting best practices to make the most out of it. Filled with examples, real-life tips and challenges, this book is the firstofitstype in the visualization industry.

The book teaches you to create delightful reports and dashboards for your web applications assuming no previous knowledge of FusionCharts Suite. It gets your first chart up in 15 minutes after which you can play around with different chart types and customize them. You will also learn how to create a powerful reporting experience using drill-down and advanced JavaScript capabilities. You will also connect your charts to server-side scripts pulling data from databases. Finally you round up the experience learning reporting best practices including right chart type selection and practical usability tips.

By the end of the book, you will have a solid foundation in FusionCharts Suite and data visualization itself. You will be able to give your users a delightful reporting experience, from developers to management alike.

Authors

Table of Contents

Chapter 1: Introducing FusionCharts
What is FusionCharts Suite?
Getting FusionCharts
Time for action — downloading and extracting FusionCharts
Creating your first chart
Time for action — set up FusionCharts for our first chart
Time for action — creating XML data for our first chart
Time for action — Writing the HTML and JavaScript code to embed the chart
Time for action — creating JavaScript only charts
Using the Data String method to provide data
Time for action — embedding XML in the web page and using the Data String method
Using JSON data with FusionCharts
Time for action — converting FusionCharts XML format to JSON
Time for action — powering a chart using JSON data stored in a file
Time for action — powering a chart using JSON data embedded in the page
Creating charts with multiple series
Time for action — creating a multi-series chart
Combination charts
Time for action — the chart showing the actual versus the projected revenue
Time for action — a chart showing revenue versus units sold
Summary
Chapter 2: Customizing your Chart
Know thy chart
Customizing the chart background
Time for action — customizing the chart background
Time for action — setting currency notes as the chart background
Customizing the chart border
Customizing the data plot
Customizing the font properties
Configuring the y-axis and divisional lines
Time for action — customizing the chart limits and the number of divisional lines
Formatting the numbers on the chart
Time for action — setting up a number scale to understand billions as well
Customizing data labels and values on the chart
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
Personalizing the chart
Time for action — adding a logo and link to the chart
Using multilingual characters on the chart
Changing chart messages
Time for action — changing the Invalid data message
Summary
Chapter 3: JavaScript Capabilities
Access your charts using JavaScript
Time for action — setting up the audit report page
Listening to chart events
Time for action — show chart controls when a chart is fully rendered
Time for action — replace simple events with the advanced event model
Dynamically updating chart data
Time for action — change chart data on the click of a button
Time for action — update chart data from a drop-down list
Retrieve data from chart
Time for action — retrieve data from the chart and sort them
Time for action — retrieve CSV data from the chart and update a textarea
Manipulate chart cosmetics using JavaScript
Time for action — hide data values of the columns
Debugging your charts
Time for action — set up the JavaScript debug mode to output in a browser console
Summary
Chapter 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
Time for action — building the descendant chart
LinkedCharts for simplified drill-downs
Time for action — using LinkedCharts to eliminate multiple web pages for descendant charts
Time for action — creating LinkedCharts using a single XML source
Summary
Chapter 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
Time for action — customize the export component attributes
Export charts using JavaScript API
Time for action — create a button to export the chart
Time for action — create separate buttons to export the chart as image and PDF
Export charts directly to the server
Time for action — configure the server-side export handler
Time for action — create a button to perform server-side export of the chart
Summary
Chapter 6: Integrating with Server-side Scripts
FusionCharts and server-side scripts
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
Time for action — creating a chart in PHP using data from MySQL
Time for action — adding drill-down to a database-driven chart
Creating FusionCharts in ASP.NET using C#
Time for action — using FusionCharts.dll in a new Visual Studio project
Time for action — create a chart in C# using data from an array
Time for action — creating a chart in ASP.NET using data from an SQL Server
Time for action — creating a drill-down chart in ASP.NET using data from an SQL Server
Creating charts in Java using Eclipse
Time for action — creating a new project in Eclipse and adding the tag library
Time for action — creating a chart in Java using data from an array
Time for action — creating a chart in Java using data from MySQL
Time for action — creating a drill-down chart in Java using data from MySQL
Summary
Chapter 7: Creating Maps for your Applications
Getting FusionMaps
Time for action — downloading and extracting FusionMaps
Creating the first map
Time for action — set up FusionMaps for our first map
Time for action — creating the XML for our first map
Time for action — writing the HTML and the JavaScript code to embed the map in a page
Creating drill-down maps
Time for action — drilling down from the US map to the individual states
Summary
Chapter 8: Selecting the Right Visualization for your Data
Understanding the audience
Common types of data analysis
Specialized charts
Summary
Chapter 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

Book Details

ISBN 139781849691765
Paperback252 pages
Read More

Recommended for You