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

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

Overview of this book

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.

FusionCharts

Credits

About the Authors

About the Reviewer

www.PacktPub.com

Preface

Free Chapter

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

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

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

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

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

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

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

Selecting the Right Visualization for your Data

Understanding the audience

Common types of data analysis

Specialized charts

Summary

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

Pop quiz Answers

Chapter 3: JavaScript Capabilities

Chapter 5: Exporting Charts

Chapter 8: Selecting the Right Visualization for your Data

Customer Reviews

5 star

4 star

3 star

2 star

1 star

Time for action — adding a trendline to show target revenue

1. Create a copy of ChartBackground.html and ChartBackground.xml, and rename them to Trendline.html and Trendline.xml respectively.

2. Add the following code to Trendline.xml right after the chart data:

<trendLines>
<line startValue='430000' color='009933' displayvalue='Target' />
</trendLines>

3. Open Trendline.html in a browser.

What just happened?

Your chart can have multiple trendlines on a chart, so they need to be enclosed within the<trendlines></trendlines> tags. For each trendline, you need a<line> element. We then defined its start value, color and the label to be displayed alongside the trendline. In case your trendline needs to have a different end value, you can define that as well using the endValue attribute that would result in a slanted trendline.

Have a go hero — add a trendzone to the chart

Trendzones are similar to trendlines, except that they mark out a range, and hence, necessarily...

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

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

Overview of this book

Related Content you might be interested in

Current Title:

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

Time for action — adding a trendline to show target revenue

What just happened?

Have a go hero — add a trendzone to the chart