Ignore:
Timestamp:
09/13/11 13:40:25 (14 years ago)
Author:
mcichenski
Message:

zoom in/out in static chart

File:
1 edited

Legend:

Unmodified
Added
Removed
  • gssim_ui/branches/vine/gssimstudio/src/web/ui/flex/app/gssim/gssimstudio/editor/charts/StaticResourceChart.mxml

    r15 r79  
    66        xmlns:c="gssim.gssimstudio.editor.charts.components.*" 
    77        xmlns:fx="http://ns.adobe.com/mxml/2009"  width="600" height="400" title="{expName}:{resourceManager.getString('Charts', 'ResourceAllocationTitle')}" 
    8         xmlns:charts="com.iwobanas.charts.*" xmlns:data="gssim.gssimstudio.editor.charting.data.*" xmlns:charts1="gssim.gssimstudio.editor.charts.*"  
     8        xmlns:charts="com.iwobanas.charts.*" xmlns:data="gssim.gssimstudio.editor.charting.data.*" xmlns:charts1="gssim.gssimstudio.editor.charts.*" xmlns:components="gssim.gssimstudio.editor.gssim.components.*"  
    99> 
    1010         
     
    1414        <fx:Script> 
    1515            <![CDATA[ 
     16                        import com.iwobanas.charts.NumericAxisHelper; 
     17                         
    1618                        import gssim.gssimstudio.editor.script.command.SaveToPNGCommand; 
    1719                         
     
    1921                        import mx.charts.AxisRenderer; 
    2022                        import mx.charts.chartClasses.AxisLabelSet; 
     23                        import mx.charts.chartClasses.IAxis; 
    2124                        import mx.collections.ArrayCollection; 
    2225                        import mx.controls.Alert; 
     
    7073                        } 
    7174 
     75                        /** 
     76                         * Zoom chart content relative to a given point in data coordinates. 
     77                         * <p>Note that call to this function takes effect only if ChartScroller  
     78                         * is initialized (i.e. <code>series</code> and at least one of <code>hAxis</code>  
     79                         * and <code>vAxis</code> are set) and zooming is enabled 
     80                         * (horizontalZoomEnabled/verticalZoomEnabled properties are set).</p> 
     81                         *  
     82                         * @param ralativeTo point in data coordinates 
     83                         * @param zoom indicate how much the content should be zoomed,  
     84                         * if this value is greater than 1 content is zoomed in otherways content is zoomed out. 
     85                         */ 
     86                        protected function zoomChart(hAxis : IAxis, vAxis : IAxis, ralativeTo:Point, zoom:Number):void 
     87                        {                                
     88                                var dMin:Number; // distance from minimum to relativeTo point in given dimension 
     89                                var dMax:Number; // distance from maximum to relativeTo point in given dimension 
     90                                 
     91                                if (hAxis) 
     92                                { 
     93                                        dMin = ralativeTo.x - NumericAxisHelper.getMin(hAxis); 
     94                                        dMax = NumericAxisHelper.getMax(hAxis) - ralativeTo.x; 
     95                                         
     96                                        NumericAxisHelper.setMin(hAxis, ralativeTo.x - dMin/zoom); 
     97                                        NumericAxisHelper.setMax(hAxis, ralativeTo.x + dMax/zoom); 
     98                                } 
     99                                if (vAxis) 
     100                                { 
     101                                        dMin = ralativeTo.y - NumericAxisHelper.getMin(vAxis); 
     102                                        dMax = NumericAxisHelper.getMax(vAxis) - ralativeTo.y; 
     103                                         
     104                                        NumericAxisHelper.setMin(vAxis, ralativeTo.y - dMin/zoom); 
     105                                        NumericAxisHelper.setMax(vAxis, ralativeTo.y + dMax/zoom); 
     106                                } 
     107                        } 
     108                         
     109                        public function zoomChartX(zoom : Number) : void 
     110                        { 
     111                                var point : Point = new Point(); 
     112                                point.x = (NumericAxisHelper.getMin(resourceViewer.horizontalAxis) + NumericAxisHelper.getMax(resourceViewer.horizontalAxis))/2; 
     113                                zoomChart(resourceViewer.horizontalAxis, null,point,zoom); 
     114                        } 
     115                         
     116                        public function zoomChartY(zoom : Number) : void 
     117                        { 
     118                                var point : Point = new Point(); 
     119                                point.y = (NumericAxisHelper.getMin(resourceViewer.verticalAxis) + NumericAxisHelper.getMax(resourceViewer.verticalAxis))/2; 
     120                                zoomChart(null, resourceViewer.verticalAxis,point,zoom); 
     121                        } 
     122                         
    72123            ]]> 
    73124        </fx:Script> 
     
    94145                 
    95146        <mx:Canvas width="100%" height="100%"> 
    96                 <mx:VBox width="100%" height="100%" verticalGap="1" id="fullChart"> 
    97                         <mx:Label text="{resourceManager.getString('Charts', 'ResourceAllocationTitle')}" width="100%" styleName="title"/> 
    98                         <mx:Label text="{resourceManager.getString('Charts', 'CreatedFor')} {expName}:{resName} {resourceManager.getString('Charts', 'Day')} {date}" width="100%" styleName="subtitle"/> 
    99                         <mx:HBox width="100%" height="100%"> 
    100                                 <mx:VBox width="100%" height="100%"> 
    101                                  
    102                                         <!--~~~~~~~~~~ RESOURCE VIEWER ~~~~~~~~~~--> 
    103                                         <mx:AreaChart  
    104                                                 id="resourceViewer" height="100%" width="100%" 
    105                                         paddingRight="5" paddingLeft="5" 
    106                                         dataProvider="{dataProvider}" 
    107                                     > 
    108                                         <mx:horizontalAxis> 
    109                                             <mx:DateTimeAxis  
    110                                                 id="hAxis"  
    111                                                 dataUnits="seconds"  
    112                                                 alignLabelsToUnits="false"  
    113                                                 labelFunction="formatDate"  
    114                                                                 title="{resourceManager.getString('Charts', 'SimulationTime')}" 
    115                                              /> 
    116                                         </mx:horizontalAxis> 
    117                                  
    118                                         <mx:verticalAxis> 
    119                                             <mx:LinearAxis  
    120                                                 id="vAxis"  
    121                                                 baseAtZero="false"  
    122                                                 maximumLabelPrecision="1"  
    123                                                 autoAdjust="false"  
    124                                                                 title="{resourceManager.getString('Charts', 'CPU')}" 
    125                                             /> 
    126                                         </mx:verticalAxis> 
    127                                  
    128                                                 <mx:series> 
    129                                             <mx:AreaSeries  
    130                                                                 filterData="false" 
    131                                                 yField="usage"  
    132                                                 xField="timestamp"  
    133                                                 form="step"  
    134                                                 areaFill="{sc3}"  
    135                                             /> 
    136                                         </mx:series> 
    137                                               
    138                                     </mx:AreaChart> 
    139                                     <!--~~~~~~~~~~ END OF RESOURCE VIEWER ~~~~~~~~~~--> 
    140                                      
    141                                 </mx:VBox> 
     147                <mx:VBox width="100%" height="100%"> 
     148                        <mx:HBox> 
     149                                <mx:Button label="{resourceManager.getString('Charts', 'ToPNG')}" click="saveAsPNG();"/> 
    142150                        </mx:HBox> 
     151                        <mx:VBox width="100%" height="100%" verticalGap="1" id="fullChart"> 
     152                                <mx:Label text="{resourceManager.getString('Charts', 'ResourceAllocationTitle')}" width="100%" styleName="title" 
     153                                                  /> 
     154                                <mx:Label text="{resourceManager.getString('Charts', 'CreatedFor')} {expName} {resourceManager.getString('Charts', 'Day')} {date}" width="100%" styleName="subtitle"/> 
     155                                <mx:HBox width="100%" height="100%"> 
     156                                        <mx:VBox width="100%" height="100%"> 
     157                                                 
     158                                                <!--~~~~~~~~~~ RESOURCE VIEWER ~~~~~~~~~~--> 
     159                                                <mx:AreaChart  
     160                                                        id="resourceViewer" height="100%" width="100%" 
     161                                                        paddingRight="5" paddingLeft="5" 
     162                                                        dataProvider="{dataProvider}" 
     163                                                        > 
     164                                                        <mx:horizontalAxis> 
     165                                                                <mx:DateTimeAxis  
     166                                                                        id="hAxis"  
     167                                                                        dataUnits="seconds"  
     168                                                                        alignLabelsToUnits="false"  
     169                                                                        labelFunction="formatDate"  
     170                                                                        title="{resourceManager.getString('Charts', 'SimulationTime')}" 
     171                                                                        /> 
     172                                                        </mx:horizontalAxis> 
     173                                                         
     174                                                        <mx:verticalAxis> 
     175                                                                <mx:LinearAxis  
     176                                                                        id="vAxis"  
     177                                                                        baseAtZero="false"  
     178                                                                        maximumLabelPrecision="1"  
     179                                                                        autoAdjust="false"  
     180                                                                        title="{resourceManager.getString('Charts', 'CPU')}" 
     181                                                                        /> 
     182                                                        </mx:verticalAxis> 
     183                                                         
     184                                                        <mx:series> 
     185                                                                <mx:AreaSeries  
     186                                                                        filterData="false" 
     187                                                                        yField="usage"  
     188                                                                        xField="timestamp"  
     189                                                                        form="step"  
     190                                                                        areaFill="{sc3}"  
     191                                                                        /> 
     192                                                        </mx:series> 
     193                                                         
     194                                                </mx:AreaChart> 
     195                                                <!--~~~~~~~~~~ END OF RESOURCE VIEWER ~~~~~~~~~~--> 
     196                                                 
     197                                        </mx:VBox> 
     198                                </mx:HBox> 
     199                        </mx:VBox> 
    143200                </mx:VBox> 
    144                 <mx:HBox top="5" right="5"> 
    145                         <mx:Button label="PNG" click="saveAsPNG();"/> 
     201                <mx:HBox width="100%" horizontalGap="0" bottom="5"> 
     202                        <mx:Spacer width="100%" /> 
     203                        <components:IconButton skinClass="gssim.gssimstudio.editor.gssim.skins.IconButtonSkin" width="25" height="25" 
     204                                                                   autoRepeat="true" buttonDown="zoomChartX(6/5);" iconUp="assets/icon/ZoomIn.png"/> 
     205                        <components:IconButton skinClass="gssim.gssimstudio.editor.gssim.skins.IconButtonSkin" width="25" height="25" 
     206                                                                   autoRepeat="true" buttonDown="zoomChartX(5/6);" iconUp="assets/icon/ZoomOut.png"/> 
    146207                </mx:HBox> 
     208                <mx:VBox height="100%" verticalGap="0" top="75"> 
     209                        <components:IconButton skinClass="gssim.gssimstudio.editor.gssim.skins.IconButtonSkin" width="25" height="25"  
     210                                                                   autoRepeat="true" buttonDown="zoomChartY(6/5);" iconUp="assets/icon/ZoomIn.png"/> 
     211                        <components:IconButton skinClass="gssim.gssimstudio.editor.gssim.skins.IconButtonSkin" width="25" height="25" 
     212                                                                   autoRepeat="true" buttonDown="zoomChartY(5/6);" iconUp="assets/icon/ZoomOut.png"/> 
     213                </mx:VBox> 
    147214        </mx:Canvas> 
    148215</MDIWindow> 
Note: See TracChangeset for help on using the changeset viewer.