Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

Some more tweaks to the hints. Don't let the hint go off the right si…

…de of the graph (and so possibly out of the browser viewport), switch it to the left side of the cursor when you get to close to the right.

Also a couple other tweaks. Adding a borderColor property to hints as well.
  • Loading branch information...
commit 7549cdc26196b02373972b1f1c233404442bfda6 1 parent b61d0af
Ryan Funduk authored July 28, 2008

Showing 1 changed file with 19 additions and 14 deletions. Show diff stats Hide diff stats

  1. 33  jquery.flot.js
33  jquery.flot.js
@@ -103,8 +103,9 @@ BOTTOM_SIDE_BUFFER = 5;
103 103
                 showSeriesLabel: true,
104 104
                 labelFormatter: defaultLabelFormatter,
105 105
                 hintFormatter: defaultHintFormatter,
106  
-                backgroundColor: "black", // null means auto-detect
107  
-                backgroundOpacity: 0.1 // set to 0 to avoid background
  106
+                backgroundColor: "#DDD", // null means auto-detect
  107
+                backgroundOpacity: 0.7, // set to 0 to avoid background
  108
+                borderColor: "#BBB" // set to 'transparent' for none
108 109
             },
109 110
             selection: {
110 111
                 mode: null, // one of null, "x", "y" or "xy"
@@ -138,8 +139,6 @@ BOTTOM_SIDE_BUFFER = 5;
138 139
         this.getPlotOffset = function() { return plotOffset; };
139 140
         this.getData = function() { return series; };
140 141
         this.getAxes = function() { return { xaxis: xaxis, yaxis: yaxis }; };
141  
-        this.hintDiv = function() { return hintDiv; }
142  
-        this.hintBackground = function(){ return hintBackground; }
143 142
         
144 143
         // initialize
145 144
         parseOptions(options_);
@@ -147,6 +146,8 @@ BOTTOM_SIDE_BUFFER = 5;
147 146
         constructCanvas();
148 147
         setupGrid();
149 148
         draw();
  149
+        // kill hints and highlighted points when the mouse leaves the graph
  150
+        if (options.grid.hoverable) { $(target).mouseout(cleanup); }
150 151
 
151 152
         function setData(d) {
152 153
             series = parseData(d);
@@ -1655,7 +1656,7 @@ BOTTOM_SIDE_BUFFER = 5;
1655 1656
                 result.selected = findSelectedItem(result.raw.x, result.raw.y);
1656 1657
                 
1657 1658
                 // display the tooltip/hint if requested
1658  
-                if (result.selected && result.selected.data.hints.show) {
  1659
+                if (!$.browser.msie && result.selected && result.selected.data.hints.show) {
1659 1660
                     showHintDiv(result.selected.x,
1660 1661
                                 result.selected.y,
1661 1662
                                 result.selected.data);
@@ -1918,13 +1919,14 @@ BOTTOM_SIDE_BUFFER = 5;
1918 1919
             
1919 1920
                 if (data.hints.showSeriesLabel && data.label) {
1920 1921
                     var label = data.hints.labelFormatter(data.label);
1921  
-                    fragments.push('<td class="legendLabel" style="padding-left:4px">' + label + '</td>');
  1922
+                    fragments.push('<td class="legendLabel" style="padding: 0px 4px">' + label + '</td>');
1922 1923
                 }
1923  
-                fragments.push('<td class="hintData" style="padding-left:4px"></td>');
  1924
+                fragments.push('<td class="hintData" style="padding-left: 4px;"></td>');
1924 1925
                 fragments.push('</tr>');
1925 1926
                 fragments.push('</tbody>');
1926  
-            
1927  
-                hintDiv = $('<div class="plot-hint" style="z-index:5;position:absolute;top:0px;left:0px;display:none;"></div>').appendTo(hintWrapper);
  1927
+                
  1928
+                hintDiv = $('<div class="plot-hint" style="border: 1px solid ' + options.hints.borderColor +
  1929
+                            ';padding: 1px;z-index:5;position:absolute;top:1px;left:1px;display:none;"></div>').appendTo(hintWrapper);
1928 1930
                 var table = $('<table style="font-size:smaller;white-space: nowrap;color:' +
1929 1931
                               options.grid.color + '">' + fragments.join('') + '</table>');
1930 1932
                 hintDiv.append(table);
@@ -1934,17 +1936,20 @@ BOTTOM_SIDE_BUFFER = 5;
1934 1936
                         tmp = options.grid.backgroundColor ? options.grid.backgroundColor : extractColor(hintDiv);
1935 1937
                         c = parseColor(tmp).adjust(null, null, null, 1).toString();
1936 1938
                     }
1937  
-                    hintBackground = $('<div class="hint-background" style="z-index:4;position:absolute;display:none;background-color:' + c + ';"> </div>').appendTo(hintWrapper).css('opacity', data.hints.backgroundOpacity);
  1939
+                    hintBackground = $('<div class="hint-background" style="padding: 2px;z-index:4;position:absolute;display:none;background-color:' + c + ';"> </div>').appendTo(hintWrapper).css('opacity', data.hints.backgroundOpacity);
1938 1940
                 }
1939 1941
             
1940 1942
                 var hintDataContainer = hintDiv.find('.hintData');
1941 1943
                 $(hintDataContainer).html(data.hints.hintFormatter( x, y ));
1942 1944
             }
1943 1945
 
1944  
-            hintDiv.css({ left: lastMousePos.pageX - offset.left + 15,
  1946
+            leftEdge = lastMousePos.pageX - offset.left + 15;
  1947
+            if (hintDiv.width() + leftEdge > target.width()) {
  1948
+                leftEdge = leftEdge - 30 - hintDiv.width();
  1949
+            }
  1950
+            hintDiv.css({ left: leftEdge,
1945 1951
                           top: lastMousePos.pageY - offset.top + 15 }).show();
1946  
-
1947  
-            hintBackground.css({ left: lastMousePos.pageX - offset.left + 15,
  1952
+            hintBackground.css({ left: leftEdge,
1948 1953
                                  top: lastMousePos.pageY - offset.top + 15,
1949 1954
                                  width: hintDiv.width(),
1950 1955
                                  height: hintDiv.height() }).show();
@@ -1957,7 +1962,7 @@ BOTTOM_SIDE_BUFFER = 5;
1957 1962
         
1958 1963
         function defaultHintFormatter(x, y) {
1959 1964
             return "<strong>x:</strong> " + x.toFixed(2) +
1960  
-                   " <strong>y:</strong> " + y.toFixed(2);
  1965
+                   "<br/><strong>y:</strong> " + y.toFixed(2);
1961 1966
         }
1962 1967
         
1963 1968
         function defaultLabelFormatter(label) {

0 notes on commit 7549cdc

Please sign in to comment.
Something went wrong with that request. Please try again.