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>
