[2419] | 1 | |
---|
| 2 | Plotly.d3.select('body') |
---|
| 3 | .append('div') |
---|
| 4 | .html("Select a CSV XIOS file"); |
---|
| 5 | |
---|
| 6 | // ------------------ select csv data |
---|
| 7 | var input = Plotly.d3.select("body").append("input") |
---|
| 8 | .attr("type","file") |
---|
| 9 | .attr("accept",".csv") |
---|
| 10 | .on("change", handleFileSelect) |
---|
| 11 | |
---|
| 12 | |
---|
| 13 | // Single file handler |
---|
| 14 | function handleFileSelect() { |
---|
| 15 | // Check for the various File API support. |
---|
| 16 | if (window.File && window.FileReader && window.FileList && window.Blob) { |
---|
| 17 | // Great success! All the File APIs are supported. |
---|
| 18 | } else { |
---|
| 19 | alert('The File APIs are not fully supported in this browser.'); |
---|
| 20 | } |
---|
| 21 | |
---|
| 22 | var f = event.target.files[0]; // FileList object |
---|
| 23 | var reader = new FileReader(); |
---|
| 24 | |
---|
| 25 | reader.onload = function(event) { |
---|
| 26 | makeplot_read_selected(event.target.result) |
---|
| 27 | }; |
---|
| 28 | // Read in the file as a data URL. |
---|
| 29 | reader.readAsDataURL(f); |
---|
| 30 | } |
---|
| 31 | |
---|
| 32 | |
---|
| 33 | function makeplot_read_selected(filename) { |
---|
| 34 | Plotly.d3.csv(filename, function(d) { |
---|
| 35 | // formating data |
---|
| 36 | return { |
---|
| 37 | time: +d.time, |
---|
| 38 | event: d.event, |
---|
[2425] | 39 | vsize: +d.vsize, |
---|
| 40 | rss: +d.rss, |
---|
| 41 | VmHWM: +d.VmHWM |
---|
[2419] | 42 | }; |
---|
| 43 | }, function(xios_mem_obj) { |
---|
| 44 | processData(xios_mem_obj) |
---|
| 45 | }); |
---|
| 46 | }; |
---|
| 47 | |
---|
| 48 | function processData(xios_mem_data) { |
---|
| 49 | |
---|
| 50 | // transpose data to use it more easily |
---|
| 51 | var transData = []; |
---|
[2425] | 52 | for(var i = 0; i < 5 ; i++){ |
---|
[2419] | 53 | transData.push([]); |
---|
| 54 | }; |
---|
| 55 | for(var i = 0; i < xios_mem_data.length ; i++){ |
---|
| 56 | //console.log( xios_mem_data[i] ); |
---|
| 57 | transData[0].push( xios_mem_data[i].time ) // x axis |
---|
[2425] | 58 | transData[1].push( xios_mem_data[i].vsize ) // y axis |
---|
[2419] | 59 | transData[2].push( xios_mem_data[i].event ) // labels |
---|
[2425] | 60 | transData[3].push( xios_mem_data[i].rss ) // y axis |
---|
| 61 | transData[4].push( xios_mem_data[i].VmHWM ) // y axis |
---|
[2419] | 62 | }; |
---|
| 63 | //console.log(transData[0]); |
---|
| 64 | |
---|
| 65 | var data = []; |
---|
| 66 | var result = { |
---|
| 67 | x: transData[0], |
---|
| 68 | y: transData[1], |
---|
| 69 | type: 'scatter', |
---|
| 70 | mode: 'markers', |
---|
| 71 | text: transData[2], |
---|
[2425] | 72 | name:'vsize', |
---|
[2419] | 73 | }; |
---|
| 74 | data.push(result); |
---|
[2425] | 75 | |
---|
| 76 | var result2 = { |
---|
| 77 | x: transData[0], |
---|
| 78 | y: transData[3], |
---|
| 79 | type: 'scatter', |
---|
| 80 | mode: 'markers', |
---|
| 81 | text: transData[2], |
---|
| 82 | name:'RSS', |
---|
| 83 | }; |
---|
| 84 | data.push(result2); |
---|
| 85 | |
---|
| 86 | var result3 = { |
---|
| 87 | x: transData[0], |
---|
| 88 | y: transData[4], |
---|
| 89 | type: 'scatter', |
---|
| 90 | mode: 'markers', |
---|
| 91 | text: transData[2], |
---|
| 92 | name:'VmHWM', |
---|
| 93 | }; |
---|
| 94 | data.push(result3); |
---|
[2419] | 95 | |
---|
| 96 | var layout = { |
---|
| 97 | title: "Memory consumption", |
---|
| 98 | xaxis: { |
---|
[2420] | 99 | title: "Time (s)", |
---|
[2419] | 100 | }, |
---|
| 101 | yaxis: { |
---|
| 102 | title: "Memory (Mo)", |
---|
| 103 | } |
---|
| 104 | }; |
---|
| 105 | |
---|
| 106 | Plotly.newPlot('myDiv', data, layout); |
---|
| 107 | |
---|
| 108 | } |
---|