XY Chart Gap in lines

Does anyone know how to add a gap to the xy charts if there is a null value.

Can’t figure it out and connect=“false” does not do anything…

dont

Hi!

connect property doesn’t work with XY chart (AmChart’s documentation). You can use a Serial chart to do similar graphs.

See examples in our Sampler application: https://demo.cuba-platform.com/sampler/open?screen=charts
or AmCharts demos: Chart Demos - amCharts

Also, if you still want to use XY chart you can see this configuration of a chart that shows graphs without lines:
https://demo.cuba-platform.com/sampler/open?screen=xy-dateaxis-chart

Hi,
If i understand it right @daryn doesn’t want connecting lines only on gaps (period 9-21).
May passing Items with null value do the trick?*
upd: just checked. It doesn’t

There are no real examples in the cuba sampler for what I need…

I need to populate a multi line graph where the number of lines could change.

I have a view, which produces a result set like follows (I will convert this to an entity):
graphs

Each unique line is based off of the [meter_serial + meter_channel].
I would like the values (meter_serial, meter_channel, register, poa, direction) in the description for each line.
And possibly change the line color based off of either register or direction (or both).

The x-axis is [period]
the y-axis is [kwh]

Looking for help on suggestions for the best graph type and way to achieve the above.

The method needs to populate a varying number of graph lines based on how many combinations of meter_serial + meter_channel are returned from the query / entity list.

I have managed to do this with xychart but part of the method I used is now deprecated and I also don’t like how it joins the dots when there is missing data.

dont

Hi,
I can suggest you to move to SerialChart.

  1. Set ‘period’ as your categoryField.
chart.setCategoryField('period');
  1. Once you get data: generate Graph for each of your combination (serial+channel) with datafield named unique (again - just take your combination).
/* List<String> uniqueCombinations - unique combinations of serials and channels contacted together */
uniqueCombinations .forEach(this::addGraph);
/*...*/
private void addGraph(String valueField){
    Graph g = new Graph();
    g.setValueField(valueField);
   /*
   you probably want as well pass a title for your graph like '213570294 A+ T1'
   anyway other configs is up to you 
   ...
   */
   chart.addGraphs(g);
}
  1. Put your data to a custom dataprovider
DataProvider provider = new ListDataProvider();
readings.forEach(r -> {
    Map<String, Object> readingData = new HashMap<>();
    readingData .put('period', r.getPeriod());
    readingData .put(r.getSerial()+r.getChannel(), r.getKwh()); // Here is our valueField for graph
    provider.addItem(new MapDataItem(readingData ));
})
chart.setDataProvider(provider);

Hi Ivan,

This doesn’t work. The graphs do not share the x-axis values:

The graphs are beside each other instead of on top of each other. Any other ideas?

graph

 private void drawGraph() {


    dataProvider = new ListDataProvider();

    serialChart.setCategoryField("period");

    List<MeterChannel> channelList = meteringService.getMeterChannelsForIcpAndDate(this.getItem(), cal.getTime());

    channelList .forEach(meterChannel -> {
        System.out.println(meterChannel.getMeteringComponentSerialNumber()+meterChannel.getChannelNumber());
        addGraph(meterChannel);
        List<ChannelReadingsForDate> readings = meterReadingsService.getDoubleArrayOfAllMeterReadingsForChannelAndDate(icpIdentifierField.getValue(), meterChannel, cal.getTime());

        readings.forEach(r -> {
            Map<String, Object> readingData = new HashMap<>();
            readingData .put("period", r.getPeriod());
            readingData .put(meterChannel.getMeteringComponentSerialNumber()+"-"+meterChannel.getChannelNumber(), r.getValue()); // Here is our valueField for graph
            dataProvider.addItem(new MapDataItem(readingData ));
        });

    });

    serialChart.setDataProvider(dataProvider);
    System.out.println("Data size: "+dataProvider.getItems().size());
    serialChart.repaint();
}


public void addGraph(MeterChannel meterChannel) {
    Graph g = new Graph();
    g.setValueField(meterChannel.getMeteringComponentSerialNumber()+"-"+meterChannel.getChannelNumber());
    g.setTitle(meterChannel.getMeteringComponentSerialNumber()+"-"+meterChannel.getChannelNumber());
    serialChart.addGraphs(g);
}

Hi,

I would recommend using the gapField attribute in order to provide gaps in a SerialChart. Below the example of gapField usage:

<chart:serialChart marginRight="70"
                   autoMarginOffset="20"
                   categoryField="year"
                   width="100%"
                   height="100%">
    <chart:balloon cornerRadius="6"/>
    <chart:valueAxes>
        <chart:axis axisAlpha="0"/>
    </chart:valueAxes>
    <chart:graphs>
        <chart:graph balloonText="[[category]]&lt;br&gt;&lt;b&gt;&lt;span style='font-size:14px;'&gt;[[value]] C&lt;/span&gt;&lt;/b&gt;"
                     bullet="ROUND"
                     bulletSize="6"
                     connect="false"
                     lineColor="#b6d278"
                     lineThickness="2"
                     negativeLineColor="#487dac"
                     valueField="value"
                     gapField="gap"/>
    </chart:graphs>
    <chart:chartCursor cursorAlpha="0.1"
                       cursorColor="#000000"
                       fullWidth="true"
                       graphBulletSize="2"/>
    <chart:chartScrollbar/>
    <chart:categoryAxis minorGridEnabled="true"/>
    <chart:export/>

    <chart:data>
        <chart:item>
            <chart:property name="year" value="8" type="int"/>
            <chart:property name="value" value="-0.011" type="double"/>
        </chart:item>
        <chart:item>
            <chart:property name="year" value="9" type="int"/>
            <chart:property name="value" value="-0.074" type="double"/>
        </chart:item>
        <chart:item>
            <chart:property name="year" value="10" type="int"/>
            <chart:property name="value" value="-0.124" type="double"/>
        </chart:item>
        <chart:item>
            <chart:property name="year" value="11" type="int"/>
            <chart:property name="value" value="-0.024" type="double"/>
        </chart:item>
        <chart:item>
            <chart:property name="year" value="12" type="int"/>
            <chart:property name="value" value="-0.022" type="double"/>
        </chart:item>
        <chart:item>
            <chart:property name="year" value="13" type="int"/>
            <chart:property name="value" value="0" type="double"/>
        </chart:item>
        <chart:item>
            <chart:property name="year" value="14" type="int"/>
            <chart:property name="value" value="-0.296" type="double"/>
        </chart:item>
        <chart:item>
            <chart:property name="year" value="15" type="int"/>
            <chart:property name="value" value="-0.217" type="double"/>
        </chart:item>
        <chart:item>
            <chart:property name="year" value="16" type="int"/>
            <chart:property name="value" value="-0.147" type="double"/>
            <chart:property name="gap" value="true" type="boolean"/>
        </chart:item>
        <chart:item>
            <chart:property name="year" value="21" type="int"/>
            <chart:property name="value" value="-0.19" type="double"/>
        </chart:item>
        <chart:item>
            <chart:property name="year" value="22" type="int"/>
            <chart:property name="value" value="-0.056" type="double"/>
        </chart:item>
        <chart:item>
            <chart:property name="year" value="23" type="int"/>
            <chart:property name="value" value="0.077" type="double"/>
        </chart:item>
        <chart:item>
            <chart:property name="year" value="24" type="int"/>
            <chart:property name="value" value="-0.213" type="double"/>
        </chart:item>
        <chart:item>
            <chart:property name="year" value="25" type="int"/>
            <chart:property name="value" value="-0.17" type="double"/>
        </chart:item>
        <chart:item>
            <chart:property name="year" value="26" type="int"/>
            <chart:property name="value" value="-0.254" type="double"/>
        </chart:item>
        <chart:item>
            <chart:property name="year" value="27" type="int"/>
            <chart:property name="value" value="0.019" type="double"/>
        </chart:item>
        <chart:item>
            <chart:property name="year" value="28" type="int"/>
            <chart:property name="value" value="-0.063" type="double"/>
        </chart:item>
    </chart:data>

</chart:serialChart>

Note: the graph defines the gapField attribute and one of the data items (the one with year = 16) specifies true for gap.

Regards,
Gleb

1 Like