Hi Arthur. It sounds like you're looking to filter the data in each series based on the value of a field in the data set. This is a common request, but not something the charts have any facility for doing. But it should be pretty straightforward to write a bit of actionscript that iterates over your dataset, and does the filtering, creating one dataprovider for each series. Then assign these dataProviders directly to the appropriate series, rather than to the whole chart. Ely./
________________________________ From: [email protected] [mailto:[EMAIL PROTECTED] On Behalf Of arthurcoutinhoonline Sent: Monday, January 22, 2007 11:58 AM To: [email protected] Subject: [flexcoders] need help on showing line series based on list box selection (Flex Charts) 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 <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>
