In this example, we will demostrate how to create a web page to show the monthly
revenue for a given year. The user will select a year from a HTML form and press
OK. The web server will query a database to obtain the necessary data, and
return a web page containing the bar chart for the selected year.
The code for producing the HTML form is listed below. It outputs a drop down
select list to allow the user to selecte a year. Based on the selected year, it
uses an <IMG> tag with a ChartDirector script as the URL and the selected
year as query parameter. The ChartDirector script will generate the chart image
based on the selected year and deliver it to the browser.
[The following is available as "pythondemo_cgi/dbdemo1.py".]
#!/usr/bin/python
import cgi, os
#get HTTP query parameters
query = cgi.FieldStorage()
#the currently selected year
if query.has_key("year") :
selectedYear = int(query["year"].value)
else :
selectedYear = 2001
print "Content-type: text/html\n"
print """
Database Integration Demo (1)
The example demonstrates creating a chart using data from a database.
""" % vars() |
As seen from the code above, the chart is created by the URL in the <IMG>
tag, which is "dbdemo1a.py".
The "dbdemo1a.py" is as follows.
[The following is available as "pythondemo_cgi/dbdemo1a.py".]
#!/usr/bin/python
from pychartdir import *
import cgi
#get HTTP query parameters
query = cgi.FieldStorage()
#
#Displays the monthly revenue for the selected year. The selected year
#should be passed in as a query parameter called "year"
#
selectedYear = int(query["year"].value)
#
#Query the database to get the software, hardware and services revenues
#of each month for the selected year. In this demo, we will just use
#random numbers instead of a real database.
#
software = []
hardware = []
services = []
import whrandom
ran = whrandom.whrandom(selectedYear % 256)
for i in range(0, 12) :
software.append(ran.randint(40, 70) * (selectedYear - 1985))
hardware.append(ran.randint(40, 70) * (selectedYear - 1985))
services.append(ran.randint(40, 70) * (selectedYear - 1985))
#
#Now we obtain the data into arrays, we can start to draw the chart
#using ChartDirector
#
#Create a XYChart of size 420 pixels x 240 pixels
c = XYChart(420, 240)
#Set the chart background to pale yellow (0xffffc0) with a 2 pixel 3D border
c.setBackground(0xffffc0, 0xffffc0, 2)
#Set the plotarea at (70, 50) and of size 320 x 150 pixels. Set background
#color to white (0xffffff). Enable both horizontal and vertical grids by
#setting their colors to light grey (0xc0c0c0)
c.setPlotArea(70, 50, 320, 150, 0xffffff, 0xffffff, 0xc0c0c0, 0xc0c0c0)
#Add a title to the chart
c.addTitle("Revenue for " + str(selectedYear), "timesbi.ttf"
).setBackground(0xffff00)
#Add a legend box at the top of the plotarea
c.addLegend(70, 30, 0, "", 8).setBackground(Transparent)
#Add a stacked bar chart layer using the supplied data
layer = c.addBarLayer2(Stack)
layer.addDataSet(software, -1, "Software")
layer.addDataSet(hardware, -1, "Hardware")
layer.addDataSet(services, -1, "Services")
layer.setBorderColor(Transparent, 1)
#Set the x axis labels. In this example, the labels must be Jan - Dec.
labels = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug",
"Sept", "Oct", "Nov", "Dec"]
c.xAxis().setLabels(labels)
#Set the x-axis width to 2 pixels
c.xAxis().setWidth(2)
#Set the y axis title
c.yAxis().setTitle("USD (K)")
#Set the y-axis width to 2 pixels
c.yAxis().setWidth(2)
#output the chart in PNG format
print "Content-type: image/png\n"
binaryPrint(c.makeChart2(PNG)) |
The first part of the above code simulates a database query by using
random numbers. The second part of the code is to create a stacked bar chart using
the data. This is very similar to the examples in other parts of this
documentation, so it will not explain further here.
© 2003 Advanced Software Engineering Limited. All rights reserved.