Joomla Educational Website with Tutorials, Tips, Trips and Tricks www.test.developmentwork.net - Joomla Educational Website for Advanced Users
Interactive Tools
Using Interactive FlashCharts in Joomla
FlashCharts is a free, high quality framework for presenting interactive graphs on the web. The project was started by John Glazebrook http://teethgrinder.co.uk and is supported by a group of dedicated opensource developers. The team of FlashCharts has produced an extremely versatile and useful suite of interactive graphs. It all started when John needed interactive charts for a website:
Once upon a time I had to deal with a company who sell flash charting components, their component had a bug that I needed fixing, so I emailed them about it asking when it'd be fixed. (Remember that I had paid real money for this software.) They were so incompetent, rude and obnoxious that after three or four weeks of emails I thought to myself "I could learn Flash and Actionscript and write my own charting component, release it as Open Source, host it on sourceforge and build up a community of helpful coders faster than they can fix a single bug." And that is what I did. And that is why it is free. I guess the moral of the lesson is: don't piss off your customers.
John Glazebrook
Well, we are very pleased that the company disappointed him to such an extent that we now have FlashCharts. The framework could be a bit daunting to non-PhP enthusiasts when they want to use it on Joomla websites. This should not stop them (or you). Joachim Schmidt has developed a great plugin so everyone who can insert a plugin tag in an article can use FlashCharts on his/her Joomla site.
We tested the plugin documentation extensively and it is excellent. There are no typos in example tags, everything works directly out of the box and clear examples are provided that can be copied and pasted for instant gratification.
We are also impressed how fast the graphs load and that you can link them directly to Joomla databases. This is a great feature that enables you to do more with your databases.
We give this plugin and its developer 5 stars for building upon the powerful FlashCharts framework, acknowledging the exceptional work of the FlashChart developers, the first-rate documentation of the plugin and the ease of using the plugin.
Features include:
- The plugin is very easy to use
- You can embed one or more flashChart objects in one page (as we have done below)
- 11 different bar chart types (3d or 2d)
- 5 different line charts
- Pie chart
- 6 different animation types for charts (and no animation)
- 15 default attributes set by plugin Parameter
- All (24 are now supported) chart attributes can individually be set
- Data can be entered manually, or fed via file, via remote webserver or from Joomla!'s mysql database- this is especially remarkable (see as example the first graph that shows the most popular tutorials on on or website).
- German and Englisch language available
Below are a few examples of graphs, although the combinations are endless. We highly recommend that you check out the work of the developers.
Line Charts
Dotted Line Charts
Hollow Line Charts
Star Line Charts
Bow Line Charts
Bar Dome Charts
Bar Cylinder Charts
Bar Cylinder Outline Charts
Bar 3d Charts
Bar Glass Charts
Bar Round Charts
Bar Round 3d Charts
Bar Rounded Glass Charts
Bar Filled Charts
Bar Stack Charts
Bar Sketch Charts
Pie
Building a Project Indicator Page with AmCharts Histograms
Projects 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.
1: 3d stacked bar chart
2: 3D Stacked column chart
3: Auto-resizing chart
4: amcolumn with a background
5: Column and line chart mix
6: Floating chart
7: Histogram chart
8: Multiple Charts - Two charts with identical settings and different data sets
9: Patterns
10: Value Indicator Plugin
0: Animated chart [This line is replaced by a file repository when the article is viewed]
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.
Building a Project Indicator Page with AmCharts Line Graphs
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.
1: Auto resizing chart
2: Chart with data gaps
3: Chart with scroller
4: Data in html
5: Multiple Charts - Two charts with different settings and data sets
6: Stacked charts
7: Interactive chart with value indicator plugin
0: Interactive chart [This line is replaced by a file repository when the article is viewed]
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>
Hybrid Maps with Google Maps
In addition to AmMap, a useful plugin to generate maps combined with KMZ and KML files is the "Plugin Googlemaps" in the JED. This plug-in produces the well-known maps with the Google Map API. Below is an example of a map that contains a route that was recorded with a Garmin handheld GPS.
Interactive AmMaps in Joomla
Joomla has many plug-ins, modules and components that are based on the Google Map API. Although they are powerful and very useful, they often look pretty much the same and everyone with a map on their websites is using them. To make your site more special, we recommend that you use AmMap, an interactive flash map creation software package that is available for free.
You can use this tool to show locations of offices, vendors, projects, assignments, routes of your journeys, create your distributor map, etc. Photos or illustrations also can be used instead of maps to make different presentations, e-learning tools and much more.
We used to have YOS amMap: a Joomla extension which integrates almost all AmMap features, but the extension is no longer available in the JED. That should not be a problem. It is easy to use html codes in an article to create great maps once you know what paths to directories you should use.
So, let's go step by step through the process:
Step 1: Visit AmMap Site and download the latest version of AmMap (the package comes in a zip file).
Step 2: Unzip the file and place everything in a folder called ammap on the c-drive of your computer.
Step 3: Start your FTP program and upload the folder to the server where your Joomla is installed (most likely this is in the public_html folder and/or www folder).
Step 4: Log in Joomla as administrator and create a new article. Make sure you have the correct settings set for Joomla to insert html code in an article.
Step 5: Look at the html examples that come with the AmMap package. In the html files in the example, you find html code that you need to insert in your article. For example, the graph below is created by the html text that is included in the text box:
Step 6: For AmMap to work, you need to make sure the paths to the files are correct. In our example, the swobject.js, ammap_settings.xml and ammap_data.xml files are in the directory test/.../.../ on the server (please substitute ... with the names of the directories you us.
It is in the test directory since our website has test as its domain name. On a website without a subdomain, you place the /.../... directory in the public_html folder.
If your paths are not correct, you will get the following message: " You need to upgrade your Flash Player." So, keep on testing with the paths till the graph works.
Interactive AmCharts in Joomla
We recommend that you use AmChart, an interactive flash chart creation software package that is available for free and adds additional functionality to your website.
Using the Online AmCharts Editor
Using the free online editor for AmChart, the interactive flash chart creation software package, you can simplify the development process of creating graphs on your Joomla website.
AmChart requires that you have some knowledge about inserting text in an XML file, inserting some code in a Joomla article and using FTP to transfer files to your server. You can read more about inserting AmChart graphs in your Joomla website in this tutorial.
You can visit the AmChart Site to check out this stunning online application which makes the development of AmChart graphs so much easier if you do not want to play XML files.