0 Replies Latest reply on May 27, 2010 3:02 AM by Yoni_Hillel_Barak

    DrillDown Chart

    Yoni_Hillel_Barak Level 1

      Hey everybody.


      I know this question will sound very basic to most of you, and this is because Flex is not my main programming language.

      I'm trying to create a Chart with Data DrillDown. I'm using an Adobe example to learn the subject. Here is the working flex example:

       

       

      <?xml version="1.0"?>
      <!-- charts/SimpleDrillDown.mxml -->
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" height="100%" width="100%" creationComplete="initApp()">
          <mx:Script><![CDATA[
              import mx.collections.ArrayCollection;
              
              [Bindable]
              public var dpac:ArrayCollection = new ArrayCollection ([
                  { date:"01/01/2006", cash:50000, 
                    stocks:198192, retirement:130101, 
                    home:750000, other:19148 },
                  { date:"02/01/2006", cash:50000, 
                    stocks:210309, retirement:143707, 
                    home:760000, other:19493 },
                  { date:"03/01/2006", cash:50000, 
                    stocks:238992, retirement:169529, 
                    home:770000, other:19933 },
                  { date:"04/01/2006", cash:50000, 
                    stocks:292269, retirement:242596, 
                    home:770000, other:21445 }]);
            
              public var initSeriesArray:Array = new Array();
              public var level:Number = 1;
              public var newSeries:Array;
              
              private function initApp():void {
                  // Get initial series Array -- to be reloaded when it returns 
                  // from a drill down.
                  initSeriesArray = chart.series;             
              }
              
              private function zoomIntoSeries(e:Event):void {
                  newSeries = new Array();
                  if (level == 1) {
                      newSeries.push(e.currentTarget);   
                      level = 2; 
                  } else {
                      newSeries = initSeriesArray;
                      p1.title = "Net Worth";
                      level = 1;
                  }           
                  chart.series = newSeries;            
              }
              
          ]]></mx:Script>
      
          <mx:Panel id="p1" title="Net Worth">
              <mx:ColumnChart id="chart" 
                  dataProvider="{dpac}" 
                  type="stacked" 
                  showDataTips="true"
              >
                  <mx:series> 
                      <mx:ColumnSeries id="s1" 
                          displayName="Cash" 
                          yField="cash" 
                          xField="date" 
                          click="zoomIntoSeries(event)"
                      />
                      <mx:ColumnSeries id="s2" 
                          displayName="Stocks" 
                          yField="stocks"  
                          xField="date"  
                          click="zoomIntoSeries(event)"
                      />
                      <mx:ColumnSeries id="s3" 
                          displayName="Retirement" 
                          yField="retirement" 
                          xField="date" 
                          click="zoomIntoSeries(event)"
                      />
                      <mx:ColumnSeries id="s4" 
                          displayName="Home" 
                          yField="home" 
                          xField="date" 
                          click="zoomIntoSeries(event)"
                      />
                      <mx:ColumnSeries id="s5" 
                          displayName="Other" 
                          yField="other" 
                          xField="date" 
                          click="zoomIntoSeries(event)"
                      />
                  </mx:series>            
                  <mx:horizontalAxis >
                      <mx:DateTimeAxis title="Date" dataUnits="months"/>
                  </mx:horizontalAxis>    
              </mx:ColumnChart> 
              <mx:Legend dataProvider="{chart}"/>
          </mx:Panel>
      </mx:Application>
      

       

      In this example the data in the array-collection is hard-coded. My question is: How can I populate the chart with data by using variables? In my standard charts I have a Yfeild and Xfeild linked to variables, and the graph is generating the data that lies inside those variables. How can I do the same here? I did some trial and error for awhile, Didn't work so well.

       

      If I'm not clear enough please ask questions. my flex knowledge is very scarce.