svn commit: r991209 [2/10] - in /ofbiz/branches/jquery/framewo
Locked
svn commit: r991209 [2/10] - in /ofbiz/branches/jquery/framewo
 
|
Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/NEWS.txt
URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/NEWS.txt?rev=991209&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/NEWS.txt (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/NEWS.txt Tue Aug 31 14:44:23 2010 @@ -0,0 +1,439 @@ +Flot x.x +-------- + +API changes: + +Multiple axes support. Code using dual axes should be changed from +using x2axis/y2axis in the options to using an array (although +backwards-compatibility hooks are in place). For instance, + + { + xaxis: { ... }, x2axis: { ... }, + yaxis: { ... }, y2axis: { ... } + } + +becomes + + { + xaxes: [ { ... }, { ... } ], + yaxes: [ { ... }, { ... } ] + } + +Note that if you're just using one axis, continue to use the +xaxis/yaxis directly (it now sets the default settings for the +arrays). Plugins touching the axes must be ported to take the extra +axes into account, a couple of helper functions have been added for +that purpose, check the source. + +"tickColor" on the grid options is now deprecated in favour of a +corresponding option on the axes, so { grid: { tickColor: "#000" }} +becomes { xaxis: { tickColor: "#000"}, yaxis: { tickColor: "#000"} }, +but if you just configure a base color Flot will now autogenerate a +tick color by adding transparency. Backwards-compatibility hooks are +in place. + +Changes: + +- Support for specifying a bottom for each point for line charts when + filling them, this means that an arbitrary bottom can be used + instead of just the x axis (based on patches patiently provided by + Roman V. Prikhodchenko). +- New fillbetween plugin that can compute a bottom for a series from + another series, useful for filling areas between lines (see new + example percentiles.html for a use case). +- More predictable handling of gaps for the stacking plugin, now all + undefined ranges are skipped. +- Stacking plugin can stack horizontal bar charts. +- Navigate plugin now redraws the plot while panning instead of only + after the fact (can be disabled by setting the pan.frameRate option + to null), raised by lastthemy (issue 235). +- Date formatter now accepts %0m and %0d to get a zero-padded month or + day (issue raised by Maximillian Dornseif). +- Revamped internals to support an unlimited number of axes, not just + dual (sponsored by Flight Data Services, + www.flightdataservices.com). +- New setting on axes, "tickLength", to control the size of ticks or + turn them off without turning off the labels. +- Axis labels are now put in container divs with classes, for instance + labels in the x axes can be reached via ".xAxis .tickLabel". +- Support for setting the color of an axis (sponsored by Flight Data + Services, www.flightdataservices.com). +- Tick color is now auto-generated as the base color with some + transparency (unless you override it). +- Support for aligning ticks in the axes with "alignTicksWithAxis" to + ensure that they appear next to each other rather than in between, + at the expense of possibly awkward tick steps (sponsored by Flight + Data Services, www.flightdataservices.com). +- Support for customizing the point type through a callback when + plotting points and new symbol plugin with some predefined point + types (sponsored by Utility Data Corporation). + +- New hooks: drawSeries + +Bug fixes: + +- Fixed problem with findNearbyItem and bars on top of each other + (reported by ragingchikn, issue 242). +- Fixed problem with ticks and the border (based on patch from + ultimatehustler69, issue 236). +- Fixed problem with plugins adding options to the series objects. +- Fixed a problem introduced in 0.6 with specifying a gradient with { + brightness: x, opacity: y }. +- Don't use $.browser.msie, check for getContext on the created canvas + element instead and try to use excanvas if it's not found. +- highlight(s, index) was looking up the point in the original s.data + instead of in the computed datapoints array, which breaks with + plugins that modify the datapoints (such as the stacking plugin). + Issue 316 reported by curlypaul924. +- More robust handling of axis from data passed in from getData() + (problem reported by Morgan). +- Fixed problem with turning off bar outline (issue 253, fix by Jordi + Castells). +- Check the selection passed into setSelection in the selection + plugin, to guard against errors when synchronizing plots (fix by Lau + Bech Lauritzen). +- Fix bug in crosshair code with mouseout resetting the crosshair even + if it is locked (fix by Lau Bech Lauritzen). +- Fix bug with points plotting using line width from lines rather than + points. + +Flot 0.6 +-------- + +API changes: + +1. Selection support has been moved to a plugin. Thus if you're +passing selection: { mode: something }, you MUST include the file +jquery.flot.selection.js after jquery.flot.js. This reduces the size +of base Flot and makes it easier to customize the selection as well as +improving code clarity. The change is based on a patch from andershol. + +2. In the global options specified in the $.plot command, +"lines", "points", "bars" and "shadowSize" have been moved to a +sub-object called "series", i.e. + + $.plot(placeholder, data, { lines: { show: true }}) + +should be changed to + + $.plot(placeholder, data, { series: { lines: { show: true }}}) + +All future series-specific options will go into this sub-object to +simplify plugin writing. Backward-compatibility code is in place, so +old code should not break. + +3. "plothover" no longer provides the original data point, but instead +a normalized one, since there may be no corresponding original point. + +4. Due to a bug in previous versions of jQuery, you now need at least +jQuery 1.2.6. But if you can, try jQuery 1.3.2 as it got some +improvements in event handling speed. + + +Changes: + +- Added support for disabling interactivity for specific data series + (request from Ronald Schouten and Steve Upton). + +- Flot now calls $() on the placeholder and optional legend container + passed in so you can specify DOM elements or CSS expressions to make + it easier to use Flot with libraries like Prototype or Mootools or + through raw JSON from Ajax responses. + +- A new "plotselecting" event is now emitted while the user is making + a selection. + +- The "plothover" event is now emitted immediately instead of at most + 10 times per second, you'll have to put in a setTimeout yourself if + you're doing something really expensive on this event. + +- The built-in date formatter can now be accessed as + $.plot.formatDate(...) (suggestion by Matt Manela) and even + replaced. + +- Added "borderColor" option to the grid (patch from Amaury Chamayou + and patch from Mike R. Williamson). + +- Added support for gradient backgrounds for the grid, take a look at + the "setting options" example (based on patch from Amaury Chamayou, + issue 90). + +- Gradient bars (suggestion by stefpet). + +- Added a "plotunselected" event which is triggered when the selection + is removed, see "selection" example (suggestion by Meda Ugo); + +- The option legend.margin can now specify horizontal and vertical + margins independently (suggestion by someone who's annoyed). + +- Data passed into Flot is now copied to a new canonical format to + enable further processing before it hits the drawing routines. As a + side-effect, this should make Flot more robust in the face of bad + data (and fixes issue 112). + +- Step-wise charting: line charts have a new option "steps" that when + set to true connects the points with horizontal/vertical steps + instead of diagonal lines. + +- The legend labelFormatter now passes the series in addition to just + the label (suggestion by Vincent Lemeltier). + +- Horizontal bars (based on patch by Jason LeBrun). + +- Support for partial bars by specifying a third coordinate, i.e. they + don't have to start from the axis. This can be used to make stacked + bars. + +- New option to disable the (grid.show). + +- Added pointOffset method for converting a point in data space to an + offset within the placeholder. + +- Plugin system: register an init method in the $.flot.plugins array + to get started, see PLUGINS.txt for details on how to write plugins + (it's easy). There are also some extra methods to enable access to + internal state. + +- Hooks: you can register functions that are called while Flot is + crunching the data and doing the plot. This can be used to modify + Flot without changing the source, useful for writing plugins. Some + hooks are defined, more are likely to come. + +- Threshold plugin: you can set a threshold and a color, and the data + points below that threshold will then get the color. Useful for + marking data below 0, for instance. + +- Stack plugin: you can specify a stack key for each series to have + them summed. This is useful for drawing additive/cumulative graphs + with bars and (currently unfilled) lines. + +- Crosshairs plugin: trace the mouse position on the axes, enable with + crosshair: { mode: "x"} (see the new tracking example for a use). + +- Image plugin: plot prerendered images. + +- Navigation plugin for panning and zooming a plot. + +- More configurable grid. + +- Axis transformation support, useful for non-linear plots, e.g. log + axes and compressed time axes (like omitting weekends). + +- Support for twelve-hour date formatting (patch by Forrest Aldridge). + +- The color parsing code in Flot has been cleaned up and split out so + it's now available as a separate jQuery plugin. It's included inline + in the Flot source to make dependency managing easier. This also + makes it really easy to use the color helpers in Flot plugins. + +Bug fixes: + +- Fixed two corner-case bugs when drawing filled curves (report and + analysis by Joshua Varner). +- Fix auto-adjustment code when setting min to 0 for an axis where the + dataset is completely flat on that axis (report by chovy). +- Fixed a bug with passing in data from getData to setData when the + secondary axes are used (issue 65, reported by nperelman). +- Fixed so that it is possible to turn lines off when no other chart + type is shown (based on problem reported by Glenn Vanderburg), and + fixed so that setting lineWidth to 0 also hides the shadow (based on + problem reported by Sergio Nunes). +- Updated mousemove position expression to the latest from jQuery (bug + reported by meyuchas). +- Use CSS borders instead of background in legend (fix printing issue 25 + and 45). +- Explicitly convert axis min/max to numbers. +- Fixed a bug with drawing marking lines with different colors + (reported by Khurram). +- Fixed a bug with returning y2 values in the selection event (fix + by exists, issue 75). +- Only set position relative on placeholder if it hasn't already a + position different from static (reported by kyberneticist, issue 95). +- Don't round markings to prevent sub-pixel problems (reported by Dan + Lipsitt). +- Make the grid border act similarly to a regular CSS border, i.e. + prevent it from overlapping the plot itself. This also fixes a + problem with anti-aliasing when the width is 1 pixel (reported by + Anthony Ettinger). +- Imported version 3 of excanvas and fixed two issues with the newer + version. Hopefully, this will make Flot work with IE8 (nudge by + Fabien Menager, further analysis by Booink, issue 133). +- Changed the shadow code for lines to hopefully look a bit better + with vertical lines. +- Round tick positions to avoid possible problems with fractions + (suggestion by Fred, issue 130). +- Made the heuristic for determining how many ticks to aim for a bit + smarter. +- Fix for uneven axis margins (report and patch by Paul Kienzle) and + snapping to ticks (concurrent report and patch by lifthrasiir). +- Fixed bug with slicing in findNearbyItems (patch by zollman). +- Make heuristic for x axis label widths more dynamic (patch by + rickinhethuis). +- Make sure points on top take precedence when finding nearby points + when hovering (reported by didroe, issue 224). + +Flot 0.5 +-------- + +Backwards API change summary: Timestamps are now in UTC. Also +"selected" event -> becomes "plotselected" with new data, the +parameters for setSelection are now different (but backwards +compatibility hooks are in place), coloredAreas becomes markings with +a new interface (but backwards compatibility hooks are in place). + + +Interactivity: added a new "plothover" event and this and the +"plotclick" event now returns the closest data item (based on patch by +/david, patch by Mark Byers for bar support). See the revamped +"interacting with the data" example for some hints on what you can do. + +Highlighting: you can now highlight points and datapoints are +autohighlighted when you hover over them (if hovering is turned on). + +Support for dual axis has been added (based on patch by someone who's +annoyed and /david). For each data series you can specify which axes +it belongs to, and there are two more axes, x2axis and y2axis, to +customize. This affects the "selected" event which has been renamed to +"plotselected" and spews out { xaxis: { from: -10, to: 20 } ... }, +setSelection in which the parameters are on a new form (backwards +compatible hooks are in place so old code shouldn't break) and +markings (formerly coloredAreas). + +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. + +Markings, previously coloredAreas, are now specified as ranges on the +axes, like { xaxis: { from: 0, to: 10 }}. Furthermore with markings +you can now draw horizontal/vertical lines by setting from and to to +the same coordinate (idea from line support patch by by Ryan Funduk). + +The "fill" option can now be a number that specifies the opacity of +the fill. + +You can now specify a coordinate as null (like [2, null]) and Flot +will take the other coordinate into account when scaling the axes +(based on patch by joebno). + +New option for bars "align". Set it to "center" to center the bars on +the value they represent. + +setSelection now takes a second parameter which you can use to prevent +the method from firing the "plotselected" handler. + +Using the "container" option in legend now overwrites the container +element instead of just appending to it (fixes infinite legend bug, +reported by several people, fix by Brad Dewey). + +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. +Fixed a bug when borderWidth is set to 0 (reported by +Rob/sanchothefat). Fixed a bug with drawing bars extending below 0 +(reported by James Hewitt, patch by Ryan Funduk). Fixed a +bug with line widths of bars (reported by MikeM). Fixed a bug with +'nw' and 'sw' legend positions. Improved the handling of axis +auto-scaling with bars. Fixed a bug with multi-line x-axis tick +labels (reported by Luca Ciano). IE-fix help by Savage Zhang. + + +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. Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/NEWS.txt ------------------------------------------------------------------------------ svn:eol-style = native Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/NEWS.txt ------------------------------------------------------------------------------ svn:keywords = Date Rev Author URL Id Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/NEWS.txt ------------------------------------------------------------------------------ svn:mime-type = text/plain Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/PLUGINS.txt URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/PLUGINS.txt?rev=991209&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/PLUGINS.txt (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/PLUGINS.txt Tue Aug 31 14:44:23 2010 @@ -0,0 +1,105 @@ +Writing plugins +--------------- + +To make a new plugin, create an init function and a set of options (if +needed), stuff it into an object and put it in the $.plot.plugins +array. For example: + + function myCoolPluginInit(plot) { plot.coolstring = "Hello!" }; + var myCoolOptions = { coolstuff: { show: true } } + $.plot.plugins.push({ init: myCoolPluginInit, options: myCoolOptions }); + + // now when $.plot is called, the returned object will have the + // attribute "coolstring" + +Now, given that the plugin might run in many different places, it's +a good idea to avoid leaking names. We can avoid this by wrapping the +above lines in an anonymous function which we call immediately, like +this: (function () { inner code ... })(). To make it even more robust +in case $ is not bound to jQuery but some other Javascript library, we +can write it as + + (function ($) { + // plugin definition + // ... + })(jQuery); + +Here is a simple debug plugin which alerts each of the series in the +plot. It has a single option that control whether it is enabled and +how much info to output: + + (function ($) { + function init(plot) { + var debugLevel = 1; + + function checkDebugEnabled(plot, options) { + if (options.debug) { + debugLevel = options.debug; + + plot.hooks.processDatapoints.push(alertSeries); + } + } + + function alertSeries(plot, series, datapoints) { + var msg = "series " + series.label; + if (debugLevel > 1) + msg += " with " + series.data.length + " points"; + alert(msg); + } + + plot.hooks.processOptions.push(checkDebugEnabled); + } + + var options = { debug: 0 }; + + $.plot.plugins.push({ + init: init, + options: options, + name: "simpledebug", + version: "0.1" + }); + })(jQuery); + +We also define "name" and "version". It's not used by Flot, but might +be helpful for other plugins in resolving dependencies. + +Put the above in a file named "jquery.flot.debug.js", include it in an +HTML page and then it can be used with: + + $.plot($("#placeholder"), [...], { debug: 2 }); + +This simple plugin illustrates a couple of points: + + - It uses the anonymous function trick to avoid name pollution. + - It can be enabled/disabled through an option. + - Variables in the init function can be used to store plot-specific + state between the hooks. + + +Options guidelines +================== + +Plugins should always support appropriate options to enable/disable +them because the plugin user may have several plots on the same page +where only one should use the plugin. + +If the plugin needs series-specific options, you can put them in +"series" in the options object, e.g. + + var options = { + series: { + downsample: { + algorithm: null, + maxpoints: 1000 + } + } + } + +Then they will be copied by Flot into each series, providing the +defaults in case the plugin user doesn't specify any. Again, in most +cases it's probably a good idea if the plugin is turned off rather +than on per default, just like most of the powerful features in Flot. + +Think hard and long about naming the options. These names are going to +be public API, and code is going to depend on them if the plugin is +successful. Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/PLUGINS.txt ------------------------------------------------------------------------------ svn:eol-style = native Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/PLUGINS.txt ------------------------------------------------------------------------------ svn:keywords = Date Rev Author URL Id Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/PLUGINS.txt ------------------------------------------------------------------------------ svn:mime-type = text/plain Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/README.txt URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/README.txt?rev=991209&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/README.txt (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/README.txt Tue Aug 31 14:44:23 2010 @@ -0,0 +1,81 @@ +About +----- + +Flot is a Javascript plotting library for jQuery. Read more at the +website: + + http://code.google.com/p/flot/ + +Take a look at the examples linked from above, they should give a good +impression of what Flot can do and the source code of the examples is +probably the fastest way to learn how to use Flot. + + +Installation +------------ + +Just include the Javascript file after you've included jQuery. + +Note that you need to get a version of Excanvas (e.g. the one bundled +with Flot) which is canvas emulation on Internet Explorer. You can +include the excanvas script like this: + + <!--[if IE]><script language="javascript" type="text/javascript" src="excanvas.pack.js"></script><![endif]--> + +If it's not working on your development IE 6.0, check that it has +support for VML which excanvas is relying on. It appears that some +stripped down versions used for test environments on virtual machines +lack the VML support. + +Also note that you need at least jQuery 1.2.6 (but at least jQuery +1.3.2 is recommended for interactive charts because of performance +improvements in event handling). + + +Basic usage +----------- + +Create a placeholder div to put the graph in: + + <div id="placeholder"></div> + +You need to set the width and height of this div, otherwise the plot +library doesn't know how to scale the graph. You can do it inline like +this: + + <div id="placeholder" style="width:600px;height:300px"></div> + +You can also do it with an external stylesheet. Make sure that the +placeholder isn't within something with a display:none CSS property - +in that case, Flot has trouble measuring label dimensions which +results in garbled looks and might have trouble measuring the +placeholder dimensions which is fatal (it'll throw an exception). + +Then when the div is ready in the DOM, which is usually on document +ready, run the plot function: + + $.plot($("#placeholder"), data, options); + +Here, data is an array of data series and options is an object with +settings if you want to customize the plot. Take a look at the +examples for some ideas of what to put in or look at the reference +in the file "API.txt". Here's a quick example that'll draw a line from +(0, 0) to (1, 1): + + $.plot($("#placeholder"), [ [[0, 0], [1, 1]] ], { yaxis: { max: 1 } }); + +The plot function immediately draws the chart and then returns a plot +object with a couple of methods. + + +What's with the name? +--------------------- + +First: it's pronounced with a short o, like "plot". Not like "flawed". + +So "Flot" rhymes with "plot". + +And if you look up "flot" in a Danish-to-English dictionary, some up +the words that come up are "good-looking", "attractive", "stylish", +"smart", "impressive", "extravagant". One of the main goals with Flot +is pretty looks. Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/README.txt ------------------------------------------------------------------------------ svn:eol-style = native Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/README.txt ------------------------------------------------------------------------------ svn:keywords = Date Rev Author URL Id Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/README.txt ------------------------------------------------------------------------------ svn:mime-type = text/plain Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/ajax.html URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/ajax.html?rev=991209&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/ajax.html (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/ajax.html Tue Aug 31 14:44:23 2010 @@ -0,0 +1,143 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> +<html> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> + <title>Flot Examples</title> + <link href="layout.css" rel="stylesheet" type="text/css"></link> + <!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]--> + <script language="javascript" type="text/javascript" src="../jquery.js"></script> + <script language="javascript" type="text/javascript" src="../jquery.flot.js"></script> + </head> + <body> + <h1>Flot Examples</h1> + + <div id="placeholder" style="width:600px;height:300px;"></div> + + <p>Example of loading data dynamically with AJAX. Percentage change in GDP (source: <a href="http://epp.eurostat.ec.europa.eu/tgm/table.do?tab=table&init=1&plugin=1&language=en&pcode=tsieb020">Eurostat</a>). Click the buttons below.</p> + + <p>The data is fetched over HTTP, in this case directly from text + files. Usually the URL would point to some web server handler + (e.g. a PHP page or Java/.NET/Python/Ruby on Rails handler) that + extracts it from a database and serializes it to JSON.</p> + + <p> + <input class="fetchSeries" type="button" value="First dataset"> - + <a href="data-eu-gdp-growth.json">data</a> - + <span></span> + </p> + + <p> + <input class="fetchSeries" type="button" value="Second dataset"> - + <a href="data-japan-gdp-growth.json">data</a> - + <span></span> + </p> + + <p> + <input class="fetchSeries" type="button" value="Third dataset"> - + <a href="data-usa-gdp-growth.json">data</a> - + <span></span> + </p> + + <p>If you combine AJAX with setTimeout, you can poll the server + for new data.</p> + + <p> + <input class="dataUpdate" type="button" value="Poll for data"> + </p> + +<script id="source" language="javascript" type="text/javascript"> +$(function () { + var options = { + lines: { show: true }, + points: { show: true }, + xaxis: { tickDecimals: 0, tickSize: 1 } + }; + var data = []; + var placeholder = $("#placeholder"); + + $.plot(placeholder, data, options); + + + // fetch one series, adding to what we got + var alreadyFetched = {}; + + $("input.fetchSeries").click(function () { + var button = $(this); + + // find the URL in the link right next to us + var dataurl = button.siblings('a').attr('href'); + + // then fetch the data with jQuery + function onDataReceived(series) { + // extract the first coordinate pair so you can see that + // data is now an ordinary Javascript object + var firstcoordinate = '(' + series.data[0][0] + ', ' + series.data[0][1] + ')'; + + button.siblings('span').text('Fetched ' + series.label + ', first point: ' + firstcoordinate); + + // let's add it to our current data + if (!alreadyFetched[series.label]) { + alreadyFetched[series.label] = true; + data.push(series); + } + + // and plot all we got + $.plot(placeholder, data, options); + } + + $.ajax({ + url: dataurl, + method: 'GET', + dataType: 'json', + success: onDataReceived + }); + }); + + + // initiate a recurring data update + $("input.dataUpdate").click(function () { + // reset data + data = []; + alreadyFetched = {}; + + $.plot(placeholder, data, options); + + var iteration = 0; + + function fetchData() { + ++iteration; + + function onDataReceived(series) { + // we get all the data in one go, if we only got partial + // data, we could merge it with what we already got + data = [ series ]; + + $.plot($("#placeholder"), data, options); + } + + $.ajax({ + // usually, we'll just call the same URL, a script + // connected to a database, but in this case we only + // have static example files so we need to modify the + // URL + url: "data-eu-gdp-growth-" + iteration + ".json", + method: 'GET', + dataType: 'json', + success: onDataReceived + }); + + if (iteration < 5) + setTimeout(fetchData, 1000); + else { + data = []; + alreadyFetched = {}; + } + } + + setTimeout(fetchData, 1000); + }); +}); +</script> + + </body> +</html> Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/ajax.html ------------------------------------------------------------------------------ svn:eol-style = native Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/ajax.html ------------------------------------------------------------------------------ svn:keywords = Date Rev Author URL Id Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/ajax.html ------------------------------------------------------------------------------ svn:mime-type = text/html Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/annotating.html URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/annotating.html?rev=991209&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/annotating.html (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/annotating.html Tue Aug 31 14:44:23 2010 @@ -0,0 +1,75 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> +<html> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> + <title>Flot Examples</title> + <link href="layout.css" rel="stylesheet" type="text/css"></link> + <!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]--> + <script language="javascript" type="text/javascript" src="../jquery.js"></script> + <script language="javascript" type="text/javascript" src="../jquery.flot.js"></script> + </head> + <body> + <h1>Flot Examples</h1> + + <div id="placeholder" style="width:600px;height:300px;"></div> + + <p>Flot has support for simple background decorations such as + lines and rectangles. They can be useful for marking up certain + areas. You can easily add any HTML you need with standard DOM + manipulation, e.g. for labels. For drawing custom shapes there is + also direct access to the canvas.</p> + +<script id="source" language="javascript" type="text/javascript"> +$(function () { + // generate a dataset + var d1 = []; + for (var i = 0; i < 20; ++i) + d1.push([i, Math.sin(i)]); + + var data = [{ data: d1, label: "Pressure", color: "#333" }]; + + // setup background areas + var markings = [ + { color: '#f6f6f6', yaxis: { from: 1 } }, + { color: '#f6f6f6', yaxis: { to: -1 } }, + { color: '#000', lineWidth: 1, xaxis: { from: 2, to: 2 } }, + { color: '#000', lineWidth: 1, xaxis: { from: 8, to: 8 } } + ]; + + var placeholder = $("#placeholder"); + + // plot it + var plot = $.plot(placeholder, data, { + bars: { show: true, barWidth: 0.5, fill: 0.9 }, + xaxis: { ticks: [], autoscaleMargin: 0.02 }, + yaxis: { min: -2, max: 2 }, + grid: { markings: markings } + }); + + // add labels + var o; + + o = plot.pointOffset({ x: 2, y: -1.2}); + // we just append it to the placeholder which Flot already uses + // for positioning + placeholder.append('<div style="position:absolute;left:' + (o.left + 4) + 'px;top:' + o.top + 'px;color:#666;font-size:smaller">Warming up</div>'); + + o = plot.pointOffset({ x: 8, y: -1.2}); + placeholder.append('<div style="position:absolute;left:' + (o.left + 4) + 'px;top:' + o.top + 'px;color:#666;font-size:smaller">Actual measurements</div>'); + + // draw a little arrow on top of the last label to demonstrate + // canvas drawing + var ctx = plot.getCanvas().getContext("2d"); + ctx.beginPath(); + o.left += 4; + ctx.moveTo(o.left, o.top); + ctx.lineTo(o.left, o.top - 10); + ctx.lineTo(o.left + 10, o.top - 5); + ctx.lineTo(o.left, o.top); + ctx.fillStyle = "#000"; + ctx.fill(); +}); +</script> + + </body> +</html> Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/annotating.html ------------------------------------------------------------------------------ svn:eol-style = native Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/annotating.html ------------------------------------------------------------------------------ svn:keywords = Date Rev Author URL Id Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/annotating.html ------------------------------------------------------------------------------ svn:mime-type = text/html Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/arrow-down.gif URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/arrow-down.gif?rev=991209&view=auto ============================================================================== Binary file - no diff available. Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/arrow-down.gif ------------------------------------------------------------------------------ svn:mime-type = image/gif Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/arrow-left.gif URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/arrow-left.gif?rev=991209&view=auto ============================================================================== Binary file - no diff available. Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/arrow-left.gif ------------------------------------------------------------------------------ svn:mime-type = image/gif Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/arrow-right.gif URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/arrow-right.gif?rev=991209&view=auto ============================================================================== Binary file - no diff available. Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/arrow-right.gif ------------------------------------------------------------------------------ svn:mime-type = image/gif Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/arrow-up.gif URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/arrow-up.gif?rev=991209&view=auto ============================================================================== Binary file - no diff available. Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/arrow-up.gif ------------------------------------------------------------------------------ svn:mime-type = image/gif Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/basic.html URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/basic.html?rev=991209&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/basic.html (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/basic.html Tue Aug 31 14:44:23 2010 @@ -0,0 +1,38 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> +<html> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> + <title>Flot Examples</title> + <link href="layout.css" rel="stylesheet" type="text/css"></link> + <!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]--> + <script language="javascript" type="text/javascript" src="../jquery.js"></script> + <script language="javascript" type="text/javascript" src="../jquery.flot.js"></script> + </head> + <body> + <h1>Flot Examples</h1> + + <div id="placeholder" style="width:600px;height:300px;"></div> + + <p>Simple example. You don't need to specify much to get an + attractive look. Put in a placeholder, make sure you set its + dimensions (otherwise the plot library will barf) and call the + plot function with the data. The axes are automatically + scaled.</p> + +<script id="source" language="javascript" type="text/javascript"> +$(function () { + var d1 = []; + for (var i = 0; i < 14; i += 0.5) + d1.push([i, Math.sin(i)]); + + var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]]; + + // a null signifies separate line segments + var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]]; + + $.plot($("#placeholder"), [ d1, d2, d3 ]); +}); +</script> + + </body> +</html> Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/basic.html ------------------------------------------------------------------------------ svn:eol-style = native Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/basic.html ------------------------------------------------------------------------------ svn:keywords = Date Rev Author URL Id Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/basic.html ------------------------------------------------------------------------------ svn:mime-type = text/html Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/data-eu-gdp-growth-1.json URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/data-eu-gdp-growth-1.json?rev=991209&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/data-eu-gdp-growth-1.json (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/data-eu-gdp-growth-1.json Tue Aug 31 14:44:23 2010 @@ -0,0 +1,4 @@ +{ + label: 'Europe (EU27)', + data: [[1999, 3.0], [2000, 3.9]] +} Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/data-eu-gdp-growth-2.json URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/data-eu-gdp-growth-2.json?rev=991209&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/data-eu-gdp-growth-2.json (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/data-eu-gdp-growth-2.json Tue Aug 31 14:44:23 2010 @@ -0,0 +1,4 @@ +{ + label: 'Europe (EU27)', + data: [[1999, 3.0], [2000, 3.9], [2001, 2.0], [2002, 1.2]] +} Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/data-eu-gdp-growth-3.json URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/data-eu-gdp-growth-3.json?rev=991209&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/data-eu-gdp-growth-3.json (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/data-eu-gdp-growth-3.json Tue Aug 31 14:44:23 2010 @@ -0,0 +1,4 @@ +{ + label: 'Europe (EU27)', + data: [[1999, 3.0], [2000, 3.9], [2001, 2.0], [2002, 1.2], [2003, 1.3], [2004, 2.5]] +} Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/data-eu-gdp-growth-4.json URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/data-eu-gdp-growth-4.json?rev=991209&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/data-eu-gdp-growth-4.json (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/data-eu-gdp-growth-4.json Tue Aug 31 14:44:23 2010 @@ -0,0 +1,4 @@ +{ + label: 'Europe (EU27)', + data: [[1999, 3.0], [2000, 3.9], [2001, 2.0], [2002, 1.2], [2003, 1.3], [2004, 2.5], [2005, 2.0], [2006, 3.1]] +} Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/data-eu-gdp-growth-5.json URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/data-eu-gdp-growth-5.json?rev=991209&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/data-eu-gdp-growth-5.json (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/data-eu-gdp-growth-5.json Tue Aug 31 14:44:23 2010 @@ -0,0 +1,4 @@ +{ + label: 'Europe (EU27)', + data: [[1999, 3.0], [2000, 3.9], [2001, 2.0], [2002, 1.2], [2003, 1.3], [2004, 2.5], [2005, 2.0], [2006, 3.1], [2007, 2.9], [2008, 0.9]] +} Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/data-eu-gdp-growth.json URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/data-eu-gdp-growth.json?rev=991209&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/data-eu-gdp-growth.json (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/data-eu-gdp-growth.json Tue Aug 31 14:44:23 2010 @@ -0,0 +1,4 @@ +{ + label: 'Europe (EU27)', + data: [[1999, 3.0], [2000, 3.9], [2001, 2.0], [2002, 1.2], [2003, 1.3], [2004, 2.5], [2005, 2.0], [2006, 3.1], [2007, 2.9], [2008, 0.9]] +} Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/data-japan-gdp-growth.json URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/data-japan-gdp-growth.json?rev=991209&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/data-japan-gdp-growth.json (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/data-japan-gdp-growth.json Tue Aug 31 14:44:23 2010 @@ -0,0 +1,4 @@ +{ + label: 'Japan', + data: [[1999, -0.1], [2000, 2.9], [2001, 0.2], [2002, 0.3], [2003, 1.4], [2004, 2.7], [2005, 1.9], [2006, 2.0], [2007, 2.3], [2008, -0.7]] +} Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/data-usa-gdp-growth.json URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/data-usa-gdp-growth.json?rev=991209&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/data-usa-gdp-growth.json (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/data-usa-gdp-growth.json Tue Aug 31 14:44:23 2010 @@ -0,0 +1,4 @@ +{ + label: 'USA', + data: [[1999, 4.4], [2000, 3.7], [2001, 0.8], [2002, 1.6], [2003, 2.5], [2004, 3.6], [2005, 2.9], [2006, 2.8], [2007, 2.0], [2008, 1.1]] +} Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/graph-types.html URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/graph-types.html?rev=991209&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/graph-types.html (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/graph-types.html Tue Aug 31 14:44:23 2010 @@ -0,0 +1,75 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> +<html> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> + <title>Flot Examples</title> + <link href="layout.css" rel="stylesheet" type="text/css"></link> + <!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]--> + <script language="javascript" type="text/javascript" src="../jquery.js"></script> + <script language="javascript" type="text/javascript" src="../jquery.flot.js"></script> + </head> + <body> + <h1>Flot Examples</h1> + + <div id="placeholder" style="width:600px;height:300px"></div> + + <p>Flot supports lines, points, filled areas, bars and any + combinations of these, in the same plot and even on the same data + series.</p> + +<script id="source" language="javascript" type="text/javascript"> +$(function () { + var d1 = []; + for (var i = 0; i < 14; i += 0.5) + d1.push([i, Math.sin(i)]); + + var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]]; + + var d3 = []; + for (var i = 0; i < 14; i += 0.5) + d3.push([i, Math.cos(i)]); + + var d4 = []; + for (var i = 0; i < 14; i += 0.1) + d4.push([i, Math.sqrt(i * 10)]); + + var d5 = []; + for (var i = 0; i < 14; i += 0.5) + d5.push([i, Math.sqrt(i)]); + + var d6 = []; + for (var i = 0; i < 14; i += 0.5 + Math.random()) + d6.push([i, Math.sqrt(2*i + Math.sin(i) + 5)]); + + $.plot($("#placeholder"), [ + { + data: d1, + lines: { show: true, fill: true } + }, + { + data: d2, + bars: { show: true } + }, + { + data: d3, + points: { show: true } + }, + { + data: d4, + lines: { show: true } + }, + { + data: d5, + lines: { show: true }, + points: { show: true } + }, + { + data: d6, + lines: { show: true, steps: true } + } + ]); +}); +</script> + + </body> +</html> Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/graph-types.html ------------------------------------------------------------------------------ svn:eol-style = native Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/graph-types.html ------------------------------------------------------------------------------ svn:keywords = Date Rev Author URL Id Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/graph-types.html ------------------------------------------------------------------------------ svn:mime-type = text/html Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/hs-2004-27-a-large_web.jpg URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/hs-2004-27-a-large_web.jpg?rev=991209&view=auto ============================================================================== Binary file - no diff available. Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/hs-2004-27-a-large_web.jpg ------------------------------------------------------------------------------ svn:mime-type = image/jpeg Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/image.html URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/image.html?rev=991209&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/image.html (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/image.html Tue Aug 31 14:44:23 2010 @@ -0,0 +1,45 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> +<html> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> + <title>Flot Examples</title> + <link href="layout.css" rel="stylesheet" type="text/css"></link> + <!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]--> + <script language="javascript" type="text/javascript" src="../jquery.js"></script> + <script language="javascript" type="text/javascript" src="../jquery.flot.js"></script> + <script language="javascript" type="text/javascript" src="../jquery.flot.image.js"></script> + </head> + <body> + <h1>Flot Examples</h1> + + <div id="placeholder" style="width:400px;height:400px;"></div> + + <p>The Cat's Eye Nebula (<a href="http://hubblesite.org/gallery/album/nebula/pr2004027a/">picture from Hubble</a>).</p> + + <p>With the image plugin, you can plot images. This is for example + useful for getting ticks on complex prerendered visualizations. + Instead of inputting data points, you put in the images and where + their two opposite corners are supposed to be in plot space.</p> + + <p>Images represent a little further complication because you need + to make sure they are loaded before you can use them (Flot skips + incomplete images). The plugin comes with a couple of helpers + for doing that.</p> + +<script id="source" language="javascript" type="text/javascript"> +$(function () { + var data = [ [ ["hs-2004-27-a-large_web.jpg", -10, -10, 10, 10] ] ]; + var options = { + series: { images: { show: true } }, + xaxis: { min: -8, max: 4 }, + yaxis: { min: -8, max: 4 } + }; + + $.plot.image.loadDataImages(data, options, function () { + $.plot($("#placeholder"), data, options); + }); +}); +</script> + + </body> +</html> Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/image.html ------------------------------------------------------------------------------ svn:eol-style = native Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/image.html ------------------------------------------------------------------------------ svn:keywords = Date Rev Author URL Id Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/image.html ------------------------------------------------------------------------------ svn:mime-type = text/html Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/index.html URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/index.html?rev=991209&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/index.html (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/index.html Tue Aug 31 14:44:23 2010 @@ -0,0 +1,46 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> +<html> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> + <title>Flot Examples</title> + <link href="layout.css" rel="stylesheet" type="text/css"></link> + <!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]--> + <script language="javascript" type="text/javascript" src="../jquery.js"></script> + <script language="javascript" type="text/javascript" src="../jquery.flot.js"></script> + </head> + <body> + <h1>Flot Examples</h1> + + <p>Here are some examples for <a href="http://code.google.com/p/flot/">Flot</a>, the Javascript charting library for jQuery:</p> + + <ul> + <li><a href="basic.html">Basic example</a></li> + <li><a href="graph-types.html">Different graph types</a></li> + <li><a href="setting-options.html">Setting various options</a> and <a href="annotating.html">annotating a chart</a></li> + <li><a href="ajax.html">Updating graphs with AJAX</a></li> + </ul> + + <p>Being interactive:</p> + + <ul> + <li><a href="turning-series.html">Turning series on/off</a></li> + <li><a href="selection.html">Rectangular selection support and zooming</a> and <a href="zooming.html">zooming with overview</a></li> (both with selection plugin) + <li><a href="interacting.html">Interacting with the data points</a></li> + <li><a href="navigate.html">Panning and zooming</a> (with navigation plugin)</li> + </ul> + + <p>Various features:</p> + + <ul> + <li><a href="symbols.html">Using other symbols than circles for points</a> (with symbol plugin)</li> + <li><a href="time.html">Plotting time series</a> and <a href="visitors.html">visitors per day with zooming and weekends</a> (with selection plugin)</li> + <li><a href="multiple-axes.html">Multiple axes</a> and <a href="interacting-axes.html">interacting with the axes</a></li> + <li><a href="thresholding.html">Thresholding the data</a> (with threshold plugin)</li> + <li><a href="stacking.html">Stacked charts</a> (with stacking plugin)</li> + <li><a href="percentiles.html">Using filled areas to plot percentiles</a> (with fillbetween plugin)</li> + <li><a href="tracking.html">Tracking curves with crosshair</a> (with crosshair plugin)</li> + <li><a href="image.html">Plotting prerendered images</a> (with image plugin)</li> + <li><a href="pie.html">Pie charts</a> (with pie plugin)</li> + </ul> + </body> +</html> Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/index.html ------------------------------------------------------------------------------ svn:eol-style = native Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/index.html ------------------------------------------------------------------------------ svn:keywords = Date Rev Author URL Id Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/index.html ------------------------------------------------------------------------------ svn:mime-type = text/html Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/interacting-axes.html URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/interacting-axes.html?rev=991209&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/interacting-axes.html (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/interacting-axes.html Tue Aug 31 14:44:23 2010 @@ -0,0 +1,94 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> +<html> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> + <title>Flot Examples</title> + <link href="layout.css" rel="stylesheet" type="text/css"></link> + <!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]--> + <script language="javascript" type="text/javascript" src="../jquery.js"></script> + <script language="javascript" type="text/javascript" src="../jquery.flot.js"></script> + </head> + <body> + <h1>Flot Examples</h1> + + <div id="placeholder" style="width:600px;height:300px;"></div> + + <p>With multiple axes, you sometimes need to interact with them. A + simple way to do this is to draw the plot, deduce the axis + placements and insert a couple of divs on top to catch events. + Try clicking an axis.</p> + + <p id="click"></p> + +<script id="source" language="javascript" type="text/javascript"> +$(function () { + function generate(start, end, fn) { + var res = []; + for (var i = 0; i <= 100; ++i) { + var x = start + i / 100 * (end - start); + res.push([x, fn(x)]); + } + return res; + } + + var data = [ + { data: generate(0, 10, function (x) { return Math.sqrt(x)}), xaxis: 1, yaxis:1 }, + { data: generate(0, 10, function (x) { return Math.sin(x)}), xaxis: 1, yaxis:2 }, + { data: generate(0, 10, function (x) { return Math.cos(x)}), xaxis: 1, yaxis:3 }, + { data: generate(2, 10, function (x) { return Math.tan(x)}), xaxis: 2, yaxis: 4 } + ]; + + var plot = $.plot($("#placeholder"), + data, + { + xaxes: [ + { position: 'bottom' }, + { position: 'top'} + ], + yaxes: [ + { position: 'left' }, + { position: 'left' }, + { position: 'right' }, + { position: 'left' } + ] + }); + + // now for each axis, create a div + + function getBoundingBoxForAxis(plot, axis) { + var left = axis.box.left, top = axis.box.top, + right = left + axis.box.width, bottom = top + axis.box.height; + + // some ticks may stick out, enlarge the box to encompass all ticks + var cls = axis.direction + axis.n + 'Axis'; + plot.getPlaceholder().find('.' + cls + ' .tickLabel').each(function () { + var pos = $(this).position(); + left = Math.min(pos.left, left); + top = Math.min(pos.top, top); + right = Math.max(Math.round(pos.left) + $(this).outerWidth(), right); + bottom = Math.max(Math.round(pos.top) + $(this).outerHeight(), bottom); + }); + + return { left: left, top: top, width: right - left, height: bottom - top }; + } + + $.each(plot.getXAxes().concat(plot.getYAxes()), function (i, axis) { + var box = getBoundingBoxForAxis(plot, axis); + + $('<div class="axisTarget" style="position:absolute;left:' + box.left + 'px;top:' + box.top + 'px;width:' + box.width + 'px;height:' + box.height + 'px"></div>') + .data('axis.direction', axis.direction) + .data('axis.n', axis.n) + .css({ backgroundColor: "#f00", opacity: 0, cursor: "pointer" }) + .appendTo(plot.getPlaceholder()) + .hover( + function () { $(this).css({ opacity: 0.10 }) }, + function () { $(this).css({ opacity: 0 }) } + ) + .click(function () { + $("#click").text("You clicked the " + axis.direction + axis.n + "axis!") + }); + }); +}); +</script> + </body> +</html> Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/interacting-axes.html ------------------------------------------------------------------------------ svn:eol-style = native Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/interacting-axes.html ------------------------------------------------------------------------------ svn:keywords = Date Rev Author URL Id Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/interacting-axes.html ------------------------------------------------------------------------------ svn:mime-type = text/html Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/interacting.html URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/interacting.html?rev=991209&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/interacting.html (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/interacting.html Tue Aug 31 14:44:23 2010 @@ -0,0 +1,93 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> +<html> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> + <title>Flot Examples</title> + <link href="layout.css" rel="stylesheet" type="text/css"></link> + <!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]--> + <script language="javascript" type="text/javascript" src="../jquery.js"></script> + <script language="javascript" type="text/javascript" src="../jquery.flot.js"></script> + </head> + <body> + <h1>Flot Examples</h1> + + <div id="placeholder" style="width:600px;height:300px"></div> + + <p>One of the goals of Flot is to support user interactions. Try + pointing and clicking on the points.</p> + + <p id="hoverdata">Mouse hovers at + (<span id="x">0</span>, <span id="y">0</span>). <span id="clickdata"></span></p> + + <p>A tooltip is easy to build with a bit of jQuery code and the + data returned from the plot.</p> + + <p><input id="enableTooltip" type="checkbox">Enable tooltip</p> + +<script id="source" language="javascript" type="text/javascript"> +$(function () { + var sin = [], cos = []; + for (var i = 0; i < 14; i += 0.5) { + sin.push([i, Math.sin(i)]); + cos.push([i, Math.cos(i)]); + } + + var plot = $.plot($("#placeholder"), + [ { data: sin, label: "sin(x)"}, { data: cos, label: "cos(x)" } ], { + series: { + lines: { show: true }, + points: { show: true } + }, + grid: { hoverable: true, clickable: true }, + yaxis: { min: -1.2, max: 1.2 } + }); + + function showTooltip(x, y, contents) { + $('<div id="tooltip">' + contents + '</div>').css( { + position: 'absolute', + display: 'none', + top: y + 5, + left: x + 5, + border: '1px solid #fdd', + padding: '2px', + 'background-color': '#fee', + opacity: 0.80 + }).appendTo("body").fadeIn(200); + } + + var previousPoint = null; + $("#placeholder").bind("plothover", function (event, pos, item) { + $("#x").text(pos.x.toFixed(2)); + $("#y").text(pos.y.toFixed(2)); + + if ($("#enableTooltip:checked").length > 0) { + if (item) { + if (previousPoint != item.datapoint) { + previousPoint = item.datapoint; + + $("#tooltip").remove(); + var x = item.datapoint[0].toFixed(2), + y = item.datapoint[1].toFixed(2); + + showTooltip(item.pageX, item.pageY, + item.series.label + " of " + x + " = " + y); + } + } + else { + $("#tooltip").remove(); + previousPoint = null; + } + } + }); + + $("#placeholder").bind("plotclick", function (event, pos, item) { + if (item) { + $("#clickdata").text("You clicked point " + item.dataIndex + " in " + item.series.label + "."); + plot.highlight(item.series, item.datapoint); + } + }); +}); +</script> + + </body> +</html> Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/interacting.html ------------------------------------------------------------------------------ svn:eol-style = native Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/interacting.html ------------------------------------------------------------------------------ svn:keywords = Date Rev Author URL Id Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/interacting.html ------------------------------------------------------------------------------ svn:mime-type = text/html Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/layout.css URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/layout.css?rev=991209&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/layout.css (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/layout.css Tue Aug 31 14:44:23 2010 @@ -0,0 +1,6 @@ +body { + font-family: sans-serif; + font-size: 16px; + margin: 50px; + max-width: 800px; +} Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/layout.css ------------------------------------------------------------------------------ svn:eol-style = native Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/layout.css ------------------------------------------------------------------------------ svn:keywords = Date Rev Author URL Id Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/plugins/flot/examples/layout.css ------------------------------------------------------------------------------ svn:mime-type = text/css |
«
Return to OFBiz - Commits
|
1 view|%1 views
| Free forum by Nabble | Edit this page |