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/.
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
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:
- 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.
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