Using open flash charts in wordpress plugins

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

Using Open Flash charts with wordpress

Add admin_init action as shown below to enqueue the js files

    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__));
    }

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.

require dirname(__FILE__).'/php-ofc-library/open-flash-chart.php';

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.

add_action("admin_menu","hello_chart_menu");
function hello_chart_menu() {
        add_menu_page('Hello Chart','Hello Chart','manage_options','hellochart','disply_hello_chart');
}

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

function disply_hello_chart(){
$graph_data = array();

   for( $i=0; $i<9; $i++ )
          $graph_data [] = rand(2,9);

function disply_hello_chart(){

$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';

$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 );
   ?>
    <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
}

$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 );

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

            require dirname(__FILE__).'/php-ofc-library/open-flash-chart.php';

1	require dirname(__FILE__).'/php-ofc-library/open-flash-chart.php';

            $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);

$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

function disply_hello_chart(){
   ?>

1 2	function disply_hello_chart(){ ?>

    <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>"?>"} );

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>"?>"} );

    </script>
   <?php
}

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

Using open flash charts in wordpress plugins

Method 1 for chart implementation

Method 2 utilizing another php file

Related

Leave a Reply Cancel reply

Sponsored Links

Ads

Subscribe to my Blog via Email

Connect

Categories

Ads

Disclaimer

Recent Comments

Software by me {shop now}

My Other Sites

Using open flash charts in wordpress plugins

Method 1 for chart implementation

Method 2 utilizing another php file

Share this post with your friends

Related

Leave a Reply Cancel reply

Sponsored Links

Ads

Subscribe to my Blog via Email

Connect

Categories

Ads

Disclaimer

Recent Comments

Software by me {shop now}

My Other Sites