Use real histograms, not dot line plots, for range slider facets.

git-svn-id: http://google-refine.googlecode.com/svn/trunk@29 7d457c2a-affb-35e4-300a-418c747d4874

src/main/webapp/scripts/project/range-facet.js

@@ -173,16 +173,16 @@ RangeFacet.prototype.render = function() {
     } else {
         var a = [];
         for (var i = 0; i < this._bins.length; i++) {
-            a.push(Math.round(100 * this._bins[i] / max));
+            var v = Math.ceil(100 * this._bins[i] / max);
+            a.push(v == 0 ? 0 : Math.max(2, v)); // use min 2 to make sure something shows up
         }
         
         this._histogramDiv.empty().show();
         $('<img />').attr("src", 
             "http://chart.apis.google.com/chart?" + [
-                "cht=ls",
                 "chs=" + this._histogramDiv[0].offsetWidth + "x50",
-                "chm=o,ff6600,0,-1,3",
+                //"cht=ls&chm=o,ff6600,0,-1,3&chls=0", // use for line plot
-                "chls=0",
+                "cht=bvs&chbh=r,0&chco=000088", // use for histogram
                 "chd=t:" + a.join(",")
             ].join("&")
         ).appendTo(this._histogramDiv);

src/main/webapp/styles/browsing.css

@@ -73,6 +73,11 @@ a.facet-choice-link:hover {
 }
 .facet-range-histogram {
     margin-bottom: 10px;
+    overflow: hidden;
+}
+.facet-range-histogram img {
+    position: relative;
+    left: -2px;
 }
 .facet-range-slider {
 }

src/main/webapp/styles/history.css

@@ -5,6 +5,7 @@
     width: 200px;
     background: #fffee0;
     border: 1px solid #ccc;
+    z-index: 10;
 }
 .history-panel h3 {
     margin: 0;