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
1 2 3 4 5 |
add_action('admin_init','hello_charts_init'); function hello_charts_init() { wp_enqueue_script('hello_charts_initjson',plugins_url("json2.js",__FILE__)); wp_enqueue_script('hello_charts_initswfobejct',plugins_url("swfobject.js",__FILE__)); } |
Now lets include the open-flash-chart.php file in our plugin.
1 |
require dirname(__FILE__).'/php-ofc-library/open-flash-chart.php'; |
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.
1 2 3 4 |
add_action("admin_menu","hello_chart_menu"); function hello_chart_menu() { add_menu_page('Hello Chart','Hello Chart','manage_options','hellochart','disply_hello_chart'); } |
Now add a function disply_hello_chart as shown below
Method 1 for chart implementation
1 2 3 4 5 |
function disply_hello_chart(){ $graph_data = array(); for( $i=0; $i<9; $i++ ) $graph_data [] = rand(2,9); |
1 2 3 4 5 6 7 8 |
$bar_chart= new bar_value(5); $bar_chart->set_colour( '#900000' ); $bar_chart->set_tooltip( 'Hello<br>#val#' ); $graph_data [] = $bar_chart; $title = new title( date("D M d Y") ); $bar_chart = new bar_3d(); $bar_chart->set_values( $graph_data ); $bar_chart->colour = '#D54C78'; |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
$x_axis = new x_axis(); $x_axis->set_3d( 5 ); $x_axis->colour = '#909090'; $x_axis->set_labels( array(1,2,3,4,5,6,7,8,9,10) ); $ofc_chart = new open_flash_chart(); $ofc_chart->set_title( $title ); $ofc_chart->add_element( $bar_chart); $ofc_chart->set_x_axis( $x_axis ); ?> <div id="div_id_ofc"></div> <script type="text/javascript"> swfobject.embedSWF("<?php echo plugins_url("open-flash-chart.swf",__FILE__)?>", "div_id_ofc", "480", "280", "9.0.0"); var data = <?php echo $ofc_chart->toPrettyString(); ?>; function open_flash_chart_data() { return JSON.stringify(data); } function findSWF(movieName) { if (navigator.appName.indexOf("Microsoft")!= -1) { return window[movieName]; } else { return document[movieName]; } } </script> <?php } |
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
1 |
require dirname(__FILE__).'/php-ofc-library/open-flash-chart.php'; |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
$graph_data = array(); for( $i=0; $i<9; $i++ ) $graph_data [] = rand(2,9); $bar_chart= new bar_value(5); $bar_chart->set_colour( '#900000' ); $bar_chart->set_tooltip( 'Hello<br>#val#' ); $graph_data [] = $bar_chart; $title = new title( date("D M d Y") ); $bar_chart = new bar_3d(); $bar_chart->set_values( $graph_data ); $bar_chart->colour = '#D54C78'; $x_axis = new x_axis(); $x_axis->set_3d( 5 ); $x_axis->colour = '#909090'; $x_axis->set_labels( array(1,2,3,4,5,6,7,8,9,10) ); $ofc_chart = new open_flash_chart(); $ofc_chart->set_title( $title ); $ofc_chart->add_element( $bar_chart); $ofc_chart->set_x_axis( $x_axis ); echo $ofc_chart->toPrettyString(); die(0); |
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
1 2 |
function disply_hello_chart(){ ?> |
1 2 3 |
<div id="div_id_ofc"></div> <script type="text/javascript"> swfobject.embedSWF("<?php echo plugins_url("open-flash-chart.swf",__FILE__)?>", "div_id_ofc","550", "200", "9.0.0", "expressInstall.swf",{"data-file":"<?php echo plugin_dir_url(__FILE__)."/<strong>chart-results.php</strong>"?>"} ); |
1 2 3 |
</script> <?php } |
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
Leave a Reply