North Yorkshire Scarborough Website Design UK

Animated Charts for WordPress

FusionCharts Running in Minutes for Free
Posted on 10/11/11 View Comments

Completely FREE and Open-Source charting component for your WordPress Website’s, create animated Flash charts that give your WordPress installs the wow factor. This Free version should cover all your basic charting needs with 22 popular charts, Column, Line, Pie, Bar, Area, Stacked, Candlestick & Funnel charts, these are compatible across all browsers. FusionCharts Free pull the data from XML files or you can integrate them with any MySQL Database with a little PHP & MySQL know how.

Example Chart Using Sample Data & 3D Column Chart.


Step One: Go Download the FusionCharts Free Package Here.
http://www.fusioncharts.com/free/download/

Step Two: Extract The Downloaded Zip Archive Onto Your Desktop.
Extract the files form the Zip Archive leaving the folder names the same, this will make it easier to follow the next steps.

Step Three: Upload the Fusion Chart Files to Your Website Server.
You know need to upload the extracted files to the
Root of your Website, hopefully you already know about FTP, as this is by far the easiest method, if not please consult your hosting provider to find out how to upload these files to your Website Server Root. The Root Folder is just the folder that contains your full Website files and your index file.

After uploading you can check to see if everything is OK by pointing your browser at http://yourdomain.com/FusionChartsFree/ you should see the Fusion Charts Documentation appear proving that everything so far has gone to plan. We recommend making a note of the main folders needed for your installation to work, if you have kept everything named the same as recommended above, the folders will be:-

Charts - http://yourdomain.com/FusionChartsFree/Charts/
Sample Data Files - http://yourdomain.com/FusionChartsFree/Gallery/Data/
The Main JavaScript File - http://yourdomain.com/FusionChartsFree/JSClass/

Step Four: Create Your Own Data Folder.
You now need to create a data folder for your FusionCharts data files to be stored, create a new folder in the root of your Website and name this folder "FusionChartsData", this is where you’ll store your later project data files so that they are easy to find.

You now have everything ready to get your new FusionCharts up and running on your WordPress Website.

Step Five: Create a New WordPress Blog Post or Page.
Login into your WordPress Administration Area and create a new post or page, then go to the HTML mode of the WYSIWYG editor, this is on top of were you normally write your posts etc….

Step Six: Copy & Paste or Type The Following Code-Block into Your New Post:-

<div id="chartdiv" align="center"></div>
<script language="JavaScript" src="http://www.YourDomain.com/FusionChartsFree/JSClass/FusionCharts.js"></script>
<script type="text/javascript">
var chart = new FusionCharts("http://www.YourDomain.com/FusionChartsFree/Charts/FCF_Column3D.swf", "ChartId", "600", "350");
chart.setDataURL("http://www.YourDomain.com/FusionChartsFree/Gallery/Data/Column3D.xml");
chart.render("chartdiv");
</script>

Step Seven: Set Up the Codes to Make Things Work.
After pasting the code into your post you will need to change the parts marked in Red to your own Domain Name and then publish your post and preview your results, you should see a copy of the chart as shown above.

Step Eight: Now Create Charts from Your Own Data.
We recommend looking at the sample XML files stored in the sample directory of your extracted archive, FusionChartsFree/Gallery/Data/ you will then learn how the XML files are put together, you can then change the data contained in the samples as needed for your own projects thus creating you own unique charts.

Step Nine: Alter the Code Above to Point to New Charts and Data.
After playing with the sample data files and you have created your own custom version, upload the new file to the Folder created earlier "FusionChartsData", then alter the following line of code to include your new data file:- chart.setDataURL("http://www.YourDomain.com/FusionChartsFree/Gallery/Data/YourDataFile.xml"); If you wish to change your FusionChart type just change the following line of code and point it to a new chart listed in your charts directory as detailed above:-
var chart = new FusionCharts("http://www.YourDomain.com/FusionChartsFree/Charts/FCF_Line.swf", "ChartId", "600", "350");

Important Note: the WordPress WYSIWYG Editor may cause your code to not function correctly, symbols often get converted to HTML code, for example "<" becomes "&lt;". To solve any issues preview your new post in your browser and use the Browsers "View Source" to make sure that the code is exactly the same as entered when you included it in your post, make any necessary changes and try again. If you still have issues, you might try installing the Raw HTML WordPress Plugin and put your FusionChart codes within the [raw]…[/raw] tag.