My favorites | Sign in
Project Home Downloads Wiki Issues
Search
for
Tutorial  
Short tutorial on how to use the Python libraries with Open Flash Chart
Featured
Updated Jan 27, 2012 by kinche...@gmail.com

Introduction

This tutorial will show you the differences and similarities of creating the required data string between the PHP and Python libraries. The PHP libraries are used on the official Open Flash Chart website for the examples.

Version 1.9.7 of Open Flash Chart

A very short description of the Python library used is found here: VersionOne

We will see how you would make a simple chart with three different lines as per example here (without the randomness): http://teethgrinder.co.uk/open-flash-chart/gallery-data.php

PHP

<?php

// create data arrays
$data_1 = array(19,17,19,19,17,19,17,17,14,14,17,16);
$data_2 = array(12,10,8,10,13,9,8,10,8,10,10,8);
$data_3 = array(7,6,2,6,6,4,3,2,5,4,2,5);

include_once( 'ofc-library/open-flash-chart.php' );
$g = new graph();
$g->title( 'Many data lines', '{font-size: 20px; color: #736AFF}' );

// we add 3 sets of data:
$g->set_data( $data_1 );
$g->set_data( $data_2 );
$g->set_data( $data_3 );

// we add the 3 line types and key labels
$g->line( 2, '0x9933CC', 'Page views', 10 );
$g->line_dot( 3, 5, '0xCC3399', 'Downloads', 10);    // <-- 3px thick + dots
$g->line_hollow( 2, 4, '0x80a033', 'Bounces', 10 );

$g->set_x_labels( array( 'January','February','March','April','May','June','July',
                         'August','Spetember','October','November','December' ) );
$g->set_x_label_style( 10, '0x000000', 0, 2 );

$g->set_y_max( 20 );
$g->y_label_steps( 4 );
$g->set_y_legend( 'Open Flash Chart', 12, '#736AFF' );

echo $g->render();

?>

Python

from	OpenFlashChart import *		# Flash based charting library

def line_demo(self):            # 'self' required if function is defined in a class.

  # create data arrays
  data_1 = [19,17,19,19,17,19,17,17,14,14,17,16]
  data_2 = [12,10,8,10,13,9,8,10,8,10,10,8]
  data_3 = [7,6,2,6,6,4,3,2,5,4,2,5]

  g = graph()
  g.title( 'Many data lines', '{font-size: 20px; color: #736AFF}' )

  # we add 3 sets of data:
  g.set_data( data_1 )
  g.set_data( data_2 )
  g.set_data( data_3 )

  # we add the 3 line types and key labels
  g.line( 2, '0x9933CC', 'Page views', 10 )
  g.line_dot( 3, 5, '0xCC3399', 'Downloads', 10)    # <-- 3px thick + dots
  g.line_hollow( 2, 4, '0x80a033', 'Bounces', 10 )

  g.set_x_labels( ['January,February,March,April,May,June,July,' +
                   'August,Spetember,October,November,December'] )
  g.set_x_label_style( 10, '0x000000', 0, 2 )

  g.set_y_max( 20 )
  g.y_label_steps( 4 )
  g.set_y_legend( 'Open Flash Chart', 12, '#736AFF' )
		
  return g.render()

The Python library is missing features to customise the tooltip, adding links to charts other than pies, and possibly other decorative features that I cannot remember right now.

Version 2 (Hyperion) of Open Flash Chart

A very short description of the Python library used is found here: VersionTwoOld

We will see how you would make a simple chart with three different lines as per example here (without the randomness): http://teethgrinder.co.uk/open-flash-chart-2/data-lines-2.php

PHP

<?php

include '../php-ofc-library/open-flash-chart.php';

// create data arrays
$data_1 = array(19,17,19,19,17,19,17,17,14,14,17,16);
$data_2 = array(12,10,8,10,13,9,8,10,8,10,10,8);
$data_3 = array(7,6,2,6,6,4,3,2,5,4,2,5);

$line_dot = new line_dot();
$line_dot->set_width( 4 );
$line_dot->set_colour( '#DFC329' );
$line_dot->set_dot_size( 5 );
$line_dot->set_values( $data_1 );
$line_dot->set_key( "Line 1", 10 );

$line_hollow = new line_hollow();
$line_hollow->set_width( 1 );
$line_hollow->set_colour( '#6363AC' );
$line_hollow->set_dot_size( 5 );
$line_hollow->set_values( $data_2 );
$line_hollow->set_key( "Line 2", 10 );

$line = new line();
$line->set_width( 1 );
$line->set_colour( '#5E4725' );
$line->set_dot_size( 5 );
$line->set_values( $data_3 );
$line->set_key( "Line 3", 10 );

$y = new y_axis();
$y->set_range( 0, 20, 5 ); 

$chart = new open_flash_chart();
$chart->set_title( new title( 'Three lines example' ) );
$chart->set_y_axis( $y );
//
// here we add our data sets to the chart:
//
$chart->add_element( $line_dot );
$chart->add_element( $line_hollow );
$chart->add_element( $line );

echo $chart->toPrettyString();

Python

import	math
import	openFlashChart
from	openFlashChart_varieties import ( Line,
                                          Line_Dot,
                                          Line_Hollow )

def line(self):            # 'self' required if function is defined in a class.

  # create data arrays
  data_1 = [19,17,19,19,17,19,17,17,14,14,17,16]
  data_2 = [12,10,8,10,13,9,8,10,8,10,10,8]
  data_3 = [7,6,2,6,6,4,3,2,5,4,2,5]

  plot1 = Line_Dot( text = "Line 1", fontsize = 10, colour = '#DFC329', values = data_1 )
  plot1.set_width( 4 )
# plot1.set_colour( '#DFC329' )
  plot1.set_dot_size( 5 )

  plot2 = Line_Hollow( text = "Line 2", fontsize = 10, colour = '#6363AC', values = data_2 )
  plot2.set_width( 1 )
# plot2.set_colour( '#6363AC' )
  plot2.set_dot_size( 5 )

  plot3 = Line( text = "Line 3", fontsize = 10, colour = '#5E4725', values = data_3 )
  plot3.set_width( 1 )
# plot3.set_colour( '#5E4725' )
  plot3.set_dot_size( 5 )

  chart = openFlashChart.template( 'Three lines example' )
  chart.set_y_axis(min = 0, max = 20, steps = 5)
  #
  # here we add our data sets to the chart:
  #
  chart.add_element( plot1 )
  chart.add_element( plot2 )
  chart.add_element( plot3 )

  return chart.encode()

Attributes of chart plots can be set on creation but they can also be set after creation just like the PHP library. Attributes include alpha, colour (of line, bar, etc), text (key), font-size (of key) and values.

Version 2 (Jörmungandr) of Open Flash Chart

A very short description of the Python library used is found here: VersionTwo

We will see how you would make a simple chart with three different lines as per example here (without the randomness): http://teethgrinder.co.uk/open-flash-chart-2/data-lines-2.php

PHP

<?php

include '../php-ofc-library/open-flash-chart.php';

// create data arrays
$data_1 = array(19,17,19,19,17,19,17,17,14,14,17,16);
$data_2 = array(12,10,8,10,13,9,8,10,8,10,10,8);
$data_3 = array(7,6,2,6,6,4,3,2,5,4,2,5);

$default_dot = new dot();
$default_dot->size(5)->colour('#DFC329');

$line_dot = new line();
$line_dot->set_default_dot_style($default_dot);
$line_dot->set_width( 4 );
$line_dot->set_colour( '#DFC329' );
$line_dot->set_values( $data_1 );
$line_dot->set_key( "Line 1", 10 );

$default_hollow_dot = new hollow_dot();
$default_hollow_dot->size(5)->colour('#6363AC');

$line_hollow = new line();
$line_hollow->set_default_dot_style($default_hollow_dot);
$line_hollow->set_width( 1 );
$line_hollow->set_colour( '#6363AC' );
$line_hollow->set_values( $data_2 );
$line_hollow->set_key( "Line 2", 10 );

$star = new star();
$star->size(5);

$line = new line();
$line_hollow->set_default_dot_style($star);
$line->set_width( 1 );
$line->set_colour( '#5E4725' );
$line->set_values( $data_3 );
$line->set_key( "Line 3", 10 );

$y = new y_axis();
$y->set_range( 0, 20, 5 ); 

$chart = new open_flash_chart();
$chart->set_title( new title( 'Three lines example' ) );
$chart->set_y_axis( $y );
//
// here we add our data sets to the chart:
//
$chart->add_element( $line_dot );
$chart->add_element( $line_hollow );
$chart->add_element( $line );

echo $chart->toPrettyString();

Python

from OpenFlashChart import Chart

# The data elements
element1 = Chart()
element1.values =  [19,17,19,19,17,19,17,17,14,14,17,16]
element1.type = "line"
element1.dot_style.type = "dot"
element1.dot_style.dot_size = 5
element1.dot_style.colour = "#DFC329"
element1.width = 4
element1.colour = "#DFC329"
element1.text = "Line 1"
element1.font_size = 10

element2 = Chart()
element2.values = [12,10,8,10,13,9,8,10,8,10,10,8]
element2.type = "line"
element2.dot_style.type = "star"
element2.dot_style.dot_size = 5
element2.width = 1
element2.colour = "#6363AC"
element2.text = "Line 2"
element2.font_size = 10

element3 = Chart()
element3.values = [7,6,2,6,6,4,3,2,5,4,2,5]
element3.type = "line"
element3.width = 1
element3.colour = "#5E4725"
element3.text = "Line 3"
element3.font_size = 10

# Create chart
chart = Chart()
chart.y_axis.min = 0
chart.y_axis.max = 20
chart.y_axis.font_size = 10
chart.title.text = "Three lines example"

#
# here we add our data sets to the chart:
#
chart.elements = [element1, element2, element3]

print chart.create()
Comment by rodrigo....@gmail.com, Jul 10, 2009

How Can I intall?? or Where do I put the OpenFlashChart?'s path?

Comment by project member kinche...@gmail.com, Jul 14, 2009

You don't install it per se. You can put it in the default python path or in the same directory as your working project: http://docs.python.org/tutorial/modules.html#the-module-search-path

Comment by alessand...@gmail.com, Aug 6, 2009

is it possible to save the chart into image from python?

Comment by project member kinche...@gmail.com, Aug 23, 2009

Sorry but right now there's no support to save the chart as an image.

Comment by atulskul...@gmail.com, Oct 25, 2009

It needs cherrypy. What is it?

Comment by atulskul...@gmail.com, Oct 25, 2009

I installed cherrypy, I tried to run the Demo.py program using IDLE on windows and it just does not show anything in the browser when I try to open a page at 'ip:8080' it shows up the as blank and does nothing. Any help would be appreciated.

Comment by project member kinche...@gmail.com, Oct 27, 2009

Hello,

CherryPy? is only needed to run the demo.

When you run Demo.py the console should print some messages. Find the following line:

[27/Oct/2009:21:50:51] ENGINE Serving on 10.211.55.2:8080
You can see that it tells you what the address of the webserver is. So in this case you would open the address 10.211.55.2:8080 in your browser.

Hope that helps!

Comment by pbloc...@gmail.com, Jan 12, 2010

Hello,

I really would like to test the python wrapper around OFC2, however, I do not even get the Demo working. The cerrypy webserver runs fine and all the code looks okay. However, the Flash movies does not get loaded. Any suggestions.

P.

Comment by project member kinche...@gmail.com, Jan 15, 2010

Hi there,

In your console do you get messages requesting the OFC.swf file? eg

IP address - - Date? "GET /flashes/OFC.swf HTTP/1.1" 200 276186 "http://10.211.55.2:8080/" "Mozilla/5.0

If you navigate to /flashes/OFC.swf does the Open Flash Chart object load?

Comment by francois...@gmail.com, Feb 14, 2010

Hi,

I've got the same kind of issue as pblock74. I followed what you indicated: I navigated to the file OFC.swf and opened it but the page remained blank (I suppose the file is almost empty as its size is under 1ko). Here is the log messages I got on Windows XP and Python 2.5 and 2.6:

[14/Feb/2010:18:46:21] ENGINE Listening for SIGTERM.
[14/Feb/2010:18:46:21] ENGINE Bus STARTING
[14/Feb/2010:18:46:21] ENGINE Set handler for console events.
[14/Feb/2010:18:46:21] ENGINE Started monitor thread '_TimeoutMonitor'.
[14/Feb/2010:18:46:21] ENGINE Started monitor thread 'Autoreloader'.
[14/Feb/2010:18:46:21] ENGINE Serving on 192.168.1.4:8080
[14/Feb/2010:18:46:21] ENGINE Bus STARTED
192.168.1.4 - - [14/Feb/2010:18:46:27] "GET / HTTP/1.1" 200 12361 "" "Mozilla/5.
0 (Windows; U; Windows NT 5.1; fr; rv:1.9.1.7) Gecko/20091221 Firefox/3.5.7 (.NE
T CLR 3.5.30729)"
Comment by project member kinche...@gmail.com, Feb 20, 2010

Hi there,

Those console messages look correct. Have you tried looking viewing the page source? See if the html is valid. Apart from that I don't have any other ideas as I don't use Python on Windows.

Comment by tuoxie007, Oct 9, 2011

How can you comment the python code with double slash(//) ? ==!!!

Comment by project member kinche...@gmail.com, Jan 27, 2012

Thanks tuoxie007,

I got carried away with copying a PHP comment.


Sign in to add a comment
Powered by Google Project Hosting