The BJCLineChart presents data in a series of lines which can represent different values over a period of time.
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 ymax="20" ymin="0" xmax="2003" xmin="2000" grid_lines_h="6" grid_lines_v="3" print_title="Demo Company" print_x_title="Time" print_y_title="Milj. EUR" x_titles="Jan;Feb;Mar" print_footer="This is a demo of the BJC Line Chart" type="line">
This defines the chart. The chart element uses a number of attributes to define the chart. The ymax and ymin attributes set the maximum and minimum values for the y axis, the xmax and xmin attributes set the maximum and minimum values for the x axis. The grid_lines_h and grid_lines_v set the number of grid lines. The print_title sets the title. The print_x_title, print_y_title, and x_titles set the titles for the x and y axis. The print_footer sets the footer text. The type attribute is set to 'line' to indicate that this chart is a line graph.
3. Enter a line element to define a line like so:
<line title="Turnover" color="0x9F00FF">
The line element has two attributes, the title attribute sets the title of the line and the color attribute sets the color of the line.
4. For each point on your line enter a dot element like this:
<dot x="2000" y="10" />
The dot's x attribute specifies the position on the x axis and the y attribute sets the position of the dot on the y axis.
5. Add a dot element for each point on your line.
6. Close the line element:
</line>
7. Add a line element and dot elements within it for each line on your graph.
8. Close the chart element:
</chart>
9. Your complete xml file should now look something like this:
<?xml version="1.0" encoding="utf-8"?>
<chart ymax="20" ymin="0" xmax="2003" xmin="2000" grid_lines_h="6" grid_lines_v="3" print_title="Demo Company" print_x_title="Time" print_y_title="Milj. EUR" x_titles="Jan;Feb;Mar" print_footer="This is a demo of the BJC Line Chart" type="line">
<line title="Turnover" color="0x9F00FF">
<dot x="2000" y="10" />
<dot x="2001" y="15" />
<dot x="2002" y="12" />
<dot x="2003" y="18" />
</line>
<line title="Profit" color="0x555555">
<dot x="2000" y="3" />
<dot x="2001" y="5" />
<dot x="2002" y="5" />
<dot x="2003" y="6" />
</line>
<line title="Expences" color="0x999999">
<dot x="2000" y="7" />
<dot x="2001" y="10" />
<dot x="2002" y="7" />
<dot x="2003" y="12" />
</line>
</chart>
Save your file as 'chart.xml' (without the quotes).
10. Having installed the component using the Macromedia Extension Manager open Flash and start a new file.
11. Press Ctrl+F7 (Windows) or Cmnd+F7 (Mac) to open the components panel and locate the BJCLineChart 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.
12. 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).
13. 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 12 (myFont).
14. 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.