changeset 569:04a64127ebd0 Dev_main

Analysis: Mean bar plot
author Nicholas Jillings <n.g.r.jillings@se14.qmul.ac.uk>
date Tue, 23 Feb 2016 19:35:18 +0000
parents 03e713d870cf
children 1f23b2b03610
files analysis/analysis.js analysis/index.html
diffstat 2 files changed, 62 insertions(+), 11 deletions(-) [+]
line wrap: on
line diff
--- a/analysis/analysis.js	Tue Feb 23 18:57:26 2016 +0000
+++ b/analysis/analysis.js	Tue Feb 23 19:35:18 2016 +0000
@@ -10,20 +10,71 @@
 }
 
 function Chart() {
-    this.data = null;
+    this.valueData = null;
+    this.commentData = null;
+    this.loadStatus = 0;
     
-    this.getValueData = function() {
-        var XMLHttp = new XMLHttpRequest();
-        XMLHttp.parent = this;
-        XMLHttp.open("GET","comment_parser.php?format=JSON",true);
-        XMLHttp.onload = function() {
-            // Now we have the JSON data, extract
-            this.parent.data = JSON.parse(this.responseText);
-        }
-        XMLHttp.send();
+    var XMLHttp = new XMLHttpRequest();
+    XMLHttp.parent = this;
+    XMLHttp.open("GET","../scripts/score_parser.php?format=JSON",true);
+    XMLHttp.onload = function() {
+        // Now we have the JSON data, extract
+        this.parent.valueData = JSON.parse(this.responseText);
+        this.parent.loadStatus++;
     }
+    XMLHttp.send();
+    var XMLHttp2 = new XMLHttpRequest();
+    XMLHttp2.parent = this;
+    XMLHttp2.open("GET","../scripts/comment_parser.php?format=JSON",true);
+    XMLHttp2.onload = function() {
+        // Now we have the JSON data, extract
+        this.parent.commentData = JSON.parse(this.responseText);
+        this.parent.loadStatus++;
+    }
+    XMLHttp2.send();
     
     this.drawMean = function() {
         // First we must get the value data
+        if (this.valueData == null) {
+            console.log("Error - Data not loaded");
+            return;
+        }
+        // We create one plot per page
+        for (var page of this.valueData.pages) {
+            // First, create the chart resulting point
+            var inject = document.createElement("div");
+            document.getElementById("test-pages").appendChild(inject);
+            
+            // Create the data table
+            var data = new google.visualization.DataTable();
+            data.addColumn('string','id');
+            // Get axis labels
+            for (var axis of page.elements[0].axis) {
+                data.addColumn('number',axis.name);
+            }
+            var rows = []; // Rows is an array of tuples [col1, col2, col3 ... colN];
+            for (var element of page.elements) {
+                var entry = [element.id];
+                for (var i=0; i<page.elements[0].axis.length; i++) {
+                    var mean =0;
+                    if (i < element.axis.length) {
+                        var axis = element.axis[i];
+                        for (var value of axis.values) {
+                            mean += value;
+                        }
+                        mean /= axis.values.length;
+                    }
+                    entry.push(mean);
+                }
+                rows.push(entry);
+            }
+            data.addRows(rows);
+            var options = {'title':'Mean of page: '+page.id,
+                          'width':800,
+                          'height':700};
+            // Draw the chart
+            var chart = new google.visualization.ColumnChart(inject);
+            chart.draw(data,options);
+        }
     }
 }
\ No newline at end of file
--- a/analysis/index.html	Tue Feb 23 18:57:26 2016 +0000
+++ b/analysis/index.html	Tue Feb 23 19:35:18 2016 +0000
@@ -6,7 +6,7 @@
     </head>
     <body>
         <h1>Web Audio Evaluation Toolbox: Analysis</h1>
+        <button onclick="chartContext.drawMean();">Means</button>
         <div id="test-pages"></div>
-        <div id=""
     </body>
 </html>
\ No newline at end of file