Done. See http://www.web2pyslices.com/main/slices/take_slice/79
On May 15, 8:44 pm, Thadeus Burgess <thade...@thadeusb.com> wrote:
> Would you make a web2pyslice of this with some screenshots? Looks like
> great work.
>
> --
> Thadeus
>
> On Sat, May 15, 2010 at 5:09 PM, MikeEllis <michael.f.el...@gmail.com> wrote:
> > Thanks, Thaddeus. That's a good suggestion. It turns out my case can
> > be simplified considerably by using explicit id's for the sparklines,
> > e.g.
>
> > $(function() {
> > $(this).everyTime(1000,function(i) {
> > $.getJSON('/peertool/sparkline/call/json/sparkdata/
> > 13/0/20', function(data) {
> > $("#dynbar0").sparkline(data.dynbar0, {type: 'bar',
> > barColor: 'green'});
> > $("#dynbar1").sparkline(data.dynbar1, {type: 'bar',
> > barColor: 'green'});
> > // etc ...
> > });
> > });
> > });
>
> > This works because I know how many plots will be needed when the page
> > is rendered by the view, so it's fairly trivial to generate the
> > necessary id's server side. If I were doing something that required
> > consulting a different server to get the data for each plot, then I'd
> > certainly look seriously at writing a plugin.
>
> > In case it's useful to anyone else, here's a complete working example
> > that's kind of fun to see in action. When you browse to the index
> > page, it puts up between 5 and 25 bar graphs with random values
> > reverse sorted to emulate Pareto charts. The charts update once per
> > second with new data from the server.
>
> > (WARNING - a few minutes of this drives my MacBook's cpu usage up
> > because I don't have indexing turned off for wherever the json data is
> > going.)
>
> > 1. web2py_ajax.html - add the sparkline and timer plugins
>
> > response.files.insert(4,URL(r=request,c='static',f='jquery.sparkline.js'))
> > response.files.insert(5,URL(r=request,c='static',f='jquery.timers-1.2.js'))
>
> > 2. The controller
>
> > # coding: utf8
> > import sys
> > import random
> > def index():
> > ngraphs = random.choice(range(5,25))
> > return dict(message="hello from sparkline.py", ngraphs=ngraphs,
> > chartmin=0, chartmax=20)
>
> > def call():
> > session.forget()
> > return service()
>
> > @service.json
> > def sparkdata(ngraphs,chartmin,chartmax):
> > ngraphs = int(ngraphs)
> > chartmin = int(chartmin)
> > chartmax = int(chartmax)
> > sys.stderr.write("\nsparkdata() called with ngraphs=%d\n"%ngraphs)
> > d = dict()
> > for n in xrange(ngraphs):
> > id = "dynbar" + str(n)
> > ## data for bar graph. 9 random ints between chartmax and
> > chartmin
> > data = [random.choice(range(chartmin,chartmax)) for i in
> > xrange(9)]
> > ## simulate a Pareto plot
> > data.sort()
> > data.reverse()
> > d[id] = data
> > sys.stderr.write("\n%s : %s"%(id, str(d[id])))
> > return d
>
> > 3. The view (index.html)
>
> > {{extend 'layout.html'}}
> > {{
> > chartoptions = "{type: 'bar', barColor: 'green', 'chartRangeMin':
> > '%d', 'chartRangeMax': '%d'}"%(chartmin,chartmax)
> > jsonurl = URL(r=request,f='call/json/sparkdata/%(ngraphs)d/%
> > (chartmin)d/%(chartmax)d'%locals())
> > }}
> > <script type="text/javascript">
> > /* <![CDATA[ */
> > $(function() {
> > $(this).everyTime(1000,function(i) {
> > $.getJSON('{{=jsonurl}}', function(data) {
> > {{for n in xrange(ngraphs):}}
> > $("#dynbar{{=n}}").sparkline(data.dynbar{{=n}},
> > {{=chartoptions}});
> > {{pass}}
> > });
> > });
> > });
> > /* ]]> */
> > </script>
> > <h1>This is the sparkline.html template</h1>
> > {{for n in xrange(ngraphs):}}
> > <p>
> > Bar chart with dynamic data: <span id="dynbar{{=n}}"
> > class="dynamicbar">Loading..</span>
> > </p>
> > {{pass}}
> > {{=BEAUTIFY(response._vars)}}
>
> > That's it. BTW, sparkline charts are really useful in applications
> > where you need to visually compare lots of similar data series. Here's
> > a link to a chapter in Edward Tufte's "Beautiful Evidence" with more
> > info
>
> >http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0001OR
>
> > The JQuery Sparklines plug-in page is also useful.
>
> >http://omnipotent.net/jquery.sparkline/
>
> > Cheers,
> > Mike
>
> > On May 15, 3:27 pm, Thadeus Burgess <thade...@thadeusb.com> wrote:
> >> For multiple elements you might want to try and put it into a jQuery
> >> plugin, allowing you to re-use the code for each sparkline.
>
> >> $(".spark").makeSparkline({url:/path/to/call/sparkdata, args:etc});
>
> >> --
> >> Thadeus
>
> >> On Sat, May 15, 2010 at 1:34 PM, MikeEllis <michael.f.el...@gmail.com>
> >> wrote:
>
> >> > After spending some time with Firebug to find and fix a couple of
> >> > typos, I've got it working now. There seems to be no way around
> >> > explicitly referring to the SPAN element (see below), but I can live
> >> > with that.
>
> >> > Now I need to tackle the next level, which is to expand the server-
> >> > side JSON function to return data for multiple sparklines on a page
> >> > and arrange to call sparkline() with the right data for each of the
> >> > corresponding elements.
>
> >> > Thanks again for the help!
>
> >> > Here's what's working correctly:
>
> >> > In the view ...
>
> >> > <script type="text/javascript">
> >> > /* <![CDATA[ */
> >> > $(function() {
> >> > $('.dynamicsparkline').everyTime(1000,function(i) {
> >> > var j = 2+i%5;
> >> > $.getJSON('{{=URL(r=request,f='call/json/
> >> > sparkdata')}}/'+j, function(data) {
> >> > var sparkdata = [10,9,8,7,6,5,4];
> >> > for(var k=0; k<sparkdata.length; k++) { sparkdata[k] =
> >> > data.a[k];}
> >> > console.log("sparkdata = " + sparkdata);
> >> > $('.dynamicsparkline').sparkline(sparkdata); // WORKS
> >> > // $(this).sparkline(sparkdata) // DOES NOT WORK!
> >> > });
> >> > });
> >> > });
> >> > /* ]]> */
> >> > </script>
>
> >> > <h1>This is the sparkline.html template</h1>
> >> > <p>
> >> > Sparkline with dynamic data: <span class="dynamicsparkline">Loading..</
> >> > span>
> >> > </
> >> > p>
>
> >> > and in the controller ...
>
> >> > @service.json
> >> > def sparkdata(j):
> >> > sys.stderr.write("\nsparkdata() called with j=%d\n"%int(j))
> >> > j = int(j)
> >> > return dict(a=[n%j for n in [10,9,8,7,6,5,4]])
>
> >> > Cheers,
> >> > Mike
>
> >> > On May 14, 9:51 pm, mdipierro <mdipie...@cs.depaul.edu> wrote:
> >> >> aha try replace
>
> >> >> $(function() {
> >> >> $('.dynamicsparkline').everyTime(1000,function(i) {
> >> >> $.getJSON('{{=URL(r=request,f='call/json/
> >> >> datapoints')}}/'+i, function(data) {
> >> >> var b = [0,0,0,0,0,0,0]
> >> >> var j = 2+i%5;
> >> >> for(var k=0; k<b.length; k++) { b[k] = data.a[k]
> >> >> %j;}
> >> >> $(this).sparkline(b);
> >> >> });
> >> >> });
> >> >> });
>
> >> >> with
>
> >> >> $(function() {
> >> >> $('.dynamicsparkline').each(function(index){
> >> >> var obj=$(this);
> >> >> obj.everyTime(1000,function(i) {
> >> >> $.getJSON('{{=URL(r=request,f='call/json/
> >> >> datapoints')}}/'+i, function(data) {
> >> >> var b = [0,0,0,0,0,0,0]
> >> >> var j = 2+i%5;
> >> >> for(var k=0; k<b.length; k++) { b[k] = data.a[k] %j;}
> >> >> obj.sparkline(b);
> >> >> });
> >> >> });
> >> >> });
> >> >> });
>
>
