Make brief chart category

Support
#1

Hi,

In case the value of the chart category goes out of length like this:
image

Is there any way to fix it to become format like “abcd…”?

Thank you!

#3

Hello @nguyenbatyads37,

you can set label function for formatting text value like this:

@Inject
protected SerialChart serialChart;

@Subscribe
public void onInit(InitEvent event) {
    serialChart.getCategoryAxis().setLabelFunction(new JsFunction(
            "function(valueText, serialDataItem, categoryAxis) {" +
            "    if (valueText.length > 4) {                    " +
            "        return valueText.substring(0, 4) + '...';  " +
            "    }                                              " +
            "    return valueText;                              " +
            "}"
    ));
}

There are other options to fit labels:

  1. labelRotation - sets rotation angle of label
  2. labelFrequency - sets frequency at which labels should be placed
#5

Because there are maybe a lot of different charts so I’d like to reuse this configuration code.
Is it possible for something like this:

public class MySerialChart extends SerialChart {
    public MySerialChart() {
        super();
        getCategoryAxis().setLabelFunction(new JsFunction(
                "function(valueText, serialDataItem, categoryAxis) {" +
                        "    if (valueText.length > 4) {                    " +
                        "        return valueText.substring(0, 4) + '...';  " +
                        "    }                                              " +
                        "    return valueText;                              " +
                        "}"
        ));
    }
}

And then we can use MySerialChart instead of origin SerialChart:

@Inject
private MySerialChart myChart;

Can I do this in Cuba?

#6

The chart does not have CategoryAxis by default, so it would be better to place this code in the loader class. Loader allows us to add post init task, so if CategoryAxis was set we add label function.
Create the following class:

public class MySerialChartLoader extends SerialChartLoader {

    @Override
    public void loadComponent() {
        super.loadComponent();

        getComponentContext().addPostInitTask((context1, window) -> {
            CategoryAxis categoryAxis = resultComponent.getCategoryAxis();
            if (categoryAxis != null) {
                categoryAxis.setLabelFunction(new JsFunction(
                        "function(valueText, serialDataItem, categoryAxis) {" +
                              "    if (valueText.length > 4) {                   " +
                              "        return valueText.substring(0, 4) + '...'; " +
                              "    }                                             " +
                              "    return valueText;                             " +
                              "}"
                ));
            }
        });
    }
}

In the WEB module create ui-components.xml file:

<components xmlns="http://schemas.haulmont.com/cuba/components.xsd">
    <component>
        <name>serialChart</name>
        <componentLoader>com.company.myapp.web.loaders.MySerialChartLoader</componentLoader>
    </component>
</components>

And add the following property to web-app.properties file:

cuba.web.componentsConfig = +com/company/myapp/ui-components.xml

Example of how to registering loader you can find here:

#7

It works, thank you!