Charting the unknown

I wanted to be able to chart some simple survey responses, make it look good, and easy to regularly update as responses come in. With that “desired state” firmly in mind, I embarked on a journey, meeting many on-line mashables and chart generators difficult to integrate in Wordpress, and even coding some solutions underway. And all were just not good enough for my purpose. Running out of time I had set aside for this, I came across an open source tool, Fusion Charts, and I pulled it off in the nick of time. 1. Download a version of Fusion Charts. FusionCharts Free and FusionCharts v3 are two different products with entirely different licensing schemes. FusionCharts Free is completely free and covers all basic charting needs. FusionCharts v3 is a paid product with a wider variety of chart types and a host of advanced features. It is also free, as long as you don’t mind a small addition in your charts that the chart is made with Fusion Charts. I think my below solution for embedding graphs in a wordpress blogpost will work for v3 version as well. 2. Do not have to upload the whole shebang to your blogserver. Uploading only the relevant files works: FusionCharts.js from the JSClass directory, and the for you relevant .swf files in a Fusion Charts directory. You can re-use these .swf chart files for any number of charts on posts. I created a FusionCharts folder in a FusionCharts folder that contains all .swf files and the FusionCharts.js file. 3. The .swf files are linked with .xml files that provide the data for and configuration of the chart. FushionCharts provides this utility for generating .xml files. Use the “Convert to XML” button to get the data .xml. I created a folder MyFirstChart in my top FusionCharts folder to hold chart data, and uploaded Bar2D.swf. [caption id="attachment_431" align="aligncenter" width="520" caption="Manual"][/caption] [caption id="attachment_433" align="aligncenter" width="520" caption="From Spread Sheet"][/caption] [caption id="attachment_432" align="aligncenter" width="520" caption="Generated code"][/caption] 4. Now click the “Configure Chart” button to open the “Chart Properties” window. You can provide settings for your chart like caption, axis titles, design palette, etc. [caption id="attachment_435" align="aligncenter" width="520" caption="Configuring the chart"][/caption] 5. 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. I uploaded to the folder MyFirstChart in my top FusionCharts folder in the root of my wordpress installation. Mind capital sensitivity. 6. Put this string in your header file (Appearance -> Editor -> header.php)
Adapt path to the location of your FusionCharts.js file. 7. Copy-paste in your blogpost the code below and replace the paths with the locations where your .swf, .js and .xml files are located, and replace the names of the data files with the names of the data files you have uploaded.
7. If all went well, you now have a result like this. I. Love. It. Thank you, Fusion Charts, and @sanketnadhani for suggesting this path.