My favorites | Sign in
Project Logo
             
Search
for
Updated Jun 19, 2009 by kinchee87
Labels: Phase-Design, Phase-Implementation
VersionTwo  
Crude details about the this library/module (version 2.10) I wrote for version 2 (Jörmungandr, Kvasir) of Open Flash Chart.

Introduction

Version 2.10 of this library/module was re-written from scratch to be much easier to use. It removes the need to call functions when adding chart attributes and makes for an intuitive usage. The library is also significantly smaller than previous versions.

It is hoped that this new library can cater for new attributes added to Open Flash Chart without having to make modifications.

This library does take the liberty of assuming the programmer is *smart*. The library does not do any lexical or grammar checking.

Details

The most important file is called OpenFlashChart.py

To use the library:

# Import the library/module
from OpenFlashChart import Chart

# # #
# Create a Chart instance
# # #
chart = Chart()

# Add in the title text and style
# Type the attribute names using dot notation as they logically appear in the JSON format
chart.title.text = "Title text"
chart.title.style = "{font-size: 20px; color: #F24062; text-align: center;}"

# Add in the y_axis attributes
# Can enter using dot notation like before or use a dictionary.
# Just don't mix and match!
chart.y_axis = {"min": 0, "max": 10}

# Not like this!
chart.y_axis.min = 0          # y_axis is created as an attribute of chart
chart.y_axis = {"max": 10}    # y_axis is now a dictionary.  The "min" attribute is lost.
chart.y_axis.steps = 2        # Since y_axis is a dictionary, the key "steps" is not valid

# # #
# Print out the chart's json string
# # #
print chart.create()

Tooltip behaviour Set tooltip to 1 for proximity and 2 for hover. Default is 0.

Python reserves the "dash" symbol for an operator and because some of the json attributes have a dash in them, they will cause problems when used in dot notation. Hence, type the following attribute names (underscore in place of a dash) instead:

Attribute name Converted to
on_show on-show
on_click on-click
start_angle start-angle
threeD 3d
tick_height tick-height
grid_colour grid-colour
tick_length tick-length
dot_style dot-style
dot_size dot-size
halo_size halo-size
line_style line-style
outline_colour outline-colour
fill_alpha fill-alpha
gradient_fill gradient-fill

3d is a special case ;-)

Advanced

Apart from using Chart() to create the graphing area, you can assign instances of Chart() to a Chart attribute. This is useful when you want to create a container for each data group you want to plot. You can create shapes as Chart() instances as well.

For example, instead of:

chart = Chart()
chart.elements = [
                     {
                         "type": "line",
                         "values": [1,2,1]
                     },
                     {
                         "type": "bar",
                         "values": [10, 11, 2]
                     }
                 ]

You can do:

element1 = Chart()
element1.type = "line"
element1.values = [1, 2, 1]

element2 = Chart()
element2.type = "bar"
element2.values = [10, 11, 2]

chart = Chart()
chart.elements = [element1, element2]

There's less curly bracket and quote clutter at the expense of retyping "element_." for each attribute.

JSON format

Here is a (non-exhaustive) structure of the json expected by Open Flash Chart (reference):

title
 |- text
 |- style
x_legend
 |- text
 |- style
y_legend
 |- text
 |- style
x_axis
 |- stroke
 |- tick-height
 |- colour
 |- grid-colour
 |- offset
 |- min
 |- max
 |- steps
 |- 3d
 |- labels
 |   |- steps
 |   |- rotate
 |   |- colour
 |   |- size
 |   \- labels
 |       |- text
 |       |- colour
 |       |- size
 |       \- rotate
y_axis
 |- stroke
 |- tick-length
 |- colour
 |- grid-colour
 |- offset
 |- min
 |- max
 |- steps
 |- rotate
 |- labels
 |   |- text
 |   |- colour
 |   |- size
 |   \- labels
 |       |- y
 |       |- text
 |       |- colour
 |       \- size
y_axis_right
 |- min
 |- max
 |- steps
 |- stroke
 |- colour
 |- tick-length
radar_axis
 |- max
 |- steps
 |- colour
 |- grid-colour
elements
 |- type
 |- alpha
 |- colour
 |- colours
 |- text
 |- font-size
 |- tip
 |- start-angle
 |- animate
 |- width
 |- loop
 |- values
 |   |- value
 |   |- text
 |   |- colour
 |   |- tip
 |   |- top
 |   |- bottom
 |   |- low
 |   |- high
 |   |- left
 |   |- right
 |   |- x
 |   \- y
 |- dot-style
 |   |- type
 |   |- dot-size
 |   |- halo-size
 |   |- colour
 |   |- rotation
 |   |- sides
 |   |- tip
 |   \- on-click
 |- on-show
 |   |- type
 |   |- cascade
 |   \- delay
menu
 |- colour
 |- outline_colour
 |- values
 |   |- type
 |   |- text
 |   \- javascript-function
tooltip
 |- mouse
 |- shadow
 |- stroke
 |- colour
 |- background
 |- title
 |- body
num_decimals
is_fixed_num_decimals_forced
is_decimal_separator_comma
is_thousand_separator_disabled
bg_colour

Demonstration:

I the Demo.py script to demonstrate the use of the Python library. I have some JavaScript features going as well: the calling of a JavaScript function using on_click and loading new JSON data using load() defined in the ActionScript.

To run the demonstration, cherrypy and either json or cjson are required:



Sign in to add a comment
Hosted by Google Code