Permalink
Browse files

Completed code-style cleanups. Made a few tweaks ('plotselected' inst…

…ead of just 'selected', etc). A few example tweaks mostly related to these changes. Next is finalizing the examples.
  • Loading branch information...
1 parent 9d55735 commit a7f3b6c18590a00c6e41f21f79fdee1184f838ba @rfunduk committed Nov 18, 2008
Showing with 891 additions and 1,067 deletions.
  1. +17 −21 API.txt
  2. +0 −145 NEWS.txt
  3. +4 −4 examples/big-data.html
  4. +4 −4 examples/interacting.html
  5. +1 −1 examples/real-data.html
  6. +1 −1 examples/selection.html
  7. +2 −2 examples/visitors.html
  8. +2 −2 examples/zooming.html
  9. +860 −887 jquery.flot.js
View
38 API.txt
@@ -28,13 +28,13 @@ The data is an array of data series:
[ series1, series2, ... ]
A series can either be raw data or an object with properties. The raw
-data format is an array of points*:
+data format should follow the format:
- [ [x1, y1], [x2, y2], ... ]
+ [ { x: x1, y: y1 }, { x: x2, y: y2 }, ... ]
-E.g.
+You can also use the original dataformat and it will be normalized for you:
- [ [1, 3], [2, 14.01], [3.5, 3.14] ]
+ [ [x1, y1], [x2, y2], ... ]
Note that to simplify the internal logic in Flot both the x and y
values must be numbers, even if specifying time series (see below for
@@ -90,13 +90,8 @@ override the default options for the plot for that data series.
Here's a complete example of a simple data specification:
[ { label: "Foo", data: [ [10, 1], [17, -14], [30, 5] ] },
- { label: "Bar", data: [ [11, 13], [19, 11], [30, -7] ] } ]
-
+ { label: "Bar", data: [ { x: 11, y: 13 }, { x: 19, y: 11 }, { x: 30, y: -7 } ] } ]
-*: If the data series has 'deltas' enabled then you must not only
- specify the x and y points of the data but also the delta to be used
- for this data point, eg. [x,y,d] rather than [x,y] (see section
- below on delta series'.
Plot Options
------------
@@ -359,7 +354,8 @@ specifiers are supported
You can customize the month names with the "monthNames" option. For
instance, for Danish you might specify:
- monthName: ["jan", "feb", "mar", "apr", "maj", "jun", "jul", "aug", "sep", "okt", "nov", "dec"]
+ monthName: [ "jan", "feb", "mar", "apr", "maj", "jun", "jul", "aug",
+ "sep", "okt", "nov", "dec"]
If everything else fails, you can control the formatting by specifying
a custom tick formatter function as usual. Here's a simple example
@@ -549,13 +545,13 @@ An example function might look like this:
If you set "clickable" to true, the plot will listen for click events
-on the plot area and fire a "plotclick" event on the placeholder with
+on the plot area and fire a 'plotclick' event on the placeholder with
an object { x: number, y: number } as parameter when one occurs. You can
use it like this:
plot = $.plot($("#placeholder"), [ d ], { grid: { clickable: true } });
- $("#placeholder").bind("plotclick", function (e, result) {
+ $("#placeholder").bind('plotclick', function (e, result) {
// result.selected.x and result.selected.y are the datapoint matched
// and the raw click locations are in result.raw.x/y
});
@@ -566,10 +562,10 @@ less continuously while your mouse travels. You can use it like this:
plot = $.plot($('#placeholder'), [d], { grid: { hoverable: true } } );
$('#placeholder').bind('plotmouseover', function(e, result) {
// result.selected contains the matched point and result.raw
- // contains the raw mouse co-ordinates, like plotclick
+ // contains the raw mouse co-ordinates, like click
} );
-Both of these handlers can benefit from the new function 'highlightSelected'
+Both of these handlers can benefit from the new function 'highlight'
which take a datapoint of the form { x: xval, y: yval } and draws 'fake'
points on the graph at that location. To do this you must specify some options
for how you want it displayed, eg:
@@ -578,7 +574,7 @@ for how you want it displayed, eg:
options.grid.mouseOverFill = "red";
// and then call
- plot.highlightSelected( result.selected );
+ plot.highlight( result.selected );
... will cause highlighted points (when hovering or clicking) to be drawn
with black borders and a red center. If you specify a mouseOverHighlight
@@ -587,7 +583,7 @@ points on the graph). Note that this also means that you could pass
result.raw instead to draw a point 'in the middle of nowhere', or any other
coordinates:
- plot.highlightSelected({ x: result.selected.x, y: result.selected.y + 1 });
+ plot.highlight({ x: result.selected.x, y: result.selected.y + 1 });
Keep in mind one major limitation of the hovering system. It can be _very_
slow with lots of data. To curb this problem, upon the initial generation
@@ -636,11 +632,11 @@ You enable selection support by setting the mode to one of "x", "y" or
similarly for "y" mode. For "xy", the selection becomes a rectangle
where both ranges can be specified. "color" is color of the selection.
-When selection support is enabled, a "selected" event will be emitted
+When selection support is enabled, a 'plotselected' event will be emitted
on the DOM element you passed into the plot function. The event
handler gets one extra parameter with the area selected, like this:
- placeholder.bind("selected", function(event, area) {
+ placeholder.bind('plotselected', function(event, area) {
// area selected is area.x1 to area.x2 and area.y1 to area.y2
});
@@ -667,9 +663,9 @@ members:
setSelection({ x1: 0, x2: 10, y1: 40, y2: 60});
- setSelection will trigger the "selected" event when called so you
+ setSelection will trigger the 'plotselected' event when called so you
may have to do a bit of shortcircuiting to prevent an eternal loop
- if you invoke the method inside the "selected" handler.
+ if you invoke the method inside the 'plotselected' handler.
- getCanvas()
View
145 NEWS.txt
@@ -1,145 +0,0 @@
-*** Giving up updating this changelog in favor of just following the
- commits on github. This file will be removed in the future.
-
-Flot 0.5
---------
-
-Fixed a bug where negative bars wouldn't get drawn if they were
-below the min-y.
-
-Moved the right border of the graph in 10px from the right side of
-the containing div so that points don't get chopped in half when
-drawn there.
-
-Added a 'deltas' graph type which takes 3 values rather than 2 and draws
-a 'delta' line from the y to the extra value.
-
-Added the ability to remove the grid and axis labels (for showing
-inline graphs or similar).
-
-Fixed a bug where the legend, when placed on the right side of the graph,
-wasn't indented the proper amount (it was using the bottom offset rather
-than the left offset).
-
-Added the ability to draw markers on the graph at arbitrary x or y
-values without additional datasets.
-
-Added functionality for graph hovering and clicking. Hovering over the
-graph and determining the hovered point is quite processor intensive
-so if hovering is enabled the data will be sorted upon graph generation
-and then only a subset of points are scanned when hovering. This is still
-pretty slow especially in internet explorer. The sorting can be disabled
-entirely with options.sortData = false, if desired.
-
-API changes: timestamps in time mode are now displayed according to
-UTC instead of the time zone of the visitor. This affects the way the
-timestamps should be input; you'll probably have to offset the
-timestamps according to your local time zone. It also affects any
-custom date handling code (which basically now should use the
-equivalent UTC date mehods, e.g. .setUTCMonth() instead of
-.setMonth().
-
-Added support for specifying the size of tick labels (axis.labelWidth,
-axis.labelHeight). Useful for specifying a max label size to keep
-multiple plots aligned.
-
-The "fill" option can now be a number that specifies the opacity of
-the fill.
-
-Fixed a bug in calculating spacing around the plot (reported by
-timothytoe). Fixed a bug in finding max values for all-negative data
-sets. Prevent the possibility of eternal looping in tick calculations.
-
-
-Flot 0.4
---------
-
-API changes: deprecated axis.noTicks in favor of just specifying the
-number as axis.ticks. So "xaxis: { noTicks: 10 }" becomes
-"xaxis: { ticks: 10 }"
-
-Time series support. Specify axis.mode: "time", put in Javascript
-timestamps as data, and Flot will automatically spit out sensible
-ticks. Take a look at the two new examples. The format can be
-customized with axis.timeformat and axis.monthNames, or if that fails
-with axis.tickFormatter.
-
-Support for colored background areas via grid.coloredAreas. Specify an
-array of { x1, y1, x2, y2 } objects or a function that returns these
-given { xmin, xmax, ymin, ymax }.
-
-More members on the plot object (report by Chris Davies and others).
-"getData" for inspecting the assigned settings on data series (e.g.
-color) and "setData", "setupGrid" and "draw" for updating the contents
-without a total replot.
-
-The default number of ticks to aim for is now dependent on the size of
-the plot in pixels. Support for customizing tick interval sizes
-directly with axis.minTickSize and axis.tickSize.
-
-Cleaned up the automatic axis scaling algorithm and fixed how it
-interacts with ticks. Also fixed a couple of tick-related corner case
-bugs (one reported by mainstreetmark, another reported by timothytoe).
-
-The option axis.tickFormatter now takes a function with two
-parameters, the second parameter is an optional object with
-information about the axis. It has min, max, tickDecimals, tickSize.
-
-Added support for segmented lines (based on patch from Michael
-MacDonald) and for ignoring null and bad values (suggestion from Nick
-Konidaris and joshwaihi).
-
-Added support for changing the border width (joebno and safoo).
-Label colors can be changed via CSS by selecting the tickLabel class.
-
-Fixed a bug in handling single-item bar series (reported by Emil
-Filipov). Fixed erratic behaviour when interacting with the plot
-with IE 7 (reported by Lau Bech Lauritzen). Prevent IE/Safari text
-selection when selecting stuff on the canvas.
-
-
-
-Flot 0.3
---------
-
-This is mostly a quick-fix release because jquery.js wasn't included
-in the previous zip/tarball.
-
-Support clicking on the plot. Turn it on with grid: { clickable: true },
-then you get a "plotclick" event on the graph placeholder with the
-position in units of the plot.
-
-Fixed a bug in dealing with data where min = max, thanks to Michael
-Messinides.
-
-Include jquery.js in the zip/tarball.
-
-
-Flot 0.2
---------
-
-Added support for putting a background behind the default legend. The
-default is the partly transparent background color. Added
-backgroundColor and backgroundOpacity to the legend options to control
-this.
-
-The ticks options can now be a callback function that takes one
-parameter, an object with the attributes min and max. The function
-should return a ticks array.
-
-Added labelFormatter option in legend, useful for turning the legend
-labels into links.
-
-Fixed a couple of bugs.
-
-The API should now be fully documented.
-
-Patch from Guy Fraser to make parts of the code smaller.
-
-API changes: Moved labelMargin option to grid from x/yaxis.
-
-
-Flot 0.1
---------
-
-First public release.
View
@@ -151,7 +151,7 @@
var internalSelection = false;
// re-plot the chart after the selected event
- $("#placeholder").bind( "selected", function( event, area ) {
+ $("#placeholder").bind( 'plotselected', function( event, area ) {
// clamp the zooming to prevent eternal zoom
if( area.x2 - area.x1 < 0.00001 ) area.x2 = area.x1 + 0.00001;
if( area.y2 - area.y1 < 0.00001 ) area.y2 = area.y1 + 0.00001;
@@ -168,13 +168,13 @@
} );
// show a little colored on the hovered datapoint
- $('#placeholder').bind( "plotmousemove", function( e, pos ) {
+ $('#placeholder').bind( 'plotmousemove', function( e, pos ) {
if( !pos.selected ) { return; }
- plot.highlightSelected( pos.selected );
+ plot.highlight( pos.selected );
} );
// Set the selection area on the plot to what was selected on the overview
- $("#overview").bind( "selected", function( e, area ) {
+ $("#overview").bind( 'plotselected', function( e, area ) {
if( internalSelection ) return;
internalSelection = true;
plot.setSelection( area );
@@ -48,17 +48,17 @@
} );
// setup event handlers
- $("#placeholder").bind( "plotclick", function( e, pos ) {
+ $("#placeholder").bind( 'plotclick', function( e, pos ) {
if( !pos.selected ) { return; }
- plot.highlightSelected( pos.selected );
+ plot.highlight( pos.selected );
x = pos.selected.x.toFixed( 2 );
y = pos.selected.y.toFixed( 2 );
$("#result").text( 'You clicked on (' + x + ', ' + y + ')' );
} );
- $("#placeholder").bind( "plotmousemove", function( e, pos ) {
+ $("#placeholder").bind( 'plotmousemove', function( e, pos ) {
if( !pos.selected ) { return; }
- plot.highlightSelected( pos.selected );
+ plot.highlight( pos.selected );
} );
});
</script>
View
@@ -48,7 +48,7 @@
$.each( datasets, function( key, val ) { val.color = i++; } );
// insert checkboxes
- var choiceContainer = $(document).append( '<p id="choices">Show:</p>' );
+ var choiceContainer = $('body').append( '<p id="choices">Show:</p>' );
$.each( datasets, function( key, val ) {
choiceContainer.append( '<br/><input type="checkbox" name="' + key +
'" checked="checked" >' + val.label + '</input>' );
View
@@ -90,7 +90,7 @@ <h1>Flot Examples</h1>
<p>
Selections are really useful for zooming. Just re-plot the
chart with min and max values for the axes set to the values
- in the "selected" event triggered. Try enabling the checkbox
+ in the 'plotselected' event triggered. Try enabling the checkbox
below and select a region again.
</p>
View
@@ -68,7 +68,7 @@ <h1>Flot Examples</h1>
// now connect the two
var internalSelection = false;
- $("#placeholder").bind("selected", function (event, area) {
+ $("#placeholder").bind('plotselected', function (event, area) {
// do the zooming
plot = $.plot($("#placeholder"), [d],
$.extend(true, {}, options, {
@@ -82,7 +82,7 @@ <h1>Flot Examples</h1>
internalSelection = false;
});
- $("#overview").bind("selected", function (event, area) {
+ $("#overview").bind('plotselected', function (event, area) {
if (internalSelection)
return;
internalSelection = true;
View
@@ -65,7 +65,7 @@ <h1>Flot Examples</h1>
// now connect the two
var internalSelection = false;
- $("#placeholder").bind("selected", function (event, area) {
+ $("#placeholder").bind('plotselected', function (event, area) {
// clamp the zooming to prevent eternal zoom
if (area.x2 - area.x1 < 0.00001)
area.x2 = area.x1 + 0.00001;
@@ -85,7 +85,7 @@ <h1>Flot Examples</h1>
overview.setSelection(area);
internalSelection = false;
});
- $("#overview").bind("selected", function (event, area) {
+ $("#overview").bind('plotselected', function (event, area) {
if (internalSelection)
return;
internalSelection = true;
Oops, something went wrong.

0 comments on commit a7f3b6c

Please sign in to comment.