FusionCharts Beginner’s Guide: The Official Guide电子书

FusionCharts

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 <set> and <category> 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