Column Chart - How to show different years side by side?

[ionarawilson1]

I am using the pie chart example here

http://help.arcgis.com/en/webapi/flex/samples/index.html#//01nq00000040000000



to create an application with a column chart. I have two years of data, so I would like to show two bars, one for each year. However my column chart just shows data for one year. If the where expression says selects all records, ( expr = "1 = '1'") the charts still point show 2007. If I change the where expression to 2009, then I get 2009 data but not 2007. How can I change the code so I can show the bars for both years? I am including a screenshot of the chart. Thank you for any help!!!

<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"       xmlns:s="library://ns.adobe.com/flex/spark"       xmlns:mx="library://ns.adobe.com/flex/mx"       xmlns:esri="http://www.esri.com/2008/ags"       pageTitle="Economic Impacts - Trends">  <!--  @@includeFiles com/esri/ags/samples/MyInfoRenderer.mxml      -->    <s:layout>   <s:VerticalLayout paddingTop="5"/>  </s:layout>    <fx:Style>   @namespace esri "http://www.esri.com/2008/ags";      esri|InfoSymbolWindow {    infoPlacementMode: none;    infoPlacement:top;    infoOffsetX: 12;    infoOffsetY: 12;    infoOffsetW: 6;    borderThickness: 2;   }  </fx:Style>    <fx:Script>   <![CDATA[    import com.esri.ags.FeatureSet;    import com.esri.ags.Graphic;    import com.esri.ags.esri_internal;    import com.esri.ags.events.MapEvent;    import com.esri.ags.tasks.QueryTask;    import com.esri.ags.tasks.supportClasses.Query;        import mx.collections.ArrayCollection;    import mx.controls.Alert;    import mx.core.IDataRenderer;    import mx.events.FlexEvent;    import mx.rpc.AsyncResponder;        protected function myMap_initializeHandler(event:MapEvent):void    {     // Query to get the cities under the specified state     var queryTask:QueryTask = new QueryTask();     queryTask.url = "http://tfsgis-iisd01:6080/arcgis/rest/services/Economic_Impacts_Trends/TrendsService/MapServer/0";     queryTask.useAMF = false;     var expr:String = "";  /*     expr = "YEAR_DATA = '2007'"  */      expr = "1 = '1'"      var query:Query = new Query();     query.outSpatialReference = myMap.spatialReference;     query.outFields = [ "YEAR_DATA", "DirTotalInd", "DirTotalEmp", "NAME"];     query.returnGeometry = true;     query.where = expr;      queryTask.execute(query, new AsyncResponder(onResult, onFault));     // add the graphic on the map              function onResult(featureSet:FeatureSet, token:Object = null):void     {      for each (var myGraphic:Graphic in featureSet.features)      {       myGraphicsLayer.add(myGraphic);       // creating an arraycollection from the graphic attributes       var object:ArrayCollection = new ArrayCollection(        [                  { NAME: myGraphic.attributes.NAME, YEAR: "Industry Output Totals", VALUE: myGraphic.attributes.YEAR_DATA, TOTAL: myGraphic.attributes.DirTotalInd },                         ]);       myGraphic.attributes = object;      }     }     function onFault(info:Object, token:Object = null):void     {      Alert.show(info.toString());     }    }        ]]>  </fx:Script>    <fx:Declarations>   <esri:InfoSymbol id="infoSymbol" infoRenderer="MyInfoRenderer1"/>  </fx:Declarations>    <s:Label fontSize="12"     fontWeight="bold"     text="Click a marker to see the InfoSymbol open up with a pie chart of its population data under different age groups"/>    <esri:Map id="myMap"      load="myMap_initializeHandler(event)"      openHandCursorVisible="false">   <esri:extent>    <esri:Extent  xmin="-10800000" ymin="3370000" xmax="-10370000" ymax="4100000">     <esri:spatialReference>      <esri:SpatialReference wkid="102100"/>     </esri:spatialReference>    </esri:Extent>   </esri:extent>   <esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"/>   <esri:GraphicsLayer id="myGraphicsLayer" symbol="{infoSymbol}"/>  </esri:Map>   </s:Application>

And the renderer

<?xml version="1.0" encoding="utf-8"?> <s:VGroup xmlns:fx="http://ns.adobe.com/mxml/2009"     xmlns:s="library://ns.adobe.com/flex/spark"     xmlns:mx="library://ns.adobe.com/flex/mx"     clipAndEnableScrolling="true"     creationComplete="creationCompleteHandler()"     implements="mx.core.IDataRenderer">  <!--  This is used by the QueryResultsWithChart sample.  -->  <fx:Style>   @namespace s "library://ns.adobe.com/flex/spark";   @namespace mx "library://ns.adobe.com/flex/mx";      .InfoCloseButton {    disabledSkin: Embed(source="/assets/skins.swf", symbol="Callout_closeButtonDisabledSkin");    downSkin: Embed(source="/assets/skins.swf", symbol="Callout_closeButtonDownSkin");    overSkin: Embed(source="/assets/skins.swf", symbol="Callout_closeButtonOverSkin");    upSkin: Embed(source="/assets/skins.swf", symbol="Callout_closeButtonUpSkin");   }      .InfoExpandButton {    disabledSkin: Embed(source="/assets/skins.swf", symbol="Callout_expandButtonDisabledSkin");    downSkin: Embed(source="/assets/skins.swf", symbol="Callout_expandButtonDownSkin");    overSkin: Embed(source="/assets/skins.swf", symbol="Callout_expandButtonOverSkin");    upSkin: Embed(source="/assets/skins.swf", symbol="Callout_expandButtonUpSkin");   }  </fx:Style>    <fx:Script>   <![CDATA[    private var _data:Object;        [Bindable]    // implement IDataRenderer    public function get data():Object    {     return _data;    }        public function set data(value:Object):void    {     _data = value;    }        private var _expr:String;          private function creationCompleteHandler():void    {     parent.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);     parent.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);    }        private function rollOverHandler(event:MouseEvent):void    {     if (currentState == "normal")     {      currentState = "titleState";     }    }        private function rollOutHandler(event:MouseEvent):void    {     if (currentState == "titleState")     {      currentState = "normal";     }    }        private function expandButton_clickHandler():void    {     currentState = "detailState";    }        private function closeButton_clickHandler():void    {     currentState = "normal";    }        private function effectStartHandler():void    {     parent.removeEventListener(MouseEvent.ROLL_OVER, rollOverHandler);    }        private function effectEndHandler():void    {               parent.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);    }        ]]>  </fx:Script>    <s:states>   <s:State name="normal"/>   <s:State name="titleState"/>   <s:State name="detailState"/>  </s:states>    <s:transitions>   <s:Transition fromState="*" toState="*">    <s:Resize duration="250"        effectEnd="effectEndHandler()"        effectStart="effectStartHandler()"        target="{this}"/>   </s:Transition>  </s:transitions>    <s:HGroup id="titleBar"      width="100%"      height="30%"      verticalAlign="middle">   <mx:Image id="pieChartImage"       width="5" height="5"       source="@Embed(source='/assets/ColumnChart2.png')"/>   <s:Label id="titleLabel"      fontSize="10"      fontWeight="bold"      includeIn="titleState,detailState"      text="{data.getItemAt(0).NAME}"/>   <mx:Button id="expandButton"        width="18" height="18"        click="expandButton_clickHandler()"        includeIn="titleState"        styleName="InfoExpandButton"/>   <mx:Spacer width="100%" includeIn="detailState"/>   <mx:Button id="closeButton"        width="18" height="18"        click="closeButton_clickHandler()"        includeIn="detailState"        styleName="InfoCloseButton"/>  </s:HGroup>     <mx:ColumnChart id="columnchart" showDataTips="true" selectionMode="multiple"   width="150" height="150"      dataProvider="{data}"       includeIn="detailState"     >   <mx:horizontalAxis   >    <mx:CategoryAxis id="categoryaxis" dataProvider="{data}" categoryField="YEAR"  />   </mx:horizontalAxis>   <mx:series>    <mx:ColumnSeries interactive="true" labelField="NAME" id="column1"         displayName="2007" xField = "YEAR" yField="TOTAL"          dataProvider="{data}"/>        <mx:ColumnSeries interactive="true"  id="column2"         displayName="2009" xField = "YEAR" yField="TOTAL"          dataProvider="{data}"/>          </mx:series>   </mx:ColumnChart>    </s:VGroup>

[ionarawilson1 · Accepted solution]

I found a solution: I had to change the columns in my feature service. Before I had two columns for each county, each representing the 2007 and 2009 data. I decided to keep just one column for each county and repeat the columns for the different years. It worked! Then on the code

function onResult(featureSet:FeatureSet, token:Object = null):void     {      for each (var myGraphic:Graphic in featureSet.features)      {                myGraphicsLayer.add(myGraphic);       // creating an arraycollection from the graphic attributes       var object:ArrayCollection = new ArrayCollection(        [                  { NAME: myGraphic.attributes.NAME, YEAR: "Industry Output Totals", VALUE: myGraphic.attributes.YEAR_DATA, TOTAL07: myGraphic.attributes.DirTotal_1, TOTAL09: myGraphic.attributes.DirTotal_5 },                         ]);       myGraphic.attributes = object;      }     }     function onFault(info:Object, token:Object = null):void     {      Alert.show(info.toString());     }    }            

renderer:

 <mx:ColumnChart id="columnchart" showDataTips="true" selectionMode="multiple"   width="150" height="150"      dataProvider="{data}"       includeIn="detailState"     >   <mx:horizontalAxis   >    <mx:CategoryAxis id="categoryaxis" dataProvider="{data}" categoryField="NAME"  />   </mx:horizontalAxis>   <mx:series>    <mx:ColumnSeries interactive="true" labelField="NAME" id="column1"         displayName="2007" xField = "NAME" yField="TOTAL07"          dataProvider="{data}"/>        <mx:ColumnSeries interactive="true" labelField="NAME" id="column2"         displayName="2009" xField = "NAME" yField="TOTAL09"          dataProvider="{data}"/>       </mx:series>   </mx:ColumnChart>