11 Replies Latest reply on Feb 28, 2007 1:18 PM by Denis_R

    charts: Problem to specify type property in a columnSet in actionScript(urgent)

      Hi,

      I'm trying to create a chart (cartesian) with an areaset, a columnset
      and some lineseries.
      Here is the relative piece of mxml code (it works fine)

      <mx:CartesianChart id="c1" showDataTips="true" width="807">
      <mx:horizontalAxis>
      <mx:DateTimeAxis displayLocalTime="true" autoAdjust="true"
      alignLabelsToUnits="true" labelUnits="days"
      labelFunction="shortDate" dataUnits="days"
      parseFunction="myParseFunction"/>
      </mx:horizontalAxis>

      <mx:series>
      <mx:Array>
      <mx:AreaSet type="100%">
      <mx:series>
      <mx:Array>
      <mx:AreaSeries width="50"
      dataProvider="{xxx}" displayName="{yyy}" yField="valeur"
      xField="date_application" />
      </mx:Array>
      </mx:series>
      </mx:AreaSet>
      <mx:ColumnSet type="stacked">
      <mx:series>
      <mx:Array>
      <mx:ColumnSeries width="50"
      dataProvider="{xxx}" displayName="{yyyy}" yField="valeur"
      xField="date_application" />
      <mx:ColumnSeries width="50"
      dataProvider="{xxx}" displayName="{yyy}" yField="valeur"
      xField="date_application" />

      </mx:Array>
      </mx:series>
      </mx:ColumnSet>
      <mx:LineSeries width="50" dataProvider="{xxx}"
      displayName="{yyy}" yField="valeur" xField="date_application" />
      </mx:Array>
      </mx:series>
      </mx:CartesianChart>


      when I'm trying to create the same chart in ActionScript, my chart is causing problems.

      the chart should render the columnseries as a "stacked" group. but it renders "stacked" each columnserie.
      It seems like two charts one over the other
      (same thing with areaseries)

      I have not find the solution and I'm blocked. Can someone help me ??
      It's very urgent and critical

      piece of code (inside cartesian chart)

      var areaSet:AreaSet=new AreaSet();
      var columnSet:AreaSet=new ColumnSet();
      [creation of the series in arrays tmpArea and tmpColumn]
      ...

      areaSet.series=tmpArea;
      columnSet.series=tmpColumn;
      tmpAll.push(areaSet);
      tmpAll.push(columnSet);
      for (i=0;i<tmpLine.length;i++){
      tmpAll.push(tmpLine[i.toString()]);
      }
      series=tmpAll;


      Thank you

      Oliver

        • 1. Re: charts: Problem to specify type property in a columnSet in actionScript(urgent)
          With the debugger I saw that the stacker property is not set in the columnseries. But setting this property, it doesn't work.
          I will simplify my problem.

          How can I create a ColumnSet in Action Script ?
          • 2. Re: charts: Problem to specify type property in a columnSet in actionScript(urgent)
            peterent Level 2
            I took an example of creating a ColumnChart from the Flex 2 documentation and modified it to create a CartesianChart with an AreaSeries and a ColumnSet.

            private function buildChart() : void
            {
            // create the cartesian chart, setting its properties and styles.
            cartesian = new CartesianChart();
            cartesian.percentHeight = 100; // this is how you programmatically set width="100%"
            cartesian.percentWidth = 100; // and same for height="100%"
            cartesian.setStyle( "paddingLeft", 5 );
            cartesian.setStyle( "paddingRight", 5 );
            cartesian.showDataTips = true;
            cartesian.dataProvider = medalsAC;

            // column.series is the ActionScript equivalent of <mx:series> in the <mx:ColumnChart> tag.
            // this creates a new, empty Array.
            cartesian.series = [];

            // create the AreaSeries
            var areaSeries:AreaSeries = new AreaSeries();
            areaSeries.setStyle("form","curve");
            areaSeries.xField = "Country";
            areaSeries.yField = "Total";
            areaSeries.displayName = "Total Medals";

            // create the solid fill color for this series
            areaSeries.setStyle( "areaFill", new SolidColor(0x00FF00,.5) );

            // add the area series to the chart
            cartesian.series.push(areaSeries);

            // create the ColumnSet into which the ColumnSeries will fall.
            // set the type to be "clustered"
            var columnSet:ColumnSet = new ColumnSet();
            columnSet.type = "clustered";

            columnSet.series = [];


            // create the column series. To make it easier, the names of the
            // series are put into a handy array.

            var seriesNames:Array = [ "Gold", "Silver", "Bronze" ];
            var seriesColors:Array = [ 0xe4d301, 0xe1e1e1, 0x7b4b04 ];

            for(var i:Number = 0; i < seriesNames.length; i++) {
            var series:ColumnSeries = new ColumnSeries();

            // set the series' properties (and styles if you want them)
            series.xField = "Country";
            series.yField = seriesNames ;
            series.displayName = seriesNames
            ;

            // set the color for the series
            series.setStyle( "fill", new SolidColor(seriesColors ,1) );

            // add the series to the ColumnSet
            columnSet.series.push(series);

            }

            // add the ColumnSet to the chart's series
            cartesian.series.push( columnSet );


            // create the Category axis and set its categoryField property.
            var axis:CategoryAxis = new CategoryAxis();
            axis.categoryField = "Country";
            cartesian.horizontalAxis = axis;

            // Now add the ColumnChart (column) to the Panel.
            panel.addChild(cartesian);

            // Create a legend and set its dataProvider property.
            var legend:Legend = new Legend;
            legend.dataProvider = cartesian;

            // add the legend to the Panel, too.
            panel.addChild(legend);
            }
            • 3. Re: charts: Problem to specify type property in a columnSet in actionScript(urgent)
              Thank for the answer. Unfortunately, this is working for "clustered" type but not for "stacked" and "100%".
              Using the debugger, you will see that stacker property is not set (this property is set when the application is created using mxml tags)

              Here is an adapted source code from yours. I invite you to test you code with type="stacked"


              package mce
              {
              import mx.core.UIComponent;
              import mx.containers.Panel;
              import flash.events.*;
              import mx.charts.chartClasses.Series;
              import mx.charts.LinearAxis;
              import mx.charts.DateTimeAxis;
              import mx.controls.Alert;
              import mx.rpc.http.HTTPService;
              import mx.charts.chartClasses.CartesianChart;
              import mx.charts.series.ColumnSet;
              import mx.charts.series.ColumnSeries;
              import mx.graphics.*;
              import mx.charts.Legend;
              import mx.formatters.DateFormatter;
              public class TestAdobe extends Panel

              {

              private const URL_SERVICE:String=" http://xxxmcedata.php?chart=";
              //private variables
              //private var _curves:Array;
              private var _formatStandardDate:DateFormatter;
              private var _formatShortDate:DateFormatter;
              private var _formatLongDate:DateFormatter;
              private var _httpService:HTTPService;

              public function TestAdobe(){
              super();
              initHttpService();
              createDateFormatter();
              this.addEventListener("creationComplete",getData);
              }

              private function initHttpService():void{
              _httpService=new HTTPService();
              _httpService.resultFormat="e4x";
              _httpService.rootURL="";
              _httpService.useProxy=false;
              _httpService.addEventListener("result",buildChart);
              _httpService.addEventListener("fault",faultResult);
              }


              private function faultResult(oEvent:Event):void{
              var alertBox:Alert;
              alertBox = Alert.show(oEvent.toString(), "Alert", Alert.OK | Alert.CANCEL);

              trace("ko");
              }
              /**
              * retrieve data without any parameters
              * */
              public function getData(oEvent:Event):void{
              _httpService.url=URL_SERVICE+"TUKP01D05";
              _httpService.send();
              }


              public function buildChart(oEvent:Event) : void
              {

              var tmpResults:XML=XML(_httpService.lastResult);

              // create the cartesian chart, setting its properties and styles.
              var cartesian = new CartesianChart();
              cartesian.percentHeight = 100; // this is how you programmatically set width="100%"
              cartesian.percentWidth = 100; // and same for height="100%"
              cartesian.setStyle( "paddingLeft", 5 );
              cartesian.setStyle( "paddingRight", 5 );
              cartesian.showDataTips = true;
              //cartesian.dataProvider = medalsAC;

              // column.series is the ActionScript equivalent of <mx:series> in the <mx:ColumnChart> tag.
              // this creates a new, empty Array.
              cartesian.series = [];

              // create the AreaSeries
              //var areaSeries:AreaSeries = new AreaSeries();
              //areaSeries.setStyle("form","curve");
              //areaSeries.xField = "Country";
              //areaSeries.yField = "Total";
              //areaSeries.displayName = "Total Medals";

              // create the solid fill color for this series
              //areaSeries.setStyle( "areaFill", new SolidColor(0x00FF00,.5) );

              // add the area series to the chart
              //cartesian.series.push(areaSeries);

              // create the ColumnSet into which the ColumnSeries will fall.
              // set the type to be "clustered"
              var columnSet:ColumnSet = new ColumnSet();
              columnSet.type = "stacked";


              columnSet.series = [];

              // create the column series. To make it easier, the names of the
              // series are put into a handy array.

              //var seriesNames:Array = [ "Gold", "Silver", "Bronze" ];
              //var seriesColors:Array = [ 0xe4d301, 0xe1e1e1, 0x7b4b04 ];

              for each(var content:XML in tmpResults.mce_set){
              //for(var i:Number = 0; i < seriesNames.length; i++) {
              var series:ColumnSeries = new ColumnSeries();

              // set the series' properties (and styles if you want them)
              series.dataProvider=content.record;
              series.xField = "date_application";
              series.yField = "valeur";
              series.displayName =content.@description;

              // set the color for the series
              series.setStyle( "fill", new SolidColor(uint("0x"+content.@color),1) );

              // add the series to the ColumnSet
              columnSet.series.push(series);
              }

              // add the ColumnSet to the chart's series
              cartesian.series.push( columnSet );

              // create the Category axis and set its categoryField property.
              //var axis:CategoryAxis = new CategoryAxis();
              //axis.categoryField = "Country";

              var tAxis:DateTimeAxis=new DateTimeAxis();
              tAxis.alignLabelsToUnits=true;
              tAxis.autoAdjust=true;
              tAxis.dataUnits="days";
              tAxis.labelUnits="days";
              tAxis.labelFunction=fromDateToString;
              tAxis.parseFunction=fromStringToDate;

              cartesian.horizontalAxis = tAxis;
              // Now add the ColumnChart (column) to the Panel.
              this.addChild(cartesian);

              // Create a legend and set its dataProvider property.
              var legend:Legend = new Legend;
              legend.dataProvider = cartesian;

              // add the legend to the Panel, too.
              this.addChild(legend);
              }


              private function createDateFormatter():void{
              _formatStandardDate=new DateFormatter();
              _formatStandardDate.formatString="DD/MM/YYYY JJ:NN";
              _formatShortDate=new DateFormatter();
              _formatShortDate.formatString="DD/MM JJ:NN";
              _formatLongDate=new DateFormatter();
              _formatLongDate.formatString="DD/MM (JJ:NN)";
              }

              private function formatDateToStandard(date:Date):String{
              return _formatStandardDate.format(date);
              }
              private function formatDateToShort(date:Date):String{
              return _formatShortDate.format(date);
              }

              private function formatDateToLong(date:Date):String{
              return _formatLongDate.format(date);
              }

              // PARSING FUNCTIONS

              public function fromDateToString(labelValue:Date, previousValue:Object, axis:DateTimeAxis):String {
              return formatDateToStandard(labelValue);
              }

              public function fromStringToDate(s:String):Date {
              // Get an array of Strings from the comma-separated String passed in.
              var b:Array = s.split(" ");
              var a:Array = b[0].split("/");
              var c:Array = b[1].split(":");
              // Create the new Date object.
              var newDate:Date = new Date(a[2],a[1]-1,a[0],c[0],c[1],c[2]);
              return newDate;
              }
              }

              }
              • 4. Re: charts: Problem to specify type property in a columnSet in actionScript(urgent)
                Thank for the answer. Unfortunately, this is working for "clustered" type but not for "stacked" and "100%".
                Using the debugger, you will see that stacker property is not set (this property is set when the application is created using mxml tags)

                Here is an adapted source code from yours. I invite you to test you code with type="stacked"


                package mce
                {
                import mx.core.UIComponent;
                import mx.containers.Panel;
                import flash.events.*;
                import mx.charts.chartClasses.Series;
                import mx.charts.LinearAxis;
                import mx.charts.DateTimeAxis;
                import mx.controls.Alert;
                import mx.rpc.http.HTTPService;
                import mx.charts.chartClasses.CartesianChart;
                import mx.charts.series.ColumnSet;
                import mx.charts.series.ColumnSeries;
                import mx.graphics.*;
                import mx.charts.Legend;
                import mx.formatters.DateFormatter;
                public class TestAdobe extends Panel

                {

                private const URL_SERVICE:String=" http://xxxmcedata.php?chart=";
                //private variables
                //private var _curves:Array;
                private var _formatStandardDate:DateFormatter;
                private var _formatShortDate:DateFormatter;
                private var _formatLongDate:DateFormatter;
                private var _httpService:HTTPService;

                public function TestAdobe(){
                super();
                initHttpService();
                createDateFormatter();
                this.addEventListener("creationComplete",getData);
                }

                private function initHttpService():void{
                _httpService=new HTTPService();
                _httpService.resultFormat="e4x";
                _httpService.rootURL="";
                _httpService.useProxy=false;
                _httpService.addEventListener("result",buildChart);
                _httpService.addEventListener("fault",faultResult);
                }


                private function faultResult(oEvent:Event):void{
                var alertBox:Alert;
                alertBox = Alert.show(oEvent.toString(), "Alert", Alert.OK | Alert.CANCEL);

                trace("ko");
                }
                /**
                * retrieve data without any parameters
                * */
                public function getData(oEvent:Event):void{
                _httpService.url=URL_SERVICE+"TUKP01D05";
                _httpService.send();
                }


                public function buildChart(oEvent:Event) : void
                {

                var tmpResults:XML=XML(_httpService.lastResult);

                // create the cartesian chart, setting its properties and styles.
                var cartesian = new CartesianChart();
                cartesian.percentHeight = 100; // this is how you programmatically set width="100%"
                cartesian.percentWidth = 100; // and same for height="100%"
                cartesian.setStyle( "paddingLeft", 5 );
                cartesian.setStyle( "paddingRight", 5 );
                cartesian.showDataTips = true;
                //cartesian.dataProvider = medalsAC;

                // column.series is the ActionScript equivalent of <mx:series> in the <mx:ColumnChart> tag.
                // this creates a new, empty Array.
                cartesian.series = [];

                // create the AreaSeries
                //var areaSeries:AreaSeries = new AreaSeries();
                //areaSeries.setStyle("form","curve");
                //areaSeries.xField = "Country";
                //areaSeries.yField = "Total";
                //areaSeries.displayName = "Total Medals";

                // create the solid fill color for this series
                //areaSeries.setStyle( "areaFill", new SolidColor(0x00FF00,.5) );

                // add the area series to the chart
                //cartesian.series.push(areaSeries);

                // create the ColumnSet into which the ColumnSeries will fall.
                // set the type to be "clustered"
                var columnSet:ColumnSet = new ColumnSet();
                columnSet.type = "stacked";


                columnSet.series = [];

                // create the column series. To make it easier, the names of the
                // series are put into a handy array.

                //var seriesNames:Array = [ "Gold", "Silver", "Bronze" ];
                //var seriesColors:Array = [ 0xe4d301, 0xe1e1e1, 0x7b4b04 ];

                for each(var content:XML in tmpResults.mce_set){
                //for(var i:Number = 0; i < seriesNames.length; i++) {
                var series:ColumnSeries = new ColumnSeries();

                // set the series' properties (and styles if you want them)
                series.dataProvider=content.record;
                series.xField = "date_application";
                series.yField = "valeur";
                series.displayName =content.@description;

                // set the color for the series
                series.setStyle( "fill", new SolidColor(uint("0x"+content.@color),1) );

                // add the series to the ColumnSet
                columnSet.series.push(series);
                }

                // add the ColumnSet to the chart's series
                cartesian.series.push( columnSet );

                // create the Category axis and set its categoryField property.
                //var axis:CategoryAxis = new CategoryAxis();
                //axis.categoryField = "Country";

                var tAxis:DateTimeAxis=new DateTimeAxis();
                tAxis.alignLabelsToUnits=true;
                tAxis.autoAdjust=true;
                tAxis.dataUnits="days";
                tAxis.labelUnits="days";
                tAxis.labelFunction=fromDateToString;
                tAxis.parseFunction=fromStringToDate;

                cartesian.horizontalAxis = tAxis;
                // Now add the ColumnChart (column) to the Panel.
                this.addChild(cartesian);

                // Create a legend and set its dataProvider property.
                var legend:Legend = new Legend;
                legend.dataProvider = cartesian;

                // add the legend to the Panel, too.
                this.addChild(legend);
                }


                private function createDateFormatter():void{
                _formatStandardDate=new DateFormatter();
                _formatStandardDate.formatString="DD/MM/YYYY JJ:NN";
                _formatShortDate=new DateFormatter();
                _formatShortDate.formatString="DD/MM JJ:NN";
                _formatLongDate=new DateFormatter();
                _formatLongDate.formatString="DD/MM (JJ:NN)";
                }

                private function formatDateToStandard(date:Date):String{
                return _formatStandardDate.format(date);
                }
                private function formatDateToShort(date:Date):String{
                return _formatShortDate.format(date);
                }

                private function formatDateToLong(date:Date):String{
                return _formatLongDate.format(date);
                }

                // PARSING FUNCTIONS

                public function fromDateToString(labelValue:Date, previousValue:Object, axis:DateTimeAxis):String {
                return formatDateToStandard(labelValue);
                }

                public function fromStringToDate(s:String):Date {
                // Get an array of Strings from the comma-separated String passed in.
                var b:Array = s.split(" ");
                var a:Array = b[0].split("/");
                var c:Array = b[1].split(":");
                // Create the new Date object.
                var newDate:Date = new Date(a[2],a[1]-1,a[0],c[0],c[1],c[2]);
                return newDate;
                }
                }

                }
                • 5. Re: charts: Problem to specify type property in a columnSet in actionScript(urgent)
                  peterent Level 2
                  I have no problem running that sample code I posted with a ColumnSet type of "stacked" or "100%" - both work perfectly for me.

                  In your version of buildChart, did you try to use that sample data first before using your own data? If not, just swap back the sample data and make sure it works for all of the column types. Then if it does not work with your data, the problem lies there.

                  As I said, I can run my sample with any column type and it works fine.
                  • 6. Re: charts: Problem to specify type property in a columnSet in actionScript(urgent)
                    sorry for the delay of my answer.

                    thank you for your help, it was a problem using e4x format. Using normal (objectProxy) format, all is working
                    • 7. Re: charts: Problem to specify type property in a columnSet in actionScript(urgent)
                      siva_pega
                      Hi,
                      i am having the same issue and i am using xmllistcollection as my datasource. if i use arraycolllection, it works fine.

                      how can i convert this xmllistcollection to arraycollection?
                      -Siva
                      • 8. Re: charts: Problem to specify type property in a columnSet in actionScript(urgent)
                        peterent Level 2
                        There is no simple or single answer because the collections have different sources. An ArrayCollection has an Array as its source while XMLListCollection has an XML object for its source. You'd need to step or walk thru your XML to convert it.

                        1 person found this helpful
                        • 9. Re: charts: Problem to specify type property in a columnSet in actionScript(urgent)
                          siva_pega Level 1
                          Hi,
                          Thanks for your reply.
                          since both the data sources(xmllistcollection and arraycollection) are linear data providers, i am expecting the same result from both of them. xmllistcollection is working just fine for all other types of charts except in a SET(bar/column) with type=stacked. is this a bug or am i doing something wrong? please help.

                          jdouille, can you please let me know if you have converted e4x format to objectProxy? if so, can u let me know how?
                          • 10. Re: charts: Problem to specify type property in a columnSet in actionScript(urgent)
                            jim_phelps Level 1
                            Hi Siva,

                            You will find in this post the code source I'm using to convert form e4x format to objectProxy.

                            var tmpResults:XML=XML(_httpService.lastResult);
                            //chart reading
                            this.chartTitle=tmpResults.@description;
                            this._chartVBox.label=this.chartTitle;
                            //series reading
                            for each(var content:XML in tmpResults.mce_set){
                            tmpSerie=new Curve(content.@type_serie);

                            var ss:ArrayCollection=new ArrayCollection();

                            for each(var tmpXml:XML in content.record){
                            var oto:ObjectProxy=new ObjectProxy;
                            oto.field1=tmpXml.field1.toString();
                            oto.field2=tmpXml.field2.toString();
                            oto.field3=tmpXml.field3.toString();
                            oto.field4=tmpXml.field4.toString();
                            oto.field5=tmpXml.field5.toString();
                            ss.addItem(oto);
                            }



                            tmpSerie.dataProvider=ss;
                            • 11. Re: charts: Problem to specify type property in a columnSet in actionScript(urgent)
                              Denis_R Level 1
                              Peter, jdouille, others,

                              So what was the resolution here? Is it that there is a bug when using an XMLListCollection with stacked charts created in Action Script? Do we need to convert our XMLList Collection to an ArrayCollection in order to make the stacked chart work?

                              Or is there something we need to do with the stacker, stackTotal, stack() properties/method when creating stacked charts in Action Script?

                              Denis
                              1 person found this helpful