Maps and 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 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>
Typography
Note-its, developed by N-System, is a great extension to make your site special. We tested it in Explorer 8, Firefox and Chrome. It works out of the box. No conflicts with other extensions, easy to install and to implement. The developer has added more color pins.
Just a Note
To see Joomla in action, please visit our personal website.
You can add as much text as you like.
The width has been set to 250 and the badge type is Tape and the font is Parne.
It is an excellent module. In our review in the JED, we give it five stars because it is innovative, builds upon the great work by an original developer and we really like the concept. You can now also include Urls in the note.
Settings
Setting up a Joomla website is not as time consuming as many people think. Based on our experience, we have developed a checklist to install and develop a new website for clients.
As a minimum, below is the check list we follow whenever we install a new Joomla website. Depending on the functionality of the site, we install additional components, plugins and modules:
Photography/Galleries
To show your Joomla website to others in forums, on twitter, etc., it is useful to make a screen shot of the site. The problem is that if you use "Print Screen" or the "Snipping Tool" that comes with Windows Vista, you only copy what you see on the screen, not the entire website.
Using a Firefox plugin called "Fireshot", you can easily create a print screen of the entire website. Fireshot also gives you editing and annotation tools and you can save a screen shot in PNG (preferred), GIF, JPEG and BMP.
Below you see two examples of a screen shot of a Joomla website, one with the Snipping Tool and one with the Fireshot plugin.
A screen shot using Snipping Tool - you can only capture what you see on the screen
A screen shot capturing the entire website using Fireshot
The Fireshot plugin is available in the extensions repository of Firefox.
Search Engine Optimization
If you are interested in placing advertisements on your Joomla site, we do recommend you use Google's Adsense Tools directly and stay away from extensions that provide adsense capability.
Step 1: Register with Google Adsense. It is for free and within a day or so you will normally get Google's approval to participate in the plan.
Step 2: Using Adsense Setup, manage ads and get an ad.
Step 3: In the custom html module, you insert your Adsense code for the add. Make sure the editor does not strip the code. Choose the position of the module.
Step 4: If you want, you can change the color of links, the border etc. using the manage my ads. We made it red for this website to keep the colors under control.
Data Recovery
You may have noticed that we are using a subdomain for our site: www.test.developmentwork.net. We initially used it to test extensions.
Well, these days are over since the site has become a production site. We have set up another subdomain for tests and also have set up a Joomla site on our home computer using WAMP to test extensions and scripts.