1 ➤

Download FusionCharts package

Go to http://www.fusioncharts.com/download/ and download your copy of FusionCharts v3 evaluation version. If you are already a FusionCharts customer, download the latest copy of FusionCharts from their PUC: http://www.fusioncharts.com/puc/.

In case you are interested in trying out FusionCharts Free, download the latest FusionCharts Free from http://www.fusioncharts.com/free/download/.

2 ➤

Prepare files for upload

After you have the FusionCharts download archive ready, you would need to extract its contents on your computer.

Extract the entire FusionCharts zipped archive onto your desktop.

3 ➤

Login to your web-server

FTP is the most likely way that you would connect to your hosting server. Use your favourite FTP client (like FileZilla) and login to your web-server using the username and password that had been provided to you by your hosting service provider.

(If you do not have FTP access, things might get slightly difficult and tedious. You would then need to upload limited files using WordPress’ Gallery.)

4 ➤

Navigate to server root

Go to your server’s root folder from where your domains home page is served. (This is the folder that is directly opened when you type http://yourdomain.com/.)

This may vary from server to server. In general, it is either named as “/yourdomain/httpdocs”, “httpdocs”, “wwwroot” or simply “/”. If you are unsure, try contacting your hosting-provider.

5 ➤

Upload files

Upload the extracted “FusionCharts” (or “FusionChartsFree”) folder to your serve root. After uploading, your folder-structure should appear such as the FusionCharts SWF files are located at “/FusionCharts/Charts” and the JavaScript files are located at “/FusionCharts/JSClass”.

You would primarily require the “Charts” and “JSClass” folder, so if you are on a limited internet bandwidth, you may choose to skip uploading the rest of the files.

As a verification, you may type http://yourdomain.com/FusionCharts/ (or http://yourdomain.com/FusionChartsFree/) in your favourite browser and you should see the FusionCharts documentation page.

6 ➤

Create your FusionCharts data folder

Create another folder in your server-root and name it as “FusionChartsData”. This is where we will store our FusionCharts data XML files.

At this point, your FusionCharts installation is complete. Next on, we would concentrate on creating our XML data files.

7 ➤

Generate FusionCharts XML data file

Generate a FusionCharts Data-XML using the XML-Generator (http://www.fusioncharts.com/Demos/GUI/Index.html). Copy the generated data into clipboard and paste it in a new instance of your favourite text-editor.

(Alternatively, you can copy your data files from a number of sample data files located in “Gallery/Data/” folder inside your FusionCharts Package that you had earlier extracted.)

Save this file on your local computer (perhaps on your Windows/Linux desktop) as “data1.xml”

8 ➤

Upload the XML data file

Upload this data1.xml file to your FTP server to the newly created folder named “FusionChartsData”, which we had created in step 6 above.

At this point, you have all your files that you need to get FusionCharts running in your WordPress posts. Our next step is to link the data and a chart within a new post.

9 ➤

Create a new blog post

Create a new blog post and go to the HTML-Edit mode of your WordPress WYSIWYG editor. You can obviously edit any of your existing blog posts to do this too.

10 ➤

Copy FusionCharts codes

Copy-paste the following code-block in your new post:

<p>/assets/FusionCharts/FusionCharts.js
<script type="text/javascript">// <![CDATA[
var myChartId = 'chart1';
var myChartSWF = '/assets/FusionCharts/Column3D.swf';
var myChartWidth = '500';
var myChartHeight = '240';
var myDataXML = '/wp-content/uploads/2009/03/data.xml';
document.write('<span id="' + myChartId + 'container">')
var chartObj = new FusionCharts(myChartSWF, myChartId, myChartWidth, myChartHeight);
chartObj.setDataURL(myDataXML);
chartObj.render(myChartId + 'container'); // ]]></script></p>

11 ➤

Publish your post

Hit the publish or preview button and see your FusionCharts come to life within your own WordPress blog.