Last week I saw a typical software as a service charting solution by a small company … yes they already have a good search engine, too. The charts aren’t much impressing to me, but the combination of charting and SaaS was really intresting. So I get catched from the thought to make my own charting SaaS solution. I must admit that the idea is not new and there are many good solutions already available, but spending 500 USD isn’t affordable for me. Additionaly, I don’t need tons of charts. But if you plan to do a site like New York Stock Exchange you might consider to buy such a hole in one solution.

Another nice charting solution is from BonaVista called mircocharts. As far as I know they made a TrueType-Font to ‘render’ the charts. Here you can see some examples.

First of all I would need something to render lines, text, rectangles and all the stuff to build a chart. I just rememberd the days I wrote on my diploma. Sombody gaves me a hint to use matplotlib to render my scientific charts. So I decided to do a quick and dirty prototype with a pie chart because it is really simple to do with matplotlib.

The main task to render a pie with some labels is completly handled via the pie function. Here is the code to render the pie chart:

pie(fracs, colors=colors, explode=None, labels=labels, \
        autopct='%1.0f%%', shadow=False)

You can see six parameters right now. fracs is a list of labels. autopct is for the percent number in the slices. explode could be used to shift one or more slices out of the middle. With shadow set to True matplolib would render a shadow around the pie. But I will keep it simple right now…

The next thing to do is to wire this script to a web server. I have done it via cgi on my local IIS Server. Here is the core of the script:

data = cStringIO.StringIO()
savefig(data, format='png', dpi=req_getDPI(fields))
print "Content-Type: image/png\n" + \
        "Content-Length: %d\n" % len(data.getvalue())
print data.getvalue()
data.close()

As you can see interface a python script via cgi isn’t a complex thing. The StringIO class is just a container for the image data. savefig render the charts to png format and streams it to the StringIO container. After that the script prints out an simple http header consisting of Content-Type: image/png which marks our post back as png image and Content-Length: %d\n” % len(data.getvalue()) which gives just the size of the image.

Additionally, some query parsing is required. For futher information have look at the FieldStorage class in the cgi module. To keep it simple I have adopted the syntax from the Google Chart API. And this is the http request I have entered to get the pie chart above:

http://localhost/chart/chart.py?cht=pie&chtt=Pie+Chart+Example&
chl=May|Jun|Jul|Aug&chd=t:10.0,25.0,20.0,45.0&
chco=90b8c0,988ca0,ff9999,99ff99&dpi=25


Doing a good looking micro line chart is a little bit tricky, but lets have a look at the result. For demonstration purposes there is a build in watermark to identify that this chart is filled with random data.

http://localhost/chart/chart.py?cht=lc&dpi=25

All used software is open source (except the IIS).