We are in process of porting an existing Wicket application on Google App engine. This application’s charting engine used Java color classes along with Swing components to generate dynamic images. These images are then used by Wicket to display on the front-end . Unfortunately Google app engine does not support these classes. We therefore had to find an alternative to generate Charts for our application.
We decided upon using google charts in our Wicket based project. We came across this wicket google charts sub project which has the capabilities to generate charts for the application. We found out later that it used awt classes at some parts to generate charts. Looking at the code from this project we realized that it is simple to do this on our own.
Google charts require an URL format which has data along with meta information on how to display it. This well formed URL is embedded in the image tag of the rendered html content is enough to display the chart on the browser. So, in order to generate charts we had to crunch the data in the application to generate a well formed URL. Then we simply had to embed this URL in the image tag to render it on the browser. For example an URL like this:
[sourcecode]
http://chart.apis.google.com/chart?chs=350×200&chd=s:WORL&cht=bhs&chxt=x,y&chxl=0:|0|5|10|15|20|25|30|35|1:|IBM|GE|TCS|SA
[/sourcecode]
will generate an image like this:
Now let’s look at the code involved in the wicket application which lets us accomplish this. We have a ReportPanel class and it’s associated markup ReportPanel.html. In wicket application we work in components. There is another class involved named BarChart component, it accomplishes the task of embedding URL in the markup. Let’s see how are they involved in generating charts for our application.
[sourcecode language=”java”]
public class ReportPanel {
public ReportPanel(ReportData data) {
// adding barchart component in the Panel
add("barChart", new BarChart(data));
}
—
—
}
[/sourcecode]
The corresponding markup to ReportPanel i.e. ReportPanel.html looks like this:
[sourcecode source=”html”]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:wicket="http://wicket.sourceforge.net/" xml:lang="en" lang="en">
<body>
<wicket:panel>
<div wicket:id="reportFrame">
<span wicket:id="reportTable"></span>
<br />
<br />
<div style="margin-left: 20px;">
<wicket:message key="series.splitOn" />: <span wicket:id="serieChartSelector"></span>
<!– barchart component in markup –>
<img wicket:id="barChart" />
</div>
</div>
</wicket:panel>
</body>
</html>
[/sourcecode]
Above two listings explain the association of BarChart component in the Panel and the markup. Now let’s see the interesting part where the BarChart Component constructs the URL and embeds it in the markup. Here we have to listen for the onComponentTag event and verify that if we are working with an img tag, modify the src attribute to some generated URL. That is all that this class does and here is the code snippet.
[sourcecode language=”java”]
public class BarChart extends WebComponent {
private ReportData data;
—
—
public BarChart(ReportData data) {
this.data = data
}
@Override
protected void onComponentTag(ComponentTag tag) {
checkComponentTag(tag, "img");
super.onComponentTag(tag);
tag.put("src", constructURL());
}
—
—
}
[/sourcecode]
The constructURL method job is just to crunch your application data passed as ReportData and form a valid URL which google understands and then you are done. That is all which needs to be done to construct basic charts from application data for a wicket application on Google app engine. The use of google charts is simple to use and understand but mapping the application data to URL parameters may require some work.