Dynamic Chart - not sharing category axis between Graph objects

Support
#1

I have code that implements dynamically adding graphs to a chart, similar to this:
[Dynamically add graph to charts - CUBA.Platform]

However, for some reason, the category axis is not lining up:

image

I can confirm that each of the points is using the exact same category values, but instead of the lines stacking on top of each other, they are left to right.

How do I get all the graphs to share ONE x (category) axis?

Here is the code:

ListDataProvider dataProvider = new ListDataProvider();
projInventoryByDate.setDataProvider(dataProvider);

String currProdcode = null;
Graph currentGraph = null;

for ( KeyValueEntity s: projInventoryDc.getItems()) {
    if (s.getValue("prodcode").equals(currProdcode)) {
        MapDataItem dataItem = new MapDataItem();
        dataItem.add("fmtDate", s.getValue("fmtDate"));
        dataItem.add(currProdcode + "Needed", s.getValue("inventoryNeeded");
        dataProvider.addItem(dataItem);
    } else {
        currProdcode = s.getValue("prodcode");
        currentGraph = new Graph()
                .setId(currProdcode)
                .setStackable(true)
                .setTitle(currProdcode)
                .setValueField(currProdcode + "Needed");
        projInventoryByDate.addGraphs(currentGraph);
    }
}

 <chart:serialChart id="projInventoryByDate"
                   autoMarginOffset="20"
                   caption="Auto-Ship Projected Inventory Required"
                   categoryField="fmtDate"
                   creditsPosition="BOTTOM_RIGHT"
                   colspan="4"
                   height="100%"
                   marginLeft="40"
                   marginRight="40"
                   mouseWheelZoomEnabled="true"
                   width="100%" responsive="true">
    <chart:valueAxes>
        <chart:axis id="mrrBottleAxis"
                    axisColor="BLACK"
                    stackType="REGULAR"
                    axisAlpha="0"
                    ignoreAxisWidth="true"
                    position="LEFT"/>
    </chart:valueAxes>
    <chart:balloon borderThickness="1"
                   shadowAlpha="0"/>
    <chart:graphs>
        <chart:graph id="mrrInventory"
                     bullet="BUBBLE"
                     valueAxis="mrrBottleAxis"
                     balloonText="&lt;span style=&apos;font-size:10px;&apos;&gt;Needed: [[value]] Bottles)&lt;/span&gt;"
                     type="LINE"
                     title="Inventory Needed"
                     lineColor="BLACK"
                     lineThickness="3"
                     valueField="inventoryNeeded"/>
    </chart:graphs>
    <chart:categoryAxis dashLength="1"
                        minorGridEnabled="true"/>
    <chart:chartScrollbar autoGridCount="true"
                          backgroundAlpha="0"
                          color="#AAAAAA"
                          graph="g1"
                          graphFillAlpha="0"
                          graphLineAlpha="0.5"
                          offset="30"
                          oppositeAxis="false"
                          scrollbarHeight="20"
                          selectedBackgroundAlpha="0.1"
                          selectedBackgroundColor="#888888"
                          selectedGraphFillAlpha="0"
                          selectedGraphLineAlpha="1"/>
    <chart:chartCursor cursorAlpha="1"
                       cursorColor="#258cbb"
                       cursorPosition="MOUSE"
                       limitToGraph="g1"
                       pan="true"
                       valueLineAlpha="0.2"
                       valueLineBalloonEnabled="true"
                       valueLineEnabled="true"
                       valueZoomable="true"/>
    <chart:valueScrollbar offset="50"
                          oppositeAxis="false"
                          scrollbarHeight="10"/>
    <chart:legend useGraphSettings="true"/>
    <chart:export/>
</chart:serialChart>
#3

Hi,

Could you share a small project where we can reproduce the problem? It will greatly simplify the problem.

#4

I created a sample project and zipped up (via gradle zipProject)

testchart.zip (81.0 KB)

Please go into the Entity Inspector and delete all of the Test Data first.

Then open “Test Screen”. It reloads the sample data.

All of the sample data should have the same category axis (fmtDate field = YYYYMM). However, you will see the lines are spread horizontally. Clearly something is wrong with the way I am handling the category field, but I don’t know what it is. You can see the categories repeated along the X axis. Why?

image

2 Likes
#5

If you want to show points with the same category values you have to use the same MapDataItem for all values, do not create MapDataItem per point.

E.g.

dataProvider.addItem(MapDataItem.of(
        "fmtDate", "10",
        "AQty", 29,
        "BQty", 30,
        "CQty", 10
));

With mocked data:

<chart:serialChart id="testChart"
                   categoryField="fmtDate"
                   height="100%"
                   width="100%">
    <chart:data>
        <chart:item>
            <chart:property name="fmtDate" value="201904"/>
            <chart:property name="AQty" value="10"/>
            <chart:property name="BQty" value="20"/>
            <chart:property name="CQty" value="31"/>
        </chart:item>
        <chart:item>
            <chart:property name="fmtDate" value="201905"/>
            <chart:property name="AQty" value="12"/>
            <chart:property name="BQty" value="24"/>
            <chart:property name="CQty" value="33"/>
        </chart:item>
        <chart:item>
            <chart:property name="fmtDate" value="201906"/>
            <chart:property name="AQty" value="15"/>
            <chart:property name="BQty" value="25"/>
            <chart:property name="CQty" value="37"/>
        </chart:item>
    </chart:data>

    <chart:graphs>
        <chart:graph valueField="AQty" bullet="ROUND" lineThickness="3"/>
        <chart:graph valueField="BQty" bullet="ROUND" lineThickness="3"/>
        <chart:graph valueField="CQty" bullet="ROUND" lineThickness="3"/>
    </chart:graphs>

    <chart:valueAxes>
        <chart:axis id="testAxis"
                    axisColor="BLACK"
                    axisAlpha="0"
                    ignoreAxisWidth="true"
                    position="LEFT"/>
    </chart:valueAxes>
    <chart:balloon borderThickness="1"
                   shadowAlpha="0"/>

    <chart:categoryAxis dashLength="1"
                        minorGridEnabled="true"/>
</chart:serialChart>

image

1 Like
#7

Thanks very much. That fixed it.