2 Replies Latest reply on Jun 22, 2009 9:31 AM by dragonmagik

    ColumnChart bar positioning and width

    dr.Evol
      Hello,

      I have the following issue and any ideas would be appreciated.
      I'm using the ColumnChart to represent data as columnSeries objects. However, I also need to display one or more limit lines on the chart which are LineSeries objects used in a columnChart. This works well since ColumnChart (and LineChart) are both descendants of CartesianChart. The problem is that ColumnChart automatically sets the width and the x position of each column regarding to the number of used series. If you use LineSeries among the columnSeries, then the ColumnChart will draw bars which are to thin because it also takes the LineSeries into calculation.

      The question is: how to convince the ColumnChart to ignore the given LineSeries and take only ColumnSeries into calculation? I'm using custom itemRenderer but within I cannot access any information about the number of series used in the chart.

      Another option would be creating a custom chart class which extends the CartesianChart but then its up to me to create proper positioning and width for the bars, means even more trouble.

      Thanks in advance,

      Cheers

      Borja
        • 1. Re: ColumnChart bar positioning and width
          dr.Evol Level 1
          Just re-posting the question.. really no ideas?

          Thanks!

          • 2. cRe: ColumnChart bar positioning and width
            dragonmagik

            Column charts, by default, wrap each and every series specified into a ColumnSet.  This is what allows each of the columns to reduce it's overall width to allow each column to fit in the available single item space.  When you add a line series to the ColumnChart, this series also gets wrapped in the same column set, which reduces the width of your columns.

             

            To overcome this, use your base chart type as CartesianChart.  Add as many line series (or other series) as you'd like.  For each of your column series, you will now need to manually wrap them in column sets.  You can see a quick example of multiple series types all drawing as expected on a single chart.

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

            <mx:CartesianChart

             

             

            dataProvider="{datas}" showDataTips="true" width="600" height="505" id="chart">

             

             

                 <mx:horizontalAxis>

             

             

             

             

                      <mx:CategoryAxis categoryField="x" displayName="Number" />

             

             

             

                 </mx:horizontalAxis>

             

             

             

             

             

                 <mx:series>

             

             

             

             

                      <mx:AreaSeries xField="x" yField="y0" displayName="Series 1">

             

             

             

                      </mx:AreaSeries>

             

             

             

             

                      <mx:LineSeries xField="x" yField="y1" displayName="Series 2">

             

             

             

                      </mx:LineSeries>       

                      <mx:ColumnSet

             

            type="clustered">

             

             

             

             

             

             

             

             

                           <mx:series>

             

             

             

             

                                <mx:ColumnSeries xField="x" yField="y2" displayName="Series 3">

             

             

             

                                </mx:ColumnSeries>

             

             

             

             

                                <mx:ColumnSeries xField="x" yField="y0" displayName="Series 5" >

             

             

             

                                </mx:ColumnSeries>

             

             

             

             

                           </mx:series>

             

             

             

             

                      </mx:ColumnSet>

             

             

             

             

             

             

             

             

             

                 </mx:series>

             

             

             

             

             

             

            </mx:CartesianChart>

             

            this should solve your problem.  There are also different types of column sets, like stacked, for more charting options, if you want to explore them.