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

FusionCharts

Credits

About the Authors

About the Reviewer

www.PacktPub.com

Preface

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

Pop quiz Answers

Pop quiz Answers

Pop quiz Answers