Serial chart stacked column not working as it should

Support
#1

Hi all
I’m trying to reproduce stackedcolumn-chart example but something is missing

this is the data
DATE_KEY = date
image

this is the code

            <chart:serialChart id="monthlyScheduleChart"
                               categoryField="date"
                               marginTop="5"
                               marginLeft="0"
                               plotAreaBorderAlpha="0"
                               height="340px"
                               width="400px">
                <chart:chartCursor cursorAlpha="0"/>
                <chart:legend align="CENTER"
                              markerSize="9"
                              position="BOTTOM"
                              fontSize="10"/>
                <chart:valueAxes>
                    <chart:axis axisAlpha="0.5"
                                gridAlpha="0.07"
                                position="LEFT"
                                stackType="REGULAR"
                                precision="0"
                                title="msg://monthly-graphic.title"/>
                </chart:valueAxes>
                <chart:graphs>
                    <chart:graph fillAlphas="1"
                                 type="COLUMN"
                                 title="msg://tab-monthly-graphic.managed"
                                 valueField="DONE"
                                 labelRotation="90"/>
                    <chart:graph fillAlphas="1"
                                 type="COLUMN"
                                 title="msg://tab-monthly-graphic.pending"
                                 valueField="PENDING"
                                 labelRotation="90"/>
                </chart:graphs>
                <chart:categoryAxis axisColor="#DADADA"
                                    gridAlpha="0.07"
                                    startOnAxis="true"/>
            </chart:serialChart>

the result is
image

by the way, the labelRotation is just ignored

#3

Hello!

You should group your “PENDING” and “DONE” values in one data item like this (XML example):

<charts:data>
    <charts:item>
        <charts:property name="date" value="6"/>
        <charts:property name="PENDING" value="2.5"/>
        <charts:property name="DONE" value="3"/>
    </charts:item>
    <charts:item>
        <charts:property name="date" value="7"/>
        <charts:property name="PENDING" value="2"/>
        <charts:property name="DONE" value="3"/>
    </charts:item>
</charts:data>

labelRotation attribute works with labelText. The following code should work:

<chart:graph fillAlphas="1"
             type="COLUMN"
             title="msg://tab-monthly-graphic.managed"
             valueField="DONE"
             labelText="[[value]]"
             labelRotation="90"/>
1 Like
#5

Hi @Pinyazhin

it worked, thanks!