Highcharts for Vaadin 7
Highcharts wrapper for Vaadin 7+
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
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