[TriLUG] Web App with Bar Graph - What to Use?

Tue Dec 12 09:09:43 EST 2006

If you want to minimize server requirements, you can make bargraphs
using html tables.  There is a Perl module to aid in this process
called HTML::BarGraph which is written as a single .pm file, so it
could be included in your distribution, provided license
compatibility.

Josh

On 12 Dec 2006 08:55:59 -0500, jonc <jonc at nc.rr.com> wrote:
>
> On Tue, 2006-12-12 at 08:36, Scott Chilcote wrote:
> > Hi Folks,
> >
> > I'd like to rewrite a web application I have that has a user entry form
> > and generates some bar graphs.
> >
> > I used Perl and gnuplot to do this the first time.  Managing it was a
> > chore because the jpeg images that gnuplot generated had to be stored on
> > the server.  The program had to keep them available and delete them
> > periodically.
> >
> > I had a few requests to share the app, but these requirements made it
> > hard to provide it to someone else.
> >
> > One option I'm considering is the GD::Graph module for Perl.  It looks
> > like it would do what I need, and wouldn't require managed image files.
> > It would require that GD::Graph is available on the webserver though.
> >
> > I'm not opposed to using something else like JavaScript or Python
> > instead.  I want to minimize setup and administration.  The application
> > may wind up on a club webserver operated by hobbyists.
> >
> > Any recommendations?
> >
> > Thanks,
> >
> > Scott C.
>
> I use Python for my graphs. It's fairly fast and its as pretty or ugly
> as I make it. I like the control of being able to place a pixels exactly
> where I want it.
>
> Here is a program segment that draws a graph displaying trunk
> utilization...
>
>
> import time
> import os
> import Image
> import ImageDraw
> import ImageFont
> #
> # Make a graph of the monthly usage
> #   Left border = 40 pixels
> #   Right border = 40 pixels
> #   Top border = 20 pixels
> #   Bottom border = 40 pixels
> # Max num of pixels = 2678400 - lets see what that looks like
> # Okay - 2880 is a resonable max, though 1440 would be better.
> #
> # Lets pick the day of the Max and look at that for one graph
> # Midnight to Midnight, 86400 seconds = 24 hours
> Midnight_tup =
> ((Max_tup[0],Max_tup[1],Max_tup[2],0,0,0,Max_tup[6],Max_tup[7],Max_tup[8]))
> Midnight_sec = time.mktime(Midnight_tup)
> End_sec = Midnight_sec + 86400
> # Time will be the x axis: graph offset=40 pixels,
> #  each pixel=1 minute (60 seconds)
> x_offset = 40
> x_scale = 0.016666667
> # Max calls will be the y axis which is logically inverted
> #  (goes down rather than up) so we need to subtract off
> #  values from the offset: graph offset = (507 - 40) = 467
> #  and each call segment is 3 pixels long
> y_offset = 467
> y_scale = -3.0
>
> # Maximum pixels in the x axis = 40 + 1441 +40 = 1521
> # Maximum pixels in the y axis = 507
> # create image using a light blue background (Red, Green, Blue)
> Mode = "RGB"
> Size = (1521,507)
> BG_Color = (239,239,255)
> im = Image.new(Mode, Size, BG_Color)
> #
> # Lets put in the Axis and Tix marks for hours
> # Color = basic black
> draw = ImageDraw.Draw(im)
> Axis_color = (16,16,16)
> draw.line([(38,468),(1482,468)],Axis_color)
> draw.line([(38,469),(1482,469)],Axis_color)
> draw.line([(38,470),(1482,470)],Axis_color)
> #
> draw.line([(40,468),(40,120)],Axis_color)
> draw.line([(39,468),(39,120)],Axis_color)
> draw.line([(38,468),(38,120)],Axis_color)
> #
> draw.line([(1480,470),(1480,120)],Axis_color)
> draw.line([(1481,470),(1481,120)],Axis_color)
> draw.line([(1482,470),(1482,120)],Axis_color)
> #
> for i in range(1,24,1):
>    draw.line([(39+(i*60), 469),(39+(i*60), 478)],Axis_color)
>    draw.line([(40+(i*60), 469),(40+(i*60), 478)],Axis_color)
>    draw.line([(41+(i*60), 469),(41+(i*60), 478)],Axis_color)
>    # Do the titles as well
>    draw.text((38+(i*60), 487),str(i),fill=Axis_color)
> #
> # put a longer Tix mark at noon x= 40 + (12*60)
> draw.line([(759, 478),(759, 487)],Axis_color)
> draw.line([(760, 478),(760, 487)],Axis_color)
> draw.line([(761, 478),(761, 487)],Axis_color)
> #
> # Draw the PRI lines on the graph (each line represents one PRI of use)
> # Color = light yellow
> PRI_color = (224,224,32)
> draw.line([(41,398),(1479,398)],PRI_color)
> draw.line([(41,329),(1479,329)],PRI_color)
> draw.line([(41,260),(1479,260)],PRI_color)
> draw.line([(41,191),(1479,191)],PRI_color)
> draw.line([(41,122),(1479,122)],PRI_color)
> #
> # Lets put some titles on this graph
> # We will use the default font
> # Labels for Y-axis (# of PRIs) - in Yellow
> draw.text((20,79),"# of",fill=(122,122,16))
> draw.text((20,90),"PRIs",fill=(122,122,16))
> #
> draw.text((30,394),"1",fill=(122,122,16))
> draw.text((30,325),"2",fill=(122,122,16))
> draw.text((30,256),"3",fill=(122,122,16))
> draw.text((30,187),"4",fill=(122,122,16))
> draw.text((30,118),"5",fill=(122,122,16))
> # Now lets draw some dots on this image
> # Dot colors are very dark grey
> Dot_color = (16,16,16)
>
> for i in range(0,len(Trunks)):
>    Tr_time = Trunks[i][0]
>    Tr_max = Trunks[i][1]
>    if ( Tr_time >= Midnight_sec ) and ( Tr_time <= End_sec ):
>       # Process our Max day
>       x = int((Tr_time - Midnight_sec)*x_scale) + x_offset
>       y = int(Tr_max*y_scale) + y_offset
>       # im.putpixel((x,y),Dot_color)
>       # im.putpixel((x,y-1),Dot_color)
>       # im.putpixel((x,y-2),Dot_color)
>       draw.line([(x,y),(x, 468)],Dot_color)
>    #
> #
> im.save("/home/jonc/cdr/trunks/MaxDay.jpg")
>
> --
> TriLUG mailing list        : http://www.trilug.org/mailman/listinfo/trilug
> TriLUG Organizational FAQ  : http://trilug.org/faq/
> TriLUG Member Services FAQ : http://members.trilug.org/services_faq/
>