Hi coders, i have a little problem, im creating a barchart using AS, i dont have any problem with that, but i wanna create a columnchart too with same dataprovider that had the barchart, i did two functions, one to create a barchart and other to create a columnchart, first i call to create a barchart, later i have a button to create a columnchart that calls a function createcolumchart. the problem is that columnchart doesnt work, doesnt draw, the axyes, i did a debug and all semms perfect, but the columns doesnt draw, some suggestion please, im stuckin in this,
here the code: <?xml version="1.0" encoding="utf-8"?> <mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml"; layout="absolute" width="486" height="442" initialize="init()"> <mx:Script> <![CDATA[ import mx.controls.ComboBox; import mx.managers.PopUpManager; import mx.charts.series.HLOCSeries; import mx.charts.series.CandlestickSeries; import mx.charts.series.AreaSeries; import mx.charts.series.PlotSeries; import mx.charts.renderers.BoxItemRenderer; import mx.charts.renderers.TriangleItemRenderer; import mx.charts.renderers.CircleItemRenderer; import mx.charts.series.BubbleSeries; import mx.charts.renderers.CrossItemRenderer; import com.cinet.wnav.vo.utils.Components; import mx.graphics.Stroke; import mx.charts.series.LineSeries; import mx.charts.LinearAxis; import mx.charts.series.BarSeries; import flash.utils.setTimeout; import mx.events.IndexChangedEvent; import mx.charts.series.ColumnSeries; import mx.charts.CategoryAxis; import mx.graphics.SolidColor; import mx.charts.series.PieSeries; import com.cinet.wnav.vo.CINetDataProviderChartVO; import mx.charts.Legend; import mx.charts.chartClasses.Series; import com.cinet.wnav.vo.CINetCheckBoxVO; import com.cinet.wnav.vo.CINetChartVO; import com.cinet.wnav.events.CleanViewDataEvent; import com.cinet.wnav.control.ControllerWNav; import mx.events.*; import com.cinet.wnav.events.GetDataProviderEvent; import com.adobe.cairngorm.control.CairngormEvent; import com.cinet.wnav.vo.CINetEventVO; import com.cinet.wnav.vo.CINetComponentVO; import mx.charts.PieChart; import com.cinet.wnav.vo.CINetComponentDataVO; import com.cinet.wnav.vo.CINetDataProviderVO; import mx.containers.VBox; import mx.containers.HBox; import mx.containers.Box; import mx.collections.ArrayCollection; import com.cinet.wnav.model.ModelLocatorWNav; import mx.binding.utils.BindingUtils; import mx.charts.events.ChartItemEvent; import mx.collections.ArrayCollection; import mx.controls.Alert; import com.cinet.wnav.vo.CINetChartVO; import mx.graphics.SolidColor; import mx.graphics.GradientEntry; import mx.graphics.LinearGradient; [Bindable] public var configurationObj :CINetChartVO=new CINetChartVO(); [Bindable] private var myDataProvider:CINetDataProviderChartVO=new CINetDataProviderChartVO(); /* [Bindable] public var pop:PopUp; */ public function init():void { myDataProvider.data =new XMLList ( <data> <item> <subitem1>hola</subitem1> <subitem2>50</subitem2> <subitem3>9</subitem3> <subitem4>45</subitem4> <subitem5>10</subitem5> <min>10</min> </item> <item> <subitem1>chao</subitem1> <subitem2>32</subitem2> <subitem3>5</subitem3> <subitem4>20</subitem4> <subitem5>11</subitem5> <min>20</min> </item> <item> <subitem1>ff</subitem1> <subitem2>80</subitem2> <subitem3>1</subitem3> <subitem4>50</subitem4> <subitem5>12</subitem5> <min>5</min> </item> <item> <subitem1>sad</subitem1> <subitem2>100</subitem2> <subitem3>15</subitem3> <subitem4>78</subitem4> <subitem5>13</subitem5> <min>10</min> </item> </data>); configurationObj.component_type_chart="barchart"; configurationObj.component_grouping=new ArrayCollection([{item:"subitem2"}]); configurationObj.component_columnChart_groupType="clustered"; configurationObj.component_columnChart_floating=false; configurationObj.component_columnChart_minField="min"; configurationObj.component_barChart_groupType="clustered"; configurationObj.component_barChart_floating=false; configurationObj.component_barChart_minField="min"; /* myDataProvider.colors=new Array(); myDataProvider.colors.push(0x66CCFF,0xCCCCCC,0x003399,0x3366FF); myDataProvider.colors.push(0xCCCCCC); */ myDataProvider.displayName=new ArrayCollection([{item:"Cantidad del Subitem2"},{item:"Cantidad del Subitem3"},{item:"Cantidad del Subitem4"},{item:"Cantidad del Subitem5"}]); if (configurationObj.component_type_chart=="columnchart") { createColumnChart(); } if (configurationObj.component_type_chart=="barchart") { createBarChart(); } } private function createColumnChart():void { thecolumn.dataProvider=myDataProvider.data.item; thecolumn.visible=true; thecolumn.showDataTips=true; var categoria:CategoryAxis=new CategoryAxis(); categoria.categoryField="subitem1"; categoria.dataProvider=myDataProvider.data.item; thecolumn.horizontalAxis=categoria; var prueba:String=new String(); //leyenda.dataProvider=thecolumn; var min:String=configurationObj.component_columnChart_minField; if (configurationObj.component_columnChart_floating) { for (var i:int;i<configurationObj.component_grouping.length;i++) { var theColumnSerie:ColumnSeries=new ColumnSeries(); prueba=configurationObj.component_grouping.getItemAt(i).item as String; theColumnSerie.yField=prueba; theColumnSerie.displayName=myDataProvider.displayName.getItemAt(i).item as String; //theColumnSerie.minField=min; //theColumnSerie.width=configurationObj.component_columnChart_columnWidth; // theColumnSerie.setStyle("showDataEffect",chartEffect); thecolumn.series.push(theColumnSerie); if (configurationObj.component_colorGradient && myDataProvider.colors) { var filla:LinearGradient = new LinearGradient(); var ga : GradientEntry = new GradientEntry(myDataProvider.colors[i],0,1); var gb : GradientEntry = new GradientEntry(0xFFFFFF,0.33,.5); var gc: GradientEntry = new GradientEntry(myDataProvider.colors[i],0.66,1); filla.entries = [ga,gb,gc]; filla.angle = 90; theColumnSerie.setStyle("fill",filla); } else if (myDataProvider.colors) { theColumnSerie.setStyle("fill",myDataProvider.colors[i]); } } } else { for (var i:int;i<configurationObj.component_grouping.length;i++) { var theColumnSerie2:ColumnSeries=new ColumnSeries() prueba=configurationObj.component_grouping.getItemAt(i).item as String; theColumnSerie2.yField=prueba; theColumnSerie2.displayName=myDataProvider.displayName.getItemAt(i).item as String; // theColumnSerie2.setStyle("showDataEffect",chartEffect); thecolumn.series.push(theColumnSerie2); } } leyenda.dataProvider=thecolumn; } private function createBarChart():void { thebar.type=configurationObj.component_barChart_groupType; thebar.dataProvider=myDataProvider.data.item; thebar.visible=true; thebar.showDataTips=true; var categoria:CategoryAxis=new CategoryAxis(); categoria.categoryField="subitem1"; thebar.verticalAxis=categoria; var prueba:String=new String(); //leyenda.dataProvider=thecolumn; var min:String=configurationObj.component_columnChart_minField; if (configurationObj.component_barChart_floating) { for (var i:int;i<configurationObj.component_grouping.length;i++) { var thebarSerie:BarSeries=new BarSeries() prueba=configurationObj.component_grouping.getItemAt(i).item as String; thebarSerie.xField=prueba; thebarSerie.displayName=myDataProvider.displayName.getItemAt(i).item as String; thebarSerie.minField=min; thebarSerie.width=configurationObj.component_barChart_barWidth; // thebarSerie.setStyle("showDataEffect",zoomefe); thebar.series.push(thebarSerie); if (configurationObj.component_colorGradient && myDataProvider.colors) { var filla:LinearGradient = new LinearGradient(); var ga : GradientEntry = new GradientEntry(myDataProvider.colors[i],0,1); var gb : GradientEntry = new GradientEntry(0xFFFFFF,0.33,.5); var gc: GradientEntry = new GradientEntry(myDataProvider.colors[i],0.66,1); filla.entries = [ga,gb,gc]; filla.angle = 90; thebarSerie.setStyle("fill",filla); } else if (myDataProvider.colors) { thebarSerie.setStyle("fill",myDataProvider.colors[i]); } } } else { for (var i2:int;i2<configurationObj.component_grouping.length;i2++) { var thebarSerie2:BarSeries=new BarSeries() prueba=configurationObj.component_grouping.getItemAt(i2).item as String; thebarSerie2.xField=prueba; thebarSerie2.displayName=myDataProvider.displayName.getItemAt(i2).item as String; //thebarSerie2.setStyle("showDataEffect",chartEffect); thebar.series.push(thebarSerie2); } } leyenda.dataProvider=thebar; } public function cambio():void { thebar.visible=false; createColumnChart(); } ]]> </mx:Script> <mx:ColumnChart id="thecolumn" visible="false" width="283" height="260" x="91.5" y="46"> </mx:ColumnChart> <mx:BarChart id="thebar" visible="false" width="283" height="260" x="91.5" y="46"> </mx:BarChart> <mx:Legend id="leyenda" borderStyle="outset" labelPlacement="right" direction="{configurationObj.component_legend_direction}" x="176" y="335"/> <mx:Button x="362" y="346" label="cambiar" id="elbo" click="cambio()"/> </mx:Panel>
