Skip to content

Latest commit

 

History

History
205 lines (143 loc) · 7.31 KB

README.md

File metadata and controls

205 lines (143 loc) · 7.31 KB

Vaadin Chart.js Download Travis Twitter Follow

Vaadin 8 wrapper for the Chart.js charting library. https://github.com/chartjs/Chart.js

Follow me on Twitter Follow to be notified about new releases.

Show your appreciation

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.

Features

  • 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

Demo

Vaadin Addon

If you want to run the demo application locally, see the demo repository

Chart.js

Installation

Download

Bintray

Vaadin Directory

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.

Maven

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>

Gradle

Repository

repositories {
  jcenter()
}

Dependency

dependencies {
  compile ("com.byteowls:vaadin-chartjs:use.lastest.version")
}

Usage

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

Bar chart configuration

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; 

Chart Options

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.

Prerequisite

Addon

  • JDK 8
  • Vaadin 8 or higher

Missing something?

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.

Contribute

Fix a bug or create a new feature

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).

  1. Create a issue and describe what you want to do at Issue Tracker
  2. Create your feature branch (git checkout -b feature/my-feature or git checkout -b bugfix/my-bugfix)
  3. Test your changes to the best of your ability.
  4. Add a demo view to the demo application
  5. Commit your changes (git commit -m 'Describe feature or bug')
  6. Push to the branch (git push origin feature/my-feature)
  7. Create a Github Pull Request

Code Style

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.

License

MIT. Please see LICENSE.