2 Replies Latest reply on Feb 25, 2010 8:36 PM by Xanetia

    Question about stacked graph from DB

    Xanetia

      Hi There.

       

      Ive come up against an interesting issue in my current project. In my prototype I have a stacked column chart (just one column) with the 'sections' of each column being defined as in the Flex docs, i.e. I have 3 column series I will call col1, col2, and col3. This works great but now my problem is that when I start getting data from the DB, I could have any number of column series as I have in the DB data pairs in the form of; col1 - 23, col2 - 34, col3 - 14... And there can be x number of records. Has anyone got any references or ideas about how to go about this?

       

      Thanks in advance.

        • 1. Re: Question about stacked graph from DB
          Xanetia Level 1

          OK, so I got a bit further.

           

          From the example here: http://livedocs.adobe.com/flex/3/html/help.html?content=charts_types_06.html#164059

           

          What I need to do is using the same data set get that first column chart to display columns of profit and expense, so the first column would be profit with three columns one for each month, the second would be the same for expenses.

           

          Anyone done this before?

          • 2. Re: Question about stacked graph from DB
            Xanetia Level 1

            Getting on with this I can say I have made (some) progress.

             

            The file looks as follows:

             

            <mx:ColumnChart id="columnChart" type="stacked" dataProvider="{this.chartData}" width="507" height="100%" x="781" y="0">

             

                 <mx:horizontalAxis>

                      <mx:CategoryAxis categoryField="category" dataProvider="{this.chartData}"/>

                 </mx:horizontalAxis>

             

            </mx:ColumnChart>

             

            And the AS part:

             

            private function createChartSeries(event:ResultEvent):void

            {

                 var temp:ArrayCollection = event.result as ArrayCollection;

                 chartData = new ArrayCollection();

                 var i:int;

             

                 chartData.addItem({name:"val1"});

                 chartData.addItem({name:"val2"});

             

                 for (i = 0; i < temp.length; i++)

                 {

                      var series:ColumnSeries = new ColumnSeries();

                      series.xField = "name";

                      series.yField = temp[i].call_type.toString();

                      series.displayName = temp[i].call_type.toString();

             

                      chartData.getItemAt(0)[temp[i].call_type.toString()] = temp[i].cost;

                      chartData.getItemAt(1)[temp[i].call_type.toString()] = temp[i].duration;

             

                      columnChart.series.push( series );

                 }

             

                 columnChart.dataProvider = chartData;

                 columnChart.invalidateSeriesStyles();

                 columnChart.series = columnChart.series;

            }

             

             

            [Bindable]

            public var chartData:ArrayCollection;

             

            The event.result is as follows:

             

            [{type:"t1", val1=10, val2=30}, {type:"t2", val1=20, val2=3}]

             

            Now call the "createChartSeries" function the y-axis updates, there are 2 columns (well the grey bit down the bottom), but there are no names (the x-axis values) and the actual data columns do not show up.

             

            Can anyone help me with this one?