TurboFlot Documentation

[cd34]

Installation:

easy_install tw.jquery

Usage:

The TurboFlot Widget accepts the following parameters:

Mandatory Parameters:

* data The data used to create the graph

Minimal Controller to display a TurboFlot graph:

# imports
import math
from pylons import c
from datetime import datetime

# third party imports
from tw.jquery.flot import FlotWidget

# project specific imports
from quickstart.lib.base import BaseController

class TestController(BaseController):

@expose('cp.templates.template')
def index(self):
c.graphic = FlotWidget()

d1 = []
i = 0
for x in range(26):
d1.append((i, math.sin(i)))
i += 0.5

d2 = [[0, 3], [4, 8], [8, 5], [9, 13]]

d3 = []
i = 0
for x in range(26):
d3.append((i, math.cos(i)))
i += 0.5

d4 = []
i = 0
for x in range(26):
d4.append((i, math.sqrt(i * 10)))
i += 0.5

d5 = []
i = 0
for x in range(26):
d5.append((i, math.sqrt(i)))
i += 0.5

return dict(data=[
{ 'data' : d1, 'lines' : { 'show' : 'true', 'fill' :
'true', 'fillColor' : 'rgba(0, 0, 36, 0.8)' } , 'label' : 'first' },
{ 'data' : d2, 'bars' : { 'show' : 'true' } },
{ 'data' : d3, 'points' : { 'show' : 'true' } },
{ 'data' : d4, 'lines' : { 'show' : 'true' } },
{ 'data' : d5, 'lines' : { 'show' : 'true' }, 'points' :
{ 'show' : 'true' } },
]
)

Template:

<div xmlns="http://www.w3.org/1999/xhtml"
xmlns:py="http://genshi.edgewall.org/"
xmlns:xi="http://www.w3.org/2001/XInclude">

${XML(tmpl_context.graphic(data=data))}

</div>

Optional Parameters:

* options

Modify the controller to return:

return dict(data=[
{ 'data' : d1, 'lines' : { 'show' : 'true', 'fill' :
'true', 'fillColor' : 'rgba(0, 0, 36, 0.8)' } , 'label' : 'first' },
{ 'data' : d2, 'bars' : { 'show' : 'true' } },
{ 'data' : d3, 'points' : { 'show' : 'true' } },
{ 'data' : d4, 'lines' : { 'show' : 'true' } },
{ 'data' : d5, 'lines' : { 'show' : 'true' }, 'points' :
{ 'show' : 'true' } },
], options={
'grid' : { 'backgroundColor' : '#eee', 'borderWidth' :
'1' },
'selection' : { 'mode' : 'xy' },
'legend' : { 'show' : 'true', 'position' : 'ne' }
}
)

and modify the template:

<div xmlns="http://www.w3.org/1999/xhtml"
xmlns:py="http://genshi.edgewall.org/"
xmlns:xi="http://www.w3.org/2001/XInclude">

${XML(tmpl_context.graphic(data=data, options=options))}

</div>

For more information on the available parameters for Flot, see
http://code.google.com/p/flot/

----

See http://trac.turbogears.org/ticket/2330 if your graph shows up
empty on the page.