Browse Source

Add interactive plots v2 page

compton 2 years ago
parent
commit
16efb4f93b
1 changed files with 120 additions and 55 deletions
  1. 120 55
      plots.php

+ 120 - 55
plots.php

@@ -36,7 +36,7 @@ $selected_csv = isset($_GET["csv_file"]) ? $_GET["csv_file"] : reset($cleanArrs)
     <!-- <script src="chart.js"></script> -->
     <!-- <script src="chart.js"></script> -->
 </head>
 </head>
 <body>
 <body>
-    <div id="gd" style="height: max(70vh, 400px); padding-bottom: 20px;"></div>
+    <div id="gd" style="height: max(80vh, 600px); padding-bottom: 20px;"></div>
             
             
     <form name="form" action="" method="get">
     <form name="form" action="" method="get">
         <p style="text-align: center;">Select energy point:</p>
         <p style="text-align: center;">Select energy point:</p>
@@ -54,18 +54,45 @@ $selected_csv = isset($_GET["csv_file"]) ? $_GET["csv_file"] : reset($cleanArrs)
     <script>
     <script>
         function makeplot(){
         function makeplot(){
             Plotly.d3.csv('<?echo $url_total_info;?>', (allRows)=>{
             Plotly.d3.csv('<?echo $url_total_info;?>', (allRows)=>{
-                const getEnergy = () => {
-                    for (var i=0; i<allRows.length; i++){
-                        if (allRows[i].energy_point == <?echo reset(explode('_', $selected_csv));?> ){
-                            return allRows[i].mean_energy;
-                        }
-                    }
-                    return null;
-                };                    
-                Plotly.d3.csv('<?echo $url.$selected_csv;?>', function(data){processData(data, getEnergy())});
+                const {mean_energy, mean_spread} = parseResultsTable(allRows, <?echo reset(explode('_', $selected_csv));?>);        
+                Plotly.d3.csv('<?echo $url.$selected_csv;?>', function(data){processData(data, mean_energy, mean_spread)});
             }
             }
             );
             );
         }
         }
+        
+        function parseResultsTable(allRows, energy_point){
+            // Extracts a row following the energy point in the total csv file (or null if energy point is not exists)
+            for (var i=0; i<allRows.length; i++){
+                if (allRows[i].energy_point == energy_point ){
+                    return allRows[i];
+                }
+            }
+            return null;
+        }
+        
+        function parseRow(row){
+            // Parses a row from the detailed csv file
+            row['start_time'] = Date.parse(row['compton_start']);
+            row['stop_time'] = Date.parse(row['compton_stop']);
+            row['center_time'] = new Date((row['start_time'] + row['stop_time'])/2);
+            row['timedelta'] = (row['stop_time'] - row['start_time'])/2/1000; // in seconds
+            text_str = "<b>Compton</b><br>" + "<i>Start: </i>" + 
+                    row['compton_start'] + "<br><i>Stop: </i>" + row['compton_stop'] + "<br><br>";
+            row['text_str'] = text_str + "<b>Runs: </b>" + row['run_first'] + " - " + row['run_last'] + "<br><br>";
+            return row;
+        }
+        
+        function processSpread(data, elementId, mean_value){
+            let x = [], y = [], std_y = []
+            for (var i=0; i<data.length; i++){
+                const {center_time, spread_mean, spread_std} = parseRow(data[i]);
+                x.push(center_time);
+                y.push(spread_mean);
+                std_y.push(spread_std);
+            }
+            makeSpreadPlot(elementId, x, y, std_y, mean_value);
+        }
+        
         function kde(x, y, w) {
         function kde(x, y, w) {
             const ts = (t) => t.getTime()/1000;
             const ts = (t) => t.getTime()/1000;
             const toDateTime = (secs) => {
             const toDateTime = (secs) => {
@@ -103,7 +130,7 @@ $selected_csv = isset($_GET["csv_file"]) ? $_GET["csv_file"] : reset($cleanArrs)
         }
         }
         
         
         function oldAverage(E, L){
         function oldAverage(E, L){
-            //console.log(E, L);
+            //Averager by the old method with E and L only
             if (E.length !== L.length){
             if (E.length !== L.length){
                 return null;
                 return null;
             }
             }
@@ -113,58 +140,68 @@ $selected_csv = isset($_GET["csv_file"]) ? $_GET["csv_file"] : reset($cleanArrs)
                 EL += parseFloat(E[i])*parseFloat(L[i]);
                 EL += parseFloat(E[i])*parseFloat(L[i]);
                 sL += parseFloat(L[i]);
                 sL += parseFloat(L[i]);
             }
             }
-            //console.log(EL, sL, EL/sL);
             return EL/sL;
             return EL/sL;
         }
         }
         
         
-        function processData(allRows, mean_energy) {
-            // console.log(allRows);
-            var x = [], y = [], std_y = [];
+        function processData(allRows, mean_energy, mean_spread) {
+            // Processes all data rows
             var dict = {};
             var dict = {};
+            dict['x'] = [];
+            dict['e_mean'] = [];
+            dict['e_std'] = [];
+            dict['spread_mean'] = [];
+            dict['spread_std'] = [];
             dict['compton'] = [];
             dict['compton'] = [];
             dict['lum'] = [];
             dict['lum'] = [];
             dict['twidth'] = [];
             dict['twidth'] = [];
             
             
             for (var i=0; i<allRows.length; i++){
             for (var i=0; i<allRows.length; i++){
-                row = allRows[i];
-                start_time = Date.parse(row['compton_start']);
-                stop_time = Date.parse(row['compton_stop']);
-                center_time = new Date((start_time + stop_time)/2);
-                let timedelta = (stop_time - start_time)/2/1000; // in seconds
-                
-                x.push( center_time );
-                y.push( row['e_mean'] );
-                std_y.push( row['e_std'] );
-                
-                text_str = "<b>Compton</b><br>" + "<i>Start: </i>" + 
-                    row['compton_start'] + "<br><i>Stop: </i>" + row['compton_stop'] + "<br><br>";
-                text_str = text_str + "<b>Runs: </b>" + row['run_first'] + " - " + row['run_last'] + "<br><br>";
-                dict['compton'].push(text_str);
-                dict['lum'].push(row['luminosity']);
-                dict['twidth'].push(timedelta);
+                const row = parseRow(allRows[i]);
+                                
+                dict['x'].push( row['center_time'] );
+                dict['e_mean'].push( row['e_mean'] );
+                dict['e_std'].push( row['e_std'] );
+                dict['spread_mean'].push( row['spread_mean'] );
+                dict['spread_std'].push( row['spread_std'] );
+                dict['compton'].push( row['text_str'] );
+                dict['lum'].push( row['luminosity'] );
+                dict['twidth'].push( row['timedelta'] );
             }
             }
-            //console.log( 'X',x, 'Y',y, 'SD', dict );  
-            const [a, b] = kde(x, dict['lum'], dict['twidth']);
+            
+            const [a, b] = kde(dict['x'], dict['lum'], dict['twidth']);
             dict['kdex'] = a;
             dict['kdex'] = a;
             dict['kdey'] = b;
             dict['kdey'] = b;
             //console.log(dict['kdex'], dict['kdey']);
             //console.log(dict['kdex'], dict['kdey']);
             //oldAverage(y, dict['lum']);
             //oldAverage(y, dict['lum']);
-            makePlotly( x, y, std_y, dict, mean_energy, oldAverage(y, dict['lum']));
+            
+            dict['mean_energy_total'] = mean_energy;
+            dict['old_mean_energy_total'] = oldAverage(dict['e_mean'], dict['lum']);
+            dict['mean_spread_total'] = mean_spread;
+            
+            makePlotly(dict, "gd");
         }
         }
         
         
-        function makePlotly( x, y, std_y, dict, mean_energy, old_mean){
-            var plotDiv = document.getElementById("gd");
+        function makePlotly(dict, elementId){
+            const getYRange = (y, std_y) => {
+                const ys = [...y].sort();
+                const std_ys = [...std_y].sort();
+                let idx = Math.floor(ys.length/2);
+                const y0 = parseFloat(ys[idx]);
+                const std0 = parseFloat(std_ys[idx]);
+                return [y0-6*std0, y0+6*std0];
+            };
+            
             var trace1 = {
             var trace1 = {
-                x: x,
-                y: y,
-                yaxis: 'y2',
+                x: dict['x'],
+                y: dict['e_mean'],
+                yaxis: 'y3',
                 mode: 'markers',
                 mode: 'markers',
                 text: dict['compton'],
                 text: dict['compton'],
                 hovertemplate: "%{text}<br><br>" + "<extra></extra>",
                 hovertemplate: "%{text}<br><br>" + "<extra></extra>",
                 hovermode: "x",
                 hovermode: "x",
                 error_y: {
                 error_y: {
                     type: 'data',
                     type: 'data',
-                    array: std_y,
+                    array: dict['e_std'],
                     color: '#260101',
                     color: '#260101',
                 },
                 },
                 showlegend: false,
                 showlegend: false,
@@ -174,6 +211,25 @@ $selected_csv = isset($_GET["csv_file"]) ? $_GET["csv_file"] : reset($cleanArrs)
                 type: "scatter",
                 type: "scatter",
             };
             };
             var trace2 = {
             var trace2 = {
+                x: dict['x'],
+                y: dict['spread_mean'],
+                yaxis: 'y2',
+                mode: 'markers',
+                text: dict['compton'],
+                hovertemplate: "%{text}<br><br>" + "<extra></extra>",
+                hovermode: "x",
+                error_y: {
+                    type: 'data',
+                    array: dict['spread_std'],
+                    color: '#260101',
+                },
+                showlegend: false,
+                marker: {
+                    color: '#260101',
+                },
+                type: "scatter",
+            };
+            var trace3 = {
                 x: dict['kdex'],
                 x: dict['kdex'],
                 y: dict['kdey'],
                 y: dict['kdey'],
                 hovertemplate: "%{y}<br><br>" + "<extra></extra>",
                 hovertemplate: "%{y}<br><br>" + "<extra></extra>",
@@ -187,18 +243,18 @@ $selected_csv = isset($_GET["csv_file"]) ? $_GET["csv_file"] : reset($cleanArrs)
                 },
                 },
                 type: "scatter",
                 type: "scatter",
             };
             };
-            var traces = [trace1, trace2];
+            var traces = [trace1, trace2, trace3];
             
             
             var updatemenus = [];
             var updatemenus = [];
-            if (mean_energy){
+            if (dict['mean_energy_total']){
                 updatemenus = [{
                 updatemenus = [{
                 buttons: [
                 buttons: [
                     {
                     {
-                        args:[{'shapes[0].visible': true, 'shapes[1].visible': false, 'title': 'Mean energy: ' + parseFloat(mean_energy).toFixed(3) + ' MeV',}],
+                        args:[{'shapes[0].visible': true, 'shapes[1].visible': false, 'title': 'Mean energy: ' + parseFloat(dict['mean_energy_total']).toFixed(3) + ' MeV',}],
                         label: 'Current average method',
                         label: 'Current average method',
                         method: 'relayout'
                         method: 'relayout'
                     }, {
                     }, {
-                        args:[{'shapes[0].visible': false, 'shapes[1].visible': true, 'title': 'Mean energy: ' + old_mean.toFixed(3)  + ' MeV',}],
+                        args:[{'shapes[0].visible': false, 'shapes[1].visible': true, 'title': 'Mean energy: ' + dict['old_mean_energy_total'].toFixed(3)  + ' MeV',}],
                         label: 'Former average method',
                         label: 'Former average method',
                         method: 'relayout'
                         method: 'relayout'
                     },
                     },
@@ -215,7 +271,7 @@ $selected_csv = isset($_GET["csv_file"]) ? $_GET["csv_file"] : reset($cleanArrs)
             
             
             
             
             var layout = {
             var layout = {
-                title: 'Mean energy: ' + mean_energy + ' MeV',
+                title: 'Mean energy: ' + dict['mean_energy_total'] + ' MeV',
                 updatemenus: updatemenus,
                 updatemenus: updatemenus,
                 font: {
                 font: {
                     size: 18,
                     size: 18,
@@ -224,14 +280,23 @@ $selected_csv = isset($_GET["csv_file"]) ? $_GET["csv_file"] : reset($cleanArrs)
                     title: "Time, NSK",
                     title: "Time, NSK",
                     automargin: true,
                     automargin: true,
                 },
                 },
-                yaxis2: {
-                    domain: [0.3, 1],
-                    title: "Measured energy, MeV",
+                yaxis3: {
+                    domain: [0.6, 1],
+                    title: "Mean energy, MeV",
                     automargin: true,
                     automargin: true,
                     //showspikes: true,
                     //showspikes: true,
                     //spikemode: "across",
                     //spikemode: "across",
                     //spikesnap: "data",
                     //spikesnap: "data",
                 },
                 },
+                yaxis2: {
+                    domain: [0.3, 0.5],
+                    title: "Spread, MeV",
+                    autorange: false,
+                    range: getYRange(dict['spread_mean'], dict['spread_std']),
+                    //showspikes: true,
+                    //spikemode: "across",
+                    //spikesnap: "data",
+                },
                 yaxis: {
                 yaxis: {
                     domain: [0, 0.2],
                     domain: [0, 0.2],
                     automargin: true,
                     automargin: true,
@@ -245,27 +310,27 @@ $selected_csv = isset($_GET["csv_file"]) ? $_GET["csv_file"] : reset($cleanArrs)
                 autosize: true,
                 autosize: true,
             };
             };
             
             
-            if (mean_energy){
+            if (dict['mean_energy_total']){
                 layout['shapes'] = [{
                 layout['shapes'] = [{
                     type: 'line',
                     type: 'line',
-                    yref: 'y2',
+                    yref: 'y3',
                     xref: 'paper',
                     xref: 'paper',
                     x0: 0,
                     x0: 0,
                     x1: 1,
                     x1: 1,
-                    y0: mean_energy,
-                    y1: mean_energy,
+                    y0: dict['mean_energy_total'],
+                    y1: dict['mean_energy_total'],
                     line: {
                     line: {
                         color: '#590A0A',
                         color: '#590A0A',
                     },
                     },
                 },
                 },
                 {
                 {
                     type: 'line',
                     type: 'line',
-                    yref: 'y2',
+                    yref: 'y3',
                     xref: 'paper',
                     xref: 'paper',
                     x0: 0,
                     x0: 0,
                     x1: 1,
                     x1: 1,
-                    y0: old_mean,
-                    y1: old_mean,
+                    y0: dict['old_mean_energy_total'],
+                    y1: dict['old_mean_energy_total'],
                     line: {
                     line: {
                         color: '#590A0A',
                         color: '#590A0A',
                     },
                     },