Flash Pie Chart

Introduction

Sample Piechart

There are many solutions to displaying charts on the web. Server-side reporting suites, client-side packages – you name it.

Sometimes however, all you need is a fast, easy and free method to display your data. This is what Flash Pie Chart provides.

Features

• Very small size, from 4Kb (the compiled class) to 10Kb (with XML parser, etc); excellent for high-traffic sites where size counts;
• Clean, documented AS2 class that can be easily extended;
• Compiled Flash Component for easy integration in other Flash projects;
• Self-contained SWF version, easy to be added in any page, with data coming from an XML datasource;
• Resizable to fit the available space;
• 2D or 3D representation;
• optional Legend, displayed on the right or below, sorted ascending/descending, showing values or percents:
• Fully customizable colors and styles;
• Free for both commercial and non-commercial purposes. As a matter of courtesy, please include a link to this site.

Using it

The easiest way to use the chart is to work with the pre-compiled version. The sample HTML file uses SWFObject to embed the Flash file. To create a chart, all you need to do is to provide an XML to the flash object. This can be achieved in several ways, including using the SWFObject mechanism to pass the required variable to Flash:

<div id="flashcontent"></div>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
    var so = new SWFObject("piechart.swf", "piechart", "100%", "100%", "8", "#ffffff");
    so.addVariable("pieXmlFilename", "myfile.xml");
    so.write("flashcontent");
</script>

This will send variable pieXmlFilename and its value to Flash.

You could also send the variable via a query string, i.e. pie.html?file=myfile.xml by using this code:

<div id="flashcontent"></div>
<script type="text/javascript">
    var so = new SWFObject("piechart.swf", "piechart", "100%", "100%", "8", "#ffffff");
    so.addVariable("pieXmlFilename", getQueryParamValue("file"));
    so.write("flashcontent");
</script>

Please refer to SWFObject’s documentation for additional information.

A sample XML and a schema file (XSD) are included. We recommend that you use an XML editor with schema validation, such as Altova XML Spy Home Edition (free). Here’s an example XML:

<chart title="My Chart" legend="right">
    <pie radius="1500" squash="1.5" thickness="20" labels="percent"/>
    <style>
        <title font="Georgia" size="20" color="#FF9900" bold="true" italic="true"/>
        <label font="Arial" size="12" color="#000000" bold="false" italic="false"/>
        <legend rowodd="#EEEEEE" even="#DDDDDD" border="#000000"/>
    </style>
    <values sort="descending">
        <node value="30" label="widget 1" color="#FF0000"/>
        <node value="20" label="widget 2" color="#00FF00"/>
        <node value="60" label="widget 3" color="#0000FF"/>
    </values>
</chart>

If you require more control over the Chart, you can use the component version or even the Pie Class. They have JavaDoc-style documentation and it should be relatively easy for you to use them in your projects and to exend them.

Extending

You’re free to extend the capabilities of this component any way you see fit. We’d love if you could share your thoughts and let us know how you’ve improved it.

Download

We’ve included three versions of the Pie Chart. Use the one that best suits your needs:
Single SWF file that accepts data and style information from an XML file; ideal if you just need the chart embedded in a HTML:
SWC file and instructions, if you need to use the Chart in a Flash application:

  Pie Chart Component (14.0 KiB, 758 hits)

  Pie Chart AS2 Class (13.3 KiB, 724 hits)