Directory

← Back

Highcharts for Vaadin 7

Highcharts wrapper for Vaadin 7+

Author

Rating

Popularity

100+

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]}] };")

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Released
2017-04-02
Maturity
STABLE
License
Apache License 2.0

Compatibility

Framework
Vaadin 8.0+
Vaadin 7.0+ in 1.1
Vaadin 7.7+ in 1.2
Browser
Firefox
Opera
Safari
Google Chrome
iOS Browser
Android Browser
Internet Explorer
Microsoft Edge

Highcharts for Vaadin 7 - Vaadin Add-on Directory

Highcharts wrapper for Vaadin 7+ Highcharts for Vaadin 7 - Vaadin Add-on Directory
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.
Online