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

[jonc]

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")