Book Image

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

Book Image

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.

Related Content you might be interested in

Current Title:

Small book image
FusionCharts Beginner's Guide: The Official Guide for FusionCharts Suite
Apr, 2012 | 252 pages
No titles found
Table of Contents (16 chapters)
FusionCharts
FusionCharts
Credits
Credits
About the Authors
About the Authors
About the Reviewer
About the Reviewer
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
Introducing FusionCharts
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
2
Customizing your Chart
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
3
JavaScript Capabilities
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
4
Enabling Drill-down on Charts
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
5
Exporting Charts
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
6
Integrating with Server-side Scripts
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
7
Creating Maps for your Applications
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
8
Selecting the Right Visualization for your Data
Selecting the Right Visualization for your Data
Understanding the audience
Common types of data analysis
Specialized charts
Summary
9
Increasing the Usability of your Charts
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
Chapter 3: JavaScript Capabilities
Chapter 5: Exporting Charts
Chapter 8: Selecting the Right Visualization for your Data

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

  1. 1. Create a copy of ExportUsingJavaScriptAPI.html and save it as ExportUsingJavaScriptAPI2.html

  2. 2. Open this file in a text editor and replace the entire beginExportChart function with the following modified variant:

    function beginChartExport (format) {
if(chartObj.hasRendered && chartObj.hasRendered()) {
chartObj.exportChart({
exportFormat: format
});
document.getElementById("exporterContainer").innerHTML = "";
}
else {
alert("Please wait for the chart to render.");
}
}

  3. 3. Locate the HTML button to export the chart (around line 51) and replace it with the following code, having two buttons:

    <input type="button" value="Export Chart as Image" onclick="beginChartExport('PNG')" />
<input type="button" value="Export Chart as PDF" onclick="beginChartExport('PDF')" />

  4. 4. Open the file in a web browser, click on the first button labeled Export Chart as Image, and let the export process complete.

  5. 5...

Previous Section
End of Section 8
Next Section