How to add the d3 javascript librariy to vaadin ?

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: http://d3js.org/

Yet I am stuck with some problems:

  • How can I add the “d3.v2.js” javascript file/library, that is necessary for developing with d3? I tried adding it to an own theme (WebContent/VAADIN/themes/myOwnTheme/…), but through refreshing I’m getting the message: “Errors occurred during the build. Errors running builder ‘JavaScript Validator’ on project ‘VaadinD3Testproject’. 14”. I guess that’s because the js-file might be too large with around 8000 lines ? I read about somehow adding the file to the web.xml? Is there a way?

  • How can I then add javascript code to my application? After my research I know that there are the options to use:

getMainWindow().executeJavaScript(“alert(‘foo’);”)

or

Label test = new Label(“<p onmouseover="alert(‘hello’);">move mouse over here…

”,Label.CONTENT_XHTML);

→ Are there any other ways to integrate javascript code ?

Could someone help me with an kind of “step by step” explanation, how to solve both ways? Help would really be appreciated here, since I’m not that experienced with this.

I fixed this error appearing, it was a problem with my eclipse and the inbuild javascript validator. I was now able to load the js-file into my application by overwriting the ajax class with an own servlet, as it has been described here in several posts.

I have now tried several ways:

  • getMainWindow.executeJavaScript() doesn’t work in a way that I could use d3 with, somehow as soon as I want to add some d3 code, like “d3.select(“body”) .append(“svg”);”, it just doesn’t execute it (no matter if I do the tags around or not, but I noticed in general that code in tags wont get executed)

  • I tried using a CustimLayout, as it has been shown in some examples of this forum, but it’s again like described above. When I check the websites sourcecode my code is simply missing or parsed out

  • Labels wont work anymore, no matter if XHTML or RAW mode, exception occures

  • Overwriting another servlet method that is called when the bodys is built at server start, the result was that I got an error message that vaadin couldn’t even load the default widgetset anymore.

So, what’s left? Is there really no way to integrate d3 with vaadin? Did never anyone try this? I read a lot also yesterday about the upcoming vaadin 7 (and it sounds really good, congratulations to that! :slight_smile: ). But would it even be kind of an option to use an alpha version from which I have no idea about its stability (I guess that’s why it’s called alpha :stuck_out_tongue: )

Thanks for every thought you’re sharing with me

Don’t know about the issues you have as I haven’t had to integrate much JS to my Vaadin applicaitons. I wanted to say however that I have been glad with the quality of alpha 1 and 2 and have been using it in real projects. I haven’t tested alpha 3 so can’t speak for that but I guess it would be worth the shot for you. Alpha 3 added the new JS interface which should make all those tasks easier.

Converting to Vaadin 7 is fairly easy. The only new part that you have to know is Root with replaces the application and main window -combo. Then there’s also a few methods that have been moved away from window into their own classes like Window.showNotification(message) → Notification.show(message). That’s about it.