5 Replies Latest reply on Dec 18, 2008 2:36 PM by glen08

    How to center the columns in the ColumnChart

    glen08
      I have a column chart. The x-axis is divided into several sections. The columns are not placed in the center of their own sections. Is there a way to center the columns in each each section?
        • 1. Re: How to center the columns in the ColumnChart
          matthew horn Level 3
          Glen08, can you post an example that shows this behavior?

          matt horn
          flex docs
          • 2. Re: How to center the columns in the ColumnChart
            glen08 Level 1
            Matt,

            Hers is my code for the ColumnChart:

            <mx:ColumnChart id="byType" height="325" width="100%"
            dataProvider="{typeData.product}" showDataTips="true" >
            <mx:horizontalAxis>
            <mx:CategoryAxis id="ca" categoryField="type" />
            </mx:horizontalAxis>
            <mx:horizontalAxisRenderers>
            <mx:AxisRenderer id="ar" axis="{ca}" canDropLabels="false" />
            </mx:horizontalAxisRenderers>
            <mx:series>
            <mx:ColumnSeries yField="inventory" displayName="Inventory" />
            <mx:ColumnSeries yField="sale" displayName="Sale"/>
            <mx:ColumnSeries xField="type" />
            </mx:series>
            </mx:ColumnChart>

            This is the xml data:
            <products>
            <product id="1">
            <type>Water</type>
            <inventory>462</inventory>
            <sale>802</sale>
            </product>
            <product id="2">
            <type>Soda</type>
            <inventory>2039</inventory>
            <sale>1822</sale>
            </product>
            <product id="3">
            <type>Energy Drink</type>
            <inventory>160</inventory>
            <sale>430</sale>
            </product>
            <product id="4">
            <type>Coffee Drink</type>
            <inventory>21</inventory>
            <sale>129</sale>
            </product>
            </products>
            • 3. Re: How to center the columns in the ColumnChart
              matthew horn Level 3
              The problem is that you have a series for "type" but there's no data. So there are two visible columns, plus an invisible column for "type". If you take that third series out, the columns are centered in their sections.

              matt horn
              flex docs
              • 4. Re: How to center the columns in the ColumnChart
                matthew horn Level 3
                One other thing... if you're trying to get horizontal labels, you might have to change the field name "type" to something else. It looks like"type" is some kind of reserved keyword. Try something like this:

                <?xml version="1.0"?>
                <!-- charts/BasicDataLabel.mxml -->
                <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml">

                <mx:Script><![CDATA[
                ]]></mx:Script>

                <mx:Model id="results" source="data.xml"/>

                <mx:Panel title="Column Chart">

                <mx:ColumnChart id="byType" height="325" width="100%" dataProvider="{results.product}" showDataTips="true" >
                <mx:horizontalAxis>
                <mx:CategoryAxis id="ca" categoryField="fred"/>
                </mx:horizontalAxis>
                <mx:horizontalAxisRenderers>
                <mx:AxisRenderer id="ar" axis="{ca}" canDropLabels="false" />
                </mx:horizontalAxisRenderers>
                <mx:series>
                <mx:ColumnSeries yField="inventory" displayName="Inventory" />
                <mx:ColumnSeries yField="sale" displayName="Sale"/>
                </mx:series>
                </mx:ColumnChart>

                <mx:Legend dataProvider="{byType}"/>
                </mx:Panel>

                </mx:Application>

                And the data file uses "fred" rather than "type":

                <products>
                <product id="1">
                <fred>Water</fred>
                <inventory>462</inventory>
                <sale>802</sale>
                </product>
                <product id="2">
                <fred>Soda</fred>
                <inventory>2039</inventory>
                <sale>1822</sale>
                </product>
                <product id="3">
                <fred>Energy Drink</fred>
                <inventory>160</inventory>
                <sale>430</sale>
                </product>
                <product id="4">
                <fred>Coffee Drink</fred>
                <inventory>21</inventory>
                <sale>129</sale>
                </product>
                </products>

                hth,
                matt horn
                flex docs
                • 5. Re: How to center the columns in the ColumnChart
                  glen08 Level 1
                  Thanks Matt. It fixes the problem.

                  I used <type> element as x-axis data. That is why I used <mx:ColumnSeries xField="type" />.
                  What's the xField attribute for?