Index: openacs-4/packages/xotcl-request-monitor/www/index.tcl
===================================================================
RCS file: /usr/local/cvsroot/openacs-4/packages/xotcl-request-monitor/www/index.tcl,v
diff -u -r1.24.2.2 -r1.24.2.3
--- openacs-4/packages/xotcl-request-monitor/www/index.tcl	1 Feb 2016 12:05:32 -0000	1.24.2.2
+++ openacs-4/packages/xotcl-request-monitor/www/index.tcl	1 Feb 2016 16:52:48 -0000	1.24.2.3
@@ -4,7 +4,7 @@
   @author Gustaf Neumann
   @cvs-id $Id$
 } -query {
-  {jsGraph 0}
+  {jsGraph 1}
 } -properties {
   title:onevalue
   context:onevalue
@@ -101,78 +101,113 @@
 
 
 if {$jsGraph} {
-  # use javascript graphics
-  template::head::add_script -type text/javascript -src /resources/xotcl-request-monitor/diagram/diagram.js
 
-  # draw a graph in form of an html table of with 500 pixels
+  proc js_time {clock} {
+    set year [clock format $clock -format %Y]
+    set month [expr {[string trimleft [clock format $clock -format %N]] - 1}]
+    return "Date.UTC($year, $month, [clock format $clock -format {%d, %H, %M, %S}], 0)"
+  }
+
+  set ::graphCount 0
   proc graph {values label type} {
+    #ns_log notice "values=$values label=$label, type=$type"
 
-    switch $type {
-      "Second" { set delta "D.XGridDelta=10000;\n"  }
-      "Minute" { set delta "D.XGridDelta=600000;\n" }
-      default  { set delta ""}
-    }
-
-    set max 1
-    foreach v $values {if {$v>$max} {set max $v}}
-
     set size  [llength $values]
     if {$size<12} {
       set values [concat [split [string repeat 0 [expr {12-$size}]] ""] $values]
       set size [llength $values]
     }
 
-    set end   [clock format [clock seconds] -format "%Y,%m,%d,%H,%M,%S"]
-    set begin [clock format [clock scan "-$size $type"] -format "%Y,%m,%d,%H,%M,%S"]
-    regsub -all {,0} $begin , begin
-    regsub -all {,0} $end , end
-    #ns_log Notice "begin: $begin, end: $end, $size $type"
+    set begin    [clock scan "-$size $type"]
+    set interval [clock scan "1 $type" -base 0]
+    set graphID "graph[incr ::graphCount]"
 
-    set diagram [subst {<script type="text/javascript">
-      document.open();
-      var D=new Diagram();
-      D.SetFrame(40, 20, 460, 120);
-      D.SetBorder(Date.UTC($begin),Date.UTC($end), -$max*0.03, $max*1.03);
-      D.SetText("$type","", "$label");
-      D.XScale=4;
-      D.YScale=1;
-      $delta
-      D.Font="color:#000000;font-family:Verdana;font-weight:normal;font-size:7pt;line-height:7pt;";
-      D.Draw("", "#004080", false);
-      var i, j, x, y, y0=D.ScreenY(0);
-    }]
+    set i 0
+    set data {}
+    foreach t $values {
+      set js_time [js_time [expr {$begin + $i * $interval}]]
+      lappend data [subst {{x: $js_time, y: $t}}]
+      incr i
+    }
+    #ns_log notice "data=$data"
 
-    #ns_log notice "--- $label $begin ... $end"
+    set series [subst {{
+      showInLegend: false,
+      type: 'areaspline',
+      threshold : null,
+      marker: {
+        enabled: true,
+        radius: 3
+      },
+      tooltip : {
+        valueDecimals : 2
+      },
+      name: '$label',
+      data: \[ [join $data ,] \],
+      fillColor : {
+                    linearGradient : {
+                        x1: 0,
+                        y1: 0,
+                        x2: 0,
+                        y2: 1
+                    },
+                    stops : \[
+                        \[0, Highcharts.getOptions().colors\[0\]\],
+                        \[1, Highcharts.Color(Highcharts.getOptions().colors\[0\]).setOpacity(0).get('rgba')\]
+                    \]
+                }
+    }}]
 
-    set index 0
-    set x "Date.UTC($begin)" 
-    set y [lindex $values 0]
-    foreach v $values {
-      incr index
-      set val [clock format [clock scan "[expr {$index-$size}] $type"] -format "%Y,%m,%d,%H,%M,%S"]
-      #ns_log notice "--- $label $index $val // [expr {$index-$size}] $type = $v"
-      regsub -all {,0} $val , val
-      set x1 "Date.UTC($val)"
-      #ns_log notice "--- X1 = $x1"
-      set y1 $v
-      append diagram [subst {
-	i=D.ScreenX(Date.UTC($val));
-	j=D.ScreenY($v);
-	new Dot(i, j, 2, 2, "#000000", "$v");
-	new Line(D.ScreenX($x),D.ScreenY($y),D.ScreenX($x1),D.ScreenY($y1),"#c0c0c0",1,"");
-      }]
-      set x $x1; set y $y1
-    }
-    append diagram "\ndocument.close();\n</SCRIPT>\n"
-    return "<div style='position:relative;top:0px;height:150px;width:480px'>\n$diagram\n</div>"
+    set diagram [subst {
+    <script>
+    \$('#$graphID').highcharts({
+        chart: {
+            type: 'line'
+        },
+        title: {
+            text: ''
+        },
+        xAxis: {
+            type: 'datetime',
+	    title:  { text: 'Date'},
+        },
+        yAxis: \[{
+          min: 0,
+          title: {
+              text: '$label',
+              align: 'high',
+              offset: 60
+            },
+	    labels: { overflow: 'justify'}
+        }\],
+        plotOptions: {
+            bar: {
+                dataLabels: {
+                    enabled: true
+                }
+            }
+        },
+        credits: {
+            enabled: false
+        },
+        series: \[$series\]
+    });
+    </script>
+    }]
+
+    #ns_log notice diagram=$diagram
+    return [subst {
+      <div id="$graphID" style="min-width: 640px; max-width: 100%; height: 240px; margin: 0 auto"></div>
+      $diagram
+    }]
   }
   
 
 
   proc counterTable {label objlist} {
     foreach {t l} $objlist {
       set trend [throttle trend $t]
-       append text [subst {
+      append text [subst {
 	<tr><td valign='top'>[graph $trend "$label per $l" $l]</td>
 	<td valign='top'>
 	<table><tr><td>Max</td></tr>
@@ -193,6 +228,7 @@
       }
       append text "</table>\n</td></tr>\n"
     }
+    #ns_log notice "counterTable $label $objlist ->\n$text"
     return $text
   }