Index: /gssim_ui/branches/vine/gssimstudio/src/web/ui/flex/app/gssim/gssimstudio/editor/charts/StaticResourceChart.mxml
===================================================================
--- /gssim_ui/branches/vine/gssimstudio/src/web/ui/flex/app/gssim/gssimstudio/editor/charts/StaticResourceChart.mxml	(revision 15)
+++ /gssim_ui/branches/vine/gssimstudio/src/web/ui/flex/app/gssim/gssimstudio/editor/charts/StaticResourceChart.mxml	(revision 79)
@@ -6,5 +6,5 @@
 	xmlns:c="gssim.gssimstudio.editor.charts.components.*"
 	xmlns:fx="http://ns.adobe.com/mxml/2009"  width="600" height="400" title="{expName}:{resourceManager.getString('Charts', 'ResourceAllocationTitle')}"
-	xmlns:charts="com.iwobanas.charts.*" xmlns:data="gssim.gssimstudio.editor.charting.data.*" xmlns:charts1="gssim.gssimstudio.editor.charts.*" 
+	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.*" 
 >
 	
@@ -14,4 +14,6 @@
 	<fx:Script>
 	    <![CDATA[
+			import com.iwobanas.charts.NumericAxisHelper;
+			
 			import gssim.gssimstudio.editor.script.command.SaveToPNGCommand;
 			
@@ -19,4 +21,5 @@
 			import mx.charts.AxisRenderer;
 			import mx.charts.chartClasses.AxisLabelSet;
+			import mx.charts.chartClasses.IAxis;
 			import mx.collections.ArrayCollection;
 			import mx.controls.Alert;
@@ -70,4 +73,52 @@
 			}
 
+			/**
+			 * Zoom chart content relative to a given point in data coordinates.
+			 * <p>Note that call to this function takes effect only if ChartScroller 
+			 * is initialized (i.e. <code>series</code> and at least one of <code>hAxis</code> 
+			 * and <code>vAxis</code> are set) and zooming is enabled
+			 * (horizontalZoomEnabled/verticalZoomEnabled properties are set).</p>
+			 * 
+			 * @param ralativeTo point in data coordinates
+			 * @param zoom indicate how much the content should be zoomed, 
+			 * if this value is greater than 1 content is zoomed in otherways content is zoomed out.
+			 */
+			protected function zoomChart(hAxis : IAxis, vAxis : IAxis, ralativeTo:Point, zoom:Number):void
+			{				
+				var dMin:Number; // distance from minimum to relativeTo point in given dimension
+				var dMax:Number; // distance from maximum to relativeTo point in given dimension
+				
+				if (hAxis)
+				{
+					dMin = ralativeTo.x - NumericAxisHelper.getMin(hAxis);
+					dMax = NumericAxisHelper.getMax(hAxis) - ralativeTo.x;
+					
+					NumericAxisHelper.setMin(hAxis, ralativeTo.x - dMin/zoom);
+					NumericAxisHelper.setMax(hAxis, ralativeTo.x + dMax/zoom);
+				}
+				if (vAxis)
+				{
+					dMin = ralativeTo.y - NumericAxisHelper.getMin(vAxis);
+					dMax = NumericAxisHelper.getMax(vAxis) - ralativeTo.y;
+					
+					NumericAxisHelper.setMin(vAxis, ralativeTo.y - dMin/zoom);
+					NumericAxisHelper.setMax(vAxis, ralativeTo.y + dMax/zoom);
+				}
+			}
+			
+			public function zoomChartX(zoom : Number) : void
+			{
+				var point : Point = new Point();
+				point.x = (NumericAxisHelper.getMin(resourceViewer.horizontalAxis) + NumericAxisHelper.getMax(resourceViewer.horizontalAxis))/2;
+				zoomChart(resourceViewer.horizontalAxis, null,point,zoom);
+			}
+			
+			public function zoomChartY(zoom : Number) : void
+			{
+				var point : Point = new Point();
+				point.y = (NumericAxisHelper.getMin(resourceViewer.verticalAxis) + NumericAxisHelper.getMax(resourceViewer.verticalAxis))/2;
+				zoomChart(null, resourceViewer.verticalAxis,point,zoom);
+			}
+			
 	    ]]>
 	</fx:Script>
@@ -94,55 +145,71 @@
 		
 	<mx:Canvas width="100%" height="100%">
-		<mx:VBox width="100%" height="100%" verticalGap="1" id="fullChart">
-			<mx:Label text="{resourceManager.getString('Charts', 'ResourceAllocationTitle')}" width="100%" styleName="title"/>
-			<mx:Label text="{resourceManager.getString('Charts', 'CreatedFor')} {expName}:{resName} {resourceManager.getString('Charts', 'Day')} {date}" width="100%" styleName="subtitle"/>
-			<mx:HBox width="100%" height="100%">
-				<mx:VBox width="100%" height="100%">
-				
-					<!--~~~~~~~~~~ RESOURCE VIEWER ~~~~~~~~~~-->
-					<mx:AreaChart 
-						id="resourceViewer" height="100%" width="100%"
-				        paddingRight="5" paddingLeft="5"
-				        dataProvider="{dataProvider}"
-				    >
-				        <mx:horizontalAxis>
-				            <mx:DateTimeAxis 
-				            	id="hAxis" 
-				            	dataUnits="seconds" 
-				            	alignLabelsToUnits="false" 
-				            	labelFunction="formatDate" 
-								title="{resourceManager.getString('Charts', 'SimulationTime')}"
-				             />
-				        </mx:horizontalAxis>
-				
-				        <mx:verticalAxis>
-				            <mx:LinearAxis 
-				            	id="vAxis" 
-				            	baseAtZero="false" 
-				            	maximumLabelPrecision="1" 
-				            	autoAdjust="false" 
-								title="{resourceManager.getString('Charts', 'CPU')}"
-				            />
-				        </mx:verticalAxis>
-				
-						<mx:series>
-				            <mx:AreaSeries 
-								filterData="false"
-				            	yField="usage" 
-				            	xField="timestamp" 
-				            	form="step" 
-				            	areaFill="{sc3}" 
-				            />
-				        </mx:series>
-					     
-				    </mx:AreaChart>
-				    <!--~~~~~~~~~~ END OF RESOURCE VIEWER ~~~~~~~~~~-->
-				    
-				</mx:VBox>
+		<mx:VBox width="100%" height="100%">
+			<mx:HBox>
+				<mx:Button label="{resourceManager.getString('Charts', 'ToPNG')}" click="saveAsPNG();"/>
 			</mx:HBox>
+			<mx:VBox width="100%" height="100%" verticalGap="1" id="fullChart">
+				<mx:Label text="{resourceManager.getString('Charts', 'ResourceAllocationTitle')}" width="100%" styleName="title"
+						  />
+				<mx:Label text="{resourceManager.getString('Charts', 'CreatedFor')} {expName} {resourceManager.getString('Charts', 'Day')} {date}" width="100%" styleName="subtitle"/>
+				<mx:HBox width="100%" height="100%">
+					<mx:VBox width="100%" height="100%">
+						
+						<!--~~~~~~~~~~ RESOURCE VIEWER ~~~~~~~~~~-->
+						<mx:AreaChart 
+							id="resourceViewer" height="100%" width="100%"
+							paddingRight="5" paddingLeft="5"
+							dataProvider="{dataProvider}"
+							>
+							<mx:horizontalAxis>
+								<mx:DateTimeAxis 
+									id="hAxis" 
+									dataUnits="seconds" 
+									alignLabelsToUnits="false" 
+									labelFunction="formatDate" 
+									title="{resourceManager.getString('Charts', 'SimulationTime')}"
+									/>
+							</mx:horizontalAxis>
+							
+							<mx:verticalAxis>
+								<mx:LinearAxis 
+									id="vAxis" 
+									baseAtZero="false" 
+									maximumLabelPrecision="1" 
+									autoAdjust="false" 
+									title="{resourceManager.getString('Charts', 'CPU')}"
+									/>
+							</mx:verticalAxis>
+							
+							<mx:series>
+								<mx:AreaSeries 
+									filterData="false"
+									yField="usage" 
+									xField="timestamp" 
+									form="step" 
+									areaFill="{sc3}" 
+									/>
+							</mx:series>
+							
+						</mx:AreaChart>
+						<!--~~~~~~~~~~ END OF RESOURCE VIEWER ~~~~~~~~~~-->
+						
+					</mx:VBox>
+				</mx:HBox>
+			</mx:VBox>
 		</mx:VBox>
-		<mx:HBox top="5" right="5">
-			<mx:Button label="PNG" click="saveAsPNG();"/>
+		<mx:HBox width="100%" horizontalGap="0" bottom="5">
+			<mx:Spacer width="100%" />
+			<components:IconButton skinClass="gssim.gssimstudio.editor.gssim.skins.IconButtonSkin" width="25" height="25"
+								   autoRepeat="true" buttonDown="zoomChartX(6/5);" iconUp="assets/icon/ZoomIn.png"/>
+			<components:IconButton skinClass="gssim.gssimstudio.editor.gssim.skins.IconButtonSkin" width="25" height="25"
+								   autoRepeat="true" buttonDown="zoomChartX(5/6);" iconUp="assets/icon/ZoomOut.png"/>
 		</mx:HBox>
+		<mx:VBox height="100%" verticalGap="0" top="75">
+			<components:IconButton skinClass="gssim.gssimstudio.editor.gssim.skins.IconButtonSkin" width="25" height="25" 
+								   autoRepeat="true" buttonDown="zoomChartY(6/5);" iconUp="assets/icon/ZoomIn.png"/>
+			<components:IconButton skinClass="gssim.gssimstudio.editor.gssim.skins.IconButtonSkin" width="25" height="25"
+								   autoRepeat="true" buttonDown="zoomChartY(5/6);" iconUp="assets/icon/ZoomOut.png"/>
+		</mx:VBox>
 	</mx:Canvas>
 </MDIWindow>
