The BJCStackedPercentChart presents data in a series of bars which are further sub-divided to display different values in a single category relative to the other bars in the chart.
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 file.
2. Enter a chart element to define your chart like so:
<chart bar_width="50" padding="5" grid_lines="1" print_title="Demo Company expences" print_x_title="Month" print_y_title="Expence share" print_footer="This is a demo of the BJC Stacked Percent Chart" type="spct">
This defines the chart with a number of attributes. The bar_width attribute specifies the width of the bars, the padding sets the space between them. The grid_lines sets the number of lines in the grid. The print_title sets the title of the chart, the print_x_title sets the x axis title, the print_y_title sets the y axis title and the print_footer sets the footer information. The type attribute should be set to 'spct' to indicate this is a stacked percent chart.
3. Enter a stack element to define a section like so:
<stack title="January">
When defining a stack you specify its title with the title attribute.
4. Next, add a bar element for each bar in your stack, like so:
<bar title="Storage" color="0x9F00FF" value="4150" />
In the bar element the title sets the bar's title, the color sets its color and the value attribute sets its value.
5. Close your stack element:
</stack>
6. Add a stack element and the bar elements it contains for each stack in your chart.
7. Close the chart element:
</chart>
8. Your complete xml file should now look something like this:
<?xml version="1.0" encoding="utf-8"?>
<chart bar_width="50" padding="5" grid_lines="1" print_title="Demo Company expences" print_x_title="Month" print_y_title="Expence share" print_footer="This is a demo of the BJC Stacked Percent Chart" type="spct">
<stack title="January">
<bar title="Storage" color="0x9F00FF" value="4150" />
<bar title="Salaries" color="0x666666" value="2133" />
<bar title="Transport" color="0x333333" value="6486" />
</stack>
<stack title="February">
<bar title="Storage" color="0x9F00FF" value="3333" />
<bar title="Salaries" color="0x666666" value="4123" />
<bar title="Transport" color="0x333333" value="5486" />
</stack>
<stack title="March">
<bar title="Storage" color="0x9F00FF" value="5150" />
<bar title="Salaries" color="0x666666" value="3133" />
<bar title="Transport" color="0x333333" value="2486" />
</stack>
<stack title="April">
<bar title="Storage" color="0x9F00FF" value="4550" />
<bar title="Salaries" color="0x666666" value="2788" />
<bar title="Transport" color="0x333333" value="2986" />
</stack>
</chart>
Save your file as 'chart.xml' (without the quotes).
9. Having installed the component using the Macromedia Extension Manager open Flash and start a new file.
10. Press Ctrl+F7 (Windows) or Cmnd+F7 (Mac) to open the components panel and locate the BJCStackedPercentChart 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.
11. 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).
12. 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 11 (myFont).
13. 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.