3 Replies Latest reply on Jul 13, 2006 1:40 PM by katerini

    Using Repeater to generate dynamic line charts

      I have a call to a webservice that returns an array of arrays. The outside array relates to the "YEAR", and the inside arrays have 1 element for each "MONTH". I want to create a line chart that has a line for each year, with the x-axis having months across the bottom.

      I can create this just fine by coding the appropriate number of mx:LineSeries tags in my code.

      However, I have a case where the data that I get back from the webservice could have up to 5 years (I'm only coding for 3). So, I'd like to find a way to dynamically generate an mx:LineSeries instance for each one of these years. I can't seem to get this to work with using a Repeater.

      This code isn't mine (got it from the docs), but it matches with what i'm trying to do exactly:

      <?xml version="1.0"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml">
      import mx.charts.events.ChartItemEvent;
      import mx.collections.ArrayCollection;

      public var expenses_2005:ArrayCollection = new ArrayCollection([
      {Year: 2005, Expense: "Taxes", Amount: 2000},
      {Year: 2005, Expense: "Gas", Amount: 100},
      {Year: 2005, Expense: "Food", Amount: 200}

      public var expenses_2006:ArrayCollection = new ArrayCollection([
      {Year: 2006, Expense: "Taxes", Amount: 2500},
      {Year: 2006, Expense: "Gas", Amount: 400},
      {Year: 2006, Expense: "Food", Amount: 300}

      public var expenses:ArrayCollection = new ArrayCollection([


      <mx:LineChart dataProvider="{expenses}" showDataTips="true">
      <mx:CategoryAxis dataProvider="{expenses.getItemAt(0)}" categoryField="Expense" title="Expense"/>

      <mx:LinearAxis displayName="Amount"/>

      <mx:LineSeries xField="Expense" yField="Amount" displayName="2005" dataProvider="{expenses.getItemAt(0)}"/>
      <mx:LineSeries xField="Expense" yField="Amount" displayName="2006" dataProvider="{expenses.getItemAt(1)}"/>


      How can I now change this to dynamically build the necessary numbers of LineSeries?
        • 1. Re: Using Repeater to generate dynamic line charts
          Hi jsevlie,

          What I usually do in this case is to create multiple LineSeries objects in ActionScript as soon as I get in the data. Here is some code to get you started:

          private var theChart:ColumnChart = new ColumnChart;

          function drawGraph(){
          this.theChart.dataProvider = this.theData;
          var ctgAxis:CategoryAxis = new CategoryAxis();
          ctgAxis.dataProvider = this.theData;
          ctgAxis.categoryField = "0";
          this.theChart.horizontalAxis = ctgAxis;
          var series:Array = new Array();
          for(var i:int=0; i < this.columnSpan; i++){
          var colSeries:ColumnSeries = new ColumnSeries();
          colSeries.yField = String(i+1);
          colSeries.displayName = "Revenue";
          colorSrs(colSeries, 0x3F48F3);
          else if(i==1){
          colSeries.displayName = "Profit";
          colorSrs(colSeries, 0xE9C836);
          colSeries.displayName = "Cost";
          colorSrs(colSeries, 0x6FB35F);
          series = colSeries;
          this.theChart.series = series;
          • 2. Re: Using Repeater to generate dynamic line charts
            jsevlie Level 1
            But no way to do it with the XML-style syntax, eh? That kind of stinks, having to break up the creation of my charts between tags and Actionscript. Oh well, wouldn't have been the first time I'd have to do something I don't want :)

            I tried to get your code working but don't really get anything displayed on the page. You don't happen to have a simple (but full) example like the one I posted, do you?


            • 3. Re: Using Repeater to generate dynamic line charts
              katerini Level 1
              Hi jsevlie,

              The reason why you are not seeing anything displayed is because "this.theChart" has not been added to the main UIComponent of your application. Suppose in your main.mxml file you have a <mx:HBox id="mycontainer" width="100%" height="100%"/>

              Then as the last statement in the function drawGraph(), you can put:

              Hopefully this does the trick,