Chart library for Vaadin Flow 14.+
Chart library for Vaadin 14+
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);
Links
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
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