4 Replies Latest reply on Jul 8, 2008 1:15 PM by Solerous

    Chart legend too wide when using horizontal layout

    Solerous Level 1
      I am using a flex chart with about 15 series on it. I've set the legend direction variable to "horizontal". However since the panel width which contains the chart is fixed, the legend sprawls out to the right instead of going "wrapping around" nicely to stay within the panel. As a result, you can't read the whole legend when looking at the chart. The chart itself stays the proper width, but the legend is too wide and can only be seen via using the scrollbar to move horizontally. How can that be fixed?
        • 1. Re: Chart legend too wide when using horizontal layout
          matthew horn Level 3
          Solerous, you must create a custom legend. Here's an example that uses a grid to lay out the individual grid items. If you have a variable number of series, then you can probably come up with better logic for laying out the legend, but this should help get you going.

          hth,
          matt horn
          flex docs


          <?xml version="1.0"?>
          <!-- charts/CustomLegendInActionScript.mxml -->
          <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" backgroundColor="white" creationComplete="init()">
          <mx:Script><![CDATA[
          import mx.containers.GridItem;
          import mx.containers.GridRow;
          import mx.graphics.SolidColor;
          import mx.graphics.IFill;
          import mx.charts.LegendItem;
          import mx.charts.Legend;
          import mx.collections.ArrayCollection;
          [Bindable]
          public var expenses:ArrayCollection = new ArrayCollection([
          {Expense:"Taxes", April:2000, May:321, June:131, July:1100, August:200, September:1400, October:42},
          {Expense:"Rent", April:1000, May:95, June:313, July:600, August:400, September:200, October:52},
          {Expense:"Taxes", April:2000, May:321, June:131, July:90, August:500, September:900, October:300},
          {Expense:"Bills", April:100, May:478, June:841, July:400, August:600, September:1100, October:150}
          ]);



          private function init():void {
          for (var i:int = 0; i < myChart.series.length; i++) {
          var li:LegendItem = new LegendItem();
          li.label = myChart.series .displayName;

          var sc:SolidColor = myChart.series
          .getStyle("fill");

          li.setStyle("fill", sc);
          var gi:GridItem = new GridItem();

          if (i < 3) {
          // First row
          gi.addChild(li);
          gr1.addChild(gi);
          } else if (i >= 3 && i < 6) {
          // Second row
          gi.addChild(li);
          gr2.addChild(gi);
          } else if (i >= 6) {
          // Third row
          gi.addChild(li);
          gr3.addChild(gi);
          }
          }
          }

          ]]></mx:Script>

          <mx:Panel title="Bar Chart with Legend" width="500" height="600">
          <mx:BarChart id="myChart" dataProvider="{expenses}" height="400" showDataTips="true">
          <mx:verticalAxis>
          <mx:CategoryAxis
          dataProvider="{expenses}"
          categoryField="Expense"
          />
          </mx:verticalAxis>
          <mx:series>
          <mx:BarSeries xField="April" displayName="April (in $USD)"/>
          <mx:BarSeries
          xField="May"
          displayName="May (in $USD)"
          />
          <mx:BarSeries
          xField="June"
          displayName="June (in $USD)"
          />
          <mx:BarSeries
          xField="July"
          displayName="July (in $USD)"
          />
          <mx:BarSeries
          xField="August"
          displayName="August (in $USD)"
          />
          <mx:BarSeries
          xField="September"
          displayName="September (in $USD)"
          />
          <mx:BarSeries
          xField="October"
          displayName="October (in $USD)"
          />
          </mx:series>
          </mx:BarChart>

          <mx:Grid id="myGrid">
          <mx:GridRow id="gr1">
          </mx:GridRow>
          <mx:GridRow id="gr2">
          </mx:GridRow>
          <mx:GridRow id="gr3">
          </mx:GridRow>
          </mx:Grid>

          </mx:Panel>
          </mx:Application>
          • 2. Chart legend too wide when using horizontal layout
            eberman
            Matt,

            Just an FYI - your code produced an error for me on myChart.series.getStyle("fill"): (I'm using build 3.0.194161)

            TypeError: Error #1006: getStyle is not a function.
            at CustomLegend2/init()[C:\Documents and Settings\m\My Documents\Flex Builder 3\Sandbox\src\CustomLegend2.mxml:27]
            at CustomLegend2/___CustomLegend2_Application1_creationComplete()[C:\Documents and Settings\m\My Documents\Flex Builder 3\Sandbox\src\CustomLegend2.mxml:3]
            at flash.events::EventDispatcher/dispatchEventFunction()
            at flash.events::EventDispatcher/dispatchEvent()
            at mx.core::UIComponent/dispatchEvent()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\co re\UIComponent.as:9051]
            at mx.core::UIComponent/set initialized()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\core\UIComponent.as:1167]
            at mx.managers::LayoutManager/doPhasedInstantiation()[E:\dev\3.0.x\frameworks\projects\frame work\src\mx\managers\LayoutManager.as:698]
            at Function/ http://adobe.com/AS3/2006/builtin::apply()
            at mx.core::UIComponent/callLaterDispatcher2()[E:\dev\3.0.x\frameworks\projects\framework\sr c\mx\core\UIComponent.as:8460]
            at mx.core::UIComponent/callLaterDispatcher()[E:\dev\3.0.x\frameworks\projects\framework\src \mx\core\UIComponent.as:8403]
            • 3. Chart legend too wide when using horizontal layout
              matthew horn Level 3
              Weird. Looks like somehow the brackets got dropped. There are two lines that are affected:

              myChart.series.displayName;
              should be
              myChart.series[\i].displayName;

              and
              var sc:SolidColor = myChart.series.getStyle("fill");
              should be
              var sc:SolidColor = myChart.series[\i].getStyle("fill");

              (Just remove the backslashes... can't get the code to show up right without them...)

              hth,
              matt horn
              flex docs
              • 4. Re: Chart legend too wide when using horizontal layout
                Solerous Level 1
                Matt, thanks for the reply. The series number is actually dynamic so I'd have to adjust the code. The question I have about this implementation is what about resizing the chart panel? When I do this for the chart itself, the graph expands nicely to fill out the panel. However, the Legend does not resize appropriately and seems to stay in it's fixed format. So statically adding the grid items is not ideal either but perhaps there is really no way around this since I don't know enough about flex to know who to get a custom legend to redistribute its LegendItems when the chart panel is redrawn...