Highcharts for Vaadin 7

Highcharts wrapper for Vaadin 7+

View larger

Close

This add-on provides a Highcharts wrapper for Vaadin 7 and 8 similar to https://vaadin.com/addon/highcharts. In contrast to Vaadin Charts this add-on does not provide a fancy Java API to configure charts. Instead it basically provides a chart component with a method that allows you to set Highcharts JavaScript code to configure the chart. This is especially useful if you want to create charts based on templates.

The new add-on version also allows to dynamically update the chart via the method "manipulateChart". Moreover, it allows you to listen to Highcharts events and to call user-defined server functions. For more details about how to manipulate charts and listen to events take a look at the demo and the demo source code (https://github.com/xylo/highcharts-vaadin7/blob/master/src/test/java/org/vaadin/highcharts/HighChartDemoUI.java).

Note that you require a separate Highcharts license to use this add-on unless you use it only in a non-profit project. See http://shop.highsoft.com/highcharts.html for more information.

Sample code

// Download jquery and highcharts.js (if not already loaded in your webapp) and save them in the resource directory org/vaadin/highcharts.
// Create a new class in the package org.vaadin.highcharts (e.g. "HighChart") and inherit it from AbstractHighChart.
// Then add a proper JavaScript annotation to the newly created class in order to load all necessary JavaScript libraries that
// you need (e.g. jquery.js, highcharts.js, highcharts-more.js, ...). Make sure your project complies with the licenses of those libraries.
// At the end of this list add "highcharts-connector.js".
package org.vaadin.highcharts;
@JavaScript({"jquery-min.js", "highcharts.js", "highcharts-connector.js"})
public class HighChart extends AbstractHighChart {
	private static final long serialVersionUID = -7326315426217377753L;
}



// Create and configure a chart.
HighChart chart = new HighChart();
chart.setHcjs("var options = { title: { text: 'test diagram' }, series: [{ name: 's1', data: [1, 3, 2]}] };")

Links

• Online Demo - StockChart
• Project Website
• Issue Tracker
• Source Code
• Online Demo - HighChart
• Highcharts Webseite
• Discussion Forum

Compatibility