Vaadin Component from Google charts html code

General
1

Hello everyone!

First of all, I would like to extend my congratulations to the people involved on this amazing project.

I have started using Vaadin a few weeks ago, and I have been able to create web pages using Vaadin components without having problems.

Now I am trying with something a little bit more specific, and after searching in the forum and on the internet for days, I decided to post my question here.

Here is the case: In this project, I need to use some gwt google charts, this one for example https://google-developers.appspot.com/chart/interactive/docs/gallery/scatterchart
I went through chapter 11 of Vaadin book (https://vaadin.com/book/-/page/gwt.html), which shows how to create Vaadin components from GWT widgets, but on the examples presented it uses Java code, which then Vaadin compiles an does all the magic tricks needed to show the component in the web page.

But as you can see, on the google charts gallery, what you have to do is insert html code.

So, my question is, is it possible to create my own Vaadin component using code as the one provided by google on the charts gallery??

Thanks in advance!
Lea

2

I believe that what you are trying to do has already been done in the
VisualizationsForVaadin
-addon.

3

Use an Embedded to Display the Code.

4

Thanks for the answers, this is the code for one specific google chart:


<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]
});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Age', 'Weight']
,
          [ 8,      12]
,
          [ 4,      5.5]
,
          [ 11,     14]
,
          [ 4,      5]
,
          [ 3,      3.5]
,
          [ 6.5,    7]

        ]);

        var options = {
          title: 'Age vs. Weight comparison',
          hAxis: {title: 'Age', minValue: 0, maxValue: 15},
          vAxis: {title: 'Weight', minValue: 0, maxValue: 15},
          legend: 'none'
        };

        var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Regarding the VisualizationsForVaadin addon, I am not really sure on how to use it, I’ve just downloaded the jar file, but there are no instructions…

Thanks again,

5

Do something like the following:

package com.example.googlecharts;

import java.io.ByteArrayInputStream;
import java.io.InputStream;

import com.vaadin.Application;
import com.vaadin.terminal.StreamResource;
import com.vaadin.terminal.StreamResource.StreamSource;
import com.vaadin.ui.Embedded;
import com.vaadin.ui.Window;

public class GooglechartsApplication extends Application {
	
	private static class ChartStreamSource implements StreamSource {
		
		private static final byte[] HTML = "<html><head><script type=\"text/javascript\" src=\"https://www.google.com/jsapi\"></script><script type=\"text/javascript\">google.load(\"visualization\", \"1\", {packages:[\"corechart\"]
});google.setOnLoadCallback(drawChart);function drawChart() {var data = google.visualization.arrayToDataTable([['Age', 'Weight']
,[ 8,      12]
,[ 4,      5.5]
,[ 11,     14]
,[ 4,      5]
,[ 3,      3.5]
,[ 6.5,    7]
]);var options = {title: 'Age vs. Weight comparison',hAxis: {title: 'Age', minValue: 0, maxValue: 15},vAxis: {title: 'Weight', minValue: 0, maxValue: 15},legend: 'none'};var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));chart.draw(data, options);}</script></head><body><div id=\"chart_div\" style=\"width: 900px; height: 500px;\"></div></body></html>".getBytes();

		public InputStream getStream() {
			return new ByteArrayInputStream(HTML);
		}
		
	}
	
	@Override
	public void init() {
		Window mainWindow = new Window("Googlecharts Application");
		
		Embedded chart = new Embedded();
		chart.setWidth("1000px");
		chart.setHeight("600px");
		chart.setType(Embedded.TYPE_BROWSER);
		chart.setSource(new StreamResource(new ChartStreamSource(), "chart", this));
		
		mainWindow.addComponent(chart);
		setMainWindow(mainWindow);
	}

}
6

That’s what I was looking for, thank you very much!

7

It downloading the content to file when i run this code in chrome/firefox but works fine in safari

8

Tried the example and works in IE as well but how do you prevent Chrome/Firefox from downloading the content?

9

StreamResource res = new StreamResource(new ChartStreamSource(), “”);
res.setMIMEType(“text/html; charset=utf-8”);

10

Works nicely. Thank you!

11

Is this trick still working on Vaadin 7 ?

12

It isn’t working (notice that it’s only compatible with vaadin 6). I’ve been trying to get google charts work but without luck…