Flex4 implement Linechart line diagram add drag amplification function

Sometimes the data in a line or area chart is too dense, if you want to focus on it, or see the trend of the data at some point in time. You need to add a dynamic zoom feature to the chart.
That is, allow the mouse to drag on the diagram to select an area, the chart will automatically enlarge the content of this area. A "Restore" button appears in the upper-right corner and clicks back into its original state.

The effect chart is as follows:

The code is as follows:

<?xml version= "1.0"?>
<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"
Creationcomplete= "Init (event)" >
<fx:Script>
<! [cdata[
Import mx.charts.chartClasses.Series;
Import mx.collections.ArrayCollection;
Import mx.events.FlexEvent;

Raw data
private var _mydata:arraycollection = new ArrayCollection ([
{time: "10:00", Value1:34, value2:54},
{time: "10:05", Value1:35, value2:65},
{time: "10:10", Value1:25, value2:34},
{time: "10:15", Value1:36, value2:56},
{time: "10:20", value1:54, value2:45},
{time: "10:25", value1:63, value2:66},
{time: "10:30", Value1:23, value2:34},
{time: "10:35", Value1:55, value2:73},
{time: "10:40", Value1:64, value2:44},
{time: "10:45", Value1:75, value2:23},
{time: "10:50", Value1:31, value2:56},
{time: "10:55", Value1:33, value2:43},
{time: "11:00", Value1:34, value2:55},
{time: "11:05", Value1:23, value2:23},
{time: "11:10", Value1:25, value2:34},
{time: "11:15", Value1:23, value2:56},
{time: "11:20", value1:54, value2:45},
{time: "11:25", value1:63, value2:43},
{time: "11:30", Value1:34, value2:32},
{time: "11:35", Value1:33, value2:43},
{time: "11:40", value1:54, value2:15},
{time: "11:45", Value1:75, value2:23},
{time: "11:50", Value1:13, value2:43},
{time: "11:55", Value1:33, value2:32},
{time: "12:00", Value1:34, value2:54},
{time: "12:05", Value1:35, value2:65},
{time: "12:10", Value1:25, value2:34},
{time: "12:15", Value1:32, value2:56},
{time: "12:20", value1:54, value2:45},
{time: "12:25", value1:63, value2:66},
{time: "12:30", value1:53, value2:34},
{time: "12:35", Value1:55, value2:43},
{time: "12:40", Value1:64, value2:33},
{time: "12:45", Value1:75, value2:23},
{time: "12:50", Value1:31, value2:56},
{time: "12:55", Value1:23, value2:43},
{time: "13:00", Value1:45, value2:52},
{time: "13:05", Value1:34, value2:34},
{time: "13:10", Value1:25, value2:34},
{time: "13:15", Value1:23, value2:56},
{time: "13:20", value1:54, value2:43},
{time: "13:25", value1:63, value2:43},
{time: "13:30", Value1:44, value2:55},
{time: "13:35", Value1:33, value2:43},
{time: "13:40", value1:54, value2:23},
{time: "13:45", Value1:75, value2:23},
{time: "13:50", Value1:13, value2:55},
{time: "13:55", Value1:33, value2:32}
]);

The start time of the magnification area
private Var _zoomstarttime:string= "";
The end time of the magnification area
private Var _zoomendtime:string= "";
Start index of enlarged area
private Var _zoomstartindex:int=-1;
The end index of the magnification area
private Var _zoomendindex:int=-1;

Page initialization
protected function init (event:flexevent): void
{
Vaxis.maximum = 100;
LoadData ();
}

Data loading
Private Function LoadData (): void{
Linechart.dataprovider = _mydata;
Zoomoutbtn.visible = false;
}

Mouse Down
protected function Linechart_mousedownhandler (event:mouseevent): void
{
Note the time and position of the mouse being pressed
_zoomstarttime = Gettimenearmouse ();
for (var index:int = 0;index<linechart.dataprovider.length;index++) {
if (linechart.dataProvider.getItemAt (index). Time = = _zoomstarttime) {
_zoomstartindex = index;
Break
}
}
}

Mouse move
Private Function Linechart_mousemovehandler (event:mouseevent): void {
if (_zoomstarttime!= "") {
Note the time and position of the mouse movement
_zoomendtime = Gettimenearmouse ();
for (var index:int = 0;index<linechart.dataprovider.length;index++) {
if (linechart.dataProvider.getItemAt (index). Time = = _zoomendtime) {
_zoomendindex = index;
Break
}
}

Draw selected area background
var startx:number = linechart.series[0].items[_zoomstartindex]["x"];
var endx:number = linechart.series[0].items[_zoomendindex]["x"];;
ZoomArea.graphics.clear ();
ZoomArea.graphics.beginFill (0x65eefc,0.4);
ZoomArea.graphics.drawRect (Startx,0,endx-startx,chartbg.height);
ZoomArea.graphics.endFill ();
}
}

Mouse Bounce
protected function Linechart_mouseuphandler (event:mouseevent): void
{
if (_zoomstarttime!= "") {
ZoomIn ()
}

_zoomstarttime = "";
}

Start scaling
Private Function ZoomIn (): void{
ZoomArea.graphics.clear ();

Avoid clicking and zooming in
if (_zoomstarttime = = _zoomendtime) {
Return
}

Zoomoutbtn.visible = true;

Ensure that the start index is less than the end index (whether the mouse is dragged from left to right or right to left)
if (_zoomstartindex>_zoomendindex) {
var t:int = _zoomstartindex;
_zoomstartindex = _zoomendindex;
_zoomendindex = t;
}

Load only the selected area's data
var zoomdata:arraycollection = new ArrayCollection ();
for (var index:int = 0;index<linechart.dataprovider.length;index++) {
if (index<=_zoomendindex && index >=_zoomstartindex) {
Zoomdata.additem (linechart.dataProvider.getItemAt (index));
}
}
Linechart.dataprovider = Zoomdata;
}

Gets the time closest to the mouse position
Private Function Gettimenearmouse (): string{
if (linechart.series[0]!=null) {
var series:series = linechart.series[0];
var leftpoint:point = new Point (series.mousex,0);
var Leftarr:array = Series.localtodata (leftpoint);
return leftarr[0];
}else{
Return "";
}
}

]]>
</fx:Script>

<fx:Declarations>
<!--axis style (temporarily not required, to draw on the background)-->
<mx:solidcolorstroke id = "AxisS1" color= "0xe3e3e3" weight= "1" alpha= "0"/>
</fx:Declarations>

<s:group id= "ChartGroup" width= "60%" height= "60%" verticalcenter= "0" horizontalcenter= "0" >
<mx:linechart id= "Linechart" top= "ten" bottom= "0" width= "100%" seriesfilters= "[]"
Fontsize= "color=" "0x707070" showdatatips= "true"
Mousemove= "Linechart_mousemovehandler (event)"
mousedown= "Linechart_mousedownhandler (event)"
mouseup= "Linechart_mouseuphandler (event)"
rollout= "Linechart_mouseuphandler (event)" >
<mx:backgroundElements>
<s:group width= "100%" height= "100%" id= "CHARTBG" >
<s:rect left= "0" right= "1" top= "0" bottom= "0" >
<s:fill>
<s:solidcolor alpha= "1" color= "#F5F5F5"/>
</s:fill>
<s:stroke>
<s:solidcolorstroke color= "0xe3e3e3" weight= "1"/>
</s:stroke>
</s:Rect>
<s:group width= "100%" height= "100%" id= "Zoomarea" >
<!--draw the selected area-->
</s:Group>
</s:Group>
<mx:gridlines griddirection= "both" >
<mx:horizontalStroke>
<mx:solidcolorstroke color= "0xe3e3e3" weight= "1"/>
</mx:horizontalStroke>
<mx:verticalStroke>
<mx:solidcolorstroke color= "0xEAEAEA" weight= "1"/>
</mx:verticalStroke>
</mx:GridLines>
<s:group width= "100%" height= "100%" >
<s:button id= "zoomoutbtn" label= "restore" right= "0" click= "LoadData" ()
Visible= "false"/>
</s:Group>
</mx:backgroundElements>
<mx:horizontalAxis>
<mx:categoryaxis id= "Haxis" categoryfield= "Time"/>
</mx:horizontalAxis>
<mx:horizontalAxisRenderers>
<mx:axisrenderer axis= ' {haxis} ' tickplacement= ' None ' minortickplacement= ' None '
Axisstroke= ' {axisS1} ' candroplabels= ' true '/>
</mx:horizontalAxisRenderers>
<mx:verticalAxis>
<mx:linearaxis id= "Vaxis"/>
</mx:verticalAxis>
<mx:verticalAxisRenderers>
<mx:axisrenderer axis= ' {vaxis} ' tickplacement= ' None ' minortickplacement= ' None '
Axisstroke= "{axisS1}"/>
</mx:verticalAxisRenderers>
<mx:series>
<mx:lineseries id= "line1" yfield= "value1" form= "segment" displayname= "Number 1" >
<mx:lineStroke>
<mx:solidcolorstroke color= "0x008eff" weight= "2"/>
</mx:lineStroke>
</mx:LineSeries>
<mx:lineseries id= "line2" yfield= "value2" form= "segment" Displayname= "Number 2" >
<mx:lineStroke>
<mx:solidcolorstroke color= "0x1ace4d" weight= "2"/>
</mx:lineStroke>
</mx:LineSeries>
</mx:series>
</mx:LineChart>
</s:Group>
</s:Application>