StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
primarykey
Id
18890896
data
AcceptedAnswerId
0
AnswerCount
0
ClosedDate
CommentCount
0
CommunityOwnedDate
CreationDate
2013-09-19T09:24:22.573
FavoriteCount
0
LastActivityDate
2013-09-19T09:24:22.573
LastEditDate
LastEditorUserId
0
OwnerUserId
2794783
ParentId
7181551
PostTypeId
2
Score
0
ViewCount
0
LastEditorDisplayName
text
Body
I am also trying this future on my project. Still working on. Below code gives you solution for your problem. <pre><code><fx:Declarations> <mx:SeriesInterpolate id="interp" elementOffset="10" duration="200" minimumElementDuration="10" /> <mx:SolidColorStroke id="st" color="#92D050" weight="8" /> </fx:Declarations> <fx:Script> <![CDATA[ import mx.charts.ChartItem; import mx.charts.chartClasses.Series; import mx.charts.series.items.LineSeriesItem; import mx.collections.ArrayCollection; import mx.events.FlexEvent; private var dummyGeneratorTimer:Timer; private var dummyUpdateTimer:Timer; private static const DATA_INTERVAL:int = 600;//8; private static const ARRAY_SIZE:int = 500; private var chartIndex:int = 0; [Bindable] private var chartData:ArrayCollection = new ArrayCollection( [ { Time: 1, parameter1: 2200, parameter2: 1700, parameter3: 1500, parameter4: 1300, parameter5: 1100, parameter6:900 }, { Time: 2, parameter1: 1900, parameter2: 1600, parameter3: 1450, parameter4: 1200, parameter5: 1000, parameter6:800 }, { Time: 3, parameter1: 1900, parameter2: 1700, parameter3: 1500, parameter4: 1300, parameter5: 1100, parameter6:900 }, { Time: 4, parameter1: 1900, parameter2: 1600, parameter3: 1450, parameter4: 1200, parameter5: 1000, parameter6:800 }, { Time: 5, parameter1: 1900, parameter2: 1750, parameter3: 1500, parameter4: 1300, parameter5: 1100, parameter6:900 }, { Time: 5, parameter1: 1900, parameter2: 1600, parameter3: 1400, parameter4: 1200, parameter5: 1000, parameter6:800 }, { Time: 7, parameter1: 1900, parameter2: 1700, parameter3: 1500, parameter4: 1300, parameter5: 1000, parameter6:900 }, { Time: 8, parameter1: 1900, parameter2: 1600, parameter3: 1600, parameter4: 1200, parameter5: 1100, parameter6:800 }, { Time: 9, parameter1: 1900, parameter2: 1800, parameter3: 1400, parameter4: 1300, parameter5: 1000, parameter6:900 }, { Time: 10, parameter1: 1900, parameter2: 1600, parameter3: 1500, parameter4: 1200, parameter5: 1000, parameter6:800 }, { Time: 11, parameter1: 1900, parameter2: 1700, parameter3: 1400, parameter4: 1300, parameter5: 1100, parameter6:900 }, { Time: 12, parameter1: 1900, parameter2: 1600, parameter3: 1400, parameter4: 1200, parameter5: 1000, parameter6:800 }, { Time: 13, parameter1: 1900, parameter2: 1600, parameter3: 1500, parameter4: 1300, parameter5: 1100, parameter6:900 }, { Time: 14, parameter1: 1900, parameter2: 1700, parameter3: 1400, parameter4: 1200, parameter5: 1000, parameter6:800 }, { Time: 15, parameter1: 1900, parameter2: 1600, parameter3: 1500, parameter4: 1300, parameter5: 1100, parameter6:900 }, { Time: 16, parameter1: 1900, parameter2: 1700, parameter3: 1400, parameter4: 1200, parameter5: 1000, parameter6:800 }, { Time: 17, parameter1: 1900, parameter2: 1600, parameter3: 1500, parameter4: 1300, parameter5: 1100, parameter6:900 }]); protected function application1_initializeHandler(event:FlexEvent):void { dummyGeneratorTimer = new Timer(DATA_INTERVAL); // 8 millisecond } private var count:Number = 17; private function populateData(event:TimerEvent):void { var obj:Object = new Object(); obj.Time= (++count).toString(); obj.parameter1= randomRange(1900,1900); obj.parameter2= randomRange(1600,1700); obj.parameter3= randomRange(1400,1500); obj.parameter4= randomRange(1200,1300); obj.parameter5= randomRange(1000,1100); obj.parameter6= randomRange(800,900); chartData.refresh(); chartData.addItem(obj); linechart.width += 10; } private function randomRange(minNum:Number, maxNum:Number):Number { return (Math.round(Math.random() * (maxNum - minNum + 1)) + minNum); } protected function scope_clickHandler(event:MouseEvent):void { if(scopeBtn.label == 'Scope1'){ scopeBtn.label = 'Stop Scope'; dummyGeneratorTimer.addEventListener(TimerEvent.TIMER, populateData,false,0,true); dummyGeneratorTimer.start(); } else{ scopeBtn.label = 'Scope1'; dummyGeneratorTimer.stop(); dummyGeneratorTimer.removeEventListener(TimerEvent.TIMER, populateData,false); } } private var activeSeries:LineSeries; private var activePoint:LineSeriesItem; /* protected function linechart_itemMouseMoveHandler(event:ChartItemEvent):void { // TODO Auto-generated method stub if(event.hitData && event.hitData.element is LineSeries){ activeSeries = event.hitData.element as LineSeries; activePoint = (event.hitData.chartItem as LineSeriesItem); var tmpArr:Array = activeSeries.dataTransform.invertTransform(linechart.mouseX, linechart.mouseY); for(var i:int=0;i<tmpArr.length;i++){ trace("i:"+tmpArr[i]); } } }*/ private function dataTipHandler(event:MouseEvent):void { var leftPoint:Point = new Point(linechart.mouseX,0); //leftPoint = event.target.localToGlobal(leftPoint); //leftPoint = linechart.localToContent(leftPoint); //var rightPoint:Point = new Point(chart.mouseX,0); var leftArr:Array = lineSeries.localToData(leftPoint); var series:Series; var item:ChartItem; for each(var s:Series in linechart.series){ // initialize/empty dataTipItems of all series. s.dataTipItems = []; series = s; item = series.items[leftArr[0]-3]; if(item != null) series.dataTipItems.push(item); } linechart.showAllDataTips = true; } ]]> </fx:Script> <s:Button id="scopeBtn" label="Scope1" click="scope_clickHandler(event)"/>  </code></pre> </s:layout>--> <pre><code> <s:layout> <s:HorizontalLayout horizontalAlign="right" paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/> </s:layout>  <mx:LineChart id="linechart" color="0xffffff" height="100%" width="100%" cacheAsBitmap="true" cachePolicy="on" showDataTips="true" dataProvider="{chartData}" fontFamily="Arial" fontSize="20" seriesFilters="[]" gutterLeft="40" gutterTop="0" paddingTop="0" dataTipRenderer="MyDataTip" mouseMove="dataTipHandler(event)">  <mx:backgroundElements> <mx:GridLines id="gridLines" gridDirection="vertical" cacheAsBitmap="true" cachePolicy="on" verticalTickAligned="true">  <mx:verticalStroke> <s:SolidColorStroke color="0xffffff" weight="0" alpha="0.5" /> </mx:verticalStroke>  </mx:GridLines>  --> <pre><code> <mx:horizontalAxis>  <mx:CategoryAxis id="h1" categoryField="Time"/>  </mx:horizontalAxis> <mx:verticalAxis> <mx:LinearAxis id="v1" baseAtZero="false" autoAdjust="false" alignLabelsToInterval="false"/> </mx:verticalAxis> <mx:verticalAxisRenderers> <mx:AxisRenderer placement="right" axis="{v1}" showLine="true" showLabels="true" visible="true"/> </mx:verticalAxisRenderers>  <mx:horizontalAxisRenderers> <mx:AxisRenderer axis="{h1}" minorTickPlacement="none" minorTickLength="3" canDropLabels="false"> <mx:minorTickStroke> <s:SolidColorStroke color="#BBCCDD" weight="2"/> </mx:minorTickStroke> </mx:AxisRenderer>  </mx:horizontalAxisRenderers> <mx:series>  <components:MyLineSeries id="lineSeries" xField="Time" yField="parameter1" displayName="parameter1" form="segment" showDataEffect="{interp}" verticalAxis="{v1}" horizontalAxis="{h1}" cacheAsBitmap="true" cachePolicy="on" lineStroke="{st}" itemRenderer="mx.charts.renderers.ShadowBoxItemRenderer"> <components:lineSegmentRenderer> <fx:Component> <dashedLine:DashedLineRenderer pattern="[20,20,5,20]"/> </fx:Component> </components:lineSegmentRenderer> </components:MyLineSeries> <mx:LineSeries xField="Time" yField="parameter2" showDataEffect="{interp}" form="curve" displayName="Parameter2" verticalAxis="{v1}" horizontalAxis="{h1}" cacheAsBitmap="true" cachePolicy="on" itemRenderer="mx.charts.renderers.CircleItemRenderer"> <mx:lineStroke> <s:SolidColorStroke color="#036CBA" weight="3" alpha="0.9" /> </mx:lineStroke> </mx:LineSeries> <mx:LineSeries xField="Time" yField="parameter3" showDataEffect="{interp}" form="step" displayName="Parameter3" verticalAxis="{v1}" horizontalAxis="{h1}" cacheAsBitmap="true" cachePolicy="on" itemRenderer="mx.charts.renderers.CrossItemRenderer"> <mx:lineStroke> <s:SolidColorStroke color="#9DBB61" weight="3" alpha="0.9" /> </mx:lineStroke> </mx:LineSeries> <mx:LineSeries xField="Time" yField="parameter4" showDataEffect="{interp}" form="curve" displayName="Parameter4" verticalAxis="{v1}" horizontalAxis="{h1}" cacheAsBitmap="true" cachePolicy="on" itemRenderer="mx.charts.renderers.DiamondItemRenderer" radius="5"> <mx:lineStroke> <s:SolidColorStroke color="#4BACC6" weight="3" alpha="0.9" /> </mx:lineStroke> </mx:LineSeries> <mx:LineSeries xField="Time" yField="parameter5" showDataEffect="{interp}" form="curve" displayName="Parameter5" verticalAxis="{v1}" horizontalAxis="{h1}" cacheAsBitmap="true" cachePolicy="on" itemRenderer="mx.charts.renderers.TriangleItemRenderer"> <mx:lineStroke> <s:SolidColorStroke color="#ED9853" weight="3" alpha="0.9" /> </mx:lineStroke> </mx:LineSeries> <mx:LineSeries xField="Time" yField="parameter6" showDataEffect="{interp}" form="curve" displayName="Parameter6" verticalAxis="{v1}" horizontalAxis="{h1}" cacheAsBitmap="true" cachePolicy="on" itemRenderer="mx.charts.renderers.BoxItemRenderer" legendMarkerRenderer="mx.charts.renderers.TriangleItemRenderer"> <mx:lineStroke> <s:SolidColorStroke color="#7030A0" weight="3" alpha="0.9" /> </mx:lineStroke> </mx:LineSeries> </mx:series> <mx:annotationElements> <local:RangeSelector id="rs"/> </mx:annotationElements> </mx:LineChart> <mx:Legend dataProvider="{linechart}" color="0xffffff"/> </s:SkinnableContainer> </code></pre> 
Tags
Title
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. POMake data tip appear when mouse hovers the chart, not only when hovers data points
 singulars
 PostTypePostTypeId
 PTQuestion
PostTypePostTypeId
1. PTAnswer
UserLastEditorUserId
1. This table or related slice is empty.
UserOwnerUserId
1. USHema Chandra
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. This table or related slice is empty.
VotesPostIdCreationDate
1. This table or related slice is empty.
CommentsPostId
1. This table or related slice is empty.

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.