[perf-web] Don't draw a line between ungrouped points

[Owen Taylor <otaylor src gnome org>]

commit 73aa18420152c5b34139f7914e6f1a840c0878fe
Author: Owen W. Taylor <otaylor fishsoup net>
Date:   Sun Sep 14 15:03:50 2014 -0400

    Don't draw a line between ungrouped points
    
    For the bigger timescale graphs, the line connecting the point helps
    the eye follow trends and implies that the points shown are summarizations
    of a continuous process, but at the day level where no grouping is done,
    they are just confusing and obscure the fact that changes are usually
    noise.

 static/main.js |   57 +++++++++++++++++++++++++++++++------------------------
 1 files changed, 32 insertions(+), 25 deletions(-)
---
diff --git a/static/main.js b/static/main.js
index 0f09543..b50011d 100644
--- a/static/main.js
+++ b/static/main.js
@@ -165,38 +165,45 @@ Chart.prototype.drawTarget = function(targetData) {
         return;
 
     var path;
+    if (theDisplay.loadedGroup != 'none') {
+
+        var polyline = this.polylines[index];
+        if (this.polylines[index] == null) {
+            this.polylines[index] = polyline = createElement("polyline");
+            polyline.setAttribute("stroke", strokeStyles[index % strokeStyles.length]);
+            polyline.setAttribute("fill", "none");
+            this.chartData.appendChild(polyline);
+        }
 
-    var polyline = this.polylines[index];
-    if (this.polylines[index] == null) {
-        this.polylines[index] = polyline = createElement("polyline");
-        polyline.setAttribute("stroke", strokeStyles[index % strokeStyles.length]);
-        polyline.setAttribute("fill", "none");
-        this.chartData.appendChild(polyline);
-    }
+        path = "";
 
-    path = "";
+        // Start at the point *before* the first in-range point
+        var i;
+        for (i = 0; i < 2 * values.length; i += 2) {
+            var x = this.x(values.data[i]);
+            if (x >= 0) {
+                i = Math.max(i - 2, 0);
+                break;
+            }
+        }
 
-    // Start at the point *before* the first in-range point
-    var i;
-    for (i = 0; i < 2 * values.length; i += 2) {
-        var x = this.x(values.data[i]);
-        if (x >= 0) {
-            i = Math.max(i - 2, 0);
-            break;
+        // Then continue to first point past the range
+        for (; i < 2 * values.length; i += 2) {
+            var x = this.x(values.data[i]);
+            var y = this.y(values.data[i + 1])
+            path += x + "," + y + " ";
+            if (x >= this.bodyWidth)
+                break;
         }
-    }
 
-    // Then continue to first point past the range
-    for (; i < 2 * values.length; i += 2) {
-        var x = this.x(values.data[i]);
-        var y = this.y(values.data[i + 1])
-        path += x + "," + y + " ";
-        if (x >= this.bodyWidth)
-            break;
+        polyline.setAttribute("points", path);
+    } else {
+        if (this.polylines[index] != null) {
+            this.chartData.removeChild(this.polylines[index]);
+            delete this.polylines[index];
+        }
     }
 
-    polyline.setAttribute("points", path);
-
     var pointPath = this.pointPaths[index];
     if (this.pointPaths[index] == null) {
         this.pointPaths[index] = pointPath = createElement("path");