FusionCharts On WordPress In 11 Easy Steps

Manually installing FusionCharts in your WordPress blog is extremely easy. One requires nothing more than copy-paste skills to create lovely animated charts in one’s WordPress blog using FusionCharts.

Here are eleven simple and direct steps that would make your WordPress blog (or any other blog) up and running with FusionCharts in minutes.

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.

10. Copy FusionCharts Codes

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

<p><script src="/assets/FusionCharts/FusionCharts.js" type="text/javascript"></script>
<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.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.

A word of caution: Going back to the Visual WYSIWYG Editor may cause your FusionCharts JavaScript codes to break. You will notice that “< ” getting converted to &lt; and “>” to &gt;. This is generally caused when TinyMCE (WordPress’ Visual Editor) reformats the codes that we had typed in. Make sure your final codes are same as we had provided above. You can verify that performing a “View Source” on your erring blog page.

Tips: To add more than one chart per post, simply copy the second <script> block and place it anywhere else in your page and provide new values for all the variables starting with “my”.

Sample Chart From The Above Script

Happy FusionCharting!

15 Replies to “FusionCharts On WordPress In 11 Easy Steps”

  1. To anyone who may be wondering, if you follow these steps they do work for WordPress. I tried many tutorials, and finally, this one is perfect. If you are using FusionChartsFree, there are some things that must be done differently (at least for me). Make sure to change the .swf file to FCF_Column3D.swf. You have to add FCF_ to all the free version’s .swf charts.
    Do NOT use the Free Online XML generator because it doesn’t work for the Free version anyway. Use the sample .xml files and work from there.
    This is what I had to change in the code above:
    In Line 1, Line 4, and Line 7 – Erase what is in between the quotes, and type your entire URL between the quotes. That is the way it worked for me. Example of line 4 – http://mydomain.com/FusionChartsFree/Charts/FCF_Column3D.swf

    That’s what I had to do, but I am running version 3.1, and this works beautifully! Thanks man!

  2. Well, it doesn’t work. I followe dteh process but you code shows 

    var myDataXML = ‘/wp-content/uploads/2009/03/data.xml’;


    var myChartSWF = ‘/assets/FusionCharts/Column3D.swf’;

    Is there an issue with that?

    1. Perhaps, you are having the issue that I specified as “a word of caution” in the article above. Check out whether WordPress’ Visual Editor is doing anything or not.

      You might also want to install the Raw HTML WordPress Plugin and put your codes within [raw]…[/raw] tag.

  3. Thanks for sharing.

    There’s an issue with your example code though: in your code example you use:

    var myDataXML = '/wp-content/uploads/2009/03/data.xml';

    Ofcourse this will never work, since you earlier state that all the XML files should be uploaded to a folder called “FusionChartsData”.


    1. That should not be a problem. Check the JavaScript network console to see if any path is incorrect and also check for error in console. If nothing is there, share the link where the chart is being rendered and I’ll have a look at it.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.