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