ToscaWidgets JQuery and Flot Plotting (Tutorialish-ly)
Written by on in Snaking.

Continuing on from our previous tutorial, here's a quick example showing how to create a Flot plotting library plot using tw.jquery's FlotWidget class.  In our root.py controller module, we'll import the widget and some support functions:

from tw.jquery import FlotWidget
from math import sin,cos
import simplejson

The FlotWidget is part of the core tw.jquery support, but it triggers an error in tw.core < 0.9.8 (0.9.8 should be out in about a week, I'm told), so we have to "patch" the core with this class:

base_FlotWidget = FlotWidget
class FlotWidget( base_FlotWidget ):
    """Hack to work-around bug in ToscaWidgets < 0.9.8"""
    def update_params(self, d):
        super(base_FlotWidget, self).update_params(d)
        if not d.get('data'):
            raise ValueError, "FlotWidget must have data to graph"
        if not d.get('id'):
            d['id'] = 'flot_%s' % str(int(random() * 999))
        data = d.get('data', [])
        options = d.get('options', {})
        self.add_call(
            """$.plot( $('#%s'), %s, %s )"""%(
                d.id, simplejson.dumps( data ), simplejson.dumps( options )
            )
        )
        return d

Okay, now that the preliminaries are out of the way, we can create our actual controller method:

    @expose('adminhack.templates.flottest')
    def flottest( self, **named ):
        """Test/demo for the Flot plotting widget"""
        plot_data = [
            (x/20.,sin(x/20.),cos(x/20.))
            for x in range( 0, 200 )
        ]
        return dict(
            plot_data = [
                {
                    'label':'sin(x)',
                    'data':[(x[0],x[1]) for x in plot_data]
                },
                {
                    'label':'cos(x)',
                    'data':[(x[0],x[2]) for x in plot_data]
                },
            ],
            flot = FlotWidget(
                id = 'plotter',
                height = "10em",
                width = "20em",
                label = "Javascript Plotting for TurboGears",
                options = dict(
                    lines = { 'show': True },
                    points = {'show': True },
                ),
            ),
            page = 'flottest',
        )

The bulk of the code there is just creating a data-set to be displayed.  Here we create a sin/cos plot from 0.0-10.0 .  You will note that we are not using the JQueryCompressed() object we used in our last tutorial.  The FlotWidget automatically includes the JQuery source when invoked.  Our template, as a result, doesn't call jquery(), but otherwise looks very much like the TinyMCE template:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:py="http://genshi.edgewall.org/"
      xmlns:xi="http://www.w3.org/2001/XInclude">

  <xi:include href="master.html" />
<head>
  <meta content="text/html; charset=UTF-8" http-equiv="content-type" py:replace="''"/>
  <title>Example Flot Viewer</title>
</head>

<body>
  <div id="flot-test">
    <h2>Example Flot Viewer</h2>
    ${ flot( data = plot_data ) }
  </div>
  <div class="clearingdiv" />
</body>
</html>

Screenshot The Flot project homepage has lots of samples of how to customize your plots.  Note that if you are plotting time-series data you will need to use time.time() style seconds-since-the-epoch form, rather than datetime.datetime() objects.

Comments

  1. Omri

    Omri on 05/19/2010 9:27 a.m. #

    Hey,
    maybe it's a stupid newbie question, but where and how exactly should the patching of the core take place?

    Thanks!

Comments are closed.

Pingbacks

Pingbacks are closed.