Merge pull request #31 from dhcroft/master

Changed loop plots to AAMI recommended axis order

raspberry-backend/static/js/Chart-displayLoop.js

@@ -13,34 +13,48 @@ function requestChartVar() {
         success: function(point) {
 	    if( chart_PV.data.datasets[1].data.length > 100 ){
 		chart_PV.data.datasets[1].data.shift();
-		chart_FV.data.datasets[1].data.shift();
+		chart_VF.data.datasets[1].data.shift();
 		chart_PF.data.datasets[1].data.shift();
 	    }
 	    // point labelled as: (stealing definitions from Chart-display.js)
 	    // Pressure = pressure_buffer
 	    // Flow = pressure_inhale ??
 	    // Volume = temperature_buffer !!?
-	    chart_PV.data.datasets[1].data.push({x: point["temperature_buffer"],
-						 y: point["pressure_buffer"]});
-	    chart_FV.data.datasets[1].data.push({x: point["temperature_buffer"],
-						 y: point["pressure_inhale"]});
-	    chart_PF.data.datasets[1].data.push({x: point["pressure_inhale"],
-						 y: point["pressure_buffer"]});
-	    chart_PV.data.datasets[0].data = 
-		[{x: point["temperature_buffer"],y: point["pressure_buffer"]}];
+	    var pressure = point["pressure_buffer"];
+	    var volume = point["temperature_buffer"];
+	    var flow = point["pressure_inhale"];
 
-	    chart_FV.data.datasets[0].data = 
-		[{x: point["temperature_buffer"], y: point["pressure_inhale"]}];
+	    // to quote the AAMI: 
+	    //For Pressure-Volume loops, the graph
+	    //is required to use delivered volume on the vertical axis
+	    //and airway pressure on the horizontal axis. Positive
+	    //values should increase in up/right directions. Every
+	    //breath resets the graph, setting the volume back at the
+	    //origin.
 
-	    chart_PF.data.datasets[0].data = 
-		[{x: point["pressure_inhale"], y: point["pressure_buffer"]}];
+	    //For Flow-Volume loops the graph is required to use flow
+	    //rate on the vertical axis and delivered volume on the
+	    //horizontal axis. Positive values should increase in the
+	    //up/right directions.  Every breath resets the graph,
+	    //setting the volume back at the origin. The document also
+	    //suggests that there could be another version using
+	    //exhalation flow, if possible.
 
+	    // loops:
+	    chart_PV.data.datasets[1].data.push({x: pressure, y: volume});
+	    chart_VF.data.datasets[1].data.push({x: volume, y: flow}); 
+	    chart_PF.data.datasets[1].data.push({x: pressure, y: flow});
+
+	    // current data:
+	    chart_PV.data.datasets[0].data = [{x: pressure, y: volume}];
+	    chart_VF.data.datasets[0].data = [{x: volume, y: flow}];
+	    chart_PF.data.datasets[0].data = [{x: pressure, y: flow}];
+
+	    // now run chart updates
 	    chart_PV.update();
-	    chart_FV.update();
+	    chart_VF.update();
 	    chart_PF.update();
-	    
-	    console.info("chart_PV.data", chart_PV.data);
-        },
+	},
         cache: false
     });
     setTimeout(requestChartVar, 200);
@@ -53,55 +67,43 @@ $(document).ready(function() {
     chart_PV = new Chart(ctx_PV, {
         type: 'scatter',
         data: {datasets: [{data: [],
-			   label: "Pressure:Volme (current)",
+			   label: "Pressure (x) [mbar]: Volume (y) [ml] (current)",
 			   borderColor: "rgb(128,0,0)",
 			   pointBackgroundColor : "rgb(128,0,0)",
 			   fill: true}, 
 			  {data: [],
-			   label: "Loop Pressure:Volme (last 20s)",
+			   label: "Loop (20s)",
 			   borderColor: "rgb(51,99,255)",
 			   pointBackgroundColor : "rgb(51,99,255)",
 			   fill: false },
 			  ]},
 	options: {elements: { point: { radius: 5}},
-		scales: {xAxes: [{type: 'linear',
-				     position: 'bottom',
-				     lablelString: 'temperature_buffer??',
-				     display: true,
-				     ticks: {min: -1000, max: 1500, 
-					     stepSize: 500, fontSize:25 }}],
-			    yAxes: [{type: 'linear',
-				     position: 'left',
-				     lablelString: 'pressure_buffer??',
-				     display: true,
+		  scales: {xAxes: [{display: true,
 				     ticks: {min: 0, max: 25, 
-					     stepSize: 5, fontSize: 25 }}]}}
+					     stepSize: 5, fontSize: 25 }}],
+			    yAxes: [{display: true,
+				     ticks: {min: -1000, max: 1500, 
+					     stepSize: 500, fontSize:25 }}]}}
     });
 
-    var ctx_FV = document.getElementById('flow_volume_chart');
-    chart_FV = new Chart(ctx_FV, {
+    var ctx_VF = document.getElementById('flow_volume_chart');
+    chart_VF = new Chart(ctx_VF, {
         type: 'scatter',
         data: {datasets: [{data: [],
-			   label: "Flow:Volme  (current)",
+			   label: "Volume (x) [ml]: Flow (y) [ml/min]  (current)",
 			   borderColor: "rgb(128,0,0)",
 			   pointBackgroundColor : "rgb(128,0,0)",
 			   fill: true },
 			  {data: [],
-			   label: "Loop Flow:Volme  (last 20s)",
+			   label: "Loop (20s)",
 			   borderColor: "rgb(51,99,255)",
 			   pointBackgroundColor : "rgb(51,99,255)",
 			   fill: false }]}
 	,options: {elements: { point: { radius: 5}},
-		scales: {xAxes: [{type: 'linear',
-				     position: 'bottom',
-				     lablelString: 'temperature_buffer??',
-				     display: true,
-				     ticks: {min: -1000, max: 1500, 
-					     stepSize: 500, fontSize: 25 }}],
-			    yAxes: [{type: 'linear',
-				     position: 'left',
-				     lablelString: 'pressure_inhale??',
-				     display: true,
+		scales: {xAxes: [{display: true,
+				  ticks: {min: -1000, max: 1500, 
+					  stepSize: 500, fontSize: 25 }}],
+			    yAxes: [{display: true,
 				     ticks: {min: 0, max: 300, 
 					     stepSize: 100, fontSize: 25 }}]}}
     });
@@ -110,28 +112,22 @@ $(document).ready(function() {
     chart_PF = new Chart(ctx_PF, {
         type: 'scatter',
         data: {datasets: [{data: [],
-			   label: "Pressure:Flow (current)",
+			   label: "Pressure (x) [mbar]: Flow (y) [ml/min] (current)",
 			   borderColor: "rgb(128,0,0)",
 			   pointBackgroundColor : "rgb(128,0,0)",
 			   fill: true },
 			  {data: [],
-			   label: "Loop Pressure:Flow (last 20s)",
+			   label: "Loop (20s)",
 			   borderColor: "rgb(51,99,255)",
 			   pointBackgroundColor : "rgb(51,99,255)",
 			   fill: false }]}
 	,options: {elements: { point: { radius: 5, fill: true}},
-	    scales: {xAxes: [{type: 'linear',
-				     position: 'bottom',
-				     lablelString: 'pressure_inhale??',
-				     display: true,
+		   scales: {xAxes: [{display: true,
+				     ticks: {min: 0, max: 25 , 
+					     stepSize: 5  , fontSize: 25 }}],
+			    yAxes: [{display: true,
 				     ticks: {min: 0, max: 300, 
-					     stepSize: 100, fontSize: 25 }}],
-			    yAxes: [{type: 'linear',
-				     position: 'left',
-				     lablelString: 'pressure_buffer??',
-				     display: true,
-				     ticks: {min: 0, max: 25, 
-					     stepSize: 5, fontSize: 25 }}]}}
+					     stepSize: 100, fontSize: 25 }}]}}
     });
 });