I wrote a simple bar/stack graph component using Canvas. The server side API is pretty simple: you give it the dataset and optionally colors, bar width and spacing. The bars are scaled to the canvas height, and if you don’t specify bar width the graph is scaled to canvas width. The graph tries to display the whole dataset by reducing bar widths and spacing, resize the window to see how that works. The component also offers an interface for listening bar click events, and the bars support tooltips.
There is a
demo app available, and
sources can be found in contrib. Perhaps someone finds it useful.
java.lang.ArrayIndexOutOfBoundsException: 2
at com.vaadin.contrib.canvasbargraph.CanvasBarGraph.changeVariables(CanvasBarGraph.java:61)
at com.vaadin.terminal.gwt.server.CommunicationManager.handleVariables(CommunicationManager.java:730)
at com.vaadin.terminal.gwt.server.CommunicationManager.handleUidlRequest(CommunicationManager.java:283)
at com.vaadin.terminal.gwt.server.AbstractApplicationServlet.service(AbstractApplicationServlet.java:425)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:717)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:290)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:206)
at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:233)
at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:191)
at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:128)
at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:102)
at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:109)
at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:286)
at org.apache.jk.server.JkCoyoteHandler.invoke(JkCoyoteHandler.java:190)
at org.apache.jk.common.HandlerRequest.invoke(HandlerRequest.java:283)
at org.apache.jk.common.ChannelSocket.invoke(ChannelSocket.java:767)
at org.apache.jk.common.ChannelSocket.processConnection(ChannelSocket.java:697)
at org.apache.jk.common.ChannelSocket$SocketConnection.runIt(ChannelSocket.java:889)
at org.apache.tomcat.util.threads.ThreadPool$ControlRunnable.run(ThreadPool.java:690)
at java.lang.Thread.run(Thread.java:619)
A really minor bug, but the application seems to draw one bar less than the given bar amount (e.g. if you give 15, the application draws only 14 bars).
I revised the graph component somewhat. Most important changes are
[list]
[]
Does not use canvas at all anymore, bars are drawn with divs.
[]
Colors are now defined properly in CSS instead of a server-side API.
[]
Added horizontal scale lines with labels.
[]
Added immediate data display label in addition to the delayed tooltip.
[*]
Resize does not require a server roundtrip.
[/list]Since the new version differs quite a lot from the previous version I committed it into a
new directory in contrib. The
demo URL also changed a little.
The event is not yet supported, but there is some scaffolding in GraphElement.java to attach click listeners to the DIV corresponding elements. It would be pretty simple to send a variable change to the server when the click listener fires. Patches are very welcome
It doesn’t need to, just wrap the graph in a Panel if you want scrollbars. Don’t forget to call panel.getContent().setSizeUndefined() though.
Henri,
Thank you for your answer.
What is the best way to modify you component ? Should i use Eclipse or Netbeans ? How should i download initial source project which is ready for recompilation?
You should be able to use Netbeans, but I use Eclipse, and we have the excellent
Vaadin Eclipse plugin to facilitate development on it. If you choose Eclipse you’ll also want Subclipse, which is a Eclipse plugin to access Subversion repositories. With these it’s easy to get going, just checkout the source from
https://dev.vaadin.com/svn/contrib/BarGraph as a new Vaadin project. The project includes a simple test app you can use to test it.
When you are happy with your changes send the patch to me and I’ll look them over and incorporate them into the official version.
Henri,
I downloaded your source code, put latest gwt*.jar into WEB-INF/lib/, pressed build.xml->Run As->Ant Build.
got
Buildfile: D:\BarGraph\build.xml
configure:
init:
[echo]
Configured for ${gwt-platform} platform.
[echo]
Requirements for classpath:
[echo]
WebContent/WEB-INF/lib/vaadin-6.3.1.jar
[echo]
src
[echo]
Output will be written into WebContent/VAADIN/widgetsets
[echo]
Note, if you have created your own widgetset, please modify target compile-my-widgetset first.
compile-bargraph:
[javac]
Compiling 5 source files to D:\BarGraph\WebContent\WEB-INF\classes
[javac]
D:\BarGraph\src\org\vaadin\hezamu\bargraph\widgetset\client\ui\GraphElement.java:6: package com.google.gwt.event.dom.client does not exist
[javac]
import com.google.gwt.event.dom.client.MouseOutEvent;
[javac]
^
[javac]
D:\BarGraph\src\org\vaadin\hezamu\bargraph\widgetset\client\ui\GraphElement.java:7: package com.google.gwt.event.dom.client does not exist
[javac]
import com.google.gwt.event.dom.client.MouseOutHandler;
[javac]
^
[javac]
D:\BarGraph\src\org\vaadin\hezamu\bargraph\widgetset\client\ui\GraphElement.java:8: package com.google.gwt.event.dom.client does not exist
[javac]
import com.google.gwt.event.dom.client.MouseOverEvent;
[javac]
^
[javac]
D:\BarGraph\src\org\vaadin\hezamu\bargraph\widgetset\client\ui\GraphElement.java:9: package com.google.gwt.event.dom.client does not exist
[javac]
import com.google.gwt.event.dom.client.MouseOverHandler;
[javac]
^
[javac]
D:\BarGraph\src\org\vaadin\hezamu\bargraph\widgetset\client\ui\GraphElement.java:10: package com.google.gwt.event.dom.client does not exist
[javac]
import com.google.gwt.event.dom.client.MouseUpEvent;
[javac]
^
[javac]
D:\BarGraph\src\org\vaadin\hezamu\bargraph\widgetset\client\ui\GraphElement.java:11: package com.google.gwt.event.dom.client does not exist
[javac]
import com.google.gwt.event.dom.client.MouseUpHandler;
[javac]
^
[javac]
D:\BarGraph\src\org\vaadin\hezamu\bargraph\widgetset\client\ui\GraphElement.java:12: package com.google.gwt.user.client.ui does not exist
[javac]
import com.google.gwt.user.client.ui.FocusPanel;
[javac]
^
[javac]
D:\BarGraph\src\org\vaadin\hezamu\bargraph\widgetset\client\ui\GraphElement.java:27: cannot find symbol
[javac]
symbol : class FocusPanel
[javac]
location: class org.vaadin.hezamu.bargraph.widgetset.client.ui.GraphElement
[javac]
private FocusPanel panel;
[javac]
^
[javac]
D:\BarGraph\src\org\vaadin\hezamu\bargraph\widgetset\client\ui\GraphElement.java:117: cannot find symbol
[javac]
symbol : class MouseUpEvent
[javac]
location: class org.vaadin.hezamu.bargraph.widgetset.client.ui.GraphElement
[javac]
private void fireClick(MouseUpEvent event) {
[javac]
^
[javac]
D:\BarGraph\src\org\vaadin\hezamu\bargraph\widgetset\client\ui\GraphElement.java:123: cannot find symbol
[javac]
symbol : class MouseOverEvent
[javac]
location: class org.vaadin.hezamu.bargraph.widgetset.client.ui.GraphElement
[javac]
private void fireMouseOver(MouseOverEvent event) {
[javac]
^
[javac]
D:\BarGraph\src\org\vaadin\hezamu\bargraph\widgetset\client\ui\GraphElement.java:129: cannot find symbol
[javac]
symbol : class MouseOutEvent
[javac]
location: class org.vaadin.hezamu.bargraph.widgetset.client.ui.GraphElement
[javac]
private void fireMouseOut(MouseOutEvent event) {
[javac]
^
[javac]
D:\BarGraph\src\org\vaadin\hezamu\bargraph\widgetset\client\ui\GraphElement.java:177: cannot find symbol
[javac]
symbol : class FocusPanel
[javac]
location: class org.vaadin.hezamu.bargraph.widgetset.client.ui.GraphElement
[javac]
public FocusPanel getPanel() {
[javac]
^
[javac]
D:\BarGraph\src\org\vaadin\hezamu\bargraph\widgetset\client\ui\GraphElement.java:136: cannot find symbol
[javac]
symbol : class MouseUpEvent
[javac]
location: interface org.vaadin.hezamu.bargraph.widgetset.client.ui.GraphElement.GraphElementListener
[javac]
public void elementClicked(GraphElement element, MouseUpEvent event);
[javac]
^
[javac]
D:\BarGraph\src\org\vaadin\hezamu\bargraph\widgetset\client\ui\GraphElement.java:150: cannot find symbol
[javac]
symbol : class MouseOverEvent
[javac]
location: interface org.vaadin.hezamu.bargraph.widgetset.client.ui.GraphElement.MouseOverListener
[javac]
public void mouseOver(GraphElement element, MouseOverEvent event);
[javac]
^
[javac]
D:\BarGraph\src\org\vaadin\hezamu\bargraph\widgetset\client\ui\GraphElement.java:164: cannot find symbol
[javac]
symbol : class MouseOutEvent
[javac]
location: interface org.vaadin.hezamu.bargraph.widgetset.client.ui.GraphElement.MouseOutListener
[javac]
public void mouseOut(GraphElement element, MouseOutEvent event);
[javac]
^
[javac]
D:\BarGraph\src\org\vaadin\hezamu\bargraph\widgetset\client\ui\VBarGraph.java:6: package com.google.gwt.event.dom.client does not exist
[javac]
import com.google.gwt.event.dom.client.MouseOutEvent;
[javac]
^
[javac]
D:\BarGraph\src\org\vaadin\hezamu\bargraph\widgetset\client\ui\VBarGraph.java:7: package com.google.gwt.event.dom.client does not exist
[javac]
import com.google.gwt.event.dom.client.MouseOverEvent;
[javac]
^
[javac]
D:\BarGraph\src\org\vaadin\hezamu\bargraph\widgetset\client\ui\VBarGraph.java:8: package com.google.gwt.user.client.ui does not exist
[javac]
import com.google.gwt.user.client.ui.AbsolutePanel;
[javac]
^
[javac]
D:\BarGraph\src\org\vaadin\hezamu\bargraph\widgetset\client\ui\VBarGraph.java:9: package com.google.gwt.user.client.ui does not exist
[javac]
import com.google.gwt.user.client.ui.HTML;
[javac]
^
[javac]
D:\BarGraph\src\org\vaadin\hezamu\bargraph\widgetset\client\ui\VBarGraph.java:10: package com.google.gwt.user.client.ui does not exist
[javac]
import com.google.gwt.user.client.ui.Label;
[javac]
^
[javac]
D:\BarGraph\src\org\vaadin\hezamu\bargraph\widgetset\client\ui\VBarGraph.java:11: package com.google.gwt.user.client.ui does not exist
[javac]
import com.google.gwt.user.client.ui.Widget;
[javac]
^
[javac]
D:\BarGraph\src\org\vaadin\hezamu\bargraph\widgetset\client\ui\VBarGraph.java:20: cannot find symbol
[javac]
symbol: class AbsolutePanel
[javac]
public class VBarGraph extends AbsolutePanel implements Paintable {
[javac]
^
[javac]
D:\BarGraph\src\org\vaadin\hezamu\bargraph\widgetset\client\ui\VBarGraph.java:37: cannot find symbol
[javac]
symbol : class HTML
[javac]
location: class org.vaadin.hezamu.bargraph.widgetset.client.ui.VBarGraph
[javac]
private HTML label;
[javac]
^
[javac]
D:\BarGraph\src\org\vaadin\hezamu\bargraph\widgetset\client\ui\VBarGraph.java:39: cannot find symbol
[javac]
symbol : class Widget
[javac]
location: class org.vaadin.hezamu.bargraph.widgetset.client.ui.VBarGraph
[javac]
private List<Widget> widgets = new ArrayList<Widget>();
[javac]
^
[javac]
D:\BarGraph\src\org\vaadin\hezamu\bargraph\BarGraph.java:16: incompatible types
[javac]
found : java.lang.Class<org.vaadin.hezamu.bargraph.widgetset.client.ui.VBarGraph>
[javac]
required: java.lang.Class<? extends com.vaadin.terminal.gwt.client.Paintable>
[javac]
@com.vaadin.ui.ClientWidget(org.vaadin.hezamu.bargraph.widgetset.client.ui.VBarGraph.class)
[javac]
^
[javac]
D:\BarGraph\src\org\vaadin\hezamu\bargraph\widgetset\client\ui\GraphElement.java:43: cannot find symbol
[javac]
symbol : class FocusPanel
[javac]
location: class org.vaadin.hezamu.bargraph.widgetset.client.ui.GraphElement
[javac]
panel = new FocusPanel();
[javac]
^
[javac]
D:\BarGraph\src\org\vaadin\hezamu\bargraph\widgetset\client\ui\GraphElement.java:49: cannot find symbol
[javac]
symbol : class MouseUpHandler
[javac]
location: class org.vaadin.hezamu.bargraph.widgetset.client.ui.GraphElement
[javac]
panel.addMouseUpHandler(new MouseUpHandler() {
[javac]
^
[javac]
D:\BarGraph\src\org\vaadin\hezamu\bargraph\widgetset\client\ui\GraphElement.java:55: cannot find symbol
[javac]
symbol : class MouseOverHandler
[javac]
location: class org.vaadin.hezamu.bargraph.widgetset.client.ui.GraphElement
[javac]
panel.addMouseOverHandler(new MouseOverHandler() {
[javac]
^
[javac]
D:\BarGraph\src\org\vaadin\hezamu\bargraph\widgetset\client\ui\GraphElement.java:61: cannot find symbol
[javac]
symbol : class MouseOutHandler
[javac]
location: class org.vaadin.hezamu.bargraph.widgetset.client.ui.GraphElement
[javac]
panel.addMouseOutHandler(new MouseOutHandler() {
[javac]
^
[javac]
D:\BarGraph\src\org\vaadin\hezamu\bargraph\widgetset\client\ui\VBarGraph.java:39: cannot find symbol
[javac]
symbol : class Widget
[javac]
location: class org.vaadin.hezamu.bargraph.widgetset.client.ui.VBarGraph
[javac]
private List<Widget> widgets = new ArrayList<Widget>();
[javac]
^
[javac]
D:\BarGraph\src\org\vaadin\hezamu\bargraph\widgetset\client\ui\VBarGraph.java:58: cannot find symbol
[javac]
symbol : class HTML
[javac]
location: class org.vaadin.hezamu.bargraph.widgetset.client.ui.VBarGraph
[javac]
add(label = new HTML(), 5, 5);
[javac]
^
[javac]
D:\BarGraph\src\org\vaadin\hezamu\bargraph\widgetset\client\ui\VBarGraph.java:61: cannot find symbol
[javac]
symbol : method setStyleName(java.lang.String)
[javac]
location: class org.vaadin.hezamu.bargraph.widgetset.client.ui.VBarGraph
[javac]
setStyleName(CLASSNAME);
[javac]
^
[javac]
D:\BarGraph\src\org\vaadin\hezamu\bargraph\widgetset\client\ui\VBarGraph.java:70: cannot access com.google.gwt.user.client.ui.Widget
[javac]
class file for com.google.gwt.user.client.ui.Widget not found
[javac]
if (client.updateComponent(this, uidl, true)) {
[javac]
^
[javac]
D:\BarGraph\src\org\vaadin\hezamu\bargraph\widgetset\client\ui\VBarGraph.java:81: cannot access com.google.gwt.core.client.JavaScriptObject
[javac]
class file for com.google.gwt.core.client.JavaScriptObject not found
[javac]
paintableId = uidl.getId();
[javac]
^
[javac]
D:\BarGraph\src\org\vaadin\hezamu\bargraph\widgetset\client\ui\VBarGraph.java:150: cannot find symbol
[javac]
symbol : class Widget
[javac]
location: class org.vaadin.hezamu.bargraph.widgetset.client.ui.VBarGraph
[javac]
for (Widget widget : widgets) {
[javac]
^
[javac]
D:\BarGraph\src\org\vaadin\hezamu\bargraph\widgetset\client\ui\VBarGraph.java:161: cannot find symbol
[javac]
symbol : class Label
[javac]
location: class org.vaadin.hezamu.bargraph.widgetset.client.ui.VBarGraph
[javac]
Label lineDiv = new Label();
[javac]
^
[javac]
D:\BarGraph\src\org\vaadin\hezamu\bargraph\widgetset\client\ui\VBarGraph.java:161: cannot find symbol
[javac]
symbol : class Label
[javac]
location: class org.vaadin.hezamu.bargraph.widgetset.client.ui.VBarGraph
[javac]
Label lineDiv = new Label();
[javac]
^
[javac]
D:\BarGraph\src\org\vaadin\hezamu\bargraph\widgetset\client\ui\VBarGraph.java:212: cannot find symbol
[javac]
symbol: class MouseOverEvent
[javac]
MouseOverEvent event) {
[javac]
^
[javac]
D:\BarGraph\src\org\vaadin\hezamu\bargraph\widgetset\client\ui\VBarGraph.java:219: cannot find symbol
[javac]
symbol: class MouseOutEvent
[javac]
MouseOutEvent event) {
[javac]
^
[javac]
D:\BarGraph\src\org\vaadin\hezamu\bargraph\widgetset\client\ui\VBarGraph.java:245: cannot find symbol
[javac]
symbol : class HTML
[javac]
location: class org.vaadin.hezamu.bargraph.widgetset.client.ui.VBarGraph
[javac]
HTML levelLabel = new HTML(scaleText);
[javac]
^
[javac]
D:\BarGraph\src\org\vaadin\hezamu\bargraph\widgetset\client\ui\VBarGraph.java:245: cannot find symbol
[javac]
symbol : class HTML
[javac]
location: class org.vaadin.hezamu.bargraph.widgetset.client.ui.VBarGraph
[javac]
HTML levelLabel = new HTML(scaleText);
[javac]
^
[javac]
D:\BarGraph\src\org\vaadin\hezamu\bargraph\widgetset\client\ui\VBarGraph.java:274: cannot find symbol
[javac]
symbol : variable super
[javac]
location: class org.vaadin.hezamu.bargraph.widgetset.client.ui.VBarGraph
[javac]
super.setWidth(width);
[javac]
^
[javac]
D:\BarGraph\src\org\vaadin\hezamu\bargraph\widgetset\client\ui\VBarGraph.java:259: method does not override or implement a method from a supertype
[javac]
@Override
[javac]
^
[javac]
D:\BarGraph\src\org\vaadin\hezamu\bargraph\widgetset\client\ui\VBarGraph.java:296: cannot find symbol
[javac]
symbol : variable super
[javac]
location: class org.vaadin.hezamu.bargraph.widgetset.client.ui.VBarGraph
[javac]
super.setHeight(height);
[javac]
^
[javac]
D:\BarGraph\src\org\vaadin\hezamu\bargraph\widgetset\client\ui\VBarGraph.java:282: method does not override or implement a method from a supertype
[javac]
@Override
[javac]
^
[javac]
45 errors
BUILD FAILED
D:\BarGraph\build.xml:84: Compile failed; see the compiler error output for details.
Total time: 2 seconds
The classpath for the GWT compiler is different from Eclipse’s or your project’s classpath. For this reason the build.xml contains two properties (called “gwt-user-location” and “gwt-dev-location”) that should contain the absolute path to the directories where the gwt-user.jar and gwt-dev.jar are found, respectively.
I make the compiler to be jdk1.7 instead of jre.
I set these in the Environment Variables:
classpath point to C:\Program Files\Documentum\dctm.jar;C:\Documentum\config;%GWT_HOME%;%GWT_HOME%\gwt-user.jar;%GWT_HOME%\gwt-dev.jar;%GWT_HOME%\gwt-servlet.jar;%junit%
GWT_HOME D:\products\DSS 2012\eclipse-jee-indigo-SR2-win32\eclipse\plugins\com.google.gwt.eclipse.sdkbundle_2.4.0.v201205021203-rel-r37\gwt-2.4.0
JAVA_HOME “C:\Program Files\Java\jdk1.7.0_05”
junit %JUNIT_HOME%\junit.jar
JUNIT_HOME D:\products\DSS 2012\eclipse-jee-indigo-SR2-win32\eclipse\plugins\org.junit_4.8.2.v4_8_2_v20110321-1705
In the eclipse → Preferences → Java → compiler → Compiler compliance level to 1.7
In the eclipse → Preferences → Java → Installed JREs → set it to jdk1.7.0_05