How to progamatically create a stacked bar chart with dynamic series

I collect cost and budget data from different sources and save them in my application.

I have one entity that is called BudgetCategory. It maps codes from external sources into a human-readable format. Those categories are user input and so are fully dynamic.

@Getter
@Setter
@JmixEntity
@Table(name = "AGNICIO_BUDGET_CATEGORY")
@Entity(name = "agnicio_BudgetCategory")
public class BudgetCategory extends BaseTenantEntity {

    @InstanceName
    @Column(name = "NAME")
    private String name;

    @Column(name = "CODE")
    private String code;
}

image

We then collect costs and budgets. There is a multitude of sources and entities. we don’t want to deal with their specific complexities.

So for displaying it in the graphs we will be either mapping this on simpleDateItem or a simple dto entity.

The years, categories and stacks are fully dynamic.

Note that the stack should be vertical instead of horizontal like in the screenshot. But this was the fastest way I got it out of excel.

public record YearlyAmountDto(String year, String category, BigDecimal value) {}

image

Hi!

Unfortunately chart component supports only one data source, set via the dataSet property.
See documentation: Chart Component :: Jmix Documentation

This dataSet supports flat two-dimensional data display. In your case, additional grouping of values ​​by categories is used. Therefore, adding data in a standard way will be problematic.

However, you can use similar examples of the Apache ECharts library to implement this type of chart:

I made a small example in which I demonstrated a possible implementation of the cahrt, check out the project:
stacked-bar-example.zip (1.0 MB)

image

Best regards,
Dmitriy

thx for the example @d.kremnev it worked out great