1 Reply Latest reply on Aug 12, 2010 1:53 AM by BhaskerChari

    Hiding legend entry in line chart

    asifdegr8

      i hide the line series lineSeries

           lineSeries.visible=false;

      but its legend entry is shown on the chart.

       

      How can I hide the legend entry to hidden line series?

        • 1. Re: Hiding legend entry in line chart
          BhaskerChari Level 4

          Hi Asif,

           

          You need to write some ActionScript to acheive this functionality...Its not that simple just as you make lineseries visible=false...the legend item will go

           

          away...You need to explicitly remove and add series...as shown in code below:


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

              <mx:Script>
                  <![CDATA[

                  import mx.collections.ArrayCollection;

                  [Bindable]
                  private var expensesAC:ArrayCollection = new ArrayCollection( [
                      { Month: "Jan", Profit: 2000, Expenses: 1500, Amount: 450 },
                      { Month: "Feb", Profit: 1000, Expenses: 200, Amount: 600 },
                      { Month: "Mar", Profit: 1500, Expenses: 500, Amount: 300 },
                      { Month: "Apr", Profit: 1800, Expenses: 1200, Amount: 900 },
                      { Month: "May", Profit: 2400, Expenses: 575, Amount: 500 } ]);
                     
                  private function addLineSeriesToChart(item:String):void 
               { 
                var isFound:Boolean = false;
                for ( var i:int = 0; i < lineChart.series.length; i++ ) 
                 { 
                 if ( lineChart.series[i].yField == item ) 
                 { 
                   isFound = true;
                 } 
                 } 
                 if(!isFound)
                 {
                 var newLS:LineSeries = new LineSeries(); 
                 newLS.yField = item;
                 newLS.displayName = item; 
                 var tmp:Array = lineChart.series;  
                 tmp.push(newLS); 
                 lineChart.series = tmp;  
                 lineChart.invalidateSeriesStyles();
                 }
               }
                  private function removeLineSeriesFromChart(item:String):void 
            { 
                 var objToRemoveIndex:int;
                 var isFound:Boolean = false;
                 for ( var i:int = 0; i < lineChart.series.length; i++ ) 
                 { 
                 if ( lineChart.series[i].yField == item ) 
                 { 
                  objToRemoveIndex = i; 
                  isFound = true;
                 } 
                 } 
                 if(isFound)
                 {
                  var tmp:Array = lineChart.series;
                  tmp.splice(objToRemoveIndex,1);
                  lineChart.series = tmp;
                  lineChart.invalidateSeriesStyles();
                 }    
            }
            private function addProfitLineSeries():void 
            {
             addLineSeriesToChart("Profit");
            }
            private function removeProfitLineSeries():void 
            {
             removeLineSeriesFromChart("Profit");
            }
                  ]]>
              </mx:Script>
              <mx:HBox width="100%" horizontalAlign="center">
            <mx:Button label="Add Profit Series" click="addProfitLineSeries()" />
            <mx:Button label="Remove Profit Series" click="removeProfitLineSeries()" />
              </mx:HBox>
              <!-- Define custom colors for use as fills in the AreaChart control. -->
              <mx:SolidColor id="sc1" color="blue" alpha=".3"/>
              <mx:SolidColor id="sc2" color="red" alpha=".3"/>
              <mx:SolidColor id="sc3" color="green" alpha=".3"/>

              <!-- Define custom Strokes. -->
              <mx:Stroke id = "s1" color="blue" weight="2"/>
              <mx:Stroke id = "s2" color="red" weight="2"/>
              <mx:Stroke id = "s3" color="green" weight="2"/>

              <mx:Panel title="LineChart and AreaChart Controls Example"
                  height="100%" width="100%" layout="horizontal">

                  <mx:LineChart id="lineChart" height="100%" width="45%"
                      paddingLeft="5" paddingRight="5"
                      showDataTips="true" dataProvider="{expensesAC}">
                         
                      <mx:horizontalAxis>
                          <mx:CategoryAxis categoryField="Month"/>
                      </mx:horizontalAxis>

                      <mx:series>
                          <mx:LineSeries id="lineSeriesProfit" yField="Profit" form="curve" displayName="Profit" lineStroke="{s1}"/>
                          <mx:LineSeries yField="Expenses" form="curve" displayName="Expenses" lineStroke="{s2}"/>
                          <mx:LineSeries yField="Amount" form="curve" displayName="Amount" lineStroke="{s3}"/>
                      </mx:series>
                  </mx:LineChart>

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

           

           

          If this post answers your question or helps, please kindly mark it as such.


          Thanks,

          Bhasker Chari