update display power

author: Vincent Guittot <vincent.guittot@linaro.org> 2016-02-26 11:48:27 +0100
committer: Vincent Guittot <vincent.guittot@linaro.org> 2016-02-26 11:48:27 +0100
commit: fa305aa7303655c60a88ceded809a4b6ae1cb630 (patch)
tree: 4dc4be6b88ce68c779385c01567110ef71ce281d
parent: 1e6abeef3bc2091a0832f84faeb30bf4205baab2 (diff)
1 files changed, 127 insertions, 42 deletions
diff --git a/display_power.html b/display_power.html
index 9f86342..168dcd9 100644
--- a/display_power.html
+++ b/display_power.html
@@ -2,40 +2,22 @@
 <html>
 	<head>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-        <title>Parsing Large power trace</title>
+        <title>Parsing Large data trace</title>
         <!-- 1. Add JQuery and Highcharts in the head of your page -->
-        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
-		<script src="http://code.highcharts.com/stock/highstock.js"></script>
+        <script type="text/javascript" src="file:///home/vingu/Tools/power-tools/jquery-1.11.3.js"></script>
+		<script src="file:///home/vingu/Tools/power-tools/highcharts-custom.js"></script>
          
-        <!-- 2. You can add print and export feature by adding this line -->
-		<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
+        <!-- 2. You can add print and export feature by adding this line (now
+			    included in custom build above) -->
          
          
         <!-- 3. Add the JavaScript with the Highchart options to initialize the chart -->
 		<script type="text/javascript">
-		function drop(e) {
-
-			if (!e) {
-			var fichier = document.getElementById('fileinput').files;
-			}
-			else {
-				var fichier = e.dataTransfer.files;
-			}
-
-			var reader = new FileReader();
-			reader.onerror = function() { console.error('Error reading file');}
-			reader.onload = parse;
-		
-			reader.readAsText(fichier[0]);
-
-		}
-
-		function parse(event){
             var options = {
                 chart: {
 					renderTo: 'container',
-					zoomType: 'xy'
-//                    type: 'column'
+					zoomType: 'xy',
+                    type: 'line'
 				},
 				navigator: {
 					enabled: true
@@ -69,6 +51,18 @@
 						type: 'millisecond',
 						text: '1ms'
 					}, {
+						count: 100,
+						type: 'millisecond',
+						text: '100ms'
+					}, {
+						count: 200,
+						type: 'millisecond',
+						text: '200ms'
+					}, {
+						count: 500,
+						type: 'millisecond',
+						text: '500ms'
+					}, {
 						count: 1,
 						type: 'second',
 						text: '1sec'
@@ -81,24 +75,82 @@
 					enabled: true
 				},
                 title: {
-                    text: 'Power Consumption'                 
+                    text: 'Power Consumption or anything else you want to display'                 
                 },
                 subtitle: {
-                    text: 'Current or Watt'
-                },
-                yAxis: {
-                    title: {
-                        text: 'Current(uA) or Watt(uW)'
-                    }
+                    text: 'Current, Watt or whatever the unit'
                 },
-                series: []
+				yAxis: [{
+					title: {
+						text : 'Current, Watt or whatever the unit',
+					},
+				}],
+   				xAxis: {
+					type: 'datetime',
+					labels: {
+						formatter: function() {
+									   return this.value/1000;
+									}
+					},
+					title: {
+						text: 'Time'
+					}						   
+				},
+//			colors: ['#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263',      '#6AF9C4'],
+			series: []
 			};
+			
+		var remain = 0;
+		var chart = null;
+
+		function drop(e) {
+
+			if (!e) {
+			var fichiers = document.getElementById('fileinput').files;
+			}
+			else {
+				var fichiers = e.dataTransfer.files;
+			}
+
+			options.series = [];
+			options.yAxis = [];
+			remain = fichiers.length;
+
+			$.each(fichiers, function(fileNo, file) {
+				var reader = new FileReader();
+				reader.onerror = function() { console.error('Error reading file');}
+				//reader.onload = parse;
+				reader.onload = function (event) { 
+					return parse(event, fileNo, file.name);
+					};
+				reader.readAsText(file);
+			});
+
+
+		}
+
+		function parse(event, idx, name){
 
 			var data = event.target.result;			// load file values
             var series = [];
+			var stepmode = document.getElementById('step_graph').checked;
+			var axismode = document.getElementById('multiple_graph').checked;
+			var decimatemode = document.getElementById('decimate_graph').checked;
+			var relativemode = document.getElementById('relative_time').checked;
+			var offset = -1;
 
+			if (relativemode == 0)
+				offset = 0;
 
-            // Split the lines
+			// Create an yAxis
+			options.yAxis[idx] = {
+								title: {
+									text : name,
+								},
+								opposite : idx % 2 == 1,
+							 };
+
+			// Split the lines
             var lines = data.split('\n');
             $.each(lines, function(lineNo, line) {
 				if (line.substring(0, 1) == "#")
@@ -110,20 +162,33 @@
 				if (lineNo == 0) {
 					$.each(items, function(itemNo, item) {
 						var serie = {
+							name : item,
+							yAxis : 0,
+							step : stepmode,
 							data: []
 						};
-                        serie.name = item;
-						series.push(serie)
+						if (axismode)
+							serie.yAxis = idx;
+
+						series.push(serie);
 					});
                 }
                 // the rest of the lines contain data with their name in the first position
 				else {
 					var Xindex;
+					if (decimatemode && ((lineNo % 10) != 0))
+						return;
 
 					$.each(items, function(itemNo, item) {
 						var Yindex = parseInt(item);
 						if (itemNo == 0) {
 							Xindex = parseInt(item) / 1000;
+
+						if (offset == -1)
+							offset = Xindex;
+						
+						Xindex = Xindex - offset;
+
 						}else {
 							var serie = series[itemNo];
 							if (isNaN(Yindex) || isNaN(Xindex))
@@ -143,20 +208,40 @@
 					options.series.push(item);
 				} 
 			});
-            //putting all together and create the chart
-//            var chart = new Highcharts.Chart(options);
-            var chart = new Highcharts.StockChart(options);
+
+			remain--;
+			if (remain == 0) {
+				display(null);
+			}
 
         };
+
+		function display(e) {
+            //putting all together and create the chart
+			var chartmode = document.getElementById('stock_graph').checked;
+			if (chart)
+				chart.destroy();
+			if (chartmode) {
+				chart = new Highcharts.StockChart(options);
+			} else {
+				chart = new Highcharts.Chart(options);
+			}
+
+		}
 		</script>
          
 	</head>
 	<body>
 		<!-- File input filed -->
-		<input type='file' name="myFile" id='fileinput'  onchange='drop()'>
-         
+		<input type='file' name="myFile1" id='fileinput'  onchange='drop()' multiple>
+		<input type='checkbox' name="step" value='1' id='step_graph' onchange='drop()'> step
+  		<input type='checkbox' name="multiple" value='1' id='multiple_graph' onchange='drop()'> multiple y Axis
+  		<input type='checkbox' name="decimate" value='1' id='decimate_graph' onchange='drop()'> decimate data
+  		<input type='checkbox' name="stock" value='1' id='stock_graph' onchange='drop()'> stock graph
+  		<input type='checkbox' name="relative" value='1' id='relative_time' onchange='drop()'> relative time
+
         <!-- 3. Add the container -->
-        <div id="container" style="width: 1024px; height: 1024px; margin: 0 auto"></div>      
+        <div id="container" style="width: 1800px; height: 1000px; margin: 0 auto"></div>      
                  
     </body>
 </html>
author	Vincent Guittot <vincent.guittot@linaro.org>	2016-02-26 11:48:27 +0100
committer	Vincent Guittot <vincent.guittot@linaro.org>	2016-02-26 11:48:27 +0100
commit	fa305aa7303655c60a88ceded809a4b6ae1cb630 (patch)
tree	4dc4be6b88ce68c779385c01567110ef71ce281d
parent	1e6abeef3bc2091a0832f84faeb30bf4205baab2 (diff)