You are previewing FusionCharts.
O'Reilly logo
FusionCharts

Book Description

"

Create interactive charts in JavaScript (HTML5) and Flash for your web and enterprise applications.

  • 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

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.

"

Table of Contents

  1. FusionCharts
    1. Table of Contents
    2. FusionCharts
    3. Credits
    4. About the Authors
    5. About the Reviewer
    6. www.PacktPub.com
      1. Support files, eBooks, discount offers and more
        1. Why Subscribe?
        2. Free Access for Packt account holders
    7. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Time for action — heading
        1. What just happened?
        2. Pop quiz — heading
        3. Have a go hero — heading
      6. Reader feedback
      7. Customer support
        1. Downloading the example code
        2. Errata
        3. Piracy
        4. Questions
    8. 1. Introducing FusionCharts
      1. What is FusionCharts Suite?
      2. Getting FusionCharts
      3. Time for action — downloading and extracting FusionCharts
        1. What just happened?
      4. Creating your first chart
        1. Steps to create a chart using FusionCharts
      5. Time for action — set up FusionCharts for our first chart
        1. What just happened?
      6. Time for action — creating XML data for our first chart
        1. What just happened?
      7. Time for action — Writing the HTML and JavaScript code to embed the chart
        1. What just happened?
          1. What to look for if your chart is not rendered?
        2. Converting the chart to a pure JavaScript chart
      8. Time for action — creating JavaScript only charts
        1. What just happened?
        2. Have a go hero — build a dashboard for Harry
      9. Using the Data String method to provide data
      10. Time for action — embedding XML in the web page and using the Data String method
        1. What just happened?
      11. Using JSON data with FusionCharts
      12. Time for action — converting FusionCharts XML format to JSON
        1. What just happened?
      13. Time for action — powering a chart using JSON data stored in a file
        1. What just happened?
      14. Time for action — powering a chart using JSON data embedded in the page
        1. What just happened?
      15. Creating charts with multiple series
      16. Time for action — creating a multi-series chart
        1. What just happened?
        2. Can the number of <set> and <category> elements mismatch?
          1. Representing missing or non-existent data on the chart
      17. Combination charts
      18. Time for action — the chart showing the actual versus the projected revenue
        1. What just happened?
      19. Time for action — a chart showing revenue versus units sold
        1. What just happened?
      20. Summary
    9. 2. Customizing your Chart
      1. Know thy chart
      2. Customizing the chart background
      3. Time for action — customizing the chart background
        1. What just happened?
        2. Have a go hero — set a gradient fill for the canvas on a 2D Column chart
        3. Image as chart background
      4. Time for action — setting currency notes as the chart background
        1. What just happened?
      5. Customizing the chart border
      6. Customizing the data plot
        1. Customizing the color of the data plot
        2. Customizing the border of the data plot
        3. Have a go hero — highlight an anchor in a line chart
      7. Customizing the font properties
      8. Configuring the y-axis and divisional lines
      9. Time for action — customizing the chart limits and the number of divisional lines
        1. What just happened?
      10. Formatting the numbers on the chart
        1. Adding a prefix or suffix to the numbers
        2. Configuring decimal places on the chart
        3. Setting up your own number scale
      11. Time for action — setting up a number scale to understand billions as well
        1. What just happened?
        2. Have a go hero — create a number scale to convert seconds to minutes, hours, and days
      12. Customizing data labels and values on the chart
        1. Different modes to display data labels.
        2. Different modes to display data values
      13. Configuring the tooltips
      14. Configuring the legend in multi-series charts
      15. Adding a trendline to the chart
      16. Time for action — adding a trendline to show target revenue
        1. What just happened?
        2. Have a go hero — add a trendzone to the chart
      17. Personalizing the chart
      18. Time for action — adding a logo and link to the chart
        1. What just happened?
      19. Using multilingual characters on the chart
        1. Adding the BOM stamp in the Data URL method
        2. Adding the BOM stamp in the Data String method
      20. Changing chart messages
      21. Time for action — changing the Invalid data message
        1. What just happened?
      22. Summary
    10. 3. JavaScript Capabilities
      1. Access your charts using JavaScript
      2. Time for action — setting up the audit report page
        1. What just happened?
        2. Pop quiz — know your chart object
      3. Listening to chart events
        1. The simple event model
      4. Time for action — show chart controls when a chart is fully rendered
        1. What just happened?
        2. The advanced event model
      5. Time for action — replace simple events with the advanced event model
        1. What just happened?
          1. Event arguments in the advanced model
        2. Pop quiz — know when to use the advanced event model
      6. Dynamically updating chart data
      7. Time for action — change chart data on the click of a button
        1. What just happened?
      8. Time for action — update chart data from a drop-down list
        1. What just happened?
      9. Retrieve data from chart
      10. Time for action — retrieve data from the chart and sort them
        1. What just happened?
        2. Pop quiz — do you recall the JSON data API?
        3. Retrieving chart data as comma-separated values
      11. Time for action — retrieve CSV data from the chart and update a textarea
        1. What just happened?
      12. Manipulate chart cosmetics using JavaScript
      13. Time for action — hide data values of the columns
        1. What just happened?
      14. Debugging your charts
        1. Using the JavaScript debug mode
      15. Time for action — set up the JavaScript debug mode to output in a browser console
        1. What just happened?
        2. Have a go hero
      16. Summary
    11. 4. Enabling Drill-down on Charts
      1. How does drill-down work in FusionCharts?
      2. Building our first drill-down chart
      3. Time for action:building the parent chart
        1. What just happened?
      4. Time for action — building the descendant chart
        1. What just happened?
        2. Opening descendant charts in a new window
        3. Opening descendant charts in a pop-up window
        4. Opening descendant charts in a frame
        5. Invoking JavaScript functions on a link click event
      5. LinkedCharts for simplified drill-downs
      6. Time for action — using LinkedCharts to eliminate multiple web pages for descendant charts
        1. What just happened?
      7. Time for action — creating LinkedCharts using a single XML source
        1. What just happened?
      8. Summary
    12. 5. Exporting Charts
      1. A word on how the export process works
      2. Export charts at client-side
      3. Time for action — enable exporting of charts using the context menu
        1. What just happened?
        2. Pop quiz — know the possibilities
        3. Customizing the export component
      4. Time for action — customize the export component attributes
        1. What just happened?
      5. Export charts using JavaScript API
      6. Time for action — create a button to export the chart
        1. What just happened?
        2. Configure charts' export parameters using JavaScript
      7. Time for action — create separate buttons to export the chart as image and PDF
        1. What just happened?
        2. Pop quiz — JavaScript Export API
      8. Export charts directly to the server
      9. Time for action — configure the server-side export handler
        1. What just happened?
      10. Time for action — create a button to perform server-side export of the chart
        1. What just happened?
        2. Have a go hero — put the export features to use
      11. Summary
    13. 6. Integrating with Server-side Scripts
      1. FusionCharts and server-side scripts
        1. Setting FusionCharts for your dynamic web application
        2. Embedding FusionCharts in a web page without using JavaScript
        3. Dynamic data and FusionCharts
      2. Scope of our dynamic charts and the basic setup
      3. Time for action — getting ready to build dynamic charts
      4. Creating FusionCharts in PHP
      5. Time for action — creating a chart using data from array
        1. What just happened?
      6. Time for action — creating a chart in PHP using data from MySQL
        1. What just happened
      7. Time for action — adding drill-down to a database-driven chart
        1. What just happened?
        2. Have a go hero — build a dashboard for Harry
      8. Creating FusionCharts in ASP.NET using C#
      9. Time for action — using FusionCharts.dll in a new Visual Studio project
        1. What just happened
      10. Time for action — create a chart in C# using data from an array
        1. What just happened
      11. Time for action — creating a chart in ASP.NET using data from an SQL Server
        1. What just happened
      12. Time for action — creating a drill-down chart in ASP.NET using data from an SQL Server
        1. What just happened?
        2. Have a go hero — build a dashboard for Harry
      13. Creating charts in Java using Eclipse
      14. Time for action — creating a new project in Eclipse and adding the tag library
        1. What just happened?
      15. Time for action — creating a chart in Java using data from an array
        1. What just happened?
      16. Time for action — creating a chart in Java using data from MySQL
        1. What just happened?
      17. Time for action — creating a drill-down chart in Java using data from MySQL
        1. What just happened?
        2. Have a go hero — build a dashboard for Harry
      18. Summary
    14. 7. Creating Maps for your Applications
      1. Getting FusionMaps
      2. Time for action — downloading and extracting FusionMaps
        1. What just happened?
      3. Creating the first map
      4. Time for action — set up FusionMaps for our first map
        1. What just happened?
      5. Time for action — creating the XML for our first map
        1. What just happened?
      6. Time for action — writing the HTML and the JavaScript code to embed the map in a page
        1. What just happened?
        2. Have a go hero — remove the "3D" effect of the map
        3. Defining new IDs for the entities
      7. Creating drill-down maps
      8. Time for action — drilling down from the US map to the individual states
        1. What just happened?
        2. Have a go hero — drill-down from the map to a chart
      9. Summary
    15. 8. Selecting the Right Visualization for your Data
      1. Understanding the audience
        1. Pop quiz — know your dashboard audience
      2. Common types of data analysis
        1. Comparison of data
        2. Transition of data
        3. Composition of data
        4. Combination of multiple forms of analysis
          1. Combination of comparison and transition charts
            1. Case 1: Combination chart with a single numeric axis
            2. Case 2: Combination chart with dual numeric axes
            3. Case 3: Combination chart with dual numeric axes having the same units
          2. Combination of comparison and composition charts
        5. Pop quiz — empowering your CEO
      3. Specialized charts
        1. Gauges
        2. Bullet graphs
        3. Funnel chart
        4. Editable charts
        5. Gantt chart
        6. Heat map chart
        7. Pop quiz — know thy heat map
        8. XY chart
      4. Summary
    16. 9. Increasing the Usability of your Charts
      1. Use descriptive captions
      2. Arrange data whenever possible
      3. Delegate detailed info to tooltips
      4. Mention the chart has drill-down
      5. Add context to data using trendlines
      6. Remove excess precision from data
      7. Show predicted values using a dashed border
      8. Start the y-axis at zero at all times
      9. Use vertical separators when plotting data for irregular intervals
      10. Summary
    17. A. Pop quiz Answers
      1. Chapter 3: JavaScript Capabilities
        1. Know your chart object
        2. Know when to use the advanced event model
        3. Do you recall the JSON data API?
      2. Chapter 5: Exporting Charts
        1. Know the possibilities
        2. JavaScript Export API
      3. Chapter 8: Selecting the Right Visualization for your Data
        1. Know your dashboard audience
        2. Empowering your CEO
        3. Know thy heat map
    18. Index