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.

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”.

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.

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.