This is the second article in a series on building indicator pages for your Joomla website. Below are examples of interactive line graphs produced with AmCharts. Please see also our other tutorials on AmCharts in this section.
Please note that most graphs are animated like the one you see below. To see the animation of other graphs when they load into the page, you may have to scroll down to the graph and reload the page in the browser. The page will reload and you will see the animation (only for pages with multiple charts).
You need to upgrade your Flash Player
1: Auto resizing chart
You need to upgrade your Flash Player
2: Chart with data gaps
You need to upgrade your Flash Player
3: Chart with scroller
You need to upgrade your Flash Player
4: Data in html
You need to upgrade your Flash Player
5: Multiple Charts - Two charts with different settings and data sets
You need to upgrade your Flash Player
You need to upgrade your Flash Player
6: Stacked charts
You need to upgrade your Flash Player
7: Interactive chart with value indicator plugin
You need to upgrade your Flash Player
0: Interactive chart Current folder: Indidators info
A few things to remember:
- The path to the background image, if any, is set in the data file;
- Some graphs use xml and others txt for data - remember to refer to the right extension in the html;
- You only need one reference to the swfobject.js on a page;
- Do not forget to copy all the files from the amline folders such as the fonts and plugins and patterns, the shockwave flash file and export files;
- Rename each flashcontent file twice for each script;
- The background image path is set in the settings.xml - make sure you only refer to directory where the file is located../name subdirectory/name.jpg - a full path with http:// etc does not work;
- The plugin path is set in the settings.xml - make sure you only refer to directory where the file is located../name subdirectory/name.jpg - a full path with http:// etc does not work;
- The SWFs in graphs' path is set in the data.xml - make sure you only refer to directory where the file is located ../name subdirectory/name.jpg - a full path with http:// etc does not work.
<script type="text/javascript" src="http://www.test.developmentwork.net/jsmallfib_top/Indidators/line/swfobject.js"></script>
<div id="flashcontentl0">
<strong>You need to upgrade your Flash Player</strong>
</div>
<script type="text/javascript">
// <![CDATA[
var so = new SWFObject("http://www.test.developmentwork.net/jsmallfib_top/Indidators/line/amline.swf", "amcolumn1", "700", "400", "8", "#FFFFFF");
so.addVariable("path", "http://www.test.developmentwork.net/jsmallfib_top/Indidators/line/");
so.addVariable("settings_file", encodeURIComponent("http://www.test.developmentwork.net/jsmallfib_top/Indidators/line/amline_settings.xml"));
so.addVariable("data_file", encodeURIComponent("http://www.test.developmentwork.net/jsmallfib_top/Indidators/line/amline_data.xml"));
so.addVariable("preloader_color", "#999999");
so.write("flashcontentl0");
// ]]>
</script>


