diff options
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) |
update display power
-rw-r--r-- | display_power.html | 169 |
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> |