Directory

HighCharts

This add-on contains component that can display Highcharts built chart in Vaadin application.

View larger

Close

This add-on contains component that can display Highcharts built chart in Vaadin application.

How to use? Step 1: create HighCharts object - constructor requires String argument (argument value must be equal to highcharts renderTo chart option) Step 2: call drawChart(String hcjs) method.

Note: HighCharts requires jquery and highcaharts javascript files to be available to vaadin application.

Sample code

import com.vaadin.Application;
import com.vaadin.ui.Button;
import com.vaadin.ui.Panel;
import com.vaadin.ui.Window;
import com.vaadin.ui.Button.ClickEvent;

public class HighChartsApplication extends Application {
	private static final long serialVersionUID = 1L;

	private Button drawChartButton;
	private HighCharts hc;
	
	@Override
	public void init() {
		Window mainWindow = new Window("HighCharts Sample Application");
		Panel highChartsPanel = new Panel("HighCharts");
		
		drawChartButton = new Button("Draw chart");
		drawChartButton.addListener(new Button.ClickListener() {
			private static final long serialVersionUID = 1L;

			@Override
			public void buttonClick(ClickEvent event) {
				
				String hcjs = "var chart = new Highcharts.Chart({" +
				"chart: { renderTo: 'container' }," +
				"xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }," +
				"series: [{" +
				"type: 'line', data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], name: 'Temperature' }, {" +
				"type: 'column', data: [194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4], name: 'Rainfall' }]" +
								"});";
				
				hc.drawChart(hcjs);
			}
		});
		
		highChartsPanel.addComponent(drawChartButton);
		highChartsPanel.addComponent(getHc());
		
		mainWindow.addComponent(highChartsPanel);
		setMainWindow(mainWindow);
	}
	
	public HighCharts getHc() {
		if (hc == null) {
		    hc = new HighCharts("container");
		}
		return hc;
	}

}

Links

• Discussion Forum

Compatibility