VisualizationsForVaadin
updated… Now supports Google Chart Tools (aka Visualization) Library 1.1
New Charts added Motion Chart, Sparkline,AreaChartImage, PieChartImage, LineChartImage, BarChartImage, Image based charts such as RadarChart (more demos to follow based around Image).
See
DemoSite
for demos
Hi! Have you investigated adding the data as a
Resource
? This would nicely map to an URL at the client side and data could be json all the way.
Hey. I took VisualiztionsForVaadin into use in one of my projects, and it works quite neatly. I would just have a few feature requests:
Put support that the widget’s size (setHeight(“50px”), setSizeFull() etc.) goes to the chart as well. I was wondering a while why my chart’s size didn’t change when I changed the size, before I noticed that you have to call setOption(“height”,200); too.
There is no support for relative sizes for the chart. setSizeFull() would be neat to use at many places. I guess the widget itself can report the size of it after a render, and that info can be passed to the chart.
Instead of calling setOption(“backgroundColor”,“blue”), it would be cool to be able to call setBackgroundColor(“blue”). This way it would be way easier to see what you can do with the API instead of having to search for the gwt visualization manual online and search which keywords are allowed.
There is no way to change the colors of the bars/columns/etc. (option ‘colors’) of a chart as there is no API that allows setOption(String, String)
Just a few minor things… 
Hi, cool plugin.
Is there a documentation out there? I would like to know names and function of the options i can set via
visual.setOption(…)
cheers
stefan
I ran into the need to specify colors as well.
New to Vaadin, I couldn’t see a nice way to fix universally in the add on, but wanted to share the hack that kept my project moving along:
Created new Vaadin component, extending org.vaadin.vaadinvisualizations.AreaChart. Added setColors method. Pass through as string and then grab it on the other side and set the GWT Visualization API option.
package xxx.webapp.visualization;
import org.vaadin.vaadinvisualizations.AreaChart;
/**
* Server side component for the VBlazeAreaChart widget.
* This is a specialization of the stock AreaChart included in Vaadin for Visualizations
* to include ability to set colors.
*/
@com.vaadin.ui.ClientWidget(com.blaze.webapp.client.ui.VMyAreaChart.class)
public class MyAreaChart extends AreaChart
{
private static final long serialVersionUID = -6228491197611106931L;
public MyAreaChart()
{
super();
}
/**
* Set the colors option
*
* @param space delimited list of color strings, for instance "red green #0000ff"
*/
public void setColors(String colors){
this.setOption("colors", colors);
}
}package xxx.webapp.client.ui;
import org.vaadin.vaadinvisualizations.widgetset.client.ui.VAreaChart;
import com.google.gwt.ajaxloader.client.Properties.TypeException;
import com.google.gwt.visualization.client.AbstractDataTable;
import com.google.gwt.visualization.client.AbstractDrawOptions;
import com.google.gwt.visualization.client.visualizations.AreaChart.Options;
import com.vaadin.terminal.gwt.client.ApplicationConnection;
/**
* Client side widget which communicates with the server. Messages from the
* server are shown as HTML and mouse clicks are sent to the server.
*/
public class VMyAreaChart extends VAreaChart {
/**
* The constructor should first call super() to initialize the component and
* then handle any initialization relevant to Vaadin.
*/
public VMyAreaChart() {
super();
}
/**
* Before we draw, pull out "special" string options, such as
* colors, parse into complex data type and assign to options object.
*/
@Override
protected void drawChart(AbstractDataTable data, AbstractDrawOptions options) {
Options ops = (Options)options;
try {
String colors = ops.getString("colors");
if (colors != null){
ops.remove("colors");
ops.setColors(colors.split("\\s"));
}
} catch (TypeException e) {
ApplicationConnection.getConsole().error(e.toString());
}
super.drawChart(data, options);
}
}
VisualizationComponent.java seems to have some support for string arrays in paintOptions so it might be enough to just add a method that can add string array options to that class.
public void setOption(String name, String[] value) {
this.options.put(name, value);
}and then just call it with
chart.setOption("colors",new String[]{"blue", "red", "#00ff00"});Haven’t tested this out but it is such a dead simple change so it’s worth the shot. Then again, it’s not much work to implement the logic into VVisualizationComponent too if it isn’t there yet.
This change would trickle down to every component all at once.
My first thought as well but after looking at it a bit unfortunately I think its not quite that close to working. There is string array handling in VisualizationComponent.java, but appears that corresponding plumbing is missing on the VVisualizationWidget.java side – I looked at adding but I suspect its was omitted because the AbstractDrawOptions object VVisualizationWidget works with doesn’t support a .set(String, String) method. Instead looks like classes extending VVisualizationWidget, such as VAreaChart and others would need to call .setColors(String
) on their own Option objects. Which would be doable and better than status quo in my opinion. So I’ll see about sending a patch or getting SVN permissions.
The issue doesn’t really end with colors, there are other options of type JavaScriptObject on the Google Visualization API that we currently don’t have a way to set, but I’m not sure how to best tackle that.
I thought I could give it a shot and I ran into the same thing - AbstractDrawOptions doesn’t allow stringarrays. Looking at the stack, however, I would think it would be better to use CommonChartOptions over AbstractDrawOptions in VVisualizationWidget. CommonChartOptions extend CommonOptions, which extends AbstractDrawOptions, and for example CommonOptions has the function ‘public final native void setColors(JsArrayString colors)’, and all the other goodies that could be directly called upon.
I think it would be a fine addition to pass along this whole API all the way to the server side, instead of having a setOption(name, value). That way you have a clear list of things you could call on, instead of having to check the visualization dev page for a list of allowed options.
(And the other feature I would like to see would be that the chart width and height would be taken directly from the component size on runtime)
Hello all,
How can I add Polylines, Polygons, Overlays using this Add-on?
Thank you for the help,
-RP
Hi Jens…could you solve item 2 regarding relatives sizes?
regards,
Hugo
Hey can anyone tell me how can I get image of the interactive visualzationForVaadin charts. Or , is there a method through which I can get svg of current chart?? Please do reply…
Dear All,
Do you know if the VisualizationForVaadin works offline without connecting to internet or not?
if not Would you please to give me the component that can be used offline? (I want to use Gauge component)
Thanks all,
Google FAQ
Yes, I know that it cannot be used offline. VisualizationsForJava is “simply” a wrapper for the Google Visualization API, and that cannot be used offline - see the
I am not aware of any other Vaadin components that can display Gauges : there are various javascript libraries out there than display gauges, but you’ll have to develop your own Vaadin wrappers for them.
Gauge (MIT License)
jGauge (MIT)
JustGage (MIT)
NB: Have not used any of these myself, just results of a quick google.
Cheers,
Charles