FusionCharts in your WordPress blog

I was searching for ways to implement FusionCharts within blogs and finally decided that WordPress would be the ideal place to do so.

Why FusionCharts?
As for FusionCharts, it is a flash-based charting component that allows you to render fully customizable and animated charts with the use of very few codes. More information can be found at their website https://www.fusioncharts.com/.

It is highly customizable and can be made to seamlessly integrate within almost any website or blog. FusionCharts component also has a free version that you might want to use in case you are ok with a bit less of eye-candy!

Getting started

To create a chart using FusionCharts in your blog post, you essentially need to upload the FusionCharts SWF and XML files and then just link the two.

Downloading the FusionCharts package

The first step would be to gather the requisite FusionCharts package from their website at https://www.fusioncharts.com/. I am using the FusionCharts v3 Evaluation version. However, there are more products like FusionWidgets and PowerCharts that might suit your needs. I suggest you browse through the chart gallery on their website and decide upon your product.

There is also a free version at https://www.fusioncharts.com/free/ that you might be interested in.

Uploading the relevant files to your blog server

After you have downloaded the FusionCharts package, you would need to upload the files onto your web-server using FTP or other feature that you use to upload files to your blog.

In case you are just stuck within WordPress, you can use the “Media Library” of WordPress to add the new FusionCharts files. But, do remember to take a note of the file URLs as you upload them. The file URLs generated by WordPress Media Library will have to be later used in your blog posts.

You do not need to upload a large number of files. Just uploading the SWF files for the charts you need and the FusionCharts.js file is all you need. Also, this is a one-time upload. You can re-use these SWF chart files for any number of charts on your blog.

Creating FusionCharts Data XML file

FusionCharts SWF files are linked with XML files that provide data and configuration of the chart.

Creating these XML files are easy and there is ample lot of documentation to guide you through. However, I found an online XML Generator Utility that makes it even easier to create these XML files.

Open https://www.fusioncharts.com/Demos/GUI/ and click on “I want to enter my data manually”. If you already your data in Excel, CSV or other tabular format, you may try the second option saying “I want to copy-paste my data…”

After you have entered your data in the tabular format (or copy-pasted), you should use the “Convert to XML” button to get the data XML. You should now click the “Configure Chart” button to open the “Chart Properties” window. Here, you can provide settings for your chart like caption, axis titles, design palette, etc.

After you have provided all your information and updated your XML, you can copy the XML to clipboard and paste it in a new file called data.xml (or any other file name of your choice).

Upload this file to your web-server as well. You might again use FTP or the WordPress Media Library.

Embedding FusionCharts in your blog post

At this point, you should have at least three files uploaded to your server with their URLs noted down.

You can simply copy-paste the code (in HTML view) that I have provided below and replace the path (/FusionCharts/) with the location where your SWF, JS and XML files are located.

<div id="chart1Container">Loading chart…</div>

<script src="/FusionCharts/FusionCharts.js" type="text/javascript"></script>

<script type="text/javascript"><!–

var myChartId = ‘chart1′;

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

var chartWidth = 320;

var chartHeight = 240;

var myChart = new FusionCharts(myChartSWF, myChartId, chartWidth, chartHeight);

myChart.setDataURL(’/FusionCharts/data.xml’);

myChart.render(’chart1Container’);

// –></script>

At this point, if you publish the page, you should see an SWF movie on your page showing your data.

If you wish to change the chart type (say from Column3D to Pie2D,) you should simply upload the SWF of the chart and replace myChartSWF with appropriate SWF filename.

You can modify the chartWidth and chartHeight variables in order to size the chart as per your requirements.

There are many other ways to customize your chart using the data XML we had just now created. You should look up their documentation at https://www.fusioncharts.com/docs/ for detailed list of all the XML attributes that work with FusionCharts.

You may include multiple charts in your page and for more information on how to do the same, refer to their documentation.

Finally

While embedding FusionCharts in blog posts, I found that we will face issues in two sections. The first hurdle is getting the SWF and JS files uploaded onto servers. After that, the next challenge is the WordPress TinyMCE WYSIWYG editor itself.

Although the first hurdle can be easily crossed by using FTP or WordPress’ own Media Library, the second hurdle is an issue that we will have to live with.

You may encounter a “Loading chart…” text within your page with nothing happening. This is generally caused when TinyMCE reformats the JavaScript 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.

Links:
Company: https://www.infosoftglobal.com/
Product: https://www.fusioncharts.com/

Source: https://www.shamasis.net/2009/03/fusioncharts-in-your-wordpress-blog/