Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Update the version number in the file (:/) and make a couple little c…

…hanges (to the API!) that make things make more sense. This is in preparation for a 'major' reworking of the code to clean up some of the long-time warts of the library. This will be done in the dev branch and master will be 1.0 once it's done.
  • Loading branch information...
commit 12412ec1cf841fdcf0485dca48a4a38c2e1e443f 1 parent 0e9e818
@rfunduk rfunduk authored
View
53 API.txt
@@ -411,8 +411,8 @@ Customizing the data series
hints: {
showColorBox: boolean
showSeriesLabel: boolean
- labelFormatter: fn: or leave it alone to get the defalt
- hintFormatter: fn: or leave it alone to get the defalt
+ labelFormatter: fn or null
+ hintFormatter: fn or null
backgroundColor: color or null (for auto-detect)
backgroundOpacity: number
borderColor: color (including 'transparent')
@@ -467,22 +467,27 @@ against another city, etc).
"hints" are essentially tooltips that get formatted according to the format
function assigned to either an individual series or to all hints. The function
-should return a string. Here are the default formatters:
-
- function defaultHintFormatter(x, y) {
- return "<strong>x:</strong> " + x.toFixed(2) +
- " <strong>y:</strong> " + y.toFixed(2);
- }
-
- function defaultLabelFormatter(label) {
- return "<span style='font-size:1.2em;'>" + label + "</span>";
- }
+should return a string. You could define a formatter like so:
+
+ function myHintFormatter(x, y, data) {
+ return "<table><tr><td><strong>X</strong> =</td>" +
+ "<td>" + x + "</td></tr><tr>" +
+ "<td><strong>Y</strong> =</td>" +
+ "<td>" + y + "</td></tr></table>";
+ }
+
+ // ... later
+ options.hints.hintFormatter = myHintFormatter;
+
+You have access to the data which is the current series you're on, so you
+can use that however you like (get access to the data points, whether bars
+are enabled, what color the series is, and so on).
-'defaultHintFormatter' is the formatter for the actual datapoint.
-'defaultLabelFormatter' is the formatter for the series label. 'showColorBox'
-is whether the color of the series will appear in the tooltip like it does
-in the legend. 'showSeriesLabel' is whether the label of the series is inserted
-into the hint at all.
+'hintFormatter' is the formatter for the actual datapoint. 'labelFormatter'
+is the formatter for the series label. 'showColorBox' is whether the color
+of the series will appear in the tooltip like it does in the legend.
+'showSeriesLabel' is whether the label of the series is inserted into the
+hint at all.
Customizing the grid
@@ -498,9 +503,9 @@ Customizing the grid
borderWidth: number
clickable: boolean
hoverable: boolean
- mouseOverHighlight: color or null
- mouseOverFill: color (default 'white')
- mouseOverHighlightRadius: number or null
+ hoverColor: color or null for the same color as the series
+ hoverFill: color (default 'white')
+ hoverRadius: number or null for the same as the series (default 3)
mouseCatchingArea: number (default 15)
}
@@ -597,10 +602,10 @@ The matching area default is a 15px radius. If you need to change it you can
override this setting with options.grid.mouseCatchingArea = pixels.
If you're going to be highlighting hovered points and such then another useful
-option is 'mouseOverHighlightRadius' which determines the size of the 'fake'
-datapoint that gets drawn on the graph (think Google Analytics where hovered
-points 'pop' a little and grow as you hover over them). If null, it will use
-the default series size (3px).
+option is 'hoverRadius' which determines the size of the 'fake' datapoint
+that gets drawn on the graph (think Google Analytics where hovered points
+'pop' a little and grow as you hover over them). If null, it will use the
+default series size (3px).
If you need to mark some specific value on the x- or y-axis, you can define
markers that will be drawn on the grid.
View
4 examples/interacting.html
@@ -34,8 +34,8 @@
grid: {
clickable: true,
hoverable: true,
- mouseOverHighlight: "black",
- mouseOverHighlightRadius: 5
+ hoverFill: '#444',
+ hoverRadius: 5
}
});
View
2  examples/selection.html
@@ -75,7 +75,7 @@
legend: { noColumns: 2 },
xaxis: { tickDecimals: 0 },
yaxis: { min: 0 },
- selection: { mode: "x", glob: true }
+ selection: { mode: "x", snapToTicks: true }
};
var placeholder = $("#placeholder");
View
3  examples/setting-options.html
@@ -53,11 +53,12 @@
max: 2
},
grid: {
+ showLines: false,
markers: [ { value: 0,
width: 3,
color: "#BBB",
axis: 'x' } ],
- backgroundColor: "#fffaff"
+ backgroundColor: "#CCC"
}
});
});
View
28 jquery.flot.js
@@ -1,5 +1,5 @@
/*
- * Flot v0.7.0
+ * Flot v0.8.2
*
* Released under the MIT license.
*/
@@ -92,9 +92,9 @@
borderWidth: 2,
clickable: null,
hoverable: false,
- mouseOverHighlight: null,
- mouseOverFill: '#FFF',
- mouseOverHighlightRadius: null,
+ hoverColor: null,
+ hoverFill: null,
+ hoverRadius: null,
mouseCatchingArea: 15,
coloredAreas: null, // array of { x1, y1, x2, y2 } or fn: plot area -> areas
coloredAreasColor: "#f4f4f4"
@@ -110,7 +110,7 @@
borderColor: "#BBB" // set to 'transparent' for none
},
selection: {
- glob: false, // boolean for if we should snap to ticks on selection
+ snapToTicks: false, // boolean for if we should snap to ticks on selection
mode: null, // one of null, "x", "y" or "xy"
color: "#e8cfac"
},
@@ -1846,7 +1846,7 @@
pos.x = e.pageX - offset.left - plotOffset.left;
pos.x = Math.min(Math.max(0, pos.x), plotWidth);
- if (options.selection.glob) {
+ if (options.selection.snapToTicks) {
// find our current location in terms of the xaxis
var x = xaxis.min + pos.x / hozScale;
@@ -1939,18 +1939,18 @@
else { lastMarker = marker; }
// draw a marker on the graph over the point that the mouse is hovering over
- if (marker && options.grid.mouseOverHighlight) {
- var fill = options.grid.mouseOverHighlight == 'transparent' ?
- 'transparent' :
- options.grid.mouseOverFill;
-
+ if (marker) {
+ var color = options.grid.hoverColor ? options.grid.hoverColor : marker.data.color;
+ var fill = options.grid.hoverFill ? options.grid.hoverFill : 'white';
+ var radius = options.grid.hoverRadius ? options.grid.hoverRadius : marker.data.points.radius;
+
var temp_series = {
shadowSize: options.shadowSize,
lines: { show: false },
points: $.extend(true, options.points,
{ fillColor: fill,
- radius: options.grid.mouseOverHighlightRadius }),
- color: options.grid.mouseOverHighlight,
+ radius: radius }),
+ color: color,
data: [[marker.x, marker.y]]
};
draw();
@@ -2042,7 +2042,7 @@
}
var hintDataContainer = hintDiv.find('.hintData');
- $(hintDataContainer).html(data.hints.hintFormatter( x, y ));
+ $(hintDataContainer).html(data.hints.hintFormatter(x, y, data));
}
leftEdge = lastMousePos.pageX - offset.left + 15;
Please sign in to comment.
Something went wrong with that request. Please try again.