Invient Charts is a Vaadin add-on component for creating charts in Vaadin applications.
Supported chart types are:
Line
Spline
Scatter
Area - Line
Area - Spline
Bar
Column
Pie
Compound – i.e., a chart that combines multiple types into one.
FEATURES
Native SVG-based rendering (VML on IE) on desktop and mobile device browsers.
Dynamically add or remove series, axes, or points at any time after creation.
Multiple y or x axes in a graph.
Inverted chart or reversed axis.
Customizable tooltip labels when mousing over a point or series.
Rotatable text labels for points and axis titles.
Click+drag or Touch+drag zooming.
Server-side events upon user interaction.
PREREQUISITES
Invient Charts is a Vaadin wrapper for Highcharts, a JavaScript library. Rendering of the charts on the browser is performed by Highcharts. Invient Charts exposes Highcharts’ features to Vaadin programmers via a server-side API.
LICENSE
Invient Charts is licensed under Apache License 2.0. However, it requires Highcharts JavaScript library which is licensed under separate terms: http://www.highcharts.com/license. You must, therefore, adhere to both licenses to use Invient Charts in your application.
DEMO DATA
The Vaadin demo application of Invient Charts mimics the format and data of Highcharts Demo Gallery at http://www.highcharts.com/demo/.
Absolutely brilliant. Looked at the source code for the examples, very nice.
The only thing I could wish for is the ability to retrieve the generated SVG so that I can process it on the server using Batik. I believe that this is present in some form in the underlying JavaScript library, and it would be amazing if exposed through the Invient library.
I love this add-on. Thanks a lot for sharing this with us.
Since I don’t use J2EE, so I have to make some changes to make it works. The charts are displayed properly. But when I clicked on the chart, an exception will happen if I use IE8. The FireFox works fine. But your online demo does not have this issue in IE. Not sure if my changes cause this…
java.lang.NumberFormatException: For input string: “undefined”
at java.lang.NumberFormatException.forInputString(Unknown Source)
at java.lang.Integer.parseInt(Unknown Source)
at java.lang.Integer.valueOf(Unknown Source)
at com.vaadin.terminal.gwt.server.AbstractCommunicationManager.convertVariableValue(AbstractCommunicationManager.java:1478)
at com.vaadin.terminal.gwt.server.AbstractCommunicationManager.convertMap(AbstractCommunicationManager.java:1507)
at com.vaadin.terminal.gwt.server.AbstractCommunicationManager.convertVariableValue(AbstractCommunicationManager.java:1469)
at com.vaadin.terminal.gwt.server.AbstractCommunicationManager.handleVariableBurst(AbstractCommunicationManager.java:1292)
at com.vaadin.terminal.gwt.server.AbstractCommunicationManager.handleVariables(AbstractCommunicationManager.java:1217)
at com.vaadin.terminal.gwt.server.AbstractCommunicationManager.doHandleUidlRequest(AbstractCommunicationManager.java:733)
at com.vaadin.terminal.gwt.server.CommunicationManager.handleUidlRequest(CommunicationManager.java:296)
at com.vaadin.terminal.gwt.server.AbstractApplicationServlet.service(AbstractApplicationServlet.java:483)
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:127)
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:298)
at org.apache.coyote.http11.Http11Processor.process(Http11Processor.java:859)
at org.apache.coyote.http11.Http11Protocol$Http11ConnectionHandler.process(Http11Protocol.java:588)
at org.apache.tomcat.util.net.JIoEndpoint$Worker.run(JIoEndpoint.java:489)
at java.lang.Thread.run(Unknown Source)
Yes, there is a JS call in the underlying library to fetch the SVG string. But we are not sure how to do it in Vaadin. What we want to do is offer a “chart.getSVG()” on the server side. But we don’t know how to do a round-trip to the client to call the JS function synchronously.
Another approach would be to call the getSVG JS function every time the server side makes a change to the chart, and save the SVG string on the server side. But that would will slow down every server side method. We don’t want to do that.
Does anyone have any ideas on how we can implement this?
No, it is not your change that caused this. We noticed the problem on IE too. It has been fixed. (Well, not IE. That can’t really be fixed :-), but our code has been fixed.)
Perhaps just set a toggle to enter “retrieveSVG” mode and exit. Just dreaming, we could just run the Highchart code in Rhino on the server just to grab the svg
Yes, we can certainly do something like “chart.getSVG(callback method)”. That will make it asynchronous and the callback method will be called when the svg is ready. But wouldn’t that be cumbersome for the caller to deal with an asynchronous call just to get the svg string?
On the other hand, we may not have any elegant option.
That’s an idea. We will probably need more than Rhino for that. We need HTML and SVG. Perhaps webkit on the server side? Is that possible?
Can Vaadin WidgetRPC or GWT RPC help in our case? Need to read up a little more. I am not sure that there is anything out there that is going to help do a synchronous roundtrip call from the server to the client and back.
If you get anything sensible to gather the printable version, you will have a major plus. In yester years I’ve had to resort to “push data in excel with a preset graph” and then convert that to PDF with OpenOffice (UGH).
I am pretty sure that someone has already implemented a Servlet to export highchart Charts to SVG/PNG using Batik on the server side; I am fairly sure there is a configuration option in HighCharts to show a toolbar to export the graph to PDF/PNG by posting the SVG string to a configurable URL).
Release 0.8.2 uploaded a few minutes ago on the Vaadin Directory supports printing and getting SVG.
getSVG(…) is a bit of a pain to use because it is an asynchronous call. You have to register a callback which is called when the SVG is ready. Unfortunately, we are unable to make it synchronous because the SVG is fetched from the client. Until we integrate with some server-side browser component at some point in future, this is all we’ve got.
Other changes:
We added demo code to show off the flicker-free, dynamic updating of charts - i.e., adding and removing points in an existing series. But that code doesn’t work on our hosted demo because we use Google App Engine which doesn’t support threads. You can get a sense of it, however, in the other new demo “Click to add point”.
If any of the “powers that be in Vaadin” is reading this message …
Would you consider offering free app hosting for Add-on Directory demos? A self-service environment integrated with the current Add on authoring interface will be great.
Beautiful.
After playing around with it for a few days, I realized what the team did is remarkable. Without any experience in javascript, I was able to build a website with interactive charts all in Java.
A very nice add-on indeed. Wrapping a component with such a large API as Highcharts must have taken some time.
However, I seem to be having some performance issues with series data creation. I’m creating 32 000 points of data which I know is a lot more than the component can handle, but it’s for a data smoothing prototype that i’m working on.
The code is as follows and takes about 3 minutes to execute. Is this normal or could some optimization be done? Most of the execution time seems to be spent inside series.setSeriesPoints and InvientCharts.areDateTimePointsEqual to be more specific. If I comment that method to always return false execution time drops to about 5 seconds.
Please note that this is just code to create lots of data, I don’t plan on trying to render it all at once. Obviously I could filter the data before wrapping it into the InvientCharts data model, but would be handy if I can keep the raw data in InvientCharts format also.
LinkedHashSet<Series> series = new LinkedHashSet<Series>();
for(int i=0;i<8;i++) {
SeriesConfig cfg = new SeriesConfig();
cfg.setEnableMouseTracking(false);
DateTimeSeries ser = new DateTimeSeries("ser"+i,cfg);
ser.setIncludeTime(true);
LinkedHashSet<DateTimePoint> pts = new LinkedHashSet<DateTimePoint>();
for(int j=0;j<4000;j++) {
DateTimePoint pt = new DateTimePoint(ser,new Date(now+j*1000),Math.random()*i*100+(i*50));
pts.add(pt);
}
long start = new Date().getTime();
ser.setSeriesPoints(pts);
System.out.println("Set series points took:"+(new Date().getTime()-start));
series.add(ser);
}
It looks nice but I have some problems using it. I’m using maven to build the widgetset and everything looks fine but when I try to run the page, I get a blank page with no errors in the log file.
After using ?debug, I can see that there is an error in the javascript.
