The BJCBarChart presents data in a series of bars. The height of the bar in relation to the other bars indicates the value of each bar.
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 the 'chart' element to define your chart component like so:
<chart min="0" max="150" bar_width="50" padding="5" grid_lines="3" print_title="Demo Company" print_x_title="Year" print_y_title="Turnover MEUR" print_footer="This is a demo of the BJC Bar Chart" type="bar">
This element defines the chart. It accepts a variety of attributes to define the chart. The min attribute sets the minimum value and the max attribute sets the maximum value. The bar_width attribute sets the width of your bars. The padding attribute sets the padding between the bars. The grid_lines attribute sets the amount of lines in the grid. The print_title attribute sets the title, the print_x_title sets the title of the x axis and the print_y_title sets the title of the y axis. The print_footer sets the footer text. The type attribute is specified as 'bar' to indicate that this component is a bar graph.
3. Enter a 'bar' element for each bar you need to represent in your information like so:
<bar title="2001" color="0x9F00FF" value="50" />
This adds a bar to your chart. Add one bar element for each bar you need in your chart. The bar element has three attributes, the title attribute sets the title of the bar the color attribute sets the background color and the value sets the value of the bar.
4. Close your chart element like so:
</chart>
5. Your xml file should now look like this:
<?xml version="1.0" encoding="utf-8"?> <chart min="0" max="150" bar_width="50" padding="5" grid_lines="3" print_title="Demo Company" print_x_title="Year" print_y_title="Turnover MEUR" print_footer="This is a demo of the BJC Bar Chart" type="bar"> <bar title="2001" color="0x9F00FF" value="50" /> <bar title="2002" color="0x9F00FF" value="33" /> <bar title="2003" color="0x9F00FF" value="86" /> <bar title="2004" color="0x9F00FF" value="120" /> <bar title="2003" color="0x9F00FF" value="86" /> <bar title="2004" color="0x9F00FF" value="120" /> </chart>
Save your file as 'chart.xml' and close it.
6. Having installed the component using the Macromedia Extension Manager open Flash and start a new file.
7. Press Ctrl+F7 (Windows) or Cmnd+F7 (Mac) to open the components panel and locate the BJCBarChart 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.
8. 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).
9. 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 8 (myFont).
10. 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.