amCharts & amMap blog

You can load any chart in to another swf file. The following example is made for Line & Area chart, However you only need to change all occurrences of "amline" to "amcolumn" or "ampie" or "amxy" and this will work for other charts. Here is the code, copy and paste it to your flash movie:

var listener:Object = new Object(); 

listener.onLoadComplete = function(target_mc:MovieClip):Void {
    target_mc.path = "amline/";
    target_mc.settings_file = "amline/amline_settings.xml";
    target_mc.data_file = "amline/amline_data.xml";
    target_mc.flash_width = "550";
    target_mc.flash_height = "400";
} 

var loader:MovieClipLoader = new MovieClipLoader();
loader.addListener(listener);

this.createEmptyMovieClip("amline_mc", this.getNextHighestDepth());
loader.loadClip("amline/amline.swf", this.amline_mc);

With current settings your swf file should be saved in the same folder where amline.html is. Do not forget to change paths if you save it to a different location.

When chart is loaded to your parent swf, stage alignment will be changed to "TOP-LEFT". if you don’t want this to happen, add this line to you onLoadComplete function:

target_mc.align = "";

The same with scaling - if you don’t want to use "noScale", add this line:

target_mc.scale = "";

Download example loader.fla file.

In this tutorial I will explain how to add fancy line or area chart to your website. For those, who came to this tutorial directly, I recommend to check examples of what it is possible to do with this tool.

Beginning

Download line chart package: http://www.amcharts.com/download/

Unzip everything.

You can check examples folder and choose the example which is closest to what you need and edit the files of this example, but in this tutorial I will work with the default chart files.

Setting size and background color of your chart
Open amline.html file with text editor, I recommend a free editor PSPad, but a simple Notepad will work too.

Find this line in this file:

var so = new SWFObject("amline/amline.swf", "amline", "520", "400", "8", "#FFFFFF");

"520" is width of your flash and "400" is height. Set desired width and height here. You can set percent values too.

"8" is flash player version required to view this chart.

"#FFFFFF" is background color of your chart

Data file: CSV or XML

Now you have to decide which of data format you will use – coma separated value (CSV) or XML. Using XML type gives you some additional features:

1. A possibility to manage your graph titles, colors and other settings in data file – this is comfortable if you have a lot of charts and all other settings of these charts are the same;
2. Custom bullets for separate points;
3. Custom colors and sizes of separate bullets;
4. Links on the bullets.
5. and more…

If you don’t need these features, choose CSV. CSV data file weight, comparing to XML file will be much lighter, this is especially important if you want to use a big amount of data.

By default, the data file name is XML. If you want to use CSV, do the following:

In the amline.html file, find this line:

so.addVariable("data_file", escape("amline/amline_data.xml"));

and change “amline_data.xml” to “amline_data.txt”.

Next, go to “amline” folder and open amline_settings.xml file with text editor. Find the line:

<data_type></data_type>

and type “csv”:

<data_type>csv</data_type>

If you are going to use custom CSV data separator, change it instead of “;” in the next line:

<csv_separator>;</csv_separator>

That’s it – now you are using CSV file for your data. Open file amline_data.txt, delete existing data and enter your own. If you keep your data in Excel, just save it as CSV file with the same name - amline_data.txt.

After you decided which of data format you will use, you can delete the unnecessarily file from amline folder.

The data file names, extensions can be changed, and you will probably do it if you are going to generate your data dynamically. If you change “amline” folder name or names of your settings and data files, do not forget to change paths and file names in amline.html file too.

To include chart to your own html page, copy all the lines between

<!– amcolumn script–>

…

<!– end of amcolumn script–>

from amline.html file to your html (or php or asp or any other file format you are using) in the place where your chart should appear.

To resize charts together with the window, you need to set height or width of your flash movie in percents. This is done in this line of html:

var so = new SWFObject("amline/amline.swf", "amline", "100%", "400", "8", "#FFFFFF");

This line says that width of your flash width will be equal to 100% of your window (table, div..) and height will be equal to 400 px. if you want your chart to resize together with a window, you have to set:

<redraw>true</redraw>

Note that if your legend, labels, and other objects have fixed X, Y and Width properties, they will not be changed.