AmCharts is a set of tools that lets you have good-looking and functional charts on your website. The tools use Adobe Flash technology for a compelling online experience. The charts can be simple and very quick to create, but they can also be elaborate and beautiful. You can display charts in any HTML page (web page), or inside another Flash movie. You can also use the charts in PowerPoint presentations.

To start, download the charts. Save the ZIP files to your hard drive, then use WinZIP (or your favourite archive software) to extract the contents into a new folder.

Adding charts to a web page is done by manually inserting an HTML code snippet in the right place. Most content management systems, blog engines, etc. have a way for you to paste HTML code into the page. If you are not using a content management system, you probably know enough about HTML to have no problem with adding the code snippet.

You don't need any special tools to work with the charts, but we recommend that you download and install PSPad for Windows or Smultron for Mac OS X. They are free and convenient. You can use Notepad instead, though. To keep things simple, these help files will just refer to Notepad - you can use PSPad or your favourite plaintext editor instead of it in all cases.

You will also need a web browser. Visitors to your website will need the Adobe Flash Player 8 (or later) to view the charts. Almost everyone has it.

PLEASE NOTE: Most of the file and folder names in this tutorial refer to the contents of the distribution package. This allows you to set up a chart quickly. You can rename every file and folder, as long as you edit the HTML code accordingly.

When you extract the ZIP file, you will notice that there are a lot of files and folders there. Most of these are optional, examples you can use to quickly build an elaborate chart.

For example, let's take pie chart. After extracting the ZIP contents to a folder, go inside this folder, and open ampie.html file in your browser by doubleclicking on it. You will see this pie chart:

Go to the ampie folder and open ampie_data.xml with your text editor. You will see this code:

<?xml version="1.0" encoding="UTF-8"?>
<pie>
  <!--  <message bg_color="#CCBB00" text_color="#FFFFFF">
<![CDATA[You can broadcast any message to chart from data XML file]]></message> -->
  <slice title="Twice a day" pull_out="true">358</slice>
  <slice title="Once a day">258</slice>
  <slice title="Once a week">154</slice>
  <slice title="Never" url="http://www.interactivemaps.org" description="Click on the slice to find more information" alpha="50">114</slice>
</pie>

Don't pay atention to the first line after the <pie>, this will be discussed in the article about broadcasting messages from a data file. For now, you can delete this line.

As you see, we have 4 slices in your pie, and there are 4 lines starting with "<slice …" in your data file. Let's delete the last one, with the title "Never". Also, let's change all the numbers to 50:

<pie>
  <slice title="Twice a day" pull_out="true">50</slice>
  <slice title="Once a day">50</slice>
  <slice title="Once a week">50</slice>
</pie>

Save the changes, and go to your browser with ampie.html opened. Refresh the page, and here is what you should see now:

As you understood, the data is held in an external file. And you can easily change it.

Now, open the file ampie_settings.xml from the ampie folder with your text editor. You will see lots of XML tags with comments next to them. These are settings that control the look of the chart. Locate the <inner_radius> setting and enter 30 between the tags:

<inner_radius>30</inner_radius>

Save the changes, reload the page, and here is what you should get now:

As you see, there is a hole in your pie chart, and now it may be called a donut chart.

All the chart packages contain several examples that illustrate how the charts can look. You can view the examples by opening the HTML files in the examples folder. If you like one of them, you can use the data and settings files of the example to achieve your purpose more quickly. Simply overwrite the data and settings files in the ampie/ folder with the files from the examples folder. You might also need to change the file name in your HTML file. Some of the examples use additional files that must also be copied.

To summarize, the files that are involved in displaying this chart are:

• ampie.html - embeds ampie/ampie.swf file into a web page. Chart size, the names of data and settings files and some other properties are set in this file.
• swfobject.js - is a widely-used SWFObject script that makes embedding a Flash object into a web page more convenient. You can also embed Flash in your page without swfobject.
• ampie.swf - the Flash file that displays the chart
• ampie_data.xml - the data file
• ampie_settings.xml - the settings file

All the other files in the package are optional. You will learn about them in the other help articles.

After you modify the data and settings files so that the chart looks like you want, you will need to upload the files to your web server. The contents must be placed in an online folder, so all the files inside can be accessed by a browser. The recommended place is the same folder where your web page is; or if you will be using the same chart in multiple pages, the main folder of your web server.