Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

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
Ryan Funduk rfunduk authored
53 API.txt
@@ -411,8 +411,8 @@ Customizing the data series
411 411 hints: {
412 412 showColorBox: boolean
413 413 showSeriesLabel: boolean
414   - labelFormatter: fn: or leave it alone to get the defalt
415   - hintFormatter: fn: or leave it alone to get the defalt
  414 + labelFormatter: fn or null
  415 + hintFormatter: fn or null
416 416 backgroundColor: color or null (for auto-detect)
417 417 backgroundOpacity: number
418 418 borderColor: color (including 'transparent')
@@ -467,22 +467,27 @@ against another city, etc).
467 467
468 468 "hints" are essentially tooltips that get formatted according to the format
469 469 function assigned to either an individual series or to all hints. The function
470   -should return a string. Here are the default formatters:
471   -
472   - function defaultHintFormatter(x, y) {
473   - return "<strong>x:</strong> " + x.toFixed(2) +
474   - " <strong>y:</strong> " + y.toFixed(2);
475   - }
476   -
477   - function defaultLabelFormatter(label) {
478   - return "<span style='font-size:1.2em;'>" + label + "</span>";
479   - }
  470 +should return a string. You could define a formatter like so:
  471 +
  472 + function myHintFormatter(x, y, data) {
  473 + return "<table><tr><td><strong>X</strong> =</td>" +
  474 + "<td>" + x + "</td></tr><tr>" +
  475 + "<td><strong>Y</strong> =</td>" +
  476 + "<td>" + y + "</td></tr></table>";
  477 + }
  478 +
  479 + // ... later
  480 + options.hints.hintFormatter = myHintFormatter;
  481 +
  482 +You have access to the data which is the current series you're on, so you
  483 +can use that however you like (get access to the data points, whether bars
  484 +are enabled, what color the series is, and so on).
480 485
481   -'defaultHintFormatter' is the formatter for the actual datapoint.
482   -'defaultLabelFormatter' is the formatter for the series label. 'showColorBox'
483   -is whether the color of the series will appear in the tooltip like it does
484   -in the legend. 'showSeriesLabel' is whether the label of the series is inserted
485   -into the hint at all.
  486 +'hintFormatter' is the formatter for the actual datapoint. 'labelFormatter'
  487 +is the formatter for the series label. 'showColorBox' is whether the color
  488 +of the series will appear in the tooltip like it does in the legend.
  489 +'showSeriesLabel' is whether the label of the series is inserted into the
  490 +hint at all.
486 491
487 492
488 493 Customizing the grid
@@ -498,9 +503,9 @@ Customizing the grid
498 503 borderWidth: number
499 504 clickable: boolean
500 505 hoverable: boolean
501   - mouseOverHighlight: color or null
502   - mouseOverFill: color (default 'white')
503   - mouseOverHighlightRadius: number or null
  506 + hoverColor: color or null for the same color as the series
  507 + hoverFill: color (default 'white')
  508 + hoverRadius: number or null for the same as the series (default 3)
504 509 mouseCatchingArea: number (default 15)
505 510 }
506 511
@@ -597,10 +602,10 @@ The matching area default is a 15px radius. If you need to change it you can
597 602 override this setting with options.grid.mouseCatchingArea = pixels.
598 603
599 604 If you're going to be highlighting hovered points and such then another useful
600   -option is 'mouseOverHighlightRadius' which determines the size of the 'fake'
601   -datapoint that gets drawn on the graph (think Google Analytics where hovered
602   -points 'pop' a little and grow as you hover over them). If null, it will use
603   -the default series size (3px).
  605 +option is 'hoverRadius' which determines the size of the 'fake' datapoint
  606 +that gets drawn on the graph (think Google Analytics where hovered points
  607 +'pop' a little and grow as you hover over them). If null, it will use the
  608 +default series size (3px).
604 609
605 610 If you need to mark some specific value on the x- or y-axis, you can define
606 611 markers that will be drawn on the grid.
4 examples/interacting.html
@@ -34,8 +34,8 @@
34 34 grid: {
35 35 clickable: true,
36 36 hoverable: true,
37   - mouseOverHighlight: "black",
38   - mouseOverHighlightRadius: 5
  37 + hoverFill: '#444',
  38 + hoverRadius: 5
39 39 }
40 40 });
41 41
2  examples/selection.html
@@ -75,7 +75,7 @@
75 75 legend: { noColumns: 2 },
76 76 xaxis: { tickDecimals: 0 },
77 77 yaxis: { min: 0 },
78   - selection: { mode: "x", glob: true }
  78 + selection: { mode: "x", snapToTicks: true }
79 79 };
80 80
81 81 var placeholder = $("#placeholder");
3  examples/setting-options.html
@@ -53,11 +53,12 @@
53 53 max: 2
54 54 },
55 55 grid: {
  56 + showLines: false,
56 57 markers: [ { value: 0,
57 58 width: 3,
58 59 color: "#BBB",
59 60 axis: 'x' } ],
60   - backgroundColor: "#fffaff"
  61 + backgroundColor: "#CCC"
61 62 }
62 63 });
63 64 });
28 jquery.flot.js
... ... @@ -1,5 +1,5 @@
1 1 /*
2   - * Flot v0.7.0
  2 + * Flot v0.8.2
3 3 *
4 4 * Released under the MIT license.
5 5 */
@@ -92,9 +92,9 @@
92 92 borderWidth: 2,
93 93 clickable: null,
94 94 hoverable: false,
95   - mouseOverHighlight: null,
96   - mouseOverFill: '#FFF',
97   - mouseOverHighlightRadius: null,
  95 + hoverColor: null,
  96 + hoverFill: null,
  97 + hoverRadius: null,
98 98 mouseCatchingArea: 15,
99 99 coloredAreas: null, // array of { x1, y1, x2, y2 } or fn: plot area -> areas
100 100 coloredAreasColor: "#f4f4f4"
@@ -110,7 +110,7 @@
110 110 borderColor: "#BBB" // set to 'transparent' for none
111 111 },
112 112 selection: {
113   - glob: false, // boolean for if we should snap to ticks on selection
  113 + snapToTicks: false, // boolean for if we should snap to ticks on selection
114 114 mode: null, // one of null, "x", "y" or "xy"
115 115 color: "#e8cfac"
116 116 },
@@ -1846,7 +1846,7 @@
1846 1846 pos.x = e.pageX - offset.left - plotOffset.left;
1847 1847 pos.x = Math.min(Math.max(0, pos.x), plotWidth);
1848 1848
1849   - if (options.selection.glob) {
  1849 + if (options.selection.snapToTicks) {
1850 1850 // find our current location in terms of the xaxis
1851 1851 var x = xaxis.min + pos.x / hozScale;
1852 1852
@@ -1939,18 +1939,18 @@
1939 1939 else { lastMarker = marker; }
1940 1940
1941 1941 // draw a marker on the graph over the point that the mouse is hovering over
1942   - if (marker && options.grid.mouseOverHighlight) {
1943   - var fill = options.grid.mouseOverHighlight == 'transparent' ?
1944   - 'transparent' :
1945   - options.grid.mouseOverFill;
1946   -
  1942 + if (marker) {
  1943 + var color = options.grid.hoverColor ? options.grid.hoverColor : marker.data.color;
  1944 + var fill = options.grid.hoverFill ? options.grid.hoverFill : 'white';
  1945 + var radius = options.grid.hoverRadius ? options.grid.hoverRadius : marker.data.points.radius;
  1946 +
1947 1947 var temp_series = {
1948 1948 shadowSize: options.shadowSize,
1949 1949 lines: { show: false },
1950 1950 points: $.extend(true, options.points,
1951 1951 { fillColor: fill,
1952   - radius: options.grid.mouseOverHighlightRadius }),
1953   - color: options.grid.mouseOverHighlight,
  1952 + radius: radius }),
  1953 + color: color,
1954 1954 data: [[marker.x, marker.y]]
1955 1955 };
1956 1956 draw();
@@ -2042,7 +2042,7 @@
2042 2042 }
2043 2043
2044 2044 var hintDataContainer = hintDiv.find('.hintData');
2045   - $(hintDataContainer).html(data.hints.hintFormatter( x, y ));
  2045 + $(hintDataContainer).html(data.hints.hintFormatter(x, y, data));
2046 2046 }
2047 2047
2048 2048 leftEdge = lastMousePos.pageX - offset.left + 15;

0 comments on commit 12412ec

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