Back to amCharts.com

Adding a chart to a page

The simplest way to include a chart on a page is to take the code from the amstock.html file. This file came in the package you downloaded.

  1. Copy the "amstock" folder with all of its contents to the location where your HTML (PHP, ASP…) file is.
  2. Open the amstock.html file in Notepad.
  3. Find the rows that say <!– amstock script–> and <!– end of amstock script –>.
  4. Select everything between these two bits of text.
  5. Copy the text to the Clipboard.
  6. Open your page with your editor.
  7. Paste the copied text into your web page, in the place where you want it to go.
  8. Save the file.
  9. Open your web page in your browser. You should now see the chart.

If you don't see the chart, but the text "You need to upgrade your Flash Player" appears instead, don't hurry to download a Flash player update. This text is also displayed if the page can't find the swfobject.js file. This means that you might have changed the name of the amline folder, or placed it somewhere different from the path included in the HTML code. Check this and try again.

Sample code

Here is a copy of the example code. If you haven't renamed any of the files or folders, you can simply copy this code into your web page.

<!-- amstock script-->
<script type="text/javascript" src="amstock/swfobject.js"></script>
<div id="flashcontent">
   <strong>You need to upgrade your Flash Player</strong>
</div>
 
<script type="text/javascript">
  // <![CDATA[		
  var so = new SWFObject("amstock/amstock.swf", "amstock", "800", "500", "8", "#FFFFFF");
  so.addVariable("path", "amstock/");
  so.addVariable("settings_file", escape("amstock/amstock_settings.xml"));
  so.addVariable("preloader_color", "#999999");
//so.addVariable("chart_settings", "");
//so.addVariable("additional_chart_settings", "");
//so.addVariable("loading_settings", "Loading settings");
//so.addVariable("error_loading_file", "ERROR LOADING FILE: ");
  so.write("flashcontent");
  // ]]>
</script>
<!-- end of amstock script -->// ]]>

The first part of the code creates the Flash object on the web page:

  var so = new SWFObject("amstock/amstock.swf", "amstock", "800", "500", "8", "#FFFFFF");
  • "amstock/amstock.swf" – the path to the SWF (Flash) file.
  • "amstock" – Flash object ID. Useful if you are using Javascript controls and there are multiple Flash objects on the page.
  • "800" – the width of the Flash object, in pixels. You can also use a percentage of the page width as a value, such as "100%"
  • "500" – the height of the Flash object, in pixels. You can also use a percentage of the page width as a value, such as "100%".
  • "8" – the version of the Flash player required to view the chart. If the viewer doesn’t have this version or newer, the browser will give them a link to download it.
  • "#FFFFFF" – the background color of the chart. You can set this in the settings file as well, but the color specified here will be shown until the settings file is loaded.

And here is what the other lines do:


so.addVariable("path", "amstock/");

This line tells the amstock.swf where it should look for all the additional files, such as data files or export as image files. Do not forget to add "/" at the end of this line.


so.addVariable("settings_file", escape("amstock/amstock_settings.xml"));

This line tells amstock.swf the name of a settings file. The chart can have more than one setting file.


Some of the following lines have two slashes at the front of them. This means that they are not used. If you want to use them, delete the slashes.


so.addVariable("chart_settings", "");

This line is used for including settings directly in the HTML file instead of loading them from an external file.


so.addVariable("additional_chart_settings", "");

This line is used for appending settings to the ones you loaded from a file or set with the chart_settings (the line above).


so.addVariable("loading_settings", "LOADING SETTINGS");

If you want to change the "Loading settings" text that is displayed while the settings are loaded, you can set your own text here.


so.addVariable("error_loading_file", "ERROR LOADING FILE: ");

If you want to change the the text displayed on the file load error, you can set your own text here.


so.addVariable("preloader_color", "#999999");

The loading bar and text of a loading message can be set here.


so.write("flashcontent");

This line tells swfobject.js to write to the script. Note that "flashcontent" must be the same as in this line (in the top part of the code): <div id="flashcontent"> In this example, "flashcontent" is an ID of your div, which should be unique for every chart on the same page. This ID can't start with a number.

Back to top