Adding the Chart to a Page
The simplest way to add an amPie chart to your Web page is to take the code from the ampie.html file. This file came in the package you downloaded and extracted.
- Open the ampie.html file in Notepad.
- Find the rows that say <!-- ampie script--> and <!-- end of ampie script -->.
- Select everything between these two bits of text.
- Copy the text to the Clipboard.
- Paste the copied text into your web page, in the place where you want it to go.
- If you are using a content management system or a blog engine, find the place where the chart must go and place the cursor there. Then switch into the HTML/source editing mode. Paste the copied code. (There may also be a way to embed HTML code without editing the source of the page. If you get stuck, see the help file for your content management system.)
- If you are editing the page manually, open the page file in Notepad. Find the place where the chart will go and paste the code snippet.
- Save the page. Open the page in a Web browser to see the result. Adjust the position of the code snippet as necessary.
PLEASE NOTE: It is easy to accidentally mess things up when editing an HTML file directly. Always back up your files before editing them.
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. You can delete anything starting with //, as it is disregarded by the software anyway. Some of the code is disabled in this way as well - delete the // to make the software use that code.
<!-- ampie script-->
<script type="text/javascript" src="ampie/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("ampie/ampie.swf", "ampie", "520", "400", "8", "#FFFFFF");
so.addVariable("path", "ampie/");
so.addVariable("settings_file", escape("ampie/ampie_settings.xml")); // you can set two or more different settings files here (separated by commas)
so.addVariable("data_file", escape("ampie/ampie_data.xml"));
// so.addVariable("chart_data", ""); // you can pass chart data as a string directly from this file
// so.addVariable("chart_settings", ""); // you can pass chart settings as a string directly from this file
// so.addVariable("additional_chart_settings", "<settings></settings>"); // you append some chart settings to the loaded ones
// so.addVariable("loading_settings", "LOADING SETTINGS"); // you can set custom "loading settings" text here
// so.addVariable("loading_data", "LOADING DATA"); // you can set custom "loading data" text here
so.addVariable("preloader_color", "#999999");
so.write("flashcontent");
// ]]>
</script>
<!-- end of ampie script -->
The first part of the code creates the Flash object on the web page:
var so = new SWFObject("ampie/ampie.swf", "ampie", "520", "400", "8", "#FFFFFF");
- “ampie/ampie.swf” – the path to the SWF (Flash) file.
- “ampie” – Flash object ID. Useful if you are using Javascript controls and there are multiple Flash objects on the page.
- “520” – the width of the Flash object, in pixels. You can also use a percentage of the page width as a value, such as “50%”
- “400” – the height of the Flash object, in pixels. You can also use a percentage of the page width as a value, such as “40%”.
- “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 offer them 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.
The other parts of the code will be explained in detail in further chapters.
Multiple Charts on a Page
You can have several charts on the same page. For this to work properly, you need to change two lines of the HTML code snippet:
<div id="flashcontent">
...
These must have a unique value for each chart on a page. The value must be the same in both lines of the same code snippet. So, the first chart on a page can have the value flashcontent1, the second chart can be flashcontent2, etc.
so.write("flashcontent");