yt added plot of browser progress reports

yt/jsbandwidth-body.html

@@ -25,23 +25,26 @@ at about <td><form name="speedtest" id="speedform">
 
 
 
-   <table  class="uninett-color-white uninett-padded gutter" border=1 bgcolor=linen><tr><th>What<th>Mbit/s<th>Transfer Time<th>Throughput bar
+   <table  id="result" class="uninett-color-white uninett-padded gutter" border=1 bgcolor=linen style=width:100%>
+   <tr><th id=what>What<th>Mbit/s<th>Transfer Time<th>Throughput bar
 <!--
       <tr><td>Reference*<td><span id=reftxt><td><span id=webrtt></span>
         <td><img id="refbar" src="bar-green.gif" width="1px" height="10"> 
 -->
-      <tr><td>Download<td><span id=dlspeed><td><span id=dldiff></span>
-        <td><img id="dlbar" src="bar-salmon.gif" style="width: 1px; height: 10px;"> 
-      <tr><td> - average<td><span id=dlspeedavg><td><span id=dldiffavg></span>
-         <td><img id="dlbaravg" src="bar-salmon.gif" style="width: 1px; height: 10px;"> 
-      <tr><td>Upload<td><span id=ulspeed><td><span id=uldiff></span>
-        <td><img id="ulbar" src="bar-blue.gif" style="width: 1px; height: 10px;"> 
-      <tr><td> - average<td><span id=ulspeedavg><td><span id=uldiffavg></span>
-         <td><img id="ulbaravg" src="bar-blue.gif" style="width: 1px; height: 10px;"> 
+      <tr><td>Download<td id=dlspeed><td id=dldiff>
+        <td><img id="dlbar" src="down.png" style="width: 1px; height: 10px;"> 
+      <tr><td> - average<td id=dlspeedavg><td id=dldiffavg>
+         <td><img id="dlbaravg" src="down.png" style="width: 1px; height: 10px;"> 
+      <tr><td>Upload<td id=ulspeed><td id=uldiff>
+        <td><img id="ulbar" src="up.png" style="width: 1px; height: 10px;"> 
+      <tr><td> - average<td id=ulspeedavg><td id=uldiffavg>
+         <td><img id="ulbaravg" src="up.png" style="width: 1px; height: 10px;"> 
 	
  </table>
 <span id=response></span>
 
+<div id=graf style=width:100%></div>
+
 <!--
 <button id="result" style="background-color:lightgreen">
   Upload results
@@ -73,7 +76,18 @@ more indepth and accurate measurement go to the
 <p>This test transfers files to and from the server increasing from 25 Kbytes to 25 Mbytes by a factor of 10 until it lasts 0.5-5 seconds.<br>
 <!-- It  should take about 2 seconds if the chosen speed is right. -->
 <p> 
-<b>Transfer time</b> column show transfer time in seconds.<br>
-<b>Mbit/s</b> column show the throughput i megabits per second computed as the web file transfer size by time.<br>
-<b>Web Response Time</b> is the time for minimal sized image to be returned.
+<ul>
+<li><b>Transfer time</b> column show transfer time in seconds.<br>
+<li><b>Mbit/s</b> column show the throughput i megabits per second computed as the web file transfer size by time.<br>
+<li><b>Web Response Time</b> is the time for minimal sized image to be returned.
+  <li>The graph points show performance from the browsers progress reports per interval. 
+  <li>The table and graph avg lines show the average speed for the whole transfer. 
+  <li>Click on the curve names to hide/show. 
+  <li>Select a square to zoom in
+</ul>
+
+<h4>Versjon 1.1</h4>
+<ul><li>Added plot of progress reports</ul>
+<p>
+
 </div>

yt/jsbandwidth-bs.php

@@ -3,6 +3,7 @@
   <?php include '../head-bs.html'?>
 <!--    <script type="text/javascript" src="../js/jquery-ui-1.10.3/jquery-1.9.1.js"></script> -->
    <script type="text/javascript" src="../js/jquery-ui-1.10.3/ui/jquery-ui.js"></script>
+    <script type="text/javascript" src="../js/Highcharts/js/highcharts.js"></script> 
 <!-- 
 <script type="text/javascript" src="../js/jquery-ui-1.11.0-beta.2.custom/jquery.js"></script>
 <script type="text/javascript" src="../js/jquery-ui-1.11.0-beta.2.custom/jquery-ui.js"></script>