0 Replies Latest reply on Oct 18, 2010 8:46 AM by tom_kyriel

    clustered and stacked columnchart with multiple axes

    tom_kyriel

      Hello,

       

      I actually have to draw a specific columnchart including clustered and stacked series and multiple axes. I started with the code provided here (Mixed Sets Chart). Further I tried to use an horizontal axis located at the top of the chart for the "revenue" serie and another axe located at bottom for the "oneTime" and "costs" series as explained here. At this time, I still can't find a way to make it work. Any help ?

       

      Here is the code I have wrotten from the 2 links mentionned above :

       

      <?xml version="1.0" encoding="utf-8"?>

       

      <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

       

                     xmlns:s="library://ns.adobe.com/flex/spark"

       

                     xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">

       

          <fx:Script>

       

              <![CDATA[

       

                  import mx.charts.Legend;

       

                  import mx.charts.BarChart;

       

                  import mx.charts.series.BarSet;

       

                  import mx.charts.series.BarSeries;

       

                  import mx.collections.ArrayCollection;

       

                 

       

                  [Bindable]

       

                  private var yearlyData:ArrayCollection = new ArrayCollection([

       

                  {month:"January", revenue:120, costs:45,

       

                  overhead:102, oneTime:23},

       

                  {month:"February", revenue:108, costs:42,

       

                  overhead:87, oneTime:47},

       

                  {month:"March", revenue:150, costs:82,

       

                  overhead:32, oneTime:21},

       

                  {month:"April", revenue:170, costs:44,

       

                  overhead:68},

       

                  {month:"May", revenue:250, costs:57,

       

                  overhead:77, oneTime:17}

       

                  ]);

       

              ]]>

       

          </fx:Script>

       

          <mx:BarChart id="myChart" dataProvider="{yearlyData}" showDataTips="true">

       

              <mx:verticalAxis>

       

                  <mx:CategoryAxis categoryField="month"/>

       

              </mx:verticalAxis>

       

              <mx:horizontalAxisRenderers>

       

                  <mx:AxisRenderer placement="top" axis="{h1}"/>

       

                  <mx:AxisRenderer placement="bottom" axis="{h2}"/>

       

              </mx:horizontalAxisRenderers>

       

              <mx:series>

       

                  <mx:BarSet type="clustered">

       

                      <mx:BarSet type="stacked">

       

                          <mx:BarSeries

       

                              xField="costs"

       

                              displayName="Recurring Costs"/>

       

                          <mx:BarSeries

       

                              xField="oneTime"

       

                              displayName="One-Time Costs"/>

       

                          <mx:horizontalAxis>

       

                              <mx:LinearAxis id="h1"/>

       

                          </mx:horizontalAxis>

       

                      </mx:BarSet>

       

                      <mx:BarSet type="stacked">

       

                          <mx:BarSeries

       

                              xField="revenue"

       

                              displayName="Revenue"/>

       

                          <mx:BarSeries

       

                              xField="overhead"

       

                              displayName="Overhead"/>

       

                          <mx:horizontalAxis>

       

                              <mx:LinearAxis id="h2"/>

       

                          </mx:horizontalAxis>

       

                      </mx:BarSet>

       

                  </mx:BarSet>

       

              </mx:series>

       

          </mx:BarChart>

       

      </s:Application>

       

      The 2 axes are displayed but the series are not related to the axes.

       

      Thanks in advance.

       

      Best Regards.

       

      Tom