3 Replies Latest reply on Sep 10, 2012 11:55 AM by NMed

    Columnchart with multiple Axes

    Mani_RIA

      Hi folks,

       

      i have a column chart with one column series and three line series, issue here is line sereis should start from 100(refer the screenshot).

       

      if you set  minimum and maximum property of DateTimeAxis then the line series will start from 100, but the first few months data of column series couldnt see it...

       

      anyways to achieve this ?

       

      thanks in advance.

       

      New Picture (1).JPG

       

      here is my code:

       

      <mx:Script>
          <![CDATA[
      
      // this function will be called after populating the collection.
      private function updateDateTimeAxis():void
      {
      dAxis.alignLabelsToUnits = true;
      dAxis.autoAdjust = true;
      dAxis.dataUnits = "months";
      dAxis.labelUnits = "months";
      dAxis.dataInterval = 5; 
      dAxis.interval = 5;
      }
      
      ]]>
      </mx:Script>
      
      <mx:DateTimeAxis id="dAxis" title="" dataUnits="months" labelUnits="months" padding="0.1" labelFunction="formatUnits"/>
      <mx:ColumnChart id="myChart" showDataTips="true" height="100%" width="100%" dataProvider="{chartProvider}"
      horizontalAxis="{dAxis}">
      <mx:verticalAxis>
          <mx:LinearAxis id="v2" title="Right Axes Label" interval="50"/>
      </mx:verticalAxis>
      <mx:horizontalAxisRenderers>
          <mx:AxisRenderer axis="{dAxis}" labelRotation="45" placement="bottom"/>
      </mx:horizontalAxisRenderers>
      <mx:verticalAxisRenderers>
      <mx:AxisRenderer placement="left" axis="{v2}" verticalAxisTitleAlignment="vertical"/>
      <mx:AxisRenderer placement="right" axis="{v1}" verticalAxisTitleAlignment="vertical"/>
      </mx:verticalAxisRenderers>
      <mx:series>
          <mx:Array>
             <mx:ColumnSeries xField="date" yField="field1" horizontalAxis="{dAxis}" displayName="Field Name">
              <mx:fill>
                  <mx:SolidColor color="0x767D87"/>
              </mx:fill>
             <mx:verticalAxis>
                     <mx:LinearAxis id="v1" title="Left Axes Label"/>
             </mx:verticalAxis>
         </mx:ColumnSeries>
        <mx:LineSeries
              xField="date" form="curve"
              yField="field1"  horizontalAxis="{dAxis}" verticalAxis="{v2}"
              displayName="Display Name 1">
              <mx:lineStroke>
                  <mx:Stroke color="0x0072AE" weight="2"/>
              </mx:lineStroke>
         </mx:LineSeries>
          <mx:LineSeries
              xField="date" form="curve"
              yField="field2"  horizontalAxis="{dAxis}" verticalAxis="{v2}"
              displayName="Display Name 2">
              <mx:lineStroke>
                  <mx:Stroke color="0x633068" weight="2"/>
              </mx:lineStroke>
         </mx:LineSeries>
         <mx:LineSeries
              xField="date" form="curve"
              yField="field3" horizontalAxis="{dAxis}" verticalAxis="{v2}"
              displayName="Display Name 3">
               <mx:lineStroke>
                  <mx:Stroke color="0xC18D00" weight="2"/>
              </mx:lineStroke>
         </mx:LineSeries>
         </mx:Array>
      </mx:series>
      </mx:ColumnChart>
      

      Regards,

      Mani

        • 1. Re: Columnchart with multiple Axes
          NMed

          Mani_RIA,

           

          In the future -->

          Please include more detail & I will try to see if I can help.  Such as, you make reference to a "formatUnits" labelFunction that is not included in your pasted code & your method "updateDateTimeAxis" is vague... when is this function called, what is it's use? 

          Most importantly, please provide a sample data provider for your ColumnChart... the "chartProvider" variable.  It's really hard to help out if it'll take me 30 minutes to 'set up' your code & get it working...which I'm not going to (and likely, no one else will either) do.

           

           

           

           

          In any event, it appears that your issue here is not data dependent, it's a question of getting the LineSeries to render the width of the ColumnChart.  I have done this by implementing a custom itemRenderer for a LineSeries component, such as:

          <mx:LineSeries yField="{WHATEVER....}" form="segment"

                                                                                itemRenderer="myCustomRenderer" verticalAxis="{WHATEVER....}">

           

          Then, myCustomRenderer would be something like:

          public class myCustomRenderer extends UIComponent implements IDataRenderer

          {

                private var item:LineSeriesItem;

             

                  public function myCustomerRenderer():void

                  {

                      super();      

                  }

             

                  public function get data():Object

                  {

                      return item;

                  }

                 

                  public function set data(value:Object):void

                  {

                                 if(value is LineSeriesItem)

                                 {

                                                item = value as LineSeriesItem;

                 

                                                if(!item.element is LineSeries) return;

                 

                                                var ls:LineSeries = item.element as LineSeries;

                                     if(item.index == 0) //first item -- extend line to x cooridinate of 0 (extend it all the way left)

                                     {

                                                    (item as LineSeriesItem).x = 0;

                                     }

                           

                            if(item.index == ls.items.length - 1) //last item -- extend line to max X coordinate (extend it all the way right)

                                     {

                                                              (item as LineSeriesItem).x = ls.width;

                                      }

                                }

                  }
          }

           

          This is a really stripped down version of the way that I have done this in the past.  Hope it helps... all I'm doing here is positioning the X-value of the first LineSeriesItem in a LineSeries all the way to the left & the last LineSeriesItem in a LineSeries all the way to the right. 

           

          If this doesn't help, then please refer above to what I said about giving more detail & I can see if I can help with your specific example.

          • 2. Re: Columnchart with multiple Axes
            Mani_RIA Level 1

            Hi NMed,

             

            Sorry for the incomplete information, going forward i'll provide  complete information.

             

            Your solution works Great  .

             

            I did a hack , i introduced one more DateTimeAxis and set visible false to the second renderers. like this,

             

            <mx:Script>
                <![CDATA[
            
            dAxis2.maximum = maxDate;
            dAxis2.minimum = minDate;
            
            dAxis.alignLabelsToUnits = true;
             dAxis.dataUnits = "months";
            dAxis.dataInterval = 6; 
            
             dAxis2.alignLabelsToUnits = false;
            dAxis2.dataUnits = "months";
            dAxis2.dataInterval = 6;
             
            ]]>
            </mx:Script>
            
            <mx:DateTimeAxis id="dAxis" title="Monthly Return" dataUnits="months" labelUnits="months" labelFunction="formatUnits"/>
            <mx:DateTimeAxis id="dAxis2" title="Cumulative Return" dataUnits="months" labelUnits="months" labelFunction="formatUnits"/>
            
            in the place of horizontalAxisRenderers
            
            <mx:horizontalAxisRenderers>
                <mx:AxisRenderer axis="{dAxis}" labelRotation="45" placement="bottom"/>
                <mx:AxisRenderer axis="{dAxis2}" labelRotation="45" placement="top" visible="false"/>
            </mx:horizontalAxisRenderers>
            

            Regards,

            Mani

            • 3. Re: Columnchart with multiple Axes
              NMed Level 1

              Great, I'm glad my solution had worked for you as well.

               

              Also, I'm glad that you found a solution for yourself, albeit, kind of a hack.  If it works for you & is sufficient for your application, then so be it .  In my experience, I try to avoid implementing things this way, as it's really not good coding practice (in just my opinion!).