How can I set the arrow value for a Gauge from a Data Source?

Support
#1

I’m trying to create a Gauge Chart to display the average value from a list of entitities using a datasource like this:

        <valueCollectionDatasource id="testDs"
                                   maxResults="1">
            <query>
                <![CDATA[SELECT AVG(a.porcentajeAvance) as avgAmount FROM planmejoramiento$Accion a]]>
            </query>
            <properties>
                <property datatype="double"
                          name="avgAmount"/>
            </properties>
        </valueCollectionDatasource>

The documentation states that the arrow is displayed using this XML tag:

<chart:arrows>
    <chart:arrow value="60"/>
</chart:arrows>

But it doesn’t mention how to take the value from a datasource. I tried using the property name of the datasource but it gives an error

<chart:arrows>
    <chart:arrow value="avgAmount"/>
</chart:arrows>

Any clue that can help me to achieve this?

#2

Hi,

Gauge arrow doesn’t allow datasource binding, i.e. there is no valueField that can be assigned to an entity attribute. The only way is to set sxavalue either in XML to some constant or programmatically in the screen controller, for instance:

@Inject
private CollectionDatasource<KeyValueEntity, Object> testDs;
@Inject
private AngularGaugeChart gaugeChart;

@Override
public void init(Map<String, Object> params) {
    testDs.refresh();
    // We only have one value as we use maxResults="1"
    KeyValueEntity value = testDs.getItems().iterator().next();
    // We only have one arrow
    GaugeArrow gaugeArrow = gaugeChart.getArrows().get(0);
    gaugeArrow.setValue(value.getValue("avgAmount"));
}