Directory

← Back

Chart library for Vaadin Flow 14.+

Chart library for Vaadin 14+

Author

Contributors

Rating

It will include wrappers to charts that are available with D3.js and C3.js

Chart implemented:

  • Fluid Bubbles
  • C3Chart: all chart works. Now implementing the API.

Sample code

add(new Label("Liquid Bubbles"));
        HorizontalLayout hl = new HorizontalLayout();
        LiquidBubbleGauge lbg1 = new LiquidBubbleGauge().setLiquidLevel(50.1f).setRadious(100).initialize();
        hl.add(lbg1);

        LiquidBubbleGauge lbg2 = new LiquidBubbleGauge()
                                        .setCircleColor("#FF7777")
                                        .setTextColor("#FF4444")
                                        .setWaveTextColor("#FFAAAA")
                                        .setWaveColor("#FFDDDD")
                                        .setCircleThickness(0.2f)
                                        .setTextVertPosition(0.2f)
                                        .setWaveAnimateTime(1000)
                                        .setLiquidLevel(28)
                                        .initialize();
        hl.add(lbg2);
        
        LiquidBubbleGauge lbg3 = new LiquidBubbleGauge()
                                        .setCircleColor("#D4AB6A")
                                        .setTextColor("#553300")
                                        .setWaveTextColor("#805615")
                                        .setWaveColor("#AA7D39")
                                        .setCircleThickness(0.1f)
                                        .setCircleFillGap(0.2f)
                                        .setTextVertPosition(0.8f)
                                        .setWaveAnimateTime(2000)
                                        .setWaveHeight(0.3f)
                                        .setWaveCount(1)
                                        .setLiquidLevel(60.1f)
                                        .initialize();
        hl.add(lbg3);
        
        
        LiquidBubbleGauge lbg4 = new LiquidBubbleGauge()
                                        .setTextVertPosition(0.8f)
                                        .setWaveAnimateTime(5000)
                                        .setWaveHeight(0.15f)
                                        .setWaveAnimate(false)
                                        .setWaveOffset(0.25f)
                                        .setValueCountUp(false)
                                        .setDisplayPercent(false)
                                        .setLiquidLevel(50)
                                        .initialize();
        hl.add(lbg4);
        
        
        LiquidBubbleGauge lbg5 = new LiquidBubbleGauge()
                                        .setCircleThickness(0.15f)
                                        .setCircleColor("#808015")
                                        .setTextColor("#555500")
                                        .setWaveTextColor("#FFFFAA")
                                        .setWaveColor("#AAAA39")
                                        .setTextVertPosition(0.8f)
                                        .setWaveAnimateTime(1000)
                                        .setWaveHeight(0.05f)
                                        .setWaveAnimate(true)
                                        .setWaveRise(false)
                                        .setWaveOffset(0.25f)
                                        .setTextSize(0.75f)
                                        .setWaveCount(3)
                                        .setLiquidLevel(60.44f)
                                        .initialize();
        hl.add(lbg5);
        
        
        LiquidBubbleGauge lbg6 = new LiquidBubbleGauge()
                                        .setCircleThickness(0.4f)
                                        .setCircleColor("#6DA398")
                                        .setTextColor("#0E5144")
                                        .setWaveTextColor("#6DA398")
                                        .setWaveColor("#246D5F")
                                        .setTextVertPosition(0.52f)
                                        .setWaveAnimateTime(5000)
                                        .setWaveHeight(0.0f)
                                        .setWaveAnimate(false)
                                        .setWaveCount(2)
                                        .setWaveOffset(0.25f)
                                        .setWaveRise(false)
                                        .setTextSize(1.2f)
                                        .setMinValue(30)
                                        .setMaxValue(150)
                                        .setDisplayPercent(false)
                                        .setLiquidLevel(120)
                                        .initialize();
        hl.add(lbg6);
        
        add(hl);
HorizontalLayout hlC3 = new HorizontalLayout();

C3Chart c3Chart1 = new C3Chart()
                                        .setOnInit(new IOnInit() {
                                            @Override
                                            public void onInit() {
                                                LOGGER.log(Level.INFO, "OnInit!!!!!!");
                                            }
                                        })
                                        .setData(new C3Data()
                                                        .setColumnsData(List.of(
                                                                List.of("data1", 30, 20, 50, 40, 60, 50),
                                                                List.of("data2", 200, 130, 90, 240, 130, 220),
                                                                List.of("data3", 300, 200, 160, 400, 250, 250)
                                                        ))
                                                        .setChartType(C3Data.ChartType.BAR)
                                                        .setColors(Map.of("data1", "#ff0000", 
                                                                          "data2", "#00ff00", 
                                                                          "data3", "#0000ff")
                                                        )
                                                        .setHide(false)
                                                )
                                        .setHeight(200)
                                        .setWidth(200)
                                        .initialize();
        
        hlC3.add(c3Chart1);

        C3Chart c3Chart2 = new C3Chart()
                                        .setData(new C3Data()
                                                        .setColumnsData(List.of(
                                                                List.of("data1", 30, 200, 100, 400, 150, 250),
                                                                List.of("data2",  50, 20, 10, 40, 15, 25)
                                                        ))
                                                        .setNames(Map.of("data1", "Name 1",
                                                                         "data2", "Name 2"
                                                                ))
                                                        .setOnClick(new IDataOnClick() {
                                                                @Override
                                                                public void onClick(JsonValue data) {
                                                                    LOGGER.log(Level.INFO, "data OnClick!");
                                                                    LOGGER.log(Level.INFO, data.toJson());
                                                                    //LOGGER.log(Level.INFO, e.toString());
                                                                }
                                                        })
                                                        .setOnMouseOver(new IDataOnMouseOver() {
                                                                @Override
                                                                public void onMouseOver(JsonValue d) {
                                                                    LOGGER.log(Level.INFO, "data onMouseOver: "+d.toJson());
                                                                }
                                                        })
                                                        .setOnMouseOut(new IDataOnMouseOut() {
                                                                @Override
                                                                public void onMouseOut(JsonValue d) {
                                                                    LOGGER.log(Level.INFO, "data onMouseOut"+d.toJson());
                                                                }
                                                        })
                                                        
                                                )
                                        .setHeight(200)
                                        .setWidth(200)
                                        .setOnMouseOver(new IOnMouseOver() {
                                            @Override
                                            public void onMouseOver() {
                                                LOGGER.log(Level.INFO, "Chart OnMouseOver!!!!");
                                            }
                                        })
                
                                        .setLegend(new C3Legend()
                                                            .setOnClick(new ILegendItemOnClick() {
                                                                    @Override
                                                                    public void onClick(JsonValue d) {
                                                                        LOGGER.log(Level.INFO, "LegendItemOnClick: "+d.toJson());
                                                                    }
                                                            })
                                                            .setOnMouseOver(new ILegendItemOnMouseOver() {
                                                                    @Override
                                                                    public void onMouseOver(JsonValue d) {
                                                                            LOGGER.log(Level.INFO, "LegendItemOnMouseOver: "+d.toJson());
                                                                    }
                                                            })
                                                            .setOnMouseOut(new ILegendItemOnMouseOut() {
                                                                    @Override
                                                                    public void onMouseOut(JsonValue d) {
                                                                            LOGGER.log(Level.INFO, "LegendItemOnMouseOut: "+d.toJson());
                                                                    }
                                                            })
                                                                  
                                        )
                
                
                
                                        .initialize();
        
        hlC3.add(c3Chart2);
        
        add(hlC3);

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

Added some API functions. load, unload, show, hide and toggle works.

Released
2020-11-20
Maturity
EXPERIMENTAL
License
Apache License 2.0

Compatibility

Framework
Polymer 3.0+
Browser
Firefox
Google Chrome
Online