2 Replies Latest reply on Jul 1, 2009 9:50 PM by G009

    Legend Problem in multiple series chart

    G009 Level 1

      Hello,

       

      I am getting problem in displaying legend. I have created a chart with  multiple series and custon color. Here is my code. You can copy paste it.

      Out of 3 only one legend marker n label coming.

       

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

      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #FFFFFF]">

      <mx:Script>

      <![CDATA[

      import mx.collections.ArrayCollection;

      import mx.rpc.events.ResultEvent;

      import mx.controls.Alert;

       

            [Bindable]

            public var SMITH:ArrayCollection = new ArrayCollection([

              {date:"22-Aug-05", close:41.87, close2:45.23},

              {date:"23-Aug-05", close:45.74, close2:40.90},

              {date:"24-Aug-05", close:42.77, close2:46.99},

              {date:"25-Aug-05", close:48.06, close2:40.22},

           ]);

       

           [Bindable]

            public var DECKER:ArrayCollection = new ArrayCollection([

              {date:"22-Aug-05", close:157.59},

              {date:"23-Aug-05", close:160.3},

              {date:"24-Aug-05", close:150.71},

              {date:"25-Aug-05", close:156.88},

           ]);

       

          ]]>

      </mx:Script>

       

        <mx:Style>

          ColumnChart {

              paddingLeft:20;

              paddingRight:20;

              paddingBottom:10;

              paddingTop:10;

           }

           Legend {

           paddingLeft:20;

              paddingRight:20;

              paddingBottom:20;

              paddingTop:10;

           }

        </mx:Style>

       

            <mx:Stroke id="axisStroke"

              color="#000000"

              weight="2"

              alpha=".75"

              caps="round"

          />

       

      <mx:VBox width="500" height="500" borderColor="#000000" cornerRadius="20" themeColor="#009DFF" borderStyle="solid" borderThickness="1" horizontalAlign="center" x="246.5" y="61">

           <mx:ColumnChart id="multipleChart"  showDataTips="true" width="100%" height="100%"  seriesFilters="[]">

              <mx:horizontalAxis>

                 <mx:CategoryAxis id="h1" categoryField="date"/>

              </mx:horizontalAxis>

       

              <mx:horizontalAxisRenderers>

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

                  <mx:axisStroke>{axisStroke}</mx:axisStroke>

                  </mx:AxisRenderer>

              </mx:horizontalAxisRenderers>

       

              <mx:verticalAxisRenderers>

                  <mx:AxisRenderer placement="left" axis="{v1}"><mx:axisStroke>{axisStroke}</mx:axisStroke></mx:AxisRenderer>

                  <mx:AxisRenderer placement="right" axis="{v2}"><mx:axisStroke>{axisStroke}</mx:axisStroke></mx:AxisRenderer>

              </mx:verticalAxisRenderers>

       

              <mx:series>

                 <mx:ColumnSeries id="cs1" horizontalAxis="{h1}" dataProvider="{SMITH}" xField="date" yField="close" displayName="Smith" fills="#6693B0">

                      <mx:verticalAxis>

                         <mx:LinearAxis id="v1" minimum="40" maximum="50"/>

                      </mx:verticalAxis>

                 </mx:ColumnSeries>

                 <mx:ColumnSeries id="cs3" horizontalAxis="{h1}" dataProvider="{SMITH}" xField="date" yField="close2" displayName="Smiths" fills="#86D1E4">

                 </mx:ColumnSeries>          

                 <mx:LineSeries id="cs2" horizontalAxis="{h1}" dataProvider="{DECKER}" xField="date" yField="close" displayName="Decker">

                      <mx:verticalAxis>

                          <mx:LinearAxis id="v2" minimum="150" maximum="170"/>          

                      </mx:verticalAxis>

                      <mx:lineStroke>

             <mx:Stroke color="#CC3300" weight="1"/>

          </mx:lineStroke>

                 </mx:LineSeries>

              </mx:series>

           </mx:ColumnChart>

           <mx:Legend dataProvider="{multipleChart}"  horizontalAlign="center" direction="horizontal"/>

      </mx:VBox>

      </mx:Application>

        • 1. Re: Legend Problem in multiple series chart
          eberman

          I've run into this, too:

           

          Remove the fills property from each ColumnSeries and it'll work.

           

          If you want to use the fills property, you'll have to add your own custom legend code.

           

          From the Flex API:

          "If you specify the fills property and you want to have a Legend  control, you must manually create a Legend control and add LegendItems to it."

          1 person found this helpful
          • 2. Re: Legend Problem in multiple series chart
            G009 Level 1

            Thanks eberman, i changed it to

            <mx:fill>

                            <mx:SolidColor color="#A5BC4E"/>

                       </mx:fill>

            it worked, and ya you were right, i fount that solution also correct.

            Thanks again.