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:

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!

  • Pingback: FusionCharts in your WordPress blog

  • http://www.techfeedr.com/blog/ sudhir

    thats great..thanks for the info

  • http://www.smartsolutionscenter.com A.Hariri

    Great post.
    Thanks a lot for sharing these steps!

  • http://www.peterkoenen.nl Peter

    I really like it when people just tell how things work. Perfect and quick installation guide! Now I can make some nice graphs, thanks : )

  • settleduncle

    Thanks it worked like a pie! Great explanation

    • http://www.shamasis.net/ Shamasis Bhattacharya

      You are welcome. :)

  • LaneKidd

    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!

  • Im08b009

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

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

    and

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

    Is there an issue with that?

    • http://www.shamasis.net Shamasis Bhattacharya

      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.

  • Ajmal

    Hmm… It doesnt semm to work.. any other plugin method available?

  • Miroslavlichy

    Hellou, i cant insert to wordpress, can u help me?

  • TiborP

    Thanks for sharing.

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

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

    Cheers.

    • http://www.shamasis.net Shamasis Bhattacharya

      You are right. The code I uploaded was with respect to XML uploaded via WordPress Media Gallery. Will correct it ASAP. Thanks.

  • Jim

    I installed it into the root folder, and…nothing. It did not appear.
    I also have WP installed into root. Would this be a problem?

    • http://www.shamasis.net Shamasis Bhattacharya

      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.