4 Replies Latest reply on Jul 6, 2011 3:48 AM by Devkaran_Chomal

    Width of stack chart not getting retained in Flex 4 but working in Flex3

    Devkaran_Chomal

      I have a stack chart on  my dashboard when I click on stack chart it become a column chart. When I trying  to come back on stack chart by clicking on column chart the width of columns of  stack chart does not match with the previous stack  chart.

       

      Note: The same code is  working fine in flex 3 version.

       

      How can I maintain the  same width in both stack charts in flex 4 as it is performing in  flex3?

       

       

       

      Step 1 Monthly stack chart.

       

       

       

      Initially when I click on the equipment break down checkbox the stack chart appears as shown in the below screen shot.

       

       

       

      1.jpg

       

       

      Step 2: Monthly chart: Then when I click on the above “Monthly stack chart”, then I resume to my original bar chart appearance as shown in the below screenshot.

       

       

      2.jpg

       

       

       

       

      Step 3: Monthly stack chart: Further when I click on the above “Monthly chart” bar chart and move back to the “monthly stack chart” it appears as in the below screen shot in flex 4. The width of the chart in step 3 does not match with the width in step 1 of “Monthly Stack Chart”.

       

       

       

       

       

       

      3.jpg

       

       

       

       

       

      Note: In flex 3 the same step 3 appears to be as shown in the below screenshot.

       

       

      1.jpg

       

       

       

       

       

      How can I maintain the same width in step 1 and step 3 charts in flex 4 as it is performing in flex3?

       

       

      CODE:

       

      /* When click on column chart */

      private function chartDrillDown(e:ChartItemEvent):void

      {var colsr:ColumnSeries;

          If (chkEquipmentBreakdown.selected) Then

             {    loadBreakdownDataForMonth((e.hitData.chartItem.index)+1);

                           IsMonthly=true;

             }

          Else

             {

                  DrillState=e;

                    DrillLevel= DrillLevel==0?1:0;   

                        if(DrillLevel==1)

                        {chkDEMO.selected=false;

                              LastValidatedBox.visible=false;

                            siteid = e.hitData.item.VLD_SITE_ID;

                           var obj:Object=e.hitData.item;

                  colsr = ColumnSeries(e.hitData.element)

                           strassetname = obj[strTitleField].toString();

                           drillToIndex = e.hitData.item.VLD_SITE_ID;

                          viewequivalentBreakdown();

                          fromAssetToMonthly=true;

                          loadMonthlyData(siteid);

                        }

              Else

                        {     if(fromAssetToMonthly==true)

                            {

           DrillLevel=DrillLevel==1?0:1;

                            }

                            else

                            {

       

                              LastValidatedBox.visible=true;

                             

                  colsr = ColumnSeries(e.hitData.element)

       

       

                             siteid="-1";

                             ShowHideEquipmentBreakdown(false);

                              loadYearlyData();

                            }

                  If (IsMonthly) Then

                              {                

                                    onchkEquipmentBreakdownChange();

       

                              }

                              IsMonthly=false;

       

                        }

             }

       

        }  

       

       

      /* Bind data To column chart */

      private function onDataLoadComplete(event:ResultEvent):void

      {                                   webServ.removeEventListener(ResultEvent.RESULT,onDataLoadComplete);                

       

                        var resultArr:Array = event.result.toString().split("^");

                        xmlData = new XML(resultArr[0]);

                        xmlSeries= new XML(resultArr[1]);              

                        xmlColumns=new XML(resultArr[2]);

                        if(resultArr[3]!=null)

                        {     xmlValidatedData = new XML(resultArr[3]);

                              arrSeries=createSeries(xmlSeries,xmlValidatedData);

                        }

          Else

                        {

                              arrSeries=creatSeries(xmlSeries);

                        }

                        //chart properties

                        //arrSeries=creatSeries(xmlSeries);

                        colChart.series=arrSeries;

                      arrcalc=arrSeries;

       

                        /*if equipment break down check box checked*/

              If (chkEquipmentBreakdown.selected) Then

                        {colChart.type="stacked";

                        }

              Else

                        {

                              colChart.type="clustered";

                        }

                        colChart.dataProvider=xmlData.Table;

                        cursorManager.removeBusyCursor();

                  }

       

       

       

      /* function for load the step 1 and 3 "monthly stack chart".*/

      private function onchkEquipmentBreakdownChange():void

                  {

       

                        colsrs.setStyle("showDataEffect", zoomOut);    

       

          If (chkEquipmentBreakdown.selected) Then

                        {  GHGDemo.visible=false;

                              AtmosBox.visible=false;

                              chkCompareYear.enabled=false;

                              cursorManager.setBusyCursor();

                              webServ.addEventListener(ResultEvent.RESULT, onDataLoadComplete);

                              if(strTitle==strTitle1)

                              {

                                    if(GHGGROSS.selected==true)

                                    {

                                          webOper = webServ.getOperation("LoadGHGDataMonthlyBreak") as Operation;

                      webOper.send(userid,selectedYear,siteid);

                                    }

                  Else

                                    {

                                          webOper = webServ.getOperation("LoadGHGMonthlyBreak") as Operation;

                      webOper.send(userid,selectedYear,siteid);

                                    }

                        }

       

                  }

       

       

       

       

      /* function for load the step 2 "Monthly chart".*/

        private function loadBreakdownDataForMonth(monthnum:int):void

            {   var dayNum:uint = monthnum;

                  cursorManager.setBusyCursor();

                        webServ.addEventListener(ResultEvent.RESULT, onDataLoadComplete);

                        var atmosflag:Boolean;

                        var ghggrossflag:Boolean;

                        atmosflag=false;

                        ghggrossflag=false;

                        if(strTitle==strTitle1)

                              {

                                    if(GHGGROSS.selected==true)

                                    {

                                          webOper = webServ.getOperation("LoadGHGDataMonthWiseGross") as Operation;

                              webOper.send(userid,selectedYear,siteid,monthnum);

                                          ghggrossflag=true;

                                    }

              Else

                                    {

                                          webOper = webServ.getOperation("LoadGHGBreakDownDataMonthWiseNet") as Operation;

                             webOper.send(userid,selectedYear,siteid,monthnum);

                                    }

       

                              }

            }

       

       

      <mx:ColumnChart id="colChart" itemClick="chartDrillDown(event)"  dataTipFunction="dtFunc">

              <mx:horizontalAxis>

                 <mx:CategoryAxis  id="catAxis"  />

                        </mx:horizontalAxis>

                  <mx:verticalAxis>

                    <mx:LinearAxis id="lnrAxis" baseAtZero="true" minimum="0" title="" labelFunction="defineVerticalLabel"/>

                  </mx:verticalAxis>     

                  <mx:horizontalAxisRenderers>

                  <mx:AxisRenderer   axis="{catAxis}" labelRotation="45">

                  </mx:AxisRenderer>

            </mx:horizontalAxisRenderers>

        </mx:ColumnChart>