1) Publish your graph file in Graph ZX - Publish options as a standalone SWF file. I called mine OurSalesGraph.g3x and it published to OurSalesGraph.swf.
2) Create a new flash movie
as normal. For example here is our design for a simple website. We've added
a little text on a layer and added a blank Actions layer.
3) Now we want to insert our Graph ZX movie inside here. You will obviously need to create a graph using Graph ZX designer. When designing the graph you need to be aware of a few things.
- If you are going to want to change the values in the graph from your Flash File then make sure you design the graph with the maximum number of Columns and Series that you will use. You can make it use less but not more in your Flash movie.
- Set it to auto-calculate the Y Min and Max value and the Y Step. These too can be overridden.
- Publish your graph to SWF file either standalone or choosing to use the engine. (If you want to display different graphs on various pages use the engine as it will save time loading the graphs). We'll use the standalone file option first as it is simpler and then tell you what additional information you will need to use the engine.
- Copy the published files to your directory where you are saving your Flash movie.
4) Create a new movie in your flash movie. I've called mine 'Graph Holder'. Draw a rectangle shape in the movie and make it 700 by 475. This is the original size of a graph in Graph ZX. It is not absolutely necessary to place a rectangle in the movie but it helps to resize the graph to fit you Flash file.
5) Make a new layer on your scene.
6) Drag the blank 'Graph Holder' movie onto your Flash movie and position it on your movie. You should have something like the movie below.
7) Resize the movie to fit your Flash movie. (The graph when it loads will resize to the same size as the holder)
8) Give the Movie instance a name. To do this click on the Graph Holder Layer and then click on the dot with the cross hairs on the screen. The properties window should show Movie Clip instance of Graph Holder as below. Change the name to mcGraphHolder. (Note if you can't see the properties window click on window and then properties)
8) Now add the following code in the actions of the first frame. loadMovie("MarleySales2004.swf", "mcGraphHolder")
9) Now you have the graph embedded in your system there are a few things you can change in the graph from your Flash file. If you want to change graph variables from within your Flash file you first need to add the following:
_root._GraphZX = 'YES';
This tells the graph to expect changes from your flash file. You should add this and other changes to the graph in the action script before loading the graph. (NOTE - The line above must exist or all varaibles below will be ignored)
For bar, area and line graphs you can change the following:
( Very NB - the graph must be designed with the maximum number of columns and series you would like to show)
_root.zx_Columns = 10; (the number of columns to show - must be <= to saved designed graph)
_root.zx_Series = 2; ( the number of series to show - must be <= to saved designed graph)
_root.zx_XLab1 = 'Col 1'; (the x-axis labels. You ushould have one for each column)
_root.zx_XLab2 = 'Col 2';
_root.zx_XLab2 = 'Col 3'; etc_root.zx_XTitle = 'Months 2004'; (Title that will display on the X-Axis)
_root.zx_YTitle = "Sales 1000's"; (Title that will display on the Y-Axis)
_root.zx_Header = "Monthly Sales - Eagle Range" (Graph Header)
_root.zx_Footer = "Eagle Range - Trademark" (Graph Footer)
_root.zx_BarGap=5; ( The gap to leave between bars in a bar graph. (eg BarGap=10) )
_root.zx_Stack='YES'; (Whether to stack bar graphs or not. Value may be 'YES' or 'NO' )
The maximum and minimum value for Y and the step (NOTE: this would override auto calculate settings in the designer.
_root.zx_YMin = -10;
_root.zx_YMax = 150;
_root.zx_YStep = 20;
(The values below may be set for each series)Passing the value of each point on the graphs
_root.zx_A1 = 10; (Data for Series 1 column 1. The series run A,B,C etc and the columns run 1, 2 to _root.zx_Columns)
_root.zx_A2 = 15;
_root.zx_B1 = '45'; (Data for Series 2 column 1 to ... etc)
_root.zx_B2 = '26';
(and so on for each series)
Passing the type of each series
_root.zx_TypeA = 'line'; (Series 1 Type is 'line' graph - Can be 'line', 'area' or 'bar' (lowercase))
_root.zx_TypeB = 'area'; (Series 2 Type is 'area' graph - Can be 'line', 'area' or 'bar' (lowercase))
How transparent each series should be
_root.zx_TransA=60; (Set the level of transparency for the first series to 60% visible)
_root.zx_TransB=40; (Set the level of transparency for the first series to 40% visible) (0 - Transparent ..100 - Opaque)Passing the Line Width for series that are Line graphs
_root.zx_LWA=10; (Set the Line Width of series A. Only applicaple if the Series Type is 'line')
_root.zx_LWB=15; (Set the Line Width of series B. Only applicaple if the Series Type is 'line')Passing the Font Size for Bar Graph Values
_root.zx_FSizeA=35; (The Font Size of the value to display if series A is a bar graph. Only applicaple if the Series Type is 'bar')
_root.zx_FSizeB=23; (The Font Size of the value to display if series B is a bar graph. Only applicaple if the Series Type is 'bar')
For Pie Charts you can change the following:
(Once again very NB - the graph must be designed with the maximum number of slices you would like to show)
_root.zx_Slices = 4 (Number of slices to show)
_root.zx_Slice1 = 20 ( Data for each slice. From 1 to _root.zx_Slices)
_root.zx_Slice2 = 30
_root.zx_Label1 = 'Slice A' (Label to show for each slice)
_root.zx_Label2 = 'Slice B'_root.zx_Offset1 = 0 (The offset for each slice - how far to move it out)
_root.zx_Offset2 = 0 (The offset for each slice - how far to move it out)_root.zx_Header = "Monthly Sales - Eagle Range" (Graph Header)
_root.zx_Footer = "Eagle Range - Trademark" (Graph Footer)