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.
Table of Contents (16 chapters)
FusionCharts
Credits
About the Authors
About the Reviewer
www.PacktPub.com
Preface

Time for action — the chart showing the actual versus the projected revenue


  1. 1. Create a copy of MultiSeriesChart.html in the same folder and name it as ActualVsProjected.html.

  2. 2. Change the reference of the chart SWF file in the embedding code to MSCombi2D.swf. This SWF renders a 2D combination chart with a single y-axis.

  3. 3. Change the XML URL to ActualVsProjected.xml in the chart embedding code.

  4. 4. Create an XML file with the name ActualVsProjected.xml in the same folder and write the following data in it:

    <chart caption='Harry&apos;s SuperMart' subcaption='Revenue by Year' xAxisName='Year' yAxisName='Amount' numberPrefix='$'>
    <categories>
    <category label='2009' />
    <category label='2010' />
    <category label='2011' />
    </categories>
    <dataset seriesName='Actual Revenue'>
    <set value='1487500' />
    <set value='2100600' />
    <set value='2445400' />
    </dataset>
    <dataset seriesName='Projected Revenue' renderAs='Line' dashed='1' showValues='0' color='666666'>
    <set value='1216500' />
    <set value='2043400' />
    <set value='2292400' />
    </dataset>
    </chart>
    
  5. 5. Open ActualVsProjected.html in your browser. You should see a chart similar to the following screenshot:

What just happened?

We just created a combination chart to compare the actual revenue of Harry's SuperMart to the projected revenues, which were set as a target. For a change, we have plotted it as a 2D chart using MSCombi2D.swf. The XML data is similar in structure to the multi-series chart. The three years that form the x-axis labels are provided as<category> elements. There are two data series in the chart, one representing the actual revenue, and the other, projected revenue. There are a few new attributes that we have added to the<dataset> element of the data series representing the projected revenue, as the following line of code:

<dataset seriesName='Projected Revenue' renderAs='Line' dashed='1' showValues='0' color='666666'>

The first attribute renderAs='Line' instructs FusionCharts to render this series as a line series. The other possible values are Column and Area for this chart. As this line in the chart reflects guidance of revenues, we have visually indicated this by plotting it as a dashed line using the attribute dashed='1'. Thereafter, we have turned off the display of the data values for this series using showValues='0' to avoid cluttering of too many data values. Finally, we have provided a custom color for this series using color='666666'.

Simple, isn't it? Let us now build the second type of combination chart, to compare the revenues versus units of products sold.