Color Code for Column 3D Charts

Hi,
Is it possible to use different colors on column charts?
I’m trying to change the color of the expenditure column such that if the value is above the budget value, the column turns to red, but if it remains under the expenditure, it stays green.

Project%20Column%20Chart

My jpql query

select b.name, b.budget, b.parentId, b.expense from ppm$Projects b order by b.name

And the XML:

<chart:serialChart id="projectSerialChart"
                    addClassNames="true"
                    angle="30"
                    autoMargins="false"
                    categoryField="projectID"
                    datasource="budgetDs"
                    depth3D="60"
                    height="90%"
                    marginBottom="26"
                    marginLeft="145"
                    marginRight="18"
                    marginTop="10"
                    plotAreaFillAlphas="0.1"
                    responsive="true"
                    startDuration="1"
                    theme="LIGHT"
                    width="100%">
    <chart:legend autoMargins="false"
                    marginRight="5"
                    markerType="CIRCLE"
                    position="RIGHT"/>
    <chart:categoryAxis gridPosition="START"/>
    <chart:valueAxes>
        <chart:axis position="LEFT"
                    stackType="BOX_3D"
                    title="AMOUNT IN KSHS."/>
    </chart:valueAxes>
    <chart:graphs>
        <chart:graph balloonText="Amount budgeted in project [[category]]: &lt;strong&gt;[[value]]&lt;/strong&gt;"
                        fillAlphas="0.57"
                        lineAlpha="0.8"
                        title="Budget"
                        type="COLUMN"
                        valueField="budget"/>
        <chart:graph balloonText="Amount spent in project [[category]]: &lt;strong&gt;[[value]]&lt;/strong&gt;"
                        fillAlphas="09."
                        lineAlpha="0.2"
                        title="Expenditure"
                        type="COLUMN"
                        valueField="expenditure"/>
    </chart:graphs>
    <chart:export/>
</chart:serialChart>

Regards,

Ronny

Hi!

In your “Expenditure” graph you should define colorField:

<chart:graph balloonText="Amount spent in project [[category]]: &lt;strong&gt;[[value]]&lt;/strong&gt;"
             colorField="color"
             fillAlphas="09."
             lineAlpha="0.2"
             title="Expenditure"
             type="COLUMN"
             valueField="expenditure">

Then, you can define “color” field in your entity and fill it according to your logic when you create or edit instance.

Or you can use DataProvider with additional “color” field:

@Inject
private SerialChart projectSerialChart;

@Inject
private CollectionDatasource<Projects, UUID> budgetDs;

@Override
public void init(Map<String, Object> params) {
    budgetDs.refresh();

    DataProvider dataProvider = new ListDataProvider();
    for (Projects projects : budgetDs.getItems()) {
        Map<String, Object> dataItem = new HashMap<>();
        dataItem.put("expenditure", projects.getExpenditure());
        dataItem.put("projectID", projects.getProjectID());
        dataItem.put("budget", projects.getBudget());

        String color = projects.getExpenditure() > projects.getBudget() ? "#FF0F00" : "#04D215";
        dataItem.put("color", color);

        dataProvider.addItem(new MapDataItem(dataItem));
    }
    projectSerialChart.setDataProvider(dataProvider);
}

Hi Roman!
Thanks for the reply,

I decide to use DataProvider with the additional “color” field.
I am still getting an error pointing to this injection:

@Inject
private CollectionDatasource<Projects, UUID> budgetDs;

This is the error I got:

java.lang.ClassCastException: com.haulmont.cuba.core.entity.KeyValueEntity cannot be cast to com.company.ppm.entity.Projects
	at com.company.ppm.web.dashboards.Projectdashboard.init(Projectdashboard.java:51)
	at com.haulmont.cuba.gui.WindowManager.init(WindowManager.java:1247)
	at com.haulmont.cuba.gui.WindowManager.initWrapperFrame(WindowManager.java:1236)
	at com.haulmont.cuba.gui.WindowManager.createWindow(WindowManager.java:581)
	at com.haulmont.cuba.gui.WindowManager.openWindow(WindowManager.java:750)
	at com.haulmont.cuba.web.WebWindowManager.openWindow(WebWindowManager.java:158)
	at com.haulmont.cuba.gui.config.MenuCommand$ScreenCommand.run(MenuCommand.java:181)
	at com.haulmont.cuba.gui.config.MenuCommand.execute(MenuCommand.java:76)
	at com.haulmont.cuba.web.sys.MenuBuilder.lambda$createMenuCommandExecutor$0(MenuBuilder.java:197)
	at com.haulmont.cuba.web.gui.components.mainwindow.WebAppMenu$MenuItemImpl.lambda$setCommand$2434f46b$1(WebAppMenu.java:351)

Regards,
Ronny.

Please check your code:

Projectdashboard.init(Projectdashboard.java:51)

P.S. Please use ``` code here ``` for code blocks.

HI Yuriy,
Sorry about that…

Here is the code

   @Inject
    private SerialChart projectSerialChart;
    @Inject
    private CollectionDatasource<Projects, UUID> budgetDs;
    @Inject
    private CollectionDatasource<Programs, UUID> programsEventDs;
    @Inject
    private CollectionDatasource<Projects, UUID> projectsEventDs;
    @Override
    public void init(Map<String, Object> params) {
        super.init(params);

        projectPieChart.setColorField("pieColor");
        programPieChart.setColorField("prgPieColor");

        budgetDs.refresh();

        DataProvider dataProvider = new ListDataProvider();
        for (Projects projects : budgetDs.getItems()){
            Map<String, Object> dataItem = new HashMap<>();
            dataItem.put("expenditure", projects.getExpense());
            dataItem.put("projectID", projects.getProjectID());
            dataItem.put("budget", projects.getBudget());

            String color = projects.getExpense() > projects.getBudget() ? "#FF0F00" : "#04D215";
            dataItem.put("color", color);

            dataProvider.addItem(new MapDataItem(dataItem));
        }
        projectSerialChart.setDataProvider(dataProvider);

java%20code%20error%20line%2051

The error is at

Map<String, Object> dataItem = new HashMap<>();

Probably your budgetDs is a ValueCollectionDatasource containing KeyValueEntity, but you inject it as a CollectionDatasource containing Projects.

Try to change the field declaration to CollectionDatasource<KeyValueEntity, Object> and use getValue() method to get information from KeyValueEntity fields:

for (KeyValueEntity item : budgetDs.getItems()) {
    Map<String, Object> dataItem = new HashMap<>();
    dataItem.put("expenditure", item.getValue("expenditure"));
    // ...
}

It worked!!!
Thanks so much!!