I needed to display the tweets per day for my date filter @ jetwick.com
I tried the jfreechart approach but I didn’t like to have a generated image with an imagemap although it worked and looks nicely.
So here you have the html, css and java snippet necessary to do the same in pure html. Please comment if something is wrong (I had to edit the working code to remove the unnecessary solrJ stuff that I had within that component).
Html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.4-strict.dtd">
<head>
<title>[Panel Test]</title>
</head>
<body>
<wicket:panel>
<div class="main-bar-chart">
<div class="bar-chart">
<div wicket:id="items">
<a wicket:id="itemLink">
<span wicket:id="itemLabel">[Text]</span>
<div wicket:id="itemSpan"/>
</a>
</div>
</div>
</div>
</wicket:panel>
</body>
</html>
Css
.date-filter .main-bar-chart {
background: #f2f2f2 url('../img/bottom-line.png') bottom left repeat-x;
padding: 10px;
width: 610px;
height: 100px;
}
.date-filter-label {
padding-bottom: 10px;
}
.date-filter .bar-chart, .main-bar-chart .gray { color: gray; }
.date-filter .bar-chart .item {
padding-left: 10px;
float: left;
}
.date-filter .bar-chart .item span {
font-size: 12px;
}
.date-filter .bar-chart .item .item-span {
background-repeat: repeat-y;
background-image: url('../img/bar-min.png');
}
Java
private List<Object[]> entryList = new ArrayList<Object[]>();
private long max = 1;
public JSDateFilter(String id) {
super(id);
ListView items = new ListView("items", entryList) {
@Override
public void populateItem(final ListItem item) {
float zoomer = MAX_HEIGHT_IN_PX / max;
final Object[] entry = (Object[]) item.getModelObject();
String strValue = (String) entry[0];
Integer count = (Integer) entry[1];
Label bar = new Label("itemSpan");
AttributeAppender app = new AttributeAppender("title", new Model(count + " entries"), " ");
bar.add(app).add(new AttributeAppender("style", new Model("height:" + (int) (zoomer * count) + "px"), " "));
AjaxFallbackLink link = new AjaxFallbackLink("itemLink") {
@Override
public void onClick(AjaxRequestTarget target) {
//TODO
}
};
link.add(app);
Label label = new Label("itemLabel", strValue);
link.add(bar).add(label);
if (count == 0) {
link.setEnabled(false);
link.add(new AttributeAppender("class", new Model("gray"), " "));
}
// if (selected)
// link.add(new AttributeAppender("class", new Model("filter-rm"), " "));
// else
// link.add(new AttributeAppender("class", new Model("filter-add"), " "));
item.add(link);
}
};
add(items);
}
public void update(Map<String, Integer> map) {
entryList.clear();
max = 1;
for (Entry<String, Integer> e : map.entrySet()) {
entryList.add(new Object[]{e.getKey(), e.getValue()});
if (e.getValue() > max)
max = e.getValue();
}
}
You can use this code in your wicket page via the following snippet in the html:
<div wicket:id="dateFilter">[dateFilter]</div>
and add(new DateFilter(“dateFilter”)) in the Java part. The bar image is available here.
Navigatone 
