Vaadin 8 wrapper for the Chart.js charting library. https://github.com/chartjs/Chart.js
Follow me on 
If you like the project please star it on Github and in the Vaadin directory.
I you find a bug of have a question ask it in a kind and reproducable way. I do this mostly in my spare time and for fun.
If you want to buy me a beer :), here is my paypal link.
- Fluent api to configure the charts
- Supported chart types are
- Horizontal bar chart
- Vertical bar chart
- Line chart
- Donut chart
- Pie chart
- Polar area chart
- Bubble chart
- Radar chart
- Scatter line chart
- Zoom/Pan support
- Line and box annotations
- Data point click listener
If you want to run the demo application locally, see the demo repository
Get the addon from https://vaadin.com/directory#!addon/chartjs-add-on.
You can download the addon there as well, but you will need to create a free vaadin account first. For Maven style dependencies please use below settings.
Repository
<repositories>
<repository>
<snapshots>
<enabled>false</enabled>
</snapshots>
<id>central</id>
<name>bintray</name>
<url>http://jcenter.bintray.com</url>
</repository>
</repositories>
Dependency
<dependencies>
<dependency>
<groupId>com.byteowls</groupId>
<artifactId>vaadin-chartjs</artifactId>
<version>use.lastest.version</version>
</dependency>
</dependencies>
Repository
repositories {
jcenter()
}
Dependency
dependencies {
compile ("com.byteowls:vaadin-chartjs:use.lastest.version")
}
The basic usage is always the same. You need to create a new ChartJs() and configure it with a chart type specific config.
For more examples please see the demo app
ChartJs myChart = new ChartJs(config);
// enable logging to the javascript console. You can see some interessenting things there ;). Please do not use this in production because it's only needed for debugging.
myChart.setJsLoggingEnabled(true);
myChart.setWidth(50, Unit.PERCENTAGE);
// add a data point clicklistener
myChart.addClickListener((datasetIdx, dataIdx) -> {
BarDataset dataset = (BarDataset) barConfig.data().getDatasets().get(datasetIdx);
Notification.show("BarDataset at idx:" + datasetIdx + "; Data: idx=" + dataIdx + "; Value=" + dataset.getData().get(dataIdx), Type.WARNING_MESSAGE);
});
In this example we configure a horizontal bar chart with 3 dataset and add some random numbers to each of them.
BarChartConfig config = new BarChartConfig();
config
.data()
.labels("January", "February", "March", "April", "May", "June", "July")
.addDataset(new BarDataset().type().label("Dataset 1").backgroundColor("rgba(151,187,205,0.5)").borderColor("white").borderWidth(2))
.addDataset(new LineDataset().type().label("Dataset 2").backgroundColor("rgba(151,187,205,0.5)").borderColor("white").borderWidth(2))
.addDataset(new BarDataset().type().label("Dataset 3").backgroundColor("rgba(220,220,220,0.5)"))
.and();
config.
options()
.responsive(true)
.title()
.display(true)
.position(Position.LEFT)
.text("Chart.js Combo Bar Line Chart")
.and()
.done();
List<String> labels = config.data().getLabels();
for (Dataset<?, ?> ds : config.data().getDatasets()) {
List<Double> data = new ArrayList<>();
for (int i = 0; i < labels.size(); i++) {
data.add((double) (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100));
}
if (ds instanceof BarDataset) {
BarDataset bds = (BarDataset) ds;
bds.dataAsList(data);
}
if (ds instanceof LineDataset) {
LineDataset lds = (LineDataset) ds;
lds.dataAsList(data);
}
}
ChartJs chart = new ChartJs(config);
chart.setJsLoggingEnabled(true);
return chart; Please have a look at the great documentation at ChartJs. (http://www.chartjs.org/docs)
You will see that every fluent api method under config.options() has a counterpart in the javascript json config.
- JDK 8
- Vaadin 8 or higher
The Vaadin-Chartjs is only a wrapper. So if you have any feature requests or found any bugs in the javascript lib please use Chart.js's issue tracker https://github.com/chartjs/Chart.js/issues
In all other cases please create a issue at https://github.com/moberwasserlechner/vaadin-chartjs/issues or contribute to the project yourself. For contribution see the next section.
Please do not mix more than one issue in a feature branch. Each feature/bugfix should have its own branch and its own Pull Request (PR).
- Create a issue and describe what you want to do at Issue Tracker
- Create your feature branch (
git checkout -b feature/my-featureorgit checkout -b bugfix/my-bugfix) - Test your changes to the best of your ability.
- Add a demo view to the demo application
- Commit your changes (
git commit -m 'Describe feature or bug') - Push to the branch (
git push origin feature/my-feature) - Create a Github Pull Request
This repo includes a .editorconfig file, which your IDE should pickup automatically.
If not please use the sun coding convention. Please do not use tabs at all!
Try to change only parts your feature or bugfix requires.
MIT. Please see LICENSE.