exuber.net

21 May

There are several chart framework that are open source or at least free out there. Some time a go I have a chance to use Open Flash Chart. This article will give some introduction on how to use Open Flash Chart.

A chart should show some data. Andy budd from clear left once said on his blog:

It’s important not to specialise at the expense of your other skills. Clients and agencies like well rounded people with a wide set of interests. Your skills should resemble an inverted T. Generally very broad but with one (or preferably more) areas of deep knowledge.

So just for fun I then have an idea to create an inverted T skill chart.

Step.1 Requirements
Open flash chart. Please download the package before proceeding.

Step.2 Setup
Once you have download the package, extract it. You will see some folder. For this tutorial we will use PHP so we only concern about the “php-ofc-library” folder (I will get into python in another post). We need to copy this folder to our application folder. My setup looks like this:

Step.3 Code
To get the chart running we basically need to do 2 things.
1. generate a set of data
2. invoke the flash object and supply it with correct parameter

So, first thing first, let us create the data, save this code into data.php

<?php
include_once 'php-ofc-library/open-flash-chart.php';
 
$skill_score = array( 1, 7, 7, 7, 9, 7, 6, 6, 1 );
$skill_name  = array( 'Ruby', 'HTML', 'Python', 'PHP', 'C/C++', 'CSS', 'XML', 'MySQL', 'PostgreSQL');
 
// create bar chart with 50% opacity, and set color to #0066CC
$bar = new bar( 50, '#0066CC' ); 
// set our data to skill score
$bar->data = $skill_score;
 
// create the graph
$g = new graph();
// set graph title and set some style
$g->title( 'Skill Chart', '{font-size: 12px;}' );
 
// set our graph data to $bar
$g->data_sets[] = $bar;
 
// set x legend title, size and color
$g->set_x_legend( 'Skills', 12, '#C11B01');
// set label style size, text color, orientation, label step,
$g->set_x_label_style( 10, '#000000', 0, 1 );
// set x labels to list of our skill name
$g->set_x_labels( $skill_name );
 
$g->set_y_min( 0 );
$g->set_y_max( 10 );
$g->y_label_steps( 10 );
 
// set y legend title, size and color
$g->set_y_legend( 'Score', 12, '#C11B01');
 
// generate the data
echo $g->render();
?>

That is it for the first part. If you open this file through browser, you will have something like:

&title=Skill+Chart,{font-size: 12px;}&
&x_legend=Skills,12,#C11B01&
&x_label_style=10,#000000,0,1&
&x_axis_steps=1&
&y_legend=Score,12,#C11B01&
&y_ticks=5,10,10&
&x_labels=Ruby,HTML,Python,PHP,C%2FC%2B%2B,CSS,XML,MySQL,PostgreSQL&
&y_min=0&
&y_max=10&
&bar=50,#0066CC&
&values=1,7,7,7,9,7,6,6,1&

You can see how the chart look like by opening directing your browser to: http://localhost/[your_folder]/open-flash-chart.swf?data=http://localhost/[your_folder]/data.php
You should have something like:

Now we need to create a way to feed the data into the flash. Edit the index.php and write:

<?php
include_once 'php-ofc-library/open_flash_chart_object.php';
// create the flash object
open_flash_chart_object( 500, // width of the flash object
                         500, // height of the flash object
                         'http://'. $_SERVER['SERVER_NAME'] .'/skill/data.php',  // point to data url
                         false, // do not use javascript
                         'http://'. $_SERVER['SERVER_NAME'] .'/skill' // base url
);
?>

You should notice that I do not use Javascript. I tried but whenever I set the Javascript parameter to true it won’t work.

And that is it we are done. Go to your browser and point to the index.php. You should have something like the previous picture except it does not take up the whole screen.

ExtJs and Open Flash Chart
For one of my projects, I need to embedd the chart into a ExtJs form. So I tought I might share how to do that as well.

Step 1. Requirement
Other than above requirement, you will of course need extjs. Download the library and extract it in the ‘\js’ directory.We also need a plugin. ExtJs community has come out with a flash plugin. I got the plugin from ExtJs forum. I can’t seem to find it anymore, and the plugin has no indication of the author. You can get my local copy here. Copy this file into ‘\js’ folder. So your ‘\js’ folder should have ‘extjs’ folder, ‘flashplugin.js’ file and our actual code ’skill.js’ file. Of course we haven’t type anything into the ’skill.js’ file.

Step 2. The code
Open the ’skill.js’ anf fill it with this code:

Ext.namespace('exuber');
 
exuber.skill = function(){
    var site_url = 'http://localhost/skill/'; // base url
 
    //public
    return {
        init : function() {
            // create chart panel
            skillChart = new Ext.Panel( {
                layout: 'fit',
                height: 300,
                width: 720,
                swf: site_url + 'open-flash-chart.swf',
                flashvars: {data: site_url+'data.php', height: 295, width: 650 }, // flash variable, data and dimensions
                plugins: new Ext.ux.FlashPlugin(), // use the plugin
                region:'north' });
 
            contact = new Ext.Panel({
                layout: 'fit',
                width: 720,
                region:'center',
                buttons: [{
                    text:'Like what you see ? Hire Me',
                    handler: function(){
                        Ext.MessageBox.alert('Thank you', 'Thank you for your interest.This is just an example though.');
                        }}]});
 
            //create window
            scoreWindow = new Ext.Window( { 
                draggable: false,
                width:728,
                layout: 'fit',
                title:'My Skill',
                closable:false,
                collapsible: false,
                resizable: false,
                plain:true
            });
 
            scoreWindow.add( skillChart );  
            scoreWindow.add( contact );  
            scoreWindow.show();			
        }
    }
}();

Also edit the ‘index.html’ with this code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>My skill</title>
    <link rel="stylesheet" type="text/css" href="js/ext2/resources/css/ext-all.css" />
    <script type="text/javascript" src="js/ext2/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="js/ext2/ext-all.js"></script>
    <script type="text/javascript" src="js/flashplugin.js"></script>
    <script type="text/javascript" src="js/skill.js"></script>
</head>
<body>
</body>
</html>

Done!! You should have something like:

With a bit of work you can make a better looking chart, for different kinds of data.
Here is what I made some time a go.

Of course there a lot more good-looking chart out there. Open Flash Chart is a good place to start.

These icons link to social bookmarking sites where readers can share and discover new web pages.

This entry was posted on Wednesday, May 21st, 2008 at 11:00 am and is filed under how-tos. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

5 Responses to “A bit of Open Flash Chart”

jenet Says:
May 22nd, 2008 at 5:01 am
thanks for the review.

just my 2 cents, Visifire a open source chart control is a good place to start for silverlight developers
Budi S Says:
May 25th, 2008 at 12:40 pm
This tutorial is great ..
Very usefull for beginner like me ..
I hope ,i can use this chart to make stock chart for my website …
Thx
Farid Says:
June 6th, 2008 at 4:52 am
Good tutorial.
hekk55 Says:
June 16th, 2008 at 6:55 am
hey guys “visifire”now supports silverlight 2 beta 2 an open source chart control with amazing animated charts
Richard Says:
July 5th, 2008 at 6:17 am
Hey I’m excited to see the python post. Keep up the great work.

Recent Posts

Blogroll

5 Responses to “A bit of Open Flash Chart”

Leave a Reply