4 Replies Latest reply on Jan 11, 2011 12:31 PM by Flexer_Student

    Problems Drill-Down and change chart

    Flexer_Student

      Hey guys,

       

      I´m new in developing with Flex.

       

      I want to create a dashboard with a drill-down function. First, there should be displayed some data in a line chart. When I click on a point, there should be a drill-down to specific data which are displayed in a column chart.

       

      So far I´ve done the line chart and the drill-down function - it´s working. But now I´ve got some problems to change the chart after the drill-down to a column chart. In the current version (I´ve posted below) there´s still the line chart after the drill-down.

       

      After spending a long time with google I hope someone can help me!

       

      Thank u guys!

       

       

       

      Here my current code:

       

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns="*"
                      xmlns:s="library://ns.adobe.com/flex/spark"
                      xmlns:fx="com.fusiox.ui.*"
                      xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" horizontalAlign="center" backgroundColor="0xeeeeee">
         
          <mx:Script>
              <![CDATA[
                  import mx.collections.ArrayCollection;
                  import mx.charts.HitData;
                  import mx.charts.events.ChartItemEvent;
             
                  [Bindable]
                  public var average:ArrayCollection = new ArrayCollection([
                      {week:"KW 01", bsg:"99", fbg:"4", bqq:"95"},
                      {week:"KW 02", bsg:"94", fbg:"3", bqq:"91"},
                      {week:"KW 03", bsg:"98", fbg:"2", bqq:"96"},
                      {week:"KW 04", bsg:"92", fbg:"12", bqq:"81"},
                      {week:"KW 05", bsg:"96", fbg:"2", bqq:"94"},
                      {week:"KW 06", bsg:"87", fbg:"2", bqq:"86"},
                  ]);   
                 
                  [Bindable]
                  public var drillDownDataSet:ArrayCollection;
                 
                  [Bindable]
                  public var dp:ArrayCollection = average;
                 
                  private function zoomIntoSeries(e:ChartItemEvent):void {
                      if (dp==average) {
                          drillDownDataSet = new ArrayCollection(genData(e));
                          lineSeries_1.displayName = "Drill-Down";
                          lineSeries_1.yField = "amount";
                          lineSeries_1.xField = "type";
                         
                          xaxis_l1.categoryField = "type";
                         
                          panel_1.title = "Drill-Down (title)";
                          dp = drillDownDataSet;
                         
                          // Remove the Legend. It is not needed in this view because
                          // each asset class is its own column in the drill down.
                          //p1.removeChild(myLegend);
                      } else {
                          lineSeries_1.displayName = "Regular";
                          lineSeries_1.yField = "bqq";
                          lineSeries_1.xField = "week";
                         
                          xaxis_l1.categoryField = "week";
                         
                          panel_1.title = "Regular (title)";
                          dp = average;
                         
                          // Add the Legend back to the Panel.
                          //p1.addChild(myLegend);
                      }
                  }
                 
                  private function genData(e:ChartItemEvent):Array {
                      var result:Array = [];
                     
                      trace("bsg: " + e.hitData.item.cash);
                      trace("fbg: " + e.hitData.item.stocks);
                     
                      var o1:Object = {
                          type:"bsg",
                          amount:e.hitData.item.bsg
                      };                     
                      var o2:Object = {
                          type:"fbg",
                          amount:e.hitData.item.fbg
                      };                    
                      trace(o1.type + ":" + o1.amount);
                     
                      result.push(o1);
                      result.push(o2);
                      return result;              
                  }       
              ]]>
          </mx:Script>
         
          <mx:Text width="100%" color="0x000000" paddingBottom="50" fontSize="20" fontWeight="bold" fontFamily="Verdana">
              <mx:text>
                  Dashboard TBS
              </mx:text>
          </mx:Text>
         
          <mx:HDividedBox width="95%" height="85%" horizontalGap="30" paddingBottom="30" paddingTop="30" paddingLeft="30" paddingRight="30" borderStyle="solid">
              <mx:Canvas label="Canvas 1" width="100%" height="100%">
                  <mx:Panel id="panel_1" title="Bereitstellungsqualität" headerColors="[#c9c9c9, #848484]" width="100%" height="100%" cornerRadius="8" borderThicknessLeft="0" borderThicknessRight="0" borderThicknessBottom="0" horizontalAlign="center" verticalAlign="middle" paddingBottom="30" paddingTop="30" borderAlpha="1">
                      <mx:LineChart id="linechart_1" dataProvider="{dp}" itemClick="zoomIntoSeries(event)" showDataTips="true" height="100%">
                          <mx:seriesFilters>
                              <mx:Array/>
                          </mx:seriesFilters>
                          <mx:horizontalAxis>
                              <mx:CategoryAxis id="xaxis_l1" categoryField="week"/>
                          </mx:horizontalAxis>
                          <mx:verticalAxis>
                              <mx:LinearAxis id="yaxis_l1"/>
                          </mx:verticalAxis>
                          <mx:series>
                              <mx:LineSeries id="lineSeries_1" displayName="Bereitstellungsqualitätsquote" xField="week" yField="bqq">           
                                  <mx:lineStroke>
                                      <s:SolidColorStroke color="0x848484" weight="3" alpha=".8"/>
                                  </mx:lineStroke>
                              </mx:LineSeries>
                          </mx:series>
                      </mx:LineChart>
                  </mx:Panel>
              </mx:Canvas>               
          </mx:HDividedBox>
      </mx:Application>

        • 1. Re: Problems Drill-Down and change chart
          BhaskerChari Level 4

          HI ,

           

          You can try this code..

           

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns="*"
                          xmlns:s="library://ns.adobe.com/flex/spark"
                          xmlns:fx="com.fusiox.ui.*"
                          xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" horizontalAlign="center" backgroundColor="0xeeeeee">
             
              <mx:Script>
                  <![CDATA[
                      import mx.collections.ArrayCollection;
                      import mx.charts.HitData;
                      import mx.charts.events.ChartItemEvent;
                 
                      [Bindable]
                      public var average:ArrayCollection = new ArrayCollection([
                          {week:"KW 01", bsg:"99", fbg:"4", bqq:"95"},
                          {week:"KW 02", bsg:"94", fbg:"3", bqq:"91"},
                          {week:"KW 03", bsg:"98", fbg:"2", bqq:"96"},
                          {week:"KW 04", bsg:"92", fbg:"12", bqq:"81"},
                          {week:"KW 05", bsg:"96", fbg:"2", bqq:"94"},
                          {week:"KW 06", bsg:"87", fbg:"2", bqq:"86"},
                      ]);   
                     
                      [Bindable]
                      public var drillDownDataSet:ArrayCollection;
                     
                      [Bindable]
                      public var dp:ArrayCollection = average;
                     
                      private function zoomIntoSeries(e:ChartItemEvent):void {
                          if (dp==average) {
                              drillDownDataSet = new ArrayCollection(genData(e));
                              lineSeries_1.displayName = "Drill-Down";
                              lineSeries_1.yField = "amount";
                              lineSeries_1.xField = "type";
                             
                              xaxis_l1.categoryField = "type";
                             
                              panel_1.title = "Drill-Down (title)";
                              dp = drillDownDataSet;
                              columnSeries.visible = true;
                              lineSeries_1.visible = false;
                              // Remove the Legend. It is not needed in this view because
                              // each asset class is its own column in the drill down.
                              //p1.removeChild(myLegend);
                          } else {
                              lineSeries_1.displayName = "Regular";
                              lineSeries_1.yField = "bqq";
                              lineSeries_1.xField = "week";
                             
                              xaxis_l1.categoryField = "week";
                             
                              panel_1.title = "Regular (title)";
                              dp = average;
                              columnSeries.visible = false;
                              lineSeries_1.visible = true;
                              // Add the Legend back to the Panel.
                              //p1.addChild(myLegend);
                          }
                      }
                     
                      private function genData(e:ChartItemEvent):Array {
                          var result:Array = [];
                         
                          trace("bsg: " + e.hitData.item.cash);
                          trace("fbg: " + e.hitData.item.stocks);
                         
                          var o1:Object = {
                              type:"bsg",
                              amount:e.hitData.item.bsg
                          };                     
                          var o2:Object = {
                              type:"fbg",
                              amount:e.hitData.item.fbg
                          };                    
                          trace(o1.type + ":" + o1.amount);
                         
                          result.push(o1);
                          result.push(o2);
                          return result;              
                      }       
                  ]]>
              </mx:Script>
             
              <mx:Text width="100%" color="0x000000" paddingBottom="50" fontSize="20" fontWeight="bold" fontFamily="Verdana">
                  <mx:text>
                      Dashboard TBS
                  </mx:text>
              </mx:Text>
              <mx:HDividedBox width="95%" height="85%" horizontalGap="30" paddingBottom="30" paddingTop="30" paddingLeft="30" paddingRight="30" borderStyle="solid">
                  <mx:Canvas label="Canvas 1" width="100%" height="100%">
                      <mx:Panel id="panel_1" title="Bereitstellungsqualität" headerColors="[#c9c9c9, #848484]" width="100%" height="100%" cornerRadius="8" borderThicknessLeft="0" borderThicknessRight="0" borderThicknessBottom="0" horizontalAlign="center" verticalAlign="middle" paddingBottom="30" paddingTop="30" borderAlpha="1">
                          <mx:LineChart id="linechart_1" dataProvider="{dp}" itemClick="zoomIntoSeries(event)" showDataTips="true" height="100%">
                              <mx:seriesFilters>
                                  <mx:Array/>
                              </mx:seriesFilters>
                              <mx:horizontalAxis>
                                  <mx:CategoryAxis id="xaxis_l1" categoryField="week"/>
                              </mx:horizontalAxis>
                              <mx:verticalAxis>
                                  <mx:LinearAxis id="yaxis_l1"/>
                              </mx:verticalAxis>
                              <mx:series>
                                  <mx:LineSeries id="lineSeries_1" displayName="Bereitstellungsqualitätsquote" xField="week" yField="bqq">           
                                      <mx:lineStroke>
                                          <mx:Stroke color="0x848484" weight="3" alpha=".8"/>
                                      </mx:lineStroke>
                                  </mx:LineSeries>
                                  <mx:ColumnSeries id="columnSeries" visible="false" showEffect="Fade" hideEffect="Fade" yField="amount"  xField="type" displayName="type" />
                              </mx:series>
                          </mx:LineChart>
                      </mx:Panel>
                  </mx:Canvas>               
              </mx:HDividedBox>
          </mx:Application>

           

          Thanks,

          Bhasker

          1 person found this helpful
          • 2. Re: Problems Drill-Down and change chart
            Flexer_Student Level 1

            Hello  Bhasker,

             

            thank you for your fast reply - it´s working with ur code.

             

            But I´ve two points I want to change, but I don´t know how:

             

            1. How can I center the points of value above the column and the description below each column?

             

            2. Is it also possible to create separate dataProvider for the line chart and the column chart?

             

               The goal should be: The line chart displays the value of "bqq" (for example: that´s an average of "bsg" and "fbg"). The column chart displays the value of "bsg" and "fbg". The result is one dataProvider with "bqq" and a second dataProvider for "bsg" and "fbg".

             

             

             

            Thank you very much for your help!

            • 3. Re: Problems Drill-Down and change chart
              BhaskerChari Level 4

              For your #1 .. you just simply replace the LineChart with the ColumnChart..<mx:LineChart/> to <mx:ColumnChart />

               

               

              For your #2 the answer is yes..you can use different dataproviders..But remember one thing the xField should be same for both the charts otherwise the alignment would not be proper as in our case the code I posted in my prev post. Since the xField is different for both charts.

               

              You chech this code for using two dataproviders...

               

              <?xml version="1.0" encoding="utf-8"?>
              <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
                <mx:Script>
                  import mx.collections.ArrayCollection;
                  [Bindable]
                  public var SMITH:ArrayCollection = new ArrayCollection([
                    {date:"22-Aug-05", close:41.87},
                    {date:"23-Aug-05", close:45.74},
                    {date:"24-Aug-05", close:42.77},
                    {date:"25-Aug-05", close:48.06},
                    ]);
                  [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:Panel title="Column Chart With Multiple Series">
                  <mx:ColumnChart id="myChart" dataProvider="{SMITH}"
                    secondDataProvider="{DECKER}" showDataTips="true">
                    <mx:horizontalAxis>
                      <mx:CategoryAxis dataProvider="{SMITH}"
                        categoryField="date" />
                    </mx:horizontalAxis>
                    <mx:verticalAxis>
                      <mx:LinearAxis minimum="40" maximum="50" />
                    </mx:verticalAxis>
                    <mx:series>
                      <mx:ColumnSeries id="cs1" dataProvider="{SMITH}"
                        xField="date" yField="close" displayName="SMITH" />
                    </mx:series>
                    <mx:secondVerticalAxis>
                      <mx:LinearAxis minimum="150" maximum="170" />
                    </mx:secondVerticalAxis>
                    <mx:secondSeries>
                      <mx:LineSeries id="cs2" dataProvider="{DECKER}"
                        xField="date" yField="close" displayName="DECKER" />
                    </mx:secondSeries>
                  </mx:ColumnChart>
                </mx:Panel>
              </mx:Application>

               

              Thanks,

              Bhasker

              1 person found this helpful
              • 4. Re: Problems Drill-Down and change chart
                Flexer_Student Level 1

                Hey BhaskerChari,

                 

                thanks for ur reply - it was helpful and it´s working.

                 

                To get the result I want, I upgraded ur solution because my idea is a bit more complex.

                 

                Now, most of it is working. But I´ve only one last problem in my solution - it´s the drill-down with changing the chart when I drill-down.

                 

                In my small code snipping I posted your code for drill-down was working great.

                 

                Now, I´m using a function to provide data via the dataProvider.

                 

                Everything is working, but not the drill-down (but it´s still the same code than before).

                 

                It would be great if u or someone can find a couple of minutes to help me.

                 

                The goal should be that first, when the dashboard is started, the provided data of  function calcAvgKPI() displayed. When I drill-down on a point there should be display the data of arr_01 or arr_02 or arr_03.... according to which week the user clicked before. (In this code I´m working only with  arr_05 in function genData() because it´s easier for the first time).

                 

                Thanks you for all ur help!!!

                 

                 

                 

                Below the complete code:

                 

                 

                <?xml version="1.0" encoding="utf-8"?>
                <mx:Application xmlns="*"
                                xmlns:s="library://ns.adobe.com/flex/spark"
                                xmlns:fx="com.fusiox.ui.*"
                                xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" horizontalAlign="center" backgroundColor="0xeeeeee">
                   
                    <mx:Script>
                        <![CDATA[
                            import mx.charts.HitData;
                            import mx.charts.events.ChartItemEvent;
                            import mx.collections.ArrayCollection;
                            import mx.collections.IViewCursor;
                            import mx.collections.Sort;
                            import mx.collections.SortField;
                           
                                   
                            [Bindable]
                            public var car:ArrayCollection = new ArrayCollection([
                                {car:"Fahrzeug 01", bt:400, tbt:395, fbt:15, week:"KW 01"},
                                {car:"Fahrzeug 02", bt:370, tbt:350, fbt:11, week:"KW 02"},
                                {car:"Fahrzeug 03", bt:280, tbt:275, fbt:5, week:"KW 03"},
                                {car:"Fahrzeug 04", bt:92, tbt:85, fbt:10, week:"KW 04"},
                                {car:"Fahrzeug 05", bt:475, tbt:460, fbt:20, week:"KW 05"},
                                {car:"Fahrzeug 06", bt:410, tbt:380, fbt:7, week:"KW 05"},
                                {car:"Fahrzeug 07", bt:310, tbt:305, fbt:5, week:"KW 04"},
                                {car:"Fahrzeug 07", bt:310, tbt:305, fbt:5, week:"KW 06"},
                                {car:"Fahrzeug 08", bt:375, tbt:300, fbt:2, week:"KW 04"}]);
                               
                            [Bindable]
                            public var drillDownDataSet:ArrayCollection;
                           
                            [Bindable]
                            public var dp:ArrayCollection;
                            public var avgKPI:ArrayCollection;
                           
                            public var arr_01:ArrayCollection = new ArrayCollection;
                            public var arr_02:ArrayCollection = new ArrayCollection;
                            public var arr_03:ArrayCollection = new ArrayCollection;
                            public var arr_04:ArrayCollection = new ArrayCollection;
                            public var arr_05:ArrayCollection = new ArrayCollection;
                            public var arr_06:ArrayCollection = new ArrayCollection;
                       
                            public function calcAvgKPI(arrC:ArrayCollection):ArrayCollection{
                                avgKPI = new ArrayCollection;
                                var avgKPItmp:ArrayCollection = new ArrayCollection;
                               
                                avgKPItmp = calcCarKPI(arrC);
                               
                                var counter:Number = 1;
                                var i:Number = 0;
                                for (i; i < avgKPItmp.length; i++){
                                    var item:Object = avgKPItmp.getItemAt(i);
                                        switch(counter){
                                            case 1:                               
                                                arr_01.addItem(item);
                                                var tmp:Object = avgKPItmp.getItemAt(i+1);
                                                if(tmp.week == item.week){
                                                    ;
                                                } else {
                                                    counter++;
                                                }                               
                                                tmp = null;               
                                                break;
                                            case 2:
                                                arr_02.addItem(item);
                                                var tmp:Object = avgKPItmp.getItemAt(i+1);
                                                if(tmp.week == item.week){
                                                    ;
                                                } else {
                                                    counter++;
                                                }                               
                                                tmp = null;
                                                break;   
                                            case 3:
                                                arr_03.addItem(item);
                                                var tmp:Object = avgKPItmp.getItemAt(i+1);
                                                if(tmp.week == item.week){
                                                    ;
                                                } else {
                                                    counter++;
                                                }                               
                                                tmp = null;
                                                break;
                                            case 4:
                                                arr_04.addItem(item);
                                                var tmp:Object = avgKPItmp.getItemAt(i+1);
                                                if(tmp.week == item.week){
                                                    ;
                                                } else {
                                                    counter++;
                                                }                               
                                                tmp = null;
                                                break;
                                            case 5:
                                                arr_05.addItem(item);
                                                var tmp:Object = avgKPItmp.getItemAt(i+1);
                                                if(tmp.week == item.week){
                                                    ;
                                                } else {
                                                    counter++;
                                                }                               
                                                tmp = null;
                                                break;
                                            case 6:
                                                arr_06.addItem(item);
                                                if(i+1 == avgKPItmp.length){
                                                    break;
                                                } else {
                                                    var tmp:Object = avgKPItmp.getItemAt(i+1);
                                                    if(tmp.week == item.week){
                                                        ;
                                                    } else {
                                                        counter++;
                                                    }                               
                                                    tmp = null;
                                                }
                                                break;
                                            default:
                                                break;
                                        }
                                }
                               
                                var o1:Object = calc(arr_01);
                                var o2:Object = calc(arr_02);
                                var o3:Object = calc(arr_03);
                                var o4:Object = calc(arr_04);
                                var o5:Object = calc(arr_05);
                                var o6:Object = calc(arr_06);
                               
                                avgKPI.addItem(o1);
                                avgKPI.addItem(o2);
                                avgKPI.addItem(o3);
                                avgKPI.addItem(o4);
                                avgKPI.addItem(o5);
                                avgKPI.addItem(o6);
                           
                                dp = avgKPI;
                                return avgKPI;
                            }
                           
                           
                            public function calc(arrC:ArrayCollection):Object{   
                                var len:int = arrC.length;
                                var allbsg:Number = 0;
                                var allfbg:Number = 0;
                                var allbqq:Number = 0;
                                               
                                for each(var item:Object in arrC){
                                    allbsg += parseFloat(item.bsg);
                                    allfbg += parseFloat(item.fbg);
                                    allbqq += parseFloat(item.bqq);
                                }
                               
                                allbsg = allbsg / len;
                                allfbg = allfbg / len;
                                allbqq = allbqq / len;
                               
                                var firstObj:Object = arrC.getItemAt(0);
                                var week:String = firstObj.week;
                                var o:Object = {week: week, bsg: allbsg, fbg: allfbg, bqq: allbqq};
                                return o;
                            }
                           
                           
                            public function calcCarKPI(arrC:ArrayCollection):ArrayCollection{
                                var carkpi:ArrayCollection = new ArrayCollection;
                                var tmpArrC:ArrayCollection = new ArrayCollection;
                               
                                for each(var item:Object in arrC){                   
                                    var bt:Number = item.bt;
                                    var tbt:Number = item.tbt;
                                    var fbt:Number = item.fbt;
                                   
                                    var bsg:Number;
                                    bsg = (tbt * 100) / bt;
                                   
                                    var fbg:Number;
                                    fbg = (fbt * 100) / tbt;
                                   
                                    var bqq:Number;
                                    bqq = (bsg * (100 - fbg)) / 100;
                                   
                                    var o:Object = {car: item.car, week: item.week, bsg: bsg.toPrecision(4), fbg: fbg.toPrecision(4), bqq: bqq.toPrecision(4)};
                                   
                                    tmpArrC.addItem(o);
                                    o = null;
                                }              

                 

                                carkpi = sortCollection(tmpArrC);
                                return carkpi;
                            }
                           
                           
                            public function sortCollection(arrC:ArrayCollection):ArrayCollection {
                                var dataSortField:SortField = new SortField();
                                dataSortField.name = "week";
                                dataSortField.caseInsensitive = true;
                                var dataSort:Sort = new Sort();
                                dataSort.fields = [dataSortField];
                                arrC.sort = dataSort;
                                arrC.refresh();
                                return arrC;
                            }  
                           
                           
                            private function zoomIntoSeries(e:ChartItemEvent):void {
                                var currWeek:String = e.hitData.item.week
                                if (dp==avgKPI) {
                                    drillDownDataSet = new ArrayCollection(genData(currWeek));
                                    lineSeries_1.displayName = "Drill-Down";
                                    lineSeries_1.yField = "amount";
                                    lineSeries_1.xField = "type";               
                                    xaxis_l1.categoryField = "type";                   
                                    panel_1.title = "Drill-Down (title)";
                                    dp = drillDownDataSet;
                                    columnSeries_1.visible = true;
                                    lineSeries_1.visible = false;
                                } else {
                                    lineSeries_1.displayName = "Regular";
                                    lineSeries_1.yField = "bqq";
                                    lineSeries_1.xField = "week";               
                                    xaxis_l1.categoryField = "week";   
                                    panel_1.title = "Regular (title)";
                                    dp = avgKPI;
                                    columnSeries_1.visible = false;
                                    lineSeries_1.visible = true;
                                }
                            }
                           
                            private function genData(currWeek:String):Array {
                                var result:Array = [];
                                var o:Object;
                               
                                //here should be the items of the necessary arrayCollection (arr_X)
                                //currently only one static data (arr_05)
                                for each(var item:Object in arr_05){
                                    o = {type:item.car, amount:item.bqq}
                                    result.push(o);
                                    o = null;
                                }
                               
                                return result;              
                            }
                           
                        ]]>
                    </mx:Script>
                   
                    <mx:Text width="100%" color="0x000000" paddingBottom="50" fontSize="20" fontWeight="bold" fontFamily="Verdana">
                        <mx:text>
                            Dashboard TBS
                        </mx:text>
                    </mx:Text>
                    <s:SolidColorStroke id="cs1" color="0x848484" weight="1"/>
                    <mx:SolidColor id="sc1" color="0x848484" alpha=".7" />
                   
                    <mx:HDividedBox width="95%" height="85%" horizontalGap="30" paddingBottom="30" paddingTop="30" paddingLeft="30" paddingRight="30" borderStyle="solid">
                        <mx:Canvas label="Canvas 1" width="100%" height="100%">
                            <mx:Panel id="panel_1" title="Bereitstellungsqualität" headerColors="[#c9c9c9, #848484]" width="100%" height="100%" cornerRadius="8" borderThicknessLeft="0" borderThicknessRight="0" borderThicknessBottom="0" horizontalAlign="center" verticalAlign="middle" paddingBottom="30" paddingTop="30" borderAlpha="1">
                                <mx:ColumnChart id="linechart_1" dataProvider="{calcAvgKPI(car)}" itemClick="zoomIntoSeries(event)" showDataTips="true" height="100%">
                                    <mx:seriesFilters>
                                        <mx:Array/>
                                    </mx:seriesFilters>
                                    <mx:horizontalAxis>
                                        <mx:CategoryAxis id="xaxis_l1" categoryField="week"/>
                                    </mx:horizontalAxis>
                                    <mx:verticalAxis>
                                        <mx:LinearAxis id="yaxis_l1"/>
                                    </mx:verticalAxis>
                                    <mx:series>
                                        <mx:LineSeries id="lineSeries_1" displayName="Bereitstellungsqualitätsquote" xField="week" yField="bqq">           
                                            <mx:lineStroke>
                                                <s:SolidColorStroke id="ls_1" color="0x848484" weight="3" alpha=".8"/>
                                            </mx:lineStroke>
                                        </mx:LineSeries>
                                        <mx:ColumnSeries id="columnSeries_1" fill="{sc1}" stroke="{cs1}" visible="false" showEffect="Fade" hideEffect="Fade" yField="amount"  xField="type" displayName="type">
                                        </mx:ColumnSeries>
                                    </mx:series>
                                </mx:ColumnChart>
                            </mx:Panel>
                        </mx:Canvas>               
                    </mx:HDividedBox>
                </mx:Application>