How to connect Vaadin7 to highchart.js

Hi everyone,
this weekend I tested VAADIN 7.beta1 and new javascript connectors. Now I 'd like to show how integrate highcharts.js in an easy way.

  1. Set up VAADIN 7 project with new experimental Eclipse Plugin with usage of a latest nighly build (or take this other
    , sorry I cannot upload my files to the forum)
  2. Download highchart.js from and put it in same directory where also following classes stay
  3. Put js_highchart.js in the same directory
  4. Take my code for the following classes and run the project…

Enjoy my easy “half a day” integration of highchart.js… :slight_smile:

ps… feel free to provide me your feedback what I can do in a better way :slight_smile:

Best regards

package com.example.javascriptdemo;

import com.vaadin.annotations.JavaScript;
import com.vaadin.ui.AbstractJavaScriptComponent;

@JavaScript({ "", "highcharts.js", "js_highchart.js"})
public class JsHighChart extends AbstractJavaScriptComponent
	private static final long serialVersionUID = 1913474773889181118L;

	public JsHighChart()
		getState().data = data;
		getState().title = "MyChart";
		getState().units = "MyUnits";

	public JsHighChartState getState()
		return (JsHighChartState) super.getState();
	String data = "Categories,Apples,Pears,Oranges,Bananas\n" +
			"John,8,4,6,5\n" +
			"Jane,3,4,2,3\n" +
			"Joe,86,76,79,77\n" +

package com.example.javascriptdemo;

import com.vaadin.shared.ui.JavaScriptComponentState;

public class JsHighChartState extends JavaScriptComponentState
	private static final long serialVersionUID = -1016346299843904188L;
	public String data;
	public String title;
	public String units;

package com.example.javascriptdemo;

import com.vaadin.server.WrappedRequest;
import com.vaadin.ui.*;

public class JavascriptdemoUI extends UI {

	private static final long serialVersionUID = 2169060678592185114L;

	public void init(WrappedRequest request) {
		JsHighChart chart = new JsHighChart();


com_example_javascriptdemo_JsHighChart = function() 
	var element = $(this.getElement());
        // getData
	var title = this.getState().title;
	var data = this.getState().data;
	var units = this.getState().units;
	this.onStateChange = function() 
    function readDataAndDraw()
		var id = document.getElementById("myJSComponent");
		// double check if we really found the right div
                if (id == null) return;
		if( != "myJSComponent") return;
		var options = {
			    chart: {
			        renderTo: 'myJSComponent',
			        defaultSeriesType: 'line',
		            marginRight: 130,
		            marginBottom: 25
			    title: {
			        text: title
	            legend: {
	                layout: 'vertical',
	                align: 'right',
	                verticalAlign: 'top',
	                x: -10,
	                y: 100,
	                borderWidth: 0
			    xAxis: {
			        categories: []
			    yAxis: {
			        title: {
			            text: units
			    series: []
	    // Split the lines
	    var lines = data.split('\n');	    
	    // Iterate over the lines and add categories or series
	    $.each(lines, function(lineNo, line) {
	        var items = line.split(',');
	        // header line containes categories
	        if (lineNo == 0) {
	            $.each(items, function(itemNo, item) {
	                if (itemNo > 0) options.xAxis.categories.push(item);
	        // the rest of the lines contain data with their name in the first position
	        else {
	            var series = {
	                data: []
	            $.each(items, function(itemNo, item) {
	                if (itemNo == 0) {
	           = item;
	                } else {
	    // Create the chart
	    var chart = new Highcharts.Chart(options);

Looks very interesting. Thank you!

Do you think this can allow us to use Highcharts-3 alongside Vaadin Charts that are based on Highcharts-2? We would like to use the new chart types but our app is actually still Vaadin-6. This would be a big incentive for an upgrade.



Note also that Vaadin Charts will support HighCharts 3.0 (with Vaadin 7) - see
the roadmap

Very nice! We had to make a custom component for funnel and seeing that Highcharts 3.0 has it is great news and that Vaadin Charts 1.1 will support it as well.

But!.. I found this post and thought may be we can upgrade to Vaadin 7 and use Highcharts 3.0 funnel already.

Something isn’t working tho… No errors but the chart in the example above isn’t being drawn.

Edit: Got it working with Highcharts-3.0! Now to test if I can combine that with Vaadin Charts.


Vaadin Charts has been designed so that developers can override higcharts scripts (and possible plugins) they are using.

I updated our example project so that it uses Highcharts 3 beta and its funnel chart plugin. Previously it just had heat map example.

Check out
this project
if you need that today. We will probably cover that in some blog entry at some point.



For some reason it cannot find the vaadin-charts-1.0.0-SNAPSHOT in any of the repositories.

Please advise. We are planning to start the vaadin7 upgrade soon and that funnel would be very handy.

EDIT: Switched it to vaadin-7.0.1 and vaadin-charts-1.0.0 and it compiles at least… will run it in a sec…

EDIT: VERY NICE! Thank you for this example! We will definitely consider using it right now. And the map is another chart that we currently use.

Thank you,