Stop Censorship

HomeMaps and GraphsInteractive ToolsBuilding a Project Indicator Page with AmCharts Line Graphs

Building a Project Indicator Page with AmCharts Line Graphs

no3DThis 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
Filter file list: 
File name  
histogram
line
 

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.
  • Data and setting files are case sensitive. If you use "setting1.xml" in the html but the file on the server is "Setting1.xml", it will not work.
  • And for those interested in the code, here is an example:
  • {spic}
  • <!-- amcolumn script-->
    <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>
  • {/spic}
  • Comments
    Add New Search
    +/-
    Write comment
    Name:
    Email:
     
    Title:
     
    Please input the anti-spam code that you can read in the image.
     
    You may also be interested in the following tutorials