Vaadin Highcharts integration


I want zu integrate highcharts in vaadin. how can i tell vaadins self created index.html file to load external javascript resources like jquery.js? or is there another way to solve this problem?



To add javascript to the header, override e.g. AbstractApplicationServlet.writeAjaxPageHtmlVaadinScripts(), call the super method and add your own scripts after that. For jQuery, a quick search also finds e.g.
this example

Disclaimer: I know nothing about highcharts or what it would require, especially in terms of communications and setting up the chart contents - you would probably need to write your own Vaadin add-on with a client side widget to expose the API on the server side. If you do, publishing it in the
would also let others benefit from it.

Note also that there are several other integrations of chart libraries with Vaadin, e.g. the
JFreeChart wrapper

at first I used Embedded to load external jsp page that created chart.
then, I made simple add-on instead:

to load external javascript resources like jquery.js you can extend com.vaadin.terminal.gwt.server.ApplicationServlet class (writeAjaxPageHtmlHeader method).

for example:

public class MyApplicationServlet extends ApplicationServlet {
	private static final long serialVersionUID = 1L;

    protected void writeAjaxPageHtmlHeader(final BufferedWriter page, String title, String themeUri) throws IOException {
        page.write("<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\"/>\n");
        page.write("<style type=\"text/css\">"
                + "html, body {height:100%;margin:0;}</style>");
        // your code here
        page.write("<script type=\"text/javascript\" src=\""+ themeUri + "/js/jquery-1.4.2.min.js\"></script>");
        page.write("<script type=\"text/javascript\" src=\""+ themeUri + "/js/highcharts-2.0.4.js\"></script>");
        // -- your code here

        // Add favicon links
        page.write("<link rel=\"shortcut icon\" type=\"image/\" href=\""
                        + themeUri + "/favicon.ico\" />");
        page.write("<link rel=\"icon\" type=\"image/\" href=\""
                        + themeUri + "/favicon.ico\" />");
        page.write("<title>" + title + "</title>");


don’t forget to change your web.xml:

  	<servlet-name>HighCharts Application</servlet-name>
  		<description>Vaadin application class to start</description>
  		<description>Application widgetset</description>

nice addon @ doctor j :wink: I’m just about to implement it.

and thx for the explanation how to load the external javascript resources :wink:

best regards,


Does this Add-on support HighStock also?

Thanks for this add-on. I switched from InvientCharts to this one because it’s more flexible.

Do you plan a version for Vaadin7?
Or could you release the sources so that other people can port it to V7?

Note that there is now also the commercial, maintained chart add-on
Vaadin Charts
(available for Vaadin 7), which uses HighCharts and includes a license of HighCharts for use via the add-on. A new version of the Vaadin Charts add-on is under work, supporting the latest HighCharts version and more features.