The BJCPieChart presents data in a series of sections which indicate a perentage of the whole.
1. Open a plain text editor (such as Notepad on Windows or TextEdit on Mac) and type the following code:
<?xml version="1.0" encoding="utf-8"?>
This is a standard opener for an XML document.
2. Enter a chart element to define your chart like so:
<chart print_title="Demo Company Sales/employee (EUR)" print_footer="This is a demo of the BJC Pie Chart" type="pie">
The chart element uses attributes to define the chart. The print_title attribute sets the title of the chart, the print_footer sets the chart footer information and the type attribute is set to 'pie' to indicate that this is a pie chart.
3. Add a section element to define a section of the chart like so:
<section title="David" color="0xEEEEEE" value="7930" />
The section node accepts three attributes, the title sets the title of this section of the chart, the color sets its color and the value sets its value.
4. Add a section element for each section of your chart.
5. Close the chart element:
</chart>
6. Your complete xml file should now look something like this:
<?xml version="1.0" encoding="utf-8"?>
<chart print_title="Demo Company Sales/employee (EUR)" print_footer="This is a demo of the BJC Pie Chart" type="pie">
<section title="David" color="0xEEEEEE" value="7930" />
<section title="John" color="0xCCCCCC" value="8050" />
<section title="Frank" color="0x777777" value="9933" />
<section title="Lisa" color="0x555555" value="7864" />
<section title="Tina" color="0x000000" value="6956" />
</chart>
Save your file as 'chart.xml' (without the quotes).
7. Having installed the component using the Macromedia Extension Manager open Flash and start a new file.
8. Press Ctrl+F7 (Windows) or Cmnd+F7 (Mac) to open the components panel and locate the BJCPieChart component. Drag a copy onto the stage. Press Ctrl+F3 (Windows) or Cmnd+F3 (Mac) to open the properties panel to size and position the component.
9. Press Ctrl+L (Windows) or Cmnd+L (Mac) to open the library panel and click the top right menu button. Select 'New Font...'. Enter a name for your font and select the font you wish to use from the drop-down list. Click 'OK'.
In the library panel right-click (Windows) or Ctrl+click (Mac) the new font symbol and select 'Linkage...'. Tick the 'Export for Actionscript' checkbox and enter a linkage identifier, for the purposes of this tutorial give the font the linkage identifier 'myFont' (without the quotes).
10. Select your component on the stage and press Alt+F7 to open the Component Inspector panel. Locate the 'Source' parameter and enter the name of your xml file (chart.xml).
Locate the 'Font' parameter and enter the name of the font you embedded in step 9 (myFont).
11. Press Ctrl+S (Windows) or Cmnd+S (Mac) to save your file in the same directory as your XML file and Ctrl+Enter (Windows) or Cmnd+Enter (Mac) to test it.