Copyright © 2009-2012 Chris Leonello
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
MIT License
1.0.0b2
- Major improvements in memory usage: ** Merged in changes from Timo Besenruether to reuse canvas elements and improve memory performance. ** Fixed all identifiable DOM leaks. ** Mergged in changes from cguillot for memory improvements in IE < 9.
- Added vertical and dashed vertical line support for canvas overlay.
- Fixed bug where initially hidden plots would not display.
- Fixed bug with point labels and null data points.
- Updated to jQuery 1.6.1.
- Improved pie slice margin calculation and fixed slice margin and pie positioning with small slices.
- Improved bar renderer so bars always start at 0 if: ** The axis is a linear axis (not log/date). ** There are no other line types besides bars attached to the axis. ** The data on the axis is all >= 0. ** The user has not specified a pad, padMin or forceTickAt0 = true option.
- Modified tick prefix behavious so prefix no added to all ticks, even if format string is specified.
- Fix to ensure original tick formats are applied when zooming and resetting zoom.
- Updated auto tick format string so format adjusted when zooming.
- Modified auto tick computation to put less ticks on small plots and more ticks on large plots.
- Update bubble render to support gradients in IE 9.
1.0.0b1
- Much improved tick generation algorithm to get precise rounded tick values (Thanks Scott Prahl!).
- Auto compute tick format string if none is provided.
- Much better “slicing” of pie charts when using “sliceMargin” option to set a gap between the slices.
- Expanded canvasOverlay plugin to create arbitrary dashed and solid horizontal and vertical lines on top of plot.
- Added defaultColors and defaultNegativeColors options to $.jqplot.config.
- Fixed issue #318, highlighter & bar renderer incompatability.
- Improve highlighter tooltip positioning with negative bars.
- Fixed #305, mispelling of jqlotDragStart and jqlotDragStop. MUST NOW BIND TO jqplotDragStart and jqplotDragStop.
- Fixed #290, some variables left in global scope.
- Fixed #289, OHLC line widths hard coded at 1.5. Now set by lineWidth option.
- Fixed #296 for determining databounds on log axes.
- Updated to jQuery 1.5.1
- Fixed waterfall plot to ensure first and last bars always fill to zero.
- Added lineJoin and lineCap option to series lines.
- Bar widths now based on width of grid, not plot target for better scaling.
- Added looseZoom option to cursor so zooming can produce well rounded ticks.
- Added forceTickAt0 and forceTickAt100 options to ensure there will always be a tick at 0 or 100 in the plot.
- Fixed bug where cursor legend didn’t honor series showLabel option.
1.0.0a
- Series can now be moved forward or backward in stack to e.g. bring a line forward when mousing over a point.
- Can now move outside of grid area while zooming. Can have zoom constrained to grid area or allow zooming outside.
- Fixed issue #142 with tooltip drawn on top of event canvas, hiding mouse events.
- Fixed #147 where pie slices with 0 value not rendering properly in IE.
- Fixed #130 where stack data not sorted properly.
- Fixed bug with null values not handled properly in category axes.
- Fixed #156 where pie charts not rendering on QTWebKit.
- Now using feature detection for canvas and canvas text capability rather than browser version.
- Added enahncedLegendRenderer plugin to allow multi row/column legends and clickable labels to show/hide series.
- Added fillToValue option to allow filled line plot to fill to an arbitrary value.
- Added block plot plugin.
- Added funnel type charts.
- Added meter gauge type charts.
- Added plot theming support.
- $.jqplot.config.enablePlugins now false by default.
- Implemented highlighting on bar, pie, donut, funnel, etc. charts.
- Fix to pointlabels plugin to align labels properly on multi series plots.
- Added custom error handling to display error message in plot area.
- Fixed issue where would call to draw grid border of 0 width would result in a default border being drawn.
- Added options to place legend outside of grid and shrink grid so everything stays within plot div.
- Fixed bug in color generator so now calls to get() continually cycle through colors just like next().
- Added defaultAxisStart option.
- Added gradient fills to bubbles.
- Added bubble charts.
- Added showLabels option to bubble charts.
- Pass bubble radius to event callback in bubble charts.
- Fixed #207, typo in docs.
- Fixed #206 where “value” pie slice data labels were displaying wrong value.
- Fixed #147 with 0 value slices in IE6.
- Fixed issue #241, disabled varyBarColor option in stacked charts.
- Added dataRenderer option to allow custom processors for JSON, AJAX and anywhere else you might want to get data.
- Fixed null value handling so plot now properly skip or join over nulls.
- Fixed showTicks and showTickMarks option conflicts.
- Fixed issue #185 where pointLabels plugin incompatibility could crash pie, donut and other plots.
- Fixed #23 and #143 to obey gridPadding option.
- Fixed #233 with highlighter tooltip separator.
- Fixed #224 where type checking failing on GWT.
- Fixed #272 with pie highlighting not working on replot.
- Memory performance improvements.
- Changes to build script so everything should build when pulled from repo.
- Fixed issue #275, IE 6/7 don’t support array indexing of strings.
- Added event listener hooks for mouseUp, mouseDown, etc. to all line plots.
- Fixed bug with highlighter not working when null in data.
- Updated to jQuery 1.4.4
- Fixed bug where donut plots showed value of radians of slice instead of actual data.
- Reverted to excanvas r3 so IE8 no longer has to emulate IE7.
- Added tooltipContentEditor option to highlighter, allowing callback to manipulate tooltip content at run time (thanks Tim Bunce!).
- Fixed bug where axes scale not resetting.
- Fixed bug with date axes where data bounds not properly set.
- Fixed issue where tick marks disappear if grid lines turned off.
- Updated replot method to allow passing in axes options for more control.
- Added experimental support for “broken” axes.
- Fixed bug with pies where pies with 0 valued slices did not draw correctly.
- Added canvasOverlay plugin to allow drawing of arbitrary shapes on a canvas over the plot.
- Added option to display arbitrary text/html (message, animated gif, etc.) if plot is constructed without data. Allow a “data loading” indicator to be shown.
- Added resetAxisValues method to manually update axis ticks without redrawing the plot.
- Fix to labels on negative bars so label postiion of ‘n’ will be below a negative bar, just as it is above a positive bar (thanks guigod!).
- Added thousands separator character (‘) to sprintf formatting (thanks yuichi1004!).
- Re-factored date parsing/formatting to use new jsDate module which does not extend the Date prototype.
0.9.7
- Added Mekko chart plot type with enhanced legend and axes support.
- Implemented vertical waterfall charts. Can create waterfall plot as option to bar chart. See examples folder of distribution.
- Enhanced plot labels for waterfall style.
- Enhanced bar plots so you can now color each bar of a series independently with the “varyBarColor” option.
- Re-factored series drawing so that each series and series shadow drawn on it’s own canvas. Allows series to be redrawn independently of each other.
- Added additional default series colors.
- Added useNegativeColors option to turn off negative color array and use only seriesColors array to define all bar/filled line colors.
- Fix css for cursor legend.
- Modified shape renderer so rectangles can be stroked and filled.
- Re-factored date methods out of dateAxisRenderer so that date formatter and methods can be accesses outside of dateAxisRenderer plugin.
- Fixed #132, now trigger series change event on plot target instead of drag canvas.
- Fixes issue #116 where some source files had mix of tabs and spaces for indentation. Should have been all spaces.
- Fixed issue #126, some links broken in docs section of web site.
- Fixed issue #90, trendline plugin incompatibility with pie renderer.
- Updated samples in examples folder of distribution to include navigation links if web server is set up to process .html files with php.
0.9.6
- New, easier to use, replot() method for placing plots in tabs, accordions, resizable containers or for changing plot parameters programmatically.
- Updated legend renderer for pie charts to draw swatches which will print correctly.
- Fixed issue #118 with patch from taum so autoscale option will honor tickInterval and numberTicks options
- Fix to plot diameter calculation for initially hidden plots.
- Added examples for making plots in jQuery UI tabs and accordions.
- Fixed issue #120 where pie chart with single slice not displaying correctly in IE and Chrome
0.9.5.2
- Fixed #102 where double clicking on plot that has zoom enabled, but has not been zoomed resulted in error.
- Fixed bug where candlestick coloring options not working.
- Added option to turn individual series labels off in the legend.
0.9.5.1
- Fixed bug where tooltip not working with OHLC and candlestick charts.
- Added additional marker styles: plus, X and dash.
0.9.5
- Implemented “zoomProxy”. zoomProxy allows zooming one plot from another such as an overview plot.
- Zooming can now be constrained to just x or y axis.
- Enhanced cursor plugin with vertical “dataTracking” line. This is a line at the cursor location with a readout of data points at the line location which are displayed in the chart legend.
- Changed cursor tooltip format string. Now one format string is used for entire tooltip.
- Added mechanisms to specify plot size when plot target is hidden or plot height/width otherwise cannot be determined from markup.
- Added $.jqplot.config object to specify jqplot wide configuration options. These include enablePlugins to globally set the default plugin state on/off and defaultHeight/defaultWidth to specify default plot height/width.
- Added fillToZero option which forces filled charts to fill to zero as opposed to axis minimum. Thus negative filled bar/line values will fill upwards to zero axis value.
- Added option to disable stacking on individual lines.
- Changed targetId property of the plot object so it now includes a “#” before the id string.
- Improved tick and body sizing of Open Hi Low Close and candlestick charts.
- Removed lots of web site related files from the repository. This means that, if working from the sources, user’s won’t be able to build the jqplot web site and the docs/tests that are hosted on that site. The minified and compressed distribution packages will build fine.
- Lots of examples were added to a separate examples directory to better show functionality of jqPlot for local testing with the distribution.
- Many various bug fixes and other minor enhancements.
0.9.4
- Implemented axis labels. Labels can be rendered in div tags or as canvas elements supporting rotated text.
- Improved rotated axis label positioning so labels will start or end at a tick position.
- Fixed bug where an empty data series would hang plot rendering.
- completed issue #66 for misc. improvements to documentation.
- Fixed issue #64 where the same ID’s were assigned to cursor and highlighter elements.
- Added option to legend to encode special HTML characters.
- Fixed undesirable behavior where point labels for points off the plot were being rendered.
- Added edgeTolerance option to point label renderer to control rendering of labels near plot edges.
0.9.3
- Preliminary support for axis labels. Currently rendered into DIV tags, so no rotated label support. This feature is currently experimental.
- Fixed bug #52, needed space in tick div tag between style and class declarations or plot failed in certain application doctypes.
- Fixed issue #54, miter style line join for chart lines causing spikes at steep changes in slope. Changed miter style to round.
- Added examples for new autoscaling algorithm.
- Fixed bug #57, category axis labels disappear on redraw()
- Improved algorithm which controlled maximum number of labels that would display on a category axis.
- Fixed bug #45 where null values causing errors in plotData and gridData.
- Fixed issue #60 where seriesColors option was not working.
0.9.2
- Fixed bug #45 where a plot could crash if series had different numbers of points.
- Fixed issue #50, added option to turn off sorting of series data.
- Fixed issue #31, implemented a better axis autoscaling algorithm and added an autoscale option.
0.9.1
- Fixed bug #40, when axis pad, padMax, padMin set to 0, graph would fail to render.
- Fixed bug #41 where pie and bar charts not rendered correctly on redraw().
- Fixed bug #11, filled stacked line plots not rendering correctly in IE.
- Fixed bug #42 where stacked charts not rendering with string date axis ticks.
- Fixed bug in redraw() method where axes ticks were not reset.
- Fixed “jqplotPreRedrawEvent” that should have been named “jqplotPostRedraw” event.
0.9.0
- Added Open Hi Low Close charts, Candlestick charts and Hi Low Close charts.
- Added support for arbitrary labels on the data points.
- Enhanced highlighter plugin to allow custom formatting control of entire tooltip.
- Enhanced highlighter to support multiple y values in a data point.
- Fixed bug #38 where series with a single point with a negative value would fail.
- Improvements to examples to show what plugins to include.
- Expanded documentation for some of the plugins.
0.8.5
- Added zooming ability with double click or single click options to reset zoom.
- Modified default tick spacing algorithm for date axes to give more space to ticks.
- Fixed bug #2 where tickInterval wasn’t working properly.
- Added neighborThreshold option to control how close mouse must be to point to trigger neighbor detection.
- Added double click event handler on plot.
0.8.0
- Support for up to 9 y axes.
- Added option to control padding at max/min bounds of axes separately.
- Closed issue #21, added options to control grid line color and width.
- Closed issue #20, added options to filled line charts to stoke above fill and customize fill color and transparency.
- Improved structure of on line documentation to make usage and options docs default.
- Added much documentation on options and css styling.
0.7.1
- Bug fix release
- Fixed bug #6, missing semi-colons messing up some javascript compressors.
- Fixed bug #13 where 2D ticks array of [values, labels] would fail to renderer with DateAxisRenderer.
- Fixes bug #16 where pie renderer overwriting options for all plot types and crashing non pie plots.
- Fixes bug #17 constrainTo dragable option mispelled as “contstrainTo”. Fixed dragable color issue when used with trend lines.
0.7.0
- Pie chart support
- Enabled tooltipLocation option in highlighter.
- Highlighter Tooltip will account for mark size and highlight size when positioning itself.
- Added ability to show just x, y or both axes in highlighter tooltip.
- Added customization of separator between axes values in highlighter tooltip.
- Modified how shadows are drawn for lines, bars and markers. Now drawn first, so they are always behind the object.
- Adjustments to shadow parameters on lines to account for new shadow positioning.
- Added a ColorGenerator class to robustly return next available color for a plot with wrap around to first color at end.
- Udates to docs about css file.
- Fixed bug with String x values in series and IE error on sorting (Category Axis).
- Added cursor changes in dragable plugin when cursor near dragable point.
0.6.6b
- Added excanvas.js and excanvas.min.js to compressed distributions.
- Added example/test html pages I had locally into repository and to compressed distributions.
0.6.6a
- Removed absolute positioning from dom element and put back into css file.
- Duplicate of 0.6.6 with a suffix to unambiguously differentiate between previously posted 0.6.6 release.
0.6.6
- Fixed bug #5, trend line plugin failing when no trend line options specified.
- Added absolute position css spec to axis tick dom element.
- Enhancement to category axes, more intuitive handling of series with missing data values.
0.6.5
- Fixed bug #4, series of unequal data length not rendering correctly. This is a bugfix release only.
0.6.4
- Fixed bug (issue #1 in tracker) where flat line data series (all x and/or y values are euqal) or single value data series would crash.
0.6.3
- Support for stacked line (a.k.a. area) and stacked bar (horizontal and vertical) charts.
- Refactored barRenderer to use default shape and shadow renderers.
- Added info (contacts & support information) page to web site.
0.6.2
- This is a minor upgrade to docs and build only. No functionality has changed.
- Ant build script generates entire site, examples, tests and distribution.
- Improvements to documentation.
0.6.1
- New sprintf implementation from Ash Searle that implements %g.
- Fix to sprintf e/f formats.
- Created new format specifier, %p and %P to preserve significance.
- Modified p/P format to better display larger numbers.
- Fixed and simplified significant digits calculation for sprintf.
- Added option to have cursor tooltip follow the mouse or not.
- Added options to change size of highlight.
- Updates to handle dates like ‘6-May-09’.
- Mods to improve look of web site.
- Updates to documentation.
- Added license and copyright statement to source files.
0.6.0
- Added rotated text support. Uses native canvas text functionality in browsers that support it or draws text on canvas with Hershey font
- metrics for non-supporting browsers.
- Removed lots of lint in js code.
- Moved tick css from js code into css file.
- Fix to tick positioning css. y axis ticks were positioned to wrong side of axis div.
- Re-factored axis tick renderer instantiation into the axes renderers themselves.
For changes prior to 0.6.0 release, please see change log at http://bitbucket.org/cleonello/jqplot/changesets/
GNU GENERAL PUBLIC LICENSE Version 2, June 1991
Copyright © 1989, 1991 Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA Everyone is permitted to copy and distribute verbatim copies of this license document, but changing it is not allowed.
Preamble
The licenses for most software are designed to take away your freedom to share and change it. By contrast, the GNU General Public License is intended to guarantee your freedom to share and change free software--to make sure the software is free for all its users. This General Public License applies to most of the Free Software Foundation’s software and to any other program whose authors commit to using it. (Some other Free Software Foundation software is covered by the GNU Lesser General Public License instead.) You can apply it to your programs, too.
When we speak of free software, we are referring to freedom, not price. Our General Public Licenses are designed to make sure that you have the freedom to distribute copies of free software (and charge for this service if you wish), that you receive source code or can get it if you want it, that you can change the software or use pieces of it in new free programs; and that you know you can do these things.
To protect your rights, we need to make restrictions that forbid anyone to deny you these rights or to ask you to surrender the rights. These restrictions translate to certain responsibilities for you if you distribute copies of the software, or if you modify it.
For example, if you distribute copies of such a program, whether gratis or for a fee, you must give the recipients all the rights that you have. You must make sure that they, too, receive or can get the source code. And you must show them these terms so they know their rights.
We protect your rights with two steps: (1) copyright the software, and (2) offer you this license which gives you legal permission to copy, distribute and/or modify the software.
Also, for each author’s protection and ours, we want to make certain that everyone understands that there is no warranty for this free software. If the software is modified by someone else and passed on, we want its recipients to know that what they have is not the original, so that any problems introduced by others will not reflect on the original authors’ reputations.
Finally, any free program is threatened constantly by software patents. We wish to avoid the danger that redistributors of a free program will individually obtain patent licenses, in effect making the program proprietary. To prevent this, we have made it clear that any patent must be licensed for everyone’s free use or not licensed at all.
The precise terms and conditions for copying, distribution and modification follow.
GNU GENERAL PUBLIC LICENSE TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
0. This License applies to any program or other work which contains a notice placed by the copyright holder saying it may be distributed under the terms of this General Public License. The “Program”, below, refers to any such program or work, and a “work based on the Program” means either the Program or any derivative work under copyright law: that is to say, a work containing the Program or a portion of it, either verbatim or with modifications and/or translated into another language. (Hereinafter, translation is included without limitation in the term “modification”.) Each licensee is addressed as “you”.
Activities other than copying, distribution and modification are not covered by this License; they are outside its scope. The act of running the Program is not restricted, and the output from the Program is covered only if its contents constitute a work based on the Program (independent of having been made by running the Program). Whether that is true depends on what the Program does.
1. You may copy and distribute verbatim copies of the Program’s source code as you receive it, in any medium, provided that you conspicuously and appropriately publish on each copy an appropriate copyright notice and disclaimer of warranty; keep intact all the notices that refer to this License and to the absence of any warranty; and give any other recipients of the Program a copy of this License along with the Program.
You may charge a fee for the physical act of transferring a copy, and you may at your option offer warranty protection in exchange for a fee.
2. You may modify your copy or copies of the Program or any portion of it, thus forming a work based on the Program, and copy and distribute such modifications or work under the terms of Section 1 above, provided that you also meet all of these conditions:
a) You must cause the modified files to carry prominent notices stating that you changed the files and the date of any change.
b) You must cause any work that you distribute or publish, that in whole or in part contains or is derived from the Program or any part thereof, to be licensed as a whole at no charge to all third parties under the terms of this License.
c) If the modified program normally reads commands interactively when run, you must cause it, when started running for such interactive use in the most ordinary way, to print or display an announcement including an appropriate copyright notice and a notice that there is no warranty (or else, saying that you provide a warranty) and that users may redistribute the program under these conditions, and telling the user how to view a copy of this License. (Exception: if the Program itself is interactive but does not normally print such an announcement, your work based on the Program is not required to print an announcement.)
These requirements apply to the modified work as a whole. If identifiable sections of that work are not derived from the Program, and can be reasonably considered independent and separate works in themselves, then this License, and its terms, do not apply to those sections when you distribute them as separate works. But when you distribute the same sections as part of a whole which is a work based on the Program, the distribution of the whole must be on the terms of this License, whose permissions for other licensees extend to the entire whole, and thus to each and every part regardless of who wrote it.
Thus, it is not the intent of this section to claim rights or contest your rights to work written entirely by you; rather, the intent is to exercise the right to control the distribution of derivative or collective works based on the Program.
In addition, mere aggregation of another work not based on the Program with the Program (or with a work based on the Program) on a volume of a storage or distribution medium does not bring the other work under the scope of this License.
3. You may copy and distribute the Program (or a work based on it, under Section 2) in object code or executable form under the terms of Sections 1 and 2 above provided that you also do one of the following:
a) Accompany it with the complete corresponding machine-readable source code, which must be distributed under the terms of Sections 1 and 2 above on a medium customarily used for software interchange; or,
b) Accompany it with a written offer, valid for at least three years, to give any third party, for a charge no more than your cost of physically performing source distribution, a complete machine-readable copy of the corresponding source code, to be distributed under the terms of Sections 1 and 2 above on a medium customarily used for software interchange; or,
c) Accompany it with the information you received as to the offer to distribute corresponding source code. (This alternative is allowed only for noncommercial distribution and only if you received the program in object code or executable form with such an offer, in accord with Subsection b above.)
The source code for a work means the preferred form of the work for making modifications to it. For an executable work, complete source code means all the source code for all modules it contains, plus any associated interface definition files, plus the scripts used to control compilation and installation of the executable. However, as a special exception, the source code distributed need not include anything that is normally distributed (in either source or binary form) with the major components (compiler, kernel, and so on) of the operating system on which the executable runs, unless that component itself accompanies the executable.
If distribution of executable or object code is made by offering access to copy from a designated place, then offering equivalent access to copy the source code from the same place counts as distribution of the source code, even though third parties are not compelled to copy the source along with the object code.
4. You may not copy, modify, sublicense, or distribute the Program except as expressly provided under this License. Any attempt otherwise to copy, modify, sublicense or distribute the Program is void, and will automatically terminate your rights under this License. However, parties who have received copies, or rights, from you under this License will not have their licenses terminated so long as such parties remain in full compliance.
5. You are not required to accept this License, since you have not signed it. However, nothing else grants you permission to modify or distribute the Program or its derivative works. These actions are prohibited by law if you do not accept this License. Therefore, by modifying or distributing the Program (or any work based on the Program), you indicate your acceptance of this License to do so, and all its terms and conditions for copying, distributing or modifying the Program or works based on it.
6. Each time you redistribute the Program (or any work based on the Program), the recipient automatically receives a license from the original licensor to copy, distribute or modify the Program subject to these terms and conditions. You may not impose any further restrictions on the recipients’ exercise of the rights granted herein. You are not responsible for enforcing compliance by third parties to this License.
7. If, as a consequence of a court judgment or allegation of patent infringement or for any other reason (not limited to patent issues), conditions are imposed on you (whether by court order, agreement or otherwise) that contradict the conditions of this License, they do not excuse you from the conditions of this License. If you cannot distribute so as to satisfy simultaneously your obligations under this License and any other pertinent obligations, then as a consequence you may not distribute the Program at all. For example, if a patent license would not permit royalty-free redistribution of the Program by all those who receive copies directly or indirectly through you, then the only way you could satisfy both it and this License would be to refrain entirely from distribution of the Program.
If any portion of this section is held invalid or unenforceable under any particular circumstance, the balance of the section is intended to apply and the section as a whole is intended to apply in other circumstances.
It is not the purpose of this section to induce you to infringe any patents or other property right claims or to contest validity of any such claims; this section has the sole purpose of protecting the integrity of the free software distribution system, which is implemented by public license practices. Many people have made generous contributions to the wide range of software distributed through that system in reliance on consistent application of that system; it is up to the author/donor to decide if he or she is willing to distribute software through any other system and a licensee cannot impose that choice.
This section is intended to make thoroughly clear what is believed to be a consequence of the rest of this License.
8. If the distribution and/or use of the Program is restricted in certain countries either by patents or by copyrighted interfaces, the original copyright holder who places the Program under this License may add an explicit geographical distribution limitation excluding those countries, so that distribution is permitted only in or among countries not thus excluded. In such case, this License incorporates the limitation as if written in the body of this License.
9. The Free Software Foundation may publish revised and/or new versions of the General Public License from time to time. Such new versions will be similar in spirit to the present version, but may differ in detail to address new problems or concerns.
Each version is given a distinguishing version number. If the Program specifies a version number of this License which applies to it and “any later version”, you have the option of following the terms and conditions either of that version or of any later version published by the Free Software Foundation. If the Program does not specify a version number of this License, you may choose any version ever published by the Free Software Foundation.
10. If you wish to incorporate parts of the Program into other free programs whose distribution conditions are different, write to the author to ask for permission. For software which is copyrighted by the Free Software Foundation, write to the Free Software Foundation; we sometimes make exceptions for this. Our decision will be guided by the two goals of preserving the free status of all derivatives of our free software and of promoting the sharing and reuse of software generally.
NO WARRANTY
11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM “AS IS” WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
12. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES.
GPL License
Much of the styling of jqPlot is done by css. The jqPlot css file is, unremarkably, jquery.jqplot.css and resides in the same directory as jqPlot itself.
There exist some styling related javascript properties on the plot objects themselves (like fontStyle, fontSize, etc.). These can be set with the options object at plot creation. Generally, setting these options is NOT the preferred way to customize the look of the plot. Use the css file instead. These options are deprecated and may disappear. The exceptions are certain background and color options which control attributes of something renderered on a canvas. This would be line color, grid background, etc. These must be set by the options object. For a list of available options, see jqPlot Options.
Objects in the plot that can be customized by css are given a css class like “.jqplot-*”. For example, the plot title will have a “.jqplot-title” class, the axes “.jqplot-axis”, etc.
Currently assigned classes in jqPlot are as follows:
| .jqplot-target | Styles for the plot target div. These will be cascaded down to all plot elements according to css rules. |
| .jqplot-axis | Styles for all axes |
| .jqplot-xaxis | Styles applied to the primary x axis only. |
| .jqplot-yaxis | Styles applied to the primary y axis only. |
| .jqplot-x2axis, .jqplot-x3axis, ... | Styles applied to the 2nd, 3rd, etc. x axis only. |
| .jqplot-y2axis, .jqplot-y3axis, ... | Styles applied to the 2nd, 3rd, etc.y axis only. |
| .jqplot-axis-tick | Styles applied to all axis ticks |
| .jqplot-xaxis-tick | Styles applied to primary x axis ticks only. |
| .jqplot-x2axis-tick | Styles applied to secondary x axis ticks only. |
| .jqplot-yaxis-tick | Styles applied to primary y axis ticks only. |
| .jqplot-y2axis-tick | Styles applied to secondary y axis ticks only. |
| table.jqplot-table-legend | Styles applied to the legend box table. |
| .jqplot-title | Styles applied to the title. |
| .jqplot-cursor-tooltip | Styles applied to the cursor tooltip |
| .jqplot-highlighter-tooltip | Styles applied to the highlighter tooltip. |
| div.jqplot-table-legend-swatch | the div element used for the colored swatch on the legend. |
Note that axes will be assigned 2 classes like: class=”.jqplot-axis .jqplot-xaxis”.
This document is out of date.
This document is out of date. While the options described here should still be relavent and valid, it has not been updated for many new options. Sorry for this inconvenience.
This document describes the options available to jqPlot. These are set with the third argument to the $.jqplot(‘target’, data, options) function. Options are using the following convention:
property: default, // notes
This document is not complete! Not all options are shown! Also, Options marked with * in the notes are post 0.7.1 additions. They will be available in the next release. Further information about the options can be found in the online API documentation. For details on how the options relate to the API documentation, see the Options Tutorial in the optionsTutorial.txt file.
options =
+{
+ seriesColors: [ "#4bb2c5", "#c5b47f", "#EAA228", "#579575", "#839557", "#958c12",
+ "#953579", "#4b5de4", "#d8b83f", "#ff5800", "#0085cc"], // colors that will
+ // be assigned to the series. If there are more series than colors, colors
+ // will wrap around and start at the beginning again.
+
+ stackSeries: false, // if true, will create a stack plot.
+ // Currently supported by line and bar graphs.
+
+ title: '', // Title for the plot. Can also be specified as an object like:
+
+ title: {
+ text: '', // title for the plot,
+ show: true,
+ },
+
+ axesDefaults: {
+ show: false, // wether or not to renderer the axis. Determined automatically.
+ min: null, // minimum numerical value of the axis. Determined automatically.
+ max: null, // maximum numverical value of the axis. Determined automatically.
+ pad: 1.2, // a factor multiplied by the data range on the axis to give the
+ // axis range so that data points don't fall on the edges of the axis.
+ ticks: [], // a 1D [val1, val2, ...], or 2D [[val, label], [val, label], ...]
+ // array of ticks to use. Computed automatically.
+ numberTicks: undefined,
+ renderer: $.jqplot.LinearAxisRenderer, // renderer to use to draw the axis,
+ rendererOptions: {}, // options to pass to the renderer. LinearAxisRenderer
+ // has no options,
+ tickOptions: {
+ mark: 'outside', // Where to put the tick mark on the axis
+ // 'outside', 'inside' or 'cross',
+ showMark: true,
+ showGridline: true, // wether to draw a gridline (across the whole grid) at this tick,
+ markSize: 4, // length the tick will extend beyond the grid in pixels. For
+ // 'cross', length will be added above and below the grid boundary,
+ show: true, // wether to show the tick (mark and label),
+ showLabel: true, // wether to show the text label at the tick,
+ formatString: '', // format string to use with the axis tick formatter
+ }
+ showTicks: true, // wether or not to show the tick labels,
+ showTickMarks: true, // wether or not to show the tick marks
+ },
+
+ axes: {
+ xaxis: {
+ // same options as axesDefaults
+ },
+ yaxis: {
+ // same options as axesDefaults
+ },
+ x2axis: {
+ // same options as axesDefaults
+ },
+ y2axis: {
+ // same options as axesDefaults
+ }
+ },
+
+ seriesDefaults: {
+ show: true, // wether to render the series.
+ xaxis: 'xaxis', // either 'xaxis' or 'x2axis'.
+ yaxis: 'yaxis', // either 'yaxis' or 'y2axis'.
+ label: '', // label to use in the legend for this line.
+ color: '', // CSS color spec to use for the line. Determined automatically.
+ lineWidth: 2.5, // Width of the line in pixels.
+ shadow: true, // show shadow or not.
+ shadowAngle: 45, // angle (degrees) of the shadow, clockwise from x axis.
+ shadowOffset: 1.25, // offset from the line of the shadow.
+ shadowDepth: 3, // Number of strokes to make when drawing shadow. Each
+ // stroke offset by shadowOffset from the last.
+ shadowAlpha: 0.1, // Opacity of the shadow.
+ showLine: true, // whether to render the line segments or not.
+ showMarker: true, // render the data point markers or not.
+ fill: false, // fill under the line,
+ fillAndStroke: false, // *stroke a line at top of fill area.
+ fillColor: undefined, // *custom fill color for filled lines (default is line color).
+ fillAlpha: undefined, // *custom alpha to apply to fillColor.
+ renderer: $.jqplot.LineRenderer], // renderer used to draw the series.
+ rendererOptions: {}, // options passed to the renderer. LineRenderer has no options.
+ markerRenderer: $.jqplot.MarkerRenderer, // renderer to use to draw the data
+ // point markers.
+ markerOptions: {
+ show: true, // wether to show data point markers.
+ style: 'filledCircle', // circle, diamond, square, filledCircle.
+ // filledDiamond or filledSquare.
+ lineWidth: 2, // width of the stroke drawing the marker.
+ size: 9, // size (diameter, edge length, etc.) of the marker.
+ color: '#666666' // color of marker, set to color of line by default.
+ shadow: true, // wether to draw shadow on marker or not.
+ shadowAngle: 45, // angle of the shadow. Clockwise from x axis.
+ shadowOffset: 1, // offset from the line of the shadow,
+ shadowDepth: 3, // Number of strokes to make when drawing shadow. Each stroke
+ // offset by shadowOffset from the last.
+ shadowAlpha: 0.07 // Opacity of the shadow
+ }
+ },
+
+ series:[
+ {Each series has same options as seriesDefaults},
+ {You can override each series individually here}
+ ],
+
+ legend: {
+ show: false,
+ location: 'ne', // compass direction, nw, n, ne, e, se, s, sw, w.
+ xoffset: 12, // pixel offset of the legend box from the x (or x2) axis.
+ yoffset: 12, // pixel offset of the legend box from the y (or y2) axis.
+ },
+
+ grid: {
+ drawGridLines: true, // wether to draw lines across the grid or not.
+ gridLineColor: '#cccccc' // *Color of the grid lines.
+ background: '#fffdf6', // CSS color spec for background color of grid.
+ borderColor: '#999999', // CSS color spec for border around grid.
+ borderWidth: 2.0, // pixel width of border around grid.
+ shadow: true, // draw a shadow for grid.
+ shadowAngle: 45, // angle of the shadow. Clockwise from x axis.
+ shadowOffset: 1.5, // offset from the line of the shadow.
+ shadowWidth: 3, // width of the stroke for the shadow.
+ shadowDepth: 3, // Number of strokes to make when drawing shadow.
+ // Each stroke offset by shadowOffset from the last.
+ shadowAlpha: 0.07 // Opacity of the shadow
+ renderer: $.jqplot.CanvasGridRenderer, // renderer to use to draw the grid.
+ rendererOptions: {} // options to pass to the renderer. Note, the default
+ // CanvasGridRenderer takes no additional options.
+ },
+
+ // Plugin and renderer options.
+
+ // BarRenderer.
+ // With BarRenderer, you can specify additional options in the rendererOptions object
+ // on the series or on the seriesDefaults object. Note, some options are respecified
+ // (like shadowDepth) to override lineRenderer defaults from which BarRenderer inherits.
+
+ seriesDefaults: {
+ rendererOptions: {
+ barPadding: 8, // number of pixels between adjacent bars in the same
+ // group (same category or bin).
+ barMargin: 10, // number of pixels between adjacent groups of bars.
+ barDirection: 'vertical', // vertical or horizontal.
+ barWidth: null, // width of the bars. null to calculate automatically.
+ shadowOffset: 2, // offset from the bar edge to stroke the shadow.
+ shadowDepth: 5, // nuber of strokes to make for the shadow.
+ shadowAlpha: 0.8, // transparency of the shadow.
+ }
+ },
+
+ // Cursor
+ // Options are passed to the cursor plugin through the "cursor" object at the top
+ // level of the options object.
+
+ cursor: {
+ style: 'crosshair', // A CSS spec for the cursor type to change the
+ // cursor to when over plot.
+ show: true,
+ showTooltip: true, // show a tooltip showing cursor position.
+ followMouse: false, // wether tooltip should follow the mouse or be stationary.
+ tooltipLocation: 'se', // location of the tooltip either relative to the mouse
+ // (followMouse=true) or relative to the plot. One of
+ // the compass directions, n, ne, e, se, etc.
+ tooltipOffset: 6, // pixel offset of the tooltip from the mouse or the axes.
+ showTooltipGridPosition: false, // show the grid pixel coordinates of the mouse
+ // in the tooltip.
+ showTooltipUnitPosition: true, // show the coordinates in data units of the mouse
+ // in the tooltip.
+ tooltipFormatString: '%.4P', // sprintf style format string for tooltip values.
+ useAxesFormatters: true, // wether to use the same formatter and formatStrings
+ // as used by the axes, or to use the formatString
+ // specified on the cursor with sprintf.
+ tooltipAxesGroups: [], // show only specified axes groups in tooltip. Would specify like:
+ // [['xaxis', 'yaxis'], ['xaxis', 'y2axis']]. By default, all axes
+ // combinations with for the series in the plot are shown.
+
+ },
+
+ // Dragable
+ // Dragable options are specified with the "dragable" object at the top level
+ // of the options object.
+
+ dragable: {
+ color: undefined, // custom color to use for the dragged point and dragged line
+ // section. default will use a transparent variant of the line color.
+ constrainTo: 'none', // Constrain dragging motion to an axis: 'x', 'y', or 'none'.
+ },
+
+ // Highlighter
+ // Highlighter options are specified with the "highlighter" object at the top level
+ // of the options object.
+
+ highlighter: {
+ lineWidthAdjust: 2.5, // pixels to add to the size line stroking the data point marker
+ // when showing highlight. Only affects non filled data point markers.
+ sizeAdjust: 5, // pixels to add to the size of filled markers when drawing highlight.
+ showTooltip: true, // show a tooltip with data point values.
+ tooltipLocation: 'nw', // location of tooltip: n, ne, e, se, s, sw, w, nw.
+ fadeTooltip: true, // use fade effect to show/hide tooltip.
+ tooltipFadeSpeed: "fast"// slow, def, fast, or a number of milliseconds.
+ tooltipOffset: 2, // pixel offset of tooltip from the highlight.
+ tooltipAxes: 'both', // which axis values to display in the tooltip, x, y or both.
+ tooltipSeparator: ', ' // separator between values in the tooltip.
+ useAxesFormatters: true // use the same format string and formatters as used in the axes to
+ // display values in the tooltip.
+ tooltipFormatString: '%.5P' // sprintf format string for the tooltip. only used if
+ // useAxesFormatters is false. Will use sprintf formatter with
+ // this string, not the axes formatters.
+ },
+
+ // LogAxisRenderer
+ // LogAxisRenderer add 2 options to the axes object. These options are specified directly on
+ // the axes or axesDefaults object.
+
+ axesDefaults: {
+ base: 10, // the logarithmic base.
+ tickDistribution: 'even', // 'even' or 'power'. 'even' will produce with even visiual (pixel)
+ // spacing on the axis. 'power' will produce ticks spaced by
+ // increasing powers of the log base.
+ },
+
+ // PieRenderer
+ // PieRenderer accepts options from the rendererOptions object of the series or seriesDefaults object.
+
+ seriesDefaults: {
+ rendererOptions: {
+ diameter: undefined, // diameter of pie, auto computed by default.
+ padding: 20, // padding between pie and neighboring legend or plot margin.
+ sliceMargin: 0, // gap between slices.
+ fill: true, // render solid (filled) slices.
+ shadowOffset: 2, // offset of the shadow from the chart.
+ shadowDepth: 5, // Number of strokes to make when drawing shadow. Each stroke
+ // offset by shadowOffset from the last.
+ shadowAlpha: 0.07 // Opacity of the shadow
+ }
+ },
+
+ // Trendline
+ // Trendline takes options on the trendline object of the series or seriesDefaults object.
+
+ seriesDefaults: {
+ trendline: {
+ show: true, // show the trend line
+ color: '#666666', // CSS color spec for the trend line.
+ label: '', // label for the trend line.
+ type: 'linear', // 'linear', 'exponential' or 'exp'
+ shadow: true, // show the trend line shadow.
+ lineWidth: 1.5, // width of the trend line.
+ shadowAngle: 45, // angle of the shadow. Clockwise from x axis.
+ shadowOffset: 1.5, // offset from the line of the shadow.
+ shadowDepth: 3, // Number of strokes to make when drawing shadow.
+ // Each stroke offset by shadowOffset from the last.
+ shadowAlpha: 0.07 // Opacity of the shadow
+ }
+ }
+}This document will help you understand how jqPlot’s options relate to the API documentation and the jqPlot object itself.
Renderer to place labels on the axes.
Summary
| $.jqplot. | Renderer to place labels on the axes. |
| Properties | |
| show | wether or not to show the tick (mark and label). |
| label | The text or html for the label. |
| escapeHTML | true to escape HTML entities in the label. |
wether or not to show the tick (mark and label).
this.show = true
The text or html for the label.
this.label = ''
true to escape HTML entities in the label.
this.escapeHTML = false
A “tick” object showing the value of a tick/gridline on the plot.
Summary
| $.jqplot. | A “tick” object showing the value of a tick/gridline on the plot. |
| Properties | |
| mark | tick mark on the axis. |
| showMark | wether or not to show the mark on the axis. |
| showGridline | wether or not to draw the gridline on the grid at this tick. |
| isMinorTick | if this is a minor tick. |
| size | Length of the tick beyond the grid in pixels. |
| markSize | Length of the tick marks in pixels. |
| show | wether or not to show the tick (mark and label). |
| showLabel | wether or not to show the label. |
| formatter | A class of a formatter for the tick text. |
| prefix | String to prepend to the tick label. |
| suffix | String to append to the tick label. |
| formatString | string passed to the formatter. |
| fontFamily | css spec for the font-family css attribute. |
| fontSize | css spec for the font-size css attribute. |
| textColor | css spec for the color attribute. |
| escapeHTML | true to escape HTML entities in the label. |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
tick mark on the axis.
this.mark = 'outside'
wether or not to show the mark on the axis.
this.showMark = true
wether or not to draw the gridline on the grid at this tick.
this.showGridline = true
if this is a minor tick.
this.isMinorTick = false
Length of the tick beyond the grid in pixels.
this.size = 4
Length of the tick marks in pixels.
this.markSize = 6
wether or not to show the tick (mark and label).
this.show = true
wether or not to show the label.
this.showLabel = true
A class of a formatter for the tick text.
this.formatter = $.jqplot.DefaultTickFormatter
String to prepend to the tick label.
this.prefix = ''
String to append to the tick label.
this.suffix = ''
string passed to the formatter.
this.formatString = ''
css spec for the font-family css attribute.
this.fontFamily
css spec for the font-size css attribute.
this.fontSize
css spec for the color attribute.
this.textColor
true to escape HTML entities in the label.
this.escapeHTML = false
The default jqPlot grid renderer, creating a grid on a canvas element. The renderer has no additional options beyond the Grid class.
Object representing the grid on which the plot is drawn.
Pure JavaScript plotting plugin for jQuery.
Summary
| jqPlot Charts | Pure JavaScript plotting plugin for jQuery. |
| Version | version: 1.0.4 revision: 1121 |
| Copyright & License | Copyright © 2009-2012 Chris Leonello jqPlot is currently available for use in all personal or commercial projects under both the MIT and GPL version 2.0 licenses. |
| Introduction | jqPlot requires jQuery (1.4+ required for certain features). |
| Usage | See jqPlot Usage |
| Available Options | See jqPlot Options for a list of options available thorugh the options object (not complete yet!) |
| Options Usage | See Options Tutorial |
| Changes | See Change Log |
| $.jqplot | jQuery function called by the user to create a plot. |
| Hooks | |
| jqPlot Pugin Hooks | |
| Axis | An individual axis object. |
| Properties | Axes options are specified within an axes object at the top level of the plot options like so: |
| show | Wether to display the axis on the graph. |
| tickRenderer | A class of a rendering engine for creating the ticks labels displayed on the plot, See $.jqplot.AxisTickRenderer. |
| tickOptions | Options that will be passed to the tickRenderer, see $.jqplot.AxisTickRenderer options. |
| labelRenderer | A class of a rendering engine for creating an axis label. |
| labelOptions | Options passed to the label renderer. |
| label | Label for the axis |
| showLabel | true to show the axis label. |
| min | minimum value of the axis (in data units, not pixels). |
| max | maximum value of the axis (in data units, not pixels). |
| autoscale | DEPRECATED the default scaling algorithm produces superior results. |
| pad | Padding to extend the range above and below the data bounds. |
| padMax | Padding to extend the range above data bounds. |
| padMin | Padding to extend the range below data bounds. |
| ticks | 1D [val, val, ...] or 2D [[val, label], [val, label], ...] array of ticks for the axis. |
| numberTicks | Desired number of ticks. |
| tickInterval | number of units between ticks. |
| renderer | A class of a rendering engine that handles tick generation, scaling input data to pixel grid units and drawing the axis element. |
| rendererOptions | renderer specific options. |
| showTicks | Wether to show the ticks (both marks and labels) or not. |
| showTickMarks | Wether to show the tick marks (line crossing grid) or not. |
| showMinorTicks | Wether or not to show minor ticks. |
| drawMajorGridlines | True to draw gridlines for major axis ticks. |
| drawMinorGridlines | True to draw gridlines for minor ticks. |
| drawMajorTickMarks | True to draw tick marks for major axis ticks. |
| drawMinorTickMarks | True to draw tick marks for minor ticks. |
| useSeriesColor | Use the color of the first series associated with this axis for the tick marks and line bordering this axis. |
| borderWidth | width of line stroked at the border of the axis. |
| borderColor | color of the border adjacent to the axis. |
| scaleToHiddenSeries | True to include hidden series when computing axes bounds and scaling. |
| syncTicks | true to try and synchronize tick spacing across multiple axes so that ticks and grid lines line up. |
| tickSpacing | Approximate pixel spacing between ticks on graph. |
| Legend | Legend object. |
| Properties | |
| show | Wether to display the legend on the graph. |
| location | Placement of the legend. |
| labels | Array of labels to use. |
| showLabels | true to show the label text on the legend. |
| showSwatch | true to show the color swatches on the legend. |
| placement | “insideGrid” places legend inside the grid area of the plot. |
| xoffset | DEPRECATED. |
| yoffset | DEPRECATED. |
| border | css spec for the border around the legend box. |
| background | css spec for the background of the legend box. |
| textColor | css color spec for the legend text. |
| fontFamily | css font-family spec for the legend text. |
| fontSize | css font-size spec for the legend text. |
| rowSpacing | css padding-top spec for the rows in the legend. |
| rendererOptions | renderer specific options passed to the renderer. |
| predraw | Wether to draw the legend before the series or not. |
| marginTop | CSS margin for the legend DOM element. |
| marginRight | CSS margin for the legend DOM element. |
| marginBottom | CSS margin for the legend DOM element. |
| marginLeft | CSS margin for the legend DOM element. |
| escapeHtml | True to escape special characters with their html entity equivalents in legend text. |
| Title | Plot Title object. |
| Properties | |
| text | text of the title; |
| show | wether or not to show the title |
| fontFamily | css font-family spec for the text. |
| fontSize | css font-size spec for the text. |
| textAlign | css text-align spec for the text. |
| textColor | css color spec for the text. |
| renderer | A class for creating a DOM element for the title, see $.jqplot.DivTitleRenderer. |
| rendererOptions | renderer specific options passed to the renderer. |
| escapeHtml | True to escape special characters with their html entity equivalents in title text. |
| Series | An individual data series object. |
| Properties | Properties will be assigned from a series array at the top level of the options. |
| show | wether or not to draw the series. |
| xaxis | which x axis to use with this series, either ‘xaxis’ or ‘x2axis’. |
| yaxis | which y axis to use with this series, either ‘yaxis’ or ‘y2axis’. |
| renderer | A class of a renderer which will draw the series, see $.jqplot.LineRenderer. |
| rendererOptions | Options to pass on to the renderer. |
| label | Line label to use in the legend. |
| showLabel | true to show label for this series in the legend. |
| color | css color spec for the series |
| negativeColor | css color spec used for filled (area) plots that are filled to zero and the “useNegativeColors” option is true. |
| lineWidth | width of the line in pixels. |
| lineJoin | Canvas lineJoin style between segments of series. |
| lineCap | Canvas lineCap style at ends of line. |
| linePattern | line pattern ‘dashed’, ‘dotted’, ‘solid’, some combination of ‘-’ and ‘.’ |
| shadowAngle | Shadow angle in degrees |
| shadowOffset | Shadow offset from line in pixels |
| shadowDepth | Number of times shadow is stroked, each stroke offset shadowOffset from the last. |
| shadowAlpha | Alpha channel transparency of shadow. |
| breakOnNull | Wether line segments should be be broken at null value. |
| markerRenderer | A class of a renderer which will draw marker (e.g. |
| markerOptions | renderer specific options to pass to the markerRenderer, see $.jqplot.MarkerRenderer. |
| showLine | wether to actually draw the line or not. |
| showMarker | wether or not to show the markers at the data points. |
| index | 0 based index of this series in the plot series array. |
| fill | true or false, wether to fill under lines or in bars. |
| fillColor | CSS color spec to use for fill under line. |
| fillAlpha | Alpha transparency to apply to the fill under the line. |
| fillAndStroke | If true will stroke the line (with color this.color) as well as fill under it. |
| disableStack | true to not stack this series with other series in the plot. |
| neighborThreshold | how close or far (in pixels) the cursor must be from a point marker to detect the point. |
| fillToZero | true will force bar and filled series to fill toward zero on the fill Axis. |
| fillToValue | fill a filled series to this value on the fill axis. |
| fillAxis | Either ‘x’ or ‘y’. |
| useNegativeColors | true to color negative values differently in filled and bar charts. |
| Grid | Object representing the grid on which the plot is drawn. |
| Properties | |
| drawGridlines | wether to draw the gridlines on the plot. |
| gridLineColor | color of the grid lines. |
| gridLineWidth | width of the grid lines. |
| background | css spec for the background color. |
| borderColor | css spec for the color of the grid border. |
| borderWidth | width of the border in pixels. |
| drawBorder | True to draw border around grid. |
| shadow | wether to show a shadow behind the grid. |
| shadowAngle | shadow angle in degrees |
| shadowOffset | Offset of each shadow stroke from the border in pixels |
| shadowWidth | width of the stoke for the shadow |
| shadowDepth | Number of times shadow is stroked, each stroke offset shadowOffset from the last. |
| shadowColor | an optional css color spec for the shadow in ‘rgba(n, n, n, n)’ form |
| shadowAlpha | Alpha channel transparency of shadow. |
| renderer | Instance of a renderer which will actually render the grid, see $.jqplot.CanvasGridRenderer. |
| rendererOptions | Options to pass on to the renderer, see $.jqplot.CanvasGridRenderer. |
| jqPlot | Plot object returned by call to $.jqplot. |
| Properties | These properties are specified at the top of the options object like so: |
| animate | True to animate the series on initial plot draw (renderer dependent). |
| animateReplot | True to animate series after a call to the replot() method. |
| axes | up to 4 axes are supported, each with it’s own options, See Axis for axis specific options. |
| data | user’s data. |
| dataRenderer | A callable which can be used to preprocess data passed into the plot. |
| dataRendererOptions | Options that will be passed to the dataRenderer. |
| axesDefaults | default options that will be applied to all axes. |
| seriesDefaults | default options that will be applied to all series. |
| defaultAxisStart | 1-D data series are internally converted into 2-D [x,y] data point arrays by jqPlot. |
| fillBetween | Fill between 2 line series in a plot. |
| fontSize | css spec for the font-size attribute. |
| grid | See Grid for grid specific options. |
| legend | see <$.jqplot.TableLegendRenderer> |
| noDataIndicator | Options to set up a mock plot with a data loading indicator if no data is specified. |
| series | Array of series object options. |
| seriesColors | Ann array of CSS color specifications that will be applied, in order, to the series in the plot. |
| sortData | false to not sort the data passed in by the user. |
| stackSeries | true or false, creates a stack or “mountain” plot. |
| title | Title object. |
| methods | |
| init | sets the plot target, checks data and applies user options to plot. |
| resetAxesScale | Reset the specified axes min, max, numberTicks and tickInterval properties to null or reset these properties on all axes if no list of axes is provided. |
| reInitialize | reinitialize plot for replotting. |
| quickInit | Quick reinitialization plot for replotting. |
| destroy | Releases all resources occupied by the plot |
| replot | Does a reinitialization of the plot followed by a redraw. |
| redraw | Empties the plot target div and redraws the plot. |
| draw | Draws all elements of the plot into the container. |
| drawSeries | Redraws all or just one series on the plot. |
| moveSeriesToFront | This method requires jQuery 1.4+ Moves the specified series canvas in front of all other series canvases. |
| moveSeriesToBack | This method requires jQuery 1.4+ Moves the specified series canvas behind all other series canvases. |
| restorePreviousSeriesOrder | This method requires jQuery 1.4+ Restore the series canvas order to its previous state. |
| restoreOriginalSeriesOrder | This method requires jQuery 1.4+ Restore the series canvas order to its original order when the plot was created. |
Copyright & License
Copyright © 2009-2012 Chris Leonello jqPlot is currently available for use in all personal or commercial projects under both the MIT and GPL version 2.0 licenses. This means that you can choose the license that best suits your project and use it accordingly.
See GPL Version 2 and MIT License contained within this distribution for further information.
The author would appreciate an email letting him know of any substantial use of jqPlot. You can reach the author at: chris at jqplot dot com or see http://www.jqplot.com/info.php. This is, of course, not required.
If you are feeling kind and generous, consider supporting the project by making a donation at: http://www.jqplot.com/donate.php.
sprintf functions contained in jqplot.sprintf.js by Ash Searle
version 2007.04.27 author Ash Searle http://hexmen.com/blog/2007/03/printf-sprintf/ http://hexmen.com/js/sprintf.js The author (Ash Searle) has placed this code in the public domain: “This code is unrestricted: you are free to use it however you like.”
Introduction
jqPlot requires jQuery (1.4+ required for certain features). jQuery 1.4.2 is included in the distribution. To use jqPlot include jQuery, the jqPlot jQuery plugin, the jqPlot css file and optionally the excanvas script for IE support in your web page:
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="excanvas.js"></script><![endif]--> +<script language="javascript" type="text/javascript" src="jquery-1.4.4.min.js"></script> +<script language="javascript" type="text/javascript" src="jquery.jqplot.min.js"></script> +<link rel="stylesheet" type="text/css" href="jquery.jqplot.css" />
jqPlot can be customized by overriding the defaults of any of the objects which make up the plot. The general usage of jqplot is:
chart = $.jqplot('targetElemId', [dataArray,...], {optionsObject});The options available to jqplot are detailed in jqPlot Options in the jqPlotOptions.txt file.
An actual call to $.jqplot() may look like the examples below:
chart = $.jqplot('chartdiv', [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]]);or
dataArray = [34,12,43,55,77];
+chart = $.jqplot('targetElemId', [dataArray, ...], {title:'My Plot', axes:{yaxis:{min:20, max:100}}});For more inforrmation, see jqPlot Usage.
Usage
See jqPlot Usage
Available Options
See jqPlot Options for a list of options available thorugh the options object (not complete yet!)
Options Usage
See Options Tutorial
Changes
See Change Log
$.jqplot
jQuery function called by the user to create a plot.
Parameters
| target | ID of target element to render the plot into. |
| data | an array of data series. |
| options | user defined options object. See the individual classes for available options. |
Properties
| config | object to hold configuration information for jqPlot plot object. |
attributes
| enablePlugins | False to disable plugins by default. Plugins must then be explicitly enabled in the individual plot options. Default: false. This property sets the “show” property of certain plugins to true or false. Only plugins that can be immediately active upon loading are affected. This includes non-renderer plugins like cursor, dragable, highlighter, and trendline. |
| defaultHeight | Default height for plots where no css height specification exists. This is a jqplot wide default. |
| defaultWidth | Default height for plots where no css height specification exists. This is a jqplot wide default. |
Summary
jqPlot Pugin Hooks
Axis
An individual axis object. Cannot be instantiated directly, but created by the Plot oject. Axis properties can be set or overriden by the options passed in from the user.
Summary
| Properties | Axes options are specified within an axes object at the top level of the plot options like so: |
| show | Wether to display the axis on the graph. |
| tickRenderer | A class of a rendering engine for creating the ticks labels displayed on the plot, See $.jqplot.AxisTickRenderer. |
| tickOptions | Options that will be passed to the tickRenderer, see $.jqplot.AxisTickRenderer options. |
| labelRenderer | A class of a rendering engine for creating an axis label. |
| labelOptions | Options passed to the label renderer. |
| label | Label for the axis |
| showLabel | true to show the axis label. |
| min | minimum value of the axis (in data units, not pixels). |
| max | maximum value of the axis (in data units, not pixels). |
| autoscale | DEPRECATED the default scaling algorithm produces superior results. |
| pad | Padding to extend the range above and below the data bounds. |
| padMax | Padding to extend the range above data bounds. |
| padMin | Padding to extend the range below data bounds. |
| ticks | 1D [val, val, ...] or 2D [[val, label], [val, label], ...] array of ticks for the axis. |
| numberTicks | Desired number of ticks. |
| tickInterval | number of units between ticks. |
| renderer | A class of a rendering engine that handles tick generation, scaling input data to pixel grid units and drawing the axis element. |
| rendererOptions | renderer specific options. |
| showTicks | Wether to show the ticks (both marks and labels) or not. |
| showTickMarks | Wether to show the tick marks (line crossing grid) or not. |
| showMinorTicks | Wether or not to show minor ticks. |
| drawMajorGridlines | True to draw gridlines for major axis ticks. |
| drawMinorGridlines | True to draw gridlines for minor ticks. |
| drawMajorTickMarks | True to draw tick marks for major axis ticks. |
| drawMinorTickMarks | True to draw tick marks for minor ticks. |
| useSeriesColor | Use the color of the first series associated with this axis for the tick marks and line bordering this axis. |
| borderWidth | width of line stroked at the border of the axis. |
| borderColor | color of the border adjacent to the axis. |
| scaleToHiddenSeries | True to include hidden series when computing axes bounds and scaling. |
| syncTicks | true to try and synchronize tick spacing across multiple axes so that ticks and grid lines line up. |
| tickSpacing | Approximate pixel spacing between ticks on graph. |
Properties
Axes options are specified within an axes object at the top level of the plot options like so:
{
+ axes: {
+ xaxis: {min: 5},
+ yaxis: {min: 2, max: 8, numberTicks:4},
+ x2axis: {pad: 1.5},
+ y2axis: {ticks:[22, 44, 66, 88]}
+ }
+}There are 2 x axes, ‘xaxis’ and ‘x2axis’, and 9 yaxes, ‘yaxis’, ‘y2axis’. ‘y3axis’, ... Any or all of which may be specified.
tickRenderer
this.tickRenderer = $.jqplot.AxisTickRenderer
A class of a rendering engine for creating the ticks labels displayed on the plot, See $.jqplot.AxisTickRenderer.
tickOptions
this.tickOptions = {}
Options that will be passed to the tickRenderer, see $.jqplot.AxisTickRenderer options.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
rendererOptions
this.rendererOptions = {}
renderer specific options. See $.jqplot.LinearAxisRenderer for options.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Legend
Legend object. Cannot be instantiated directly, but created by the Plot oject. Legend properties can be set or overriden by the options passed in from the user.
Summary
| Properties | |
| show | Wether to display the legend on the graph. |
| location | Placement of the legend. |
| labels | Array of labels to use. |
| showLabels | true to show the label text on the legend. |
| showSwatch | true to show the color swatches on the legend. |
| placement | “insideGrid” places legend inside the grid area of the plot. |
| xoffset | DEPRECATED. |
| yoffset | DEPRECATED. |
| border | css spec for the border around the legend box. |
| background | css spec for the background of the legend box. |
| textColor | css color spec for the legend text. |
| fontFamily | css font-family spec for the legend text. |
| fontSize | css font-size spec for the legend text. |
| rowSpacing | css padding-top spec for the rows in the legend. |
| rendererOptions | renderer specific options passed to the renderer. |
| predraw | Wether to draw the legend before the series or not. |
| marginTop | CSS margin for the legend DOM element. |
| marginRight | CSS margin for the legend DOM element. |
| marginBottom | CSS margin for the legend DOM element. |
| marginLeft | CSS margin for the legend DOM element. |
| escapeHtml | True to escape special characters with their html entity equivalents in legend text. |
+
+
+
+
+
+
+
+
placement
this.placement = "insideGrid"
”insideGrid” places legend inside the grid area of the plot. “outsideGrid” places the legend outside the grid but inside the plot container, shrinking the grid to accomodate the legend. “inside” synonym for “insideGrid”, “outside” places the legend ouside the grid area, but does not shrink the grid which can cause the legend to overflow the plot container.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Title
Plot Title object. Cannot be instantiated directly, but created by the Plot oject. Title properties can be set or overriden by the options passed in from the user.
Parameters
| text | text of the title. |
Summary
| Properties | |
| text | text of the title; |
| show | wether or not to show the title |
| fontFamily | css font-family spec for the text. |
| fontSize | css font-size spec for the text. |
| textAlign | css text-align spec for the text. |
| textColor | css color spec for the text. |
| renderer | A class for creating a DOM element for the title, see $.jqplot.DivTitleRenderer. |
| rendererOptions | renderer specific options passed to the renderer. |
| escapeHtml | True to escape special characters with their html entity equivalents in title text. |
renderer
this.renderer = $.jqplot.DivTitleRenderer
A class for creating a DOM element for the title, see $.jqplot.DivTitleRenderer.
+
+
Series
An individual data series object. Cannot be instantiated directly, but created by the Plot oject. Series properties can be set or overriden by the options passed in from the user.
Summary
| Properties | Properties will be assigned from a series array at the top level of the options. |
| show | wether or not to draw the series. |
| xaxis | which x axis to use with this series, either ‘xaxis’ or ‘x2axis’. |
| yaxis | which y axis to use with this series, either ‘yaxis’ or ‘y2axis’. |
| renderer | A class of a renderer which will draw the series, see $.jqplot.LineRenderer. |
| rendererOptions | Options to pass on to the renderer. |
| label | Line label to use in the legend. |
| showLabel | true to show label for this series in the legend. |
| color | css color spec for the series |
| negativeColor | css color spec used for filled (area) plots that are filled to zero and the “useNegativeColors” option is true. |
| lineWidth | width of the line in pixels. |
| lineJoin | Canvas lineJoin style between segments of series. |
| lineCap | Canvas lineCap style at ends of line. |
| linePattern | line pattern ‘dashed’, ‘dotted’, ‘solid’, some combination of ‘-’ and ‘.’ |
| shadowAngle | Shadow angle in degrees |
| shadowOffset | Shadow offset from line in pixels |
| shadowDepth | Number of times shadow is stroked, each stroke offset shadowOffset from the last. |
| shadowAlpha | Alpha channel transparency of shadow. |
| breakOnNull | Wether line segments should be be broken at null value. |
| markerRenderer | A class of a renderer which will draw marker (e.g. |
| markerOptions | renderer specific options to pass to the markerRenderer, see $.jqplot.MarkerRenderer. |
| showLine | wether to actually draw the line or not. |
| showMarker | wether or not to show the markers at the data points. |
| index | 0 based index of this series in the plot series array. |
| fill | true or false, wether to fill under lines or in bars. |
| fillColor | CSS color spec to use for fill under line. |
| fillAlpha | Alpha transparency to apply to the fill under the line. |
| fillAndStroke | If true will stroke the line (with color this.color) as well as fill under it. |
| disableStack | true to not stack this series with other series in the plot. |
| neighborThreshold | how close or far (in pixels) the cursor must be from a point marker to detect the point. |
| fillToZero | true will force bar and filled series to fill toward zero on the fill Axis. |
| fillToValue | fill a filled series to this value on the fill axis. |
| fillAxis | Either ‘x’ or ‘y’. |
| useNegativeColors | true to color negative values differently in filled and bar charts. |
Properties
Properties will be assigned from a series array at the top level of the options. If you had two series and wanted to change the color and line width of the first and set the second to use the secondary y axis with no shadow and supply custom labels for each:
{
+ series:[
+ {color: '#ff4466', lineWidth: 5, label:'good line'},
+ {yaxis: 'y2axis', shadow: false, label:'bad line'}
+ ]
+}renderer
this.renderer = $.jqplot.LineRenderer
A class of a renderer which will draw the series, see $.jqplot.LineRenderer.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
markerRenderer
this.markerRenderer = $.jqplot.MarkerRenderer
A class of a renderer which will draw marker (e.g. circle, square, ...) at the data points, see $.jqplot.MarkerRenderer.
markerOptions
this.markerOptions = {}
renderer specific options to pass to the markerRenderer, see $.jqplot.MarkerRenderer.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
disableStack
this.disableStack = false
true to not stack this series with other series in the plot. To render properly, non-stacked series must come after any stacked series in the plot’s data series array. So, the plot’s data series array would look like:
[stackedSeries1, stackedSeries2, ..., nonStackedSeries1, nonStackedSeries2, ...]
disableStack will put a gap in the stacking order of series, and subsequent stacked series will not fill down through the non-stacked series and will most likely not stack properly on top of the non-stacked series.
+
+
+
+
+
+
+
+
+
+
Grid
Object representing the grid on which the plot is drawn. The grid in this context is the area bounded by the axes, the area which will contain the series. Note, the series are drawn on their own canvas. The Grid object cannot be instantiated directly, but is created by the Plot oject. Grid properties can be set or overriden by the options passed in from the user.
Summary
| Properties | |
| drawGridlines | wether to draw the gridlines on the plot. |
| gridLineColor | color of the grid lines. |
| gridLineWidth | width of the grid lines. |
| background | css spec for the background color. |
| borderColor | css spec for the color of the grid border. |
| borderWidth | width of the border in pixels. |
| drawBorder | True to draw border around grid. |
| shadow | wether to show a shadow behind the grid. |
| shadowAngle | shadow angle in degrees |
| shadowOffset | Offset of each shadow stroke from the border in pixels |
| shadowWidth | width of the stoke for the shadow |
| shadowDepth | Number of times shadow is stroked, each stroke offset shadowOffset from the last. |
| shadowColor | an optional css color spec for the shadow in ‘rgba(n, n, n, n)’ form |
| shadowAlpha | Alpha channel transparency of shadow. |
| renderer | Instance of a renderer which will actually render the grid, see $.jqplot.CanvasGridRenderer. |
| rendererOptions | Options to pass on to the renderer, see $.jqplot.CanvasGridRenderer. |
+
+
+
+
+
+
renderer
this.renderer = $.jqplot.CanvasGridRenderer
Instance of a renderer which will actually render the grid, see $.jqplot.CanvasGridRenderer.
rendererOptions
this.rendererOptions = {}
Options to pass on to the renderer, see $.jqplot.CanvasGridRenderer.
jqPlot
Plot object returned by call to $.jqplot. Handles parsing user options, creating sub objects (Axes, legend, title, series) and rendering the plot.
Summary
| Properties | These properties are specified at the top of the options object like so: |
| animate | True to animate the series on initial plot draw (renderer dependent). |
| animateReplot | True to animate series after a call to the replot() method. |
| axes | up to 4 axes are supported, each with it’s own options, See Axis for axis specific options. |
| data | user’s data. |
| dataRenderer | A callable which can be used to preprocess data passed into the plot. |
| dataRendererOptions | Options that will be passed to the dataRenderer. |
| axesDefaults | default options that will be applied to all axes. |
| seriesDefaults | default options that will be applied to all series. |
| defaultAxisStart | 1-D data series are internally converted into 2-D [x,y] data point arrays by jqPlot. |
| fillBetween | Fill between 2 line series in a plot. |
| fontSize | css spec for the font-size attribute. |
| grid | See Grid for grid specific options. |
| legend | see <$.jqplot.TableLegendRenderer> |
| noDataIndicator | Options to set up a mock plot with a data loading indicator if no data is specified. |
| series | Array of series object options. |
| seriesColors | Ann array of CSS color specifications that will be applied, in order, to the series in the plot. |
| sortData | false to not sort the data passed in by the user. |
| stackSeries | true or false, creates a stack or “mountain” plot. |
| title | Title object. |
| methods | |
| init | sets the plot target, checks data and applies user options to plot. |
| resetAxesScale | Reset the specified axes min, max, numberTicks and tickInterval properties to null or reset these properties on all axes if no list of axes is provided. |
| reInitialize | reinitialize plot for replotting. |
| quickInit | Quick reinitialization plot for replotting. |
| destroy | Releases all resources occupied by the plot |
| replot | Does a reinitialization of the plot followed by a redraw. |
| redraw | Empties the plot target div and redraws the plot. |
| draw | Draws all elements of the plot into the container. |
| drawSeries | Redraws all or just one series on the plot. |
| moveSeriesToFront | This method requires jQuery 1.4+ Moves the specified series canvas in front of all other series canvases. |
| moveSeriesToBack | This method requires jQuery 1.4+ Moves the specified series canvas behind all other series canvases. |
| restorePreviousSeriesOrder | This method requires jQuery 1.4+ Restore the series canvas order to its previous state. |
| restoreOriginalSeriesOrder | This method requires jQuery 1.4+ Restore the series canvas order to its original order when the plot was created. |
+
+
+
+
+
+
axes
this.axes = {xaxis: new Axis('xaxis'), yaxis: new Axis('yaxis'), x2axis: new Axis('x2axis'), y2axis: new Axis('y2axis'), y3axis: new Axis('y3axis'), y4axis: new Axis('y4axis'), y5axis: new Axis('y5axis'), y6axis: new Axis('y6axis'), y7axis: new Axis('y7axis'), y8axis: new Axis('y8axis'), y9axis: new Axis('y9axis'), yMidAxis: new Axis('yMidAxis')}
up to 4 axes are supported, each with it’s own options, See Axis for axis specific options.
data
this.data = []
user’s data. Data should NOT be specified in the options object, but be passed in as the second argument to the $.jqplot() function. The data property is described here soley for reference. The data should be in the form of an array of 2D or 1D arrays like
[ [[x1, y1], [x2, y2],...], [y1, y2, ...] ].
+
+
+
+
axesDefaults
default options that will be applied to all axes. see Axis for axes options.
seriesDefaults
seriesDefaults: {}, series:[] }
default options that will be applied to all series. see Series for series options.
+
+
fillBetween
this.fillBetween = { series1: null, series2: null, color: null, baseSeries: 0, fill: true }
Fill between 2 line series in a plot. Options object: { series1: first index (0 based) of series in fill series2: second index (0 based) of series in fill color: color of fill [default fillColor of series1] baseSeries: fill will be drawn below this series (0 based index) fill: false to turn off fill [default true]. }
grid
this.grid = new Grid()
See Grid for grid specific options.
series
this.series = []
Array of series object options. see Series for series specific options.
seriesColors
this.seriesColors = $.jqplot.config.defaultColors
Ann array of CSS color specifications that will be applied, in order, to the series in the plot. Colors will wrap around so, if their are more series than colors, colors will be reused starting at the beginning. For pie charts, this specifies the colors of the slices.
+
+
+
+
title
this.title = new Title()
Title object. See Title for specific options. As a shortcut, you can specify the title option as just a string like: title: ‘My Plot’ and this will create a new title object with the specified text.
+
+
resetAxesScale
this.resetAxesScale = function( axes, options )
Reset the specified axes min, max, numberTicks and tickInterval properties to null or reset these properties on all axes if no list of axes is provided.
Parameters
| axes | Boolean to reset or not reset all axes or an array or object of axis names to reset. |
+
+
+
+
+
+
replot
this.replot = function( options )
Does a reinitialization of the plot followed by a redraw. Method could be used to interactively change plot characteristics and then replot.
Parameters
| options | Options used for replotting. |
Properties
| clear | false to not clear (empty) the plot container before replotting (default: true). |
| resetAxes | true to reset all axes min, max, numberTicks and tickInterval setting so axes will rescale themselves. optionally pass in list of axes to reset (e.g. [‘xaxis’, ‘y2axis’]) (default: false). |
redraw
this.redraw = function( clear )
Empties the plot target div and redraws the plot. This enables plot data and properties to be changed and then to comletely clear the plot and redraw. redraw will not reinitialize any plot elements. That is, axes will not be autoscaled and defaults will not be reapplied to any plot elements. redraw is used primarily with zooming.
Parameters
| clear | false to not clear (empty) the plot container before redrawing (default: true). |
+
+
drawSeries
this.drawSeries = function( options, idx )
Redraws all or just one series on the plot. No axis scaling is performed and no other elements on the plot are redrawn. options is an options object to pass on to the series renderers. It can be an empty object {}. idx is the series index to redraw if only one series is to be redrawn.
moveSeriesToFront
this.moveSeriesToFront = function ( idx )
This method requires jQuery 1.4+ Moves the specified series canvas in front of all other series canvases. This effectively “draws” the specified series on top of all other series, although it is performed through DOM manipulation, no redrawing is performed.
Parameters
| idx | 0 based index of the series to move. This will be the index of the series as it was first passed into the jqplot function. |
+
+
+
+
+
+
API Documentation
This document is out of date.
This document will help you understand how jqPlot’s options relate to the API documentation and the jqPlot object itself.
Wether to display the axis on the graph.
this.show = false
A class of a rendering engine for creating the ticks labels displayed on the plot, See $.jqplot.AxisTickRenderer.
this.tickRenderer = $.jqplot.AxisTickRenderer
A “tick” object showing the value of a tick/gridline on the plot.
Options that will be passed to the tickRenderer, see $.jqplot.AxisTickRenderer options.
this.tickOptions = {}
A class of a rendering engine for creating an axis label.
this.labelRenderer = $.jqplot.AxisLabelRenderer
Options passed to the label renderer.
this.labelOptions = {}
Label for the axis
this.label = null
true to show the axis label.
this.showLabel = true
minimum value of the axis (in data units, not pixels).
this.min = null
maximum value of the axis (in data units, not pixels).
this.max = null
DEPRECATED the default scaling algorithm produces superior results.
this.autoscale = false
Padding to extend the range above and below the data bounds.
this.pad = 1.2
Padding to extend the range above data bounds.
this.padMax = null
Padding to extend the range below data bounds.
this.padMin = null
1D [val, val, ...] or 2D [[val, label], [val, label], ...] array of ticks for the axis.
this.ticks = []
Desired number of ticks.
this.numberTicks
number of units between ticks.
this.tickInterval
A class of a rendering engine that handles tick generation, scaling input data to pixel grid units and drawing the axis element.
this.renderer = $.jqplot.LinearAxisRenderer
renderer specific options.
this.rendererOptions = {}
Wether to show the ticks (both marks and labels) or not.
this.showTicks = true
Wether to show the tick marks (line crossing grid) or not.
this.showTickMarks = true
Wether or not to show minor ticks.
this.showMinorTicks = true
True to draw gridlines for major axis ticks.
this.drawMajorGridlines = true
True to draw gridlines for minor ticks.
this.drawMinorGridlines = false
True to draw tick marks for major axis ticks.
this.drawMajorTickMarks = true
True to draw tick marks for minor ticks.
this.drawMinorTickMarks = true
Use the color of the first series associated with this axis for the tick marks and line bordering this axis.
this.useSeriesColor = false
width of line stroked at the border of the axis.
this.borderWidth = null
color of the border adjacent to the axis.
this.borderColor = null
True to include hidden series when computing axes bounds and scaling.
this.scaleToHiddenSeries = false
true to try and synchronize tick spacing across multiple axes so that ticks and grid lines line up.
this.syncTicks = null
Approximate pixel spacing between ticks on graph.
this.tickSpacing = 75
Wether to display the legend on the graph.
this.show = false
Placement of the legend.
this.location = 'ne'
Array of labels to use.
this.labels = []
true to show the label text on the legend.
this.showLabels = true
true to show the color swatches on the legend.
this.showSwatches = true
“insideGrid” places legend inside the grid area of the plot.
this.placement = "insideGrid"
DEPRECATED.
this.xoffset = 0
DEPRECATED.
this.yoffset = 0
css spec for the border around the legend box.
this.border
css spec for the background of the legend box.
this.background
css color spec for the legend text.
this.textColor
css font-family spec for the legend text.
this.fontFamily
css font-size spec for the legend text.
this.fontSize
css padding-top spec for the rows in the legend.
this.rowSpacing = '0.5em'
renderer specific options passed to the renderer.
this.rendererOptions = {}
CSS margin for the legend DOM element.
this.marginTop = null
CSS margin for the legend DOM element.
this.marginRight = null
CSS margin for the legend DOM element.
this.marginBottom = null
CSS margin for the legend DOM element.
this.marginLeft = null
True to escape special characters with their html entity equivalents in legend text.
this.escapeHtml = false
text of the title;
this.text = text
wether or not to show the title
this.show = true
css font-family spec for the text.
this.fontFamily
css font-size spec for the text.
this.fontSize
css text-align spec for the text.
this.textAlign
css color spec for the text.
this.textColor
A class for creating a DOM element for the title, see $.jqplot.DivTitleRenderer.
this.renderer = $.jqplot.DivTitleRenderer
The default title renderer for jqPlot.
renderer specific options passed to the renderer.
this.rendererOptions = {}
True to escape special characters with their html entity equivalents in title text.
this.escapeHtml = false
wether or not to draw the series.
this.show = true
which x axis to use with this series, either ‘xaxis’ or ‘x2axis’.
this.xaxis = 'xaxis'
which y axis to use with this series, either ‘yaxis’ or ‘y2axis’.
this.yaxis = 'yaxis'
A class of a renderer which will draw the series, see $.jqplot.LineRenderer.
this.renderer = $.jqplot.LineRenderer
The default line renderer for jqPlot, this class has no options beyond the Series class.
Options to pass on to the renderer.
this.rendererOptions = {}
Line label to use in the legend.
this.label = ''
true to show label for this series in the legend.
this.showLabel = true
css color spec for the series
this.color
css color spec used for filled (area) plots that are filled to zero and the “useNegativeColors” option is true.
this.negativeColor
width of the line in pixels.
this.lineWidth = 2.5
Canvas lineJoin style between segments of series.
this.lineJoin = 'round'
Canvas lineCap style at ends of line.
this.lineCap = 'round'
line pattern ‘dashed’, ‘dotted’, ‘solid’, some combination of ‘-’ and ‘.’
this.linePattern = 'solid'
Shadow angle in degrees
this.shadowAngle = 45
Shadow offset from line in pixels
this.shadowOffset = 1.25
Number of times shadow is stroked, each stroke offset shadowOffset from the last.
this.shadowDepth = 3
Alpha channel transparency of shadow.
this.shadowAlpha = '0.1'
Wether line segments should be be broken at null value.
this.breakOnNull = false
A class of a renderer which will draw marker (e.g.
this.markerRenderer = $.jqplot.MarkerRenderer
renderer specific options to pass to the markerRenderer, see $.jqplot.MarkerRenderer.
this.markerOptions = {}
The default jqPlot marker renderer, rendering the points on the line.
wether to actually draw the line or not.
this.showLine = true
wether or not to show the markers at the data points.
this.showMarker = true
0 based index of this series in the plot series array.
this.index
true or false, wether to fill under lines or in bars.
this.fill = false
CSS color spec to use for fill under line.
this.fillColor
Alpha transparency to apply to the fill under the line.
this.fillAlpha
If true will stroke the line (with color this.color) as well as fill under it.
this.fillAndStroke = false
true to not stack this series with other series in the plot.
this.disableStack = false
how close or far (in pixels) the cursor must be from a point marker to detect the point.
this.neighborThreshold = 4
true will force bar and filled series to fill toward zero on the fill Axis.
this.fillToZero = false
fill a filled series to this value on the fill axis.
this.fillToValue = 0
Either ‘x’ or ‘y’.
this.fillAxis = 'y'
true to color negative values differently in filled and bar charts.
this.useNegativeColors = true
wether to draw the gridlines on the plot.
this.drawGridlines = true
color of the grid lines.
this.gridLineColor = '#cccccc'
width of the grid lines.
this.gridLineWidth = 1.0
css spec for the background color.
this.background = '#fffdf6'
css spec for the color of the grid border.
this.borderColor = '#999999'
width of the border in pixels.
this.borderWidth = 2.0
True to draw border around grid.
this.drawBorder = true
wether to show a shadow behind the grid.
this.shadow = true
shadow angle in degrees
this.shadowAngle = 45
Offset of each shadow stroke from the border in pixels
this.shadowOffset = 1.5
width of the stoke for the shadow
this.shadowWidth = 3
Number of times shadow is stroked, each stroke offset shadowOffset from the last.
this.shadowDepth = 3
an optional css color spec for the shadow in ‘rgba(n, n, n, n)’ form
this.shadowColor = null
Alpha channel transparency of shadow.
this.shadowAlpha = '0.07'
Instance of a renderer which will actually render the grid, see $.jqplot.CanvasGridRenderer.
this.renderer = $.jqplot.CanvasGridRenderer
The default jqPlot grid renderer, creating a grid on a canvas element.
Options to pass on to the renderer, see $.jqplot.CanvasGridRenderer.
this.rendererOptions = {}
True to animate the series on initial plot draw (renderer dependent).
this.animate = false
True to animate series after a call to the replot() method.
this.animateReplot = false
up to 4 axes are supported, each with it’s own options, See Axis for axis specific options.
this.axes = {xaxis: new Axis('xaxis'), yaxis: new Axis('yaxis'), x2axis: new Axis('x2axis'), y2axis: new Axis('y2axis'), y3axis: new Axis('y3axis'), y4axis: new Axis('y4axis'), y5axis: new Axis('y5axis'), y6axis: new Axis('y6axis'), y7axis: new Axis('y7axis'), y8axis: new Axis('y8axis'), y9axis: new Axis('y9axis'), yMidAxis: new Axis('yMidAxis')}
An individual axis object.
user’s data.
this.data = []
A callable which can be used to preprocess data passed into the plot.
this.dataRenderer
Options that will be passed to the dataRenderer.
this.dataRendererOptions
default options that will be applied to all series.
seriesDefaults: {}, series:[] }
1-D data series are internally converted into 2-D [x,y] data point arrays by jqPlot.
this.defaultAxisStart = 1
Fill between 2 line series in a plot.
this.fillBetween = { series1: null, series2: null, color: null, baseSeries: 0, fill: true }
css spec for the font-size attribute.
this.fontSize
See Grid for grid specific options.
this.grid = new Grid()
Object representing the grid on which the plot is drawn.
see $.jqplot.TableLegendRenderer
this.legend = new Legend()
Array of series object options.
this.series = []
Ann array of CSS color specifications that will be applied, in order, to the series in the plot.
this.seriesColors = $.jqplot.config.defaultColors
false to not sort the data passed in by the user.
this.sortData = true
true or false, creates a stack or “mountain” plot.
this.stackSeries = false
Title object.
this.title = new Title()
sets the plot target, checks data and applies user options to plot.
this.init = function( target, data, options )
Reset the specified axes min, max, numberTicks and tickInterval properties to null or reset these properties on all axes if no list of axes is provided.
this.resetAxesScale = function( axes, options )
reinitialize plot for replotting.
this.reInitialize = function ( data, opts )
Quick reinitialization plot for replotting.
this.quickInit = function ()
Releases all resources occupied by the plot
this.destroy = function()
Does a reinitialization of the plot followed by a redraw.
this.replot = function( options )
Empties the plot target div and redraws the plot.
this.redraw = function( clear )
Draws all elements of the plot into the container.
this.draw = function()
Redraws all or just one series on the plot.
this.drawSeries = function( options, idx )
This method requires jQuery 1.4+ Moves the specified series canvas in front of all other series canvases.
this.moveSeriesToFront = function ( idx )
This method requires jQuery 1.4+ Moves the specified series canvas behind all other series canvases.
this.moveSeriesToBack = function ( idx )
This method requires jQuery 1.4+ Restore the series canvas order to its previous state.
this.restorePreviousSeriesOrder = function ()
This method requires jQuery 1.4+ Restore the series canvas order to its original order when the plot was created.
this.restoreOriginalSeriesOrder = function ()
GNU GENERAL PUBLIC LICENSE Version 2, June 1991
Copyright © 2009-2012 Chris Leonello
The default jqPlot axis renderer, creating a numeric axis.
An individual data series object.
Plot Title object.
The default title renderer for jqPlot. This class has no options beyond the Title class.
Plot Title object.
The default line renderer for jqPlot, this class has no options beyond the Series class. Draws series as a line.
Summary
| $.jqplot. | The default line renderer for jqPlot, this class has no options beyond the Series class. |
| Properties | |
| smooth | True to draw a smoothed (interpolated) line through the data points with automatically computed number of smoothing points. |
| constrainSmoothing | True to use a more accurate smoothing algorithm that will not overshoot any data points. |
| bandData | Data used to draw error bands or confidence intervals above/below a line. |
| bands | Banding around line, e.g error bands or confidence intervals. |
| show | true to show the bands. |
| color | color of lines at top and bottom of bands [default: series color]. |
| showLines | True to show lines at top and bottom of bands [default: false]. |
| fill | True to fill area between bands [default: true]. |
| fillColor | css color spec for filled area. |
| interval | User specified interval above and below line for bands [default: ‘3%’’]. |
| Properties | |
| highlightMouseOver | True to highlight area on a filled plot when moused over. |
| highlightMouseDown | True to highlight when a mouse button is pressed over an area on a filled plot. |
| highlightColor | color to use when highlighting an area on a filled plot. |
+
+
+
+
bandData
this.renderer.bandData = []
Data used to draw error bands or confidence intervals above/below a line.
bandData can be input in 3 forms. jqPlot will figure out which is the low band line and which is the high band line for all forms:
A 2 dimensional array like [[yl1, yl2, ...], [yu1, yu2, ...]] where [yl1, yl2, ...] are y values of the lower line and [yu1, yu2, ...] are y values of the upper line. In this case there must be the same number of y data points as data points in the series and the bands will inherit the x values of the series.
A 2 dimensional array like [[[xl1, yl1], [xl2, yl2], ...], [[xh1, yh1], [xh2, yh2], ...]] where [xl1, yl1] are x,y data points for the lower line and [xh1, yh1] are x,y data points for the high line. x values do not have to correspond to the x values of the series and can be of any arbitrary length.
Can be of form [[yl1, yu1], [yl2, yu2], [yl3, yu3], ...] where there must be 3 or more arrays and there must be the same number of arrays as there are data points in the series. In this case, [yl1, yu1] specifies the lower and upper y values for the 1st data point and so on. The bands will inherit the x values from the series.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
An individual data series object.
True to draw a smoothed (interpolated) line through the data points with automatically computed number of smoothing points.
this.renderer.smooth = false
True to use a more accurate smoothing algorithm that will not overshoot any data points.
this.renderer.constrainSmoothing = true
Data used to draw error bands or confidence intervals above/below a line.
this.renderer.bandData = []
User specified interval above and below line for bands [default: ‘3%’’].
interval: '3%' }
True to highlight area on a filled plot when moused over.
this.highlightMouseOver = true
True to highlight when a mouse button is pressed over an area on a filled plot.
this.highlightMouseDown = false
color to use when highlighting an area on a filled plot.
this.highlightColor = null
The default jqPlot axis renderer, creating a numeric axis.
Summary
| $.jqplot. | The default jqPlot axis renderer, creating a numeric axis. |
| Properties | |
| breakPoints | EXPERIMENTAL!! |
| breakTickLabel | Label to use at the axis break if breakPoints are specified. |
| drawBaseline | True to draw the axis baseline. |
| baselineWidth | width of the baseline in pixels. |
| baselineColor | CSS color spec for the baseline. |
| forceTickAt0 | This will ensure that there is always a tick mark at 0. |
| forceTickAt100 | This will ensure that there is always a tick mark at 100. |
| tickInset | Controls the amount to inset the first and last ticks from the edges of the grid, in multiples of the tick interval. |
| minorTicks | Number of ticks to add between “major” ticks. |
| alignTicks | true to align tick marks across opposed axes such as from the y2axis to yaxis. |
breakPoints
this.breakPoints = null
EXPERIMENTAL!! Use at your own risk! Works only with linear axes and the default tick renderer. Array of [start, stop] points to create a broken axis. Broken axes have a “jump” in them, which is an immediate transition from a smaller value to a larger value. Currently, axis ticks MUST be manually assigned if using breakPoints by using the axis ticks array option.
+
+
+
+
+
+
+
+
forceTickAt0
this.forceTickAt0 = false
This will ensure that there is always a tick mark at 0. If data range is strictly positive or negative, this will force 0 to be inside the axis bounds unless the appropriate axis pad (pad, padMin or padMax) is set to 0, then this will force an axis min or max value at 0. This has know effect when any of the following options are set: autoscale, min, max, numberTicks or tickInterval.
forceTickAt100
this.forceTickAt100 = false
This will ensure that there is always a tick mark at 100. If data range is strictly above or below 100, this will force 100 to be inside the axis bounds unless the appropriate axis pad (pad, padMin or padMax) is set to 0, then this will force an axis min or max value at 100. This has know effect when any of the following options are set: autoscale, min, max, numberTicks or tickInterval.
+
+
+
+
+
+
EXPERIMENTAL!!
this.breakPoints = null
Label to use at the axis break if breakPoints are specified.
this.breakTickLabel = "&asymp
True to draw the axis baseline.
this.drawBaseline = true
width of the baseline in pixels.
this.baselineWidth = null
CSS color spec for the baseline.
this.baselineColor = null
This will ensure that there is always a tick mark at 0.
this.forceTickAt0 = false
This will ensure that there is always a tick mark at 100.
this.forceTickAt100 = false
Controls the amount to inset the first and last ticks from the edges of the grid, in multiples of the tick interval.
this.tickInset = 0
Number of ticks to add between “major” ticks.
this.minorTicks = 0
true to align tick marks across opposed axes such as from the y2axis to yaxis.
this.alignTicks = false
The default jqPlot marker renderer, rendering the points on the line.
Summary
| $.jqplot. | The default jqPlot marker renderer, rendering the points on the line. |
| Properties | |
| show | wether or not to show the marker. |
| style | One of diamond, circle, square, x, plus, dash, filledDiamond, filledCircle, filledSquare |
| lineWidth | size of the line for non-filled markers. |
| size | Size of the marker (diameter or circle, length of edge of square, etc.) |
| color | color of marker. |
| shadow | wether or not to draw a shadow on the line |
| shadowAngle | Shadow angle in degrees |
| shadowOffset | Shadow offset from line in pixels |
| shadowDepth | Number of times shadow is stroked, each stroke offset shadowOffset from the last. |
| shadowAlpha | Alpha channel transparency of shadow. |
| shadowRenderer | Renderer that will draws the shadows on the marker. |
| shapeRenderer | Renderer that will draw the marker. |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
wether or not to show the marker.
this.show = true
One of diamond, circle, square, x, plus, dash, filledDiamond, filledCircle, filledSquare
this.style = 'filledCircle'
size of the line for non-filled markers.
this.lineWidth = 2
Size of the marker (diameter or circle, length of edge of square, etc.)
this.size = 9.0
color of marker.
this.color = '#666666'
wether or not to draw a shadow on the line
this.shadow = true
Shadow angle in degrees
this.shadowAngle = 45
Shadow offset from line in pixels
this.shadowOffset = 1
Number of times shadow is stroked, each stroke offset shadowOffset from the last.
this.shadowDepth = 3
Alpha channel transparency of shadow.
this.shadowAlpha = '0.07'
Renderer that will draws the shadows on the marker.
this.shadowRenderer = new $.jqplot.ShadowRenderer()
Renderer that will draw the marker.
this.shapeRenderer = new $.jqplot.ShapeRenderer()
The default jqPlot shadow renderer, rendering shadows behind shapes.
Summary
| $.jqplot. | The default jqPlot shadow renderer, rendering shadows behind shapes. |
| Properties | |
| angle | Angle of the shadow in degrees. |
| offset | Pixel offset at the given shadow angle of each shadow stroke from the last stroke. |
| alpha | alpha transparency of shadow stroke. |
| lineWidth | width of the shadow line stroke. |
| lineJoin | How line segments of the shadow are joined. |
| lineCap | how ends of the shadow line are rendered. |
| fill | whether to fill the shape. |
| depth | how many times the shadow is stroked. |
| isarc | wether the shadow is an arc or not. |
| draw | draws an transparent black (i.e. |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Angle of the shadow in degrees.
this.angle = 45
Pixel offset at the given shadow angle of each shadow stroke from the last stroke.
this.offset = 1
alpha transparency of shadow stroke.
this.alpha = 0.07
width of the shadow line stroke.
this.lineWidth = 1.5
How line segments of the shadow are joined.
this.lineJoin = 'miter'
how ends of the shadow line are rendered.
this.lineCap = 'round'
whether to fill the shape.
this.fill = false
how many times the shadow is stroked.
this.depth = 3
wether the shadow is an arc or not.
this.isarc = false
draws an transparent black (i.e.
$.jqplot.ShadowRenderer.prototype.draw = function( ctx, points, options )
The default jqPlot shape renderer. Given a set of points will plot them and either stroke a line (fill = false) or fill them (fill = true). If a filled shape is desired, closePath = true must also be set to close the shape.
Summary
| $.jqplot. | The default jqPlot shape renderer. |
| Properties | |
| linePattern | line pattern ‘dashed’, ‘dotted’, ‘solid’, some combination of ‘-’ and ‘.’ |
| lineJoin | How line segments of the shadow are joined. |
| lineCap | how ends of the shadow line are rendered. |
| fill | whether to fill the shape. |
| isarc | wether the shadow is an arc or not. |
| fillRect | true to draw shape as a filled rectangle. |
| strokeRect | true to draw shape as a stroked rectangle. |
| clearRect | true to cear a rectangle. |
| strokeStyle | css color spec for the stoke style |
| fillStyle | css color spec for the fill style. |
| Functions | |
| draw | draws the shape. |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
line pattern ‘dashed’, ‘dotted’, ‘solid’, some combination of ‘-’ and ‘.’
this.linePattern = 'solid'
How line segments of the shadow are joined.
this.lineJoin = 'miter'
how ends of the shadow line are rendered.
this.lineCap = 'round'
whether to fill the shape.
this.fill = false
wether the shadow is an arc or not.
this.isarc = false
true to draw shape as a filled rectangle.
this.fillRect = false
true to draw shape as a stroked rectangle.
this.strokeRect = false
true to cear a rectangle.
this.clearRect = false
css color spec for the stoke style
this.strokeStyle = '#999999'
css color spec for the fill style.
this.fillStyle = '#999999'
draws the shape.
$.jqplot.ShapeRenderer.prototype.draw = function( ctx, points, options )
Theme Engine provides a programatic way to change some of the more common jqplot styling options such as fonts, colors and grid options. A theme engine instance is created with each plot. The theme engine manages a collection of themes which can be modified, added to, or applied to the plot.
The themeEngine class is not instantiated directly. When a plot is initialized, the current plot options are scanned an a default theme named “Default” is created. This theme is used as the basis for other themes added to the theme engine and is always available.
A theme is a simple javascript object with styling parameters for various entities of the plot. A theme has the form:
{
+ _name:f "Default",
+ target: {
+ backgroundColor: "transparent"
+ },
+ legend: {
+ textColor: null,
+ fontFamily: null,
+ fontSize: null,
+ border: null,
+ background: null
+ },
+ title: {
+ textColor: "rgb(102, 102, 102)",
+ fontFamily: "'Trebuchet MS',Arial,Helvetica,sans-serif",
+ fontSize: "19.2px",
+ textAlign: "center"
+ },
+ seriesStyles: {},
+ series: [{
+ color: "#4bb2c5",
+ lineWidth: 2.5,
+ linePattern: "solid",
+ shadow: true,
+ fillColor: "#4bb2c5",
+ showMarker: true,
+ markerOptions: {
+ color: "#4bb2c5",
+ show: true,
+ style: 'filledCircle',
+ lineWidth: 1.5,
+ size: 4,
+ shadow: true
+ }
+ }],
+ grid: {
+ drawGridlines: true,
+ gridLineColor: "#cccccc",
+ gridLineWidth: 1,
+ backgroundColor: "#fffdf6",
+ borderColor: "#999999",
+ borderWidth: 2,
+ shadow: true
+ },
+ axesStyles: {
+ label: {},
+ ticks: {}
+ },
+ axes: {
+ xaxis: {
+ borderColor: "#999999",
+ borderWidth: 2,
+ ticks: {
+ show: true,
+ showGridline: true,
+ showLabel: true,
+ showMark: true,
+ size: 4,
+ textColor: "",
+ whiteSpace: "nowrap",
+ fontSize: "12px",
+ fontFamily: "'Trebuchet MS',Arial,Helvetica,sans-serif"
+ },
+ label: {
+ textColor: "rgb(102, 102, 102)",
+ whiteSpace: "normal",
+ fontSize: "14.6667px",
+ fontFamily: "'Trebuchet MS',Arial,Helvetica,sans-serif",
+ fontWeight: "400"
+ }
+ },
+ yaxis: {
+ borderColor: "#999999",
+ borderWidth: 2,
+ ticks: {
+ show: true,
+ showGridline: true,
+ showLabel: true,
+ showMark: true,
+ size: 4,
+ textColor: "",
+ whiteSpace: "nowrap",
+ fontSize: "12px",
+ fontFamily: "'Trebuchet MS',Arial,Helvetica,sans-serif"
+ },
+ label: {
+ textColor: null,
+ whiteSpace: null,
+ fontSize: null,
+ fontFamily: null,
+ fontWeight: null
+ }
+ },
+ x2axis: {...
+ },
+ ...
+ y9axis: {...
+ }
+ }
+}”seriesStyles” is a style object that will be applied to all series in the plot. It will forcibly override any styles applied on the individual series. “axesStyles” is a style object that will be applied to all axes in the plot. It will also forcibly override any styles on the individual axes.
The example shown above has series options for a line series. Options for other series types are shown below:
Bar Series
{
+ color: "#4bb2c5",
+ seriesColors: ["#4bb2c5", "#EAA228", "#c5b47f", "#579575", "#839557", "#958c12", "#953579", "#4b5de4", "#d8b83f", "#ff5800", "#0085cc", "#c747a3", "#cddf54", "#FBD178", "#26B4E3", "#bd70c7"],
+ lineWidth: 2.5,
+ shadow: true,
+ barPadding: 2,
+ barMargin: 10,
+ barWidth: 15.09375,
+ highlightColors: ["rgb(129,201,214)", "rgb(129,201,214)", "rgb(129,201,214)", "rgb(129,201,214)", "rgb(129,201,214)", "rgb(129,201,214)", "rgb(129,201,214)", "rgb(129,201,214)"]
+}Pie Series
{
+ seriesColors: ["#4bb2c5", "#EAA228", "#c5b47f", "#579575", "#839557", "#958c12", "#953579", "#4b5de4", "#d8b83f", "#ff5800", "#0085cc", "#c747a3", "#cddf54", "#FBD178", "#26B4E3", "#bd70c7"],
+ padding: 20,
+ sliceMargin: 0,
+ fill: true,
+ shadow: true,
+ startAngle: 0,
+ lineWidth: 2.5,
+ highlightColors: ["rgb(129,201,214)", "rgb(240,189,104)", "rgb(214,202,165)", "rgb(137,180,158)", "rgb(168,180,137)", "rgb(180,174,89)", "rgb(180,113,161)", "rgb(129,141,236)", "rgb(227,205,120)", "rgb(255,138,76)", "rgb(76,169,219)", "rgb(215,126,190)", "rgb(220,232,135)", "rgb(200,167,96)", "rgb(103,202,235)", "rgb(208,154,215)"]
+}Funnel Series
{
+ color: "#4bb2c5",
+ lineWidth: 2,
+ shadow: true,
+ padding: {
+ top: 20,
+ right: 20,
+ bottom: 20,
+ left: 20
+ },
+ sectionMargin: 6,
+ seriesColors: ["#4bb2c5", "#EAA228", "#c5b47f", "#579575", "#839557", "#958c12", "#953579", "#4b5de4", "#d8b83f", "#ff5800", "#0085cc", "#c747a3", "#cddf54", "#FBD178", "#26B4E3", "#bd70c7"],
+ highlightColors: ["rgb(147,208,220)", "rgb(242,199,126)", "rgb(220,210,178)", "rgb(154,191,172)", "rgb(180,191,154)", "rgb(191,186,112)", "rgb(191,133,174)", "rgb(147,157,238)", "rgb(231,212,139)", "rgb(255,154,102)", "rgb(102,181,224)", "rgb(221,144,199)", "rgb(225,235,152)", "rgb(200,167,96)", "rgb(124,210,238)", "rgb(215,169,221)"]
+}Summary
| $.jqplot. | Theme Engine provides a programatic way to change some of the more common jqplot styling options such as fonts, colors and grid options. |
| Properties | |
| themes | hash of themes managed by the theme engine. |
| activeTheme | Pointer to currently active theme |
| methods | |
| get | Get and return the named theme or the active theme if no name given. |
| getThemeNames | Return the list of theme names in this manager in alpha-numerical order. |
| getThemes | Return a list of themes in alpha-numerical order by name. |
| remove | Remove the given theme from the themeEngine. |
| newTheme | Create a new theme based on the default theme, adding it the themeEngine. |
| rename | Rename a theme. |
| copy | Create a copy of an existing theme in the themeEngine, adding it the themeEngine. |
+
+
+
+
+
+
+
+
+
+
+
+
copy
$.jqplot.ThemeEngine.prototype.copy = function ( sourceName, targetName, obj )
Create a copy of an existing theme in the themeEngine, adding it the themeEngine.
parameters
| sourceName | name of the existing theme. |
| targetName | name of the copy. |
| obj | optional object of style parameter to apply to the new theme. |
returns
new Theme object.
hash of themes managed by the theme engine.
this.themes = {}
Pointer to currently active theme
this.activeTheme=null
Get and return the named theme or the active theme if no name given.
$.jqplot.ThemeEngine.prototype.get = function( name )
Return the list of theme names in this manager in alpha-numerical order.
$.jqplot.ThemeEngine.prototype.getThemeNames = function()
Return a list of themes in alpha-numerical order by name.
$.jqplot.ThemeEngine.prototype.getThemes = function()
Remove the given theme from the themeEngine.
$.jqplot.ThemeEngine.prototype.remove = function( name )
Create a new theme based on the default theme, adding it the themeEngine.
$.jqplot.ThemeEngine.prototype.newTheme = function( name, obj )
Rename a theme.
$.jqplot.ThemeEngine.prototype.rename = function ( oldName, newName )
Create a copy of an existing theme in the themeEngine, adding it the themeEngine.
$.jqplot.ThemeEngine.prototype.copy = function ( sourceName, targetName, obj )
This document will help you understand how jqPlot’s options relate to the API documentation and the jqPlot object itself. For a listing of options available to jqPlot, see jqPlot Options in the jqPlotOptions.txt file.
The key to effectively using jqPlot is understanding jqPlot’s options. The online documentation is API documentation. While it explains what attributes and methods various objects posses, it doesn’t explain how to use or set those attributes through options. This tutorial will help explain that.
Lets assume you are creating a plot like this:
chart = $.jqplot('chart', dataSeries, optionsObj);First, note that you shouldn’t try to directly set attributes on the “chart” object (like chart.grid.shadow) after your call to $.jqplot(). At best this won’t do anything **(see below). You should pass options in via the “optionsObj”.
the optionsObj really represents the plot object (jqPlot object, not to be confused with the $.jqplot function which will create a jqPlot object). Attributes you specify on that object will be merged with attributes in the jqPlot object. The axes, legend, series, etc. are attributes on the jqPlot object. The jqPlot/optionsObj object looks something like (only some attributes shown):
jqPlot-| + |-seriesColors + |-textColor + |-fontFamily + |-fontSize + |-stackSeries + |-series(Array)-| + | |-Series1-| + | | |-lineWidth + | | |-linePattern + | | |-shadow + | | |-showLine + | | |-showMarker + | | |-color + | |-Series2... + | |-... + | |-SeriesN + | + |-grid(Object)-| + | |-drawGridLines + | |-background + | |-borderColor + | |-borderWidth + | |-shadow + | + |-title(Object)-| + | |-text + | |-show + | |-fontFamily + | |-fontSize + | |-textAlign + | |-textColor + | + |-axes(Object)-| + | |-xais-| + | | |-min + | | |-max + | | |-numberTicks + | | |-showTicks + | | |-showTickMarks + | | |-pad + | + | ... and so on
The optionsObj should follow the same construction as if it were a jqPlot object (with some exceptions/shortcuts I’ll mention in a moment). So generally, when you see something like “this.drawGridLines” in the grid properties in the docs, just replace “this” with “grid” in your options object. So it becomes optionsObj.grid.drawGridLines. Do likewise with the other objects in the plot, replacing “this”, with the respective attribute on the plot like “legend” or “title”. Series and Axes are handled a little different, because series is an array and axes has 4 distinct children “xaxis”, “yaxis”, “x2axis” and “y2axis”.
So, to remove the shadow from the grid and change the grid border size you would do:
optionObj = {grid:{shadow:false, borderWidth:9.0}};To do the same as above but also make all the text in the plot red you would do:
optionObj = {
+ textColor:"#ff0000",
+ grid:{shadow:false, borderWidth:9.0}
+}Here is a more deeply nested example. Say you want to specify a min and max on your y axis and use a specific color for your second series. That would look like:
optionsObj = {
+ axes:{yaxis:{min:5, max:230}},
+ series:[{},{color:"#33ff66"}]
+}Note that series options are an array in order of the series data you sent in to your plot. To get to the second series, you have to put an object (even if empty) in place of the first series.
There is a handy shortcut to assign options to all axes or all series at one go. Use axesDefaults and seriesDefaults. So, if you wanted both x and y axes to start at 0 and you wanted all series to not show markers, you could do:
optionsObj = {axesDefaults:{min:0}, seriesDefaults:{showMarker:false}}Another shortcut is for the plot title. Normally, you would assign options to the title as an object. If you specify a title option as a string, it will assign that to the title.text property automatically. So these two are equivalent:
optionsObj = {title:{text:"My Plot"}}and
optionsObj = {title:"My Plot"}Where things need more explaination is with renderers, plugins and their options. Briefly, what’s renderer, what’s a plugin.
A renderer is an object that is used to draw something and gets attached to an existing object in the plot in order to draw it. A plugin does more than just provide drawing functionality to an object. It will do more like calculate a trend line, change the cursor, provide event driven functionality, etc. I consider renderers plugins, but plugins don’t have to be renderers.
So, how do you use renderers, plugins, and specify their options? Some common renderes are for bar charts and category axes. If you want to render your series as a bar chart with each set of bars showing up in a category on the x axis, you do:
optionsObj = {
+ seriesDefaults:{renderer:$.jqplot.BarRenderer},
+ axes:{xaxis:{renderer:$.jqplot.CategoryAxisRenderer}}
+}This replaces the default renderer used for all series in the plot with a bar renderer and the x axis default renderer (but not any other axis) with a category renderer.
Now, how would I assign options to those renderers? The renderer’s attributes may not be present in the pre-existing jqPlot object, they may be specific to the renderer. This is done through the “rendererOptions” option on the appropriate object. So, if I wanted my bars to be 25 pixels wide, I would do:
optionsObj = {
+ seriesDefaults:{
+ renderer:$.jqplot.BarRenderer},
+ rendererOptions:{
+ barWidth:25
+ },
+ axes:{xaxis:{renderer:$.jqplot.CategoryAxisRenderer}}
+}Again, this is using the “seriesDefaults” option, which will apply options to all series in the plot. You could do the same on any particular series in the plot through the “series” options array.
Plugins are free to add their own options. For example, the highlighter plugin has it’s own set of options that are unique to it. As a result, it responds to options placed in the “highlighter” attribute of your options object. So, if I wanted to change the highlighter tooltip to fade in and out slowly and be positioned directly above the point I’m highlighting:
optionsObj = {
+ highlighter:{tooltipFadeSpeed:'slow', tooltipLocation:'n'}
+}Other plugins, like dragable and trendlines, add their options in with the series. This is because both of those plugins can have different options for different series in the plot. So, if you wanted to specify the color of the dragable and constrain it to drag only on the x axis as well as specify the color of the trend line you could do:
series:[{
+ dragable: {
+ color: '#ff3366',
+ constrainTo: 'x'
+ },
+ trendline: {
+ color: '#cccccc'
+ }
+}]This would apply those options to the first series only. If you had 2 series and wanted to turn off dragging and trend lines on the second series, you could do:
series:[{
+ dragable: {
+ color: '#ff3366',
+ constrainTo: 'x'
+ },
+ trendline: {
+ color: '#cccccc'
+ }
+}, {
+ isDragable: false,
+ trendline:{
+ show: false
+ }
+}]Note, series dragability is turned off with the “isDragable” option directly on the series itself, not with a suboption of “dragable”. This may be improved in the future.
I hope this is helpful. A few key points to remember:
- When you see “this” in the api docs, you generally replace it with the name of the object (in lowercase) you are looking at in your options object.
- seriesDefaults and axesDefaults are convenient shortcuts.
- to assign options to a renderer, generally use the “rendererOptions”
- plugins may add their own options attribute, like “highlighter” or “cursor”.
** Note: you can set attributes after the plot is created (like plot.grid.shadow = false), but you’ll have to issue the appropriate calls to possibly reinitialize and redraw the plot. jqPlot can definitely handle this to change the plot after creation (this is how the dragable plugin updates the plot data and the trend line plugin recomputes itself when data changes). This hasn’t been documented yet, however.
This document is out of date.
Renderer which draws lines as stacked bezier curves. Data for the line will not be specified as an array of [x, y] data point values, but as a an array of [start piont, bezier curve] So, the line is specified as: [[xstart, ystart], [cp1x, cp1y, cp2x, cp2y, xend, yend]].
Summary
| $.jqplot. | Renderer which draws lines as stacked bezier curves. |
| Functions | |
| setGridData | converts the user data values to grid coordinates and stores them in the gridData array. |
| makeGridData | converts any arbitrary data values to grid coordinates and returns them. |
+
+
makeGridData
$.jqplot.BezierCurveRenderer.prototype.makeGridData = function( data, plot )
converts any arbitrary data values to grid coordinates and returns them. This method exists so that plugins can use a series’ linerenderer to generate grid data points without overwriting the grid data associated with that series. Called with scope of a series.
API Documentation
Plugins
jqplot.BezierCurveRenderer.js
converts the user data values to grid coordinates and stores them in the gridData array.
$.jqplot.BezierCurveRenderer.prototype.setGridData = function( plot )
converts any arbitrary data values to grid coordinates and returns them.
$.jqplot.BezierCurveRenderer.prototype.makeGridData = function( data, plot )
A plugin renderer for jqPlot to draw a bar plot. Draws series as a line.
Summary
| $.jqplot. | A plugin renderer for jqPlot to draw a bar plot. |
| Properties | |
| barPadding | Number of pixels between adjacent bars at the same axis value. |
| barMargin | Number of pixels between groups of bars at adjacent axis values. |
| barDirection | ‘vertical’ = up and down bars, ‘horizontal’ = side to side bars |
| barWidth | Width of the bar in pixels (auto by devaul). |
| shadowOffset | offset of the shadow from the slice and offset of each succesive stroke of the shadow from the last. |
| shadowDepth | number of strokes to apply to the shadow, each stroke offset shadowOffset from the last. |
| shadowAlpha | transparency of the shadow (0 = transparent, 1 = opaque) |
| waterfall | true to enable waterfall plot. |
| groups | group bars into this many groups |
| varyBarColor | true to color each bar of a series separately rather than have every bar of a given series the same color. |
| highlightMouseOver | True to highlight slice when moused over. |
| highlightMouseDown | True to highlight when a mouse button is pressed over a slice. |
| highlightColors | an array of colors to use when highlighting a bar. |
| transposedData | NOT IMPLEMENTED YET. |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
varyBarColor
this.varyBarColor = false
true to color each bar of a series separately rather than have every bar of a given series the same color. If used for non-stacked multiple series bar plots, user should specify a separate ‘seriesColors’ array for each series. Otherwise, each series will set their bars to the same color array. This option has no Effect for stacked bar charts and is disabled.
+
+
+
+
+
+
transposedData
this.transposedData = true
NOT IMPLEMENTED YET. True if this is a horizontal bar plot and x and y values are “transposed”. Tranposed, or “swapped”, data is required prior to rev. 894 builds of jqPlot with horizontal bars. Allows backward compatability of bar renderer horizontal bars with old style data sets.
API Documentation
Plugins
jqplot.BarRenderer
Number of pixels between adjacent bars at the same axis value.
this.barPadding = 8
Number of pixels between groups of bars at adjacent axis values.
this.barMargin = 10
‘vertical’ = up and down bars, ‘horizontal’ = side to side bars
this.barDirection = 'vertical'
Width of the bar in pixels (auto by devaul).
this.barWidth = null
offset of the shadow from the slice and offset of each succesive stroke of the shadow from the last.
this.shadowOffset = 2
number of strokes to apply to the shadow, each stroke offset shadowOffset from the last.
this.shadowDepth = 5
transparency of the shadow (0 = transparent, 1 = opaque)
this.shadowAlpha = 0.08
true to enable waterfall plot.
this.waterfall = false
group bars into this many groups
this.groups = 1
true to color each bar of a series separately rather than have every bar of a given series the same color.
this.varyBarColor = false
True to highlight slice when moused over.
this.highlightMouseOver = true
True to highlight when a mouse button is pressed over a slice.
this.highlightMouseDown = false
an array of colors to use when highlighting a bar.
this.highlightColors = []
NOT IMPLEMENTED YET.
this.transposedData = true
Plugin renderer to draw a x-y block chart. A Block chart has data points displayed as colored squares with a text label inside. Data must be supplied in the form:
[[x1, y1, "label 1", {css}], [x2, y2, "label 2", {css}], ...]The label and css object are optional. If the label is ommitted, the box will collapse unless a css height and/or width is specified.
The css object is an object specifying css properties such as:
{background:'#4f98a5', border:'3px solid gray', padding:'1px'}Note that css properties specified with the data point override defaults specified with the series.
Summary
| $.jqplot. | Plugin renderer to draw a x-y block chart. |
| Properties | |
| css | default css styles that will be applied to all data blocks. |
| escapeHtml | true to escape html in the box label. |
| insertBreaks | true to turn spaces in data block label into html breaks <br />. |
| varyBlockColors | true to vary the color of each block in this series according to the seriesColors array. |
| Methods | |
| moveBlock | Moves an individual block. |
+
+
+
+
+
+
+
+
+
+
moveBlock
this.moveBlock = function ( idx, x, y, duration )
Moves an individual block. More efficient than redrawing the whole series by calling plot.drawSeries(). Properties: idx - the 0 based index of the block or point in this series. x - the x coordinate in data units (value on x axis) to move the block to. y - the y coordinate in data units (value on the y axis) to move the block to. duration - optional parameter to create an animated movement. Can be a number (higher is slower animation) or ‘fast’, ‘normal’ or ‘slow’. If not provided, the element is moved without any animation.
API Documentation
Plugins
jqplot.BlockRenderer
default css styles that will be applied to all data blocks.
this.css = {padding:'2px', border:'1px solid #999', textAlign:'center'}
true to escape html in the box label.
this.escapeHtml = false
true to turn spaces in data block label into html breaks br /.
this.insertBreaks = true
true to vary the color of each block in this series according to the seriesColors array.
this.varyBlockColors = false
Moves an individual block.
this.moveBlock = function ( idx, x, y, duration )
Plugin renderer to draw a bubble chart. A Bubble chart has data points displayed as colored circles with an optional text label inside. To use the bubble renderer, you must include the bubble renderer like:
<script language="javascript" type="text/javascript" src="../src/plugins/jqplot.bubbleRenderer.js"></script>
Data must be supplied in the form:
[[x1, y1, r1, <label or {label:'text', color:color}>], ...]where the label or options object is optional.
Note that all bubble colors will be the same unless the “varyBubbleColors” option is set to true. Colors can be specified in the data array or in the seriesColors array option on the series. If no colors are defined, the default jqPlot series of 16 colors are used. Colors are automatically cycled around again if there are more bubbles than colors.
Bubbles are autoscaled by default to fit within the chart area while maintaining relative sizes. If the “autoscaleBubbles” option is set to false, the r(adius) values in the data array a treated as literal pixel values for the radii of the bubbles.
Properties are passed into the bubble renderer in the rendererOptions object of the series options like:
seriesDefaults: {
+ renderer: $.jqplot.BubbleRenderer,
+ rendererOptions: {
+ bubbleAlpha: 0.7,
+ varyBubbleColors: false
+ }
+}Summary
| $.jqplot. | Plugin renderer to draw a bubble chart. |
| Properties | |
| varyBubbleColors | True to vary the color of each bubble in this series according to the seriesColors array. |
| autoscaleBubbles | True to scale the bubble radius based on plot size. |
| autoscaleMultiplier | Multiplier the bubble size if autoscaleBubbles is true. |
| autoscalePointsFactor | Factor which decreases bubble size based on how many bubbles on on the chart. |
| escapeHtml | True to escape html in bubble label text. |
| highlightMouseOver | True to highlight bubbles when moused over. |
| highlightMouseDown | True to highlight when a mouse button is pressed over a bubble. |
| highlightColors | An array of colors to use when highlighting a slice. |
| bubbleAlpha | Alpha transparency to apply to all bubbles in this series. |
| highlightAlpha | Alpha transparency to apply when highlighting bubble. |
| bubbleGradients | True to color the bubbles with gradient fills instead of flat colors. |
| showLabels | True to show labels on bubbles (if any), false to not show. |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
API Documentation
Plugins
jqplot.BubbleRenderer
True to vary the color of each bubble in this series according to the seriesColors array.
this.varyBubbleColors = true
True to scale the bubble radius based on plot size.
this.autoscaleBubbles = true
Multiplier the bubble size if autoscaleBubbles is true.
this.autoscaleMultiplier = 1.0
Factor which decreases bubble size based on how many bubbles on on the chart.
this.autoscalePointsFactor = -0.07
True to escape html in bubble label text.
this.escapeHtml = true
True to highlight bubbles when moused over.
this.highlightMouseOver = true
True to highlight when a mouse button is pressed over a bubble.
this.highlightMouseDown = false
An array of colors to use when highlighting a slice.
this.highlightColors = []
Alpha transparency to apply to all bubbles in this series.
this.bubbleAlpha = 1.0
Alpha transparency to apply when highlighting bubble.
this.highlightAlpha = null
True to color the bubbles with gradient fills instead of flat colors.
this.bubbleGradients = false
True to show labels on bubbles (if any), false to not show.
this.showLabels = true
Renderer to draw axis labels with a canvas element to support advanced featrues such as rotated text. This renderer uses a separate rendering engine to draw the text on the canvas. Two modes of rendering the text are available. If the browser has native font support for canvas fonts (currently Mozila 3.5 and Safari 4), you can enable text rendering with the canvas fillText method. You do so by setting the “enableFontSupport” option to true.
Browsers lacking native font support will have the text drawn on the canvas using the Hershey font metrics. Even if the “enableFontSupport” option is true non-supporting browsers will still render with the Hershey font.
Summary
| $.jqplot. | Renderer to draw axis labels with a canvas element to support advanced featrues such as rotated text. |
| Properties | |
| angle | angle of text, measured clockwise from x axis. |
| show | wether or not to show the tick (mark and label). |
| showLabel | wether or not to show the label. |
| label | label for the axis. |
| fontFamily | CSS spec for the font-family css attribute. |
| fontSize | CSS spec for font size. |
| fontWeight | |
| fontStretch | Multiplier to condense or expand font width. |
| textColor | css spec for the color attribute. |
| enableFontSupport | true to turn on native canvas font support in Mozilla 3.5+ and Safari 4+. |
| pt2px | Point to pixel scaling factor, used for computing height of bounding box around a label. |
+
+
+
+
+
+
+
+
+
+
+
+
pt2px
this.pt2px = null
Point to pixel scaling factor, used for computing height of bounding box around a label. The labels text renderer has a default setting of 1.4, which should be suitable for most fonts. Leave as null to use default. If tops of letters appear clipped, increase this. If bounding box seems too big, decrease. This is an issue only with the native font renderering capabilities of Mozilla 3.5 and Safari 4 since they do not provide a method to determine the font height.
API Documentation
Plugins
jqplot.CanvasAxisLabelRenderer
angle of text, measured clockwise from x axis.
this.angle = 0
wether or not to show the tick (mark and label).
this.show = true
wether or not to show the label.
this.showLabel = true
label for the axis.
this.label = ''
CSS spec for the font-family css attribute.
this.fontFamily = '"Trebuchet MS", Arial, Helvetica, sans-serif'
CSS spec for font size.
this.fontSize = '11pt'
this.fontWeight = 'normal'
Multiplier to condense or expand font width.
this.fontStretch = 1.0
css spec for the color attribute.
this.textColor = '#666666'
true to turn on native canvas font support in Mozilla 3.5+ and Safari 4+.
this.enableFontSupport = true
Point to pixel scaling factor, used for computing height of bounding box around a label.
this.pt2px = null
Renderer to draw axis ticks with a canvas element to support advanced featrues such as rotated text. This renderer uses a separate rendering engine to draw the text on the canvas. Two modes of rendering the text are available. If the browser has native font support for canvas fonts (currently Mozila 3.5 and Safari 4), you can enable text rendering with the canvas fillText method. You do so by setting the “enableFontSupport” option to true.
Browsers lacking native font support will have the text drawn on the canvas using the Hershey font metrics. Even if the “enableFontSupport” option is true non-supporting browsers will still render with the Hershey font.
Summary
| $.jqplot. | Renderer to draw axis ticks with a canvas element to support advanced featrues such as rotated text. |
| Properties | |
| mark | tick mark on the axis. |
| showMark | wether or not to show the mark on the axis. |
| showGridline | wether or not to draw the gridline on the grid at this tick. |
| isMinorTick | if this is a minor tick. |
| angle | angle of text, measured clockwise from x axis. |
| markSize | Length of the tick marks in pixels. |
| show | wether or not to show the tick (mark and label). |
| showLabel | wether or not to show the label. |
| labelPosition | ‘auto’, ‘start’, ‘middle’ or ‘end’. |
| formatter | A class of a formatter for the tick text. |
| formatString | string passed to the formatter. |
| prefix | String to prepend to the tick label. |
| fontFamily | css spec for the font-family css attribute. |
| fontSize | CSS spec for font size. |
| fontWeight | CSS spec for fontWeight |
| fontStretch | Multiplier to condense or expand font width. |
| textColor | css spec for the color attribute. |
| enableFontSupport | true to turn on native canvas font support in Mozilla 3.5+ and Safari 4+. |
| pt2px | Point to pixel scaling factor, used for computing height of bounding box around a label. |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
pt2px
this.pt2px = null
Point to pixel scaling factor, used for computing height of bounding box around a label. The labels text renderer has a default setting of 1.4, which should be suitable for most fonts. Leave as null to use default. If tops of letters appear clipped, increase this. If bounding box seems too big, decrease. This is an issue only with the native font renderering capabilities of Mozilla 3.5 and Safari 4 since they do not provide a method to determine the font height.
API Documentation
Plugins
jqplot.CanvasAxisTickRenderer
tick mark on the axis.
this.mark = 'outside'
wether or not to show the mark on the axis.
this.showMark = true
wether or not to draw the gridline on the grid at this tick.
this.showGridline = true
if this is a minor tick.
this.isMinorTick = false
angle of text, measured clockwise from x axis.
this.angle = 0
Length of the tick marks in pixels.
this.markSize = 4
wether or not to show the tick (mark and label).
this.show = true
wether or not to show the label.
this.showLabel = true
‘auto’, ‘start’, ‘middle’ or ‘end’.
this.labelPosition = 'auto'
A class of a formatter for the tick text.
this.formatter = $.jqplot.DefaultTickFormatter
string passed to the formatter.
this.formatString = ''
String to prepend to the tick label.
this.prefix = ''
css spec for the font-family css attribute.
this.fontFamily = '"Trebuchet MS", Arial, Helvetica, sans-serif'
CSS spec for font size.
this.fontSize = '10pt'
CSS spec for fontWeight
this.fontWeight = 'normal'
Multiplier to condense or expand font width.
this.fontStretch = 1.0
css spec for the color attribute.
this.textColor = '#666666'
true to turn on native canvas font support in Mozilla 3.5+ and Safari 4+.
this.enableFontSupport = true
Point to pixel scaling factor, used for computing height of bounding box around a label.
this.pt2px = null
Summary
| $.jqplot. | |
| Properties | |
| objects | |
| name | Optional name for the overlay object. |
| show | true to show (draw), false to not draw. |
| lineWidth | Width of the line. |
| lineCap | Type of ending placed on the line [‘round’, ‘butt’, ‘square’] |
| color | color of the line |
| shadow | wether or not to draw a shadow on the line |
| shadowAngle | Shadow angle in degrees |
| shadowOffset | Shadow offset from line in pixels |
| shadowDepth | Number of times shadow is stroked, each stroke offset shadowOffset from the last. |
| shadowAlpha | Alpha channel transparency of shadow. |
| xaxis | X axis to use for positioning/scaling the line. |
| yaxis | Y axis to use for positioning/scaling the line. |
| showTooltip | Show a tooltip with data point values. |
| showTooltipPrecision | Controls how close to line cursor must be to show tooltip. |
| tooltipLocation | Where to position tooltip, ‘n’, ‘ne’, ‘e’, ‘se’, ‘s’, ‘sw’, ‘w’, ‘nw’ |
| fadeTooltip | true = fade in/out tooltip, flase = show/hide tooltip |
| tooltipFadeSpeed | ‘slow’, ‘def’, ‘fast’, or number of milliseconds. |
| tooltipOffset | Pixel offset of tooltip from the highlight. |
| tooltipFormatString | Format string passed the x and y values of the cursor on the line. |
| Line | A straight line. |
| Properties | |
| start | [x, y] coordinates for the start of the line. |
| stop | [x, y] coordinates for the end of the line. |
| HorizontalLine | A straight horizontal line. |
| Properties | |
| y | y value to position the line |
| xmin | x value for the start of the line, null to scale to axis min. |
| xmax | x value for the end of the line, null to scale to axis max. |
| DashedHorizontalLine | A straight dashed horizontal line. |
| Properties | |
| dashPattern | Array of line, space settings in pixels. |
| VerticalLine | A straight vertical line. |
| DashedVerticalLine | A straight dashed vertical line. |
| Properties | |
| dashPattern | Array of line, space settings in pixels. |
+
+
+
+
+
+
+
+
+
+
+
+
Line
A straight line.
Summary
| Properties | |
| start | [x, y] coordinates for the start of the line. |
| stop | [x, y] coordinates for the end of the line. |
HorizontalLine
A straight horizontal line.
Summary
| Properties | |
| y | y value to position the line |
| xmin | x value for the start of the line, null to scale to axis min. |
| xmax | x value for the end of the line, null to scale to axis max. |
DashedHorizontalLine
A straight dashed horizontal line.
Summary
| Properties | |
| dashPattern | Array of line, space settings in pixels. |
+
+
+
+
DashedVerticalLine
A straight dashed vertical line.
Summary
| Properties | |
| dashPattern | Array of line, space settings in pixels. |
API Documentation
Plugins
jqplot.CanvasOverlay
this.objects = []
Format string passed the x and y values of the cursor on the line.
tooltipFormatString: '%d, %d' }
[x, y] coordinates for the end of the line.
stop: [] }
Array of line, space settings in pixels.
dashPattern: [8,8] }
Array of line, space settings in pixels.
dashPattern: [8,8] }
A plugin for jqPlot to render a category style axis, with equal pixel spacing between y data values of a series.
To use this renderer, include the plugin in your source
<script type="text/javascript" language="javascript" src="plugins/jqplot.categoryAxisRenderer.js"></script>
and supply the appropriate options to your plot
{axes:{xaxis:{renderer:$.jqplot.CategoryAxisRenderer}}}Summary
| $.jqplot. | A plugin for jqPlot to render a category style axis, with equal pixel spacing between y data values of a series. |
| Properties | |
| sortMergedLabels | True to sort tick labels when labels are created by merging x axis values from multiple series. |
| tickRenderer | A class of a rendering engine for creating the ticks labels displayed on the plot, See $.jqplot.AxisTickRenderer. |
sortMergedLabels
this.sortMergedLabels = false
True to sort tick labels when labels are created by merging x axis values from multiple series. That is, say you have two series like:
line1 = [[2006, 4], [2008, 9], [2009, 16]]; +line2 = [[2006, 3], [2007, 7], [2008, 6]];
If no label array is specified, tick labels will be collected from the x values of the series. With sortMergedLabels set to true, tick labels will be:
[2006, 2007, 2008, 2009]
With sortMergedLabels set to false, tick labels will be:
[2006, 2008, 2009, 2007]
Note, this property is specified on the renderOptions for the axes when creating a plot:
axes:{xaxis:{renderer:$.jqplot.CategoryAxisRenderer, rendererOptions:{sortMergedLabels:true}}}tickRenderer
A class of a rendering engine for creating the ticks labels displayed on the plot, See $.jqplot.AxisTickRenderer. this.tickRenderer = $.jqplot.AxisTickRenderer; this.labelRenderer = $.jqplot.AxisLabelRenderer;
API Documentation
Plugins
jqplot.CategoryAxisRenderer
True to sort tick labels when labels are created by merging x axis values from multiple series.
this.sortMergedLabels = false
A “tick” object showing the value of a tick/gridline on the plot.
Data Renderer function which converts a custom JSON data object into jqPlot data format. Set this as a callable on the jqplot dataRenderer plot option:
plot = $.jqplot('mychart', [data], { dataRenderer: $.jqplot.ciParser, ... });Where data is an object in JSON format or a JSON encoded string conforming to the City Index API spec.
Note that calling the renderer function is handled internally by jqPlot. The user does not have to call the function. The parameters described below will automatically be passed to the ciParser function.
Parameters
| data | JSON encoded string or object. |
| plot | reference to jqPlot Plot object. |
Returns
data array in jqPlot format.
API Documentation
Plugins
jqplot.ciParser
Plugin class representing the cursor as displayed on the plot.
Summary
| $.jqplot. | Plugin class representing the cursor as displayed on the plot. |
| Properties | |
| style | CSS spec for cursor style |
| show | wether to show the cursor or not. |
| showTooltip | show a cursor position tooltip. |
| followMouse | Tooltip follows the mouse, it is not at a fixed location. |
| tooltipLocation | Where to position tooltip. |
| tooltipOffset | Pixel offset of tooltip from the grid boudaries or cursor center. |
| showTooltipGridPosition | show the grid pixel coordinates of the mouse. |
| showTooltipUnitPosition | show the unit (data) coordinates of the mouse. |
| showTooltipDataPosition | Used with showVerticalLine to show intersecting data points in the tooltip. |
| tooltipFormatString | sprintf format string for the tooltip. |
| useAxesFormatters | Use the x and y axes formatters to format the text in the tooltip. |
| tooltipAxisGroups | Show position for the specified axes. |
| zoom | Enable plot zooming. |
| looseZoom | Will expand zoom range to provide more rounded tick values. |
| clickReset | Will reset plot zoom if single click on plot without drag. |
| dblClickReset | Will reset plot zoom if double click on plot without drag. |
| showVerticalLine | draw a vertical line across the plot which follows the cursor. |
| showHorizontalLine | draw a horizontal line across the plot which follows the cursor. |
| constrainZoomTo | ‘none’, ‘x’ or ‘y’ |
| intersectionThreshold | pixel distance from data point or marker to consider cursor lines intersecting with point. |
| showCursorLegend | Replace the plot legend with an enhanced legend displaying intersection information. |
| cursorLegendFormatString | Format string used in the cursor legend. |
| constrainOutsideZoom | True to limit actual zoom area to edges of grid, even when zooming outside of plot area. |
| showTooltipOutsideZoom | True will keep updating the tooltip when zooming of the grid. |
| methods | |
| $.jqplot. | links targetPlot to controllerPlot so that plot zooming of targetPlot will be controlled by zooming on the controllerPlot. |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
tooltipFormatString
this.tooltipFormatString = '%.4P, %.4P'
sprintf format string for the tooltip. Uses Ash Searle’s javascript sprintf implementation found here: http://hexmen.com/blog/2007/03/printf-sprintf/ See http://perldoc.perl.org/functions/sprintf.html for reference Note, if showTooltipDataPosition is true, the default tooltipFormatString will be set to the cursorLegendFormatString, not the default given here.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
$.jqplot.Cursor.zoomProxy
$.jqplot.Cursor.zoomProxy = function( targetPlot, controllerPlot )
links targetPlot to controllerPlot so that plot zooming of targetPlot will be controlled by zooming on the controllerPlot. controllerPlot will not actually zoom, but acts as an overview plot. Note, the zoom options must be set to true for zoomProxy to work.
API Documentation
Plugins
jqplot.Cursor
CSS spec for cursor style
this.style = 'crosshair'
wether to show the cursor or not.
this.show = $.jqplot.config.enablePlugins
show a cursor position tooltip.
this.showTooltip = true
Tooltip follows the mouse, it is not at a fixed location.
this.followMouse = false
Where to position tooltip.
this.tooltipLocation = 'se'
Pixel offset of tooltip from the grid boudaries or cursor center.
this.tooltipOffset = 6
show the grid pixel coordinates of the mouse.
this.showTooltipGridPosition = false
show the unit (data) coordinates of the mouse.
this.showTooltipUnitPosition = true
Used with showVerticalLine to show intersecting data points in the tooltip.
this.showTooltipDataPosition = false
sprintf format string for the tooltip.
this.tooltipFormatString = '%.4P, %.4P'
Use the x and y axes formatters to format the text in the tooltip.
this.useAxesFormatters = true
Show position for the specified axes.
this.tooltipAxisGroups = []
Enable plot zooming.
this.zoom = false
Will expand zoom range to provide more rounded tick values.
this.looseZoom = true
Will reset plot zoom if single click on plot without drag.
this.clickReset = false
Will reset plot zoom if double click on plot without drag.
this.dblClickReset = true
draw a vertical line across the plot which follows the cursor.
this.showVerticalLine = false
draw a horizontal line across the plot which follows the cursor.
this.showHorizontalLine = false
‘none’, ‘x’ or ‘y’
this.constrainZoomTo = 'none'
pixel distance from data point or marker to consider cursor lines intersecting with point.
this.intersectionThreshold = 2
Replace the plot legend with an enhanced legend displaying intersection information.
this.showCursorLegend = false
Format string used in the cursor legend.
this.cursorLegendFormatString = $.jqplot.Cursor.cursorLegendFormatString
True to limit actual zoom area to edges of grid, even when zooming outside of plot area.
this.constrainOutsideZoom = true
True will keep updating the tooltip when zooming of the grid.
this.showTooltipOutsideZoom = false
links targetPlot to controllerPlot so that plot zooming of targetPlot will be controlled by zooming on the controllerPlot.
$.jqplot.Cursor.zoomProxy = function( targetPlot, controllerPlot )
A plugin for a jqPlot to render an axis as a series of date values. This renderer has no options beyond those supplied by the Axis class. It supplies it’s own tick formatter, so the tickOptions.formatter option should not be overridden.
Thanks to Ken Synder for his enhanced Date instance methods which are included with this code http://kendsnyder.com/sandbox/date/.
To use this renderer, include the plugin in your source
<script type="text/javascript" language="javascript" src="plugins/jqplot.dateAxisRenderer.js"></script>
and supply the appropriate options to your plot
{axes:{xaxis:{renderer:$.jqplot.DateAxisRenderer}}}Dates can be passed into the axis in almost any recognizable value and will be parsed. They will be rendered on the axis in the format specified by tickOptions.formatString. e.g. tickOptions.formatString = ‘%Y-%m-%d’.
Accecptable format codes are:
Code Result Description + == Years == +%Y 2008 Four-digit year +%y 08 Two-digit year + == Months == +%m 09 Two-digit month +%#m 9 One or two-digit month +%B September Full month name +%b Sep Abbreviated month name + == Days == +%d 05 Two-digit day of month +%#d 5 One or two-digit day of month +%e 5 One or two-digit day of month +%A Sunday Full name of the day of the week +%a Sun Abbreviated name of the day of the week +%w 0 Number of the day of the week (0 = Sunday, 6 = Saturday) +%o th The ordinal suffix string following the day of the month + == Hours == +%H 23 Hours in 24-hour format (two digits) +%#H 3 Hours in 24-hour integer format (one or two digits) +%I 11 Hours in 12-hour format (two digits) +%#I 3 Hours in 12-hour integer format (one or two digits) +%p PM AM or PM + == Minutes == +%M 09 Minutes (two digits) +%#M 9 Minutes (one or two digits) + == Seconds == +%S 02 Seconds (two digits) +%#S 2 Seconds (one or two digits) +%s 1206567625723 Unix timestamp (Seconds past 1970-01-01 00:00:00) + == Milliseconds == +%N 008 Milliseconds (three digits) +%#N 8 Milliseconds (one to three digits) + == Timezone == +%O 360 difference in minutes between local time and GMT +%Z Mountain Standard Time Name of timezone as reported by browser +%G -06:00 Hours and minutes between GMT + == Shortcuts == +%F 2008-03-26 %Y-%m-%d +%T 05:06:30 %H:%M:%S +%X 05:06:30 %H:%M:%S +%x 03/26/08 %m/%d/%y +%D 03/26/08 %m/%d/%y +%#c Wed Mar 26 15:31:00 2008 %a %b %e %H:%M:%S %Y +%v 3-Sep-2008 %e-%b-%Y +%R 15:31 %H:%M +%r 3:31:00 PM %I:%M:%S %p + == Characters == +%n \n Newline +%t \t Tab +%% % Percent Symbol
Summary
| $.jqplot. | A plugin for a jqPlot to render an axis as a series of date values. |
| Properties | |
| tickRenderer | A class of a rendering engine for creating the ticks labels displayed on the plot, See $.jqplot.AxisTickRenderer. |
| tickInset | Controls the amount to inset the first and last ticks from the edges of the grid, in multiples of the tick interval. |
| drawBaseline | True to draw the axis baseline. |
| baselineWidth | width of the baseline in pixels. |
| baselineColor | CSS color spec for the baseline. |
tickRenderer
A class of a rendering engine for creating the ticks labels displayed on the plot, See $.jqplot.AxisTickRenderer. this.tickRenderer = $.jqplot.AxisTickRenderer; this.labelRenderer = $.jqplot.AxisLabelRenderer;
+
+
+
+
+
+
+
+
API Documentation
Plugins
jqplot.DateAxisRenderer
A “tick” object showing the value of a tick/gridline on the plot.
Controls the amount to inset the first and last ticks from the edges of the grid, in multiples of the tick interval.
this.tickInset = 0
True to draw the axis baseline.
this.drawBaseline = true
width of the baseline in pixels.
this.baselineWidth = null
CSS color spec for the baseline.
this.baselineColor = null
An individual axis object.
Plugin renderer to draw a donut chart. x values, if present, will be used as slice labels. y values give slice size.
To use this renderer, you need to include the donut renderer plugin, for example:
<script type="text/javascript" src="plugins/jqplot.donutRenderer.js"></script>
Properties described here are passed into the $.jqplot function as options on the series renderer. For example:
plot2 = $.jqplot('chart2', [s1, s2], {
+ seriesDefaults: {
+ renderer:$.jqplot.DonutRenderer,
+ rendererOptions:{
+ sliceMargin: 2,
+ innerDiameter: 110,
+ startAngle: -90
+ }
+ }
+});A donut plot will trigger events on the plot target according to user interaction. All events return the event object, the series index, the point (slice) index, and the point data for the appropriate slice.
| ’jqplotDataMouseOver’ | triggered when user mouseing over a slice. |
| ’jqplotDataHighlight’ | triggered the first time user mouses over a slice, if highlighting is enabled. |
| ’jqplotDataUnhighlight’ | triggered when a user moves the mouse out of a highlighted slice. |
| ’jqplotDataClick’ | triggered when the user clicks on a slice. |
| ’jqplotDataRightClick’ | tiggered when the user right clicks on a slice if the “captureRightClick” option is set to true on the plot. |
Summary
| $.jqplot. | Plugin renderer to draw a donut chart. |
| Properties | |
| diameter | Outer diameter of the donut, auto computed by default |
| innerDiameter | Inner diameter of the donut, auto calculated by default. |
| thickness | thickness of the donut, auto computed by default Overridden by if innerDiameter is specified. |
| padding | padding between the donut and plot edges, legend, etc. |
| sliceMargin | angular spacing between donut slices in degrees. |
| ringMargin | pixel distance between rings, or multiple series in a donut plot. |
| fill | true or false, wether to fil the slices. |
| shadowOffset | offset of the shadow from the slice and offset of each succesive stroke of the shadow from the last. |
| shadowAlpha | transparency of the shadow (0 = transparent, 1 = opaque) |
| shadowDepth | number of strokes to apply to the shadow, each stroke offset shadowOffset from the last. |
| highlightMouseOver | True to highlight slice when moused over. |
| highlightMouseDown | True to highlight when a mouse button is pressed over a slice. |
| highlightColors | an array of colors to use when highlighting a slice. |
| dataLabels | Either ‘label’, ‘value’, ‘percent’ or an array of labels to place on the pie slices. |
| showDataLabels | true to show data labels on slices. |
| dataLabelFormatString | Format string for data labels. |
| dataLabelThreshold | |
| dataLabelPositionFactor | A Multiplier (0-1) of the pie radius which controls position of label on slice. |
| dataLabelNudge | Number of pixels to slide the label away from (+) or toward (-) the center of the pie. |
| startAngle | Angle to start drawing donut in degrees. |
| $.jqplot. | Legend Renderer specific to donut plots. |
| Properties | |
| numberRows | Maximum number of rows in the legend. |
| numberColumns | Maximum number of columns in the legend. |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
$.jqplot.DonutLegendRenderer
Legend Renderer specific to donut plots. Set by default when user creates a donut plot.
Summary
| Properties | |
| numberRows | Maximum number of rows in the legend. |
| numberColumns | Maximum number of columns in the legend. |
API Documentation
Plugins
jqplot.DonutRenderer
Outer diameter of the donut, auto computed by default
this.diameter = null
Inner diameter of the donut, auto calculated by default.
this.innerDiameter = null
thickness of the donut, auto computed by default Overridden by if innerDiameter is specified.
this.thickness = null
padding between the donut and plot edges, legend, etc.
this.padding = 20
angular spacing between donut slices in degrees.
this.sliceMargin = 0
pixel distance between rings, or multiple series in a donut plot.
this.ringMargin = null
true or false, wether to fil the slices.
this.fill = true
offset of the shadow from the slice and offset of each succesive stroke of the shadow from the last.
this.shadowOffset = 2
transparency of the shadow (0 = transparent, 1 = opaque)
this.shadowAlpha = 0.07
number of strokes to apply to the shadow, each stroke offset shadowOffset from the last.
this.shadowDepth = 5
True to highlight slice when moused over.
this.highlightMouseOver = true
True to highlight when a mouse button is pressed over a slice.
this.highlightMouseDown = false
an array of colors to use when highlighting a slice.
this.highlightColors = []
Either ‘label’, ‘value’, ‘percent’ or an array of labels to place on the pie slices.
this.dataLabels = 'percent'
true to show data labels on slices.
this.showDataLabels = false
Format string for data labels.
this.dataLabelFormatString = null
this.dataLabelThreshold = 3
A Multiplier (0-1) of the pie radius which controls position of label on slice.
this.dataLabelPositionFactor = 0.4
Number of pixels to slide the label away from (+) or toward (-) the center of the pie.
this.dataLabelNudge = 0
Angle to start drawing donut in degrees.
this.startAngle = 0
Maximum number of rows in the legend.
this.numberRows = null
Maximum number of columns in the legend.
this.numberColumns = null
Plugin to make plotted points dragable by the user.
Summary
| $.jqplot. | Plugin to make plotted points dragable by the user. |
| Properties | |
| color | CSS color spec for the dragged point (and adjacent line segment or bar). |
| constrainTo | Constrain dragging motion to an axis or to none. |
API Documentation
Plugins
jqplot.Dragable
CSS color spec for the dragged point (and adjacent line segment or bar).
this.color
Constrain dragging motion to an axis or to none.
this.constrainTo = 'none'
Summary
| jqplot. | |
| Properties | |
| numberRows | Maximum number of rows in the legend. |
| numberColumns | Maximum number of columns in the legend. |
| seriesToggle | false to not enable series on/off toggling on the legend. |
| seriesToggleReplot | True to replot the chart after toggling series on/off. |
| disableIEFading | true to toggle series with a show/hide method only and not allow fading in/out. |
+
+
+
+
+
+
+
+
API Documentation
Plugins
jqplot.enhancedLegendRenderer.js
Maximum number of rows in the legend.
this.numberRows = null
Maximum number of columns in the legend.
this.numberColumns = null
false to not enable series on/off toggling on the legend.
this.seriesToggle = 'normal'
True to replot the chart after toggling series on/off.
this.seriesToggleReplot = false
true to toggle series with a show/hide method only and not allow fading in/out.
this.disableIEFading = true
Plugin renderer to draw a funnel chart. x values, if present, will be used as labels. y values give area size.
Funnel charts will draw a single series only.
To use this renderer, you need to include the funnel renderer plugin, for example:
<script type="text/javascript" src="plugins/jqplot.funnelRenderer.js"></script>
Properties described here are passed into the $.jqplot function as options on the series renderer. For example:
plot2 = $.jqplot('chart2', [s1, s2], {
+ seriesDefaults: {
+ renderer:$.jqplot.FunnelRenderer,
+ rendererOptions:{
+ sectionMargin: 12,
+ widthRatio: 0.3
+ }
+ }
+});IMPORTANT
The funnel renderer will reorder data in descending order so the largest value in the data set is first and displayed on top of the funnel. Data will then be displayed in descending order down the funnel. The area of each funnel section will correspond to the value of each data point relative to the sum of all values. That is section area is proportional to section value divided by sum of all section values.
If your data is not in descending order when passed into the plot, it will be reordered when stored in the series.data property. A copy of the unordered data is kept in the series._unorderedData property.
A funnel plot will trigger events on the plot target according to user interaction. All events return the event object, the series index, the point (section) index, and the point data for the appropriate section. Note the point index will referr to the ordered data, not the original unordered data.
| ’jqplotDataMouseOver’ | triggered when mousing over a section. |
| ’jqplotDataHighlight’ | triggered the first time user mouses over a section, if highlighting is enabled. |
| ’jqplotDataUnhighlight’ | triggered when a user moves the mouse out of a highlighted section. |
| ’jqplotDataClick’ | triggered when the user clicks on a section. |
| ’jqplotDataRightClick’ | tiggered when the user right clicks on a section if the “captureRightClick” option is set to true on the plot. |
Summary
| $.jqplot. | Plugin renderer to draw a funnel chart. |
| Properties | |
| padding | padding between the funnel and plot edges, legend, etc. |
| sectionMargin | spacing between funnel sections in pixels. |
| fill | true or false, wether to fill the areas. |
| shadowOffset | offset of the shadow from the area and offset of each succesive stroke of the shadow from the last. |
| shadowAlpha | transparency of the shadow (0 = transparent, 1 = opaque) |
| shadowDepth | number of strokes to apply to the shadow, each stroke offset shadowOffset from the last. |
| highlightMouseOver | True to highlight area when moused over. |
| highlightMouseDown | True to highlight when a mouse button is pressed over a area. |
| highlightColors | array of colors to use when highlighting an area. |
| widthRatio | The ratio of the width of the top of the funnel to the bottom. |
| lineWidth | width of line if areas are stroked and not filled. |
| dataLabels | Either ‘label’, ‘value’, ‘percent’ or an array of labels to place on the pie slices. |
| showDataLabels | true to show data labels on slices. |
| dataLabelFormatString | Format string for data labels. |
| dataLabelThreshold | |
| $.jqplot. | Legend Renderer specific to funnel plots. |
| Properties | |
| numberRows | Maximum number of rows in the legend. |
| numberColumns | Maximum number of columns in the legend. |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
$.jqplot.FunnelLegendRenderer
Legend Renderer specific to funnel plots. Set by default when the user creates a funnel plot.
Summary
| Properties | |
| numberRows | Maximum number of rows in the legend. |
| numberColumns | Maximum number of columns in the legend. |
API Documentation
Plugins
jqplot.FunnelRenderer
padding between the funnel and plot edges, legend, etc.
this.padding = {top: 20, right: 20, bottom: 20, left: 20}
spacing between funnel sections in pixels.
this.sectionMargin = 6
true or false, wether to fill the areas.
this.fill = true
offset of the shadow from the area and offset of each succesive stroke of the shadow from the last.
this.shadowOffset = 2
transparency of the shadow (0 = transparent, 1 = opaque)
this.shadowAlpha = 0.07
number of strokes to apply to the shadow, each stroke offset shadowOffset from the last.
this.shadowDepth = 5
True to highlight area when moused over.
this.highlightMouseOver = true
True to highlight when a mouse button is pressed over a area.
this.highlightMouseDown = false
array of colors to use when highlighting an area.
this.highlightColors = []
The ratio of the width of the top of the funnel to the bottom.
this.widthRatio = 0.2
width of line if areas are stroked and not filled.
this.lineWidth = 2
Either ‘label’, ‘value’, ‘percent’ or an array of labels to place on the pie slices.
this.dataLabels = 'percent'
true to show data labels on slices.
this.showDataLabels = false
Format string for data labels.
this.dataLabelFormatString = null
this.dataLabelThreshold = 3
Maximum number of rows in the legend.
this.numberRows = null
Maximum number of columns in the legend.
this.numberColumns = null
Plugin which will highlight data points when they are moused over.
To use this plugin, include the js file in your source:
<script type="text/javascript" src="plugins/jqplot.highlighter.js"></script>
A tooltip providing information about the data point is enabled by default. To disable the tooltip, set “showTooltip” to false.
You can control what data is displayed in the tooltip with various options. The “tooltipAxes” option controls wether the x, y or both data values are displayed.
Some chart types (e.g. hi-low-close) have more than one y value per data point. To display the additional values in the tooltip, set the “yvalues” option to the desired number of y values present (3 for a hlc chart).
By default, data values will be formatted with the same formatting specifiers as used to format the axis ticks. A custom format code can be supplied with the tooltipFormatString option. This will apply to all values in the tooltip.
For more complete control, the “formatString” option can be set. This Allows conplete control over tooltip formatting. Values are passed to the format string in an order determined by the “tooltipAxes” and “yvalues” options. So, if you have a hi-low-close chart and you just want to display the hi-low-close values in the tooltip, you could set a formatString like:
highlighter: {
+ tooltipAxes: 'y',
+ yvalues: 3,
+ formatString:'<table class="jqplot-highlighter">
+ <tr><td>hi:</td><td>%s</td></tr>
+ <tr><td>low:</td><td>%s</td></tr>
+ <tr><td>close:</td><td>%s</td></tr></table>'
+}Summary
| $.jqplot. | Plugin which will highlight data points when they are moused over. |
| Properties | |
| show | true to show the highlight. |
| markerRenderer | Renderer used to draw the marker of the highlighted point. |
| showMarker | true to show the marker |
| lineWidthAdjust | Pixels to add to the lineWidth of the highlight. |
| sizeAdjust | Pixels to add to the overall size of the highlight. |
| showTooltip | Show a tooltip with data point values. |
| tooltipLocation | Where to position tooltip, ‘n’, ‘ne’, ‘e’, ‘se’, ‘s’, ‘sw’, ‘w’, ‘nw’ |
| fadeTooltip | true = fade in/out tooltip, flase = show/hide tooltip |
| tooltipFadeSpeed | ‘slow’, ‘def’, ‘fast’, or number of milliseconds. |
| tooltipOffset | Pixel offset of tooltip from the highlight. |
| tooltipAxes | Which axes to display in tooltip, ‘x’, ‘y’ or ‘both’, ‘xy’ or ‘yx’ ‘both’ and ‘xy’ are equivalent, ‘yx’ reverses order of labels. |
| useAxesFormatters | Use the x and y axes formatters to format the text in the tooltip. |
| tooltipFormatString | sprintf format string for the tooltip. |
| formatString | alternative to tooltipFormatString will format the whole tooltip text, populating with x, y values as indicated by tooltipAxes option. |
| yvalues | Number of y values to expect in the data point array. |
| bringSeriesToFront | This option requires jQuery 1.4+ True to bring the series of the highlighted point to the front of other series. |
markerRenderer
this.markerRenderer = new $.jqplot.MarkerRenderer( {shadow:false} )
Renderer used to draw the marker of the highlighted point. Renderer will assimilate attributes from the data point being highlighted, so no attributes need set on the renderer directly. Default is to turn off shadow drawing on the highlighted point.
+
+
+
+
+
+
+
+
+
+
+
+
tooltipFormatString
this.tooltipFormatString = '%.5P'
sprintf format string for the tooltip. Uses Ash Searle’s javascript sprintf implementation found here: http://hexmen.com/blog/2007/03/printf-sprintf/ See http://perldoc.perl.org/functions/sprintf.html for reference. Additional “p” and “P” format specifiers added by Chris Leonello.
formatString
this.formatString = null
alternative to tooltipFormatString will format the whole tooltip text, populating with x, y values as indicated by tooltipAxes option. So, you could have a tooltip like: ‘Date: %s, number of cats: %d’ to format the whole tooltip at one go. If useAxesFormatters is true, values will be formatted according to Axes formatters and you can populate your tooltip string with %s placeholders.
+
+
+
+
API Documentation
Plugins
jqplot.Highlighter
true to show the highlight.
this.show = $.jqplot.config.enablePlugins
Renderer used to draw the marker of the highlighted point.
this.markerRenderer = new $.jqplot.MarkerRenderer( {shadow:false} )
true to show the marker
this.showMarker = true
Pixels to add to the lineWidth of the highlight.
this.lineWidthAdjust = 2.5
Pixels to add to the overall size of the highlight.
this.sizeAdjust = 5
Show a tooltip with data point values.
this.showTooltip = true
Where to position tooltip, ‘n’, ‘ne’, ‘e’, ‘se’, ‘s’, ‘sw’, ‘w’, ‘nw’
this.tooltipLocation = 'nw'
true = fade in/out tooltip, flase = show/hide tooltip
this.fadeTooltip = true
‘slow’, ‘def’, ‘fast’, or number of milliseconds.
this.tooltipFadeSpeed = "fast"
Pixel offset of tooltip from the highlight.
this.tooltipOffset = 2
Which axes to display in tooltip, ‘x’, ‘y’ or ‘both’, ‘xy’ or ‘yx’ ‘both’ and ‘xy’ are equivalent, ‘yx’ reverses order of labels.
this.tooltipAxes = 'both'
Use the x and y axes formatters to format the text in the tooltip.
this.useAxesFormatters = true
sprintf format string for the tooltip.
this.tooltipFormatString = '%.5P'
alternative to tooltipFormatString will format the whole tooltip text, populating with x, y values as indicated by tooltipAxes option.
this.formatString = null
Number of y values to expect in the data point array.
this.yvalues = 1
This option requires jQuery 1.4+ True to bring the series of the highlighted point to the front of other series.
this.bringSeriesToFront = false
A plugin for a jqPlot to render a logarithmic axis.
To use this renderer, include the plugin in your source
<script type="text/javascript" language="javascript" src="plugins/jqplot.logAxisRenderer.js"></script>
and supply the appropriate options to your plot
{axes:{xaxis:{renderer:$.jqplot.LogAxisRenderer}}}Summary
| $.jqplot. | A plugin for a jqPlot to render a logarithmic axis. |
| axisDefaults | Default properties which will be applied directly to the series. |
| Properties | Properties |
| drawBaseline | True to draw the axis baseline. |
| minorTicks | Number of ticks to add between “major” ticks. |
+
+
+
+
+
+
API Documentation
Plugins
jqplot.LogAxisRenderer
True to draw the axis baseline.
this.drawBaseline = true
Number of ticks to add between “major” ticks.
this.minorTicks = 'auto'
An axis renderer for a Mekko chart. Should be used with a Mekko chart where the mekkoRenderer is used on the series. Displays the Y axis as a range from 0 to 1 (0 to 100%) and the x axis with a tick for each series scaled to the sum of all the y values.
Summary
| $.jqplot. | An axis renderer for a Mekko chart. |
| Properties | |
| tickMode | How to space the ticks on the axis. |
| barLabelRenderer | renderer to use to draw labels under each bar. |
| barLabels | array of labels to put under each bar. |
| barLabelOptions | options object to pass to the bar label renderer. |
+
+
+
+
+
+
+
+
API Documentation
Plugins
jqplot.MekkoAxisRenderer
How to space the ticks on the axis.
this.tickMode
renderer to use to draw labels under each bar.
this.barLabelRenderer = $.jqplot.AxisLabelRenderer
array of labels to put under each bar.
this.barLabels = this.barLabels || []
options object to pass to the bar label renderer.
this.barLabelOptions = {}
Draws a Mekko style chart which shows 3 dimensional data on a 2 dimensional graph. the $.jqplot.MekkoAxisRenderer should be used with mekko charts. The mekko renderer overrides the default legend renderer with it’s own $.jqplot.MekkoLegendRenderer which allows more flexibility to specify number of rows and columns in the legend.
Data is specified per bar in the chart. You can specify data as an array of y values, or as an array of [label, value] pairs. Note that labels are used only on the first series. Labels on subsequent series are ignored:
bar1 = [['shirts', 8],['hats', 14],['shoes', 6],['gloves', 16],['dolls', 12]]; +bar2 = [15,6,9,13,6]; +bar3 = [['grumpy',4],['sneezy',2],['happy',7],['sleepy',9],['doc',7]];
If you want to place labels for each bar under the axis, you use the barLabels option on the axes. The bar labels can be styled with the “.jqplot-mekko-barLabel” css class.
barLabels = ['Mickey Mouse', 'Donald Duck', 'Goofy'];
+axes:{xaxis:{barLabels:barLabels}}Summary
| $.jqplot. | Draws a Mekko style chart which shows 3 dimensional data on a 2 dimensional graph. |
| Properties | |
| borderColor | color of the borders between areas on the chart |
| showBorders | True to draw borders lines between areas on the chart. |
| Functions | |
| setGridData | converts the user data values to grid coordinates and stores them in the gridData array. |
| makeGridData | converts any arbitrary data values to grid coordinates and returns them. |
| $.jqplot. | Legend renderer used by mekko charts with options for controlling number or rows and columns as well as placement outside of plot area. |
| Properties | |
| numberRows | Maximum number of rows in the legend. |
| numberColumns | Maximum number of columns in the legend. |
+
+
+
+
+
+
makeGridData
$.jqplot.MekkoRenderer.prototype.makeGridData = function( data, plot )
converts any arbitrary data values to grid coordinates and returns them. This method exists so that plugins can use a series’ linerenderer to generate grid data points without overwriting the grid data associated with that series. Called with scope of a series.
$.jqplot.MekkoLegendRenderer
Legend renderer used by mekko charts with options for controlling number or rows and columns as well as placement outside of plot area.
Summary
| Properties | |
| numberRows | Maximum number of rows in the legend. |
| numberColumns | Maximum number of columns in the legend. |
API Documentation
Plugins
jqplot.MekkoRenderer
color of the borders between areas on the chart
this.borderColor = null
True to draw borders lines between areas on the chart.
this.showBorders = true
converts the user data values to grid coordinates and stores them in the gridData array.
$.jqplot.MekkoRenderer.prototype.setGridData = function( plot )
converts any arbitrary data values to grid coordinates and returns them.
$.jqplot.MekkoRenderer.prototype.makeGridData = function( data, plot )
Maximum number of rows in the legend.
this.numberRows = null
Maximum number of columns in the legend.
this.numberColumns = null
An axis renderer for a Mekko chart.
Plugin renderer to draw a meter gauge chart.
Data consists of a single series with 1 data point to position the gauge needle.
To use this renderer, you need to include the meter gauge renderer plugin, for example:
<script type="text/javascript" src="plugins/jqplot.meterGaugeRenderer.js"></script>
Properties described here are passed into the $.jqplot function as options on the series renderer. For example:
plot0 = $.jqplot('chart0',[[18]],{
+ title: 'Network Speed',
+ seriesDefaults: {
+ renderer: $.jqplot.MeterGaugeRenderer,
+ rendererOptions: {
+ label: 'MB/s'
+ }
+ }
+});A meterGauge plot does not support events.
Summary
| $.jqplot. | Plugin renderer to draw a meter gauge chart. |
| Properties | |
| diameter | Outer diameter of the meterGauge, auto computed by default |
| padding | padding between the meterGauge and plot edges, auto calculated by default. |
| shadowOffset | offset of the shadow from the gauge ring and offset of each succesive stroke of the shadow from the last. |
| shadowAlpha | transparency of the shadow (0 = transparent, 1 = opaque) |
| shadowDepth | number of strokes to apply to the shadow, each stroke offset shadowOffset from the last. |
| background | background color of the inside of the gauge. |
| ringColor | color of the outer ring, hub, and needle of the gauge. |
| tickColor | color of the tick marks around the gauge. |
| ringWidth | width of the ring around the gauge. |
| min | Minimum value on the gauge. |
| max | Maximum value on the gauge. |
| ticks | Array of tick values. |
| showTicks | true to show ticks around gauge. |
| showTickLabels | true to show tick labels next to ticks. |
| label | A gauge label like ‘kph’ or ‘Volts’ |
| labelHeightAdjust | Number of Pixels to offset the label up (-) or down (+) from its default position. |
| labelPosition | Where to position the label, either ‘inside’ or ‘bottom’. |
| intervals | Array of ranges to be drawn around the gauge. |
| intervalColors | Array of colors to use for the intervals. |
| intervalInnerRadius | Radius of the inner circle of the interval ring. |
| intervalOuterRadius | Radius of the outer circle of the interval ring. |
| tickSpacing | Degrees between ticks. |
| hubRadius | Radius of the hub at the bottom center of gauge which the needle attaches to. |
| tickPadding | padding of the tick marks to the outer ring and the tick labels to marks. |
| needleThickness | Maximum thickness the needle. |
| needlePad | Padding between needle and inner edge of the ring when the needle is at the min or max gauge value. |
| pegNeedle | True will stop needle just below/above the min/max values if data is below/above min/max, as if the meter is “pegged”. |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
API Documentation
Plugins
jqplot.MeterGaugeRenderer
Outer diameter of the meterGauge, auto computed by default
this.diameter = null
padding between the meterGauge and plot edges, auto calculated by default.
this.padding = null
offset of the shadow from the gauge ring and offset of each succesive stroke of the shadow from the last.
this.shadowOffset = 2
transparency of the shadow (0 = transparent, 1 = opaque)
this.shadowAlpha = 0.07
number of strokes to apply to the shadow, each stroke offset shadowOffset from the last.
this.shadowDepth = 4
background color of the inside of the gauge.
this.background = "#efefef"
color of the outer ring, hub, and needle of the gauge.
this.ringColor = "#BBC6D0"
color of the tick marks around the gauge.
this.tickColor = "989898"
width of the ring around the gauge.
this.ringWidth = null
Minimum value on the gauge.
this.min
Maximum value on the gauge.
this.max
Array of tick values.
this.ticks = []
true to show ticks around gauge.
this.showTicks = true
true to show tick labels next to ticks.
this.showTickLabels = true
A gauge label like ‘kph’ or ‘Volts’
this.label = null
Number of Pixels to offset the label up (-) or down (+) from its default position.
this.labelHeightAdjust = 0
Where to position the label, either ‘inside’ or ‘bottom’.
this.labelPosition = 'inside'
Array of ranges to be drawn around the gauge.
this.intervals = []
Array of colors to use for the intervals.
this.intervalColors = [ "#4bb2c5", "#EAA228", "#c5b47f", "#579575", "#839557", "#958c12", "#953579", "#4b5de4", "#d8b83f", "#ff5800", "#0085cc", "#c747a3", "#cddf54", "#FBD178", "#26B4E3", "#bd70c7"]
Radius of the inner circle of the interval ring.
this.intervalInnerRadius = null
Radius of the outer circle of the interval ring.
this.intervalOuterRadius = null
Degrees between ticks.
this.tickSpacing = 30
Radius of the hub at the bottom center of gauge which the needle attaches to.
this.hubRadius = null
padding of the tick marks to the outer ring and the tick labels to marks.
this.tickPadding = null
Maximum thickness the needle.
this.needleThickness = null
Padding between needle and inner edge of the ring when the needle is at the min or max gauge value.
this.needlePad = 6
True will stop needle just below/above the min/max values if data is below/above min/max, as if the meter is “pegged”.
this.pegNeedle = true
jqPlot Plugin to draw Open Hi Low Close, Candlestick and Hi Low Close charts.
To use this plugin, include the renderer js file in your source:
<script type="text/javascript" src="plugins/jqplot.ohlcRenderer.js"></script>
You will most likely want to use a date axis renderer for the x axis also, so include the date axis render js file also:
<script type="text/javascript" src="plugins/jqplot.dateAxisRenderer.js"></script>
Then you set the renderer in the series options on your plot
series: [{renderer:$.jqplot.OHLCRenderer}]For OHLC and candlestick charts, data should be specified like so:
dat = [['07/06/2009',138.7,139.68,135.18,135.4], ['06/29/2009',143.46,144.66,139.79,140.02], ...]
If the data array has only 4 values per point instead of 5, the renderer will create a Hi Low Close chart instead. In that case, data should be supplied like:
dat = [['07/06/2009',139.68,135.18,135.4], ['06/29/2009',144.66,139.79,140.02], ...]
To generate a candlestick chart instead of an OHLC chart, set the “candlestick” option to true:
series: [{renderer:$.jqplot.OHLCRenderer, rendererOptions:{candleStick:true}}],Summary
| $.jqplot. | jqPlot Plugin to draw Open Hi Low Close, Candlestick and Hi Low Close charts. |
| Properties | |
| candleStick | true to render chart as candleStick. |
| tickLength | length of the line in pixels indicating open and close price. |
| bodyWidth | width of the candlestick body in pixels. |
| openColor | color of the open price tick mark. |
| closeColor | color of the close price tick mark. |
| wickColor | color of the hi-lo line thorugh the candlestick body. |
| fillUpBody | true to render an “up” day (close price greater than open price) with a filled candlestick body. |
| fillDownBody | true to render a “down” day (close price lower than open price) with a filled candlestick body. |
| upBodyColor | Color of candlestick body of an “up” day. |
| downBodyColor | Color of candlestick body on a “down” day. |
| hlc | true if is a hi-low-close chart (no open price). |
| lineWidth | Width of the hi-low line and open/close ticks. |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
API Documentation
Plugins
jqplot.OHLCRenderer
true to render chart as candleStick.
this.candleStick = false
length of the line in pixels indicating open and close price.
this.tickLength = 'auto'
width of the candlestick body in pixels.
this.bodyWidth = 'auto'
color of the open price tick mark.
this.openColor = null
color of the close price tick mark.
this.closeColor = null
color of the hi-lo line thorugh the candlestick body.
this.wickColor = null
true to render an “up” day (close price greater than open price) with a filled candlestick body.
this.fillUpBody = false
true to render a “down” day (close price lower than open price) with a filled candlestick body.
this.fillDownBody = true
Color of candlestick body of an “up” day.
this.upBodyColor = null
Color of candlestick body on a “down” day.
this.downBodyColor = null
true if is a hi-low-close chart (no open price).
this.hlc = false
Width of the hi-low line and open/close ticks.
this.lineWidth = 1.5
Plugin renderer to draw a pie chart. x values, if present, will be used as slice labels. y values give slice size.
To use this renderer, you need to include the pie renderer plugin, for example:
<script type="text/javascript" src="plugins/jqplot.pieRenderer.js"></script>
Properties described here are passed into the $.jqplot function as options on the series renderer. For example:
plot2 = $.jqplot('chart2', [s1, s2], {
+ seriesDefaults: {
+ renderer:$.jqplot.PieRenderer,
+ rendererOptions:{
+ sliceMargin: 2,
+ startAngle: -90
+ }
+ }
+});A pie plot will trigger events on the plot target according to user interaction. All events return the event object, the series index, the point (slice) index, and the point data for the appropriate slice.
| ’jqplotDataMouseOver’ | triggered when user mouseing over a slice. |
| ’jqplotDataHighlight’ | triggered the first time user mouses over a slice, if highlighting is enabled. |
| ’jqplotDataUnhighlight’ | triggered when a user moves the mouse out of a highlighted slice. |
| ’jqplotDataClick’ | triggered when the user clicks on a slice. |
| ’jqplotDataRightClick’ | tiggered when the user right clicks on a slice if the “captureRightClick” option is set to true on the plot. |
Summary
| $.jqplot. | Plugin renderer to draw a pie chart. |
| Properties | |
| diameter | Outer diameter of the pie, auto computed by default |
| padding | padding between the pie and plot edges, legend, etc. |
| sliceMargin | angular spacing between pie slices in degrees. |
| fill | true or false, wether to fil the slices. |
| shadowOffset | offset of the shadow from the slice and offset of each succesive stroke of the shadow from the last. |
| shadowAlpha | transparency of the shadow (0 = transparent, 1 = opaque) |
| shadowDepth | number of strokes to apply to the shadow, each stroke offset shadowOffset from the last. |
| highlightMouseOver | True to highlight slice when moused over. |
| highlightMouseDown | True to highlight when a mouse button is pressed over a slice. |
| highlightColors | an array of colors to use when highlighting a slice. |
| dataLabels | Either ‘label’, ‘value’, ‘percent’ or an array of labels to place on the pie slices. |
| showDataLabels | true to show data labels on slices. |
| dataLabelFormatString | Format string for data labels. |
| dataLabelThreshold | Threshhold in percentage (0-100) of pie area, below which no label will be displayed. |
| dataLabelPositionFactor | A Multiplier (0-1) of the pie radius which controls position of label on slice. |
| dataLabelNudge | Number of pixels to slide the label away from (+) or toward (-) the center of the pie. |
| dataLabelCenterOn | True to center the data label at its position. |
| startAngle | Angle to start drawing pie in degrees. |
| $.jqplot. | Legend Renderer specific to pie plots. |
| Properties | |
| numberRows | Maximum number of rows in the legend. |
| numberColumns | Maximum number of columns in the legend. |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
$.jqplot.PieLegendRenderer
Legend Renderer specific to pie plots. Set by default when user creates a pie plot.
Summary
| Properties | |
| numberRows | Maximum number of rows in the legend. |
| numberColumns | Maximum number of columns in the legend. |
API Documentation
Plugins
jqplot.PieRenderer
Outer diameter of the pie, auto computed by default
this.diameter = null
padding between the pie and plot edges, legend, etc.
this.padding = 20
angular spacing between pie slices in degrees.
this.sliceMargin = 0
true or false, wether to fil the slices.
this.fill = true
offset of the shadow from the slice and offset of each succesive stroke of the shadow from the last.
this.shadowOffset = 2
transparency of the shadow (0 = transparent, 1 = opaque)
this.shadowAlpha = 0.07
number of strokes to apply to the shadow, each stroke offset shadowOffset from the last.
this.shadowDepth = 5
True to highlight slice when moused over.
this.highlightMouseOver = true
True to highlight when a mouse button is pressed over a slice.
this.highlightMouseDown = false
an array of colors to use when highlighting a slice.
this.highlightColors = []
Either ‘label’, ‘value’, ‘percent’ or an array of labels to place on the pie slices.
this.dataLabels = 'percent'
true to show data labels on slices.
this.showDataLabels = false
Format string for data labels.
this.dataLabelFormatString = null
Threshhold in percentage (0-100) of pie area, below which no label will be displayed.
this.dataLabelThreshold = 3
A Multiplier (0-1) of the pie radius which controls position of label on slice.
this.dataLabelPositionFactor = 0.52
Number of pixels to slide the label away from (+) or toward (-) the center of the pie.
this.dataLabelNudge = 2
True to center the data label at its position.
this.dataLabelCenterOn = true
Angle to start drawing pie in degrees.
this.startAngle = 0
Maximum number of rows in the legend.
this.numberRows = null
Maximum number of columns in the legend.
this.numberColumns = null
Plugin for putting labels at the data points.
To use this plugin, include the js file in your source:
<script type="text/javascript" src="plugins/jqplot.pointLabels.js"></script>
By default, the last value in the data ponit array in the data series is used for the label. For most series renderers, extra data can be added to the data point arrays and the last value will be used as the label.
For instance, this series:
[[1,4], [3,5], [7,2]]
Would, by default, use the y values in the labels. Extra data can be added to the series like so:
[[1,4,'mid'], [3 5,'hi'], [7,2,'low']]
And now the point labels would be ‘mid’, ‘low’, and ‘hi’.
Options to the point labels and a custom labels array can be passed into the “pointLabels” option on the series option like so:
series:[{pointLabels:{
+ labels:['mid', 'hi', 'low'],
+ location:'se',
+ ypadding: 12
+ }
+}]A custom labels array in the options takes precendence over any labels in the series data. If you have a custom labels array in the options, but still want to use values from the series array as labels, set the “labelsFromSeries” option to true.
By default, html entities (<, >, etc.) are escaped in point labels. If you want to include actual html markup in the labels, set the “escapeHTML” option to false.
Summary
| $.jqplot. | Plugin for putting labels at the data points. |
| Properties | |
| show | show the labels or not. |
| location | compass location where to position the label around the point. |
| labelsFromSeries | true to use labels within data point arrays. |
| seriesLabelIndex | array index for location of labels within data point arrays. |
| labels | array of arrays of labels, one array for each series. |
| stackedValue | true to display value as stacked in a stacked plot. |
| ypadding | vertical padding in pixels between point and label |
| xpadding | horizontal padding in pixels between point and label |
| escapeHTML | true to escape html entities in the labels. |
| edgeTolerance | Number of pixels that the label must be away from an axis boundary in order to be drawn. |
| formatter | A class of a formatter for the tick text. |
| formatString | string passed to the formatter. |
| hideZeros | true to not show a label for a value which is 0. |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
API Documentation
Plugins
jqplot.PointLabels
show the labels or not.
this.show = $.jqplot.config.enablePlugins
compass location where to position the label around the point.
this.location = 'n'
true to use labels within data point arrays.
this.labelsFromSeries = false
array index for location of labels within data point arrays.
this.seriesLabelIndex = null
array of arrays of labels, one array for each series.
this.labels = []
true to display value as stacked in a stacked plot.
this.stackedValue = false
vertical padding in pixels between point and label
this.ypadding = 6
horizontal padding in pixels between point and label
this.xpadding = 6
true to escape html entities in the labels.
this.escapeHTML = true
Number of pixels that the label must be away from an axis boundary in order to be drawn.
this.edgeTolerance = -5
A class of a formatter for the tick text.
this.formatter = $.jqplot.DefaultTickFormatter
string passed to the formatter.
this.formatString = ''
true to not show a label for a value which is 0.
this.hideZeros = false
Summary
| jqplot. | |
| Properties | |
| position | Position of axis. |
| drawBaseline | True to draw the axis baseline. |
| baselineWidth | width of the baseline in pixels. |
| baselineColor | CSS color spec for the baseline. |
+
+
+
+
+
+
+
+
API Documentation
Plugins
jqplot.pyramidAxisRenderer.js
Position of axis.
this.position = null
True to draw the axis baseline.
this.drawBaseline = true
width of the baseline in pixels.
this.baselineWidth = null
CSS color spec for the baseline.
this.baselineColor = null
The default jqPlot grid renderer, creating a grid on a canvas element. The renderer has no additional options beyond the Grid class.
API Documentation
Plugins
jqplot.CanvasGridRenderer
Object representing the grid on which the plot is drawn.
Summary
| jqplot. | |
| Properties | |
| barPadding | |
| fill | True to fill the bars. |
| highlightMouseOver | True to highlight slice when moused over. |
| highlightMouseDown | True to highlight when a mouse button is pressed over a slice. |
| highlightColors | an array of colors to use when highlighting a slice. |
| synchronizeHighlight | Index of another series to highlight when this series is highlighted. |
| offsetBars | False will center bars on their y value. |
+
+
+
+
+
+
+
+
+
+
API Documentation
Plugins
jqplot.pyramidRenderer.js
this.barPadding = 10
True to fill the bars.
this.fill = true
True to highlight slice when moused over.
this.highlightMouseOver = true
True to highlight when a mouse button is pressed over a slice.
this.highlightMouseDown = false
an array of colors to use when highlighting a slice.
this.highlightColors = []
Index of another series to highlight when this series is highlighted.
this.synchronizeHighlight = false
False will center bars on their y value.
this.offsetBars = false
Plugin which will automatically compute and draw trendlines for plotted data.
Summary
| $.jqplot. | Plugin which will automatically compute and draw trendlines for plotted data. |
| Properties | |
| show | Wether or not to show the trend line. |
| color | CSS color spec for the trend line. |
| renderer | Renderer to use to draw the trend line. |
| rendererOptions | Options to pass to the line renderer. |
| label | Label for the trend line to use in the legend. |
| type | Either ‘exponential’, ‘exp’, or ‘linear’. |
| shadow | true or false, wether or not to show the shadow. |
| markerRenderer | Renderer to use to draw markers on the line. |
| lineWidth | Width of the trend line. |
| shadowAngle | Angle of the shadow on the trend line. |
| shadowOffset | pixel offset for each stroke of the shadow. |
| shadowAlpha | Alpha transparency of the shadow. |
| shadowDepth | number of strokes to make of the shadow. |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
API Documentation
Plugins
jqplot.Trendline
Wether or not to show the trend line.
this.show = $.jqplot.config.enablePlugins
CSS color spec for the trend line.
this.color = '#666666'
Renderer to use to draw the trend line.
this.renderer = new $.jqplot.LineRenderer()
Options to pass to the line renderer.
this.rendererOptions = {marker:{show:false}}
Label for the trend line to use in the legend.
this.label = ''
Either ‘exponential’, ‘exp’, or ‘linear’.
this.type = 'linear'
true or false, wether or not to show the shadow.
this.shadow = true
Renderer to use to draw markers on the line.
this.markerRenderer = {show:false}
Width of the trend line.
this.lineWidth = 1.5
Angle of the shadow on the trend line.
this.shadowAngle = 45
pixel offset for each stroke of the shadow.
this.shadowOffset = 1.0
Alpha transparency of the shadow.
this.shadowAlpha = 0.07
number of strokes to make of the shadow.
this.shadowDepth = 3
Usage Documentation
Introduction
jqPlot is a jQuery plugin to generate pure client-side javascript charts in your web pages.
The jqPlot home page is at http://www.jqplot.com/.
The project page and downloads are at http://www.bitbucket.org/cleonello/jqplot/.
Below are a few examples to demonstrate jqPlot usage. These plots are shown as static images. Many more examples of dynamically rendered plots can be seen on the test and examples pages here: ../../tests/.
Include the Files
jqPlot requires jQuery (1.4+ required for certain features). jQuery is included in the distribution. To use jqPlot include jquery, the jqPlot jQuery plugin, jqPlot css file and optionally the excanvas script for IE support in your web page. Note, excanvas is required only for IE versions below 9. IE 9 includes native support for the canvas element and does not require excanvas:
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="excanvas.js"></script><![endif]--> +<script language="javascript" type="text/javascript" src="jquery.min.js"></script> +<script language="javascript" type="text/javascript" src="jquery.jqplot.min.js"></script> +<link rel="stylesheet" type="text/css" href="jquery.jqplot.css" />
Add a plot container
Add a container (target) to your web page where you want your plot to show up. Be sure to give your target a width and a height:
<div id="chartdiv" style="height:400px;width:300px; "></div>
Create a plot
Then, create the actual plot by calling the $.jqplot plugin with the id of your target and some data:
$.jqplot('chartdiv', [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]]);Which will produce a chart like:
Plot Options
You can customize the plot by passing options to the $.jqplot function. Options are described in jqPlot Options in the jqPlotOptions.txt file. An example of options usage:
$.jqplot('chartdiv', [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]],
+{ title:'Exponential Line',
+ axes:{yaxis:{min:-10, max:240}},
+ series:[{color:'#5FAB78'}]
+});Which will produce a plot like:
Using Plugins
You can use jqPlot plugins (that is, plugins to the jqPlot plugin) by including them in your html after you include the jqPlot plugin. Here is how to include the log axis plugin:
<link rel="stylesheet" type="text/css" href="jquery.jqplot.css" /> +<!--[if IE]><script language="javascript" type="text/javascript" src="excanvas.js"></script><![endif]--> +<script language="javascript" type="text/javascript" src="jquery.min.js"></script> +<script language="javascript" type="text/javascript" src="jquery.jqplot.min.js"></script> +<script language="javascript" type="text/javascript" src="jqplot.logAxisRenderer.js"></script>
Important note: For jqplot builds r529 and above (0.9.7r529 and higher), you must explicitly enable plugins via either the { show: true } plugin option to the plot or by using the $.jqplot.config.enablePlugins = true; config options set on the page before plot creation. Only plugins that can be immediately active upon loading are affected. This includes non-renderer plugins like cursor, dragable, highlighter, and trendline.
Here is a the same $.jqplot call but with a log y axis:
$.jqplot('chartdiv', [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]],
+{ title:'Exponential Line',
+ axes:{yaxis:{renderer: $.jqplot.LogAxisRenderer}},
+ series:[{color:'#5FAB78'}]
+});Which produces a plot like:
You can further customize with options specific to the log axis plugin:
$.jqplot('chartdiv', [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]],
+{ title:'Exponential Line',
+ axes:{yaxis:{renderer: $.jqplot.LogAxisRenderer, tickDistribution:'power'}},
+ series:[{color:'#5FAB78'}]
+});Which makes a plot like:
For a full list of options, see jqPlot Options in the jqPlotOptions.txt file.
You can add as many plugins as you wish. Order is generally not important. Some plugins, like the highlighter plugin which highlights data points near the mouse, don’t need any extra options or setup to function. Highlighter does have additional options which the user can set.
Other plugins, the barRenderer for example, provide functionality the must be specified in the chart options object. To render a series as a bar graph with the bar renderer, you would first include the plugin after jqPlot:
<script language="javascript" type="text/javascript" src="plugins/jqplot.barRenderer.min.js"></script>
Then you would create a chart like:
$.jqplot('chartdiv', [[34.53, 56.32, 25.1, 18.6]], {series:[{renderer:$.jqplot.BarRenderer}]});Here the default LineRenderer is replaced by a BarRenderer to generate a bar graph for the first (an only) series.
This document is out of date.
Class Index
jQuery namespace to attach functions to jQuery elements.
jQuery function called by the user to create a plot.
Renderer to place labels on the axes.
A “tick” object showing the value of a tick/gridline on the plot.
A plugin renderer for jqPlot to draw a bar plot.
Renderer which draws lines as stacked bezier curves.
Plugin renderer to draw a x-y block chart.
Plugin renderer to draw a bubble chart.
Renderer to draw axis labels with a canvas element to support advanced featrues such as rotated text.
Renderer to draw axis ticks with a canvas element to support advanced featrues such as rotated text.
The default jqPlot grid renderer, creating a grid on a canvas element.
A plugin for jqPlot to render a category style axis, with equal pixel spacing between y data values of a series.
Data Renderer function which converts a custom JSON data object into jqPlot data format.
Plugin class representing the cursor as displayed on the plot.
A plugin for a jqPlot to render an axis as a series of date values.
The default title renderer for jqPlot.
Legend Renderer specific to donut plots.
Plugin renderer to draw a donut chart.
Plugin to make plotted points dragable by the user.
Legend Renderer specific to funnel plots.
Plugin renderer to draw a funnel chart.
Plugin which will highlight data points when they are moused over.
The default jqPlot axis renderer, creating a numeric axis.
The default line renderer for jqPlot, this class has no options beyond the Series class.
A plugin for a jqPlot to render a logarithmic axis.
The default jqPlot marker renderer, rendering the points on the line.
An axis renderer for a Mekko chart.
Legend renderer used by mekko charts with options for controlling number or rows and columns as well as placement outside of plot area.
Draws a Mekko style chart which shows 3 dimensional data on a 2 dimensional graph.
Plugin renderer to draw a meter gauge chart.
jqPlot Plugin to draw Open Hi Low Close, Candlestick and Hi Low Close charts.
Legend Renderer specific to pie plots.
Plugin renderer to draw a pie chart.
Plugin for putting labels at the data points.
The default jqPlot shadow renderer, rendering shadows behind shapes.
The default jqPlot shape renderer.
Theme Engine provides a programatic way to change some of the more common jqplot styling options such as fonts, colors and grid options.
Plugin which will automatically compute and draw trendlines for plotted data.
An individual axis object.
A straight dashed horizontal line.
A straight dashed vertical line.
Object representing the grid on which the plot is drawn.
A straight horizontal line.
Plot object returned by call to $.jqplot.
Legend object.
A straight line.
An individual data series object.
Plot Title object.
A straight vertical line.
File Index
| J | |
| jqplot. | |
| jqplot. | |
| jqplot. |
Function Index
| C | |
| copy, $.jqplot. | |
| D | |
| destroy, jqPlot | |
| draw | |
| drawSeries, jqPlot | |
| G | |
| get, $.jqplot. | |
| getThemeNames, $.jqplot. | |
| getThemes, $.jqplot. | |
| I | |
| init, jqPlot | |
| M | |
| makeGridData | |
| moveBlock, $.jqplot. | |
| moveSeriesToBack, jqPlot | |
| moveSeriesToFront, jqPlot | |
| N | |
| newTheme, $.jqplot. | |
| Q | |
| quickInit, jqPlot | |
| R | |
| redraw, jqPlot | |
| reInitialize, jqPlot | |
| remove, $.jqplot. | |
| rename, $.jqplot. | |
| replot, jqPlot | |
| resetAxesScale, jqPlot | |
| restoreOriginalSeriesOrder, jqPlot | |
| restorePreviousSeriesOrder, jqPlot | |
| S | |
| setGridData | |
| Z | |
| zoomProxy, $.jqplot. |
Create a copy of an existing theme in the themeEngine, adding it the themeEngine.
$.jqplot.ThemeEngine.prototype.copy = function ( sourceName, targetName, obj )
Releases all resources occupied by the plot
this.destroy = function()
draws an transparent black (i.e.
$.jqplot.ShadowRenderer.prototype.draw = function( ctx, points, options )
draws the shape.
$.jqplot.ShapeRenderer.prototype.draw = function( ctx, points, options )
Draws all elements of the plot into the container.
this.draw = function()
Redraws all or just one series on the plot.
this.drawSeries = function( options, idx )
Get and return the named theme or the active theme if no name given.
$.jqplot.ThemeEngine.prototype.get = function( name )
Return the list of theme names in this manager in alpha-numerical order.
$.jqplot.ThemeEngine.prototype.getThemeNames = function()
Return a list of themes in alpha-numerical order by name.
$.jqplot.ThemeEngine.prototype.getThemes = function()
sets the plot target, checks data and applies user options to plot.
this.init = function( target, data, options )
converts any arbitrary data values to grid coordinates and returns them.
$.jqplot.BezierCurveRenderer.prototype.makeGridData = function( data, plot )
converts any arbitrary data values to grid coordinates and returns them.
$.jqplot.MekkoRenderer.prototype.makeGridData = function( data, plot )
Moves an individual block.
this.moveBlock = function ( idx, x, y, duration )
This method requires jQuery 1.4+ Moves the specified series canvas behind all other series canvases.
this.moveSeriesToBack = function ( idx )
This method requires jQuery 1.4+ Moves the specified series canvas in front of all other series canvases.
this.moveSeriesToFront = function ( idx )
Create a new theme based on the default theme, adding it the themeEngine.
$.jqplot.ThemeEngine.prototype.newTheme = function( name, obj )
Quick reinitialization plot for replotting.
this.quickInit = function ()
Empties the plot target div and redraws the plot.
this.redraw = function( clear )
reinitialize plot for replotting.
this.reInitialize = function ( data, opts )
Remove the given theme from the themeEngine.
$.jqplot.ThemeEngine.prototype.remove = function( name )
Rename a theme.
$.jqplot.ThemeEngine.prototype.rename = function ( oldName, newName )
Does a reinitialization of the plot followed by a redraw.
this.replot = function( options )
Reset the specified axes min, max, numberTicks and tickInterval properties to null or reset these properties on all axes if no list of axes is provided.
this.resetAxesScale = function( axes, options )
This method requires jQuery 1.4+ Restore the series canvas order to its original order when the plot was created.
this.restoreOriginalSeriesOrder = function ()
This method requires jQuery 1.4+ Restore the series canvas order to its previous state.
this.restorePreviousSeriesOrder = function ()
converts the user data values to grid coordinates and stores them in the gridData array.
$.jqplot.BezierCurveRenderer.prototype.setGridData = function( plot )
converts the user data values to grid coordinates and stores them in the gridData array.
$.jqplot.MekkoRenderer.prototype.setGridData = function( plot )
links targetPlot to controllerPlot so that plot zooming of targetPlot will be controlled by zooming on the controllerPlot.
$.jqplot.Cursor.zoomProxy = function( targetPlot, controllerPlot )
Index
jQuery namespace to attach functions to jQuery elements.
jQuery function called by the user to create a plot.
Renderer to place labels on the axes.
A “tick” object showing the value of a tick/gridline on the plot.
A plugin renderer for jqPlot to draw a bar plot.
Renderer which draws lines as stacked bezier curves.
Plugin renderer to draw a x-y block chart.
Plugin renderer to draw a bubble chart.
Renderer to draw axis labels with a canvas element to support advanced featrues such as rotated text.
Renderer to draw axis ticks with a canvas element to support advanced featrues such as rotated text.
The default jqPlot grid renderer, creating a grid on a canvas element.
A plugin for jqPlot to render a category style axis, with equal pixel spacing between y data values of a series.
Data Renderer function which converts a custom JSON data object into jqPlot data format.
Plugin class representing the cursor as displayed on the plot.
A plugin for a jqPlot to render an axis as a series of date values.
The default title renderer for jqPlot.
Legend Renderer specific to donut plots.
Plugin renderer to draw a donut chart.
Plugin to make plotted points dragable by the user.
Legend Renderer specific to funnel plots.
Plugin renderer to draw a funnel chart.
Plugin which will highlight data points when they are moused over.
The default jqPlot axis renderer, creating a numeric axis.
The default line renderer for jqPlot, this class has no options beyond the Series class.
A plugin for a jqPlot to render a logarithmic axis.
The default jqPlot marker renderer, rendering the points on the line.
An axis renderer for a Mekko chart.
Legend renderer used by mekko charts with options for controlling number or rows and columns as well as placement outside of plot area.
Draws a Mekko style chart which shows 3 dimensional data on a 2 dimensional graph.
Plugin renderer to draw a meter gauge chart.
jqPlot Plugin to draw Open Hi Low Close, Candlestick and Hi Low Close charts.
Legend Renderer specific to pie plots.
Plugin renderer to draw a pie chart.
Plugin for putting labels at the data points.
The default jqPlot shadow renderer, rendering shadows behind shapes.
The default jqPlot shape renderer.
Theme Engine provides a programatic way to change some of the more common jqplot styling options such as fonts, colors and grid options.
Plugin which will automatically compute and draw trendlines for plotted data.
Pointer to currently active theme
this.activeTheme=null
called at the end of legend draw, so plugins can add rows to the legend table.
true to align tick marks across opposed axes such as from the y2axis to yaxis.
this.alignTicks = false
alpha transparency of shadow stroke.
this.alpha = 0.07
angle of text, measured clockwise from x axis.
this.angle = 0
angle of text, measured clockwise from x axis.
this.angle = 0
Angle of the shadow in degrees.
this.angle = 45
True to animate the series on initial plot draw (renderer dependent).
this.animate = false
True to animate series after a call to the replot() method.
this.animateReplot = false
DEPRECATED the default scaling algorithm produces superior results.
this.autoscale = false
True to scale the bubble radius based on plot size.
this.autoscaleBubbles = true
Multiplier the bubble size if autoscaleBubbles is true.
this.autoscaleMultiplier = 1.0
Factor which decreases bubble size based on how many bubbles on on the chart.
this.autoscalePointsFactor = -0.07
See jqPlot Options for a list of options available thorugh the options object (not complete yet!)
up to 4 axes are supported, each with it’s own options, See Axis for axis specific options.
this.axes = {xaxis: new Axis('xaxis'), yaxis: new Axis('yaxis'), x2axis: new Axis('x2axis'), y2axis: new Axis('y2axis'), y3axis: new Axis('y3axis'), y4axis: new Axis('y4axis'), y5axis: new Axis('y5axis'), y6axis: new Axis('y6axis'), y7axis: new Axis('y7axis'), y8axis: new Axis('y8axis'), y9axis: new Axis('y9axis'), yMidAxis: new Axis('yMidAxis')}
default options that will be applied to all axes.
An individual axis object.
Default properties which will be applied directly to the series.
background color of the inside of the gauge.
this.background = "#efefef"
css spec for the background color.
this.background = '#fffdf6'
css spec for the background of the legend box.
this.background
Data used to draw error bands or confidence intervals above/below a line.
this.renderer.bandData = []
Banding around line, e.g error bands or confidence intervals.
‘vertical’ = up and down bars, ‘horizontal’ = side to side bars
this.barDirection = 'vertical'
options object to pass to the bar label renderer.
this.barLabelOptions = {}
renderer to use to draw labels under each bar.
this.barLabelRenderer = $.jqplot.AxisLabelRenderer
array of labels to put under each bar.
this.barLabels = this.barLabels || []
Number of pixels between groups of bars at adjacent axis values.
this.barMargin = 10
this.barPadding = 10
Number of pixels between adjacent bars at the same axis value.
this.barPadding = 8
Width of the bar in pixels (auto by devaul).
this.barWidth = null
CSS color spec for the baseline.
this.baselineColor = null
CSS color spec for the baseline.
this.baselineColor = null
CSS color spec for the baseline.
this.baselineColor = null
width of the baseline in pixels.
this.baselineWidth = null
width of the baseline in pixels.
this.baselineWidth = null
width of the baseline in pixels.
this.baselineWidth = null
width of the candlestick body in pixels.
this.bodyWidth = 'auto'
css spec for the border around the legend box.
this.border
color of the borders between areas on the chart
this.borderColor = null
color of the border adjacent to the axis.
this.borderColor = null
css spec for the color of the grid border.
this.borderColor = '#999999'
width of line stroked at the border of the axis.
this.borderWidth = null
width of the border in pixels.
this.borderWidth = 2.0
Wether line segments should be be broken at null value.
this.breakOnNull = false
EXPERIMENTAL!!
this.breakPoints = null
Label to use at the axis break if breakPoints are specified.
this.breakTickLabel = "&asymp
This option requires jQuery 1.4+ True to bring the series of the highlighted point to the front of other series.
this.bringSeriesToFront = false
Alpha transparency to apply to all bubbles in this series.
this.bubbleAlpha = 1.0
True to color the bubbles with gradient fills instead of flat colors.
this.bubbleGradients = false
Index
| C | |
| candleStick, $.jqplot. | |
| Change Log | |
| Changes | |
| clearRect, $.jqplot. | |
| clickReset, $.jqplot. | |
| closeColor, $.jqplot. | |
| color | |
| constrainOutsideZoom, $.jqplot. | |
| constrainSmoothing, $.jqplot. | |
| constrainTo, $.jqplot. | |
| constrainZoomTo, $.jqplot. | |
| copy, $.jqplot. | |
| Copyright&License | |
| css, $.jqplot. | |
| cursorLegendFormatString, $.jqplot. | |
| D | |
| DashedHorizontalLine | |
| DashedVerticalLine | |
| dashPattern | |
| data, jqPlot | |
| dataLabelCenterOn, $.jqplot. | |
| dataLabelFormatString | |
| dataLabelNudge | |
| dataLabelPositionFactor | |
| dataLabels | |
| dataLabelThreshold | |
| dataRenderer, jqPlot | |
| dataRendererOptions, jqPlot | |
| dblClickReset, $.jqplot. | |
| defaultAxisStart, jqPlot | |
| depth, $.jqplot. | |
| destroy, jqPlot | |
| diameter | |
| disableIEFading | |
| disableStack, Series | |
| downBodyColor, $.jqplot. | |
| draw | |
| drawBaseline | |
| drawBorder, Grid | |
| drawGridlines, Grid | |
| drawMajorGridlines, Axis | |
| drawMajorTickMarks, Axis | |
| drawMinorGridlines, Axis | |
| drawMinorTickMarks, Axis | |
| drawSeries, jqPlot | |
| E | |
| edgeTolerance, $.jqplot. | |
| enableFontSupport | |
| escapeHtml | |
| escapeHTML | |
| eventListenerHooks, $.jqplot.$.jqplot |
true to render chart as candleStick.
this.candleStick = false
See Change Log
true to cear a rectangle.
this.clearRect = false
Will reset plot zoom if single click on plot without drag.
this.clickReset = false
color of the close price tick mark.
this.closeColor = null
color of the line
CSS color spec for the dragged point (and adjacent line segment or bar).
this.color
color of lines at top and bottom of bands [default: series color].
color of marker.
this.color = '#666666'
CSS color spec for the trend line.
this.color = '#666666'
css color spec for the series
this.color
True to limit actual zoom area to edges of grid, even when zooming outside of plot area.
this.constrainOutsideZoom = true
True to use a more accurate smoothing algorithm that will not overshoot any data points.
this.renderer.constrainSmoothing = true
Constrain dragging motion to an axis or to none.
this.constrainTo = 'none'
‘none’, ‘x’ or ‘y’
this.constrainZoomTo = 'none'
Create a copy of an existing theme in the themeEngine, adding it the themeEngine.
$.jqplot.ThemeEngine.prototype.copy = function ( sourceName, targetName, obj )
Copyright © 2009-2012 Chris Leonello jqPlot is currently available for use in all personal or commercial projects under both the MIT and GPL version 2.0 licenses.
default css styles that will be applied to all data blocks.
this.css = {padding:'2px', border:'1px solid #999', textAlign:'center'}
Format string used in the cursor legend.
this.cursorLegendFormatString = $.jqplot.Cursor.cursorLegendFormatString
A straight dashed horizontal line.
A straight dashed vertical line.
Array of line, space settings in pixels.
dashPattern: [8,8] }
Array of line, space settings in pixels.
dashPattern: [8,8] }
user’s data.
this.data = []
True to center the data label at its position.
this.dataLabelCenterOn = true
Format string for data labels.
this.dataLabelFormatString = null
Format string for data labels.
this.dataLabelFormatString = null
Format string for data labels.
this.dataLabelFormatString = null
Number of pixels to slide the label away from (+) or toward (-) the center of the pie.
this.dataLabelNudge = 0
Number of pixels to slide the label away from (+) or toward (-) the center of the pie.
this.dataLabelNudge = 2
A Multiplier (0-1) of the pie radius which controls position of label on slice.
this.dataLabelPositionFactor = 0.4
A Multiplier (0-1) of the pie radius which controls position of label on slice.
this.dataLabelPositionFactor = 0.52
Either ‘label’, ‘value’, ‘percent’ or an array of labels to place on the pie slices.
this.dataLabels = 'percent'
Either ‘label’, ‘value’, ‘percent’ or an array of labels to place on the pie slices.
this.dataLabels = 'percent'
Either ‘label’, ‘value’, ‘percent’ or an array of labels to place on the pie slices.
this.dataLabels = 'percent'
this.dataLabelThreshold = 3
this.dataLabelThreshold = 3
Threshhold in percentage (0-100) of pie area, below which no label will be displayed.
this.dataLabelThreshold = 3
A callable which can be used to preprocess data passed into the plot.
this.dataRenderer
Options that will be passed to the dataRenderer.
this.dataRendererOptions
Will reset plot zoom if double click on plot without drag.
this.dblClickReset = true
1-D data series are internally converted into 2-D [x,y] data point arrays by jqPlot.
this.defaultAxisStart = 1
how many times the shadow is stroked.
this.depth = 3
Releases all resources occupied by the plot
this.destroy = function()
Outer diameter of the donut, auto computed by default
this.diameter = null
Outer diameter of the meterGauge, auto computed by default
this.diameter = null
Outer diameter of the pie, auto computed by default
this.diameter = null
true to toggle series with a show/hide method only and not allow fading in/out.
this.disableIEFading = true
true to not stack this series with other series in the plot.
this.disableStack = false
Color of candlestick body on a “down” day.
this.downBodyColor = null
draws an transparent black (i.e.
$.jqplot.ShadowRenderer.prototype.draw = function( ctx, points, options )
draws the shape.
$.jqplot.ShapeRenderer.prototype.draw = function( ctx, points, options )
Draws all elements of the plot into the container.
this.draw = function()
True to draw the axis baseline.
this.drawBaseline = true
True to draw the axis baseline.
this.drawBaseline = true
True to draw the axis baseline.
this.drawBaseline = true
True to draw the axis baseline.
this.drawBaseline = true
True to draw border around grid.
this.drawBorder = true
wether to draw the gridlines on the plot.
this.drawGridlines = true
True to draw gridlines for major axis ticks.
this.drawMajorGridlines = true
True to draw tick marks for major axis ticks.
this.drawMajorTickMarks = true
True to draw gridlines for minor ticks.
this.drawMinorGridlines = false
True to draw tick marks for minor ticks.
this.drawMinorTickMarks = true
Redraws all or just one series on the plot.
this.drawSeries = function( options, idx )
Number of pixels that the label must be away from an axis boundary in order to be drawn.
this.edgeTolerance = -5
true to turn on native canvas font support in Mozilla 3.5+ and Safari 4+.
this.enableFontSupport = true
true to turn on native canvas font support in Mozilla 3.5+ and Safari 4+.
this.enableFontSupport = true
true to escape html in the box label.
this.escapeHtml = false
True to escape html in bubble label text.
this.escapeHtml = true
True to escape special characters with their html entity equivalents in legend text.
this.escapeHtml = false
True to escape special characters with their html entity equivalents in title text.
this.escapeHtml = false
true to escape HTML entities in the label.
this.escapeHTML = false
true to escape HTML entities in the label.
this.escapeHTML = false
true to escape html entities in the labels.
this.escapeHTML = true
called at the end of plot drawing, binds listeners to the event canvas which lays on top of the grid area.
Index
| F | |
| fadeTooltip | |
| fill | |
| fillAlpha, Series | |
| fillAndStroke, Series | |
| fillAxis, Series | |
| fillBetween, jqPlot | |
| fillColor | |
| fillDownBody, $.jqplot. | |
| fillRect, $.jqplot. | |
| fillStyle, $.jqplot. | |
| fillToValue, Series | |
| fillToZero, Series | |
| fillUpBody, $.jqplot. | |
| followMouse, $.jqplot. | |
| fontFamily | |
| fontSize | |
| fontStretch | |
| fontWeight | |
| forceTickAt0, $.jqplot. | |
| forceTickAt100, $.jqplot. | |
| formatString | |
| formatter | |
| Functions | |
| G | |
| get, $.jqplot. | |
| getThemeNames, $.jqplot. | |
| getThemes, $.jqplot. | |
| GPL Version 2 | |
| grid, jqPlot | |
| Grid | |
| gridLineColor, Grid | |
| gridLineWidth, Grid | |
| groups, $.jqplot. | |
| H | |
| hideZeros, $.jqplot. | |
| highlightAlpha, $.jqplot. | |
| highlightColor, $.jqplot. | |
| highlightColors | |
| highlightMouseDown | |
| highlightMouseOver | |
| hlc, $.jqplot. | |
| Hooks, $.jqplot | |
| HorizontalLine | |
| hubRadius, $.jqplot. |
true = fade in/out tooltip, flase = show/hide tooltip
true = fade in/out tooltip, flase = show/hide tooltip
this.fadeTooltip = true
True to fill the bars.
this.fill = true
true or false, wether to fil the slices.
this.fill = true
true or false, wether to fill the areas.
this.fill = true
True to fill area between bands [default: true].
true or false, wether to fil the slices.
this.fill = true
whether to fill the shape.
this.fill = false
whether to fill the shape.
this.fill = false
true or false, wether to fill under lines or in bars.
this.fill = false
Alpha transparency to apply to the fill under the line.
this.fillAlpha
If true will stroke the line (with color this.color) as well as fill under it.
this.fillAndStroke = false
Either ‘x’ or ‘y’.
this.fillAxis = 'y'
Fill between 2 line series in a plot.
this.fillBetween = { series1: null, series2: null, color: null, baseSeries: 0, fill: true }
css color spec for filled area.
CSS color spec to use for fill under line.
this.fillColor
true to render a “down” day (close price lower than open price) with a filled candlestick body.
this.fillDownBody = true
true to draw shape as a filled rectangle.
this.fillRect = false
css color spec for the fill style.
this.fillStyle = '#999999'
fill a filled series to this value on the fill axis.
this.fillToValue = 0
true will force bar and filled series to fill toward zero on the fill Axis.
this.fillToZero = false
true to render an “up” day (close price greater than open price) with a filled candlestick body.
this.fillUpBody = false
Tooltip follows the mouse, it is not at a fixed location.
this.followMouse = false
css spec for the font-family css attribute.
this.fontFamily
CSS spec for the font-family css attribute.
this.fontFamily = '"Trebuchet MS", Arial, Helvetica, sans-serif'
css spec for the font-family css attribute.
this.fontFamily = '"Trebuchet MS", Arial, Helvetica, sans-serif'
css font-family spec for the legend text.
this.fontFamily
css font-family spec for the text.
this.fontFamily
css spec for the font-size css attribute.
this.fontSize
CSS spec for font size.
this.fontSize = '11pt'
CSS spec for font size.
this.fontSize = '10pt'
css spec for the font-size attribute.
this.fontSize
css font-size spec for the legend text.
this.fontSize
css font-size spec for the text.
this.fontSize
Multiplier to condense or expand font width.
this.fontStretch = 1.0
Multiplier to condense or expand font width.
this.fontStretch = 1.0
this.fontWeight = 'normal'
CSS spec for fontWeight
this.fontWeight = 'normal'
This will ensure that there is always a tick mark at 0.
this.forceTickAt0 = false
This will ensure that there is always a tick mark at 100.
this.forceTickAt100 = false
string passed to the formatter.
this.formatString = ''
string passed to the formatter.
this.formatString = ''
alternative to tooltipFormatString will format the whole tooltip text, populating with x, y values as indicated by tooltipAxes option.
this.formatString = null
string passed to the formatter.
this.formatString = ''
A class of a formatter for the tick text.
this.formatter = $.jqplot.DefaultTickFormatter
A class of a formatter for the tick text.
this.formatter = $.jqplot.DefaultTickFormatter
A class of a formatter for the tick text.
this.formatter = $.jqplot.DefaultTickFormatter
Get and return the named theme or the active theme if no name given.
$.jqplot.ThemeEngine.prototype.get = function( name )
Return the list of theme names in this manager in alpha-numerical order.
$.jqplot.ThemeEngine.prototype.getThemeNames = function()
Return a list of themes in alpha-numerical order by name.
$.jqplot.ThemeEngine.prototype.getThemes = function()
GNU GENERAL PUBLIC LICENSE Version 2, June 1991
See Grid for grid specific options.
this.grid = new Grid()
Object representing the grid on which the plot is drawn.
color of the grid lines.
this.gridLineColor = '#cccccc'
width of the grid lines.
this.gridLineWidth = 1.0
group bars into this many groups
this.groups = 1
true to not show a label for a value which is 0.
this.hideZeros = false
Alpha transparency to apply when highlighting bubble.
this.highlightAlpha = null
color to use when highlighting an area on a filled plot.
this.highlightColor = null
an array of colors to use when highlighting a slice.
this.highlightColors = []
an array of colors to use when highlighting a bar.
this.highlightColors = []
An array of colors to use when highlighting a slice.
this.highlightColors = []
an array of colors to use when highlighting a slice.
this.highlightColors = []
array of colors to use when highlighting an area.
this.highlightColors = []
an array of colors to use when highlighting a slice.
this.highlightColors = []
True to highlight when a mouse button is pressed over a slice.
this.highlightMouseDown = false
True to highlight when a mouse button is pressed over a slice.
this.highlightMouseDown = false
True to highlight when a mouse button is pressed over a bubble.
this.highlightMouseDown = false
True to highlight when a mouse button is pressed over a slice.
this.highlightMouseDown = false
True to highlight when a mouse button is pressed over a area.
this.highlightMouseDown = false
True to highlight when a mouse button is pressed over an area on a filled plot.
this.highlightMouseDown = false
True to highlight when a mouse button is pressed over a slice.
this.highlightMouseDown = false
True to highlight slice when moused over.
this.highlightMouseOver = true
True to highlight slice when moused over.
this.highlightMouseOver = true
True to highlight bubbles when moused over.
this.highlightMouseOver = true
True to highlight slice when moused over.
this.highlightMouseOver = true
True to highlight area when moused over.
this.highlightMouseOver = true
True to highlight area on a filled plot when moused over.
this.highlightMouseOver = true
True to highlight slice when moused over.
this.highlightMouseOver = true
true if is a hi-low-close chart (no open price).
this.hlc = false
A straight horizontal line.
Radius of the hub at the bottom center of gauge which the needle attaches to.
this.hubRadius = null
Index
| I | |
| index, Series | |
| init, jqPlot | |
| innerDiameter, $.jqplot. | |
| insertBreaks, $.jqplot. | |
| intersectionThreshold, $.jqplot. | |
| interval, $.jqplot. | |
| intervalColors, $.jqplot. | |
| intervalInnerRadius, $.jqplot. | |
| intervalOuterRadius, $.jqplot. | |
| intervals, $.jqplot. | |
| Introduction | |
| isarc | |
| isMinorTick | |
| J | |
| jqPlot | |
| jqPlot Charts | |
| jqPlot CSS Customization | |
| jqPlot Options | |
| jqPlot Pugin Hooks, $.jqplot | |
| jqPlot Usage | |
| jqplot. | |
| jqplot. | |
| jqplot. | |
| L | |
| label | |
| labelHeightAdjust, $.jqplot. | |
| labelOptions, Axis | |
| labelPosition | |
| labelRenderer, Axis | |
| labels | |
| labelsFromSeries, $.jqplot. | |
| legend, jqPlot | |
| Legend | |
| Line | |
| lineCap | |
| lineJoin | |
| linePattern | |
| lineWidth | |
| lineWidthAdjust, $.jqplot. | |
| location | |
| looseZoom, $.jqplot. | |
| M | |
| makeGridData | |
| marginBottom, Legend | |
| marginLeft, Legend | |
| marginRight, Legend | |
| marginTop, Legend | |
| mark | |
| markerOptions, Series | |
| markerRenderer | |
| markSize | |
| max | |
| methods | |
| Methods, $.jqplot. | |
| min | |
| minorTicks | |
| MIT License | |
| moveBlock, $.jqplot. | |
| moveSeriesToBack, jqPlot | |
| moveSeriesToFront, jqPlot |
0 based index of this series in the plot series array.
this.index
sets the plot target, checks data and applies user options to plot.
this.init = function( target, data, options )
Inner diameter of the donut, auto calculated by default.
this.innerDiameter = null
true to turn spaces in data block label into html breaks br /.
this.insertBreaks = true
pixel distance from data point or marker to consider cursor lines intersecting with point.
this.intersectionThreshold = 2
User specified interval above and below line for bands [default: ‘3%’’].
interval: '3%' }
Array of colors to use for the intervals.
this.intervalColors = [ "#4bb2c5", "#EAA228", "#c5b47f", "#579575", "#839557", "#958c12", "#953579", "#4b5de4", "#d8b83f", "#ff5800", "#0085cc", "#c747a3", "#cddf54", "#FBD178", "#26B4E3", "#bd70c7"]
Radius of the inner circle of the interval ring.
this.intervalInnerRadius = null
Radius of the outer circle of the interval ring.
this.intervalOuterRadius = null
Array of ranges to be drawn around the gauge.
this.intervals = []
jqPlot requires jQuery (1.4+ required for certain features).
wether the shadow is an arc or not.
this.isarc = false
wether the shadow is an arc or not.
this.isarc = false
if this is a minor tick.
this.isMinorTick = false
if this is a minor tick.
this.isMinorTick = false
Plot object returned by call to $.jqplot.
Pure JavaScript plotting plugin for jQuery.
Much of the styling of jqPlot is done by css.
This document is out of date.
The text or html for the label.
this.label = ''
label for the axis.
this.label = ''
A gauge label like ‘kph’ or ‘Volts’
this.label = null
Label for the trend line to use in the legend.
this.label = ''
Label for the axis
this.label = null
Line label to use in the legend.
this.label = ''
Number of Pixels to offset the label up (-) or down (+) from its default position.
this.labelHeightAdjust = 0
Options passed to the label renderer.
this.labelOptions = {}
‘auto’, ‘start’, ‘middle’ or ‘end’.
this.labelPosition = 'auto'
Where to position the label, either ‘inside’ or ‘bottom’.
this.labelPosition = 'inside'
A class of a rendering engine for creating an axis label.
this.labelRenderer = $.jqplot.AxisLabelRenderer
array of arrays of labels, one array for each series.
this.labels = []
Array of labels to use.
this.labels = []
true to use labels within data point arrays.
this.labelsFromSeries = false
see $.jqplot.TableLegendRenderer
this.legend = new Legend()
Legend object.
A straight line.
Type of ending placed on the line [‘round’, ‘butt’, ‘square’]
how ends of the shadow line are rendered.
this.lineCap = 'round'
how ends of the shadow line are rendered.
this.lineCap = 'round'
Canvas lineCap style at ends of line.
this.lineCap = 'round'
How line segments of the shadow are joined.
this.lineJoin = 'miter'
How line segments of the shadow are joined.
this.lineJoin = 'miter'
Canvas lineJoin style between segments of series.
this.lineJoin = 'round'
line pattern ‘dashed’, ‘dotted’, ‘solid’, some combination of ‘-’ and ‘.’
this.linePattern = 'solid'
line pattern ‘dashed’, ‘dotted’, ‘solid’, some combination of ‘-’ and ‘.’
this.linePattern = 'solid'
Width of the line.
width of line if areas are stroked and not filled.
this.lineWidth = 2
size of the line for non-filled markers.
this.lineWidth = 2
Width of the hi-low line and open/close ticks.
this.lineWidth = 1.5
width of the shadow line stroke.
this.lineWidth = 1.5
Width of the trend line.
this.lineWidth = 1.5
width of the line in pixels.
this.lineWidth = 2.5
Pixels to add to the lineWidth of the highlight.
this.lineWidthAdjust = 2.5
compass location where to position the label around the point.
this.location = 'n'
Placement of the legend.
this.location = 'ne'
Will expand zoom range to provide more rounded tick values.
this.looseZoom = true
converts any arbitrary data values to grid coordinates and returns them.
$.jqplot.BezierCurveRenderer.prototype.makeGridData = function( data, plot )
converts any arbitrary data values to grid coordinates and returns them.
$.jqplot.MekkoRenderer.prototype.makeGridData = function( data, plot )
CSS margin for the legend DOM element.
this.marginBottom = null
CSS margin for the legend DOM element.
this.marginLeft = null
CSS margin for the legend DOM element.
this.marginRight = null
CSS margin for the legend DOM element.
this.marginTop = null
tick mark on the axis.
this.mark = 'outside'
tick mark on the axis.
this.mark = 'outside'
renderer specific options to pass to the markerRenderer, see $.jqplot.MarkerRenderer.
this.markerOptions = {}
Renderer used to draw the marker of the highlighted point.
this.markerRenderer = new $.jqplot.MarkerRenderer( {shadow:false} )
Renderer to use to draw markers on the line.
this.markerRenderer = {show:false}
A class of a renderer which will draw marker (e.g.
this.markerRenderer = $.jqplot.MarkerRenderer
Length of the tick marks in pixels.
this.markSize = 6
Length of the tick marks in pixels.
this.markSize = 4
Maximum value on the gauge.
this.max
maximum value of the axis (in data units, not pixels).
this.max = null
Minimum value on the gauge.
this.min
minimum value of the axis (in data units, not pixels).
this.min = null
Number of ticks to add between “major” ticks.
this.minorTicks = 0
Number of ticks to add between “major” ticks.
this.minorTicks = 'auto'
Copyright © 2009-2012 Chris Leonello
Moves an individual block.
this.moveBlock = function ( idx, x, y, duration )
This method requires jQuery 1.4+ Moves the specified series canvas behind all other series canvases.
this.moveSeriesToBack = function ( idx )
This method requires jQuery 1.4+ Moves the specified series canvas in front of all other series canvases.
this.moveSeriesToFront = function ( idx )
Index
Optional name for the overlay object.
Padding between needle and inner edge of the ring when the needle is at the min or max gauge value.
this.needlePad = 6
Maximum thickness the needle.
this.needleThickness = null
css color spec used for filled (area) plots that are filled to zero and the “useNegativeColors” option is true.
this.negativeColor
how close or far (in pixels) the cursor must be from a point marker to detect the point.
this.neighborThreshold = 4
Create a new theme based on the default theme, adding it the themeEngine.
$.jqplot.ThemeEngine.prototype.newTheme = function( name, obj )
Options to set up a mock plot with a data loading indicator if no data is specified.
Maximum number of columns in the legend.
this.numberColumns = null
Maximum number of columns in the legend.
this.numberColumns = null
Maximum number of columns in the legend.
this.numberColumns = null
Maximum number of columns in the legend.
this.numberColumns = null
Maximum number of columns in the legend.
this.numberColumns = null
Maximum number of rows in the legend.
this.numberRows = null
Maximum number of rows in the legend.
this.numberRows = null
Maximum number of rows in the legend.
this.numberRows = null
Maximum number of rows in the legend.
this.numberRows = null
Maximum number of rows in the legend.
this.numberRows = null
Desired number of ticks.
this.numberTicks
this.objects = []
Pixel offset at the given shadow angle of each shadow stroke from the last stroke.
this.offset = 1
False will center bars on their y value.
this.offsetBars = false
color of the open price tick mark.
this.openColor = null
This document will help you understand how jqPlot’s options relate to the API documentation and the jqPlot object itself.
See Options Tutorial
Padding to extend the range above and below the data bounds.
this.pad = 1.2
padding between the donut and plot edges, legend, etc.
this.padding = 20
padding between the funnel and plot edges, legend, etc.
this.padding = {top: 20, right: 20, bottom: 20, left: 20}
padding between the meterGauge and plot edges, auto calculated by default.
this.padding = null
padding between the pie and plot edges, legend, etc.
this.padding = 20
Padding to extend the range above data bounds.
this.padMax = null
Padding to extend the range below data bounds.
this.padMin = null
True will stop needle just below/above the min/max values if data is below/above min/max, as if the meter is “pegged”.
this.pegNeedle = true
“insideGrid” places legend inside the grid area of the plot.
this.placement = "insideGrid"
Position of axis.
this.position = null
called after plot draw.
called after each series is drawn.
called after series shadows are drawn.
called after initialization.
called after user options are parsed.
called after series related options are parsed.
called after series is initialized.
Wether to draw the legend before the series or not.
called before plot draw.
called before the legend is drawn.
called before each series is drawn.
called before series shadows are drawn.
String to prepend to the tick label.
this.prefix = ''
String to prepend to the tick label.
this.prefix = ''
called before initialization.
called before user options are parsed.
called before series related options are parsed.
called before series is initialized.
Properties
Axes options are specified within an axes object at the top level of the plot options like so:
These properties are specified at the top of the options object like so:
Properties will be assigned from a series array at the top level of the options.
Point to pixel scaling factor, used for computing height of bounding box around a label.
this.pt2px = null
Point to pixel scaling factor, used for computing height of bounding box around a label.
this.pt2px = null
Quick reinitialization plot for replotting.
this.quickInit = function ()
Empties the plot target div and redraws the plot.
this.redraw = function( clear )
reinitialize plot for replotting.
this.reInitialize = function ( data, opts )
Remove the given theme from the themeEngine.
$.jqplot.ThemeEngine.prototype.remove = function( name )
Rename a theme.
$.jqplot.ThemeEngine.prototype.rename = function ( oldName, newName )
Renderer to use to draw the trend line.
this.renderer = new $.jqplot.LineRenderer()
A class of a rendering engine that handles tick generation, scaling input data to pixel grid units and drawing the axis element.
this.renderer = $.jqplot.LinearAxisRenderer
Instance of a renderer which will actually render the grid, see $.jqplot.CanvasGridRenderer.
this.renderer = $.jqplot.CanvasGridRenderer
A class of a renderer which will draw the series, see $.jqplot.LineRenderer.
this.renderer = $.jqplot.LineRenderer
A class for creating a DOM element for the title, see $.jqplot.DivTitleRenderer.
this.renderer = $.jqplot.DivTitleRenderer
Options to pass to the line renderer.
this.rendererOptions = {marker:{show:false}}
renderer specific options.
this.rendererOptions = {}
Options to pass on to the renderer, see $.jqplot.CanvasGridRenderer.
this.rendererOptions = {}
renderer specific options passed to the renderer.
this.rendererOptions = {}
Options to pass on to the renderer.
this.rendererOptions = {}
renderer specific options passed to the renderer.
this.rendererOptions = {}
Does a reinitialization of the plot followed by a redraw.
this.replot = function( options )
Reset the specified axes min, max, numberTicks and tickInterval properties to null or reset these properties on all axes if no list of axes is provided.
this.resetAxesScale = function( axes, options )
This method requires jQuery 1.4+ Restore the series canvas order to its original order when the plot was created.
this.restoreOriginalSeriesOrder = function ()
This method requires jQuery 1.4+ Restore the series canvas order to its previous state.
this.restorePreviousSeriesOrder = function ()
color of the outer ring, hub, and needle of the gauge.
this.ringColor = "#BBC6D0"
pixel distance between rings, or multiple series in a donut plot.
this.ringMargin = null
width of the ring around the gauge.
this.ringWidth = null
css padding-top spec for the rows in the legend.
this.rowSpacing = '0.5em'
Index
| S | |
| scaleToHiddenSeries, Axis | |
| sectionMargin, $.jqplot. | |
| series, jqPlot | |
| Series | |
| seriesColors, jqPlot | |
| seriesDefaults, jqPlot | |
| seriesLabelIndex, $.jqplot. | |
| seriesToggle | |
| seriesToggleReplot | |
| setGridData | |
| shadow | |
| shadowAlpha | |
| shadowAngle | |
| shadowColor, Grid | |
| shadowDepth | |
| shadowOffset | |
| shadowRenderer, $.jqplot. | |
| shadowWidth, Grid | |
| shapeRenderer, $.jqplot. | |
| show | |
| showBorders, $.jqplot. | |
| showCursorLegend, $.jqplot. | |
| showDataLabels | |
| showGridline | |
| showHorizontalLine, $.jqplot. | |
| showLabel | |
| showLabels | |
| showLine, Series | |
| showLines, $.jqplot. | |
| showMark | |
| showMarker | |
| showMinorTicks, Axis | |
| showSwatch, Legend | |
| showTickLabels, $.jqplot. | |
| showTickMarks, Axis | |
| showTicks | |
| showTooltip | |
| showTooltipDataPosition, $.jqplot. | |
| showTooltipGridPosition, $.jqplot. | |
| showTooltipOutsideZoom, $.jqplot. | |
| showTooltipPrecision, $.jqplot. | |
| showTooltipUnitPosition, $.jqplot. | |
| showVerticalLine, $.jqplot. | |
| size | |
| sizeAdjust, $.jqplot. | |
| sliceMargin | |
| smooth, $.jqplot. | |
| sortData, jqPlot | |
| sortMergedLabels, $.jqplot. | |
| stackedValue, $.jqplot. | |
| stackSeries, jqPlot | |
| start, Line | |
| startAngle | |
| stop, Line | |
| strokeRect, $.jqplot. | |
| strokeStyle, $.jqplot. | |
| style | |
| suffix, $.jqplot. | |
| synchronizeHighlight | |
| syncTicks, Axis |
True to include hidden series when computing axes bounds and scaling.
this.scaleToHiddenSeries = false
spacing between funnel sections in pixels.
this.sectionMargin = 6
Array of series object options.
this.series = []
An individual data series object.
Ann array of CSS color specifications that will be applied, in order, to the series in the plot.
this.seriesColors = $.jqplot.config.defaultColors
default options that will be applied to all series.
seriesDefaults: {}, series:[] }
array index for location of labels within data point arrays.
this.seriesLabelIndex = null
false to not enable series on/off toggling on the legend.
this.seriesToggle = 'normal'
True to replot the chart after toggling series on/off.
this.seriesToggleReplot = false
converts the user data values to grid coordinates and stores them in the gridData array.
$.jqplot.BezierCurveRenderer.prototype.setGridData = function( plot )
converts the user data values to grid coordinates and stores them in the gridData array.
$.jqplot.MekkoRenderer.prototype.setGridData = function( plot )
wether or not to draw a shadow on the line
wether or not to draw a shadow on the line
this.shadow = true
true or false, wether or not to show the shadow.
this.shadow = true
wether to show a shadow behind the grid.
this.shadow = true
transparency of the shadow (0 = transparent, 1 = opaque)
this.shadowAlpha = 0.08
Alpha channel transparency of shadow.
transparency of the shadow (0 = transparent, 1 = opaque)
this.shadowAlpha = 0.07
transparency of the shadow (0 = transparent, 1 = opaque)
this.shadowAlpha = 0.07
Alpha channel transparency of shadow.
this.shadowAlpha = '0.07'
transparency of the shadow (0 = transparent, 1 = opaque)
this.shadowAlpha = 0.07
transparency of the shadow (0 = transparent, 1 = opaque)
this.shadowAlpha = 0.07
Alpha transparency of the shadow.
this.shadowAlpha = 0.07
Alpha channel transparency of shadow.
this.shadowAlpha = '0.07'
Alpha channel transparency of shadow.
this.shadowAlpha = '0.1'
Shadow angle in degrees
Shadow angle in degrees
this.shadowAngle = 45
Angle of the shadow on the trend line.
this.shadowAngle = 45
shadow angle in degrees
this.shadowAngle = 45
Shadow angle in degrees
this.shadowAngle = 45
an optional css color spec for the shadow in ‘rgba(n, n, n, n)’ form
this.shadowColor = null
number of strokes to apply to the shadow, each stroke offset shadowOffset from the last.
this.shadowDepth = 5
Number of times shadow is stroked, each stroke offset shadowOffset from the last.
number of strokes to apply to the shadow, each stroke offset shadowOffset from the last.
this.shadowDepth = 5
number of strokes to apply to the shadow, each stroke offset shadowOffset from the last.
this.shadowDepth = 5
Number of times shadow is stroked, each stroke offset shadowOffset from the last.
this.shadowDepth = 3
number of strokes to apply to the shadow, each stroke offset shadowOffset from the last.
this.shadowDepth = 4
number of strokes to apply to the shadow, each stroke offset shadowOffset from the last.
this.shadowDepth = 5
number of strokes to make of the shadow.
this.shadowDepth = 3
Number of times shadow is stroked, each stroke offset shadowOffset from the last.
this.shadowDepth = 3
Number of times shadow is stroked, each stroke offset shadowOffset from the last.
this.shadowDepth = 3
offset of the shadow from the slice and offset of each succesive stroke of the shadow from the last.
this.shadowOffset = 2
Shadow offset from line in pixels
offset of the shadow from the slice and offset of each succesive stroke of the shadow from the last.
this.shadowOffset = 2
offset of the shadow from the area and offset of each succesive stroke of the shadow from the last.
this.shadowOffset = 2
Shadow offset from line in pixels
this.shadowOffset = 1
offset of the shadow from the gauge ring and offset of each succesive stroke of the shadow from the last.
this.shadowOffset = 2
offset of the shadow from the slice and offset of each succesive stroke of the shadow from the last.
this.shadowOffset = 2
pixel offset for each stroke of the shadow.
this.shadowOffset = 1.0
Offset of each shadow stroke from the border in pixels
this.shadowOffset = 1.5
Shadow offset from line in pixels
this.shadowOffset = 1.25
Renderer that will draws the shadows on the marker.
this.shadowRenderer = new $.jqplot.ShadowRenderer()
width of the stoke for the shadow
this.shadowWidth = 3
Renderer that will draw the marker.
this.shapeRenderer = new $.jqplot.ShapeRenderer()
wether or not to show the tick (mark and label).
this.show = true
wether or not to show the tick (mark and label).
this.show = true
wether or not to show the tick (mark and label).
this.show = true
wether or not to show the tick (mark and label).
this.show = true
true to show (draw), false to not draw.
wether to show the cursor or not.
this.show = $.jqplot.config.enablePlugins
true to show the highlight.
this.show = $.jqplot.config.enablePlugins
true to show the bands.
wether or not to show the marker.
this.show = true
show the labels or not.
this.show = $.jqplot.config.enablePlugins
Wether or not to show the trend line.
this.show = $.jqplot.config.enablePlugins
Wether to display the axis on the graph.
this.show = false
Wether to display the legend on the graph.
this.show = false
wether or not to draw the series.
this.show = true
wether or not to show the title
this.show = true
True to draw borders lines between areas on the chart.
this.showBorders = true
Replace the plot legend with an enhanced legend displaying intersection information.
this.showCursorLegend = false
true to show data labels on slices.
this.showDataLabels = false
true to show data labels on slices.
this.showDataLabels = false
true to show data labels on slices.
this.showDataLabels = false
wether or not to draw the gridline on the grid at this tick.
this.showGridline = true
wether or not to draw the gridline on the grid at this tick.
this.showGridline = true
draw a horizontal line across the plot which follows the cursor.
this.showHorizontalLine = false
wether or not to show the label.
this.showLabel = true
wether or not to show the label.
this.showLabel = true
wether or not to show the label.
this.showLabel = true
true to show the axis label.
this.showLabel = true
true to show label for this series in the legend.
this.showLabel = true
True to show labels on bubbles (if any), false to not show.
this.showLabels = true
true to show the label text on the legend.
this.showLabels = true
wether to actually draw the line or not.
this.showLine = true
True to show lines at top and bottom of bands [default: false].
wether or not to show the mark on the axis.
this.showMark = true
wether or not to show the mark on the axis.
this.showMark = true
true to show the marker
this.showMarker = true
wether or not to show the markers at the data points.
this.showMarker = true
Wether or not to show minor ticks.
this.showMinorTicks = true
true to show the color swatches on the legend.
this.showSwatches = true
true to show tick labels next to ticks.
this.showTickLabels = true
Wether to show the tick marks (line crossing grid) or not.
this.showTickMarks = true
true to show ticks around gauge.
this.showTicks = true
Wether to show the ticks (both marks and labels) or not.
this.showTicks = true
Show a tooltip with data point values.
show a cursor position tooltip.
this.showTooltip = true
Show a tooltip with data point values.
this.showTooltip = true
Used with showVerticalLine to show intersecting data points in the tooltip.
this.showTooltipDataPosition = false
show the grid pixel coordinates of the mouse.
this.showTooltipGridPosition = false
True will keep updating the tooltip when zooming of the grid.
this.showTooltipOutsideZoom = false
Controls how close to line cursor must be to show tooltip.
show the unit (data) coordinates of the mouse.
this.showTooltipUnitPosition = true
draw a vertical line across the plot which follows the cursor.
this.showVerticalLine = false
Length of the tick beyond the grid in pixels.
this.size = 4
Size of the marker (diameter or circle, length of edge of square, etc.)
this.size = 9.0
Pixels to add to the overall size of the highlight.
this.sizeAdjust = 5
angular spacing between donut slices in degrees.
this.sliceMargin = 0
angular spacing between pie slices in degrees.
this.sliceMargin = 0
True to draw a smoothed (interpolated) line through the data points with automatically computed number of smoothing points.
this.renderer.smooth = false
false to not sort the data passed in by the user.
this.sortData = true
True to sort tick labels when labels are created by merging x axis values from multiple series.
this.sortMergedLabels = false
true to display value as stacked in a stacked plot.
this.stackedValue = false
true or false, creates a stack or “mountain” plot.
this.stackSeries = false
[x, y] coordinates for the start of the line.
Angle to start drawing donut in degrees.
this.startAngle = 0
Angle to start drawing pie in degrees.
this.startAngle = 0
[x, y] coordinates for the end of the line.
stop: [] }
true to draw shape as a stroked rectangle.
this.strokeRect = false
css color spec for the stoke style
this.strokeStyle = '#999999'
CSS spec for cursor style
this.style = 'crosshair'
One of diamond, circle, square, x, plus, dash, filledDiamond, filledCircle, filledSquare
this.style = 'filledCircle'
String to append to the tick label.
this.suffix = ''
Index of another series to highlight when this series is highlighted.
this.synchronizeHighlight = false
true to try and synchronize tick spacing across multiple axes so that ticks and grid lines line up.
this.syncTicks = null
Index
| T | |
| text, Title | |
| textAlign, Title | |
| textColor | |
| themes, $.jqplot. | |
| thickness, $.jqplot. | |
| tickColor, $.jqplot. | |
| tickInset | |
| tickInterval, Axis | |
| tickLength, $.jqplot. | |
| tickMode, $.jqplot. | |
| tickOptions, Axis | |
| tickPadding, $.jqplot. | |
| tickRenderer | |
| ticks | |
| tickSpacing | |
| title, jqPlot | |
| Title | |
| tooltipAxes, $.jqplot. | |
| tooltipAxisGroups, $.jqplot. | |
| tooltipFadeSpeed | |
| tooltipFormatString | |
| tooltipLocation | |
| tooltipOffset | |
| transposedData, $.jqplot. | |
| type, $.jqplot. | |
| U | |
| upBodyColor, $.jqplot. | |
| Usage | |
| useAxesFormatters | |
| useNegativeColors, Series | |
| useSeriesColor, Axis | |
| V | |
| varyBarColor, $.jqplot. | |
| varyBlockColors, $.jqplot. | |
| varyBubbleColors, $.jqplot. | |
| Version | |
| VerticalLine | |
| W | |
| waterfall, $.jqplot. | |
| wickColor, $.jqplot. | |
| widthRatio, $.jqplot. | |
| X | |
| xaxis | |
| xmax, HorizontalLine | |
| xmin, HorizontalLine | |
| xoffset, Legend | |
| xpadding, $.jqplot. | |
| Y | |
| y, HorizontalLine | |
| yaxis | |
| yoffset, Legend | |
| ypadding, $.jqplot. | |
| yvalues, $.jqplot. | |
| Z | |
| zoom, $.jqplot. | |
| zoomProxy, $.jqplot. |
text of the title;
this.text = text
css text-align spec for the text.
this.textAlign
css spec for the color attribute.
this.textColor
css spec for the color attribute.
this.textColor = '#666666'
css spec for the color attribute.
this.textColor = '#666666'
css color spec for the legend text.
this.textColor
css color spec for the text.
this.textColor
hash of themes managed by the theme engine.
this.themes = {}
thickness of the donut, auto computed by default Overridden by if innerDiameter is specified.
this.thickness = null
color of the tick marks around the gauge.
this.tickColor = "989898"
Controls the amount to inset the first and last ticks from the edges of the grid, in multiples of the tick interval.
this.tickInset = 0
Controls the amount to inset the first and last ticks from the edges of the grid, in multiples of the tick interval.
this.tickInset = 0
number of units between ticks.
this.tickInterval
length of the line in pixels indicating open and close price.
this.tickLength = 'auto'
How to space the ticks on the axis.
this.tickMode
Options that will be passed to the tickRenderer, see $.jqplot.AxisTickRenderer options.
this.tickOptions = {}
padding of the tick marks to the outer ring and the tick labels to marks.
this.tickPadding = null
A class of a rendering engine for creating the ticks labels displayed on the plot, See $.jqplot.AxisTickRenderer.
A class of a rendering engine for creating the ticks labels displayed on the plot, See $.jqplot.AxisTickRenderer.
A class of a rendering engine for creating the ticks labels displayed on the plot, See $.jqplot.AxisTickRenderer.
this.tickRenderer = $.jqplot.AxisTickRenderer
Array of tick values.
this.ticks = []
1D [val, val, ...] or 2D [[val, label], [val, label], ...] array of ticks for the axis.
this.ticks = []
Degrees between ticks.
this.tickSpacing = 30
Approximate pixel spacing between ticks on graph.
this.tickSpacing = 75
Title object.
this.title = new Title()
Plot Title object.
Which axes to display in tooltip, ‘x’, ‘y’ or ‘both’, ‘xy’ or ‘yx’ ‘both’ and ‘xy’ are equivalent, ‘yx’ reverses order of labels.
this.tooltipAxes = 'both'
Show position for the specified axes.
this.tooltipAxisGroups = []
‘slow’, ‘def’, ‘fast’, or number of milliseconds.
‘slow’, ‘def’, ‘fast’, or number of milliseconds.
this.tooltipFadeSpeed = "fast"
Format string passed the x and y values of the cursor on the line.
tooltipFormatString: '%d, %d' }
sprintf format string for the tooltip.
this.tooltipFormatString = '%.4P, %.4P'
sprintf format string for the tooltip.
this.tooltipFormatString = '%.5P'
Where to position tooltip, ‘n’, ‘ne’, ‘e’, ‘se’, ‘s’, ‘sw’, ‘w’, ‘nw’
Where to position tooltip.
this.tooltipLocation = 'se'
Where to position tooltip, ‘n’, ‘ne’, ‘e’, ‘se’, ‘s’, ‘sw’, ‘w’, ‘nw’
this.tooltipLocation = 'nw'
Pixel offset of tooltip from the highlight.
Pixel offset of tooltip from the grid boudaries or cursor center.
this.tooltipOffset = 6
Pixel offset of tooltip from the highlight.
this.tooltipOffset = 2
NOT IMPLEMENTED YET.
this.transposedData = true
Either ‘exponential’, ‘exp’, or ‘linear’.
this.type = 'linear'
Color of candlestick body of an “up” day.
this.upBodyColor = null
See jqPlot Usage
Use the x and y axes formatters to format the text in the tooltip.
this.useAxesFormatters = true
Use the x and y axes formatters to format the text in the tooltip.
this.useAxesFormatters = true
true to color negative values differently in filled and bar charts.
this.useNegativeColors = true
Use the color of the first series associated with this axis for the tick marks and line bordering this axis.
this.useSeriesColor = false
true to color each bar of a series separately rather than have every bar of a given series the same color.
this.varyBarColor = false
true to vary the color of each block in this series according to the seriesColors array.
this.varyBlockColors = false
True to vary the color of each bubble in this series according to the seriesColors array.
this.varyBubbleColors = true
version: 1.0.4 revision: 1121
A straight vertical line.
true to enable waterfall plot.
this.waterfall = false
color of the hi-lo line thorugh the candlestick body.
this.wickColor = null
The ratio of the width of the top of the funnel to the bottom.
this.widthRatio = 0.2
X axis to use for positioning/scaling the line.
which x axis to use with this series, either ‘xaxis’ or ‘x2axis’.
this.xaxis = 'xaxis'
x value for the end of the line, null to scale to axis max.
x value for the start of the line, null to scale to axis min.
DEPRECATED.
this.xoffset = 0
horizontal padding in pixels between point and label
this.xpadding = 6
y value to position the line
Y axis to use for positioning/scaling the line.
which y axis to use with this series, either ‘yaxis’ or ‘y2axis’.
this.yaxis = 'yaxis'
DEPRECATED.
this.yoffset = 0
vertical padding in pixels between point and label
this.ypadding = 6
Number of y values to expect in the data point array.
this.yvalues = 1
Enable plot zooming.
this.zoom = false
links targetPlot to controllerPlot so that plot zooming of targetPlot will be controlled by zooming on the controllerPlot.
$.jqplot.Cursor.zoomProxy = function( targetPlot, controllerPlot )
Hook Index
| A | |
| addLegendRowHooks, $.jqplot.$.jqplot | |
| E | |
| eventListenerHooks, $.jqplot.$.jqplot | |
| J | |
| jqPlot Pugin Hooks, $.jqplot | |
| P | |
| postDrawHooks, $.jqplot.$.jqplot | |
| postDrawSeriesHooks, $.jqplot.$.jqplot | |
| postDrawSeriesShadowHooks, $.jqplot.$.jqplot | |
| postInitHooks, $.jqplot.$.jqplot | |
| postParseOptionsHooks, $.jqplot.$.jqplot | |
| postParseSeriesOptionsHooks, $.jqplot.$.jqplot | |
| postSeriesInitHooks, $.jqplot.$.jqplot | |
| preDrawHooks, $.jqplot.$.jqplot | |
| preDrawLegendHooks, $.jqplot.$.jqplot | |
| preDrawSeriesHooks, $.jqplot.$.jqplot | |
| preDrawSeriesShadowHooks, $.jqplot.$.jqplot | |
| preInitHooks, $.jqplot.$.jqplot | |
| preParseOptionsHooks, $.jqplot.$.jqplot | |
| preParseSeriesOptionsHooks, $.jqplot.$.jqplot | |
| preSeriesInitHooks, $.jqplot.$.jqplot |
called at the end of legend draw, so plugins can add rows to the legend table.
called at the end of plot drawing, binds listeners to the event canvas which lays on top of the grid area.
called after plot draw.
called after each series is drawn.
called after series shadows are drawn.
called after initialization.
called after user options are parsed.
called after series related options are parsed.
called after series is initialized.
called before plot draw.
called before the legend is drawn.
called before each series is drawn.
called before series shadows are drawn.
called before initialization.
called before user options are parsed.
called before series related options are parsed.
called before series is initialized.
Property Index
| A | |
| activeTheme, $.jqplot. | |
| alignTicks, $.jqplot. | |
| alpha, $.jqplot. | |
| angle | |
| animate, jqPlot | |
| animateReplot, jqPlot | |
| autoscale, Axis | |
| autoscaleBubbles, $.jqplot. | |
| autoscaleMultiplier, $.jqplot. | |
| autoscalePointsFactor, $.jqplot. | |
| axes, jqPlot | |
| axesDefaults, jqPlot | |
| axisDefaults, $.jqplot. | |
| B | |
| background | |
| bandData, $.jqplot. | |
| barDirection, $.jqplot. | |
| barLabelOptions, $.jqplot. | |
| barLabelRenderer, $.jqplot. | |
| barLabels, $.jqplot. | |
| barMargin, $.jqplot. | |
| barPadding | |
| barWidth, $.jqplot. | |
| baselineColor | |
| baselineWidth | |
| bodyWidth, $.jqplot. | |
| border, Legend | |
| borderColor | |
| borderWidth | |
| breakOnNull, Series | |
| breakPoints, $.jqplot. | |
| breakTickLabel, $.jqplot. | |
| bringSeriesToFront, $.jqplot. | |
| bubbleAlpha, $.jqplot. | |
| bubbleGradients, $.jqplot. | |
| C | |
| candleStick, $.jqplot. | |
| clearRect, $.jqplot. | |
| clickReset, $.jqplot. | |
| closeColor, $.jqplot. | |
| color | |
| constrainOutsideZoom, $.jqplot. | |
| constrainSmoothing, $.jqplot. | |
| constrainTo, $.jqplot. | |
| constrainZoomTo, $.jqplot. | |
| css, $.jqplot. | |
| cursorLegendFormatString, $.jqplot. |
Pointer to currently active theme
this.activeTheme=null
true to align tick marks across opposed axes such as from the y2axis to yaxis.
this.alignTicks = false
alpha transparency of shadow stroke.
this.alpha = 0.07
angle of text, measured clockwise from x axis.
this.angle = 0
angle of text, measured clockwise from x axis.
this.angle = 0
Angle of the shadow in degrees.
this.angle = 45
True to animate the series on initial plot draw (renderer dependent).
this.animate = false
True to animate series after a call to the replot() method.
this.animateReplot = false
DEPRECATED the default scaling algorithm produces superior results.
this.autoscale = false
True to scale the bubble radius based on plot size.
this.autoscaleBubbles = true
Multiplier the bubble size if autoscaleBubbles is true.
this.autoscaleMultiplier = 1.0
Factor which decreases bubble size based on how many bubbles on on the chart.
this.autoscalePointsFactor = -0.07
up to 4 axes are supported, each with it’s own options, See Axis for axis specific options.
this.axes = {xaxis: new Axis('xaxis'), yaxis: new Axis('yaxis'), x2axis: new Axis('x2axis'), y2axis: new Axis('y2axis'), y3axis: new Axis('y3axis'), y4axis: new Axis('y4axis'), y5axis: new Axis('y5axis'), y6axis: new Axis('y6axis'), y7axis: new Axis('y7axis'), y8axis: new Axis('y8axis'), y9axis: new Axis('y9axis'), yMidAxis: new Axis('yMidAxis')}
default options that will be applied to all axes.
Default properties which will be applied directly to the series.
background color of the inside of the gauge.
this.background = "#efefef"
css spec for the background color.
this.background = '#fffdf6'
css spec for the background of the legend box.
this.background
Data used to draw error bands or confidence intervals above/below a line.
this.renderer.bandData = []
‘vertical’ = up and down bars, ‘horizontal’ = side to side bars
this.barDirection = 'vertical'
options object to pass to the bar label renderer.
this.barLabelOptions = {}
renderer to use to draw labels under each bar.
this.barLabelRenderer = $.jqplot.AxisLabelRenderer
array of labels to put under each bar.
this.barLabels = this.barLabels || []
Number of pixels between groups of bars at adjacent axis values.
this.barMargin = 10
this.barPadding = 10
Number of pixels between adjacent bars at the same axis value.
this.barPadding = 8
Width of the bar in pixels (auto by devaul).
this.barWidth = null
CSS color spec for the baseline.
this.baselineColor = null
CSS color spec for the baseline.
this.baselineColor = null
CSS color spec for the baseline.
this.baselineColor = null
width of the baseline in pixels.
this.baselineWidth = null
width of the baseline in pixels.
this.baselineWidth = null
width of the baseline in pixels.
this.baselineWidth = null
width of the candlestick body in pixels.
this.bodyWidth = 'auto'
css spec for the border around the legend box.
this.border
color of the borders between areas on the chart
this.borderColor = null
color of the border adjacent to the axis.
this.borderColor = null
css spec for the color of the grid border.
this.borderColor = '#999999'
width of line stroked at the border of the axis.
this.borderWidth = null
width of the border in pixels.
this.borderWidth = 2.0
Wether line segments should be be broken at null value.
this.breakOnNull = false
EXPERIMENTAL!!
this.breakPoints = null
Label to use at the axis break if breakPoints are specified.
this.breakTickLabel = "&asymp
This option requires jQuery 1.4+ True to bring the series of the highlighted point to the front of other series.
this.bringSeriesToFront = false
Alpha transparency to apply to all bubbles in this series.
this.bubbleAlpha = 1.0
True to color the bubbles with gradient fills instead of flat colors.
this.bubbleGradients = false
true to render chart as candleStick.
this.candleStick = false
true to cear a rectangle.
this.clearRect = false
Will reset plot zoom if single click on plot without drag.
this.clickReset = false
color of the close price tick mark.
this.closeColor = null
color of the line
CSS color spec for the dragged point (and adjacent line segment or bar).
this.color
color of lines at top and bottom of bands [default: series color].
color of marker.
this.color = '#666666'
CSS color spec for the trend line.
this.color = '#666666'
css color spec for the series
this.color
True to limit actual zoom area to edges of grid, even when zooming outside of plot area.
this.constrainOutsideZoom = true
True to use a more accurate smoothing algorithm that will not overshoot any data points.
this.renderer.constrainSmoothing = true
Constrain dragging motion to an axis or to none.
this.constrainTo = 'none'
‘none’, ‘x’ or ‘y’
this.constrainZoomTo = 'none'
default css styles that will be applied to all data blocks.
this.css = {padding:'2px', border:'1px solid #999', textAlign:'center'}
Format string used in the cursor legend.
this.cursorLegendFormatString = $.jqplot.Cursor.cursorLegendFormatString
Property Index
| D | |
| dashPattern | |
| data, jqPlot | |
| dataLabelCenterOn, $.jqplot. | |
| dataLabelFormatString | |
| dataLabelNudge | |
| dataLabelPositionFactor | |
| dataLabels | |
| dataLabelThreshold | |
| dataRenderer, jqPlot | |
| dataRendererOptions, jqPlot | |
| dblClickReset, $.jqplot. | |
| defaultAxisStart, jqPlot | |
| depth, $.jqplot. | |
| diameter | |
| disableIEFading | |
| disableStack, Series | |
| downBodyColor, $.jqplot. | |
| drawBaseline | |
| drawBorder, Grid | |
| drawGridlines, Grid | |
| drawMajorGridlines, Axis | |
| drawMajorTickMarks, Axis | |
| drawMinorGridlines, Axis | |
| drawMinorTickMarks, Axis | |
| E | |
| edgeTolerance, $.jqplot. | |
| enableFontSupport | |
| escapeHtml | |
| escapeHTML | |
| F | |
| fadeTooltip | |
| fill | |
| fillAlpha, Series | |
| fillAndStroke, Series | |
| fillAxis, Series | |
| fillBetween, jqPlot | |
| fillColor | |
| fillDownBody, $.jqplot. | |
| fillRect, $.jqplot. | |
| fillStyle, $.jqplot. | |
| fillToValue, Series | |
| fillToZero, Series | |
| fillUpBody, $.jqplot. | |
| followMouse, $.jqplot. | |
| fontFamily | |
| fontSize | |
| fontStretch | |
| fontWeight | |
| forceTickAt0, $.jqplot. | |
| forceTickAt100, $.jqplot. | |
| formatString | |
| formatter |
Array of line, space settings in pixels.
dashPattern: [8,8] }
Array of line, space settings in pixels.
dashPattern: [8,8] }
user’s data.
this.data = []
True to center the data label at its position.
this.dataLabelCenterOn = true
Format string for data labels.
this.dataLabelFormatString = null
Format string for data labels.
this.dataLabelFormatString = null
Format string for data labels.
this.dataLabelFormatString = null
Number of pixels to slide the label away from (+) or toward (-) the center of the pie.
this.dataLabelNudge = 0
Number of pixels to slide the label away from (+) or toward (-) the center of the pie.
this.dataLabelNudge = 2
A Multiplier (0-1) of the pie radius which controls position of label on slice.
this.dataLabelPositionFactor = 0.4
A Multiplier (0-1) of the pie radius which controls position of label on slice.
this.dataLabelPositionFactor = 0.52
Either ‘label’, ‘value’, ‘percent’ or an array of labels to place on the pie slices.
this.dataLabels = 'percent'
Either ‘label’, ‘value’, ‘percent’ or an array of labels to place on the pie slices.
this.dataLabels = 'percent'
Either ‘label’, ‘value’, ‘percent’ or an array of labels to place on the pie slices.
this.dataLabels = 'percent'
this.dataLabelThreshold = 3
this.dataLabelThreshold = 3
Threshhold in percentage (0-100) of pie area, below which no label will be displayed.
this.dataLabelThreshold = 3
A callable which can be used to preprocess data passed into the plot.
this.dataRenderer
Options that will be passed to the dataRenderer.
this.dataRendererOptions
Will reset plot zoom if double click on plot without drag.
this.dblClickReset = true
1-D data series are internally converted into 2-D [x,y] data point arrays by jqPlot.
this.defaultAxisStart = 1
how many times the shadow is stroked.
this.depth = 3
Outer diameter of the donut, auto computed by default
this.diameter = null
Outer diameter of the meterGauge, auto computed by default
this.diameter = null
Outer diameter of the pie, auto computed by default
this.diameter = null
true to toggle series with a show/hide method only and not allow fading in/out.
this.disableIEFading = true
true to not stack this series with other series in the plot.
this.disableStack = false
Color of candlestick body on a “down” day.
this.downBodyColor = null
True to draw the axis baseline.
this.drawBaseline = true
True to draw the axis baseline.
this.drawBaseline = true
True to draw the axis baseline.
this.drawBaseline = true
True to draw the axis baseline.
this.drawBaseline = true
True to draw border around grid.
this.drawBorder = true
wether to draw the gridlines on the plot.
this.drawGridlines = true
True to draw gridlines for major axis ticks.
this.drawMajorGridlines = true
True to draw tick marks for major axis ticks.
this.drawMajorTickMarks = true
True to draw gridlines for minor ticks.
this.drawMinorGridlines = false
True to draw tick marks for minor ticks.
this.drawMinorTickMarks = true
Number of pixels that the label must be away from an axis boundary in order to be drawn.
this.edgeTolerance = -5
true to turn on native canvas font support in Mozilla 3.5+ and Safari 4+.
this.enableFontSupport = true
true to turn on native canvas font support in Mozilla 3.5+ and Safari 4+.
this.enableFontSupport = true
true to escape html in the box label.
this.escapeHtml = false
True to escape html in bubble label text.
this.escapeHtml = true
True to escape special characters with their html entity equivalents in legend text.
this.escapeHtml = false
True to escape special characters with their html entity equivalents in title text.
this.escapeHtml = false
true to escape HTML entities in the label.
this.escapeHTML = false
true to escape HTML entities in the label.
this.escapeHTML = false
true to escape html entities in the labels.
this.escapeHTML = true
true = fade in/out tooltip, flase = show/hide tooltip
true = fade in/out tooltip, flase = show/hide tooltip
this.fadeTooltip = true
True to fill the bars.
this.fill = true
true or false, wether to fil the slices.
this.fill = true
true or false, wether to fill the areas.
this.fill = true
True to fill area between bands [default: true].
true or false, wether to fil the slices.
this.fill = true
whether to fill the shape.
this.fill = false
whether to fill the shape.
this.fill = false
true or false, wether to fill under lines or in bars.
this.fill = false
Alpha transparency to apply to the fill under the line.
this.fillAlpha
If true will stroke the line (with color this.color) as well as fill under it.
this.fillAndStroke = false
Either ‘x’ or ‘y’.
this.fillAxis = 'y'
Fill between 2 line series in a plot.
this.fillBetween = { series1: null, series2: null, color: null, baseSeries: 0, fill: true }
css color spec for filled area.
CSS color spec to use for fill under line.
this.fillColor
true to render a “down” day (close price lower than open price) with a filled candlestick body.
this.fillDownBody = true
true to draw shape as a filled rectangle.
this.fillRect = false
css color spec for the fill style.
this.fillStyle = '#999999'
fill a filled series to this value on the fill axis.
this.fillToValue = 0
true will force bar and filled series to fill toward zero on the fill Axis.
this.fillToZero = false
true to render an “up” day (close price greater than open price) with a filled candlestick body.
this.fillUpBody = false
Tooltip follows the mouse, it is not at a fixed location.
this.followMouse = false
css spec for the font-family css attribute.
this.fontFamily
CSS spec for the font-family css attribute.
this.fontFamily = '"Trebuchet MS", Arial, Helvetica, sans-serif'
css spec for the font-family css attribute.
this.fontFamily = '"Trebuchet MS", Arial, Helvetica, sans-serif'
css font-family spec for the legend text.
this.fontFamily
css font-family spec for the text.
this.fontFamily
css spec for the font-size css attribute.
this.fontSize
CSS spec for font size.
this.fontSize = '11pt'
CSS spec for font size.
this.fontSize = '10pt'
css spec for the font-size attribute.
this.fontSize
css font-size spec for the legend text.
this.fontSize
css font-size spec for the text.
this.fontSize
Multiplier to condense or expand font width.
this.fontStretch = 1.0
Multiplier to condense or expand font width.
this.fontStretch = 1.0
this.fontWeight = 'normal'
CSS spec for fontWeight
this.fontWeight = 'normal'
This will ensure that there is always a tick mark at 0.
this.forceTickAt0 = false
This will ensure that there is always a tick mark at 100.
this.forceTickAt100 = false
string passed to the formatter.
this.formatString = ''
string passed to the formatter.
this.formatString = ''
alternative to tooltipFormatString will format the whole tooltip text, populating with x, y values as indicated by tooltipAxes option.
this.formatString = null
string passed to the formatter.
this.formatString = ''
A class of a formatter for the tick text.
this.formatter = $.jqplot.DefaultTickFormatter
A class of a formatter for the tick text.
this.formatter = $.jqplot.DefaultTickFormatter
A class of a formatter for the tick text.
this.formatter = $.jqplot.DefaultTickFormatter
Property Index
| G | |
| grid, jqPlot | |
| gridLineColor, Grid | |
| gridLineWidth, Grid | |
| groups, $.jqplot. | |
| H | |
| hideZeros, $.jqplot. | |
| highlightAlpha, $.jqplot. | |
| highlightColor, $.jqplot. | |
| highlightColors | |
| highlightMouseDown | |
| highlightMouseOver | |
| hlc, $.jqplot. | |
| hubRadius, $.jqplot. | |
| I | |
| index, Series | |
| innerDiameter, $.jqplot. | |
| insertBreaks, $.jqplot. | |
| intersectionThreshold, $.jqplot. | |
| interval, $.jqplot. | |
| intervalColors, $.jqplot. | |
| intervalInnerRadius, $.jqplot. | |
| intervalOuterRadius, $.jqplot. | |
| intervals, $.jqplot. | |
| isarc | |
| isMinorTick | |
| L | |
| label | |
| labelHeightAdjust, $.jqplot. | |
| labelOptions, Axis | |
| labelPosition | |
| labelRenderer, Axis | |
| labels | |
| labelsFromSeries, $.jqplot. | |
| legend, jqPlot | |
| lineCap | |
| lineJoin | |
| linePattern | |
| lineWidth | |
| lineWidthAdjust, $.jqplot. | |
| location | |
| looseZoom, $.jqplot. |
See Grid for grid specific options.
this.grid = new Grid()
color of the grid lines.
this.gridLineColor = '#cccccc'
width of the grid lines.
this.gridLineWidth = 1.0
group bars into this many groups
this.groups = 1
true to not show a label for a value which is 0.
this.hideZeros = false
Alpha transparency to apply when highlighting bubble.
this.highlightAlpha = null
color to use when highlighting an area on a filled plot.
this.highlightColor = null
an array of colors to use when highlighting a slice.
this.highlightColors = []
an array of colors to use when highlighting a bar.
this.highlightColors = []
An array of colors to use when highlighting a slice.
this.highlightColors = []
an array of colors to use when highlighting a slice.
this.highlightColors = []
array of colors to use when highlighting an area.
this.highlightColors = []
an array of colors to use when highlighting a slice.
this.highlightColors = []
True to highlight when a mouse button is pressed over a slice.
this.highlightMouseDown = false
True to highlight when a mouse button is pressed over a slice.
this.highlightMouseDown = false
True to highlight when a mouse button is pressed over a bubble.
this.highlightMouseDown = false
True to highlight when a mouse button is pressed over a slice.
this.highlightMouseDown = false
True to highlight when a mouse button is pressed over a area.
this.highlightMouseDown = false
True to highlight when a mouse button is pressed over an area on a filled plot.
this.highlightMouseDown = false
True to highlight when a mouse button is pressed over a slice.
this.highlightMouseDown = false
True to highlight slice when moused over.
this.highlightMouseOver = true
True to highlight slice when moused over.
this.highlightMouseOver = true
True to highlight bubbles when moused over.
this.highlightMouseOver = true
True to highlight slice when moused over.
this.highlightMouseOver = true
True to highlight area when moused over.
this.highlightMouseOver = true
True to highlight area on a filled plot when moused over.
this.highlightMouseOver = true
True to highlight slice when moused over.
this.highlightMouseOver = true
true if is a hi-low-close chart (no open price).
this.hlc = false
Radius of the hub at the bottom center of gauge which the needle attaches to.
this.hubRadius = null
0 based index of this series in the plot series array.
this.index
Inner diameter of the donut, auto calculated by default.
this.innerDiameter = null
true to turn spaces in data block label into html breaks br /.
this.insertBreaks = true
pixel distance from data point or marker to consider cursor lines intersecting with point.
this.intersectionThreshold = 2
User specified interval above and below line for bands [default: ‘3%’’].
interval: '3%' }
Array of colors to use for the intervals.
this.intervalColors = [ "#4bb2c5", "#EAA228", "#c5b47f", "#579575", "#839557", "#958c12", "#953579", "#4b5de4", "#d8b83f", "#ff5800", "#0085cc", "#c747a3", "#cddf54", "#FBD178", "#26B4E3", "#bd70c7"]
Radius of the inner circle of the interval ring.
this.intervalInnerRadius = null
Radius of the outer circle of the interval ring.
this.intervalOuterRadius = null
Array of ranges to be drawn around the gauge.
this.intervals = []
wether the shadow is an arc or not.
this.isarc = false
wether the shadow is an arc or not.
this.isarc = false
if this is a minor tick.
this.isMinorTick = false
if this is a minor tick.
this.isMinorTick = false
The text or html for the label.
this.label = ''
label for the axis.
this.label = ''
A gauge label like ‘kph’ or ‘Volts’
this.label = null
Label for the trend line to use in the legend.
this.label = ''
Label for the axis
this.label = null
Line label to use in the legend.
this.label = ''
Number of Pixels to offset the label up (-) or down (+) from its default position.
this.labelHeightAdjust = 0
Options passed to the label renderer.
this.labelOptions = {}
‘auto’, ‘start’, ‘middle’ or ‘end’.
this.labelPosition = 'auto'
Where to position the label, either ‘inside’ or ‘bottom’.
this.labelPosition = 'inside'
A class of a rendering engine for creating an axis label.
this.labelRenderer = $.jqplot.AxisLabelRenderer
array of arrays of labels, one array for each series.
this.labels = []
Array of labels to use.
this.labels = []
true to use labels within data point arrays.
this.labelsFromSeries = false
see $.jqplot.TableLegendRenderer
this.legend = new Legend()
Type of ending placed on the line [‘round’, ‘butt’, ‘square’]
how ends of the shadow line are rendered.
this.lineCap = 'round'
how ends of the shadow line are rendered.
this.lineCap = 'round'
Canvas lineCap style at ends of line.
this.lineCap = 'round'
How line segments of the shadow are joined.
this.lineJoin = 'miter'
How line segments of the shadow are joined.
this.lineJoin = 'miter'
Canvas lineJoin style between segments of series.
this.lineJoin = 'round'
line pattern ‘dashed’, ‘dotted’, ‘solid’, some combination of ‘-’ and ‘.’
this.linePattern = 'solid'
line pattern ‘dashed’, ‘dotted’, ‘solid’, some combination of ‘-’ and ‘.’
this.linePattern = 'solid'
Width of the line.
width of line if areas are stroked and not filled.
this.lineWidth = 2
size of the line for non-filled markers.
this.lineWidth = 2
Width of the hi-low line and open/close ticks.
this.lineWidth = 1.5
width of the shadow line stroke.
this.lineWidth = 1.5
Width of the trend line.
this.lineWidth = 1.5
width of the line in pixels.
this.lineWidth = 2.5
Pixels to add to the lineWidth of the highlight.
this.lineWidthAdjust = 2.5
compass location where to position the label around the point.
this.location = 'n'
Placement of the legend.
this.location = 'ne'
Will expand zoom range to provide more rounded tick values.
this.looseZoom = true
Property Index
| M | |
| marginBottom, Legend | |
| marginLeft, Legend | |
| marginRight, Legend | |
| marginTop, Legend | |
| mark | |
| markerOptions, Series | |
| markerRenderer | |
| markSize | |
| max | |
| min | |
| minorTicks | |
| N | |
| name, $.jqplot. | |
| needlePad, $.jqplot. | |
| needleThickness, $.jqplot. | |
| negativeColor, Series | |
| neighborThreshold, Series | |
| noDataIndicator, jqPlot | |
| numberColumns | |
| numberRows | |
| numberTicks, Axis | |
| O | |
| objects, $.jqplot. | |
| offset, $.jqplot. | |
| offsetBars | |
| openColor, $.jqplot. | |
| P | |
| pad, Axis | |
| padding | |
| padMax, Axis | |
| padMin, Axis | |
| pegNeedle, $.jqplot. | |
| placement, Legend | |
| position | |
| predraw, Legend | |
| prefix | |
| pt2px | |
| R | |
| renderer | |
| rendererOptions | |
| ringColor, $.jqplot. | |
| ringMargin, $.jqplot. | |
| ringWidth, $.jqplot. | |
| rowSpacing, Legend |
CSS margin for the legend DOM element.
this.marginBottom = null
CSS margin for the legend DOM element.
this.marginLeft = null
CSS margin for the legend DOM element.
this.marginRight = null
CSS margin for the legend DOM element.
this.marginTop = null
tick mark on the axis.
this.mark = 'outside'
tick mark on the axis.
this.mark = 'outside'
renderer specific options to pass to the markerRenderer, see $.jqplot.MarkerRenderer.
this.markerOptions = {}
Renderer used to draw the marker of the highlighted point.
this.markerRenderer = new $.jqplot.MarkerRenderer( {shadow:false} )
Renderer to use to draw markers on the line.
this.markerRenderer = {show:false}
A class of a renderer which will draw marker (e.g.
this.markerRenderer = $.jqplot.MarkerRenderer
Length of the tick marks in pixels.
this.markSize = 6
Length of the tick marks in pixels.
this.markSize = 4
Maximum value on the gauge.
this.max
maximum value of the axis (in data units, not pixels).
this.max = null
Minimum value on the gauge.
this.min
minimum value of the axis (in data units, not pixels).
this.min = null
Number of ticks to add between “major” ticks.
this.minorTicks = 0
Number of ticks to add between “major” ticks.
this.minorTicks = 'auto'
Optional name for the overlay object.
Padding between needle and inner edge of the ring when the needle is at the min or max gauge value.
this.needlePad = 6
Maximum thickness the needle.
this.needleThickness = null
css color spec used for filled (area) plots that are filled to zero and the “useNegativeColors” option is true.
this.negativeColor
how close or far (in pixels) the cursor must be from a point marker to detect the point.
this.neighborThreshold = 4
Options to set up a mock plot with a data loading indicator if no data is specified.
Maximum number of columns in the legend.
this.numberColumns = null
Maximum number of columns in the legend.
this.numberColumns = null
Maximum number of columns in the legend.
this.numberColumns = null
Maximum number of columns in the legend.
this.numberColumns = null
Maximum number of columns in the legend.
this.numberColumns = null
Maximum number of rows in the legend.
this.numberRows = null
Maximum number of rows in the legend.
this.numberRows = null
Maximum number of rows in the legend.
this.numberRows = null
Maximum number of rows in the legend.
this.numberRows = null
Maximum number of rows in the legend.
this.numberRows = null
Desired number of ticks.
this.numberTicks
this.objects = []
Pixel offset at the given shadow angle of each shadow stroke from the last stroke.
this.offset = 1
False will center bars on their y value.
this.offsetBars = false
color of the open price tick mark.
this.openColor = null
Padding to extend the range above and below the data bounds.
this.pad = 1.2
padding between the donut and plot edges, legend, etc.
this.padding = 20
padding between the funnel and plot edges, legend, etc.
this.padding = {top: 20, right: 20, bottom: 20, left: 20}
padding between the meterGauge and plot edges, auto calculated by default.
this.padding = null
padding between the pie and plot edges, legend, etc.
this.padding = 20
Padding to extend the range above data bounds.
this.padMax = null
Padding to extend the range below data bounds.
this.padMin = null
True will stop needle just below/above the min/max values if data is below/above min/max, as if the meter is “pegged”.
this.pegNeedle = true
“insideGrid” places legend inside the grid area of the plot.
this.placement = "insideGrid"
Position of axis.
this.position = null
Wether to draw the legend before the series or not.
String to prepend to the tick label.
this.prefix = ''
String to prepend to the tick label.
this.prefix = ''
Point to pixel scaling factor, used for computing height of bounding box around a label.
this.pt2px = null
Point to pixel scaling factor, used for computing height of bounding box around a label.
this.pt2px = null
Renderer to use to draw the trend line.
this.renderer = new $.jqplot.LineRenderer()
A class of a rendering engine that handles tick generation, scaling input data to pixel grid units and drawing the axis element.
this.renderer = $.jqplot.LinearAxisRenderer
Instance of a renderer which will actually render the grid, see $.jqplot.CanvasGridRenderer.
this.renderer = $.jqplot.CanvasGridRenderer
A class of a renderer which will draw the series, see $.jqplot.LineRenderer.
this.renderer = $.jqplot.LineRenderer
A class for creating a DOM element for the title, see $.jqplot.DivTitleRenderer.
this.renderer = $.jqplot.DivTitleRenderer
Options to pass to the line renderer.
this.rendererOptions = {marker:{show:false}}
renderer specific options.
this.rendererOptions = {}
Options to pass on to the renderer, see $.jqplot.CanvasGridRenderer.
this.rendererOptions = {}
renderer specific options passed to the renderer.
this.rendererOptions = {}
Options to pass on to the renderer.
this.rendererOptions = {}
renderer specific options passed to the renderer.
this.rendererOptions = {}
color of the outer ring, hub, and needle of the gauge.
this.ringColor = "#BBC6D0"
pixel distance between rings, or multiple series in a donut plot.
this.ringMargin = null
width of the ring around the gauge.
this.ringWidth = null
css padding-top spec for the rows in the legend.
this.rowSpacing = '0.5em'
Property Index
| S | |
| scaleToHiddenSeries, Axis | |
| sectionMargin, $.jqplot. | |
| series, jqPlot | |
| seriesColors, jqPlot | |
| seriesDefaults, jqPlot | |
| seriesLabelIndex, $.jqplot. | |
| seriesToggle | |
| seriesToggleReplot | |
| shadow | |
| shadowAlpha | |
| shadowAngle | |
| shadowColor, Grid | |
| shadowDepth | |
| shadowOffset | |
| shadowRenderer, $.jqplot. | |
| shadowWidth, Grid | |
| shapeRenderer, $.jqplot. | |
| show | |
| showBorders, $.jqplot. | |
| showCursorLegend, $.jqplot. | |
| showDataLabels | |
| showGridline | |
| showHorizontalLine, $.jqplot. | |
| showLabel | |
| showLabels | |
| showLine, Series | |
| showLines, $.jqplot. | |
| showMark | |
| showMarker | |
| showMinorTicks, Axis | |
| showSwatch, Legend | |
| showTickLabels, $.jqplot. | |
| showTickMarks, Axis | |
| showTicks | |
| showTooltip | |
| showTooltipDataPosition, $.jqplot. | |
| showTooltipGridPosition, $.jqplot. | |
| showTooltipOutsideZoom, $.jqplot. | |
| showTooltipPrecision, $.jqplot. | |
| showTooltipUnitPosition, $.jqplot. | |
| showVerticalLine, $.jqplot. | |
| size | |
| sizeAdjust, $.jqplot. | |
| sliceMargin | |
| smooth, $.jqplot. | |
| sortData, jqPlot | |
| sortMergedLabels, $.jqplot. | |
| stackedValue, $.jqplot. | |
| stackSeries, jqPlot | |
| start, Line | |
| startAngle | |
| stop, Line | |
| strokeRect, $.jqplot. | |
| strokeStyle, $.jqplot. | |
| style | |
| suffix, $.jqplot. | |
| synchronizeHighlight | |
| syncTicks, Axis |
True to include hidden series when computing axes bounds and scaling.
this.scaleToHiddenSeries = false
spacing between funnel sections in pixels.
this.sectionMargin = 6
Array of series object options.
this.series = []
Ann array of CSS color specifications that will be applied, in order, to the series in the plot.
this.seriesColors = $.jqplot.config.defaultColors
default options that will be applied to all series.
seriesDefaults: {}, series:[] }
array index for location of labels within data point arrays.
this.seriesLabelIndex = null
false to not enable series on/off toggling on the legend.
this.seriesToggle = 'normal'
True to replot the chart after toggling series on/off.
this.seriesToggleReplot = false
wether or not to draw a shadow on the line
wether or not to draw a shadow on the line
this.shadow = true
true or false, wether or not to show the shadow.
this.shadow = true
wether to show a shadow behind the grid.
this.shadow = true
transparency of the shadow (0 = transparent, 1 = opaque)
this.shadowAlpha = 0.08
Alpha channel transparency of shadow.
transparency of the shadow (0 = transparent, 1 = opaque)
this.shadowAlpha = 0.07
transparency of the shadow (0 = transparent, 1 = opaque)
this.shadowAlpha = 0.07
Alpha channel transparency of shadow.
this.shadowAlpha = '0.07'
transparency of the shadow (0 = transparent, 1 = opaque)
this.shadowAlpha = 0.07
transparency of the shadow (0 = transparent, 1 = opaque)
this.shadowAlpha = 0.07
Alpha transparency of the shadow.
this.shadowAlpha = 0.07
Alpha channel transparency of shadow.
this.shadowAlpha = '0.07'
Alpha channel transparency of shadow.
this.shadowAlpha = '0.1'
Shadow angle in degrees
Shadow angle in degrees
this.shadowAngle = 45
Angle of the shadow on the trend line.
this.shadowAngle = 45
shadow angle in degrees
this.shadowAngle = 45
Shadow angle in degrees
this.shadowAngle = 45
an optional css color spec for the shadow in ‘rgba(n, n, n, n)’ form
this.shadowColor = null
number of strokes to apply to the shadow, each stroke offset shadowOffset from the last.
this.shadowDepth = 5
Number of times shadow is stroked, each stroke offset shadowOffset from the last.
number of strokes to apply to the shadow, each stroke offset shadowOffset from the last.
this.shadowDepth = 5
number of strokes to apply to the shadow, each stroke offset shadowOffset from the last.
this.shadowDepth = 5
Number of times shadow is stroked, each stroke offset shadowOffset from the last.
this.shadowDepth = 3
number of strokes to apply to the shadow, each stroke offset shadowOffset from the last.
this.shadowDepth = 4
number of strokes to apply to the shadow, each stroke offset shadowOffset from the last.
this.shadowDepth = 5
number of strokes to make of the shadow.
this.shadowDepth = 3
Number of times shadow is stroked, each stroke offset shadowOffset from the last.
this.shadowDepth = 3
Number of times shadow is stroked, each stroke offset shadowOffset from the last.
this.shadowDepth = 3
offset of the shadow from the slice and offset of each succesive stroke of the shadow from the last.
this.shadowOffset = 2
Shadow offset from line in pixels
offset of the shadow from the slice and offset of each succesive stroke of the shadow from the last.
this.shadowOffset = 2
offset of the shadow from the area and offset of each succesive stroke of the shadow from the last.
this.shadowOffset = 2
Shadow offset from line in pixels
this.shadowOffset = 1
offset of the shadow from the gauge ring and offset of each succesive stroke of the shadow from the last.
this.shadowOffset = 2
offset of the shadow from the slice and offset of each succesive stroke of the shadow from the last.
this.shadowOffset = 2
pixel offset for each stroke of the shadow.
this.shadowOffset = 1.0
Offset of each shadow stroke from the border in pixels
this.shadowOffset = 1.5
Shadow offset from line in pixels
this.shadowOffset = 1.25
Renderer that will draws the shadows on the marker.
this.shadowRenderer = new $.jqplot.ShadowRenderer()
width of the stoke for the shadow
this.shadowWidth = 3
Renderer that will draw the marker.
this.shapeRenderer = new $.jqplot.ShapeRenderer()
wether or not to show the tick (mark and label).
this.show = true
wether or not to show the tick (mark and label).
this.show = true
wether or not to show the tick (mark and label).
this.show = true
wether or not to show the tick (mark and label).
this.show = true
true to show (draw), false to not draw.
wether to show the cursor or not.
this.show = $.jqplot.config.enablePlugins
true to show the highlight.
this.show = $.jqplot.config.enablePlugins
true to show the bands.
wether or not to show the marker.
this.show = true
show the labels or not.
this.show = $.jqplot.config.enablePlugins
Wether or not to show the trend line.
this.show = $.jqplot.config.enablePlugins
Wether to display the axis on the graph.
this.show = false
Wether to display the legend on the graph.
this.show = false
wether or not to draw the series.
this.show = true
wether or not to show the title
this.show = true
True to draw borders lines between areas on the chart.
this.showBorders = true
Replace the plot legend with an enhanced legend displaying intersection information.
this.showCursorLegend = false
true to show data labels on slices.
this.showDataLabels = false
true to show data labels on slices.
this.showDataLabels = false
true to show data labels on slices.
this.showDataLabels = false
wether or not to draw the gridline on the grid at this tick.
this.showGridline = true
wether or not to draw the gridline on the grid at this tick.
this.showGridline = true
draw a horizontal line across the plot which follows the cursor.
this.showHorizontalLine = false
wether or not to show the label.
this.showLabel = true
wether or not to show the label.
this.showLabel = true
wether or not to show the label.
this.showLabel = true
true to show the axis label.
this.showLabel = true
true to show label for this series in the legend.
this.showLabel = true
True to show labels on bubbles (if any), false to not show.
this.showLabels = true
true to show the label text on the legend.
this.showLabels = true
wether to actually draw the line or not.
this.showLine = true
True to show lines at top and bottom of bands [default: false].
wether or not to show the mark on the axis.
this.showMark = true
wether or not to show the mark on the axis.
this.showMark = true
true to show the marker
this.showMarker = true
wether or not to show the markers at the data points.
this.showMarker = true
Wether or not to show minor ticks.
this.showMinorTicks = true
true to show the color swatches on the legend.
this.showSwatches = true
true to show tick labels next to ticks.
this.showTickLabels = true
Wether to show the tick marks (line crossing grid) or not.
this.showTickMarks = true
true to show ticks around gauge.
this.showTicks = true
Wether to show the ticks (both marks and labels) or not.
this.showTicks = true
Show a tooltip with data point values.
show a cursor position tooltip.
this.showTooltip = true
Show a tooltip with data point values.
this.showTooltip = true
Used with showVerticalLine to show intersecting data points in the tooltip.
this.showTooltipDataPosition = false
show the grid pixel coordinates of the mouse.
this.showTooltipGridPosition = false
True will keep updating the tooltip when zooming of the grid.
this.showTooltipOutsideZoom = false
Controls how close to line cursor must be to show tooltip.
show the unit (data) coordinates of the mouse.
this.showTooltipUnitPosition = true
draw a vertical line across the plot which follows the cursor.
this.showVerticalLine = false
Length of the tick beyond the grid in pixels.
this.size = 4
Size of the marker (diameter or circle, length of edge of square, etc.)
this.size = 9.0
Pixels to add to the overall size of the highlight.
this.sizeAdjust = 5
angular spacing between donut slices in degrees.
this.sliceMargin = 0
angular spacing between pie slices in degrees.
this.sliceMargin = 0
True to draw a smoothed (interpolated) line through the data points with automatically computed number of smoothing points.
this.renderer.smooth = false
false to not sort the data passed in by the user.
this.sortData = true
True to sort tick labels when labels are created by merging x axis values from multiple series.
this.sortMergedLabels = false
true to display value as stacked in a stacked plot.
this.stackedValue = false
true or false, creates a stack or “mountain” plot.
this.stackSeries = false
[x, y] coordinates for the start of the line.
Angle to start drawing donut in degrees.
this.startAngle = 0
Angle to start drawing pie in degrees.
this.startAngle = 0
[x, y] coordinates for the end of the line.
stop: [] }
true to draw shape as a stroked rectangle.
this.strokeRect = false
css color spec for the stoke style
this.strokeStyle = '#999999'
CSS spec for cursor style
this.style = 'crosshair'
One of diamond, circle, square, x, plus, dash, filledDiamond, filledCircle, filledSquare
this.style = 'filledCircle'
String to append to the tick label.
this.suffix = ''
Index of another series to highlight when this series is highlighted.
this.synchronizeHighlight = false
true to try and synchronize tick spacing across multiple axes so that ticks and grid lines line up.
this.syncTicks = null
Property Index
| T | |
| text, Title | |
| textAlign, Title | |
| textColor | |
| themes, $.jqplot. | |
| thickness, $.jqplot. | |
| tickColor, $.jqplot. | |
| tickInset | |
| tickInterval, Axis | |
| tickLength, $.jqplot. | |
| tickMode, $.jqplot. | |
| tickOptions, Axis | |
| tickPadding, $.jqplot. | |
| tickRenderer | |
| ticks | |
| tickSpacing | |
| title, jqPlot | |
| tooltipAxes, $.jqplot. | |
| tooltipAxisGroups, $.jqplot. | |
| tooltipFadeSpeed | |
| tooltipFormatString | |
| tooltipLocation | |
| tooltipOffset | |
| transposedData, $.jqplot. | |
| type, $.jqplot. | |
| U | |
| upBodyColor, $.jqplot. | |
| useAxesFormatters | |
| useNegativeColors, Series | |
| useSeriesColor, Axis | |
| V | |
| varyBarColor, $.jqplot. | |
| varyBlockColors, $.jqplot. | |
| varyBubbleColors, $.jqplot. | |
| W | |
| waterfall, $.jqplot. | |
| wickColor, $.jqplot. | |
| widthRatio, $.jqplot. | |
| X | |
| xaxis | |
| xmax, HorizontalLine | |
| xmin, HorizontalLine | |
| xoffset, Legend | |
| xpadding, $.jqplot. | |
| Y | |
| y, HorizontalLine | |
| yaxis | |
| yoffset, Legend | |
| ypadding, $.jqplot. | |
| yvalues, $.jqplot. | |
| Z | |
| zoom, $.jqplot. |
text of the title;
this.text = text
css text-align spec for the text.
this.textAlign
css spec for the color attribute.
this.textColor
css spec for the color attribute.
this.textColor = '#666666'
css spec for the color attribute.
this.textColor = '#666666'
css color spec for the legend text.
this.textColor
css color spec for the text.
this.textColor
hash of themes managed by the theme engine.
this.themes = {}
thickness of the donut, auto computed by default Overridden by if innerDiameter is specified.
this.thickness = null
color of the tick marks around the gauge.
this.tickColor = "989898"
Controls the amount to inset the first and last ticks from the edges of the grid, in multiples of the tick interval.
this.tickInset = 0
Controls the amount to inset the first and last ticks from the edges of the grid, in multiples of the tick interval.
this.tickInset = 0
number of units between ticks.
this.tickInterval
length of the line in pixels indicating open and close price.
this.tickLength = 'auto'
How to space the ticks on the axis.
this.tickMode
Options that will be passed to the tickRenderer, see $.jqplot.AxisTickRenderer options.
this.tickOptions = {}
padding of the tick marks to the outer ring and the tick labels to marks.
this.tickPadding = null
A class of a rendering engine for creating the ticks labels displayed on the plot, See $.jqplot.AxisTickRenderer.
A class of a rendering engine for creating the ticks labels displayed on the plot, See $.jqplot.AxisTickRenderer.
A class of a rendering engine for creating the ticks labels displayed on the plot, See $.jqplot.AxisTickRenderer.
this.tickRenderer = $.jqplot.AxisTickRenderer
Array of tick values.
this.ticks = []
1D [val, val, ...] or 2D [[val, label], [val, label], ...] array of ticks for the axis.
this.ticks = []
Degrees between ticks.
this.tickSpacing = 30
Approximate pixel spacing between ticks on graph.
this.tickSpacing = 75
Title object.
this.title = new Title()
Which axes to display in tooltip, ‘x’, ‘y’ or ‘both’, ‘xy’ or ‘yx’ ‘both’ and ‘xy’ are equivalent, ‘yx’ reverses order of labels.
this.tooltipAxes = 'both'
Show position for the specified axes.
this.tooltipAxisGroups = []
‘slow’, ‘def’, ‘fast’, or number of milliseconds.
‘slow’, ‘def’, ‘fast’, or number of milliseconds.
this.tooltipFadeSpeed = "fast"
Format string passed the x and y values of the cursor on the line.
tooltipFormatString: '%d, %d' }
sprintf format string for the tooltip.
this.tooltipFormatString = '%.4P, %.4P'
sprintf format string for the tooltip.
this.tooltipFormatString = '%.5P'
Where to position tooltip, ‘n’, ‘ne’, ‘e’, ‘se’, ‘s’, ‘sw’, ‘w’, ‘nw’
Where to position tooltip.
this.tooltipLocation = 'se'
Where to position tooltip, ‘n’, ‘ne’, ‘e’, ‘se’, ‘s’, ‘sw’, ‘w’, ‘nw’
this.tooltipLocation = 'nw'
Pixel offset of tooltip from the highlight.
Pixel offset of tooltip from the grid boudaries or cursor center.
this.tooltipOffset = 6
Pixel offset of tooltip from the highlight.
this.tooltipOffset = 2
NOT IMPLEMENTED YET.
this.transposedData = true
Either ‘exponential’, ‘exp’, or ‘linear’.
this.type = 'linear'
Color of candlestick body of an “up” day.
this.upBodyColor = null
Use the x and y axes formatters to format the text in the tooltip.
this.useAxesFormatters = true
Use the x and y axes formatters to format the text in the tooltip.
this.useAxesFormatters = true
true to color negative values differently in filled and bar charts.
this.useNegativeColors = true
Use the color of the first series associated with this axis for the tick marks and line bordering this axis.
this.useSeriesColor = false
true to color each bar of a series separately rather than have every bar of a given series the same color.
this.varyBarColor = false
true to vary the color of each block in this series according to the seriesColors array.
this.varyBlockColors = false
True to vary the color of each bubble in this series according to the seriesColors array.
this.varyBubbleColors = true
true to enable waterfall plot.
this.waterfall = false
color of the hi-lo line thorugh the candlestick body.
this.wickColor = null
The ratio of the width of the top of the funnel to the bottom.
this.widthRatio = 0.2
X axis to use for positioning/scaling the line.
which x axis to use with this series, either ‘xaxis’ or ‘x2axis’.
this.xaxis = 'xaxis'
x value for the end of the line, null to scale to axis max.
x value for the start of the line, null to scale to axis min.
DEPRECATED.
this.xoffset = 0
horizontal padding in pixels between point and label
this.xpadding = 6
y value to position the line
Y axis to use for positioning/scaling the line.
which y axis to use with this series, either ‘yaxis’ or ‘y2axis’.
this.yaxis = 'yaxis'
DEPRECATED.
this.yoffset = 0
vertical padding in pixels between point and label
this.ypadding = 6
Number of y values to expect in the data point array.
this.yvalues = 1
Enable plot zooming.
this.zoom = false
\ No newline at end of file
diff --git a/wqflask/wqflask/static/packages/jqplot/docs/search/ClassesD.html b/wqflask/wqflask/static/packages/jqplot/docs/search/ClassesD.html
new file mode 100644
index 00000000..135eeb6a
--- /dev/null
+++ b/wqflask/wqflask/static/packages/jqplot/docs/search/ClassesD.html
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/wqflask/wqflask/static/packages/jqplot/docs/search/ClassesG.html b/wqflask/wqflask/static/packages/jqplot/docs/search/ClassesG.html
new file mode 100644
index 00000000..36f121b0
--- /dev/null
+++ b/wqflask/wqflask/static/packages/jqplot/docs/search/ClassesG.html
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/wqflask/wqflask/static/packages/jqplot/docs/search/ClassesH.html b/wqflask/wqflask/static/packages/jqplot/docs/search/ClassesH.html
new file mode 100644
index 00000000..c411b320
--- /dev/null
+++ b/wqflask/wqflask/static/packages/jqplot/docs/search/ClassesH.html
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/wqflask/wqflask/static/packages/jqplot/docs/search/ClassesJ.html b/wqflask/wqflask/static/packages/jqplot/docs/search/ClassesJ.html
new file mode 100644
index 00000000..b2250098
--- /dev/null
+++ b/wqflask/wqflask/static/packages/jqplot/docs/search/ClassesJ.html
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/wqflask/wqflask/static/packages/jqplot/docs/search/ClassesL.html b/wqflask/wqflask/static/packages/jqplot/docs/search/ClassesL.html
new file mode 100644
index 00000000..6a93b819
--- /dev/null
+++ b/wqflask/wqflask/static/packages/jqplot/docs/search/ClassesL.html
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/wqflask/wqflask/static/packages/jqplot/docs/search/ClassesS.html b/wqflask/wqflask/static/packages/jqplot/docs/search/ClassesS.html
new file mode 100644
index 00000000..53823e7d
--- /dev/null
+++ b/wqflask/wqflask/static/packages/jqplot/docs/search/ClassesS.html
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/wqflask/wqflask/static/packages/jqplot/docs/search/ClassesSymbols.html b/wqflask/wqflask/static/packages/jqplot/docs/search/ClassesSymbols.html
new file mode 100644
index 00000000..53396614
--- /dev/null
+++ b/wqflask/wqflask/static/packages/jqplot/docs/search/ClassesSymbols.html
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
Loading...
Searching...
No Matches
\ No newline at end of file
diff --git a/wqflask/wqflask/static/packages/jqplot/docs/search/ClassesV.html b/wqflask/wqflask/static/packages/jqplot/docs/search/ClassesV.html
new file mode 100644
index 00000000..62d2e7cb
--- /dev/null
+++ b/wqflask/wqflask/static/packages/jqplot/docs/search/ClassesV.html
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/wqflask/wqflask/static/packages/jqplot/docs/search/FilesJ.html b/wqflask/wqflask/static/packages/jqplot/docs/search/FilesJ.html
new file mode 100644
index 00000000..3c66afa0
--- /dev/null
+++ b/wqflask/wqflask/static/packages/jqplot/docs/search/FilesJ.html
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
Loading...
Searching...
No Matches
\ No newline at end of file
diff --git a/wqflask/wqflask/static/packages/jqplot/docs/search/FunctionsD.html b/wqflask/wqflask/static/packages/jqplot/docs/search/FunctionsD.html
new file mode 100644
index 00000000..2c2bed5d
--- /dev/null
+++ b/wqflask/wqflask/static/packages/jqplot/docs/search/FunctionsD.html
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/wqflask/wqflask/static/packages/jqplot/docs/search/FunctionsG.html b/wqflask/wqflask/static/packages/jqplot/docs/search/FunctionsG.html
new file mode 100644
index 00000000..561eabc0
--- /dev/null
+++ b/wqflask/wqflask/static/packages/jqplot/docs/search/FunctionsG.html
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
Loading...
Searching...
No Matches
\ No newline at end of file
diff --git a/wqflask/wqflask/static/packages/jqplot/docs/search/FunctionsM.html b/wqflask/wqflask/static/packages/jqplot/docs/search/FunctionsM.html
new file mode 100644
index 00000000..0b6446cb
--- /dev/null
+++ b/wqflask/wqflask/static/packages/jqplot/docs/search/FunctionsM.html
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
Loading...
Searching...
No Matches
\ No newline at end of file
diff --git a/wqflask/wqflask/static/packages/jqplot/docs/search/FunctionsQ.html b/wqflask/wqflask/static/packages/jqplot/docs/search/FunctionsQ.html
new file mode 100644
index 00000000..9d06ebc0
--- /dev/null
+++ b/wqflask/wqflask/static/packages/jqplot/docs/search/FunctionsQ.html
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/wqflask/wqflask/static/packages/jqplot/docs/search/FunctionsR.html b/wqflask/wqflask/static/packages/jqplot/docs/search/FunctionsR.html
new file mode 100644
index 00000000..fac0dbcc
--- /dev/null
+++ b/wqflask/wqflask/static/packages/jqplot/docs/search/FunctionsR.html
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
Loading...
Searching...
No Matches
\ No newline at end of file
diff --git a/wqflask/wqflask/static/packages/jqplot/docs/search/FunctionsZ.html b/wqflask/wqflask/static/packages/jqplot/docs/search/FunctionsZ.html
new file mode 100644
index 00000000..4b364e98
--- /dev/null
+++ b/wqflask/wqflask/static/packages/jqplot/docs/search/FunctionsZ.html
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/wqflask/wqflask/static/packages/jqplot/docs/search/GeneralA.html b/wqflask/wqflask/static/packages/jqplot/docs/search/GeneralA.html
new file mode 100644
index 00000000..f62a230b
--- /dev/null
+++ b/wqflask/wqflask/static/packages/jqplot/docs/search/GeneralA.html
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
Loading...
Searching...
No Matches
Loading...
Searching...
No Matches
Loading...
Searching...
No Matches
Loading...
Searching...
No Matches
Loading...
Searching...
No Matches
Loading...
Searching...
No Matches
Loading...
Searching...
No Matches
Loading...
Searching...
No Matches
Loading...
Searching...
No Matches
\ No newline at end of file
diff --git a/wqflask/wqflask/static/packages/jqplot/docs/search/GeneralL.html b/wqflask/wqflask/static/packages/jqplot/docs/search/GeneralL.html
new file mode 100644
index 00000000..0fc12896
--- /dev/null
+++ b/wqflask/wqflask/static/packages/jqplot/docs/search/GeneralL.html
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
Loading...
Searching...
No Matches
Loading...
Searching...
No Matches
Loading...
Searching...
No Matches
Loading...
Searching...
No Matches
Loading...
Searching...
No Matches
\ No newline at end of file
diff --git a/wqflask/wqflask/static/packages/jqplot/docs/search/GeneralR.html b/wqflask/wqflask/static/packages/jqplot/docs/search/GeneralR.html
new file mode 100644
index 00000000..830dac93
--- /dev/null
+++ b/wqflask/wqflask/static/packages/jqplot/docs/search/GeneralR.html
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
Loading...
Searching...
No Matches
Loading...
Searching...
No Matches
Loading...
Searching...
No Matches
Loading...
Searching...
No Matches
Loading...
Searching...
No Matches
Loading...
Searching...
No Matches
Loading...
Searching...
No Matches
Loading...
Searching...
No Matches
Loading...
Searching...
No Matches
\ No newline at end of file
diff --git a/wqflask/wqflask/static/packages/jqplot/docs/search/HooksA.html b/wqflask/wqflask/static/packages/jqplot/docs/search/HooksA.html
new file mode 100644
index 00000000..82b17cda
--- /dev/null
+++ b/wqflask/wqflask/static/packages/jqplot/docs/search/HooksA.html
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/wqflask/wqflask/static/packages/jqplot/docs/search/HooksE.html b/wqflask/wqflask/static/packages/jqplot/docs/search/HooksE.html
new file mode 100644
index 00000000..fe464932
--- /dev/null
+++ b/wqflask/wqflask/static/packages/jqplot/docs/search/HooksE.html
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/wqflask/wqflask/static/packages/jqplot/docs/search/HooksJ.html b/wqflask/wqflask/static/packages/jqplot/docs/search/HooksJ.html
new file mode 100644
index 00000000..f94e0036
--- /dev/null
+++ b/wqflask/wqflask/static/packages/jqplot/docs/search/HooksJ.html
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/wqflask/wqflask/static/packages/jqplot/docs/search/HooksP.html b/wqflask/wqflask/static/packages/jqplot/docs/search/HooksP.html
new file mode 100644
index 00000000..eb28c716
--- /dev/null
+++ b/wqflask/wqflask/static/packages/jqplot/docs/search/HooksP.html
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
Loading...
Searching...
No Matches
No Matches
Loading...
Searching...
No Matches
Loading...
Searching...
No Matches
Loading...
Searching...
No Matches
Loading...
Searching...
No Matches
\ No newline at end of file
diff --git a/wqflask/wqflask/static/packages/jqplot/docs/search/PropertiesF.html b/wqflask/wqflask/static/packages/jqplot/docs/search/PropertiesF.html
new file mode 100644
index 00000000..cf90670b
--- /dev/null
+++ b/wqflask/wqflask/static/packages/jqplot/docs/search/PropertiesF.html
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
Loading...
Searching...
No Matches
Loading...
Searching...
No Matches
Loading...
Searching...
No Matches
Loading...
Searching...
No Matches
Loading...
Searching...
No Matches
Loading...
Searching...
No Matches
Loading...
Searching...
No Matches
Loading...
Searching...
No Matches
Loading...
Searching...
No Matches
Loading...
Searching...
No Matches
Loading...
Searching...
No Matches
Loading...
Searching...
No Matches
Loading...
Searching...
No Matches
Loading...
Searching...
No Matches
Loading...
Searching...
No Matches
Loading...
Searching...
No Matches
Loading...
Searching...
No Matches
\ No newline at end of file
diff --git a/wqflask/wqflask/static/packages/jqplot/docs/styles/1.css b/wqflask/wqflask/static/packages/jqplot/docs/styles/1.css
new file mode 100644
index 00000000..17e9cbc3
--- /dev/null
+++ b/wqflask/wqflask/static/packages/jqplot/docs/styles/1.css
@@ -0,0 +1,767 @@
+/*
+ IMPORTANT: If you're editing this file in the output directory of one of
+ your projects, your changes will be overwritten the next time you run
+ Natural Docs. Instead, copy this file to your project directory, make your
+ changes, and you can use it with -s. Even better would be to make a CSS
+ file in your project directory with only your changes, which you can then
+ use with -s [original style] [your changes].
+
+ On the other hand, if you're editing this file in the Natural Docs styles
+ directory, the changes will automatically be applied to all your projects
+ that use this style the next time Natural Docs is run on them.
+
+ This file is part of Natural Docs, which is Copyright (C) 2003-2008 Greg Valure
+ Natural Docs is licensed under the GPL
+*/
+
+body {
+ font: 10pt Verdana, Arial, sans-serif;
+ color: #000000;
+ margin: 0; padding: 0;
+ }
+
+.ContentPage,
+.IndexPage,
+.FramedMenuPage {
+ background-color: #E8E8E8;
+ }
+.FramedContentPage,
+.FramedIndexPage,
+.FramedSearchResultsPage,
+.PopupSearchResultsPage {
+ background-color: #FFFFFF;
+ }
+
+
+a:link,
+a:visited { color: #900000; text-decoration: none }
+a:hover { color: #900000; text-decoration: underline }
+a:active { color: #FF0000; text-decoration: underline }
+
+td {
+ vertical-align: top }
+
+img { border: 0; }
+
+
+/*
+ Comment out this line to use web-style paragraphs (blank line between
+ paragraphs, no indent) instead of print-style paragraphs (no blank line,
+ indented.)
+*/
+p {
+ text-indent: 5ex; margin: 0 }
+
+
+/* Opera doesn't break with just wbr, but will if you add this. */
+.Opera wbr:after {
+ content: "\00200B";
+ }
+
+
+/* Blockquotes are used as containers for things that may need to scroll. */
+blockquote {
+ padding: 0;
+ margin: 0;
+ overflow: auto;
+ }
+
+
+.Firefox1 blockquote {
+ padding-bottom: .5em;
+ }
+
+/* Turn off scrolling when printing. */
+@media print {
+ blockquote {
+ overflow: visible;
+ }
+ .IE blockquote {
+ width: auto;
+ }
+ }
+
+
+
+#Menu {
+ font-size: 9pt;
+ padding: 10px 0 0 0;
+ }
+.ContentPage #Menu,
+.IndexPage #Menu {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 31ex;
+ overflow: hidden;
+ }
+.ContentPage .Firefox #Menu,
+.IndexPage .Firefox #Menu {
+ width: 27ex;
+ }
+
+
+ .MTitle {
+ font-size: 16pt; font-weight: bold; font-variant: small-caps;
+ text-align: center;
+ padding: 5px 10px 15px 10px;
+ border-bottom: 1px dotted #000000;
+ margin-bottom: 15px }
+
+ .MSubTitle {
+ font-size: 9pt; font-weight: normal; font-variant: normal;
+ margin-top: 1ex; margin-bottom: 5px }
+
+
+ .MEntry a:link,
+ .MEntry a:hover,
+ .MEntry a:visited { color: #606060; margin-right: 0 }
+ .MEntry a:active { color: #A00000; margin-right: 0 }
+
+
+ .MGroup {
+ font-variant: small-caps; font-weight: bold;
+ margin: 1em 0 1em 10px;
+ }
+
+ .MGroupContent {
+ font-variant: normal; font-weight: normal }
+
+ .MGroup a:link,
+ .MGroup a:hover,
+ .MGroup a:visited { color: #545454; margin-right: 10px }
+ .MGroup a:active { color: #A00000; margin-right: 10px }
+
+
+ .MFile,
+ .MText,
+ .MLink,
+ .MIndex {
+ padding: 1px 17px 2px 10px;
+ margin: .25em 0 .25em 0;
+ }
+
+ .MText {
+ font-size: 8pt; font-style: italic }
+
+ .MLink {
+ font-style: italic }
+
+ #MSelected {
+ color: #000000; background-color: #FFFFFF;
+ /* Replace padding with border. */
+ padding: 0 10px 0 10px;
+ border-width: 1px 2px 2px 0; border-style: solid; border-color: #000000;
+ margin-right: 5px;
+ }
+
+ /* Close off the left side when its in a group. */
+ .MGroup #MSelected {
+ padding-left: 9px; border-left-width: 1px }
+
+ /* A treat for Mozilla users. Blatantly non-standard. Will be replaced with CSS 3 attributes when finalized/supported. */
+ .Firefox #MSelected {
+ -moz-border-radius-topright: 10px;
+ -moz-border-radius-bottomright: 10px }
+ .Firefox .MGroup #MSelected {
+ -moz-border-radius-topleft: 10px;
+ -moz-border-radius-bottomleft: 10px }
+
+
+ #MSearchPanel {
+ padding: 0px 6px;
+ margin: .25em 0;
+ }
+
+
+ #MSearchField {
+ font: italic 9pt Verdana, sans-serif;
+ color: #606060;
+ background-color: #E8E8E8;
+ border: none;
+ padding: 2px 4px;
+ width: 100%;
+ }
+ /* Only Opera gets it right. */
+ .Firefox #MSearchField,
+ .IE #MSearchField,
+ .Safari #MSearchField {
+ width: 94%;
+ }
+ .Opera9 #MSearchField,
+ .Konqueror #MSearchField {
+ width: 97%;
+ }
+ .FramedMenuPage .Firefox #MSearchField,
+ .FramedMenuPage .Safari #MSearchField,
+ .FramedMenuPage .Konqueror #MSearchField {
+ width: 98%;
+ }
+
+ /* Firefox doesn't do this right in frames without #MSearchPanel added on.
+ It's presence doesn't hurt anything other browsers. */
+ #MSearchPanel.MSearchPanelInactive:hover #MSearchField {
+ background-color: #FFFFFF;
+ border: 1px solid #C0C0C0;
+ padding: 1px 3px;
+ }
+ .MSearchPanelActive #MSearchField {
+ background-color: #FFFFFF;
+ border: 1px solid #C0C0C0;
+ font-style: normal;
+ padding: 1px 3px;
+ }
+
+ #MSearchType {
+ visibility: hidden;
+ font: 8pt Verdana, sans-serif;
+ width: 98%;
+ padding: 0;
+ border: 1px solid #C0C0C0;
+ }
+ .MSearchPanelActive #MSearchType,
+ /* As mentioned above, Firefox doesn't do this right in frames without #MSearchPanel added on. */
+ #MSearchPanel.MSearchPanelInactive:hover #MSearchType,
+ #MSearchType:focus {
+ visibility: visible;
+ color: #606060;
+ }
+ #MSearchType option#MSearchEverything {
+ font-weight: bold;
+ }
+
+ .Opera8 .MSearchPanelInactive:hover,
+ .Opera8 .MSearchPanelActive {
+ margin-left: -1px;
+ }
+
+
+ iframe#MSearchResults {
+ width: 60ex;
+ height: 15em;
+ }
+ #MSearchResultsWindow {
+ display: none;
+ position: absolute;
+ left: 0; top: 0;
+ border: 1px solid #000000;
+ background-color: #E8E8E8;
+ }
+ #MSearchResultsWindowClose {
+ font-weight: bold;
+ font-size: 8pt;
+ display: block;
+ padding: 2px 5px;
+ }
+ #MSearchResultsWindowClose:link,
+ #MSearchResultsWindowClose:visited {
+ color: #000000;
+ text-decoration: none;
+ }
+ #MSearchResultsWindowClose:active,
+ #MSearchResultsWindowClose:hover {
+ color: #800000;
+ text-decoration: none;
+ background-color: #F4F4F4;
+ }
+
+
+
+
+#Content {
+ padding-bottom: 15px;
+ }
+
+.ContentPage #Content {
+ border-width: 0 0 1px 1px;
+ border-style: solid;
+ border-color: #000000;
+ background-color: #FFFFFF;
+ font-size: 9pt; /* To make 31ex match the menu's 31ex. */
+ margin-left: 31ex;
+ }
+.ContentPage .Firefox #Content {
+ margin-left: 27ex;
+ }
+
+
+
+ .CTopic {
+ font-size: 10pt;
+ margin-bottom: 3em;
+ }
+
+
+ .CTitle {
+ font-size: 12pt; font-weight: bold;
+ border-width: 0 0 1px 0; border-style: solid; border-color: #A0A0A0;
+ margin: 0 15px .5em 15px }
+
+ .CGroup .CTitle {
+ font-size: 16pt; font-variant: small-caps;
+ padding-left: 15px; padding-right: 15px;
+ border-width: 0 0 2px 0; border-color: #000000;
+ margin-left: 0; margin-right: 0 }
+
+ .CClass .CTitle,
+ .CInterface .CTitle,
+ .CDatabase .CTitle,
+ .CDatabaseTable .CTitle,
+ .CSection .CTitle {
+ font-size: 18pt;
+ color: #FFFFFF; background-color: #A0A0A0;
+ padding: 10px 15px 10px 15px;
+ border-width: 2px 0; border-color: #000000;
+ margin-left: 0; margin-right: 0 }
+
+ #MainTopic .CTitle {
+ font-size: 20pt;
+ color: #FFFFFF; background-color: #7070C0;
+ padding: 10px 15px 10px 15px;
+ border-width: 0 0 3px 0; border-color: #000000;
+ margin-left: 0; margin-right: 0 }
+
+ .CBody {
+ margin-left: 15px; margin-right: 15px }
+
+
+ .CToolTip {
+ position: absolute; visibility: hidden;
+ left: 0; top: 0;
+ background-color: #FFFFE0;
+ padding: 5px;
+ border-width: 1px 2px 2px 1px; border-style: solid; border-color: #000000;
+ font-size: 8pt;
+ }
+
+ .Opera .CToolTip {
+ max-width: 98%;
+ }
+
+ /* Scrollbars would be useless. */
+ .CToolTip blockquote {
+ overflow: hidden;
+ }
+ .IE6 .CToolTip blockquote {
+ overflow: visible;
+ }
+
+ .CHeading {
+ font-weight: bold; font-size: 10pt;
+ margin: 1.5em 0 .5em 0;
+ }
+
+ .CBody pre {
+ font: 10pt "Courier New", Courier, monospace;
+ margin: 1em 0;
+ }
+
+ .CBody ul {
+ /* I don't know why CBody's margin doesn't apply, but it's consistent across browsers so whatever.
+ Reapply it here as padding. */
+ padding-left: 15px; padding-right: 15px;
+ margin: .5em 5ex .5em 5ex;
+ }
+
+ .CDescriptionList {
+ margin: .5em 5ex 0 5ex }
+
+ .CDLEntry {
+ font: 10pt "Courier New", Courier, monospace; color: #808080;
+ padding-bottom: .25em;
+ white-space: nowrap }
+
+ .CDLDescription {
+ font-size: 10pt; /* For browsers that don't inherit correctly, like Opera 5. */
+ padding-bottom: .5em; padding-left: 5ex }
+
+
+ .CTopic img {
+ text-align: center;
+ display: block;
+ margin: 1em auto;
+ }
+ .CImageCaption {
+ font-variant: small-caps;
+ font-size: 8pt;
+ color: #808080;
+ text-align: center;
+ position: relative;
+ top: 1em;
+ }
+
+ .CImageLink {
+ color: #808080;
+ font-style: italic;
+ }
+ a.CImageLink:link,
+ a.CImageLink:visited,
+ a.CImageLink:hover { color: #808080 }
+
+
+
+
+
+.Prototype {
+ font: 10pt "Courier New", Courier, monospace;
+ padding: 5px 3ex;
+ border-width: 1px; border-style: solid;
+ margin: 0 5ex 1.5em 5ex;
+ }
+
+ .Prototype td {
+ font-size: 10pt;
+ }
+
+ .PDefaultValue,
+ .PDefaultValuePrefix,
+ .PTypePrefix {
+ color: #8F8F8F;
+ }
+ .PTypePrefix {
+ text-align: right;
+ }
+ .PAfterParameters {
+ vertical-align: bottom;
+ }
+
+ .IE .Prototype table {
+ padding: 0;
+ }
+
+ .CFunction .Prototype {
+ background-color: #F4F4F4; border-color: #D0D0D0 }
+ .CProperty .Prototype {
+ background-color: #F4F4FF; border-color: #C0C0E8 }
+ .CVariable .Prototype {
+ background-color: #FFFFF0; border-color: #E0E0A0 }
+
+ .CClass .Prototype {
+ border-width: 1px 2px 2px 1px; border-style: solid; border-color: #A0A0A0;
+ background-color: #F4F4F4;
+ }
+ .CInterface .Prototype {
+ border-width: 1px 2px 2px 1px; border-style: solid; border-color: #A0A0D0;
+ background-color: #F4F4FF;
+ }
+
+ .CDatabaseIndex .Prototype,
+ .CConstant .Prototype {
+ background-color: #D0D0D0; border-color: #000000 }
+ .CType .Prototype,
+ .CEnumeration .Prototype {
+ background-color: #FAF0F0; border-color: #E0B0B0;
+ }
+ .CDatabaseTrigger .Prototype,
+ .CEvent .Prototype,
+ .CDelegate .Prototype {
+ background-color: #F0FCF0; border-color: #B8E4B8 }
+
+ .CToolTip .Prototype {
+ margin: 0 0 .5em 0;
+ white-space: nowrap;
+ }
+
+
+
+
+
+.Summary {
+ margin: 1.5em 5ex 0 5ex }
+
+ .STitle {
+ font-size: 12pt; font-weight: bold;
+ margin-bottom: .5em }
+
+
+ .SBorder {
+ background-color: #FFFFF0;
+ padding: 15px;
+ border: 1px solid #C0C060 }
+
+ /* In a frame IE 6 will make them too long unless you set the width to 100%. Without frames it will be correct without a width
+ or slightly too long (but not enough to scroll) with a width. This arbitrary weirdness simply astounds me. IE 7 has the same
+ problem with frames, haven't tested it without. */
+ .FramedContentPage .IE .SBorder {
+ width: 100% }
+
+ /* A treat for Mozilla users. Blatantly non-standard. Will be replaced with CSS 3 attributes when finalized/supported. */
+ .Firefox .SBorder {
+ -moz-border-radius: 20px }
+
+
+ .STable {
+ font-size: 9pt; width: 100% }
+
+ .SEntry {
+ width: 30% }
+ .SDescription {
+ width: 70% }
+
+
+ .SMarked {
+ background-color: #F8F8D8 }
+
+ .SDescription { padding-left: 2ex }
+ .SIndent1 .SEntry { padding-left: 1.5ex } .SIndent1 .SDescription { padding-left: 3.5ex }
+ .SIndent2 .SEntry { padding-left: 3.0ex } .SIndent2 .SDescription { padding-left: 5.0ex }
+ .SIndent3 .SEntry { padding-left: 4.5ex } .SIndent3 .SDescription { padding-left: 6.5ex }
+ .SIndent4 .SEntry { padding-left: 6.0ex } .SIndent4 .SDescription { padding-left: 8.0ex }
+ .SIndent5 .SEntry { padding-left: 7.5ex } .SIndent5 .SDescription { padding-left: 9.5ex }
+
+ .SDescription a { color: #800000}
+ .SDescription a:active { color: #A00000 }
+
+ .SGroup td {
+ padding-top: .5em; padding-bottom: .25em }
+
+ .SGroup .SEntry {
+ font-weight: bold; font-variant: small-caps }
+
+ .SGroup .SEntry a { color: #800000 }
+ .SGroup .SEntry a:active { color: #F00000 }
+
+
+ .SMain td,
+ .SClass td,
+ .SDatabase td,
+ .SDatabaseTable td,
+ .SSection td {
+ font-size: 10pt;
+ padding-bottom: .25em }
+
+ .SClass td,
+ .SDatabase td,
+ .SDatabaseTable td,
+ .SSection td {
+ padding-top: 1em }
+
+ .SMain .SEntry,
+ .SClass .SEntry,
+ .SDatabase .SEntry,
+ .SDatabaseTable .SEntry,
+ .SSection .SEntry {
+ font-weight: bold;
+ }
+
+ .SMain .SEntry a,
+ .SClass .SEntry a,
+ .SDatabase .SEntry a,
+ .SDatabaseTable .SEntry a,
+ .SSection .SEntry a { color: #000000 }
+
+ .SMain .SEntry a:active,
+ .SClass .SEntry a:active,
+ .SDatabase .SEntry a:active,
+ .SDatabaseTable .SEntry a:active,
+ .SSection .SEntry a:active { color: #A00000 }
+
+
+
+
+
+.ClassHierarchy {
+ margin: 0 15px 1em 15px }
+
+ .CHEntry {
+ border-width: 1px 2px 2px 1px; border-style: solid; border-color: #A0A0A0;
+ margin-bottom: 3px;
+ padding: 2px 2ex;
+ font-size: 10pt;
+ background-color: #F4F4F4; color: #606060;
+ }
+
+ .Firefox .CHEntry {
+ -moz-border-radius: 4px;
+ }
+
+ .CHCurrent .CHEntry {
+ font-weight: bold;
+ border-color: #000000;
+ color: #000000;
+ }
+
+ .CHChildNote .CHEntry {
+ font-style: italic;
+ font-size: 8pt;
+ }
+
+ .CHIndent {
+ margin-left: 3ex;
+ }
+
+ .CHEntry a:link,
+ .CHEntry a:visited,
+ .CHEntry a:hover {
+ color: #606060;
+ }
+ .CHEntry a:active {
+ color: #800000;
+ }
+
+
+
+
+
+#Index {
+ background-color: #FFFFFF;
+ }
+
+/* As opposed to .PopupSearchResultsPage #Index */
+.IndexPage #Index,
+.FramedIndexPage #Index,
+.FramedSearchResultsPage #Index {
+ padding: 15px;
+ }
+
+.IndexPage #Index {
+ border-width: 0 0 1px 1px;
+ border-style: solid;
+ border-color: #000000;
+ font-size: 9pt; /* To make 27ex match the menu's 27ex. */
+ margin-left: 27ex;
+ }
+
+
+ .IPageTitle {
+ font-size: 20pt; font-weight: bold;
+ color: #FFFFFF; background-color: #7070C0;
+ padding: 10px 15px 10px 15px;
+ border-width: 0 0 3px 0; border-color: #000000; border-style: solid;
+ margin: -15px -15px 0 -15px }
+
+ .FramedSearchResultsPage .IPageTitle {
+ margin-bottom: 15px;
+ }
+
+ .INavigationBar {
+ font-size: 10pt;
+ text-align: center;
+ background-color: #FFFFF0;
+ padding: 5px;
+ border-bottom: solid 1px black;
+ margin: 0 -15px 15px -15px;
+ }
+
+ .INavigationBar a {
+ font-weight: bold }
+
+ .IHeading {
+ font-size: 16pt; font-weight: bold;
+ padding: 2.5em 0 .5em 0;
+ text-align: center;
+ width: 3.5ex;
+ }
+ #IFirstHeading {
+ padding-top: 0;
+ }
+
+ .IEntry {
+ font-size: 10pt;
+ padding-left: 1ex;
+ }
+ .PopupSearchResultsPage .IEntry {
+ font-size: 8pt;
+ padding: 1px 5px;
+ }
+ .PopupSearchResultsPage .Opera9 .IEntry,
+ .FramedSearchResultsPage .Opera9 .IEntry {
+ text-align: left;
+ }
+ .FramedSearchResultsPage .IEntry {
+ padding: 0;
+ }
+
+ .ISubIndex {
+ padding-left: 3ex; padding-bottom: .5em }
+ .PopupSearchResultsPage .ISubIndex {
+ display: none;
+ }
+
+ /* While it may cause some entries to look like links when they aren't, I found it's much easier to read the
+ index if everything's the same color. */
+ .ISymbol {
+ font-weight: bold; color: #900000 }
+
+ .IndexPage .ISymbolPrefix,
+ .FramedIndexPage .ISymbolPrefix {
+ font-size: 10pt;
+ text-align: right;
+ color: #C47C7C;
+ background-color: #F8F8F8;
+ border-right: 3px solid #E0E0E0;
+ border-left: 1px solid #E0E0E0;
+ padding: 0 1px 0 2px;
+ }
+ .PopupSearchResultsPage .ISymbolPrefix,
+ .FramedSearchResultsPage .ISymbolPrefix {
+ color: #900000;
+ }
+ .PopupSearchResultsPage .ISymbolPrefix {
+ font-size: 8pt;
+ }
+
+ .IndexPage #IFirstSymbolPrefix,
+ .FramedIndexPage #IFirstSymbolPrefix {
+ border-top: 1px solid #E0E0E0;
+ }
+ .IndexPage #ILastSymbolPrefix,
+ .FramedIndexPage #ILastSymbolPrefix {
+ border-bottom: 1px solid #E0E0E0;
+ }
+ .IndexPage #IOnlySymbolPrefix,
+ .FramedIndexPage #IOnlySymbolPrefix {
+ border-top: 1px solid #E0E0E0;
+ border-bottom: 1px solid #E0E0E0;
+ }
+
+ a.IParent,
+ a.IFile {
+ display: block;
+ }
+
+ .PopupSearchResultsPage .SRStatus {
+ padding: 2px 5px;
+ font-size: 8pt;
+ font-style: italic;
+ }
+ .FramedSearchResultsPage .SRStatus {
+ font-size: 10pt;
+ font-style: italic;
+ }
+
+ .SRResult {
+ display: none;
+ }
+
+
+
+#Footer {
+ font-size: 8pt;
+ color: #989898;
+ text-align: right;
+ }
+
+#Footer p {
+ text-indent: 0;
+ margin-bottom: .5em;
+ }
+
+.ContentPage #Footer,
+.IndexPage #Footer {
+ text-align: right;
+ margin: 2px;
+ }
+
+.FramedMenuPage #Footer {
+ text-align: center;
+ margin: 5em 10px 10px 10px;
+ padding-top: 1em;
+ border-top: 1px solid #C8C8C8;
+ }
+
+ #Footer a:link,
+ #Footer a:hover,
+ #Footer a:visited { color: #989898 }
+ #Footer a:active { color: #A00000 }
+
diff --git a/wqflask/wqflask/static/packages/jqplot/docs/styles/2.css b/wqflask/wqflask/static/packages/jqplot/docs/styles/2.css
new file mode 100644
index 00000000..12117d4e
--- /dev/null
+++ b/wqflask/wqflask/static/packages/jqplot/docs/styles/2.css
@@ -0,0 +1,174 @@
+html, body {
+ height: 100%;
+}
+
+/*
+div.Firefox {
+ height: 100%;
+}
+*/
+
+.MTitle {
+ font-variant: normal;
+}
+
+.MLink {
+ font-style: normal;
+}
+
+.CBody {
+margin-left: 30px;
+margin-right: 30px;
+}
+
+p {
+ text-indent: 0;
+ margin-bottom: 1em;
+ }
+
+.CBody p {
+/*
+ padding-top: 4px;
+ padding-bottom: 4px;
+*/
+}
+
+#Menu {
+ margin-top: 94px;
+ border: 0px;
+}
+
+body.ContentPage {
+ background-image: url('../../images/background.jpg');
+ background-color: #818181;
+ background-position: left top;
+ background-repeat: repeat-x;
+}
+
+.MGroup a:link,
+.MGroup a:hover,
+.MGroup a:visited { color: #bfbfbf; margin-right: 10px }
+.MGroup a:active { color: #f58f07; margin-right: 10px }
+
+
+.MEntry a:link,
+.MEntry a:hover,
+.MEntry a:visited { color: #bfbfbf; margin-right: 0 }
+.MEntry a:active { color: #f58f07; margin-right: 0 }
+
+#Footer {
+ color: #bfbfbf;
+}
+
+#Footer a:link, #Footer a:hover, #Footer a:visited {
+ color: #5c93f0;
+}
+
+#MainTopic div.CTitle.logo {
+ color: #292929;
+ font-size: 0px;
+ font-style: normal;
+ font-weight: normal;
+ border-width: 0px;
+ padding: 0px;
+ margin: 0px;
+ background-position: left top;
+ background-repeat: no-repeat;
+ background-image: url('../../images/logo.jpg');
+ background-color: #292929;
+ height: 94px;
+ position: relative;
+
+}
+
+#MainTopic h1.CTitle a {
+ display: none;
+}
+
+
+#MainTopic div.CBody p:first-child {
+ margin-top: 24px;
+}
+
+.ContentPage #Content {
+ border: 0px;
+/* height: 100%; */
+}
+
+#IPageLogo {
+ width: 780px;
+ color: #292929;
+ font-style: normal;
+ font-weight: normal;
+ border-width: 0px;
+ padding: 0px;
+ margin: 0px;
+ background-position: left top;
+ background-repeat: no-repeat;
+ background-image: url('../../images/logo.jpg');
+ background-color: #292929;
+ height: 94px;
+ position: relative;
+ left: 27ex;
+}
+
+#Menu, #IPageLogo {
+ font-size: 9pt;
+}
+
+body.IndexPage {
+ background-image: url('../../images/background.jpg');
+}
+
+/*#IPageLogo:hover {
+ cursor: pointer;
+}*/
+
+.IPageTitle {
+ background-color:#FFFFF0;
+ color: #333333;
+ border: 0px;
+}
+
+
+
+div.nav {
+ position:relative;
+ top: 70px;
+ text-align: right;
+}
+
+a.nav span {
+ font-size: 11px;
+ position: relative;
+ bottom: 2px;
+}
+
+a.nav:visited {
+ text-decoration: none;
+ border: 0px;
+ color: #aaaaaa;
+}
+
+a.nav, a.nav:link {
+ border: 0px;
+ text-decoration: none;
+ font-family: Tahoma, "Helvetica Neue", "Trebuchet MS", Verdana, Arial, sans-serif;
+ font-size: 16px;
+ color: #aaaaaa;
+ margin-right: 11px;
+}
+
+a.nav:hover {
+ text-decoration: none;
+ border: 0px;
+ color: #E0771C;
+}
+
+a.nav:active {
+ text-decoration: none;
+ border: 0px;
+ color: #E0771C;
+}
+
+
diff --git a/wqflask/wqflask/static/packages/jqplot/docs/styles/main.css b/wqflask/wqflask/static/packages/jqplot/docs/styles/main.css
new file mode 100644
index 00000000..a672a949
--- /dev/null
+++ b/wqflask/wqflask/static/packages/jqplot/docs/styles/main.css
@@ -0,0 +1,2 @@
+@import URL("1.css");
+@import URL("2.css");
diff --git a/wqflask/wqflask/static/packages/jqplot/examples/KCPsample4.csv b/wqflask/wqflask/static/packages/jqplot/examples/KCPsample4.csv
new file mode 100644
index 00000000..453517b0
--- /dev/null
+++ b/wqflask/wqflask/static/packages/jqplot/examples/KCPsample4.csv
@@ -0,0 +1,25 @@
+Product or service,v01,v02,v03,v04,v05,v06,v07,v08,v09,v10,v11,v12,v13,v14,v15,v16,v17,v18,v19,v20
+Rice,15.8442,13.0993,11.2898,10.7892,10.252,9.0165,8.5287,7.7442,6.9867,6.5213,5.9473,5.4766,4.9214,4.6398,3.8935,3.5228,3.0128,2.4847,2.0357,1.0672
+Bread and other cereals,1.7703,2.2535,2.2753,2.7927,2.2509,2.4341,2.5518,2.5547,2.4204,2.4186,2.4261,2.2927,2.4386,2.2295,2.2203,1.915,1.8791,1.7941,1.6567,0.9296
+Meat,8.3728,8.1221,8.3989,7.9758,8.8246,8.2377,8.432,7.8466,7.5343,7.1171,6.9801,6.9349,5.8307,5.7089,4.927,4.2237,3.6872,3.1429,2.581,1.3766
+Fish and seafood,9.1249,8.7326,7.6122,7.8577,7.1625,6.8527,6.5158,6.1715,6.1298,5.8702,5.3456,4.9906,4.4424,4.3022,3.5298,3.405,2.9977,2.4159,2.0832,1.1499
+Fruits and vegetables,8.0508,7.7875,7.6534,7.4448,7.3702,7.4188,7.3882,7.1647,6.9617,6.6576,6.6077,6.4823,5.9117,5.8149,5.505,5.5355,5.0907,4.569,4.3049,2.6325
+Other food products,10.4408,9.8278,9.9293,9.5176,9.6658,9.2359,9.2842,8.6497,8.7656,8.2962,8.155,7.7294,7.3674,6.9888,6.2995,5.7314,5.2703,4.6947,3.9614,2.2509
+Catering services,4.1883,4.7514,5.3198,5.8819,5.1732,5.5764,6.1713,6.7915,6.8511,7.2681,7.1461,8.109,9.2649,9.5322,11.2138,12.8299,12.9621,13.8936,13.7828,10.0525
+Non-alcoholic beverages,0.6641,0.8454,0.9018,1.0461,1.0113,1.235,1.279,1.3049,1.5024,1.4471,1.5358,1.5796,1.6471,1.6443,1.6562,1.6763,1.6097,1.5039,1.3752,0.864
+Alcoholic beverages,0.5221,0.6997,0.8513,0.8849,0.9168,0.9099,0.8339,0.9921,1.1169,1.1764,1.1936,1.1415,1.1181,1.2889,1.1378,1.023,1.1283,1.0417,0.9839,0.587
+Tobacco and narcotics,1.0969,1.188,1.0713,1.2803,1.1787,1.148,1.3229,1.1726,1.3764,1.3887,1.4011,1.3034,1.4368,1.5017,1.4899,1.4123,1.3168,1.1407,0.8458,0.38
+Clothing and footwear,2.275,2.5511,3.1025,2.9834,3.2857,3.7625,3.1928,3.7071,4.0364,3.629,3.9258,3.2208,3.7113,3.3166,3.4775,3.429,3.6121,3.4569,3.8416,4.1323
+Rentals (actual or imputed) and maintenance and repair of the dwelling,16.0654,15.719,16.3773,16.0175,15.8853,16.132,16.1309,16.3491,15.8512,16.4743,16.2862,15.7327,16.2793,16.6329,17.4903,17.4425,17.3413,18.3527,18.5029,15.2763
+Water supply and miscellaneous services related to the dwelling,1.1145,1.176,1.1183,1.0411,1.0058,1.0796,1.0321,1.0714,1.1117,1.0278,1.136,1.1397,1.1556,1.2206,1.2871,1.2361,1.2111,1.2312,1.1545,0.7881
+Electricity gas and other fuels,4.5928,4.7558,4.8855,4.4684,4.6677,4.6038,4.7789,4.6098,4.4171,4.5078,4.4137,4.4645,4.2693,4.2836,4.1709,4.159,3.8423,3.9957,3.6816,2.5785
+Furnishing household equipment and routine household maintenance,2.1027,2.1576,2.0721,2.0623,2.3498,2.2573,2.2866,2.3766,2.2488,2.3665,2.3445,2.2474,2.3345,2.2479,2.158,2.355,2.0744,2.2269,3.0474,3.8925
+Health,1.2709,1.6007,1.3996,1.612,1.4649,1.5875,1.7056,1.7315,1.7378,2.0401,2.3265,2.1096,2.0513,2.1548,2.0634,2.2206,1.8427,2.4817,2.3066,2.1685
+Transport,4.6414,5.6167,5.9571,6.5372,7.0242,7.6332,7.9823,8.3906,9.112,9.6872,10.2014,11.0074,11.375,11.6753,12.0489,12.0692,13.2962,13.2183,14.6559,32.0912
+Communication,0.2334,0.3642,0.5267,0.5911,0.8888,1.1633,1.0997,1.76,1.9811,2.1708,2.931,3.2634,3.6254,4.107,4.6944,5.0941,5.9984,6.2419,6.6059,5.8353
+Recreation and culture,2.2553,2.8903,2.9564,3.2839,3.4822,3.255,3.1666,3.4245,3.4066,3.8536,3.6333,4.0331,4.4847,4.3552,4.2768,4.1439,4.7196,4.6585,4.4286,3.921
+Education,0.3437,0.3282,0.4805,0.3881,0.4796,0.9766,0.6589,0.6443,1.0423,0.7941,1.064,1.5504,1.3977,1.5226,1.8344,1.9186,2.3022,2.8188,2.8424,2.7792
+Personal care,3.4466,3.5641,3.5711,3.4219,3.2835,3.3569,3.3416,3.4544,3.3675,3.2806,3.118,3.1881,3.2252,3.0588,3.0051,2.9868,3.0361,2.8972,2.9611,2.2867
+Other miscellaneous goods and services,1.5831,1.9691,2.2498,2.122,2.3766,2.1273,2.3165,2.0884,2.0421,2.0067,1.8809,2.0027,1.7115,1.7734,1.6204,1.6702,1.769,1.7391,2.3607,2.9604
+Food and non-alcoholic beverages,58.4561,55.4196,53.3806,53.3059,51.7105,50.007,50.1509,48.2276,47.1521,45.5962,44.1436,43.5952,41.8242,40.8606,39.2451,38.8396,36.5095,34.4988,31.7809,20.3231
+Non food,41.5439,44.5804,46.6194,46.6941,48.2895,49.993,49.8491,51.7724,52.8479,54.4038,55.8564,56.4048,58.1758,59.1394,60.7549,61.1604,63.4905,65.5012,68.2191,79.6769
diff --git a/wqflask/wqflask/static/packages/jqplot/examples/ages.json b/wqflask/wqflask/static/packages/jqplot/examples/ages.json
new file mode 100644
index 00000000..86916187
--- /dev/null
+++ b/wqflask/wqflask/static/packages/jqplot/examples/ages.json
@@ -0,0 +1,5 @@
+[[1043353182,539695335,503657847,28.24,27.51,29.01,51.78],
+[0.0085318435343400800,0.0088774027062416400,0.0094714560875224100,0.0101640893891056000,0.0108249758696292000,0.0113773174183149000,0.0117954271696904000,0.0120868766491156000,0.0122726357410028000,0.0123620512208843000,0.0124092312631522000,0.0123929933989534000,0.0123170841477326000,0.0121788940682660000,0.0119848553256476000,0.0117367932349178000,0.0114334768233470000,0.0110840887113746000,0.0107005336950161000,0.0102889073661635000,0.0098746874267631800,0.0094727992165526500,0.0091066817836288100,0.0087853078056091400,0.0085176451289595700,0.0082955898249666400,0.0081021034227657000,0.0079410857437656400,0.0078129432771183200,0.0077041517746791700,0.0076076629996558600,0.0075063773837400400,0.0074212932416191700,0.0073577960797626100,0.0073199937766648000,0.0072872222696609900,0.0072249036551971000,0.0071436496521446000,0.0070535868312601700,0.0069442503777637000,0.0068032069975035000,0.0066093294501292200,0.0063936409488174700,0.0061768176372133200,0.0059737878831400300,0.0057724507581444500,0.0055456647375558400,0.0053139201135624000,0.0050952395722700100,0.0048873227886988200,0.0046839194356973000,0.0044709211871979300,0.0042683374557587400,0.0040886232834079100,0.0039394433696905200,0.0038097165950705600,0.0036797119436340500,0.0035595490798891500,0.0034559622921317600,0.0033586853733251200,0.0032515219944251700,0.0031141174480235800,0.0029601056879342400,0.0027997057390388600,0.0026388958299152400,0.0024706340765107900,0.0022829305753990900,0.0020900571013307600,0.0019037152224417700,0.0017251049256371200,0.0015499961243315000,0.0013709889555399900,0.0011982773790103000,0.0010401790931594200,0.0009015220565900700,0.0007812832602556460,0.0006749752626942340,0.0005833580512023270,0.0005061657847658260,0.0004399544894590220,0.0003808034210932470,0.0003273788998735520,0.0002794993115460400,0.0002369793671257210,0.0001995479850687680,0.0001668101805315270,0.0001383186716039340,0.0001138075253115040,0.0000929924552954457,0.0000755223736670678,0.0000610047525059652,0.0000490638302928227,0.0000396489252832302,0.0000330891826825378,0.0000281195284929135,0.0001070412478036410],
+[0.0071192629623232800,0.0072839317935624000,0.0075693293189514500,0.0079091875498352200,0.0082360857829773300,0.0084979038169712600,0.0086893986451354100,0.0088353986277422900,0.0089633895658643000,0.0090878796761182500,0.0092337667384807200,0.0093792123312149900,0.0095192745279032600,0.0096463104169553400,0.0097588790000607600,0.0098544841215461300,0.0099282199747865200,0.0099763812248601700,0.0099957597226035700,0.0099801585489242500,0.0099375446097938400,0.0098709094654945100,0.0097926096630396900,0.0097014318757340600,0.0095968423362564000,0.0094699215837397400,0.0093120985109391200,0.0091337644254482100,0.0089445678055607600,0.0087423328014590000,0.0085321350430430500,0.0083104164267343500,0.0081040369311665900,0.0079207770770160300,0.0077675098774536000,0.0076284130950824500,0.0074765938644635800,0.0073237591351693500,0.0071772210497332700,0.0070244435483804400,0.0068550745015274400,0.0066526057090785200,0.0064404461001358000,0.0062305720357510500,0.0060342707683446500,0.0058408705961082800,0.0056264339860478000,0.0054065565344313600,0.0051920462742280000,0.0049765895152515200,0.0047558832991186200,0.0045207003388048400,0.0042899070487080500,0.0040745089551306800,0.0038817655555785800,0.0037053224400247200,0.0035332134254902200,0.0033727187145046400,0.0032284905944481100,0.0030937679725170100,0.0029582187048090100,0.0028081834596732200,0.0026513461722362800,0.0024926069125082600,0.0023353006048059200,0.0021744630786167700,0.0020021420693961100,0.0018298895084829500,0.0016671380010344600,0.0015153637133401800,0.0013712248188900700,0.0012284616818527500,0.0010934572254154500,0.0009707133813897040,0.0008622603131043950,0.0007661899219731710,0.0006786114871838230,0.0006005435486257860,0.0005322956370150040,0.0004715229254612440,0.0004158721219136000,0.0003645948643149670,0.0003176904909297340,0.0002751152300590630,0.0002367021156783720,0.0002021700726755280,0.0001712214234345020,0.0001437557719387760,0.0001197138111336940,0.0000989925882290494,0.0000814263200020563,0.0000667991474109870,0.0000549164545704749,0.0000455518367647343,0.0000384480445034309,0.0001437755914949950],
+[1.284165231,1.3059697282,1.3408259576,1.3770498469,1.4083776842,1.4346340126,1.4545779876,1.4658887137,1.4671638972,1.457608962,1.4400548643,1.4158684686,1.3864911961,1.3528812542,1.3159697978,1.27622903,1.2340137083,1.1905291022,1.1471037258,1.1047013276,1.0647737249,1.0283340659,0.9964942039,0.9703629438,0.9510519527,0.9386721807,0.932316307,0.9316292996,0.9359838821,0.9443012277,0.9554470086,0.9678781103,0.9812761433,0.9953894103,1.0098153246,1.0236249732,1.035479081,1.0451994053,1.0530930686,1.0593183708,1.0634438538,1.0645809137,1.0637641578,1.0623066923,1.0608111193,1.0589993944,1.0561690641,1.0531914677,1.0515722425,1.052330754,1.0553372965,1.0597522653,1.0661637808,1.0752634417,1.0874733411,1.1017415355,1.1159815378,1.1309096828,1.1470504754,1.1633078085,1.1777943775,1.1882903501,1.1963378464,1.2035708256,1.2108560457,1.2175013424,1.2218302494,1.2239011525,1.223611334,1.2198647763,1.2112533925,1.1958739376,1.1742717733,1.1482333683,1.1203430352,1.0926602484,1.0658097999,1.040887396,1.0189501507,0.9998112064,0.9811922123,0.9621730704,0.9427349027,0.9230154312,0.903354613,0.8841353287,0.8656369091,0.8483181293,0.8323701879,0.8174967062,0.8028084248,0.7870522949,0.7736454722,0.7783827557,0.7836945697,0.7977724963],
+[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,"95+", ""]]
\ No newline at end of file
diff --git a/wqflask/wqflask/static/packages/jqplot/examples/ajax-loader.gif b/wqflask/wqflask/static/packages/jqplot/examples/ajax-loader.gif
new file mode 100644
index 00000000..3288d103
Binary files /dev/null and b/wqflask/wqflask/static/packages/jqplot/examples/ajax-loader.gif differ
diff --git a/wqflask/wqflask/static/packages/jqplot/examples/area.html b/wqflask/wqflask/static/packages/jqplot/examples/area.html
new file mode 100644
index 00000000..2aa52884
--- /dev/null
+++ b/wqflask/wqflask/static/packages/jqplot/examples/area.html
@@ -0,0 +1,229 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/wqflask/wqflask/static/packages/jqplot/examples/axisLabelTests.html b/wqflask/wqflask/static/packages/jqplot/examples/axisLabelTests.html
new file mode 100644
index 00000000..88d3fbb4
--- /dev/null
+++ b/wqflask/wqflask/static/packages/jqplot/examples/axisLabelTests.html
@@ -0,0 +1,157 @@
+
+
+
+
+
+ Area charts support highlighting and mouse events by default. The options and handlers and callbacks are essentially the same as with bar, pie, donut and funnel charts. One notable exception for area charts is that no data point index will be provided to the callback and the entire data set for the highlighted area will be returned. This is because the area is not associated with one particular data point, but with the entire data set of the series.
+ +Moused Over: Nothing
+
+
+
+For the chart below, mouseover has been disabled and click handling is enabled by setting "highlightMouseDown: true". For "fillToZero" area charts that have both negative and positive values as shown below, clicking in either the positive of negative regions will generate the same result.
+ +You Clicked: Nothing yet
+
+
+
+
+
+I'm a tooltip.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/wqflask/wqflask/static/packages/jqplot/examples/axisLabelsRotatedText.html b/wqflask/wqflask/static/packages/jqplot/examples/axisLabelsRotatedText.html
new file mode 100644
index 00000000..5f886ecc
--- /dev/null
+++ b/wqflask/wqflask/static/packages/jqplot/examples/axisLabelsRotatedText.html
@@ -0,0 +1,229 @@
+
+
+
+
+
+ jqPlot support axis labels through the "label" option of each axis. The default label renderer creates labels in div tags, which allows full css control over every label. Labels are assigned css classes like "jqplot-axis_name-label" where "axis_name" will be xaxis, yaxis, etc.
+ + + + + + +By including the "jqplot.canvasTextRenderer.min.js" and "jqplot.canvasAxisLabelRenderer.min.js" plugins, you can render label text directly onto canvas elements. This allows text to be rotated and yaxes will have their labels rotated 90 degrees by default. By default the labels will be rendered using the Hershey font metrics and not stroked as text. Most recent browsers (include IE 9) support native text rendering in canvas elements.
+ + + + + + +If a visitors is using a browser suppporting native canvas fonts, the plot belowsupported browser, they will see the labels in the plot below rendered as 12 pt Georgia (or their system serif font if Georgia is unavailable). If they are on an unsupported browser, they will see the default Hershey font.
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/wqflask/wqflask/static/packages/jqplot/examples/axisScalingForceTickAt.html b/wqflask/wqflask/static/packages/jqplot/examples/axisScalingForceTickAt.html
new file mode 100644
index 00000000..f9b8056b
--- /dev/null
+++ b/wqflask/wqflask/static/packages/jqplot/examples/axisScalingForceTickAt.html
@@ -0,0 +1,242 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/wqflask/wqflask/static/packages/jqplot/examples/bandedLine.html b/wqflask/wqflask/static/packages/jqplot/examples/bandedLine.html
new file mode 100644
index 00000000..1da1926c
--- /dev/null
+++ b/wqflask/wqflask/static/packages/jqplot/examples/bandedLine.html
@@ -0,0 +1,310 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/wqflask/wqflask/static/packages/jqplot/examples/bar-charts.html b/wqflask/wqflask/static/packages/jqplot/examples/bar-charts.html
new file mode 100644
index 00000000..67e9dcca
--- /dev/null
+++ b/wqflask/wqflask/static/packages/jqplot/examples/bar-charts.html
@@ -0,0 +1,219 @@
+
+
+
+
+
+ Bands (like confidence intervals or error bands) can be added to line charts through the "bands" option of the line renderer. The band data can be automatically computed or manually assigned. If assigned manually, the simpliest approach is to set the "rendererOptions: { bandData: [] }" array on the series. Note that band data is taken into account when axes scale themselves so bands will not get clipped.
+ + +Band data can be supplied as arrays of [x,y] values. One array for the upper band line and one for the lower band line.
+ + + + + +The number of points in the band data arrays does not have to correspond to the number of points in the data series. Also, band data will be drawn as smoothed lines if the data series is smoothed.
+ + + + +In this example, band data is supplied as an array of arrays of y values for the low and hi bands. X values for the bands are taken from the x values of the series. The band data is of the form: [ [y low 1, y hi 1], [y low 2, y hi 2], ... ] and there must be a corresponding array of low/hi y values for each x value in the data series.
+ + + + +The band data can also be supplied as an array of [low y values], [hi y values]. In this case there must also be an equal number of low y values and hi y values as there are data points in the series. X values for the low and hi bands will be taken from the series data. Additionally, the order of low/hi values does not matter as long as they are consistent. jqPlot will figure out which is the low values and which are the high values.
+ + + + +Band data does not have to be provided. By default, jqPlot will compute +/- 3% band intervals if the "rendererOptions: { bands: { show: true } }" option is set. The band intervals can be customized as well through the "rendererOptions: { bands: { interval: [number|string|arry] } }" option. Valid intervals are:
+ +-
+
- '1.7' - will add bands at y +/- 1.7 above and below the line. +
- '10%' - will compute +/- 10% interval bands. +
- [3, '-10%'] - will add bands at y + 3 and y - 10% above and below the line. +
Examples of such interval specifications are shown below:
+ + + + + + + + + +You can also customize the fill color of the bands and turn on/off band lines. By default, bands respond to the mouse over event, but they can be set to respond to mouse down as well.
+ + + +Note, the plots on this page all extend the following pre-defined theme:
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/wqflask/wqflask/static/packages/jqplot/examples/barLineAnimated.html b/wqflask/wqflask/static/packages/jqplot/examples/barLineAnimated.html
new file mode 100644
index 00000000..7f485242
--- /dev/null
+++ b/wqflask/wqflask/static/packages/jqplot/examples/barLineAnimated.html
@@ -0,0 +1,165 @@
+
+
+
+
+
+ Click on a bar in the plot below to update the text box.
+You Clicked: + Nothing yet. +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/wqflask/wqflask/static/packages/jqplot/examples/barTest.html b/wqflask/wqflask/static/packages/jqplot/examples/barTest.html
new file mode 100644
index 00000000..f28ad688
--- /dev/null
+++ b/wqflask/wqflask/static/packages/jqplot/examples/barTest.html
@@ -0,0 +1,299 @@
+
+
+
+
+
+ This plot animates the bars bottom to top and the line series left to right upon initial page load. Since the animateReplot: true option is set, the bars and line will also animate upon calls to plot1.replot( { resetAxes: true } ).
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/wqflask/wqflask/static/packages/jqplot/examples/bezierCurve.html b/wqflask/wqflask/static/packages/jqplot/examples/bezierCurve.html
new file mode 100644
index 00000000..4741fb57
--- /dev/null
+++ b/wqflask/wqflask/static/packages/jqplot/examples/bezierCurve.html
@@ -0,0 +1,125 @@
+
+
+
+
+
+ Below is a default bar plot. Bars will highlight on mouseover. Events are triggered when you mouseover a bar and also when you click on a bar. Here We capture the 'jqplotDataClick' event and display the clicked series index, point index and data values. When series data is assigned as a 1-dimensional array as in this example, jqPlot automatically converts it into a 2-dimensional array for plotting. So a series defined as [2, 6, 7, 10] will become [[1,2], [2,6], [3,7], [4,10]].
+ +
You Clicked: Nothing yet
+
+
+
+
+ The plot target also fires a 'jqplotDataMouseOver' when the cursor is moused over a bar even if highlighting is turned off. This event will fire continuously as the user mouses over the bar. 'jqplotDataHighlight' fires only once when the user first passes over the bar. Additionally, a 'jqplotDataUnhighlight' event is fired when the user moves out of a bar (if highlighting is enabled).
+ +
Moused Over: Nothing
+
+
+
+
+ Moused Over: Nothing
+ Clicked: Nothing
+
+
+
+
+ The next example has the plot's 'captureRightClick' option set to true. This causes the plot to fire a 'jqplotRightClick' event the the user clicks the right mouse button over a bar. Here, the 'highlightMouseDown' option is also set to true. This will highlight a slice on mouse down instead of on move over. Highlighting will occur for either left or right click.
+ +You Right Clicked: Nothing yet
+
+
+
+
+
+
+
+
+
+
+A pie chart is added to test for incompatibilities.
+ + + +The nex example shows the placement of point labels on negative bars. They shou be placed on the opposite position. That is, if it is placed 'north' to the positive bars, then it should be placed 'south' to the negative bars.
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/wqflask/wqflask/static/packages/jqplot/examples/blockPlot.html b/wqflask/wqflask/static/packages/jqplot/examples/blockPlot.html
new file mode 100644
index 00000000..cfbe68bd
--- /dev/null
+++ b/wqflask/wqflask/static/packages/jqplot/examples/blockPlot.html
@@ -0,0 +1,199 @@
+
+
+
+
+
+ The Bezier curve renderer can distinguish between two different input data formats. This first example has the data passed in as 2 data points, the second one defining the Bezier curve to the end point. With this format, non-default axes renderers will require specifying the minimum and maximum on the axes.
++ [[xstart, ystart], [cp1x, cp1y, cp2x, cp2y, xend, yend]]; ++ +
This second example has the data broken out into 4 points, which will be assembled to define the Bezier Curve. With this format, any axes renderer can be used without explicitly specifying the minimum and maximum.
++ [[xstart, ystart], [cp1x, cp1y], [cp2x, cp2y], [xend, yend]]; ++ +
Here is an example using a date axis renderer with Bezier curves. The data looks like:
++ [['01/01/2010', 6], ['02/01/2010', 9], ['03/01/2010', 8], ['04/01/2010', 3]] ++ + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/wqflask/wqflask/static/packages/jqplot/examples/bubble-plots.html b/wqflask/wqflask/static/packages/jqplot/examples/bubble-plots.html
new file mode 100644
index 00000000..d210b98e
--- /dev/null
+++ b/wqflask/wqflask/static/packages/jqplot/examples/bubble-plots.html
@@ -0,0 +1,213 @@
+
+
+
+
+
+ Below is an example block plot. This plot also uses the Enhanced Legend Renderer plugin. Clicking on an item in the legend will toggle display of the appropriate series.
+ + + +Blocks can be moved by selecting the series, the point, and an optional duration parameter. If specified, duration will animate the movement. Duration is either a number in milliseconds, or the keywords 'fast' or 'slow'. Higher numbers will cause a slower animation.
+ Series: + Point: + Duration: + X: + Y: + + + + +This second chart is like the first except the "varyBlockColors" renderer option is set to true. This will vary the color of each block in a series separately. This allows displaying a third dimension to the data such as grouping beverage products by producer and by category such as "cola", "tea", "energy drink", etc.
+ +Also, the legend has it's "showSwathces" option set to false, since the blocks of each series will be of varying color and won't correspond to one swatch color. This still enables the user to show and hide the series by clicking on a label in the legend.
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/wqflask/wqflask/static/packages/jqplot/examples/bubbleChart.html b/wqflask/wqflask/static/packages/jqplot/examples/bubbleChart.html
new file mode 100644
index 00000000..628d9066
--- /dev/null
+++ b/wqflask/wqflask/static/packages/jqplot/examples/bubbleChart.html
@@ -0,0 +1,264 @@
+
+
+
+
+
+ Bubble charts represent 3 dimensional data. First, a basic bubble chart with the "bubbleGradients: true" option to specify gradient fills. Radial gradients are not supported in IE version before IE 9 and will be automatically disabled.
+ + + + + + +Data is passed in to a bubble chart as a series of [x, y, radius, <label or object>]. The optional fourth element of the data point can either be either a label string or an object having 'label' and/or 'color' properties to assign to the bubble.
+ +By default, all bubbles are scaled according to the size of the plot area. The radius value in the data point will be adjusted to fit the bubbles in the chart. If the "autoscaleBubbles" option is set to false, the radius value in the data will be taken as a literal pixel value for the radius of the points.
+ +Next are some basic customizations of bubble appearance with the "bubbleAlpha" and "highlightAlpha" options.
+ + + + + + +In the following example, display of a custom toolip and highlighting of a custom table legend is performed by binding to the "jqplotDataHighlight" and "jqplotDataUnhighlight" events. The custom legend table here is dynamically created with a few lines of jQuery (O.K., it could be done in one line) based on the data array of the plot.
+ + + +| + |
|
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/wqflask/wqflask/static/packages/jqplot/examples/candlestick-charts.html b/wqflask/wqflask/static/packages/jqplot/examples/candlestick-charts.html
new file mode 100644
index 00000000..c0262e34
--- /dev/null
+++ b/wqflask/wqflask/static/packages/jqplot/examples/candlestick-charts.html
@@ -0,0 +1,209 @@
+
+
+
+
+
+ Bubble charts represent 3 dimensional data. Data is passed in to a bubble chart as a series of [x, y, radius, <label or object>]. The optional fourth element of the data point can either be either a label string or an object having 'label' and/or 'color' properties to assign to the bubble.
+ +By default, all bubbles are scaled according to the size of the plot area. The radius value in the data point will be adjusted to fit the bubbles in the chart. If the "autoscaleBubbles" option is set to false, the radius value in the data will be taken as a literal pixel value for the radius of the points.
+ +The below chart show basic customization of bubble appearance with the "bubbleAlpha" and "highlightAlpha" options.
+ + + + + + +| + |
|
+
Below is a basic bubble chart showing usage of the optional label and color properties passed in with the data.
+ + + + +The next chart uses the "bubbleGradients: true" option to specify gradient fills on the bubbles. Radial gradients are not supported in IE* and will be automatically disabled.
+ + + +*Radial gradients are not supported in IE 7 and IE 8 because they are not supported in the excanvas emulation layer used by jqPlot to render charts in IE 7 and IE 8. jqPlot renders charts using the HTML canvas element which is supported by nearly every browser including IE 9. Excanvas translates the canvas rendering to VML rendering for IE 7 and 8, but unfortunately does not properly handle radial gradients.
+ + + +The following bubble chart shows the "autoscalePointsFactor" and "autoscaleMultiplier" options which can be used to control bubble scaling. The "autoscalePointsFactor" options controls bubble scaling with the number of points on the plot. A negative value will decrease bubble size and number of bubbles increases. The "autoscaleMultiplier" will makes all bubbles larger or smaller for values greater or less than 1.0.
+ +This chart also demonstrates some of the highlighting options. Bubble highlighting is controlled with the "highlightMouseOver" and "highlightMouseDown" boolean options. Here the "highlightMouseDown: true" option is set which causes the plot to highlight on mousedown (click). This automatically sets the "highlightMouseOver" option to false.
+ +Events are also trigger with plot interaction. Specifically, "jqplotDataHighlight", "jqplotDataUnhighlight", "jqplotDataClick" and "jqplotDataRightClick" events are triggered. Handlers are passed an event object, the series index, the point index, and the bubble data.
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/wqflask/wqflask/static/packages/jqplot/examples/candlestick.html b/wqflask/wqflask/static/packages/jqplot/examples/candlestick.html
new file mode 100644
index 00000000..b213d6ec
--- /dev/null
+++ b/wqflask/wqflask/static/packages/jqplot/examples/candlestick.html
@@ -0,0 +1,322 @@
+
+
+
+
+
+ OHLC, HLC and Candlestick charts are all created using the $.jqplot.OHLCRenderer plugin. The plots on this page make use of the highlighter plugin which shows a customized tooltip as the mouse moves over a data point.
+ + + + + + + + +The previous plots use the following data set. jqPlot will parse most human readable date formats. It is always safest, however, to pass a date in as a JavaScript timestamp rather than have jqPlot parse an arbitrary date string.
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/wqflask/wqflask/static/packages/jqplot/examples/canvas-overlay.html b/wqflask/wqflask/static/packages/jqplot/examples/canvas-overlay.html
new file mode 100644
index 00000000..c1ff2f00
--- /dev/null
+++ b/wqflask/wqflask/static/packages/jqplot/examples/canvas-overlay.html
@@ -0,0 +1,231 @@
+
+
+
+
+
+ The examples on this page use the folowing code:
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/wqflask/wqflask/static/packages/jqplot/examples/colorpicker/README b/wqflask/wqflask/static/packages/jqplot/examples/colorpicker/README
new file mode 100644
index 00000000..a0a0cc5a
--- /dev/null
+++ b/wqflask/wqflask/static/packages/jqplot/examples/colorpicker/README
@@ -0,0 +1,140 @@
+jQuery.colorpicker v0.6
+
+Copyright (c) 2011 Martijn W. van der Lee
+Licensed under the MIT.
+
+Full-featured colorpicker for jQueryUI with full theming support.
+Most images from jPicker by Christopher T. Tillman.
+Sourcecode created from scratch by Martijn W. van der Lee.
+
+IE support; make sure you have a doctype defined, or the colorpicker will not display correctly.
+
+Options:
+ alpha: false
+ Whether or not to show the inputs for alpha.
+
+ altAlpha: true
+ Change the opacity of the altField element(s) according to the alpha
+ setting.
+
+ altField: ''
+ Change the background color of the elements specified in this element.
+
+ altOnChange: true
+ If true, the altField element(s) are updated on every change, otherwise
+ only upon closing.
+
+ altProperties: 'background-color'
+ Comma-separated list of CSS properties to set color of in the altField.
+ The following properties are allowed, all others are ignored.
+ background-color
+ color
+ border-color
+ outline-color
+
+ autoOpen: false
+ If true, the dialog opens automatically upon page load.
+
+ buttonColorize: false
+ If a buttonimage is specified, change the background color of the
+ image when the color is changed.
+
+ buttonImage: 'images/ui-colorpicker.png'
+ Same as jQueryUI DatePicker.
+
+ buttonImageOnly: false
+ Same as jQueryUI DatePicker.
+
+ buttonText: 'Color'
+ Same as jQueryUI DatePicker.
+
+ closeOnOutside: true
+ Close the window when clicking outside the colorpicker display.
+
+ color: '#00FF00'
+ Initial color. Formats recognized are:
+ #rrggbb
+ rrggbb (same as previous, but without the #)
+ rgb(rrr,ggg,bbb)
+ rgba(rrr,ggg,bbb,a.a)
+ rgb(rrr%,ggg%,bbb%)
+ rgba(rrr%,ggg%,bbb%,aaa%)
+ w3c-defined color name
+
+ duration: 'fast'
+ Same as jQueryUI DatePicker.
+
+ hsv: true
+ Whether or not to show the inputs for HSV.
+
+ layout: { ... }
+ Set the position of elements in a table layout.
+ You could create any layout possible with HTML tables by specifying cell
+ position and size of each part.
+ @todo document how this works.
+
+ limit: ''
+ Limit the selectable colors to any of the predefined limits:
+ '' No limitations, allow 8bpp color for a palette of all
+ 16 million colors.
+ 'websafe' Set of 216 colors composed of 00, 33, 66, 99, cc and ff
+ color channel values in #rrggbb.
+ 'nibble' 4 bits per color, can be easily converted to #rgb format.
+ The palette is limited to 4096 colors.
+ 'binary' Allow only #00 or #ff as color channel values for primary
+ colors only; only 8 colors are available with this limit.
+
+ mode: 'h'
+ Determines the functionality of the map and bar components. Allowed values
+ are; 'h', 's', 'l', 'r', 'g', 'b' or 'a', for hue, saturation, luminosity,
+ red, green, blue and alpha respectively.
+
+ parts: ''
+ Determine which parts to display.
+ Use any of the preset names ('full', 'popup' or 'inline') or specify
+ an array of part names (i.e. ['header', 'map', 'bar', 'hex', 'inputs',
+ 'preview', 'swatches', 'footer']). If an empty string is given, the parts
+ will be automatically chosen as preset 'popup' or 'inline' depending on
+ the context in which the colorpicker is used.
+
+ rgb: true, // Show RGB controls and modes
+ Whether or not to show the inputs for RGB.
+
+ showAnim: 'fadeIn'
+ Same as jQueryUI DatePicker.
+
+ showOn: 'focus'
+ Same as jQueryUI DatePicker.
+
+ showOptions: {}
+ Same as jQueryUI DatePicker.
+
+ swatches: null
+ 'null' to show swatches of HTML colors or provide your own object
+ with colornames and [r,g,b] array.
+ For example { 'red': [ 255, 0, 0 ], 'blue': [0, 0, 255] }
+
+ title: 'Pick a color'
+ Title to display in the header.
+
+Events:
+ onClose: null
+ Triggered when the popup is closed.
+
+ onSelect: null
+ Triggered on each change, confirmation (click on OK button) and
+ cancellation (click on Cancel, outside window or window close button)
+ respectively.
+ Note that onSelect may be triggered in rapid succession when dragging the
+ mouse accross the map or bar and may be triggered without a change in color
+ upon specific user interactions.
+
+Methods:
+ open
+ Open the dialog
+
+ close
+ Close the dialog
+
+ destroy
+ Destroy the widget
\ No newline at end of file
diff --git a/wqflask/wqflask/static/packages/jqplot/examples/colorpicker/TODO b/wqflask/wqflask/static/packages/jqplot/examples/colorpicker/TODO
new file mode 100644
index 00000000..acc10df3
--- /dev/null
+++ b/wqflask/wqflask/static/packages/jqplot/examples/colorpicker/TODO
@@ -0,0 +1,14 @@
+Make simple blog page + demo
+
+Post to...
+ http://wiki.jqueryui.com/w/page/12137750/ColorPicker
+ - screenshot
+ - link(s)
+ - check specs/requirements and add/fix them
+
+Colorwheel
+Triangle/wheel
+Related-colors swatching
+Configurable swatch layout
+ container-width/height, swatch-width/height
+ Autoscaling (table?)
\ No newline at end of file
diff --git a/wqflask/wqflask/static/packages/jqplot/examples/colorpicker/images/bar-alpha.png b/wqflask/wqflask/static/packages/jqplot/examples/colorpicker/images/bar-alpha.png
new file mode 100644
index 00000000..2950daeb
Binary files /dev/null and b/wqflask/wqflask/static/packages/jqplot/examples/colorpicker/images/bar-alpha.png differ
diff --git a/wqflask/wqflask/static/packages/jqplot/examples/colorpicker/images/bar-opacity.png b/wqflask/wqflask/static/packages/jqplot/examples/colorpicker/images/bar-opacity.png
new file mode 100644
index 00000000..e42ad081
Binary files /dev/null and b/wqflask/wqflask/static/packages/jqplot/examples/colorpicker/images/bar-opacity.png differ
diff --git a/wqflask/wqflask/static/packages/jqplot/examples/colorpicker/images/bar-pointer.png b/wqflask/wqflask/static/packages/jqplot/examples/colorpicker/images/bar-pointer.png
new file mode 100644
index 00000000..6e980cfa
Binary files /dev/null and b/wqflask/wqflask/static/packages/jqplot/examples/colorpicker/images/bar-pointer.png differ
diff --git a/wqflask/wqflask/static/packages/jqplot/examples/colorpicker/images/bar.png b/wqflask/wqflask/static/packages/jqplot/examples/colorpicker/images/bar.png
new file mode 100644
index 00000000..80eb2bbe
Binary files /dev/null and b/wqflask/wqflask/static/packages/jqplot/examples/colorpicker/images/bar.png differ
diff --git a/wqflask/wqflask/static/packages/jqplot/examples/colorpicker/images/map-opacity.png b/wqflask/wqflask/static/packages/jqplot/examples/colorpicker/images/map-opacity.png
new file mode 100644
index 00000000..6756cee6
Binary files /dev/null and b/wqflask/wqflask/static/packages/jqplot/examples/colorpicker/images/map-opacity.png differ
diff --git a/wqflask/wqflask/static/packages/jqplot/examples/colorpicker/images/map-pointer.png b/wqflask/wqflask/static/packages/jqplot/examples/colorpicker/images/map-pointer.png
new file mode 100644
index 00000000..64992968
Binary files /dev/null and b/wqflask/wqflask/static/packages/jqplot/examples/colorpicker/images/map-pointer.png differ
diff --git a/wqflask/wqflask/static/packages/jqplot/examples/colorpicker/images/map.png b/wqflask/wqflask/static/packages/jqplot/examples/colorpicker/images/map.png
new file mode 100644
index 00000000..853d38c6
Binary files /dev/null and b/wqflask/wqflask/static/packages/jqplot/examples/colorpicker/images/map.png differ
diff --git a/wqflask/wqflask/static/packages/jqplot/examples/colorpicker/images/preview-opacity.png b/wqflask/wqflask/static/packages/jqplot/examples/colorpicker/images/preview-opacity.png
new file mode 100644
index 00000000..0dd9a2f8
Binary files /dev/null and b/wqflask/wqflask/static/packages/jqplot/examples/colorpicker/images/preview-opacity.png differ
diff --git a/wqflask/wqflask/static/packages/jqplot/examples/colorpicker/images/ui-colorpicker.png b/wqflask/wqflask/static/packages/jqplot/examples/colorpicker/images/ui-colorpicker.png
new file mode 100644
index 00000000..e244c689
Binary files /dev/null and b/wqflask/wqflask/static/packages/jqplot/examples/colorpicker/images/ui-colorpicker.png differ
diff --git a/wqflask/wqflask/static/packages/jqplot/examples/colorpicker/index.html b/wqflask/wqflask/static/packages/jqplot/examples/colorpicker/index.html
new file mode 100644
index 00000000..a3f14211
--- /dev/null
+++ b/wqflask/wqflask/static/packages/jqplot/examples/colorpicker/index.html
@@ -0,0 +1,85 @@
+
+
+
+
+
+
+ Text
+ + + Inline: + +
+ + Activated by buttons: +
+
+
+ + diff --git a/wqflask/wqflask/static/packages/jqplot/examples/colorpicker/jquery.colorpicker.css b/wqflask/wqflask/static/packages/jqplot/examples/colorpicker/jquery.colorpicker.css new file mode 100644 index 00000000..4e61a526 --- /dev/null +++ b/wqflask/wqflask/static/packages/jqplot/examples/colorpicker/jquery.colorpicker.css @@ -0,0 +1,129 @@ +.ui-colorpicker { + display: inline-block; + width: auto; +} + +.ui-colorpicker-inline { + position: static; +} + +.ui-colorpicker .ui-colorpicker-buttonpane { background-image: none; margin: .7em 0 0 0; padding:0 .2em; border-left: 0; border-right: 0; border-bottom: 0; } +.ui-colorpicker .ui-colorpicker-buttonpane button { float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width:auto; overflow:visible; } +.ui-colorpicker .ui-colorpicker-buttonpane button.ui-colorpicker-current { float:left; } + +.ui-colorpicker table { + font-size: 100%; /* Reset browser table font-size */ + margin: 0; +} + +.ui-colorpicker table td { + vertical-align: top; +} + +.ui-colorpicker-padding-left { + padding-left: 10px; +} +.ui-colorpicker-padding-top { + padding-top: 10px; +} + +.ui-colorpicker-border { + border: 1px inset; + display: inline-block; +} + +/* Bar & map */ +#ui-colorpicker-map > *, +#ui-colorpicker-bar > * { + position: absolute; + cursor: crosshair; +} + +#ui-colorpicker-map-pointer, +#ui-colorpicker-bar-pointer { + position: absolute; +} +/* Map */ +#ui-colorpicker-map, +#ui-colorpicker-map > * { + display: block; + width: 256px; + height: 256px; + overflow: hidden; +} + +#ui-colorpicker-map-layer-1, +#ui-colorpicker-map-layer-2 { background: url(images/map.png) no-repeat; } +#ui-colorpicker-map-layer-alpha { background: url(images/map-opacity.png); } +#ui-colorpicker-map-pointer { display: inline-block; width: 15px; height: 15px; background: url(images/map-pointer.png) no-repeat; } + + +/* Bar */ +#ui-colorpicker-bar, +#ui-colorpicker-bar > * { + display: block; + width: 20px; + height: 256px; + overflow: hidden; + background-repeat: repeat-x; +} + +#ui-colorpicker-bar-layer-1, +#ui-colorpicker-bar-layer-2, +#ui-colorpicker-bar-layer-3, +#ui-colorpicker-bar-layer-4 { background: url(images/bar.png) repeat-x; } +#ui-colorpicker-bar-layer-alpha { background: url(images/bar-opacity.png); } +#ui-colorpicker-bar-layer-alphabar { background: url(images/bar-alpha.png); } +#ui-colorpicker-bar-pointer { display: inline-block; width: 20px; height: 7px; background: url(images/bar-pointer.png) no-repeat; } + +/* Preview */ +#ui-colorpicker-preview { + text-align: center; +} + +#ui-colorpicker-preview-initial { + cursor: pointer; +} + +#ui-colorpicker-preview-initial, +#ui-colorpicker-preview-current { + width: 50px; + height: 20px; + display: inline-block; +} + +#ui-colorpicker-preview-initial-alpha, +#ui-colorpicker-preview-current-alpha { + width: 50px; + height: 20px; + display: inline-block; + background: url(images/preview-opacity.png) repeat; +} + +/* Inputs */ +#ui-colorpicker-inputs label { + width: 1.5em; + display: inline-block; +} + +/* Hex */ +#ui-colorpicker-hex { + text-align: center; +} + +/* Swatches */ +#ui-colorpicker-swatches { + width: 84px; + height: 256px; + overflow: auto; + background-color: #f8f8f8; +} + +.ui-colorpicker-swatch { + cursor: pointer; + float: left; + width: 11px; + height: 11px; + border-right: 1px solid black; + border-bottom: 1px solid black; +} diff --git a/wqflask/wqflask/static/packages/jqplot/examples/colorpicker/jquery.colorpicker.js b/wqflask/wqflask/static/packages/jqplot/examples/colorpicker/jquery.colorpicker.js new file mode 100644 index 00000000..6ad9a564 --- /dev/null +++ b/wqflask/wqflask/static/packages/jqplot/examples/colorpicker/jquery.colorpicker.js @@ -0,0 +1,1654 @@ +/*jslint devel: true, bitwise: true, regexp: true, browser: true, confusion: true, unparam: true, eqeq: true, white: true, nomen: true, plusplus: true, maxerr: 50, indent: 4 */ +/*globals jQuery */ + +/* + * ColorPicker v0.6 + * + * Copyright (c) 2011 Martijn W. van der Lee + * Licensed under the MIT. + * + * Full-featured colorpicker for jQueryUI with full theming support. + * Most images from jPicker by Christopher T. Tillman. + * Sourcecode created from scratch by Martijn W. van der Lee. + * + * @todo Custom buttons ->none" -> special "none" state? + * @todo Undo/redo memory? + * @todo Small size variant (128x128) + * @todo Distance between rgb/hsv/a options + * @todo Force hex correction (limit and padding) upon done + * @todo if limit, correct initial color upon open + * @todo Shared swatches; cookies/session/global + * @todo Language files: Done/Color/Pick a color/H/S/V/R/G/B/A/color swatches + * @todo isRTL? What to RTL, besides button? + * @todo Implement 'disabled' option + * @todo Include header/footer in layout? + * @todo Split inputs into rgb/hsv/a parts + * @todo Modal popup mode + */ + +(function ($) { + "use strict"; + + var _container_popup = '', + + _container_inline = '', + + _parts_lists = { + 'full': ['header', 'map', 'bar', 'hex', 'inputs', 'preview', 'swatches', 'footer'], + 'popup': ['map', 'bar', 'hex', 'inputs', 'preview', 'footer'], + 'inline': ['map', 'bar', 'hex', 'inputs', 'preview'] + }, + + _colors = { + 'Black': [0x00, 0x00, 0x00], + 'DimGray': [0x69, 0x69, 0x69], + 'Gray': [0x80, 0x80, 0x80], + 'DarkGray': [0xA9, 0xA9, 0xA9], + 'Silver': [0xC0, 0xC0, 0xC0], + 'LightGrey': [0xD3, 0xD3, 0xD3], + 'Gainsboro': [0xDC, 0xDC, 0xDC], + 'WhiteSmoke': [0xF5, 0xF5, 0xF5], + 'White': [0xFF, 0xFF, 0xFF], + 'RosyBrown': [0xBC, 0x8F, 0x8F], + 'IndianRed': [0xCD, 0x5C, 0x5C], + 'Brown': [0xA5, 0x2A, 0x2A], + 'FireBrick': [0xB2, 0x22, 0x22], + 'LightCoral': [0xF0, 0x80, 0x80], + 'Maroon': [0x80, 0x00, 0x00], + 'DarkRed': [0x8B, 0x00, 0x00], + 'Red': [0xFF, 0x00, 0x00], + 'Snow': [0xFF, 0xFA, 0xFA], + 'Salmon': [0xFA, 0x80, 0x72], + 'MistyRose': [0xFF, 0xE4, 0xE1], + 'Tomato': [0xFF, 0x63, 0x47], + 'DarkSalmon': [0xE9, 0x96, 0x7A], + 'OrangeRed': [0xFF, 0x45, 0x00], + 'Coral': [0xFF, 0x7F, 0x50], + 'LightSalmon': [0xFF, 0xA0, 0x7A], + 'Sienna': [0xA0, 0x52, 0x2D], + 'Seashell': [0xFF, 0xF5, 0xEE], + 'Chocolate': [0xD2, 0x69, 0x1E], + 'SaddleBrown': [0x8B, 0x45, 0x13], + 'SandyBrown': [0xF4, 0xA4, 0x60], + 'PeachPuff': [0xFF, 0xDA, 0xB9], + 'Peru': [0xCD, 0x85, 0x3F], + 'Linen': [0xFA, 0xF0, 0xE6], + 'DarkOrange': [0xFF, 0x8C, 0x00], + 'Bisque': [0xFF, 0xE4, 0xC4], + 'BurlyWood': [0xDE, 0xB8, 0x87], + 'Tan': [0xD2, 0xB4, 0x8C], + 'AntiqueWhite': [0xFA, 0xEB, 0xD7], + 'NavajoWhite': [0xFF, 0xDE, 0xAD], + 'BlanchedAlmond': [0xFF, 0xEB, 0xCD], + 'PapayaWhip': [0xFF, 0xEF, 0xD5], + 'Orange': [0xFF, 0xA5, 0x00], + 'Moccasin': [0xFF, 0xE4, 0xB5], + 'Wheat': [0xF5, 0xDE, 0xB3], + 'OldLace': [0xFD, 0xF5, 0xE6], + 'FloralWhite': [0xFF, 0xFA, 0xF0], + 'Goldenrod': [0xDA, 0xA5, 0x20], + 'DarkGoldenrod': [0xB8, 0x86, 0x0B], + 'Cornsilk': [0xFF, 0xF8, 0xDC], + 'Gold': [0xFF, 0xD7, 0x00], + 'PaleGoldenrod': [0xEE, 0xE8, 0xAA], + 'Khaki': [0xF0, 0xE6, 0x8C], + 'LemonChiffon': [0xFF, 0xFA, 0xCD], + 'DarkKhaki': [0xBD, 0xB7, 0x6B], + 'Beige': [0xF5, 0xF5, 0xDC], + 'LightGoldenrodYellow': [0xFA, 0xFA, 0xD2], + 'Olive': [0x80, 0x80, 0x00], + 'Yellow': [0xFF, 0xFF, 0x00], + 'LightYellow': [0xFF, 0xFF, 0xE0], + 'Ivory': [0xFF, 0xFF, 0xF0], + 'OliveDrab': [0x6B, 0x8E, 0x23], + 'YellowGreen': [0x9A, 0xCD, 0x32], + 'DarkOliveGreen': [0x55, 0x6B, 0x2F], + 'GreenYellow': [0xAD, 0xFF, 0x2F], + 'LawnGreen': [0x7C, 0xFC, 0x00], + 'Chartreuse': [0x7F, 0xFF, 0x00], + 'DarkSeaGreen': [0x8F, 0xBC, 0x8F], + 'ForestGreen': [0x22, 0x8B, 0x22], + 'LimeGreen': [0x32, 0xCD, 0x32], + 'LightGreen': [0x90, 0xEE, 0x90], + 'PaleGreen': [0x98, 0xFB, 0x98], + 'DarkGreen': [0x00, 0x64, 0x00], + 'Green': [0x00, 0x80, 0x00], + 'Lime': [0x00, 0xFF, 0x00], + 'Honeydew': [0xF0, 0xFF, 0xF0], + 'MediumSeaGreen': [0x3C, 0xB3, 0x71], + 'SeaGreen': [0x2E, 0x8B, 0x57], + 'SpringGreen': [0x00, 0xFF, 0x7F], + 'MintCream': [0xF5, 0xFF, 0xFA], + 'MediumSpringGreen': [0x00, 0xFA, 0x9A], + 'MediumAquamarine': [0x66, 0xCD, 0xAA], + 'Aquamarine': [0x7F, 0xFF, 0xD4], + 'Turquoise': [0x40, 0xE0, 0xD0], + 'LightSeaGreen': [0x20, 0xB2, 0xAA], + 'MediumTurquoise': [0x48, 0xD1, 0xCC], + 'DarkSlateGray': [0x2F, 0x4F, 0x4F], + 'PaleTurquoise': [0xAF, 0xEE, 0xEE], + 'Teal': [0x00, 0x80, 0x80], + 'DarkCyan': [0x00, 0x8B, 0x8B], + 'DarkTurquoise': [0x00, 0xCE, 0xD1], + 'Aqua': [0x00, 0xFF, 0xFF], + 'Cyan': [0x00, 0xFF, 0xFF], + 'LightCyan': [0xE0, 0xFF, 0xFF], + 'Azure': [0xF0, 0xFF, 0xFF], + 'CadetBlue': [0x5F, 0x9E, 0xA0], + 'PowderBlue': [0xB0, 0xE0, 0xE6], + 'LightBlue': [0xAD, 0xD8, 0xE6], + 'DeepSkyBlue': [0x00, 0xBF, 0xFF], + 'SkyBlue': [0x87, 0xCE, 0xEB], + 'LightSkyBlue': [0x87, 0xCE, 0xFA], + 'SteelBlue': [0x46, 0x82, 0xB4], + 'AliceBlue': [0xF0, 0xF8, 0xFF], + 'DodgerBlue': [0x1E, 0x90, 0xFF], + 'SlateGray': [0x70, 0x80, 0x90], + 'LightSlateGray': [0x77, 0x88, 0x99], + 'LightSteelBlue': [0xB0, 0xC4, 0xDE], + 'CornflowerBlue': [0x64, 0x95, 0xED], + 'RoyalBlue': [0x41, 0x69, 0xE1], + 'MidnightBlue': [0x19, 0x19, 0x70], + 'Lavender': [0xE6, 0xE6, 0xFA], + 'Navy': [0x00, 0x00, 0x80], + 'DarkBlue': [0x00, 0x00, 0x8B], + 'MediumBlue': [0x00, 0x00, 0xCD], + 'Blue': [0x00, 0x00, 0xFF], + 'GhostWhite': [0xF8, 0xF8, 0xFF], + 'DarkSlateBlue': [0x48, 0x3D, 0x8B], + 'SlateBlue': [0x6A, 0x5A, 0xCD], + 'MediumSlateBlue': [0x7B, 0x68, 0xEE], + 'MediumPurple': [0x93, 0x70, 0xDB], + 'BlueViolet': [0x8A, 0x2B, 0xE2], + 'Indigo': [0x4B, 0x00, 0x82], + 'DarkOrchid': [0x99, 0x32, 0xCC], + 'DarkViolet': [0x94, 0x00, 0xD3], + 'MediumOrchid': [0xBA, 0x55, 0xD3], + 'Thistle': [0xD8, 0xBF, 0xD8], + 'Plum': [0xDD, 0xA0, 0xDD], + 'Violet': [0xEE, 0x82, 0xEE], + 'Purple': [0x80, 0x00, 0x80], + 'DarkMagenta': [0x8B, 0x00, 0x8B], + 'Magenta': [0xFF, 0x00, 0xFF], + 'Fuchsia': [0xFF, 0x00, 0xFF], + 'Orchid': [0xDA, 0x70, 0xD6], + 'MediumVioletRed': [0xC7, 0x15, 0x85], + 'DeepPink': [0xFF, 0x14, 0x93], + 'HotPink': [0xFF, 0x69, 0xB4], + 'PaleVioletRed': [0xDB, 0x70, 0x93], + 'LavenderBlush': [0xFF, 0xF0, 0xF5], + 'Crimson': [0xDC, 0x14, 0x3C], + 'Pink': [0xFF, 0xC0, 0xCB], + 'LightPink': [0xFF, 0xB6, 0xC1] + }; + + $.widget("vanderlee.colorpicker", { + options: { + alpha: false, // Show alpha controls and mode + altAlpha: true, // change opacity of altField as well? + altField: '', // selector for DOM elements which change background color on change. + altOnChange: true, // true to update on each change, false to update only on close. + altProperties: 'background-color', // comma separated list of any of 'background-color', 'color', 'border-color', 'outline-color' + autoOpen: false, // Open dialog automatically upon creation + buttonColorize: false, + buttonImage: 'images/ui-colorpicker.png', + buttonImageOnly: false, + buttonText: 'Color', // Text on the button and/or title of button image. + closeOnOutside: true, // Close the dialog when clicking outside the dialog (not for inline) + color: '#00FF00', // Initial color (for inline only) + duration: 'fast', + hsv: true, // Show HSV controls and modes + layout: { + map: [0, 0, 1, 3], // Left, Top, Width, Height (in table cells). + bar: [1, 0, 1, 3], + preview: [2, 0, 1, 1], + inputs: [2, 1, 1, 1], + hex: [2, 2, 1, 1], + swatches: [3, 0, 1, 3] + }, + limit: '', // Limit color "resolution": '', 'websafe', 'nibble', 'binary' + mode: 'h', // Initial editing mode, h, s, v, r, g, b or a + parts: '', + rgb: true, // Show RGB controls and modes + showAnim: 'fadeIn', + showOn: 'focus', // 'focus', 'button', 'both' + showOptions: {}, + swatches: null, + title: 'Pick a color', + + onClose: null, + onSelect: null + }, + + _create: function () { + var self = this; + + self.opened = false; + self.generated = false; + self.inline = false; + self.changed = false; + + self.dialog = null; + self.button = null; + self.image = null; + + self.mode = self.options.mode; + + if (self.options.swatches === null) { + self.options.swatches = _colors; + } + + if (this.element[0].nodeName.toLowerCase() === 'input') { + if (self.element.val()) { + self.options.color = self.element.val(); + } + self._loadColor(); + + $('body').append(_container_popup); + self.dialog = $('.ui-colorpicker:last'); + + // Click outside/inside + $(document).mousedown(function (event) { + if (!self.opened || event.target === self.element[0]) { + return; + } + + // Check if clicked on any part of dialog + if ($(event.target).parents('.ui-colorpicker').length > 0) { + self.element.blur(); // inside window! + return; + } + + // Check if clicked on button + var p, + parents = $(event.target).parents(); + for (p in parents) { + if (self.button !== null && parents[p] === self.button[0]) { + return; + } + } + + // no closeOnOutside + if (!self.options.closeOnOutside) { + return; + } + + self.close(); + }); + + if (self.options.showOn === 'focus' || self.options.showOn === 'both') { + self.element.focus(function () { + self.open(); + }); + } + if (self.options.showOn === 'button' || self.options.showOn === 'both') { + if (self.options.buttonImage !== '') { + self.image = $('
'
+ + ' '
+ + ' '
+ + (inst.options.alpha ? ' ' : '')
+ + '
';
+ return html;
+ };
+
+ this.generate = function () {
+ switch (inst.mode) {
+ case 'h':
+ $('#ui-colorpicker-map-layer-1', e).css({'background-position': '0 0', 'opacity': ''}).show();
+ $('#ui-colorcasepicker-map-layer-2', e).hide();
+ break;
+
+ case 's':
+ case 'a':
+ $('#ui-colorpicker-map-layer-1', e).css({'background-position': '0 -260px', 'opacity': ''}).show();
+ $('#ui-colorpicker-map-layer-2', e).css({'background-position': '0 -520px', 'opacity': ''}).show();
+ break;
+
+ case 'v':
+ $(e).css('background-color', 'black');
+ $('#ui-colorpicker-map-layer-1', e).css({'background-position': '0 -780px', 'opacity': ''}).show();
+ $('#ui-colorpicker-map-layer-2', e).hide();
+ break;
+
+ case 'r':
+ $('#ui-colorpicker-map-layer-1', e).css({'background-position': '0 -1040px', 'opacity': ''}).show();
+ $('#ui-colorpicker-map-layer-2', e).css({'background-position': '0 -1300px', 'opacity': ''}).show();
+ break;
+
+ case 'g':
+ $('#ui-colorpicker-map-layer-1', e).css({'background-position': '0 -1560px', 'opacity': ''}).show();
+ $('#ui-colorpicker-map-layer-2', e).css({'background-position': '0 -1820px', 'opacity': ''}).show();
+ break;
+
+ case 'b':
+ $('#ui-colorpicker-map-layer-1', e).css({'background-position': '0 -2080px', 'opacity': ''}).show();
+ $('#ui-colorpicker-map-layer-2', e).css({'background-position': '0 -2340px', 'opacity': ''}).show();
+ break;
+ }
+ self.repaint();
+ };
+
+ this.repaint = function () {
+ var div = $('#ui-colorpicker-map-layer-pointer', e),
+ x = 0,
+ y = 0;
+
+ switch (inst.mode) {
+ case 'h':
+ x = inst.color.s * div.width();
+ y = (1 - inst.color.v) * div.width();
+ $(e).css('background-color', inst.color.normClone().toCSS());
+ break;
+
+ case 's':
+ case 'a':
+ x = inst.color.h * div.width();
+ y = (1 - inst.color.v) * div.width();
+ $('#ui-colorpicker-map-layer-2', e).css('opacity', 1 - inst.color.s);
+ break;
+
+ case 'v':
+ x = inst.color.h * div.width();
+ y = (1 - inst.color.s) * div.width();
+ $('#ui-colorpicker-map-layer-1', e).css('opacity', inst.color.v);
+ break;
+
+ case 'r':
+ x = inst.color.b * div.width();
+ y = (1 - inst.color.g) * div.width();
+ $('#ui-colorpicker-map-layer-2', e).css('opacity', inst.color.r);
+ break;
+
+ case 'g':
+ x = inst.color.b * div.width();
+ y = (1 - inst.color.r) * div.width();
+ $('#ui-colorpicker-map-layer-2', e).css('opacity', inst.color.g);
+ break;
+
+ case 'b':
+ x = inst.color.r * div.width();
+ y = (1 - inst.color.g) * div.width();
+ $('#ui-colorpicker-map-layer-2', e).css('opacity', inst.color.b);
+ break;
+ }
+
+ if (inst.options.alpha) {
+ $('#ui-colorpicker-map-layer-alpha', e).css('opacity', 1 - inst.color.a);
+ }
+
+ $('#ui-colorpicker-map-pointer', e).css({
+ 'left': x - 7,
+ 'top': y - 7
+ });
+ };
+
+ this.init = function () {
+ e = $(_html()).appendTo($('#ui-colorpicker-map-container', inst.dialog));
+
+ e.bind('mousedown', _mousedown);
+ };
+ },
+
+ bar: function (inst) {
+ var self = this,
+ e = null,
+ _mousedown, _mouseup, _mousemove, _html;
+
+ _mousedown = function (event) {
+ if (!inst.opened) {
+ return;
+ }
+
+ var div = $('#ui-colorpicker-bar-layer-pointer', e),
+ offset = div.offset(),
+ width = div.width(),
+ height = div.height(),
+ x = event.pageX - offset.left,
+ y = event.pageY - offset.top;
+
+ if (x >= 0 && x < width && y >= 0 && y < height) {
+ event.stopImmediatePropagation();
+ event.preventDefault();
+ $(document).unbind('mousedown', _mousedown);
+ $(document).bind('mouseup', _mouseup);
+ $(document).bind('mousemove', _mousemove);
+ _mousemove(event);
+ }
+ };
+
+ _mouseup = function (event) {
+ event.stopImmediatePropagation();
+ event.preventDefault();
+ $(document).unbind('mouseup', _mouseup);
+ $(document).unbind('mousemove', _mousemove);
+ $(document).bind('mousedown', _mousedown);
+ };
+
+ _mousemove = function (event) {
+ event.stopImmediatePropagation();
+ event.preventDefault();
+
+ if (event.pageY === self.y) {
+ return;
+ }
+ self.y = event.pageY;
+
+ var div = $('#ui-colorpicker-bar-layer-pointer', e),
+ offset = div.offset(),
+ height = div.height(),
+ y = event.pageY - offset.top;
+
+ y = Math.max(0, Math.min(y / height, 1));
+
+ // interpret values
+ switch (inst.mode) {
+ case 'h':
+ inst.color.h = 1 - y;
+ inst.color.updateRGB();
+ break;
+
+ case 's':
+ inst.color.s = 1 - y;
+ inst.color.updateRGB();
+ break;
+
+ case 'v':
+ inst.color.v = 1 - y;
+ inst.color.updateRGB();
+ break;
+
+ case 'r':
+ inst.color.r = 1 - y;
+ inst.color.updateHSV();
+ break;
+
+ case 'g':
+ inst.color.g = 1 - y;
+ inst.color.updateHSV();
+ break;
+
+ case 'b':
+ inst.color.b = 1 - y;
+ inst.color.updateHSV();
+ break;
+
+ case 'a':
+ inst.color.a = 1 - y;
+ break;
+ }
+
+ inst._change();
+ };
+
+ _html = function () {
+ var html = ''
+ + ' '
+ + ' '
+ + ' '
+ + ' ';
+
+ if (inst.options.alpha) {
+ html += ' '
+ + ' ';
+ }
+
+ html += '
';
+
+ return html;
+ };
+
+ this.generate = function () {
+ switch (inst.mode) {
+ case 'h':
+ case 's':
+ case 'v':
+ case 'r':
+ case 'g':
+ case 'b':
+ $('#ui-colorpicker-bar-layer-alpha', e).show();
+ $('#ui-colorpicker-bar-layer-alphabar', e).hide();
+ break;
+
+ case 'a':
+ $('#ui-colorpicker-bar-layer-alpha', e).hide();
+ $('#ui-colorpicker-bar-layer-alphabar', e).show();
+ break;
+ }
+
+ switch (inst.mode) {
+ case 'h':
+ $('#ui-colorpicker-bar-layer-1', e).css({'background-position': '0 0', 'opacity': ''}).show();
+ $('#ui-colorpicker-bar-layer-2', e).hide();
+ $('#ui-colorpicker-bar-layer-3', e).hide();
+ $('#ui-colorpicker-bar-layer-4', e).hide();
+ break;
+
+ case 's':
+ $('#ui-colorpicker-bar-layer-1', e).css({'background-position': '0 -260px', 'opacity': ''}).show();
+ $('#ui-colorpicker-bar-layer-2', e).css({'background-position': '0 -520px', 'opacity': ''}).show();
+ $('#ui-colorpicker-bar-layer-3', e).hide();
+ $('#ui-colorpicker-bar-layer-4', e).hide();
+ break;
+
+ case 'v':
+ $('#ui-colorpicker-bar-layer-1', e).css({'background-position': '0 -520px', 'opacity': ''}).show();
+ $('#ui-colorpicker-bar-layer-2', e).hide();
+ $('#ui-colorpicker-bar-layer-3', e).hide();
+ $('#ui-colorpicker-bar-layer-4', e).hide();
+ break;
+
+ case 'r':
+ $('#ui-colorpicker-bar-layer-1', e).css({'background-position': '0 -1560px', 'opacity': ''}).show();
+ $('#ui-colorpicker-bar-layer-2', e).css({'background-position': '0 -1300px', 'opacity': ''}).show();
+ $('#ui-colorpicker-bar-layer-3', e).css({'background-position': '0 -780px', 'opacity': ''}).show();
+ $('#ui-colorpicker-bar-layer-4', e).css({'background-position': '0 -1040px', 'opacity': ''}).show();
+ break;
+
+ case 'g':
+ $('#ui-colorpicker-bar-layer-1', e).css({'background-position': '0 -2600px', 'opacity': ''}).show();
+ $('#ui-colorpicker-bar-layer-2', e).css({'background-position': '0 -2340px', 'opacity': ''}).show();
+ $('#ui-colorpicker-bar-layer-3', e).css({'background-position': '0 -1820px', 'opacity': ''}).show();
+ $('#ui-colorpicker-bar-layer-4', e).css({'background-position': '0 -2080px', 'opacity': ''}).show();
+ break;
+
+ case 'b':
+ $('#ui-colorpicker-bar-layer-1', e).css({'background-position': '0 -3640px', 'opacity': ''}).show();
+ $('#ui-colorpicker-bar-layer-2', e).css({'background-position': '0 -3380px', 'opacity': ''}).show();
+ $('#ui-colorpicker-bar-layer-3', e).css({'background-position': '0 -2860px', 'opacity': ''}).show();
+ $('#ui-colorpicker-bar-layer-4', e).css({'background-position': '0 -3120px', 'opacity': ''}).show();
+ break;
+
+ case 'a':
+ $('#ui-colorpicker-bar-layer-1', e).hide();
+ $('#ui-colorpicker-bar-layer-2', e).hide();
+ $('#ui-colorpicker-bar-layer-3', e).hide();
+ $('#ui-colorpicker-bar-layer-4', e).hide();
+ break;
+ }
+ self.repaint();
+ };
+
+ this.repaint = function () {
+ var div = $('#ui-colorpicker-bar-layer-pointer', e),
+ y = 0;
+
+ switch (inst.mode) {
+ case 'h':
+ y = (1 - inst.color.h) * div.height();
+ break;
+
+ case 's':
+ y = (1 - inst.color.s) * div.height();
+ $('#ui-colorpicker-bar-layer-2', e).css('opacity', 1 - inst.color.v);
+ $(e).css('background-color', inst.color.normClone().toCSS());
+ break;
+
+ case 'v':
+ y = (1 - inst.color.v) * div.height();
+ $(e).css('background-color', inst.color.normClone().toCSS());
+ break;
+
+ case 'r':
+ y = (1 - inst.color.r) * div.height();
+ $('#ui-colorpicker-bar-layer-2', e).css('opacity', Math.max(0, (inst.color.b - inst.color.g)));
+ $('#ui-colorpicker-bar-layer-3', e).css('opacity', Math.max(0, (inst.color.g - inst.color.b)));
+ $('#ui-colorpicker-bar-layer-4', e).css('opacity', Math.min(inst.color.b, inst.color.g));
+ break;
+
+ case 'g':
+ y = (1 - inst.color.g) * div.height();
+ $('#ui-colorpicker-bar-layer-2', e).css('opacity', Math.max(0, (inst.color.b - inst.color.r)));
+ $('#ui-colorpicker-bar-layer-3', e).css('opacity', Math.max(0, (inst.color.r - inst.color.b)));
+ $('#ui-colorpicker-bar-layer-4', e).css('opacity', Math.min(inst.color.r, inst.color.b));
+ break;
+
+ case 'b':
+ y = (1 - inst.color.b) * div.height();
+ $('#ui-colorpicker-bar-layer-2', e).css('opacity', Math.max(0, (inst.color.r - inst.color.g)));
+ $('#ui-colorpicker-bar-layer-3', e).css('opacity', Math.max(0, (inst.color.g - inst.color.r)));
+ $('#ui-colorpicker-bar-layer-4', e).css('opacity', Math.min(inst.color.r, inst.color.g));
+ break;
+
+ case 'a':
+ y = (1 - inst.color.a) * div.height();
+ $(e).css('background-color', inst.color.normClone().toCSS());
+ break;
+ }
+
+ if (inst.mode !== 'a') {
+ $('#ui-colorpicker-bar-layer-alpha', e).css('opacity', 1 - inst.color.a);
+ }
+
+ $('#ui-colorpicker-bar-pointer', e).css('top', y - 3);
+ };
+
+ this.init = function () {
+ e = $(_html()).appendTo($('#ui-colorpicker-bar-container', inst.dialog));
+
+ e.bind('mousedown', _mousedown);
+ };
+ },
+
+ inputs: function (inst) {
+ var self = this,
+ e = null,
+ _html;
+
+ _html = function () {
+ var html = '';
+
+ if (inst.options.hsv) {
+ html += '
';
+ };
+
+ this.init = function () {
+ e = $(_html()).appendTo($('#ui-colorpicker-inputs-container', inst.dialog));
+
+ $('.ui-colorpicker-mode', e).click(function () {
+ inst.mode = $(this).val();
+ inst._generateAllParts();
+ });
+
+ $('.ui-colorpicker-number', e).bind('change input keyup', function () {
+ inst.color.r = $('#ui-colorpicker-r .ui-colorpicker-number', e).val() / 255;
+ inst.color.g = $('#ui-colorpicker-g .ui-colorpicker-number', e).val() / 255;
+ inst.color.b = $('#ui-colorpicker-b .ui-colorpicker-number', e).val() / 255;
+ inst.color.a = $('#ui-colorpicker-a .ui-colorpicker-number', e).val() / 100;
+ inst.color.h = $('#ui-colorpicker-h .ui-colorpicker-number', e).val() / 360;
+ inst.color.s = $('#ui-colorpicker-s .ui-colorpicker-number', e).val() / 100;
+ inst.color.v = $('#ui-colorpicker-v .ui-colorpicker-number', e).val() / 100;
+
+ if ($(this).hasClass('ui-colorpicker-number-hsv')) {
+ inst.color.updateRGB();
+ } else if ($(this).hasClass('ui-colorpicker-number-rgb')) {
+ inst.color.updateHSV();
+ }
+
+ inst._change();
+ });
+ };
+
+ this.repaint = function () {
+ var c = $.extend(inst.color);
+ c.h *= 360;
+ c.s *= 100;
+ c.v *= 100;
+ c.r *= 255;
+ c.g *= 255;
+ c.b *= 255;
+ c.a *= 100;
+
+ $.each(c, function (index, value) {
+ var v = Math.round(value);
+ if (!$('#ui-colorpicker-' + index + ' .ui-colorpicker-number', e).is(':focus')
+ && $('#ui-colorpicker-' + index + ' .ui-colorpicker-number', e).val() !== v) {
+ $('#ui-colorpicker-' + index + ' .ui-colorpicker-number', e).val(v);
+ }
+ });
+ };
+
+ this.generate = function () {
+ $('.ui-colorpicker-mode', e).each(function () {
+ $(this).attr('checked', $(this).val() === inst.mode);
+ });
+ this.repaint();
+ };
+ },
+
+ preview: function (inst) {
+ var self = this,
+ e = null,
+ _html;
+
+ _html = function () {
+ return '°
'
+ + '%
'
+ + '%
';
+ }
+
+ if (inst.options.rgb) {
+ html += ''
+ + '
'
+ + '
';
+ }
+
+ if (inst.options.alpha) {
+ html += '
%
';
+ }
+
+ return html + ''
+ + ''
+ + '
';
+ };
+
+ this.init = function () {
+ e = $(_html()).appendTo($('#ui-colorpicker-preview-container', inst.dialog));
+
+ $('#ui-colorpicker-preview-initial', e).click(function () {
+ inst.color = $.extend({}, inst.currentColor);
+ inst._change();
+ });
+
+ };
+
+ this.repaint = function () {
+ $('#ui-colorpicker-preview-initial', e).css('background-color', inst.currentColor.toCSS()).attr('title', inst.currentColor.toHex());
+ $('#ui-colorpicker-preview-initial-alpha', e).css('opacity', 1 - inst.currentColor.a);
+ $('#ui-colorpicker-preview-current', e).css('background-color', inst.color.toCSS()).attr('title', inst.color.toHex());
+ $('#ui-colorpicker-preview-current-alpha', e).css('opacity', 1 - inst.color.a);
+ };
+
+ this.generate = function () {
+ if (inst.options.alpha) {
+ $('#ui-colorpicker-preview-initial-alpha, #ui-colorpicker-preview-current-alpha', e).show();
+ } else {
+ $('#ui-colorpicker-preview-initial-alpha, #ui-colorpicker-preview-current-alpha', e).hide();
+ }
+
+ this.repaint();
+ };
+ },
+
+ hex: function (inst) {
+ var self = this,
+ e = null,
+ _html;
+
+ _html = function () {
+ var html = '';
+
+ if (inst.options.alpha) {
+ html += '';
+ }
+
+ html += '';
+
+ return ''
+ + '
'
+ + ''
+ + '
' + html + '
';
+ };
+
+ this.init = function () {
+ e = $(_html()).appendTo($('#ui-colorpicker-hex-container', inst.dialog));
+
+ $('#ui-colorpicker-hex-input', e).bind('change keyup', function () {
+ var rgb = inst._parseHex($(this).val());
+ inst.color.r = rgb[0];
+ inst.color.g = rgb[1];
+ inst.color.b = rgb[2];
+ inst.color.updateHSV();
+ inst._change();
+ });
+
+ $('#ui-colorpicker-hex-alpha', e).bind('change keyup', function () {
+ inst.color.a = parseInt($('#ui-colorpicker-hex-alpha', e).val(), 16);
+ inst._change();
+ });
+ };
+
+ this.repaint = function () {
+ if (!$('#ui-colorpicker-hex-input', e).is(':focus')) {
+ $('#ui-colorpicker-hex-input', e).val(inst.color.toHex(true));
+ }
+
+ if (!$('#ui-colorpicker-hex-alpha', e).is(':focus')) {
+ $('#ui-colorpicker-hex-alpha', e).val(inst._intToHex(inst.color.a * 255));
+ }
+ };
+
+ this.generate = function () {
+ this.repaint();
+ };
+ },
+
+ swatches: function (inst) {
+ var self = this,
+ e = null,
+ _html;
+
+ _html = function () {
+ var html = '';
+
+ $.each(inst.options.swatches, function (name, color) {
+ var hex = inst._intToHex(color[0]) + inst._intToHex(color[1]) + inst._intToHex(color[2]);
+ html += '';
+ });
+
+ return '' + html + '
';
+ };
+
+ this.init = function () {
+ e = $(_html()).appendTo($('#ui-colorpicker-swatches-container', inst.dialog));
+
+ $('.ui-colorpicker-swatch', e).click(function () {
+ var rgb = inst._parseColor($(this).css('background-color'));
+ inst.color = (rgb === false ? new inst.Color() : new inst.Color(rgb[0], rgb[1], rgb[2]));
+ inst._change();
+ });
+ };
+
+ this.repaint = function () {
+ // Not affected by changing color;
+ };
+
+ this.generate = function () {
+ // Not affected by changing color;
+ };
+ },
+
+ footer: function (inst) {
+ var self = this,
+ e = null,
+ _html;
+
+ _html = function () {
+ return '';
+ };
+
+ this.init = function () {
+ e = $(_html()).appendTo(inst.dialog);
+
+ $('.ui-colorpicker-close', e).button().click(function () {
+ inst.close();
+ });
+
+ if (inst.options.alpha) {
+ $('.ui-colorpicker-transparent', e).button().click(function () {
+ inst.color.a = 0;
+ inst._change();
+ });
+ }
+ };
+
+ this.repaint = function () {};
+
+ this.generate = function () {};
+ }
+ },
+
+ _parseHex: function (color) {
+ var name = $.trim(color).toLowerCase(),
+ c,
+ m;
+
+ if (_colors[name]) {
+ c = _colors[name];
+ return [c[0] / 255, c[1] / 255, c[2] / 255];
+ }
+
+ // {#}rrggbb
+ m = /^#?([a-fA-F0-9]{0,6})/.exec(color);
+ if (m) {
+ c = parseInt(m[1], 16);
+ return [((c >> 16) & 0xFF) / 255,
+ ((c >> 8) & 0xFF) / 255,
+ (c & 0xFF) / 255];
+ }
+ },
+
+ _parseColor: function (color) {
+ var m;
+
+ // rgba(r,g,b,a)
+ m = /rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)/.exec(color);
+ if (m) {
+ return [
+ m[1] / 255,
+ m[2] / 255,
+ m[3] / 255,
+ m[4] / 255
+ ];
+ }
+
+ // rgba(r%,g%,b%,a%)
+ m = /rgba?\(\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)/.exec(color);
+ if (m) {
+ return [
+ m[1] / 100,
+ m[2] / 100,
+ m[3] / 100,
+ m[4] / 100
+ ];
+ }
+
+ // #rrggbb
+ m = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color);
+ if (m) {
+ return [
+ parseInt(m[1], 16) / 255,
+ parseInt(m[2], 16) / 255,
+ parseInt(m[3], 16) / 255
+ ];
+ }
+
+ // #rgb
+ m = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(color);
+ if (m) {
+ return [
+ parseInt(m[1] + m[1], 16) / 255,
+ parseInt(m[2] + m[2], 16) / 255,
+ parseInt(m[3] + m[3], 16) / 255
+ ];
+ }
+
+ return this._parseHex(color);
+ },
+
+ Color: function () {
+ var a, args = arguments;
+
+ this.updateRGB = function () {
+ this.h = Math.max(0, Math.min(this.h, 1));
+ this.s = Math.max(0, Math.min(this.s, 1));
+ this.v = Math.max(0, Math.min(this.v, 1));
+
+ if (this.s === 0) {
+ this.r = this.g = this.b = this.v;
+ } else {
+ var var_h = this.h === 1 ? 0 : this.h * 6,
+ var_i = Math.floor(var_h),
+ var_1 = this.v * (1 - this.s),
+ var_2 = this.v * (1 - this.s * (var_h - var_i)),
+ var_3 = this.v * (1 - this.s * (1 - (var_h - var_i)));
+
+ if (var_i === 0) {
+ this.r = this.v;
+ this.g = var_3;
+ this.b = var_1;
+ } else if (var_i === 1) {
+ this.r = var_2;
+ this.g = this.v;
+ this.b = var_1;
+ } else if (var_i === 2) {
+ this.r = var_1;
+ this.g = this.v;
+ this.b = var_3;
+ } else if (var_i === 3) {
+ this.r = var_1;
+ this.g = var_2;
+ this.b = this.v;
+ } else if (var_i === 4) {
+ this.r = var_3;
+ this.g = var_1;
+ this.b = this.v;
+ } else {
+ this.r = this.v;
+ this.g = var_1;
+ this.b = var_2;
+ }
+ }
+ return this;
+ };
+
+ this.updateHSV = function () {
+ var minVal, maxVal, delta, del_R, del_G, del_B;
+ this.r = Math.max(0, Math.min(this.r, 1));
+ this.g = Math.max(0, Math.min(this.g, 1));
+ this.b = Math.max(0, Math.min(this.b, 1));
+
+ minVal = Math.min(this.r, this.g, this.b);
+ maxVal = Math.max(this.r, this.g, this.b);
+ delta = maxVal - minVal;
+
+ this.v = maxVal;
+
+ if (delta === 0) {
+ this.h = 0;
+ this.s = 0;
+ } else {
+ this.s = delta / maxVal;
+ del_R = (((maxVal - this.r) / 6) + (delta / 2)) / delta;
+ del_G = (((maxVal - this.g) / 6) + (delta / 2)) / delta;
+ del_B = (((maxVal - this.b) / 6) + (delta / 2)) / delta;
+
+ if (this.r === maxVal) {
+ this.h = del_B - del_G;
+ } else if (this.g === maxVal) {
+ this.h = (1 / 3) + del_R - del_B;
+ } else if (this.b === maxVal) {
+ this.h = (2 / 3) + del_G - del_R;
+ }
+
+ if (this.h < 0) {
+ this.h += 1;
+ } else if (this.h > 1) {
+ this.h -= 1;
+ }
+ }
+ return this;
+ };
+
+ this._hexify = function (number) {
+ // return Math.round(number).toString(16);
+ var digits = '0123456789abcdef',
+ lsd = number % 16,
+ msd = (number - lsd) / 16,
+ hexified = digits.charAt(msd) + digits.charAt(lsd);
+ return hexified;
+ };
+
+ this.toHex = function () {
+ return this._hexify(this.r * 255) + this._hexify(this.g * 255) + this._hexify(this.b * 255);
+ };
+
+ this.toCSS = function () {
+ return '#' + this.toHex();
+ };
+
+ this.toHexAlpha = function () {
+ return this._hexify(this.a * 255);
+ };
+
+ this.normClone = function () {
+ return $.extend({}, this, {s: 1, v: 1}).updateRGB();
+ };
+
+ this.equals = function (rgb) {
+ return rgb[0] === this.r
+ && rgb[1] === this.g
+ && rgb[2] === this.b;
+ };
+
+ this.limit = function (steps) {
+ steps -= 1;
+ this.r = Math.round(this.r * steps) / steps;
+ this.g = Math.round(this.g * steps) / steps;
+ this.b = Math.round(this.b * steps) / steps;
+ this.updateHSV();
+ };
+
+ for (a = 0; a < args.length; a += 1) {
+ args[a] = Math.max(0, Math.min(args[a], 1));
+ }
+
+ if (args.length === 0) {
+ this.r = 0;
+ this.g = 0;
+ this.b = 0;
+ this.a = 1;
+ this.h = 0;
+ this.s = 0;
+ this.v = 0;
+ } else if (args.length === 3) {
+ // r,g,b
+ this.r = args[0] || 0;
+ this.g = args[1] || 0;
+ this.b = args[2] || 0;
+ this.a = 1;
+ this.updateHSV();
+ } else if (args.length === 7) {
+ // r,g,b,a,h,s,v
+ this.r = args[0] || 0;
+ this.g = args[1] || 0;
+ this.b = args[2] || 0;
+ this.a = args[3] || 0;
+ this.h = args[4] || 0;
+ this.s = args[5] || 0;
+ this.v = args[6] || 0;
+ }
+ }
+ });
+
+}(jQuery));
diff --git a/wqflask/wqflask/static/packages/jqplot/examples/cursor-highlighter.html b/wqflask/wqflask/static/packages/jqplot/examples/cursor-highlighter.html
new file mode 100644
index 00000000..ef35aebf
--- /dev/null
+++ b/wqflask/wqflask/static/packages/jqplot/examples/cursor-highlighter.html
@@ -0,0 +1,137 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/wqflask/wqflask/static/packages/jqplot/examples/customHighlighterCursorTrendline.html b/wqflask/wqflask/static/packages/jqplot/examples/customHighlighterCursorTrendline.html
new file mode 100644
index 00000000..d5ed6ce4
--- /dev/null
+++ b/wqflask/wqflask/static/packages/jqplot/examples/customHighlighterCursorTrendline.html
@@ -0,0 +1,104 @@
+
+
+
+
+
+ The Highlighter plugin will highlight data points near the mouse and display an optional tooltip with the data point value. By default, the tooltip values will be formatted with the same formatter as used to display the axes tick values. The text format can be customized with an optional sprintf style format string.
+ + + + + +The Cursor plugin changes the mouse cursor when it enters the graph area and displays an optional tooltip with the mouse position. The tooltip can be in a fixed location, or it can follow the mouse. The pointer style, set to "crosshair" by default, can also be customized. Tooltip values are formatted similar to the Highlighter plugin. By default they use the axes formatters, but can be customized with a sprintf format string.
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
diff --git a/wqflask/wqflask/static/packages/jqplot/examples/dashboardWidget.html b/wqflask/wqflask/static/packages/jqplot/examples/dashboardWidget.html
new file mode 100644
index 00000000..d57f1de3
--- /dev/null
+++ b/wqflask/wqflask/static/packages/jqplot/examples/dashboardWidget.html
@@ -0,0 +1,212 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/wqflask/wqflask/static/packages/jqplot/examples/dashedLines.html b/wqflask/wqflask/static/packages/jqplot/examples/dashedLines.html
new file mode 100644
index 00000000..d1bf48fb
--- /dev/null
+++ b/wqflask/wqflask/static/packages/jqplot/examples/dashedLines.html
@@ -0,0 +1,227 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/wqflask/wqflask/static/packages/jqplot/examples/data-renderers.html b/wqflask/wqflask/static/packages/jqplot/examples/data-renderers.html
new file mode 100644
index 00000000..ba835d58
--- /dev/null
+++ b/wqflask/wqflask/static/packages/jqplot/examples/data-renderers.html
@@ -0,0 +1,144 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/wqflask/wqflask/static/packages/jqplot/examples/date-axes.html b/wqflask/wqflask/static/packages/jqplot/examples/date-axes.html
new file mode 100644
index 00000000..4fa3f620
--- /dev/null
+++ b/wqflask/wqflask/static/packages/jqplot/examples/date-axes.html
@@ -0,0 +1,107 @@
+
+
+
+
+
+ Data renderers allow jqPlot to pull data from any external source (e.g. a function implementing an AJAX call). Simply assign the external source to the "dataRenderer" plot option. The only requirement on data renderers is that it must return a valid jqPlot data array.
+ + + + + + +Data renderers get passed options by the plot. The signiture for a data renderer is:
+ + +
+function(userData, plotObject, options) {
+ ...
+ return data;
+}
+
+
+
+Where userData is whatever data was passed into the plot, plotObject is a reference back to the plot itself, and options are any options passed into the plots "dataRendererOption" option. The following example shows a more complicated example which uses ajax pulls data from an external json data source.
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/wqflask/wqflask/static/packages/jqplot/examples/dateAxisLogAxisZooming.html b/wqflask/wqflask/static/packages/jqplot/examples/dateAxisLogAxisZooming.html
new file mode 100644
index 00000000..81f0f1c7
--- /dev/null
+++ b/wqflask/wqflask/static/packages/jqplot/examples/dateAxisLogAxisZooming.html
@@ -0,0 +1,101 @@
+
+
+
+
+
+ Date axes support is provided through the dateAxisRenderer plugin. Date axes expand javascripts native date handling capabilities. This allow dates to be input in almost any unambiguous form, not just in milliseconds!
+ +Note, although jqPlot will parse most any human readable date, it is safest to use javascript time stamps when possible. Also, it is best to specify a date and time and not just a date alone. This is due to inconsistent browser handling of local time vs. UTC with bare dates.
+ + + + + +Date Axes also provide powerful formatting features. This allows custom formatter strings to be used to format axis tick labels precisely the way you want.
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
diff --git a/wqflask/wqflask/static/packages/jqplot/examples/dateAxisRenderer.html b/wqflask/wqflask/static/packages/jqplot/examples/dateAxisRenderer.html
new file mode 100644
index 00000000..b0b72fba
--- /dev/null
+++ b/wqflask/wqflask/static/packages/jqplot/examples/dateAxisRenderer.html
@@ -0,0 +1,292 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/wqflask/wqflask/static/packages/jqplot/examples/example.js b/wqflask/wqflask/static/packages/jqplot/examples/example.js
new file mode 100644
index 00000000..ff85cd20
--- /dev/null
+++ b/wqflask/wqflask/static/packages/jqplot/examples/example.js
@@ -0,0 +1,114 @@
+$(document).ready(function(){
+ if (!$.jqplot._noCodeBlock) {
+ $('script.code').each(function(index) {
+ if ($('pre.code').eq(index).length ) {
+ $('pre.code').eq(index).text($(this).html());
+ }
+ else {
+ // var str = $(this).text();
+ // $('div.jqplot-target').eq(index).after($('Date axis renderer with default settings. Ticks are given wider spacing by default since date axes typically have longer tick labels.
+ +Date axis recognizes rotated tick labels. It will space ticks a little closer when labels are rotated.
+ +If you want more or less ticks, specify the "numberTicks" options. Date axes will try to produce the desired number of ticks, but may adjust to get a nice interval.
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +'+str+'')); + var pre = $(''); + $('div.jqplot-target').eq(index).after(pre); + pre.text($(this).html()); + pre = null; + } + }); + + $('script.common').each(function(index) { + $('pre.common').eq(index).text($(this).html()); + }); + + var elstr=''; + if ($('script.include, link.include').length > 0) { + + if ($('pre.include').length == 0) { + var temp = [ + '
',
+ '
'
+ ];
+
+ temp = $(temp.join('\n'));
+ $('div.example-content').append(temp);
+ temp = null;
+ }
+
+
+ $('script.include').each(function(index) {
+ if (elstr !== '') {
+ elstr += '\n';
+ }
+ elstr += '';
+ });
+
+ $('link.include').each(function(index) {
+ if (elstr !== '') {
+ elstr += '\n';
+ }
+ elstr += '';
+ })
+
+ $('pre.include').text(elstr);
+ }
+
+ else {
+ $('pre.include').remove();
+ $('div.include').remove();
+ }
+ }
+
+ if (!$.jqplot.use_excanvas) {
+ $('div.jqplot-target').each(function(){
+ var outerDiv = $(document.createElement('div'));
+ var header = $(document.createElement('div'));
+ var div = $(document.createElement('div'));
+
+ outerDiv.append(header);
+ outerDiv.append(div);
+
+ outerDiv.addClass('jqplot-image-container');
+ header.addClass('jqplot-image-container-header');
+ div.addClass('jqplot-image-container-content');
+
+ header.html('Right Click to Save Image As...');
+
+ var close = $(document.createElement('a'));
+ close.addClass('jqplot-image-container-close');
+ close.html('Close');
+ close.attr('href', '#');
+ close.click(function() {
+ $(this).parents('div.jqplot-image-container').hide(500);
+ })
+ header.append(close);
+
+ $(this).after(outerDiv);
+ outerDiv.hide();
+
+ outerDiv = header = div = close = null;
+
+ if (!$.jqplot._noToImageButton) {
+ var btn = $(document.createElement('button'));
+ btn.text('View Plot Image');
+ btn.addClass('jqplot-image-button');
+ btn.bind('click', {chart: $(this)}, function(evt) {
+ var imgelem = evt.data.chart.jqplotToImageElem();
+ var div = $(this).nextAll('div.jqplot-image-container').first();
+ div.children('div.jqplot-image-container-content').empty();
+ div.children('div.jqplot-image-container-content').append(imgelem);
+ div.show(500);
+ div = null;
+ });
+
+ $(this).after(btn);
+ btn.after('The charts on this page depend on the following files:
', + '', + ''); + btn = null; + } + }); + } + + SyntaxHighlighter.defaults['toolbar'] = true; + SyntaxHighlighter.all(); + + $(document).unload(function() {$('*').unbind(); }); +}); \ No newline at end of file diff --git a/wqflask/wqflask/static/packages/jqplot/examples/example.min.js b/wqflask/wqflask/static/packages/jqplot/examples/example.min.js new file mode 100644 index 00000000..132e2295 --- /dev/null +++ b/wqflask/wqflask/static/packages/jqplot/examples/example.min.js @@ -0,0 +1 @@ +$(document).ready(function(){if(!$.jqplot._noCodeBlock){$("script.code").each(function(c){if($("pre.code").eq(c).length){$("pre.code").eq(c).text($(this).html())}else{var d=$('');$("div.jqplot-target").eq(c).after(d);d.text($(this).html());d=null}});$("script.common").each(function(c){$("pre.common").eq(c).text($(this).html())});var b="";if($("script.include, link.include").length>0){if($("pre.include").length==0){var a=['
','
"];a=$(a.join("\n"));$("div.example-content").append(a);a=null}$("script.include").each(function(c){if(b!==""){b+="\n"}b+='
+
+
+
+
+ The charts on this page depend on the following files:
','',"
+
+
+
+
+
+
+
+
+