xml - Flex Stacked ColumnChart not showing up -
i have following xml structure:
<root> <day name="sun" values="21,22,25,26"/> <day name="mon" values="27,20,22,25"/> </root>
i want represented in column chart stacked bars. first column comprise of columns stacked on each other values 21,22,25 , 26 corresponding sunday. length of values might change each time dataprovider updated. wrote code like:
var columnchart:columnchart = new columnchart(); columnchart.type="stacked"; var yaxisdata:string = "@values"; var xaxisdata:string = "@name"; var dp:xmllistcollection = new xmllistcollection(xmlfile.day); columnchart.dataprovider = dp; var valuelength:int = dp[0][yaxisdata].tostring().split(",").length; for(var count:int = 0;count<valuelength;count++){ var bseries:columnseries = new columnseries(); bseries.dataprovider = dataprovider; bseries.xfield = xaxisdata; bseries.yfield = yaxisdata+"["+count+"]"; columnchart.series.push(bseries); } var haxis:categoryaxis = new categoryaxis(); haxis.dataprovider = dp; haxis.categoryfield = xaxisdata ; cartesianchart(columnchart).horizontalaxis = haxis;
but graph coming out empty. did go wrong?
below code may you:-
<?xml version="1.0" encoding="utf-8"?> <s:application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minwidth="955" minheight="600"> <fx:declarations> <!-- place non-visual elements (e.g., services, value objects) here --> <fx:xml format="e4x" id="xmlfile"> <root> <day name="fri" values="11,22,33,44,55,66"/> <day name="sat" values="10,20,30,40,50,60"/> <day name="sun" values="21,22,25,26,56,76"/> <day name="mon" values="5,10,15,20,25,30"/> </root> </fx:xml> </fx:declarations> <fx:script> <![cdata[ import mx.charts.categoryaxis; import mx.charts.columnchart; import mx.charts.legend; import mx.charts.chartclasses.cartesianchart; import mx.charts.chartclasses.series; import mx.charts.series.columnseries; import mx.charts.series.columnset; import mx.collections.arraycollection; import mx.collections.xmllistcollection; private function createchart():void { var columnchart:columnchart = new columnchart(); var dp:xmllistcollection = new xmllistcollection(xmlfile.day); var stackeddata:arraycollection = new arraycollection(); var yaxisdata:string = "@values"; var xaxisdata:string = "@name"; var horizontalcategoryaxis:categoryaxis = new categoryaxis(); horizontalcategoryaxis.categoryfield = "name"; columnchart.horizontalaxis = horizontalcategoryaxis; var columnset:columnset = new columnset(); columnset.type = "stacked"; for(var row:int=0; row < dp.length; row++){ var arraydata:array = dp[row][yaxisdata].tostring().split(","); var seriesarray:array = new array(); var obj:object = new object(); obj.name = dp[row][xaxisdata].tostring(); for(var j:int=0; j < arraydata.length; j++) { obj["xvalues"+j] = arraydata[j].tostring(); } stackeddata.additem(obj); } for(var col:int=0; col < arraydata.length; col++){ var colmseries:columnseries = new columnseries(); colmseries.yfield = "xvalues"+col; colmseries.displayname = "value @ "+col; seriesarray.push(colmseries); } columnset.series = seriesarray; columnchart.series = [columnset]; columnchart.dataprovider = stackeddata; columnchart.percentwidth = 70; columnchart.percentheight = 70; columnchart.showdatatips = true; var legend:legend = new legend(); legend.direction = "horizontal"; legend.dataprovider = columnchart; container.addelement(columnchart); container.addelement(legend); } ]]> </fx:script> <s:vgroup id="container" width="100%" height="100%" creationcomplete="createchart()"/> </s:application>
Comments
Post a Comment