Stop Censorship

HomeMaps and GraphsInteractive ToolsBuilding a Project Indicator Page with AmCharts Histograms

Building a Project Indicator Page with AmCharts Histograms

styleProjects and organizations often need to report to clients on progress indicators as part of the Monitoring and Evaluation (M&E) requirements. Amchart is an excellent tool to include an indicator page in your Joomla empowered website. Below is a list of graphs provided by Amchart, each with their individual xml data and settings files. The data files can be easily maintained by field staff. We also added an upload facility so data files can be uploaded for each graph individually by authorized users - this is especially useful when data needs to be updated and FTP is not an appropriate method.

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: 3d stacked bar chart

You need to upgrade your Flash Player

2: 3D Stacked column chart

You need to upgrade your Flash Player

3: Auto-resizing chart

You need to upgrade your Flash Player

4: amcolumn with a background

You need to upgrade your Flash Player

5: Column and line chart mix

You need to upgrade your Flash Player

6: Floating chart

You need to upgrade your Flash Player

7: Histogram chart

You need to upgrade your Flash Player

8: Multiple Charts - Two charts with identical settings and different data sets

You need to upgrade your Flash Player
You need to upgrade your Flash Player

9: Patterns

You need to upgrade your Flash Player

10: Value Indicator Plugin

You need to upgrade your Flash Player

0: Animated 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 amcolumn 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 entire code:

  • 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