Skip to content

Commit b3e9dd3

Browse files
committed
Update README.md
1 parent f980685 commit b3e9dd3

1 file changed

Lines changed: 43 additions & 44 deletions

File tree

README.md

Lines changed: 43 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -13,55 +13,54 @@ A Chart.js 4+ Wrapper for Vaadin
1313
## Usage
1414

1515
1. Define a custom chart or use the ``showChart``-method directly.<br/>Example:
16-
```java
17-
public class ExampleChartContainer extends ChartContainer
18-
{
19-
public void show(Data data)
16+
```java
17+
public class ExampleChartContainer extends ChartContainer
2018
{
21-
BarData data = ...; // Build the bar chart data from the handed over data
22-
this.showChart(new BarChart(data)
23-
.setOptions(new BarOptions()
24-
.setResponsive(true)
25-
.setMaintainAspectRatio(false)
26-
.setPlugins(new Plugins()
27-
.setTitle(new Title()
28-
.setText("Age")
29-
.setDisplay(true))))
30-
.toJson());
19+
public void show(Data data)
20+
{
21+
BarData data = ...; // Build the bar chart data from the handed over data
22+
this.showChart(new BarChart(data)
23+
.setOptions(new BarOptions()
24+
.setResponsive(true)
25+
.setMaintainAspectRatio(false)
26+
.setPlugins(new Plugins()
27+
.setTitle(new Title()
28+
.setText("Age")
29+
.setDisplay(true))))
30+
.toJson());
31+
}
3132
}
32-
}
33-
```
34-
33+
```
3534
2. Add the chart to your view/component:
36-
```java
37-
public class ExampleView extends VerticalLayout
38-
{
39-
private final ExampleChartContainer chart = new ExampleChartContainer();
40-
41-
public ExampleView()
42-
{
43-
this.add(this.chart);
44-
// ...
45-
}
46-
47-
private void loadDataAndShowChart()
35+
```java
36+
public class ExampleView extends VerticalLayout
4837
{
49-
this.chart.showLoading();
38+
private final ExampleChartContainer chart = new ExampleChartContainer();
5039

51-
UI ui = UI.getCurrent();
52-
CompletableFuture.runAsync(() -> {
53-
try {
54-
var data = ...; // Load some data from the backend
55-
// You may also convert the data here and call showChart
56-
ui.access(() -> this.chart.show(data));
57-
} catch (Exception ex) {
58-
// Display the error message when loading fails
59-
ui.access(() -> this.chart.showFailed(ex.getMessage()));
60-
}
61-
});
62-
}
63-
}
64-
```
40+
public ExampleView()
41+
{
42+
this.add(this.chart);
43+
// ...
44+
}
45+
46+
private void loadDataAndShowChart()
47+
{
48+
this.chart.showLoading();
49+
50+
UI ui = UI.getCurrent();
51+
CompletableFuture.runAsync(() -> {
52+
try {
53+
var data = ...; // Load some data from the backend
54+
// You may also convert the data here and call showChart
55+
ui.access(() -> this.chart.show(data));
56+
} catch (Exception ex) {
57+
// Display the error message when loading fails
58+
ui.access(() -> this.chart.showFailed(ex.getMessage()));
59+
}
60+
});
61+
}
62+
}
63+
```
6564

6665
For more usage examples please have a look at [the demo](./vaadin-chartjs-wrapper-demo/src/main/java/software/xdev/vaadin/chartjs/demo/).
6766

0 commit comments

Comments
 (0)