Home Zope/Plone hosting by Nidelven IT Do you need help or want to help? Blog about Mozilla (Firefox and Thunderbird)
 



Introduction to ZGDChart

In this article we'll be looking at ZGDChart, a chart-rendering product for Zope. I'll show you how to get it, install it, use it and talk a bit about Zope's 'unification' abilities as well.

ZGDChart introduction

ZGDChart is a Zope product that generates charts from different data sources, it was developed by a very active community member, Chui Tey, as a part of a consulting contract.

Initially ZGDChart got its data from SQL data sources (via SQL methods), now it has been extended to support TinyTables, DTML Methods and PythonScripts as well.

According to Chui it was designed to "bootstrap a developer as quickly as possible" (which we'll see is true in the example).

Getting and installing ZGDChart

Getting and installing ZGDChart is easy. Point your browser to http://www.zope.org/Members/teyc/ZGDChart and download the most recent version (downloads are located at the bottom of the page).

If you're on a Linux or Solaris system, untar the package into Zope's Products directory (in zope_directory/lib/python/Products) and restart Zope.

If you're on Windows, use Winzip (or the tool of your choice) and untar the package into Zope's Products directory (usually c:\Program files\WebSite\lib\python\Products). Restart Zope.

When that's done, you should be able to see ZGDChart in the drop-down list in the ZMI.

ZGDChart example

Create a folder for the example

First off, create a folder for the example, where we'll put all the related objects. You could name it "zgdchart_example".

Step by step guide

We'll create a webpage that reports changes in customer- and employee- retention over the last years.

Now enter the zgdchart_example folder.

Creating customer retention chart

Select "ZGDChart" from the ZMI dropdown list, and click "Add" Give it he ID "customer_retention" and give it the title "Customer retention".

Go into the customer_retention object. There you'll see different tabs, for changing the color of the chart, the scale, the data method (data source), security (who gets access) and viewing the chart.

We'll start with the data method. Click on the "Data method" tab. Make sure that "DTML Method" is selected, if not, change it so that it's selected.

Then press "Edit DTML" and put the following line in the DTML Method body (replacing *all* the example data that's already there):

<dtml-return "(('2000','2001','2002', '2003'), (78, 72, 83, 85))">

The line you see above will return a basic data structure to the Chart, the first sequence being the title of the different bars, the second sequence being their value (height). Remember to press "Save Changes".

OK! We're done with the toughest part. Now, we'll select the type of chart for displaying the data.

Go to the Properties tab and select "Bar_3D" from the Chart type dropdown list. Press "Save changes".

Control that the chart is working, press "View" and voila! A brand new chart, created by you. :)

Creating employee retention chart

Do the same as you did creating the customer retention chart, changing only the ID (employee_retention), title (Employee retention), type of chart (Pie_3D) and data returned in the DTML Method.

The data returned in this DTML method should be:

<dtml-return "(('1998', '1999','2000','2001','2002'), (1,3,2,1,1))">

OK?

Creating the webpage

We need a webpage to present the charts along with some text. Go back to the zgdchart_example folder, select DTML Method from the drop down list, press add, give it the id "index_html", and add this text to the body, replacing *all* the text that's already there (this isn't a HTML class so you'll get all the HTML without any explanations):

<html>
<head>
<title>Retention report</title>
</head><body><table>

<tr><td colspan="2"><h1>Customer retention</h1></td></tr> <tr>
<td valign="top">According to the 2002 directives, we had to retain
more of our customers, through loyalty bonuses. Here we see the
progress in retention over the last three years:</td> <td><img
src="customer_retention"></td></tr>

<tr><td colspan="2"><h1>Employee retention</h1></td></tr>
<tr><td valign="top">In the period 1998 through 2002 we lost 7 of
our key employees to the competition; this is believed to be
because of our rapid expansions into the new .bubblywater market,
where instructions were unclear and the managers ended up managing
the means instead of the ends.</td>
<td><img src="employee_retention"></td></tr>

</table></body></html>

Viewing the results

Go back to the zgdchart_example folder again, and press the "View" tab. Voila, you have your own webpage with text and charts! This took me about 25 minutes while at the same time writing up what I was doing for this review, so it shouldn't take much longer for you either.

Data sources

..one of the best things about Zope is it's ability to make use of different sources of data, be it SQL databases, LDAP (directly via Zope adapters) or anything else, accessible via External methods.

For example, if you'd like to watch the trends around webframeworks, you could for example add an External Method that retrieves results from Google that gets the number of hits for "Zope" vs. number of hits for "ColdFusion" and number of hits for "Webware" and display this in a Pie chart (reaching the External Method via a PythonScript).

The possibilities are endless! :)

Conclusion

OK, that's it for this review, fairly easy, isn't it? To recap, we've looked at getting and installing ZGDChart, using it and barely touched the aspect of Zope's unification of datasources.

Also note that this article is available in the (German, English coming soon) Zope pocket book.