My favorites | Sign in
Project Logo
             
Search
for
Updated Jun 14, 2009 by kinchee87
Labels: Featured
Tutorial  
Short tutorial on how to use the Python libraries with Open Flash Chart

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.tornaciole, Jul 10, 2009

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

Comment by kinchee87, 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 alessandro.ronchi, Aug 06, 2009

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

Comment by kinchee87, Aug 23, 2009

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

Comment by atulskulkarni, Oct 25, 2009

It needs cherrypy. What is it?

Comment by atulskulkarni, 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 kinchee87, 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!


Sign in to add a comment
Hosted by Google Code