Hi There, this is Arthur, im new to flex & have created a small CHART app, where a user based on the selection from the list box can display the line series.. Im able to display a line series based on a user's selection of a list box item, but im facing problems in displaying multiple line series based on multiple LIST selection.
For. eg. if u select item "1001" from the listbox & select the above checkboxes like temperature etc. it shall show temperature for the Line Series (1001), but if u want to see the temperature for id 1001, 1002 & 1003, basically, in 3 different line series, its not coming, hence would appreciate any help in this. im posting the code & xml file which u can try & execute for reference (xml & mxml file for reference): XML FILE: _____________________________________________________________________ <mote i="1001" ts="Fri Dec 01 09:47:43 GMT-07:00 2006" t="78.42" h="41.2761" htc="41.3192" m="2.31080992E8" a="-253.8"/> <mote i="1001" ts="Sat Dec 02 09:51:16 GMT-07:00 2006" t="71.958" h="43.2858" htc="42.927" m="2.71912E8" a="-265.1"/> <mote i="1001" ts="Tue Dec 12 14:17:09 GMT-07:00 2006" t="75.756" h="47.4731" htc="47.3407" m="2.71912E8" a="-265.1"/> <mote i="1001" ts="Tue Dec 12 14:17:09 GMT-07:00 2006" t="75.756" h="47.4731" htc="47.3407" m="2.71912E8" a="-265.1"/> <mote i="1001" ts="Tue Dec 12 14:17:09 GMT-07:00 2006" t="75.756" h="47.4731" htc="47.3407" m="2.71912E8" a="-265.1"/> <mote i="1002" ts="Tue Dec 12 14:22:09 GMT-07:00 2006" t="76.404" h="32.6505" htc="32.5874" m="1.13968E8" a="-263.2"/> <mote i="1002" ts="Tue Dec 12 14:27:09 GMT-07:00 2006" t="76.44" h="32.9308" htc="32.8691" m="1.96078E8" a="-261.9"/> <mote i="1002" ts="Tue Dec 12 14:32:09 GMT-07:00 2006" t="76.656" h="32.7206" htc="32.6697" m="1.28732E8" a="-275.6"/> <mote i="1003" ts="Tue Dec 12 14:37:09 GMT-07:00 2006" t="76.71" h="32.9308" htc="32.8823" m="1.82054E8" a="-277.0"/> <mote i="1003" ts="Tue Dec 12 14:42:09 GMT-07:00 2006" t="76.53" h="33.0009" htc="32.9434" m="9.0637296E7" a="-242.5"/> <mote i="1003" ts="Tue Dec 12 14:47:09 GMT-07:00 2006" t="76.404" h="33.2808" htc="33.2167" m="1.1554E8" a="-253.8"/> <mote i="1003" ts="Tue Dec 12 14:52:09 GMT-07:00 2006" t="76.35" h="33.0009" htc="32.9346" m="1.22549E8" a="-118.8"/> <mote i="1003" ts="Tue Dec 12 14:57:09 GMT-07:00 2006" t="76.26" h="33.2108" htc="33.1397" m="2.3778E8" a="-284.7"/> <mote i="1004" ts="Tue Dec 12 15:02:09 GMT-07:00 2006" t="76.242" h="33.3507" htc="33.2785" m="1.21603E8" a="-269.0"/> <mote i="1004" ts="Tue Dec 12 15:07:09 GMT-07:00 2006" t="76.098" h="33.1409" htc="33.0619" m="1.28732E8" a="-275.6"/> <mote i="1004" ts="Tue Dec 12 15:12:09 GMT-07:00 2006" t="76.044" h="33.1409" htc="33.0593" m="1.38648E8" a="-290.6"/> <mote i="1004" ts="Tue Dec 12 15:17:10 GMT-07:00 2006" t="75.9" h="33.5604" htc="33.4707" m="1.96078E8" a="-261.9"/> <mote i="1004" ts="Tue Dec 12 15:22:10 GMT-07:00 2006" t="75.864" h="33.4206" htc="33.3295" m="1.35956E8" a="-242.5"/> <mote i="1004" ts="Tue Dec 12 15:27:10 GMT-07:00 2006" t="75.918" h="33.4206" htc="33.3322" m="1.55014E8" a="-227.2"/> THE CONTENT OF MXML FILE : ________________________________________________________________________ <?xml version="1.0" encoding="utf-8"?> <mx:Application backgroundColor="#ffffff" xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initApp()" horizontalAlign="left" width="780" height="450" layout="absolute" > <mx:Script> <![CDATA[ import mx.graphics.Stroke; import mx.charts.series.LineSeries; import mx.charts.LineChart import mx.collections.ArrayCollection; // very first step of defining class import mx.rpc.events.*; import mx.charts.HitData; import mx.events.*; import mx.controls.Alert; import mx.charts.chartClasses.ChartBase; import mx.collections.*; import mx.charts.chartClasses.IAxis import mx.collections.SortField; import mx.collections.Sort; import mx.utils.ObjectUtil; /////////////////////////////// [Bindable] public var slicedmoteData:ArrayCollection; public var moteData:Array; [Bindable] public var statesx: Array; private function initApp():void // this function initates the http service & the arrays { srv.send(); slicedmoteData = new ArrayCollection(moteData); slicedmoteData.filterFunction=processFilter; sortAC() } public function processFilter(item:Object):Boolean { var result:Boolean=false; // If no filter text, or a match, then true /* if(item.i!=list.selectedItem) { result=false; } */ if(list.selectedItem) { for(var z:uint; z<list.selectedIndices.length;z++) { if (item.i==list.selectedItems[z]) { result=true; } } } return result; } public function sortAC():void { var sortA:Sort = new Sort(); sortA.fields=[new SortField("i",true),new SortField("ts",false)]; slicedmoteData.sort=sortA; //Refresh the collection view to show the sort. slicedmoteData.refresh(); } private function formatDataTip(hitData:HitData):String { var date:String = hitData.item.ts var ID:String=hitData.item.i var Temperature:Number = hitData.item.t var Humidity:Number = hitData.item.h var PercentDegradation:Number = hitData.item.m var SensorOutput:Number = hitData.item.a return "<b>ID: "+ID+"</b><br><b>Date: "+date+"</b><br>Temperature: "+Temperature+"<br>Humidity: "+Humidity+"<br>% Degradation: "+PercentDegradation+"<br>Sensor Output: "+SensorOutput; } private function resultHandler(event:ResultEvent):void { // this is another way of defining http result receipt moteData = event.result.list.mote.source as Array; // http service as array slider.maximum = moteData.length - 1; slider.values = [0, moteData.length - 1]; //slider.minimum= moteData.length + 1; //slicedmoteData.source = moteData; statesx=new Array("1001","1002","1003","1004"); statesx.sort() } private function getSliderLabel(value:String):String { return moteData[parseInt(value)].ts; } private function rangeChange():void { if (moteData != null) slicedmoteData.source = moteData.slice(slider.values[0], slider.values[1] + 5); mypanel.title="Mote:"+list.selectedItems.sort() } public function addSeries(series:Array, yField:String, id:String, color:uint):void { var ls:LineSeries = new LineSeries(); ls.yField=yField ls.displayName = id var stroke:Stroke = new Stroke(); stroke.color = color; stroke.weight = 1; ls.setStyle("lineStroke", stroke); series.push(ls); } private function setSeries():void { var series:Array = new Array(); if (cbTemperature.selected) addSeries(series, "t", "Temperature", 0xFF0000); if (cbHumidity.selected) { addSeries(series, "h", "Humidity", 0x009900); } if (cbPercentDegradation.selected) { addSeries(series, "m", "Percent Degradation", 0xFF9900); } if (cbSensorOutput.selected) { addSeries(series, "a", "Sensor Output", 0x00FF90); } mychart.series = series; } ]]> </mx:Script> <mx:HTTPService showBusyCursor="true" useProxy="false" id="srv" url="exportXML.xml" result="resultHandler(event)"/> <mx:SeriesInterpolate id="interpolate" elementOffset="10"/> <mx:Panel id="mypanel" width="100%" left="0" top="0" title=" Portal Chart" height="100%" > <mx:ApplicationControlBar height="5%" width="100%"> <mx:HBox> <mx:CheckBox id="cbTemperature" label="Temperature" click="setSeries()" color="#FF0000"/> <mx:CheckBox id="cbHumidity" label="Humidity" click="setSeries()" color="#009900"/> <mx:CheckBox id="cbPercentDegradation" label="% Degradation" click="setSeries()" color="#FF9900"/> <mx:CheckBox id="cbSensorOutput" label="Sensor Output" click="setSeries()" color="#00FF90"/> </mx:HBox> <mx:Label text="Select Dates From:" width="80" height="20"/> <mx:HSlider id="slider" width="125" thumbCount="2" tickInterval="15" snapInterval="2" dataTipPlacement="bottom" dataTipFormatFunction="getSliderLabel" change="rangeChange()"/> <mx:ToggleButtonBar width="50" dataProvider="{vs}"/> </mx:ApplicationControlBar> <!--/////////////////////////////////// view stack area --> <mx:ViewStack backgroundColor="#ffffff" id="vs" width="750" height="100%"> <mx:VBox id="chartVBox" width="100%" height="100%" icon="@Embed('icon_chart.png')" toolTip="View in Chart" hideEffect="Fade" showEffect="Fade"> <!-- chart IDeferredInstance will go here --> <mx:HBox> <mx:VBox> <!-- <mx:Label width="100%" text="Select option to display from the right, you can use the CTRL and SHIFT keys to select multiple options."/> --> <mx:LineChart dataTipFunction="formatDataTip" id="mychart" dataProvider="{slicedmoteData}" showDataTips="true" width="670" height="365" > <!--height affects width --> <mx:horizontalAxis > <mx:CategoryAxis id="hl" labelFunction="hlabel" title="Dates" padding="0" displayName="Date" dataProvider="{slicedmoteData}" categoryField="date"/> </mx:horizontalAxis> <mx:horizontalAxisRenderer> <mx:AxisRenderer fontSize="8" /> </mx:horizontalAxisRenderer> <mx:verticalAxis> <mx:LinearAxis title="Temperature[F] / Humidity [%] / PercentDegradation / Sensor Output" /> </mx:verticalAxis> <!--used o remove formattiung for lines --> <mx:seriesFilters> <mx:Array/> </mx:seriesFilters> <mx:backgroundElements> <mx:Array> <mx:GridLines direction="both"> <mx:verticalStroke> <mx:Stroke weight="1" color="#F4F4F4"/> </mx:verticalStroke> <mx:horizontalStroke> <mx:Stroke weight="1" color="#F4F4F4"/> </mx:horizontalStroke> </mx:GridLines> </mx:Array> </mx:backgroundElements> </mx:LineChart> </mx:VBox> <mx:HBox width="100%" /> <mx:VBox height="100%"> <mx:Label text="Motes:" /><mx:List fontFamily="Verdana" fontSize="10" fontWeight="bold" id="list" dataProvider="{statesx}" allowMultipleSelection="true" height="100%" width="60" click="rangeChange()" themeColor="#00ff00" color="#0000a0" textAlign="left"/> </mx:VBox> </mx:HBox> </mx:VBox> <mx:VBox width="50%" height="50%" icon="@Embed('icon_grid.png')" toolTip="View in Grid" hideEffect="Fade" showEffect="Fade"> <mx:DataGrid dataProvider="{slicedmoteData}" width="100%" height="100%" > <mx:columns> <mx:Array> <mx:DataGridColumn dataField="i" headerText="ID" /> <mx:DataGridColumn dataField="ts" headerText="Date" /> <mx:DataGridColumn dataField="t" headerText="Temperature" /> <mx:DataGridColumn dataField="h" headerText="Humidity" /> <mx:DataGridColumn dataField="m" headerText="% Degradation" /> <mx:DataGridColumn dataField="a" headerText="Sensor Output" /> </mx:Array> </mx:columns> </mx:DataGrid> </mx:VBox> </mx:ViewStack> </mx:Panel> </mx:Application>