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: { |
---|
74 | title: "Time (s)", |
---|
75 | }, |
---|
76 | yaxis: { |
---|
77 | title: "Memory (Mo)", |
---|
78 | } |
---|
79 | }; |
---|
80 | |
---|
81 | Plotly.newPlot('myDiv', data, layout); |
---|
82 | |
---|
83 | } |
---|