Using open flash charts in wordpress plugins

• Tweet

• Tweet

Hi Guys,

Open flash charts by John Glazebrook. His charts tool is highly customizable solution and is very potent in what you can achieve.

Today I am gonna show you how you can use OFC2 within a WordPress Plugin.

There are two ways I am going to show you of using OFC2. First feeding the JSON string directly to the Chart Processor SWF and second feeding JSON through URL to the Chart processor SWF.

Ok so lets write a “Hello Charts” Plugin

But first I assume that you have downloaded Open flash charts from the above link and have extracted it somewhere

Create a directory called hello-chart under your /wp-content/plugins folder and create a file called hello-chart.php

So the final path will look like this

/wp-content/plugins/hello-chart/hello-chart.php

From the extracted OFC archive copy folder php-ofc-library to hello-chart folder to the path for OFC looks like this

/wp-content/plugins/hello-chart/php-ofc-library

Make sure that from the OFC archive you’ve copied open-flash-chart.swf, json2.js and swfobject.js to your hello-chart folder. I am not creating subfolders to keep things simple.

So the final file system will look like this

 

Add admin_init action as shown below to enqueue  the js files

Now lets include the open-flash-chart.php file in our plugin.

Lets add a Navigation Menu page for an admin to view our chart. My only intention is to show you how OFC is done, there are many ways you may want to use OFC.

Now add a function disply_hello_chart as shown below

Method 1 for chart implementation

Advertisement

 

The above code has been taken from OFC’s website. But you get the idea. Now when an administrator click on  “Hello Chart” navigation then a bar chart with random values will be displayed.

Now the above example shows how we feed $ofc_chart->toPrettyString(); to a javascript datavariable and how OFC automatically retrieves that data from function open_flash_chart_data in JSON format.

Method 2 utilizing another php file

Create another php file called chart-results.php in the same folder as shown below. Now you may want to include wp-config.php so that $wpdb is available to you

Add the following code your chart-results.php file

Same sort of chart creation logic but here we are echoing the JSON data and killing the function.

Now lets change our disply_hello_chart function as shown below

 

Ans that’s pretty much it.

 

If you would like for me to make the example plugin available please let me know through comments.

The above stuff is pretty straight forward anyway.

I hope this helps

Cheers,

 

Advertisement