How to add d3 (javascript) to a vaadin application?

Question

Good evening guys,

I\'m currently trying to add the visualization functionality of d3 to my vaadin application. If you don\'t know what d3 is, here is a quick link: htt

Answer 1

The most comprehensive way to incorporate an existing javascript library is develop your own custom component. This is a little more involved than "normal" Vaadin development, but will give you full access to javascript methods and objects (via GWT) in the browser.

To just include an external javascript file into the page, extend the ApplicationServlet class, and override the writeAjaxPageHtmlVaadinScripts method. Here is an extract from a current project that includes some external libraries.

You can then utilise those libraries using 'getMainWindow().executeJavaScript(blah)'

Still, from what I can see of d3 it makes more sense to develop a custom Vaadin component. You might find it more prudent to see if there is an existing GWT d3 widget, and then try and utilise that in a Vaadin component.

@Override
protected void writeAjaxPageHtmlVaadinScripts(Window window,
                                              String themeName, Application application, BufferedWriter page,
                                              String appUrl, String themeUri, String appId,
                                              HttpServletRequest request) throws ServletException, IOException {
  page.write("<script type=\"text/javascript\">\n");
  page.write("//<![CDATA[\n");
  page.write("document.write(\"<script language='javascript' src='" + appUrl + "/VAADIN/scripts/jquery/jquery-1.4.4.min.js'><\\/script>\");\n");
  page.write("document.write(\"<script language='javascript' src='" + appUrl + "/VAADIN/scripts/highcharts/highcharts.js'><\\/script>\");\n");
  page.write("document.write(\"<script language='javascript' src='" + appUrl + "/VAADIN/scripts/highcharts/modules/exporting.js'><\\/script>\");\n");
  page.write("//]]>\n</script>\n");
  super.writeAjaxPageHtmlVaadinScripts(window, themeName, application,
      page, appUrl, themeUri, appId, request);
}

Answer 2

I know its too late but i started with integration of D3js and Vaadin . I got some resources . It might help someone who is on this track First of all Best book out there for Vaadin is Book Of Vaadin This book will help you get the thorough knowledge of Vaadin Also it has been recommended for Vaadin certification

Click Here to download Book Of Vaadin

1) Freecode Charts And D3 Wrapper

2) Integration of D3 with Vaadin

If You get any error in this tutorial try to refer this link --> Vaadin forum

3)Direct use of d3 libraray