amCharts & amMap blog

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.

This entry was posted on Thursday, March 15th, 2007 at 1:48 pm and is filed under amCharts. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.