[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, |
---|
| 39 | memory: +d.memory |
---|
| 40 | }; |
---|
| 41 | }, function(xios_mem_obj) { |
---|
| 42 | processData(xios_mem_obj) |
---|
| 43 | }); |
---|
| 44 | }; |
---|
| 45 | |
---|
| 46 | function processData(xios_mem_data) { |
---|
| 47 | |
---|
| 48 | // transpose data to use it more easily |
---|
| 49 | var transData = []; |
---|
| 50 | for(var i = 0; i < 3 ; i++){ |
---|
| 51 | transData.push([]); |
---|
| 52 | }; |
---|
| 53 | for(var i = 0; i < xios_mem_data.length ; i++){ |
---|
| 54 | //console.log( xios_mem_data[i] ); |
---|
| 55 | transData[0].push( xios_mem_data[i].time ) // x axis |
---|
| 56 | transData[1].push( xios_mem_data[i].memory ) // y axis |
---|
| 57 | transData[2].push( xios_mem_data[i].event ) // labels |
---|
| 58 | }; |
---|
| 59 | //console.log(transData[0]); |
---|
| 60 | |
---|
| 61 | var data = []; |
---|
| 62 | var result = { |
---|
| 63 | x: transData[0], |
---|
| 64 | y: transData[1], |
---|
| 65 | type: 'scatter', |
---|
| 66 | mode: 'markers', |
---|
| 67 | text: transData[2], |
---|
| 68 | }; |
---|
| 69 | data.push(result); |
---|
| 70 | |
---|
| 71 | var layout = { |
---|
| 72 | title: "Memory consumption", |
---|
| 73 | xaxis: { |
---|
[2420] | 74 | title: "Time (s)", |
---|
[2419] | 75 | }, |
---|
| 76 | yaxis: { |
---|
| 77 | title: "Memory (Mo)", |
---|
| 78 | } |
---|
| 79 | }; |
---|
| 80 | |
---|
| 81 | Plotly.newPlot('myDiv', data, layout); |
---|
| 82 | |
---|
| 83 | } |
---|