');
- unset($menu_sensors[$item]);$sep++;
- }
-}
-
-# Show remaining/custom sensor types if there are any in the database
-if ($menu_sensors && $sep)
-{
- echo('
+
+
diff --git a/html/index.php b/html/index.php
index 2f4654d21..19c43145d 100755
--- a/html/index.php
+++ b/html/index.php
@@ -52,8 +52,8 @@ if (isset($config['branding']) && is_array($config['branding']))
}
}
?>
-
-
+
+
@@ -73,6 +73,12 @@ if ($config['page_refresh']) { echo(" installed. You can simply
+type "ant" from the jqplot directory to build the default "all" target.
+There are 6 pertinent targets: clean, dist, min, docs, compress and all. Use:
+
+> ant -p
+
+to get a description of the various build targets.
+
+Legal Notices:
+
+Copyright (c) 2009-2010 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.
+
+Although not required, the author would appreciate an email letting him
+know of any substantial use of jqPlot. You can reach the author at:
+chris at jqplot or see http://www.jqplot.com/info.php .
+
+If you are feeling kind and generous, consider supporting the project by
+making a donation at: http://www.jqplot.com/donate.php .
+
+jqPlot includes date instance methods and printf/sprintf functions by other authors:
+
+Date instance methods:
+
+ author Ken Snyder (ken d snyder at gmail dot com)
+ date 2008-09-10
+ version 2.0.2 (http://kendsnyder.com/sandbox/date/)
+ license Creative Commons Attribution License 3.0 (http://creativecommons.org/licenses/by/3.0/)
+
+JavaScript printf/sprintf functions.
+
+ 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."
diff --git a/html/js/jqplot/changes.txt b/html/js/jqplot/changes.txt
new file mode 100644
index 000000000..79c156775
--- /dev/null
+++ b/html/js/jqplot/changes.txt
@@ -0,0 +1,395 @@
+Title: Change Log
+
+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/
\ No newline at end of file
diff --git a/html/js/jqplot/copyright.txt b/html/js/jqplot/copyright.txt
new file mode 100644
index 000000000..1329729f6
--- /dev/null
+++ b/html/js/jqplot/copyright.txt
@@ -0,0 +1,29 @@
+/**
+ * jqPlot
+ * Pure JavaScript plotting plugin using jQuery
+ *
+ * Version: @VERSION
+ *
+ * Copyright (c) 2009-2011 Chris Leonello
+ * jqPlot is currently available for use in all personal or commercial projects
+ * under both the MIT (http://www.opensource.org/licenses/mit-license.php) and GPL
+ * version 2.0 (http://www.gnu.org/licenses/gpl-2.0.html) licenses. This means that you can
+ * choose the license that best suits your project and use it accordingly.
+ *
+ * Although not required, 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 .
+ *
+ * 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."
+ *
+ */
diff --git a/html/js/jqplot/docs/files/MIT-LICENSE-txt.html b/html/js/jqplot/docs/files/MIT-LICENSE-txt.html
new file mode 100644
index 000000000..34d120c3a
--- /dev/null
+++ b/html/js/jqplot/docs/files/MIT-LICENSE-txt.html
@@ -0,0 +1,39 @@
+
+
+MIT License
+
+
+
+
+
+
+
+
+
+
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.
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.
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.
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. 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
+ }
+ }
+}
tick mark on the axis. One of ‘inside’, ‘outside’, ‘cross’, ‘’ or null.
+
+
showMark
this.showMark = true
wether or not to show the mark on the axis.
+
+
showGridline
this.showGridline = true
wether or not to draw the gridline on the grid at this tick.
+
+
isMinorTick
this.isMinorTick = false
if this is a minor tick.
+
+
size
this.size = 4
Length of the tick beyond the grid in pixels. DEPRECATED: This has been superceeded by markSize
+
+
markSize
this.markSize = 6
Length of the tick marks in pixels. For ‘cross’ style, length will be stoked above and below axis, so total length will be twice this.
+
+
show
this.show = true
wether or not to show the tick (mark and label). Setting this to false requires more testing. It is recommended to set showLabel and showMark to false instead.
+
+
showLabel
this.showLabel = true
wether or not to show the label.
+
+
formatter
this.formatter = $.jqplot.DefaultTickFormatter
A class of a formatter for the tick text. sprintf by default.
+
+
prefix
this.prefix = ''
String to prepend to the tick label. Prefix is prepended to the formatted tick label.
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.
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
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:
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.
called at the end of legend draw, so plugins can add rows to the legend table.
$.jqplot.preSeriesInitHooks
called before series is initialized.
$.jqplot.postSeriesInitHooks
called after series is initialized.
$.jqplot.preParseSeriesOptionsHooks
called before series related options are parsed.
$.jqplot.postParseSeriesOptionsHooks
called after series related options are parsed.
$.jqplot.eventListenerHooks
called at the end of plot drawing, binds listeners to the event canvas which lays on top of the grid area.
$.jqplot.preDrawSeriesShadowHooks
called before series shadows are drawn.
$.jqplot.postDrawSeriesShadowHooks
called after series shadows are drawn.
+
+
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.
A class of a rendering engine for creating an axis label.
+
+
labelOptions
this.labelOptions = {}
Options passed to the label renderer.
+
+
label
this.label = null
Label for the axis
+
+
showLabel
this.showLabel = true
true to show the axis label.
+
+
min
this.min=null
minimum value of the axis (in data units, not pixels).
+
+
max
this.max=null
maximum value of the axis (in data units, not pixels).
+
+
autoscale
this.autoscale = false
Autoscale the axis min and max values to provide sensible tick spacing. If axis min or max are set, autoscale will be turned off. The numberTicks, tickInterval and pad options do work with autoscale, although tickInterval has not been tested yet. padMin and padMax do nothing when autoscale is on.
+
+
pad
this.pad = 1.2
Padding to extend the range above and below the data bounds. The data range is multiplied by this factor to determine minimum and maximum axis bounds. A value of 0 will be interpreted to mean no padding, and pad will be set to 1.0.
+
+
padMax
this.padMax = null
Padding to extend the range above data bounds. The top of the data range is multiplied by this factor to determine maximum axis bounds. A value of 0 will be interpreted to mean no padding, and padMax will be set to 1.0.
+
+
padMin
this.padMin = null
Padding to extend the range below data bounds. The bottom of the data range is multiplied by this factor to determine minimum axis bounds. A value of 0 will be interpreted to mean no padding, and padMin will be set to 1.0.
+
+
ticks
this.ticks = []
1D [val, val, ...] or 2D [[val, label], [val, label], ...] array of ticks for the axis. If no label is specified, the value is formatted into an appropriate label.
+
+
numberTicks
this.numberTicks
Desired number of ticks. Default is to compute automatically.
+
+
tickInterval
this.tickInterval
number of units between ticks. Mutually exclusive with numberTicks.
+
+
renderer
this.renderer = $.jqplot.LinearAxisRenderer
A class of a rendering engine that handles tick generation, scaling input data to pixel grid units and drawing the axis element.
Wether to show the ticks (both marks and labels) or not. Will not override showMark and showLabel options if specified on the ticks themselves.
+
+
showTickMarks
this.showTickMarks = true
Wether to show the tick marks (line crossing grid) or not. Overridden by showTicks and showMark option of tick itself.
+
+
showMinorTicks
this.showMinorTicks = true
Wether or not to show minor ticks. This is renderer dependent. The default $.jqplot.LinearAxisRenderer does not have minor ticks.
+
+
useSeriesColor
this.useSeriesColor = false
Use the color of the first series associated with this axis for the tick marks and line bordering this axis.
+
+
borderWidth
this.borderWidth = null
width of line stroked at the border of the axis. Defaults to the width of the grid boarder.
+
+
borderColor
this.borderColor = null
color of the border adjacent to the axis. Defaults to grid border color.
+
+
syncTicks
this.syncTicks = null
true to try and synchronize tick spacing across multiple axes so that ticks and grid lines line up. This has an impact on autoscaling algorithm, however. In general, autoscaling an individual axis will work better if it does not have to sync ticks.
+
+
tickSpacing
this.tickSpacing = 75
Approximate pixel spacing between ticks on graph. Used during autoscaling. This number will be an upper bound, actual spacing will be less.
+
+
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.
Placement of the legend. one of the compass directions: nw, n, ne, e, se, s, sw, w
+
+
labels
this.labels = []
Array of labels to use. By default the renderer will look for labels on the series. Labels specified in this array will override labels specified on the series.
+
+
showLabels
this.showLabels = true
true to show the label text on the legend.
+
+
showSwatch
this.showSwatches = true
true to show the color swatches on the legend.
+
+
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.
+
+
xoffset
this.xoffset = 0
DEPRECATED. Set the margins on the legend using the marginTop, marginLeft, etc. properties or via CSS margin styling of the .jqplot-table-legend class.
+
+
yoffset
this.yoffset = 0
DEPRECATED. Set the margins on the legend using the marginTop, marginLeft, etc. properties or via CSS margin styling of the .jqplot-table-legend class.
+
+
border
this.border
css spec for the border around the legend box.
+
+
background
this.background
css spec for the background of the legend box.
+
+
textColor
this.textColor
css color spec for the legend text.
+
+
fontFamily
this.fontFamily
css font-family spec for the legend text.
+
+
fontSize
this.fontSize
css font-size spec for the legend text.
+
+
rowSpacing
this.rowSpacing = '0.5em'
css padding-top spec for the rows in the legend.
+
+
rendererOptions
this.rendererOptions = {}
renderer specific options passed to the renderer.
+
+
predraw
Wether to draw the legend before the series or not. Used with series specific legend renderers for pie, donut, mekko charts, etc.
+
+
marginTop
this.marginTop = null
CSS margin for the legend DOM element. This will set an element CSS style for the margin which will override any style sheet setting. The default will be taken from the stylesheet.
+
+
marginRight
this.marginRight = null
CSS margin for the legend DOM element. This will set an element CSS style for the margin which will override any style sheet setting. The default will be taken from the stylesheet.
+
+
marginBottom
this.marginBottom = null
CSS margin for the legend DOM element. This will set an element CSS style for the margin which will override any style sheet setting. The default will be taken from the stylesheet.
+
+
marginLeft
this.marginLeft = null
CSS margin for the legend DOM element. This will set an element CSS style for the margin which will override any style sheet setting. The default will be taken from the stylesheet.
+
+
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.
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.
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:
wether to actually draw the line or not. Series will still be renderered, even if no line is drawn.
+
+
showMarker
this.showMarker = true
wether or not to show the markers at the data points.
+
+
index
this.index
0 based index of this series in the plot series array.
+
+
fill
this.fill = false
true or false, wether to fill under lines or in bars. May not be implemented in all renderers.
+
+
fillColor
this.fillColor
CSS color spec to use for fill under line. Defaults to line color.
+
+
fillAlpha
this.fillAlpha
Alpha transparency to apply to the fill under the line. Use this to adjust alpha separate from fill color.
+
+
fillAndStroke
this.fillAndStroke = false
If true will stroke the line (with color this.color) as well as fill under it. Applies only when fill is true.
+
+
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:
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.
+
+
neighborThreshold
this.neighborThreshold = 4
how close or far (in pixels) the cursor must be from a point marker to detect the point.
+
+
fillToZero
this.fillToZero = false
true will force bar and filled series to fill toward zero on the fill Axis.
+
+
fillToValue
this.fillToValue = 0
fill a filled series to this value on the fill axis. Works in conjunction with fillToZero, so that must be true.
+
+
fillAxis
this.fillAxis = 'y'
Either ‘x’ or ‘y’. Which axis to fill the line toward if fillToZero is true. ‘y’ means fill up/down to 0 on the y axis for this series.
+
+
useNegativeColors
this.useNegativeColors = true
true to color negative values differently in filled and bar charts.
+
+
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.
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 method requires jQuery 1.4+ Restore the series canvas order to its original order when the plot was created.
+
+
Properties
These properties are specified at the top of the options object like so:
{
+ axesDefaults:{min:0},
+ series:[{color:'#6633dd'}],
+ title: 'A Plot'
+}
+
+
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.
+
+
series
this.series = []
Array of series object options. see Series for series specific options.
+
+
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')}
up to 4 axes are supported, each with it’s own options, See Axis for axis specific options.
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.
+
+
sortData
this.sortData = true
false to not sort the data passed in by the user. Many bar, stakced and other graphs as well as many plugins depend on having sorted data.
+
+
fontSize
this.fontSize
css spec for the font-size attribute. Default for the entire plot.
+
+
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.
+
+
stackSeries
this.stackSeries = false
true or false, creates a stack or “mountain” plot. Not all series renderers may implement this option.
+
+
defaultAxisStart
this.defaultAxisStart = 1
1-D data series are internally converted into 2-D [x,y] data point arrays by jqPlot. This is the default starting value for the missing x or y value. The added data will be a monotonically increasing series (e.g. [1, 2, 3, ...]) starting at this value.
+
+
methods
+
+
init
this.init = function(
target,
data,
options
)
sets the plot target, checks data and applies user options to plot.
+
+
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.
+
+
reInitialize
this.reInitialize = function ()
reinitialize plot for replotting. not called directly.
+
+
destroy
this.destroy = function()
Releases all resources occupied by the plot
+
+
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).
+
+
draw
this.draw = function()
Draws all elements of the plot into the container. Does not clear the container before drawing.
+
+
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.
+
+
moveSeriesToBack
this.moveSeriesToBack = function (
idx
)
This method requires jQuery 1.4+ Moves the specified series canvas behind all other series canvases.
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.
+
+
restorePreviousSeriesOrder
this.restorePreviousSeriesOrder = function ()
This method requires jQuery 1.4+ Restore the series canvas order to its previous state. Useful to put a series back where it belongs after moving it to the front.
+
+
restoreOriginalSeriesOrder
this.restoreOriginalSeriesOrder = function ()
This method requires jQuery 1.4+ Restore the series canvas order to its original order when the plot was created.
This document will help you understand how jqPlot’s options relate to the API documentation and the jqPlot object itself.
this.show = false
Wether to display the axis on the graph.
this.tickRenderer = $.jqplot.AxisTickRenderer
A class of a rendering engine for creating the ticks labels displayed on the plot, See $.jqplot.AxisTickRenderer.
A “tick” object showing the value of a tick/gridline on the plot.
this.tickOptions = {}
Options that will be passed to the tickRenderer, see $.jqplot.AxisTickRenderer options.
this.labelRenderer = $.jqplot.AxisLabelRenderer
A class of a rendering engine for creating an axis label.
this.labelOptions = {}
Options passed to the label renderer.
this.label = null
Label for the axis
this.showLabel = true
true to show the axis label.
this.min=null
minimum value of the axis (in data units, not pixels).
this.max=null
maximum value of the axis (in data units, not pixels).
this.autoscale = false
Autoscale the axis min and max values to provide sensible tick spacing.
this.pad = 1.2
Padding to extend the range above and below the data bounds.
this.padMax = null
Padding to extend the range above data bounds.
this.padMin = null
Padding to extend the range below data bounds.
this.ticks = []
1D [val, val, ...] or 2D [[val, label], [val, label], ...] array of ticks for the axis.
this.numberTicks
Desired number of ticks.
this.tickInterval
number of units between ticks.
this.renderer = $.jqplot.LinearAxisRenderer
A class of a rendering engine that handles tick generation, scaling input data to pixel grid units and drawing the axis element.
this.rendererOptions = {}
renderer specific options.
this.showTicks = true
Wether to show the ticks (both marks and labels) or not.
this.showTickMarks = true
Wether to show the tick marks (line crossing grid) or not.
this.showMinorTicks = true
Wether or not to show minor ticks.
this.useSeriesColor = false
Use the color of the first series associated with this axis for the tick marks and line bordering this axis.
this.borderWidth = null
width of line stroked at the border of the axis.
this.borderColor = null
color of the border adjacent to the axis.
this.syncTicks = null
true to try and synchronize tick spacing across multiple axes so that ticks and grid lines line up.
this.tickSpacing = 75
Approximate pixel spacing between ticks on graph.
this.show = false
Wether to display the legend on the graph.
this.location = 'ne'
Placement of the legend.
this.labels = []
Array of labels to use.
this.showLabels = true
true to show the label text on the legend.
this.showSwatches = true
true to show the color swatches on the legend.
this.placement = "insideGrid"
“insideGrid” places legend inside the grid area of the plot.
this.xoffset = 0
DEPRECATED.
this.yoffset = 0
DEPRECATED.
this.border
css spec for the border around the legend box.
this.background
css spec for the background of the legend box.
this.textColor
css color spec for the legend text.
this.fontFamily
css font-family spec for the legend text.
this.fontSize
css font-size spec for the legend text.
this.rowSpacing = '0.5em'
css padding-top spec for the rows in the legend.
this.rendererOptions = {}
renderer specific options passed to the renderer.
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
CSS margin for the legend DOM element.
this.text = text
text of the title;
this.show = true
wether or not to show the title
this.fontFamily
css font-family spec for the text.
this.fontSize
css font-size spec for the text.
this.textAlign
css text-align spec for the text.
this.textColor
css color spec for the text.
this.renderer = $.jqplot.DivTitleRenderer
A class for creating a DOM element for the title, see $.jqplot.DivTitleRenderer.
The default title renderer for jqPlot.
this.rendererOptions = {}
renderer specific options passed to the renderer.
this.show = true
wether or not to draw the series.
this.xaxis = 'xaxis'
which x axis to use with this series, either ‘xaxis’ or ‘x2axis’.
this.yaxis = 'yaxis'
which y axis to use with this series, either ‘yaxis’ or ‘y2axis’.
this.renderer = $.jqplot.LineRenderer
A class of a renderer which will draw the series, see $.jqplot.LineRenderer.
The default line renderer for jqPlot, this class has no options beyond the Series class.
this.rendererOptions = {}
Options to pass on to the renderer.
this.label = ''
Line label to use in the legend.
this.showLabel = true
true to show label for this series in the legend.
this.color
css color spec for the series
this.lineWidth = 2.5
width of the line in pixels.
this.lineJoin = 'round'
Canvas lineJoin style between segments of series.
this.lineCap = 'round'
Canvas lineCap style at ends of line.
this.shadow = true
wether or not to draw a shadow on the line
this.shadowAngle = 45
Shadow angle in degrees
this.shadowOffset = 1.25
Shadow offset from line in pixels
this.shadowDepth = 3
Number of times shadow is stroked, each stroke offset shadowOffset from the last.
this.shadowAlpha = '0.1'
Alpha channel transparency of shadow.
this.breakOnNull = false
Wether line segments should be be broken at null value.
this.markerRenderer = $.jqplot.MarkerRenderer
A class of a renderer which will draw marker (e.g.
this.markerOptions = {}
renderer specific options to pass to the markerRenderer, see $.jqplot.MarkerRenderer.
The default jqPlot marker renderer, rendering the points on the line.
this.showLine = true
wether to actually draw the line or not.
this.showMarker = true
wether or not to show the markers at the data points.
this.index
0 based index of this series in the plot series array.
this.fill = false
true or false, wether to fill under lines or in bars.
this.fillColor
CSS color spec to use for fill under line.
this.fillAlpha
Alpha transparency to apply to the fill under the line.
this.fillAndStroke = false
If true will stroke the line (with color this.color) as well as fill under it.
this.disableStack = false
true to not stack this series with other series in the plot.
this.neighborThreshold = 4
how close or far (in pixels) the cursor must be from a point marker to detect the point.
this.fillToZero = false
true will force bar and filled series to fill toward zero on the fill Axis.
this.fillToValue = 0
fill a filled series to this value on the fill axis.
this.fillAxis = 'y'
Either ‘x’ or ‘y’.
this.useNegativeColors = true
true to color negative values differently in filled and bar charts.
this.drawGridlines = true
wether to draw the gridlines on the plot.
this.gridLineColor = '#cccccc'
color of the grid lines.
this.gridLineWidth = 1.0
width of the grid lines.
this.background = '#fffdf6'
css spec for the background color.
this.borderColor = '#999999'
css spec for the color of the grid border.
this.borderWidth = 2.0
width of the border in pixels.
this.drawBorder = true
True to draw border around grid.
this.shadow = true
wether to show a shadow behind the grid.
this.shadowAngle = 45
shadow angle in degrees
this.shadowOffset = 1.5
Offset of each shadow stroke from the border in pixels
this.shadowWidth = 3
width of the stoke for the shadow
this.shadowDepth = 3
Number of times shadow is stroked, each stroke offset shadowOffset from the last.
this.shadowColor = null
an optional css color spec for the shadow in ‘rgba(n, n, n, n)’ form
this.shadowAlpha = '0.07'
Alpha channel transparency of shadow.
this.renderer = $.jqplot.CanvasGridRenderer
Instance of a renderer which will actually render the grid, see $.jqplot.CanvasGridRenderer.
The default jqPlot grid renderer, creating a grid on a canvas element.
this.rendererOptions = {}
Options to pass on to the renderer, see $.jqplot.CanvasGridRenderer.
this.data = []
user’s data.
seriesDefaults: {}, series:[] }
default options that will be applied to all series.
this.series = []
Array of series object 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')}
up to 4 axes are supported, each with it’s own options, See Axis for axis specific options.
An individual axis object.
this.grid = new Grid()
See Grid for grid specific options.
Object representing the grid on which the plot is drawn.
this.legend = new Legend()
see $.jqplot.TableLegendRenderer
this.seriesColors = $.jqplot.config.defaultColors
Ann array of CSS color specifications that will be applied, in order, to the series in the plot.
this.sortData = true
false to not sort the data passed in by the user.
this.fontSize
css spec for the font-size attribute.
this.title = new Title()
Title object.
this.stackSeries = false
true or false, creates a stack or “mountain” plot.
this.defaultAxisStart = 1
1-D data series are internally converted into 2-D [x,y] data point arrays by jqPlot.
this.init = function(
target,
data,
options
)
sets the plot target, checks data and applies user options to plot.
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.
this.reInitialize = function ()
reinitialize plot for replotting.
this.destroy = function()
Releases all resources occupied by the plot
this.replot = function(
options
)
Does a reinitialization of the plot followed by a redraw.
this.redraw = function(
clear
)
Empties the plot target div and redraws the plot.
this.draw = function()
Draws all elements of the plot into the container.
this.drawSeries = function(
options,
idx
)
Redraws all or just one series on the plot.
this.moveSeriesToFront = function (
idx
)
This method requires jQuery 1.4+ Moves the specified series canvas in front of all other series canvases.
this.moveSeriesToBack = function (
idx
)
This method requires jQuery 1.4+ Moves the specified series canvas behind all other series canvases.
this.restorePreviousSeriesOrder = function ()
This method requires jQuery 1.4+ Restore the series canvas order to its previous state.
this.restoreOriginalSeriesOrder = function ()
This method requires jQuery 1.4+ Restore the series canvas order to its original order when the plot was created.
converts any arbitrary data values to grid coordinates and returns them.
+
+
Properties
+
+
highlightMouseOver
this.highlightMouseOver = true
True to highlight area on a filled plot when moused over. This must be false to enable highlightMouseDown to highlight when clicking on an area on a filled plot.
+
+
highlightMouseDown
this.highlightMouseDown = false
True to highlight when a mouse button is pressed over an area on a filled plot. This will be disabled if highlightMouseOver is true.
+
+
highlightColor
this.highlightColor = null
color to use when highlighting an area on a filled 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.
This will ensure that there is always a tick mark at 100.
+
+
Properties
+
+
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.
+
+
breakTickLabel
this.breakTickLabel = "&asymp
Label to use at the axis break if breakPoints are specified.
+
+
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.
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.
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:
”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:
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.
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):
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:
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:
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:
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:
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:
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:
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:
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:
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.
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]].
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.
an array of colors to use when highlighting a bar.
+
+
Properties
+
+
barPadding
this.barPadding = 8
Number of pixels between adjacent bars at the same axis value.
+
+
barMargin
this.barMargin = 10
Number of pixels between groups of bars at adjacent axis values.
+
+
barDirection
this.barDirection = 'vertical'
’vertical’ = up and down bars, ‘horizontal’ = side to side bars
+
+
barWidth
this.barWidth = null
Width of the bar in pixels (auto by devaul). null = calculated automatically.
+
+
shadowOffset
this.shadowOffset = 2
offset of the shadow from the slice and offset of each succesive stroke of the shadow from the last.
+
+
shadowDepth
this.shadowDepth = 5
number of strokes to apply to the shadow, each stroke offset shadowOffset from the last.
+
+
shadowAlpha
this.shadowAlpha = 0.08
transparency of the shadow (0 = transparent, 1 = opaque)
+
+
waterfall
this.waterfall = false
true to enable waterfall plot.
+
+
groups
this.groups = 1
group bars into this many groups
+
+
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.
+
+
highlightMouseOver
this.highlightMouseOver = true
True to highlight slice when moused over. This must be false to enable highlightMouseDown to highlight when clicking on a slice.
+
+
highlightMouseDown
this.highlightMouseDown = false
True to highlight when a mouse button is pressed over a slice. This will be disabled if highlightMouseOver is true.
+
+
highlightColors
this.highlightColors = []
an array of colors to use when highlighting a bar.
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:
default css styles that will be applied to all data blocks. these values will be overridden by css styles supplied with the individulal data points.
+
+
escapeHtml
this.escapeHtml = false
true to escape html in the box label.
+
+
insertBreaks
this.insertBreaks = true
true to turn spaces in data block label into html breaks <br />.
+
+
varyBlockColors
this.varyBlockColors = false
true to vary the color of each block in this series according to the seriesColors array. False to set each block to the color specified on this series. This has no effect if a css background color option is specified in the renderer css options.
+
+
Methods
+
+
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.
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:
[[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:
True to show labels on bubbles (if any), false to not show.
+
+
Properties
+
+
varyBubbleColors
this.varyBubbleColors = true
True to vary the color of each bubble in this series according to the seriesColors array. False to set each bubble to the color specified on this series. This has no effect if a css background color option is specified in the renderer css options.
+
+
autoscaleBubbles
this.autoscaleBubbles = true
True to scale the bubble radius based on plot size. False will use the radius value as provided as a raw pixel value for bubble radius.
+
+
autoscaleMultiplier
this.autoscaleMultiplier = 1.0
Multiplier the bubble size if autoscaleBubbles is true.
+
+
autoscalePointsFactor
this.autoscalePointsFactor = -0.07
Factor which decreases bubble size based on how many bubbles on on the chart. 0 means no adjustment for number of bubbles. Negative values will decrease size of bubbles as more bubbles are added. Values between 0 and -0.2 should work well.
+
+
escapeHtml
this.escapeHtml = true
True to escape html in bubble label text.
+
+
highlightMouseOver
this.highlightMouseOver = true
True to highlight bubbles when moused over. This must be false to enable highlightMouseDown to highlight when clicking on a slice.
+
+
highlightMouseDown
this.highlightMouseDown = false
True to highlight when a mouse button is pressed over a bubble. This will be disabled if highlightMouseOver is true.
+
+
highlightColors
this.highlightColors = []
An array of colors to use when highlighting a slice. Calculated automatically if not supplied.
+
+
bubbleAlpha
this.bubbleAlpha = 1.0
Alpha transparency to apply to all bubbles in this series.
+
+
highlightAlpha
this.highlightAlpha = null
Alpha transparency to apply when highlighting bubble. Set to value of bubbleAlpha by default.
+
+
bubbleGradients
this.bubbleGradients = false
True to color the bubbles with gradient fills instead of flat colors. NOT AVAILABLE IN IE due to lack of excanvas support for radial gradient fills. will be ignored in IE.
+
+
showLabels
this.showLabels = true
True to show labels on bubbles (if any), false to not show.
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.
CSS spec for the font-family css attribute. Applies only to browsers supporting native font rendering in the canvas tag. Currently Mozilla 3.5 and Safari 4.
+
+
fontSize
this.fontSize = '11pt'
CSS spec for font size.
+
+
fontWeight
this.fontWeight = 'normal'
CSS spec for fontWeight: normal, bold, bolder, lighter or a number 100
900
+
+
fontStretch
this.fontStretch = 1.0
Multiplier to condense or expand font width. Applies only to browsers which don’t support canvas native font rendering.
+
+
textColor
this.textColor = '#666666'
css spec for the color attribute.
+
+
enableFontSupport
this.enableFontSupport = true
true to turn on native canvas font support in Mozilla 3.5+ and Safari 4+. If true, label will be drawn with canvas tag native support for fonts. If false, label will be drawn with Hershey font metrics.
+
+
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.
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.
Multiplier to condense or expand font width. Applies only to browsers which don’t support canvas native font rendering.
+
+
textColor
this.textColor = '#666666'
css spec for the color attribute.
+
+
enableFontSupport
this.enableFontSupport = true
true to turn on native canvas font support in Mozilla 3.5+ and Safari 4+. If true, tick label will be drawn with canvas tag native support for fonts. If false, tick label will be drawn with Hershey font metrics.
+
+
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.
Optional name for this overlay object. Can be later used to retrieve the object by name.
+
+
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. 0 = transparent.
+
+
xaxis
X axis to use for positioning/scaling the line.
+
+
yaxis
Y axis to use for positioning/scaling the line.
+
+
dashPattern
dashPattern: [8,8] }
Array of line, space settings in pixels. Default is 8 pixel of line, 8 pixel of space. Note, limit to a 2 element array b/c of bug with higher order arrays.
Optional name for this overlay object. Can be later used to retrieve the object by name.
+
+
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. 0 = transparent.
+
+
xaxis
X axis to use for positioning/scaling the line.
+
+
yaxis
Y axis to use for positioning/scaling the line.
+
+
dashPattern
dashPattern: [8,8] }
Array of line, space settings in pixels. Default is 8 pixel of line, 8 pixel of space. Note, limit to a 2 element array b/c of bug with higher order arrays.
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;
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:
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.
links targetPlot to controllerPlot so that plot zooming of targetPlot will be controlled by zooming on the controllerPlot.
+
+
Properties
+
+
style
this.style = 'crosshair'
CSS spec for cursor style
+
+
show
this.show = $.jqplot.config.enablePlugins
wether to show the cursor or not.
+
+
showTooltip
this.showTooltip = true
show a cursor position tooltip. Location of the tooltip will be controlled by followMouse and tooltipLocation.
+
+
followMouse
this.followMouse = false
Tooltip follows the mouse, it is not at a fixed location. Tooltip will show on the grid at the location given by tooltipLocation, offset from the grid edge by tooltipOffset.
+
+
tooltipLocation
this.tooltipLocation = 'se'
Where to position tooltip. If followMouse is true, this is relative to the cursor, otherwise, it is relative to the grid. One of ‘n’, ‘ne’, ‘e’, ‘se’, ‘s’, ‘sw’, ‘w’, ‘nw’
+
+
tooltipOffset
this.tooltipOffset = 6
Pixel offset of tooltip from the grid boudaries or cursor center.
+
+
showTooltipGridPosition
this.showTooltipGridPosition = false
show the grid pixel coordinates of the mouse.
+
+
showTooltipUnitPosition
this.showTooltipUnitPosition = true
show the unit (data) coordinates of the mouse.
+
+
showTooltipDataPosition
this.showTooltipDataPosition = false
Used with showVerticalLine to show intersecting data points in the tooltip.
Use the x and y axes formatters to format the text in the tooltip.
+
+
tooltipAxisGroups
this.tooltipAxisGroups = []
Show position for the specified axes. This is an array like [[‘xaxis’, ‘yaxis’], [‘xaxis’, ‘y2axis’]] Default is to compute automatically for all visible axes.
+
+
zoom
this.zoom = false
Enable plot zooming.
+
+
looseZoom
this.looseZoom = false
Will expand zoom range to provide more rounded tick values. Works only with linear axes and date axes.
+
+
clickReset
this.clickReset = false
Will reset plot zoom if single click on plot without drag.
+
+
dblClickReset
this.dblClickReset = true
Will reset plot zoom if double click on plot without drag.
+
+
showVerticalLine
this.showVerticalLine = false
draw a vertical line across the plot which follows the cursor. When the line is near a data point, a special legend and/or tooltip can be updated with the data values.
+
+
showHorizontalLine
this.showHorizontalLine = false
draw a horizontal line across the plot which follows the cursor.
+
+
constrainZoomTo
this.constrainZoomTo = 'none'
’none’, ‘x’ or ‘y’
+
+
intersectionThreshold
this.intersectionThreshold = 2
pixel distance from data point or marker to consider cursor lines intersecting with point. If data point markers are not shown, this should be >= 1 or will often miss point intersections.
+
+
showCursorLegend
this.showCursorLegend = false
Replace the plot legend with an enhanced legend displaying intersection information.
Format string used in the cursor legend. If showTooltipDataPosition is true, this will also be the default format string used by tooltipFormatString.
+
+
constrainOutsideZoom
this.constrainOutsideZoom = true
True to limit actual zoom area to edges of grid, even when zooming outside of plot area. That is, can’t zoom out by mousing outside plot.
+
+
showTooltipOutsideZoom
this.showTooltipOutsideZoom = false
True will keep updating the tooltip when zooming of the grid.
+
+
methods
+
+
$.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.
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.
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
A class of a rendering engine for creating the ticks labels displayed on the plot, See $.jqplot.AxisTickRenderer.
+
+
Properties
+
+
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;
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.
Outer diameter of the donut, auto computed by default
+
+
innerDiameter
this.innerDiameter = null
Inner diameter of the donut, auto calculated by default. If specified will override thickness value.
+
+
thickness
this.thickness = null
thickness of the donut, auto computed by default Overridden by if innerDiameter is specified.
+
+
padding
this.padding = 20
padding between the donut and plot edges, legend, etc.
+
+
sliceMargin
this.sliceMargin = 0
angular spacing between donut slices in degrees.
+
+
ringMargin
this.ringMargin = null
pixel distance between rings, or multiple series in a donut plot. null will compute ringMargin based on sliceMargin.
+
+
fill
this.fill = true
true or false, wether to fil the slices.
+
+
shadowOffset
this.shadowOffset = 2
offset of the shadow from the slice and offset of each succesive stroke of the shadow from the last.
+
+
shadowAlpha
this.shadowAlpha = 0.07
transparency of the shadow (0 = transparent, 1 = opaque)
+
+
shadowDepth
this.shadowDepth = 5
number of strokes to apply to the shadow, each stroke offset shadowOffset from the last.
+
+
highlightMouseOver
this.highlightMouseOver = true
True to highlight slice when moused over. This must be false to enable highlightMouseDown to highlight when clicking on a slice.
+
+
highlightMouseDown
this.highlightMouseDown = false
True to highlight when a mouse button is pressed over a slice. This will be disabled if highlightMouseOver is true.
+
+
highlightColors
this.highlightColors = []
an array of colors to use when highlighting a slice.
+
+
dataLabels
this.dataLabels = 'percent'
Either ‘label’, ‘value’, ‘percent’ or an array of labels to place on the pie slices. Defaults to percentage of each pie slice.
+
+
showDataLabels
this.showDataLabels = false
true to show data labels on slices.
+
+
dataLabelFormatString
this.dataLabelFormatString = null
Format string for data labels. If none, ‘%s’ is used for “label” and for arrays, ‘%d’ for value and ‘%d%%’ for percentage.
+
+
dataLabelThreshold
this.dataLabelThreshold = 3
Threshhold in percentage (0
100) of pie area, below which no label will be displayed. This applies to all label types, not just to percentage labels.
+
+
dataLabelPositionFactor
this.dataLabelPositionFactor = 0.4
A Multiplier (0-1) of the pie radius which controls position of label on slice. Increasing will slide label toward edge of pie, decreasing will slide label toward center of pie.
+
+
dataLabelNudge
this.dataLabelNudge = 0
Number of pixels to slide the label away from (+) or toward (-) the center of the pie.
+
+
startAngle
this.startAngle = 0
Angle to start drawing donut in degrees. According to orientation of canvas coordinate system: 0 = on the positive x axis -90 = on the positive y axis. 90 = on the negaive y axis. 180 or - 180 = on the negative x axis.
+
+
$.jqplot.DonutLegendRenderer
Legend Renderer specific to donut plots. Set by default when user creates a donut plot.
true to toggle series with a show/hide method only and not allow fading in/out.
+
+
Properties
+
+
numberRows
this.numberRows = null
Maximum number of rows in the legend. 0 or null for unlimited.
+
+
numberColumns
this.numberColumns = null
Maximum number of columns in the legend. 0 or null for unlimited.
+
+
seriesToggle
this.seriesToggle = 'normal'
false to not enable series on/off toggling on the legend. true or a fadein/fadeout speed (number of milliseconds or ‘fast’, ‘normal’, ‘slow’) to enable show/hide of series on click of legend item.
+
+
disableIEFading
this.disableIEFading = true
true to toggle series with a show/hide method only and not allow fading in/out. This is to overcome poor performance of fade in some versions of IE.
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.
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:
This option requires jQuery 1.4+ True to bring the series of the highlighted point to the front of other series.
+
+
Properties
+
+
show
this.show = $.jqplot.config.enablePlugins
true to show the highlight.
+
+
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.
+
+
showMarker
this.showMarker = true
true to show the marker
+
+
lineWidthAdjust
this.lineWidthAdjust = 2.5
Pixels to add to the lineWidth of the highlight.
+
+
sizeAdjust
this.sizeAdjust = 5
Pixels to add to the overall size of the highlight.
+
+
showTooltip
this.showTooltip = true
Show a tooltip with data point values.
+
+
tooltipLocation
this.tooltipLocation = 'nw'
Where to position tooltip, ‘n’, ‘ne’, ‘e’, ‘se’, ‘s’, ‘sw’, ‘w’, ‘nw’
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.
+
+
yvalues
this.yvalues = 1
Number of y values to expect in the data point array. Typically this is 1. Certain plots, like OHLC, will have more y values in each data point array.
+
+
bringSeriesToFront
this.bringSeriesToFront = false
This option requires jQuery 1.4+ True to bring the series of the highlighted point to the front of other series.
A class of a rendering engine for creating the ticks labels displayed on the plot, See $.jqplot.AxisTickRenderer.
+
+
axisDefaults
Default properties which will be applied directly to the series.
+
+
Properties
Properties
/ base
the logarithmic base, commonly 2, 10 or Math.E
tickDistribution
’even’ or ‘power’. ‘even’ gives equal pixel spacing of the ticks on the plot. ‘power’ gives ticks in powers of 10.
+
+
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;
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.
How to space the ticks on the axis. ‘bar’ will place a tick at the width of each bar. This is the default for the x axis. ‘even’ will place ticks at even intervals. This is the default for x2 axis and y axis. y axis cannot be changed.
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:
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.
converts the user data values to grid coordinates and stores them in the gridData array. Will convert user data into appropriate rectangles. Called with scope of a series.
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.
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:
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.
Outer diameter of the pie, auto computed by default
+
+
padding
this.padding = 20
padding between the pie and plot edges, legend, etc.
+
+
sliceMargin
this.sliceMargin = 0
angular spacing between pie slices in degrees.
+
+
fill
this.fill = true
true or false, wether to fil the slices.
+
+
shadowOffset
this.shadowOffset = 2
offset of the shadow from the slice and offset of each succesive stroke of the shadow from the last.
+
+
shadowAlpha
this.shadowAlpha = 0.07
transparency of the shadow (0 = transparent, 1 = opaque)
+
+
shadowDepth
this.shadowDepth = 5
number of strokes to apply to the shadow, each stroke offset shadowOffset from the last.
+
+
highlightMouseOver
this.highlightMouseOver = true
True to highlight slice when moused over. This must be false to enable highlightMouseDown to highlight when clicking on a slice.
+
+
highlightMouseDown
this.highlightMouseDown = false
True to highlight when a mouse button is pressed over a slice. This will be disabled if highlightMouseOver is true.
+
+
highlightColors
this.highlightColors = []
an array of colors to use when highlighting a slice.
+
+
dataLabels
this.dataLabels = 'percent'
Either ‘label’, ‘value’, ‘percent’ or an array of labels to place on the pie slices. Defaults to percentage of each pie slice.
+
+
showDataLabels
this.showDataLabels = false
true to show data labels on slices.
+
+
dataLabelFormatString
this.dataLabelFormatString = null
Format string for data labels. If none, ‘%s’ is used for “label” and for arrays, ‘%d’ for value and ‘%d%%’ for percentage.
+
+
dataLabelThreshold
this.dataLabelThreshold = 3
Threshhold in percentage (0-100) of pie area, below which no label will be displayed. This applies to all label types, not just to percentage labels.
+
+
dataLabelPositionFactor
this.dataLabelPositionFactor = 0.52
A Multiplier (0-1) of the pie radius which controls position of label on slice. Increasing will slide label toward edge of pie, decreasing will slide label toward center of pie.
+
+
dataLabelNudge
this.dataLabelNudge = 2
Number of pixels to slide the label away from (+) or toward (-) the center of the pie.
+
+
dataLabelCenterOn
this.dataLabelCenterOn = true
True to center the data label at its position. False to set the inside facing edge of the label at its position.
+
+
startAngle
this.startAngle = 0
Angle to start drawing pie in degrees. According to orientation of canvas coordinate system: 0 = on the positive x axis -90 = on the positive y axis. 90 = on the negaive y axis. 180 or - 180 = on the negative x axis.
+
+
$.jqplot.PieLegendRenderer
Legend Renderer specific to pie plots. Set by default when user creates a pie plot.
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:
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.
CSS color spec for the trend line. By default this wil be the same color as the primary line.
+
+
renderer
this.renderer = new $.jqplot.LineRenderer()
Renderer to use to draw the trend line. The data series that is plotted may not be rendered as a line. Therefore, we use our own line renderer here to draw a trend line.
+
+
rendererOptions
this.rendererOptions = {marker:{show:false}}
Options to pass to the line renderer. By default, markers are not shown on trend lines.
+
+
label
this.label = ''
Label for the trend line to use in the legend.
+
+
type
this.type = 'linear'
Either ‘exponential’, ‘exp’, or ‘linear’.
+
+
shadow
this.shadow = true
true or false, wether or not to show the shadow.
+
+
markerRenderer
this.markerRenderer = {show:false}
Renderer to use to draw markers on the line. I think this is wrong.
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 1.4.4 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:
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:
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:
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:
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:
Create a new theme based on the default theme, adding it the themeEngine.
+
+
+
+
this.redraw = function(
clear
)
Empties the plot target div and redraws the plot.
this.reInitialize = function ()
reinitialize plot for replotting.
$.jqplot.ThemeEngine.prototype.remove = function(
name
)
Remove the given theme from the themeEngine.
$.jqplot.ThemeEngine.prototype.rename = function (
oldName,
newName
)
Rename a theme.
this.replot = function(
options
)
Does a reinitialization of the plot followed by a redraw.
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.
this.restoreOriginalSeriesOrder = function ()
This method requires jQuery 1.4+ Restore the series canvas order to its original order when the plot was created.
this.restorePreviousSeriesOrder = function ()
This method requires jQuery 1.4+ Restore the series canvas order to its previous state.
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.
+
+
+
+
this.activeTheme=null
Pointer to currently active theme
called at the end of legend draw, so plugins can add rows to the legend table.
this.alpha = 0.07
alpha transparency of shadow stroke.
this.angle = 0
angle of text, measured clockwise from x axis.
this.angle = 0
angle of text, measured clockwise from x axis.
this.angle = 45
Angle of the shadow in degrees.
this.autoscale = false
Autoscale the axis min and max values to provide sensible tick spacing.
this.autoscaleBubbles = true
True to scale the bubble radius based on plot size.
this.autoscaleMultiplier = 1.0
Multiplier the bubble size if autoscaleBubbles is true.
this.autoscalePointsFactor = -0.07
Factor which decreases bubble size based on how many bubbles on on the chart.
See jqPlot Options for a list of options available thorugh the options object (not complete yet!)
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')}
up to 4 axes are supported, each with it’s own options, See Axis for axis specific options.
default options that will be applied to all axes.
An individual axis object.
Default properties which will be applied directly to the series.
+
+
+
+
this.background = "#efefef"
background color of the inside of the gauge.
this.background = '#fffdf6'
css spec for the background color.
this.background
css spec for the background of the legend box.
this.barDirection = 'vertical'
‘vertical’ = up and down bars, ‘horizontal’ = side to side bars
padding between the funnel and plot edges, legend, etc.
this.padding = null
padding between the meterGauge and plot edges, auto calculated by default.
this.padding = 20
padding between the pie and plot edges, legend, etc.
this.padMax = null
Padding to extend the range above data bounds.
this.padMin = null
Padding to extend the range below data bounds.
this.pegNeedle = true
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.placement = "insideGrid"
“insideGrid” places legend inside the grid area of the plot.
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.
this.prefix = ''
String to prepend to the tick label.
this.prefix = ''
String to prepend to the tick label.
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.
this.pt2px = null
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.redraw = function(
clear
)
Empties the plot target div and redraws the plot.
this.reInitialize = function ()
reinitialize plot for replotting.
$.jqplot.ThemeEngine.prototype.remove = function(
name
)
Remove the given theme from the themeEngine.
$.jqplot.ThemeEngine.prototype.rename = function (
oldName,
newName
)
Rename a theme.
this.renderer = new $.jqplot.LineRenderer()
Renderer to use to draw the trend line.
this.renderer = $.jqplot.LinearAxisRenderer
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.CanvasGridRenderer
Instance of a renderer which will actually render the grid, see $.jqplot.CanvasGridRenderer.
this.renderer = $.jqplot.LineRenderer
A class of a renderer which will draw the series, see $.jqplot.LineRenderer.
this.renderer = $.jqplot.DivTitleRenderer
A class for creating a DOM element for the title, see $.jqplot.DivTitleRenderer.
this.rendererOptions = {marker:{show:false}}
Options to pass to the line renderer.
this.rendererOptions = {}
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.replot = function(
options
)
Does a reinitialization of the plot followed by a redraw.
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.
this.restoreOriginalSeriesOrder = function ()
This method requires jQuery 1.4+ Restore the series canvas order to its original order when the plot was created.
this.restorePreviousSeriesOrder = function ()
This method requires jQuery 1.4+ Restore the series canvas order to its previous state.
this.ringColor = "#BBC6D0"
color of the outer ring, hub, and needle of the gauge.
this.ringMargin = null
pixel distance between rings, or multiple series in a donut plot.
Autoscale the axis min and max values to provide sensible tick spacing.
this.autoscaleBubbles = true
True to scale the bubble radius based on plot size.
this.autoscaleMultiplier = 1.0
Multiplier the bubble size if autoscaleBubbles is true.
this.autoscalePointsFactor = -0.07
Factor which decreases bubble size based on how many bubbles on on the chart.
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')}
up to 4 axes are supported, each with it’s own options, See Axis for axis specific options.
default options that will be applied to all axes.
Default properties which will be applied directly to the series.
+
+
+
+
this.background = "#efefef"
background color of the inside of the gauge.
this.background = '#fffdf6'
css spec for the background color.
this.background
css spec for the background of the legend box.
this.barDirection = 'vertical'
‘vertical’ = up and down bars, ‘horizontal’ = side to side bars
+
+
+
\ No newline at end of file
diff --git a/html/js/jqplot/examples/OHLC2.html b/html/js/jqplot/examples/OHLC2.html
new file mode 100644
index 000000000..372a9bcfd
--- /dev/null
+++ b/html/js/jqplot/examples/OHLC2.html
@@ -0,0 +1,194 @@
+
+
+
+
+
+ Open Hi Low Close and Canclestick Charts
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/html/js/jqplot/examples/ajax-loader.gif b/html/js/jqplot/examples/ajax-loader.gif
new file mode 100644
index 000000000..3288d1035
Binary files /dev/null and b/html/js/jqplot/examples/ajax-loader.gif differ
diff --git a/html/js/jqplot/examples/area.html b/html/js/jqplot/examples/area.html
new file mode 100644
index 000000000..40b1235b1
--- /dev/null
+++ b/html/js/jqplot/examples/area.html
@@ -0,0 +1,108 @@
+
+
+
+
+
+ Filled (Area) Charts
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
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.
+
+
+
+
+
\ No newline at end of file
diff --git a/html/js/jqplot/examples/barLinePieStack.html b/html/js/jqplot/examples/barLinePieStack.html
new file mode 100644
index 000000000..6287ca783
--- /dev/null
+++ b/html/js/jqplot/examples/barLinePieStack.html
@@ -0,0 +1,230 @@
+
+
+
+
+
+ Multiple Chart types on same page
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/html/js/jqplot/examples/barMissingValues.html b/html/js/jqplot/examples/barMissingValues.html
new file mode 100644
index 000000000..54b05a437
--- /dev/null
+++ b/html/js/jqplot/examples/barMissingValues.html
@@ -0,0 +1,63 @@
+
+
+
+
+
+ Simple Test
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/html/js/jqplot/examples/barTest.html b/html/js/jqplot/examples/barTest.html
new file mode 100644
index 000000000..889038689
--- /dev/null
+++ b/html/js/jqplot/examples/barTest.html
@@ -0,0 +1,307 @@
+
+
+
+
+
+ Bar Charts
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
To create bar plots, you have to include the "jqplot.barRenderer.js" file in your source.
+
+
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.
+
+
+
+
+
+
\ No newline at end of file
diff --git a/html/js/jqplot/examples/barTest2.html b/html/js/jqplot/examples/barTest2.html
new file mode 100644
index 000000000..b71cda394
--- /dev/null
+++ b/html/js/jqplot/examples/barTest2.html
@@ -0,0 +1,103 @@
+
+
+
+
+
+
+ Bar Charts
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/html/js/jqplot/examples/bezierCurve.html b/html/js/jqplot/examples/bezierCurve.html
new file mode 100644
index 000000000..0e89295ff
--- /dev/null
+++ b/html/js/jqplot/examples/bezierCurve.html
@@ -0,0 +1,96 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
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.
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.
Note that jqPlot converts the datetime strings into timestamps internally, so further explicit modification of the x value (date value) of series data points will have to be with integer time stamp data. So, you would do something like:
+
+
+
+
\ No newline at end of file
diff --git a/html/js/jqplot/examples/blockPlot.html b/html/js/jqplot/examples/blockPlot.html
new file mode 100644
index 000000000..daea4e85d
--- /dev/null
+++ b/html/js/jqplot/examples/blockPlot.html
@@ -0,0 +1,149 @@
+
+
+
+
+
+ Simple Test
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
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.
+
+
+
+
+
\ No newline at end of file
diff --git a/html/js/jqplot/examples/breakOnNull.html b/html/js/jqplot/examples/breakOnNull.html
new file mode 100644
index 000000000..d77bce28d
--- /dev/null
+++ b/html/js/jqplot/examples/breakOnNull.html
@@ -0,0 +1,51 @@
+
+
+
+
+
+ Break On Null Test
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/html/js/jqplot/examples/bubbleChart2.html b/html/js/jqplot/examples/bubbleChart2.html
new file mode 100644
index 000000000..38f021411
--- /dev/null
+++ b/html/js/jqplot/examples/bubbleChart2.html
@@ -0,0 +1,253 @@
+
+
+
+
+
+ Bubble Chart Examples
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
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.
+
+
+
+
+
+
+
+
+
Company
R Value
+
+
+
+
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 because they are not supported in the excanvas emulation layer used by jqPlot to render charts in IE. jqPlot renders charts using the HTML canvas element which is supported by nearly every browser except IE. Excanvas translates the canvas rendering to VML rendering for IE, 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.
+
+
+
+
+
\ No newline at end of file
diff --git a/html/js/jqplot/examples/bubblechart.html b/html/js/jqplot/examples/bubblechart.html
new file mode 100644
index 000000000..abb8f68aa
--- /dev/null
+++ b/html/js/jqplot/examples/bubblechart.html
@@ -0,0 +1,69 @@
+
+
+
+
+
+ Bubble Chart Test
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/html/js/jqplot/examples/candlestickCanvasOverlay.html b/html/js/jqplot/examples/candlestickCanvasOverlay.html
new file mode 100644
index 000000000..20dec4cb3
--- /dev/null
+++ b/html/js/jqplot/examples/candlestickCanvasOverlay.html
@@ -0,0 +1,221 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/html/js/jqplot/examples/canvasOverlay.html b/html/js/jqplot/examples/canvasOverlay.html
new file mode 100644
index 000000000..57689b981
--- /dev/null
+++ b/html/js/jqplot/examples/canvasOverlay.html
@@ -0,0 +1,238 @@
+
+
+
+
+
+
+ Bar Charts
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/html/js/jqplot/examples/catchError.html b/html/js/jqplot/examples/catchError.html
new file mode 100644
index 000000000..16303785e
--- /dev/null
+++ b/html/js/jqplot/examples/catchError.html
@@ -0,0 +1,53 @@
+
+
+
+
+
+ Simple Test
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/html/js/jqplot/examples/categoryHorizontalBar.html b/html/js/jqplot/examples/categoryHorizontalBar.html
new file mode 100644
index 000000000..353c924c7
--- /dev/null
+++ b/html/js/jqplot/examples/categoryHorizontalBar.html
@@ -0,0 +1,81 @@
+
+
+
+
+ Test 3
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/html/js/jqplot/examples/categoryVsLinearAxes.html b/html/js/jqplot/examples/categoryVsLinearAxes.html
new file mode 100644
index 000000000..054ad5401
--- /dev/null
+++ b/html/js/jqplot/examples/categoryVsLinearAxes.html
@@ -0,0 +1,73 @@
+
+
+
+
+
+ Simple Test
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/html/js/jqplot/examples/chartInTable.html b/html/js/jqplot/examples/chartInTable.html
new file mode 100644
index 000000000..6e2021eb7
--- /dev/null
+++ b/html/js/jqplot/examples/chartInTable.html
@@ -0,0 +1,34 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
JSON data formatted according the the City Index API spec can be read in directly by jqPlot thorugh the use of the dataRenderer option and a custom ciParser data renderer. The ciParser data renderer will translate either a JSON encoded string or JSON object.
+
+
To use the the ciParser, include the jqplot.json2.js and jqplot.ciParser.js files. Specify the $.jqplot.ciParser as the renderer in the plot's "dataRenderer" option. The City Index JSON data can then be passed into the jqplot function as shown in the examples below:
+
+
Here, a stringified JSON data objects is passed into the jqplot function.
+
+
+
This example uses the same City Index data format, but passes in a JSON object instead of a string.
+
+
+
+
\ No newline at end of file
diff --git a/html/js/jqplot/examples/customHighlighterCursorTrendline.html b/html/js/jqplot/examples/customHighlighterCursorTrendline.html
new file mode 100644
index 000000000..07a4f630e
--- /dev/null
+++ b/html/js/jqplot/examples/customHighlighterCursorTrendline.html
@@ -0,0 +1,69 @@
+
+
+
+
+
+ Simple Test
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/html/js/jqplot/examples/customPieTests.html b/html/js/jqplot/examples/customPieTests.html
new file mode 100644
index 000000000..6ea6974c4
--- /dev/null
+++ b/html/js/jqplot/examples/customPieTests.html
@@ -0,0 +1,72 @@
+
+
+
+
+
+ Simple Test
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/html/js/jqplot/examples/dataLabels.html b/html/js/jqplot/examples/dataLabels.html
new file mode 100644
index 000000000..9effc0edd
--- /dev/null
+++ b/html/js/jqplot/examples/dataLabels.html
@@ -0,0 +1,190 @@
+
+
+
+
+
+ Simple Test
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Data labels can be automatically added to pie chart and donut chart slices as well as funnel chart areas. what labels are displayed is controlled by the series "dataLabel" option. There are 4 types of data labels to display:
+
+
"label" - label of the point.
+
"value" - value of the point.
+
"percent" - percent of the whole (pie/donut/funnel) of the point.
+
Array - custom array of data point labels, one for each point.
+
+
+
Formatting of labels is controlled through the series "dataLabelsFormatString" option. By default, the format string will be set based on the label type:
+
+
"label" - '%s', raw string.
+
"value" - '%d', integer format.
+
"percent" - '%d%%', integer with % sign appended.
+
Array - '%s', raw string.
+
+
+
The following examples will clarify usage as well as other options. By default, data labels are turned off. They are enabled by setting the "showDataLabels: true" option. Below is the default configuration for a pie chart:
+
+
+
+
+
+
Notice that no data label was shown for "Insignia". This is because the area of its slice is less than the "dataLabelThreshold" (3% by default). The threshold is applicable no matter what type of label we used. We can change the threshold and the format string for the label in the following example:
+
+
+
+
+
+
Data labels function similarly for funnel and donut plots. Here is a funnel plot with the "dataLabels" option set to display the point label. Note that the label for "Insignia" is not displayed because Insignia represents less than 3% of the overall chart area, which is below the dataLabelThreshold:
+
+
+
+
+
+
The last example shows usage of a custom dataLabels array. Again, labels for small sections will not be displayed unless the "dataLabelThreshold" is reduced (it is set to 3 percent by default).
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/html/js/jqplot/examples/dataRenderer.html b/html/js/jqplot/examples/dataRenderer.html
new file mode 100644
index 000000000..d3719d8c6
--- /dev/null
+++ b/html/js/jqplot/examples/dataRenderer.html
@@ -0,0 +1,178 @@
+
+
+
+
+
+ Data Renderers, AJAX and JSON Data
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
The "dataRenderer" plot options allows you to specify a data preprocessor for your plot. This enables jqPlot to accept data in any arbitrary format (e.g. AJAX data soruces, JSON strings, etc.). Below are some examples illustrating how to use dataRenderers.
+
+
In this simple example, we create a dataRenderer which takes an array of x values and returns an array of [x, sin(x)] value pairs. Data renderers are passes the plot data and a reference to the plot as arguments.
+
+
+
An example of how to use a dataRenderer to fetch data from a server via an AJAX callback. Here the "data" passed into the plot is actually the url of the data source.
+
+
+
This example uses a more complicated dataRenderer that has been encapsulated as a jqplot plugin and loaded separately. This plugin accepts JSON data objects or strings formatted according to the City Index data format and returns jqPlot formatted data. This example uses a JSON encoded string.
+
+
+
This example uses the same City Index data format, but passes in a JSON object instead of a string.
+
+
+
+
There is a third argument passed to the data renderer, dataRendererOptions. It was not used in these examples, but can be set as a separate option on the plot to pass additional arguments into the renderer if needed.
+
+
\ No newline at end of file
diff --git a/html/js/jqplot/examples/dataTracking.html b/html/js/jqplot/examples/dataTracking.html
new file mode 100644
index 000000000..09fe32d4e
--- /dev/null
+++ b/html/js/jqplot/examples/dataTracking.html
@@ -0,0 +1,92 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/html/js/jqplot/examples/donutTest.html b/html/js/jqplot/examples/donutTest.html
new file mode 100644
index 000000000..8cd0b7be3
--- /dev/null
+++ b/html/js/jqplot/examples/donutTest.html
@@ -0,0 +1,84 @@
+
+
+
+
+
+ Donut Chart Test
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
To create donut plots, you have to include the "jqplot.donutRenderer.js" file in your source. You can view the javascript that generated these plots by clicking the "View Code" button below.
+
+
+
Below is a default donut plot. Slices will highlight on mouseover. Events are triggered when you mouseover a slice and also when you click on a slice. Here We capture the 'jqplotDataClick' event and display the clicked series index, point index and data values.
+
+
You Clicked: Nothing yet
+
+
+
+
Below is a customized donut plot with 2 series. Renderer options for sliceMargin, innerDiameter, and startAngle have been specified. Here We capture the 'jqplotDataHighlight' event and display the currently highlighted series index, point index and data values.
+
+
The plot target also fires a 'jqplotDataMouseOver' when the cursor is moused over a slice even if highlighting is turned off. This event will fire continuously as the user mouses over the slice. 'jqplotDataHighlight' fires only once when the user first passes over the slice. Additionally, a 'jqplotDataUnhighlight' event is fired when the user moves out of a slice (if highlighting is enabled).
+
+
Moused Over: 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 slice. Note, click highlighting is the same for both right and left clicks, although separate events are triggered.
+
+
You Right Clicked: Nothing yet
+
+
+
+
The fourth example shows a plot with no sliceMargin and with the shadow turned on.
+
+
+
+
The last example shows a donut with all of the default colors. Mouse over to see the default highlight colors. Series colors can be specified with the "seriesColors" option on the plot or on the series. The highlight colors are specified with the 'highlightColors' option on the series renderer.
+
+
+
+
A simple line chart is added to test for imcompatabilities.
To create donut plots, you have to include the "jqplot.funnelRenderer.js" file in your source. You can view the javascript that generated these plots by clicking the "View Code" button below.
+
+
+
Below is a default funnel plot. Sections will highlight on mouseover. Events are triggered when you mouseover a section and also when you click on a section. Here We capture the 'jqplotDataClick' event and display the clicked series index, point index and data values.
+
+
You Clicked: Nothing yet
+
+
+
+
Below is a customized funnel plot. Renderer options for sectionMargin and widthRatio have been set. Here We capture the 'jqplotDataHighlight' event and display the currently highlighted series index, point index and data values.
+
+
The plot target also fires a 'jqplotDataMouseOver' when the cursor is moused over a slice even if highlighting is turned off. This event will fire continuously as the user mouses over the slice. 'jqplotDataHighlight' fires only once when the user first passes over the slice. Additionally, a 'jqplotDataUnhighlight' event is fired when the user moves out of a slice (if highlighting is enabled).
+
+
Moused Over: 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 slice. Note, click highlighting is the same for both right and left clicks, although separate events are triggered. Here the series 'highlightMouseDown' option is set to true to highlight sections when a mouse down event occurs on them. This automatically disables highlighting on mouseover.
Setting custom gridPadding on charts. The red border indicates the plot target container. By default, the grid will size itself to fit axes, titles, etc. within the plot target. This values will be overridden if a "gridPadding" option is specified.
+
The default computed gridPadding:
+
+
+
Setting all gridPadding to 0 hides the title under the plot:
+
+
+
If a gridPadding member is null or undefined, the default will be used:
+
+
+
Just specify padding on the sides we need, defaults used for others:
Tab 2 and tab 3 contain plots which are initially hidden. Using a combination of alternate sizing specification and the plots "replot" method the plots are properly displayed when their containers are shown.
+
The alternate sizing specifications for setting plot height and width are needed because a hidden element (or child of a hidden element) has no size. The first example in tab 2 uses custom "data-height" and "data-width" attributes on the plot target element to specify height. The second example uses "width" and "height" properties specified on the options object passed into the $.jqplot() function.
+
+
The default size is 300px wide by 400px high. The default setting can be overriden by specifying different values to the $.jqplot.config.defaultHeight and $.jqplot.config.defaultWidth properties. Height and width values are taken in this order of prececence:
+
+
+
The css properties if available and plot is not hidden with display:none.
+
Options object passed into the $.jqplot() function.
+
Custom data-height and data-width attributes on the plot target.
+
The config defaults.
+
+
+
Here is how the replot method can be used to bind to the "tabsshow" event of the UI tabs:
The ui.index property is the index of the tab that was shown.
+
+
+
+
This plot was in an initially hidden container. It's hieght and width are set by the "data-height" and "data-width" properties of the plot container.
+
+
+
+
+
This plot is in an initially hidden container. It's height and width are set by the 'height' and 'width' properties of the options object passed into the plot constructor.
Secion 2 contains a plot. Sizing plots in hidden accordion sections is very similar to sizing in a tab widget. Because of the default animation on accordions, however, the plot will not draw itself until the entire accordion panel is shown.
+
+
Binidng to the accordion "accordionchange" event is also similar as with tabs:
+
+
+ $('#accordion').bind('accordionchange', function(event, ui) {
+ var index = $(this).find("h3").index ( ui.newHeader[0] );
+ if (index == 1) {
+ plot3.replot();
+ }
+ });
+
+ This plot also has it's height and width set with the data-height and data-width attributes. Note, if you want the accordian widget to properly size itself before the plot is shown, you must also specify a css height and width on the plot target.
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/html/js/jqplot/examples/highlighter.html b/html/js/jqplot/examples/highlighter.html
new file mode 100644
index 000000000..2258ca7f0
--- /dev/null
+++ b/html/js/jqplot/examples/highlighter.html
@@ -0,0 +1,94 @@
+
+
+
+
+
+ Highlighter Test
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/html/js/jqplot/examples/highlighter2.html b/html/js/jqplot/examples/highlighter2.html
new file mode 100644
index 000000000..174b00c81
--- /dev/null
+++ b/html/js/jqplot/examples/highlighter2.html
@@ -0,0 +1,62 @@
+
+
+
+
+
+ Highlighter Test
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
This page demonstrates creating your own custom highlighter by attaching a callback to the 'jqplotMouseMove' event.
+
+
+
+
\ No newline at end of file
diff --git a/html/js/jqplot/examples/highlighter3.html b/html/js/jqplot/examples/highlighter3.html
new file mode 100644
index 000000000..806b5dc51
--- /dev/null
+++ b/html/js/jqplot/examples/highlighter3.html
@@ -0,0 +1,94 @@
+
+
+
+
+
+ Highlighter Test
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/html/js/jqplot/examples/horizontalLine.html b/html/js/jqplot/examples/horizontalLine.html
new file mode 100644
index 000000000..c828b206f
--- /dev/null
+++ b/html/js/jqplot/examples/horizontalLine.html
@@ -0,0 +1,50 @@
+
+
+
+
+
+ Horizontal Line (const. y values)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/html/js/jqplot/examples/intticks.html b/html/js/jqplot/examples/intticks.html
new file mode 100644
index 000000000..ae5a6cfb6
--- /dev/null
+++ b/html/js/jqplot/examples/intticks.html
@@ -0,0 +1,178 @@
+
+
+
+
+
+ Enhanced Tick Algorithm
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Tests of enhancements to axis tick generation algorithm. Axis now checks to see if the tick interval (delta between ticks) is less than the precision of the tick format string. If it is, it will try to increase the tick interval, number of ticks or change the axis minimum or maximum so that it is at least as great as the tick label precision.
+
+
Note, if the user has specified the axis tickInterval, numberTicks, min or max options, the algorithm may not be able to produce the desired ticks.
+
+
This helps in situations where the user wants to display ticks formatted as integer values on a plot with a very small range. For example, a plot with a y axis range from 0 to 2 and 6 ticks will have a tickInterval of 0.4 and ticks like [0, 0.4, 0.8, 1.2, 1.6, 2]. When formatted as integers, the plot displays ticks like [0, 0, 1, 1, 2, 2]. The new algorithm will try to adjust the number of ticks or the axis minimum or maximum to generate ticks like [0, 1, 2].
The following charts demonstrate some options of the EnhancedLegendRendrer. Some of the enhancements are:
+
+
Control of number of rows and/or columns.
+
Clickable swatches and labels to toggle series on/off.
+
Placement of legend inside or outside of the plot (this has since been added to the default legend functionality).
+
Ability to hide legend swatches and or labels.
+
+
+
The first plot has legend labels in 3 columns. They are clickable.
+
+
+
+
+
+
The second chart has legend labels in 2 columns placed outside of the plot. The showLabels option is false, but the labels are still clickable.
+
The legend renderer's "seriesToggle" option has been set to 900 to produce a slow, 900 ms fade. You can set this to a number or to 'fast', 'normal' or 'slow'.
+
Also, the disableIEFading option is set to false to allow fading on IE (as opposed to simple show/hide). In IE, series will be toggled with a show()/hide() method by default as opposed to fadeIn()/fadeOut() because of poor performance on some machines.
+
+
+
+
+
The third plot has legend labels in 1 row outside and below the chart area. The showSwatches option is false, but the labels are still clickable.
+
+
+
+
+
The fourth chart is a pie plot. Pie plots use their own legend renderer, since a pie plot is only 1 series. The pie legend renderer has also been updated to handle custom rows/columns, although it is not clickable.
This example demonstrates how to use the legend "location: 'outsideGrid'" option. This option will place the legend outside of the grid but inside of the plot target. It will shrink the grid to accommodate the plot target. Borders have been added to the plot target container elements to clarify how the legend is drawn in each case.
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:
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.
You can add a secondary x axes, and the tick spacing of the axes can be separately controlled with the "tickMode" option. "bar" will produce tics at bar boundaries, "even" will produce evenly spaced ticks. If you set the axes max greater than the sum of the data range (the maximum x value), the plot will be padded. Note that you should set the max on both axes to the same value.
Additionally, the legend can be placed "outside" (the default for a mekko chart) or "inside" of the grid area with the "placement" option on the legend renderer.
Legend labels can be specified independently of the series with the "labels" option on the legend. These will override any labels specified with the series. There are also options to control the number of rows and number of columns in the legend as well as placement.
+
+
Here the legend is positioned to the "north" and set to render 1 row tall (number of columns determined automatically). Note that an extra css specification was added to pad the bottom of the title of this chart to give room for the legend above the plot.
+
+
+
+
\ No newline at end of file
diff --git a/html/js/jqplot/examples/meterGauge.html b/html/js/jqplot/examples/meterGauge.html
new file mode 100644
index 000000000..74d4242b5
--- /dev/null
+++ b/html/js/jqplot/examples/meterGauge.html
@@ -0,0 +1,132 @@
+
+
+
+
+
+ Simple Test
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
A meter gauge plot shows a data value in a speedometer style gauge. The "series" in consists of a single data value that positions the needle on the gauge. The span of the gauge will be automatically determined, or can be set with the "min" and "max" values in the "rendererOptions" of the series. The plot below also specifies a chart title and a "label" for the gauge.
+
+
+
+
For small gauges, it can be desirable to turn off the tick labels by setting the "showTickLabels" option in the rendererOptions to false. Also, colored interval bands can be specified. The interval ranges are specified as an array of values the "intervals" option and custom colors for each interval can be specified with the "intervalColors" option.
+
+
+
+
The inner and outer radii of the interval band will automatically adjust when tick Labels are turned on. Also, the gauge minimum and maximum can be specified with the "min" and "max" options in the rendererOptions.
+
+
+
+
The inner and outer radii of the interval band can also be specified with the "intervalInnerRadius" and "intervalOuterRadius" options. In the plot below, the "labelPosition" option was set to "bottom" to put the gauge label below the plot. The "labelHeightAdjust" option was set to -5 to raise the label slightly (5 pixels) to place it closer to the gauge.
+
The gauge automatically resizes to best fit the container. The font size of the tick labels and gauge labels do not size to the container, however. The font size of the tick labels can be controlled by styling the css ".jqplot-meterGauge-ticks" class and the gauge label by the "jqplot-meterGauge-label" class.
+
+
+
\ No newline at end of file
diff --git a/html/js/jqplot/examples/meterGauge2.html b/html/js/jqplot/examples/meterGauge2.html
new file mode 100644
index 000000000..db0e9f70b
--- /dev/null
+++ b/html/js/jqplot/examples/meterGauge2.html
@@ -0,0 +1,159 @@
+
+
+
+
+
+ Simple Test
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/html/js/jqplot/examples/minMaxLines.html b/html/js/jqplot/examples/minMaxLines.html
new file mode 100644
index 000000000..c16de06d3
--- /dev/null
+++ b/html/js/jqplot/examples/minMaxLines.html
@@ -0,0 +1,60 @@
+
+
+
+
+
+ Horizontal Bar with Vertical lines Test
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/html/js/jqplot/examples/missingValues.html b/html/js/jqplot/examples/missingValues.html
new file mode 100644
index 000000000..e8eb76c7e
--- /dev/null
+++ b/html/js/jqplot/examples/missingValues.html
@@ -0,0 +1,119 @@
+
+
+
+
+
+ Null Value Handling
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/html/js/jqplot/examples/multiAxesRotatedText.html b/html/js/jqplot/examples/multiAxesRotatedText.html
new file mode 100644
index 000000000..8c83f8749
--- /dev/null
+++ b/html/js/jqplot/examples/multiAxesRotatedText.html
@@ -0,0 +1,69 @@
+
+
+
+
+
+ untitled
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/html/js/jqplot/examples/multipleBarColors.html b/html/js/jqplot/examples/multipleBarColors.html
new file mode 100644
index 000000000..6965d9206
--- /dev/null
+++ b/html/js/jqplot/examples/multipleBarColors.html
@@ -0,0 +1,150 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Individual bars can now have different colors. This is achieved by setting the "varyBarColor" option to true in the series rendererOptions. The default is to assign each bar a different color from the default "seriesColors" array. You can customize the seriesColors array to assign whatever colors you like to the bars.
+
+
+
+
Bars and filled series are colored differently for positive and negative values by default. Negative values will be a slightly darker and less saturated than their positive counterparts for visual effect. This applies to only bar and filled line charts by default.
+
+
+
+
If you want to use only the colors defined in the "seriesColors" array and not colors from the "negativeSeriesColors" array, set the "useNegativeColors" option to false. This way negative values and positive values will pull their colors from the same color array.
+
+
Note that there are only 16 colors defined in the default color arrays. Color arrays will cylcle through colors continuously when the last color is used.
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/html/js/jqplot/examples/multipleLines.html b/html/js/jqplot/examples/multipleLines.html
new file mode 100644
index 000000000..f5d8950f8
--- /dev/null
+++ b/html/js/jqplot/examples/multipleLines.html
@@ -0,0 +1,46 @@
+
+
+
+
+
+ Multiple lines Test
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/html/js/jqplot/examples/multipleYAxes.html b/html/js/jqplot/examples/multipleYAxes.html
new file mode 100644
index 000000000..639c23d0f
--- /dev/null
+++ b/html/js/jqplot/examples/multipleYAxes.html
@@ -0,0 +1,104 @@
+
+
+
+
+
+ Simple Test
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/html/js/jqplot/examples/nav.inc b/html/js/jqplot/examples/nav.inc
new file mode 100644
index 000000000..b41d92c66
--- /dev/null
+++ b/html/js/jqplot/examples/nav.inc
@@ -0,0 +1,35 @@
+
This page tests for 3 conditions. Plotting pies with a slice that begins at 0 and ends at and near 2*pi (360 degrees), disabling the trendline plugin on pies, and plotting a pie that has a 0 value (or a very small value relative to other values) in the data set.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/html/js/jqplot/examples/pieTest2.html b/html/js/jqplot/examples/pieTest2.html
new file mode 100644
index 000000000..7cd0f10e2
--- /dev/null
+++ b/html/js/jqplot/examples/pieTest2.html
@@ -0,0 +1,166 @@
+
+
+
+
+
+ Pie Chart Test
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
To create pie plots, you have to include the "jqplot.pieRenderer.js" file in your source.
+
+
Below is a default pie plot. Slices will highlight on mouseover. Events are triggered when you mouseover a slice and also when you click on a slice. Here We capture the 'jqplotDataClick' event and display the clicked series index, point index and data values.
+
+
You Clicked: Nothing yet
+
+
+
+
Below is a customized customized pie plot where options for sliceMargin and startAngle have been specified. Here We capture the 'jqplotDataHighlight' event and display the currently highlighted series index, point index and data values.
+
+
The plot target also fires a 'jqplotDataMouseOver' when the cursor is moused over a slice even if highlighting is turned off. This event will fire continuously as the user mouses over the slice. 'jqplotDataHighlight' fires only once when the user first passes over the slice. Additionally, a 'jqplotDataUnhighlight' event is fired when the user moves out of a slice (if highlighting is enabled).
+
+
Moused Over: 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 slice.
+
+
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
+
+
+
+
The last example shows a pie with all of the default colors. Mouse over to see the default highlight colors. Series colors can be specified with the "seriesColors" option on the plot. The highlight colors are specified with the 'highlightColors' option on the series renderer.
+
+
+
+
A simple line chart is added to test for imcompatabilities.
Click and drag to zoom. Double click on plot or click "Reset Zoom" button to reset zoom.
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/html/js/jqplot/examples/pointLabels2.html b/html/js/jqplot/examples/pointLabels2.html
new file mode 100644
index 000000000..9f96712f2
--- /dev/null
+++ b/html/js/jqplot/examples/pointLabels2.html
@@ -0,0 +1,47 @@
+
+
+
+
+
+ Simple Test
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/html/js/jqplot/examples/prefix.html b/html/js/jqplot/examples/prefix.html
new file mode 100644
index 000000000..194498325
--- /dev/null
+++ b/html/js/jqplot/examples/prefix.html
@@ -0,0 +1,89 @@
+
+
+
+
+
+ Test
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Example of the "prefix" axis tick option. This option adds a prefix to the tick label if and only if no formatString option is specified.
+
+
+
+
A new configuration option, $.jqplot.config.defaultTickFormatString, has been added as well. When no user formatString is specified, linear axes previously used a hard coded '%.1f' default format string. The config option controls this default format string. This allows an alternative way to format tick labels, with or without a prefix, if no formatString option is specified.
+
+
+
+
\ No newline at end of file
diff --git a/html/js/jqplot/examples/resetAxisTicks.html b/html/js/jqplot/examples/resetAxisTicks.html
new file mode 100644
index 000000000..a18526868
--- /dev/null
+++ b/html/js/jqplot/examples/resetAxisTicks.html
@@ -0,0 +1,104 @@
+
+
+
+
+
+ Single Negative Point
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/html/js/jqplot/examples/resizablePlot.html b/html/js/jqplot/examples/resizablePlot.html
new file mode 100644
index 000000000..71358bbb9
--- /dev/null
+++ b/html/js/jqplot/examples/resizablePlot.html
@@ -0,0 +1,148 @@
+
+
+
+
+
+ Plots in Hidden Containers
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Plot targets can be placed inside of resizable containers for dynamic plot sizing. The examples here use the jQuery UI package for resizing functionality.
+
+
+
+
+
+
+
+
+
+
The first plot has good resize performance in Firefox, Safari and other canvas enabled browsers. The plot will resize dynamically with the container. IE performance will be slow since IE doesn't natively support the canvas element.
+
+
Resizing is handled by binding a handler to the 'resize' event. The handler function replots the plot during resize. Here, the plot targets's height and width must be specified as a percentage of the container and the container must be visible.
The second plot uses an alternative sizing method that is more responsive in all browsers, especially IE. The differnece? First, the plot target is given a static height and width that will fit inside the resizable container. Then, instead of resizing dynamically with the container, the plots replot() method is called at the end of the resize. When resizing is done, the plot targets hieght and width are set to a percentage of the container's and then the replot method is called.
+
+
Also, an options object is passed into the replot method. It contains a single option, resetAxes, which, if true, resets all axes so the min, max, numberTicks and tickInterval are recalculated.
Plot targets can be placed inside of resizable containers for dynamic plot sizing. The examples here use the jQuery UI package for resizing functionality.
+
+
+
+
+
+
+
+
+
+
The first plot has good resize performance in Firefox, Safari and other canvas enabled browsers. The plot will resize dynamically with the container. IE performance will be slow since IE doesn't natively support the canvas element.
+
+
Resizing is handled by binding a handler to the 'resize' event. The handler function replots the plot during resize. Here, the plot targets's height and width must be specified as a percentage of the container and the container must be visible.
The second plot uses an alternative sizing method that is more responsive in all browsers, especially IE. The differnece? First, the plot target is given a static height and width that will fit inside the resizable container. Then, instead of resizing dynamically with the container, the plots replot() method is called at the end of the resize. When resizing is done, the plot targets hieght and width are set to a percentage of the container's and then the replot method is called.
+
+
Also, an options object is passed into the replot method. It contains a single option, resetAxes, which, if true, resets all axes so the min, max, numberTicks and tickInterval are recalculated.
+
+
+
\ No newline at end of file
diff --git a/html/js/jqplot/examples/rotatedTickLabels.html b/html/js/jqplot/examples/rotatedTickLabels.html
new file mode 100644
index 000000000..abdb55dcc
--- /dev/null
+++ b/html/js/jqplot/examples/rotatedTickLabels.html
@@ -0,0 +1,61 @@
+
+
+
+
+ jqPlot Test 2
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/html/js/jqplot/examples/rotatedTickLabelsZoom.html b/html/js/jqplot/examples/rotatedTickLabelsZoom.html
new file mode 100644
index 000000000..68c3c723e
--- /dev/null
+++ b/html/js/jqplot/examples/rotatedTickLabelsZoom.html
@@ -0,0 +1,68 @@
+
+
+
+
+ jqPlot Test 2
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/html/js/jqplot/examples/seriesCanvasReorder.html b/html/js/jqplot/examples/seriesCanvasReorder.html
new file mode 100644
index 000000000..1e19eab15
--- /dev/null
+++ b/html/js/jqplot/examples/seriesCanvasReorder.html
@@ -0,0 +1,92 @@
+
+
+
+
+
+ Simple Test
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
When lines overlap each other it can be difficult to tell what is going on with the series below the top. The highlighter plugin, the enhancedLegendRenderer plugin and special methods of plot help with this situation.
+
+
The highlighter plugin has been enhanced with a "bringSeriesToFront" option which will bring the series of the highlighted point to the front when a data point is highlighted. Note, however, when highlighting a point which coincides with multiple series, highlighter will detect this as the top most series and no highlighting effect will be noticed.
+
+
The enhancedLegendRenderer plugin enabled clickable legend labels which will show/hide series. This functionality can be disabled by setting the "seriesToggle" option on the legend renderer to false. You can also change the fade duration of the series by setting the seriesToggle option to a millisecond value like 450, or the 'slow' or 'fast' keywords.
+
+
On IE, series are simple toggled without the fading. This avoids some erratic behaviour with fading elements on IE. IE fading can be re-enabled be setting the disableIEFading option to false.
+
+
The plot object has 4 methods which can bring a series forward or push it backward on the stack. Click the buttons below to bring individual series to the front. The "Last Order" button will toggle the current series order with the last displayed series order. The "Original" button will reset the series to display in the order when the plot was created.
moveSeriesToBack is not demonstrated here, but is available.
+
+
+
\ No newline at end of file
diff --git a/html/js/jqplot/examples/seriesUpdate.html b/html/js/jqplot/examples/seriesUpdate.html
new file mode 100644
index 000000000..6258505a1
--- /dev/null
+++ b/html/js/jqplot/examples/seriesUpdate.html
@@ -0,0 +1,122 @@
+
+
+
+
+
+ Simple Test
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
This example demonstrates how to update a point in a series and then redraw just that series. You can select a series, a point and change it's x and y value with the form below the chart.
+
+
+
+
+
+
The mechanism to update data in a series and then redraw the series is simple. update the data in the "plot.series[seriesIndex].data[dataIndex]" and then redraw just that series with "plot.drawSeries(options, seriesIndex);" Here is the relavent code which updates the series on this chart:
+
+
+ var f = document.forms[0];
+ var seriesIndex = f.seriesId.selectedIndex;
+ var series = plot1.series[seriesIndex];
+ var data = series.data[f.pointId.selectedIndex];
+ var xval = parseFloat(f.xvalue.value);
+ var yval = parseFloat(f.yvalue.value);
+ data[0] = xval;
+ data[1] = yval;
+ plot1.drawSeries({}, seriesIndex);
+
+
+
You can also update an entire series dataset at once and redraw the series like so:
You can test this by clicking the button below. You should see the entire "bears" line drop lower on the chart.
+
+
+
+
Note that the redrawSeries method does not do any axes scaling or redraw any other elements on the chart. It is intended to be a lightweight method to redraw just one series. Also note, if no series Index is passed in as the second parameter to drawSeries, it will redraw all series without rescaling or redrawing other plot elements.
+
+
\ No newline at end of file
diff --git a/html/js/jqplot/examples/shadowTests.html b/html/js/jqplot/examples/shadowTests.html
new file mode 100644
index 000000000..f3dda7cd2
--- /dev/null
+++ b/html/js/jqplot/examples/shadowTests.html
@@ -0,0 +1,132 @@
+
+
+
+
+
+ Simple Test
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/html/js/jqplot/examples/singlePoint.html b/html/js/jqplot/examples/singlePoint.html
new file mode 100644
index 000000000..9eef5010b
--- /dev/null
+++ b/html/js/jqplot/examples/singlePoint.html
@@ -0,0 +1,69 @@
+
+
+
+
+
+ Single Negative Point
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/html/js/jqplot/examples/sparkLine.html b/html/js/jqplot/examples/sparkLine.html
new file mode 100644
index 000000000..5b900c2fa
--- /dev/null
+++ b/html/js/jqplot/examples/sparkLine.html
@@ -0,0 +1,47 @@
+
+
+
+
+
+ Sparkline Test
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/html/js/jqplot/examples/stackedBar2.html b/html/js/jqplot/examples/stackedBar2.html
new file mode 100644
index 000000000..ef211d69a
--- /dev/null
+++ b/html/js/jqplot/examples/stackedBar2.html
@@ -0,0 +1,108 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/html/js/jqplot/examples/stackedBar3.html b/html/js/jqplot/examples/stackedBar3.html
new file mode 100644
index 000000000..00c3b0603
--- /dev/null
+++ b/html/js/jqplot/examples/stackedBar3.html
@@ -0,0 +1,77 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/html/js/jqplot/examples/stackedBarCategoryVsLinearAxes.html b/html/js/jqplot/examples/stackedBarCategoryVsLinearAxes.html
new file mode 100644
index 000000000..3a6aae2d6
--- /dev/null
+++ b/html/js/jqplot/examples/stackedBarCategoryVsLinearAxes.html
@@ -0,0 +1,122 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/html/js/jqplot/examples/stackedCategoryAxis.html b/html/js/jqplot/examples/stackedCategoryAxis.html
new file mode 100644
index 000000000..2c1e7b86c
--- /dev/null
+++ b/html/js/jqplot/examples/stackedCategoryAxis.html
@@ -0,0 +1,89 @@
+
+
+
+
+
+ Simple Test
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/html/js/jqplot/examples/stackedFilledLine.html b/html/js/jqplot/examples/stackedFilledLine.html
new file mode 100644
index 000000000..a38124af9
--- /dev/null
+++ b/html/js/jqplot/examples/stackedFilledLine.html
@@ -0,0 +1,76 @@
+
+
+
+
+
+ Simple Test
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/html/js/jqplot/examples/stackedLine.html b/html/js/jqplot/examples/stackedLine.html
new file mode 100644
index 000000000..e6d94f5e5
--- /dev/null
+++ b/html/js/jqplot/examples/stackedLine.html
@@ -0,0 +1,57 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/html/js/jqplot/examples/test2.html b/html/js/jqplot/examples/test2.html
new file mode 100644
index 000000000..7ca904df4
--- /dev/null
+++ b/html/js/jqplot/examples/test2.html
@@ -0,0 +1,64 @@
+
+
+
+
+
+ Simple Test
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/html/js/jqplot/examples/theming.html b/html/js/jqplot/examples/theming.html
new file mode 100644
index 000000000..368fa02f4
--- /dev/null
+++ b/html/js/jqplot/examples/theming.html
@@ -0,0 +1,481 @@
+
+
+
+
+
+ Theming Test
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
jqPlot has basic theming support for commonly styled atributes of plot elements. Upon creation, each plot will have a "themeEngine" that controls modificaition, adding, removing and activating of plot themes. In addition, each plot will have a "Default" theme which corresponds to the styling of the plot at plot creation.
+
+
Creation of new themes is easy. A "style" object is created with properties for the various plot elements to be styles. Attached to each of those is an ojbect with the actual styling properties. A simple style object might look like:
Themes can be reused between plots. Here a style object is created and assigned to two different plots. For convenience, the theme is given the same name when added to each plot's themeEngine. Since each plot keeps it's own copy of the theme, the names do not need to be the same. Also note that themes are added as deep copies by value and not by reference. This avoids strange behavior due to the cascading nature of css related styles.
Select Theme for funnel and pie charts at same time:
+
+
+
+
+
+
Select Theme for funnel plot:
+
+
+
+
+
+
Select Theme for pie chart:
+
+
+
+
There are various was to create and edit themes for a plot. Below are two different methods for creating additional themes for a line plot and adding them to the plots themeEngine. Here the axesStyles property is used to supply styling to all axes at one time. A similar property, seriesStyles, exists for styling all series of a plot at one time. Note, neither of these methods is as straightforward as using the newTheme() method of the plots themeEngine, but are included for illustrative purposes.
The example below shows more extensive use of the various styling options to give the chart a rather ugly and dated appearence. Note that, for bar (and funnel, pie and donut charts), highlightColors can be specified as an array of colors which will be applied to each bar individually, as a single string giving a color to apply to all bars, or as an empty array which will force jqPlot to auto calculate highlight colors based on the current bar color.
This page demonstrates placing plots within jQuery UI widgets. Tab 2 and tab 3 contain plots. Using a combination of alternate sizing specification and the jqplot "replot" method the plots are properly displayed when their containers are shown.
+
+
The alternate sizing specifications for setting plot height and width are needed because a hidden element (or child of a hidden element) has no size. The first example in tab 2 uses custom "data-height" and "data-width" attributes on the plot target element. The second example uses "width" and "height" properties specified on the options object passed into the $.jqplot() function.
+
+
The default plot size is 300px wide by 400px high. The default setting can be overridden by specifying different values to the $.jqplot.config.defaultHeight and $.jqplot.config.defaultWidth properties. Height and width values are taken in this order of precedence:
+
+
+
+
The css properties of the plot target if available (not available with display:none;).
+
Options object passed into the $.jqplot() function.
+
Custom data-height and data-width attributes on the plot target.
+ Tabs 2 and 3 have plots. Since tabs 2 and 3 are initially inactive, their contents (and the plots) are initially hidden.
+
+
+
+
This plot was in an initially hidden container. It's hieght and width are set by the "data-height" and "data-width" properties of the plot container.
+
+
+
+
+
This plot is in an initially hidden container. It's height and width are set by the 'height' and 'width' properties of the options object passed into the plot constructor.
+
+
+
+
+
+
In the accordion below, section 2 contains a plot. Sizing plots in hidden accordion sections is very similar to sizing in a tab widget. Because of the default animation on accordions, however, the plot will not draw itself until the entire accordion panel is shown.
+ This plot also has it's height and width set with the data-height and data-width attributes. Note, if you want the accordion widget to properly size itself before the plot is shown, you must also specify a css height and width on the plot target.
+
+
+
+
+
+
+
Code for generating the plots follows. It is critical to bind the callback to the UI widgets "show" or "change" method which calls the plots "replot" method. Without this, the plot won't properly redraw itself when it's container becomes visible.
+
+
+ Note in the ui.index and plot._drawCount properties in the tabsshow callback. ui.index gives the index of the activated tab. plot._drawCount keeps track of how many times the plot was visibly drawn (or redrawn/replotted). Generally, replot only needs to be called the first time the plot is visibly drawn, hence the check for plot._drawCount == 0.
+
Waterfall chart using custom colors and "useNegativeColors" set to "false".
+
+
+
+
\ No newline at end of file
diff --git a/html/js/jqplot/examples/waterfall2.html b/html/js/jqplot/examples/waterfall2.html
new file mode 100644
index 000000000..ea494dcef
--- /dev/null
+++ b/html/js/jqplot/examples/waterfall2.html
@@ -0,0 +1,204 @@
+
+
+
+
+
+ Waterfall Chart
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/html/js/jqplot/examples/zoom1.html b/html/js/jqplot/examples/zoom1.html
new file mode 100644
index 000000000..dcbc586b3
--- /dev/null
+++ b/html/js/jqplot/examples/zoom1.html
@@ -0,0 +1,148 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/html/js/jqplot/examples/zoom2.html b/html/js/jqplot/examples/zoom2.html
new file mode 100644
index 000000000..45e92f359
--- /dev/null
+++ b/html/js/jqplot/examples/zoom2.html
@@ -0,0 +1,71 @@
+
+
+
+
+
+ Simple Test
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/html/js/jqplot/examples/zoom3.html b/html/js/jqplot/examples/zoom3.html
new file mode 100644
index 000000000..17bf46674
--- /dev/null
+++ b/html/js/jqplot/examples/zoom3.html
@@ -0,0 +1,67 @@
+
+
+
+
+ Zoom plugin with multiple Y Axes
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Click and drag to zoom. Double click on plot or click "Reset Zoom" button to reset zoom.
+
+
+
+
+
+
\ No newline at end of file
diff --git a/html/js/jqplot/examples/zoom4.html b/html/js/jqplot/examples/zoom4.html
new file mode 100644
index 000000000..8880300c4
--- /dev/null
+++ b/html/js/jqplot/examples/zoom4.html
@@ -0,0 +1,156 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/html/js/jqplot/examples/zoomOptions.html b/html/js/jqplot/examples/zoomOptions.html
new file mode 100644
index 000000000..42177d6b0
--- /dev/null
+++ b/html/js/jqplot/examples/zoomOptions.html
@@ -0,0 +1,99 @@
+
+
+
+
+ Simple Test
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Zooming has been enhanced to maintain plot zoom while the mouse moves over the entire document, not just the plot. Two new options have been added to the cursor plugin to further enhance zooming:
+
+
+
constrainOutsideZoom
+
True to limit the resulting zoom area to the edges of grid, even if the cursor is outside of the grid. That is, you can't expand the axis ranges by moving the cursor outside of the plot area when this is true. If set to false, you can effectively zoom out by mousing outside of the plot region. Default false.
+
showTooltipOutsideZoom
+
True to keep showing and updating the tooltip even when the cursor is outside of the plot area. Not applicable if zoomOutsidePlot is false. Default false
+
+
+
The fist plot demonstrates the default functionality where you can move the mouse off of the plot while zooming but the actual area zoomed will not extend beyond the axes.
+
+
+
+
The second plot sets constrainOutsideZoom to false, so zooming will not only function when the mouse is outside of the plot, but the zoom range will be extended to the mouse position outside of the grid.
+
+
+
+
The third plot is like the third, but showTooltipOutsideZoom is true and the tooltip is set to follow the mouse, so you have an idea of what your range is while zooming.
+
+
+
+
\ No newline at end of file
diff --git a/html/js/jqplot/examples/zoomProxy.html b/html/js/jqplot/examples/zoomProxy.html
new file mode 100644
index 000000000..e0faa551e
--- /dev/null
+++ b/html/js/jqplot/examples/zoomProxy.html
@@ -0,0 +1,106 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/html/js/jqplot/excanvas.js b/html/js/jqplot/excanvas.js
new file mode 100644
index 000000000..f3b70f470
--- /dev/null
+++ b/html/js/jqplot/excanvas.js
@@ -0,0 +1,1434 @@
+// Memory Leaks patch from http://explorercanvas.googlecode.com/svn/trunk/
+// svn : r73
+// ------------------------------------------------------------------
+// Copyright 2006 Google Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+
+// Known Issues:
+//
+// * Patterns only support repeat.
+// * Radial gradient are not implemented. The VML version of these look very
+// different from the canvas one.
+// * Clipping paths are not implemented.
+// * Coordsize. The width and height attribute have higher priority than the
+// width and height style values which isn't correct.
+// * Painting mode isn't implemented.
+// * Canvas width/height should is using content-box by default. IE in
+// Quirks mode will draw the canvas using border-box. Either change your
+// doctype to HTML5
+// (http://www.whatwg.org/specs/web-apps/current-work/#the-doctype)
+// or use Box Sizing Behavior from WebFX
+// (http://webfx.eae.net/dhtml/boxsizing/boxsizing.html)
+// * Non uniform scaling does not correctly scale strokes.
+// * Optimize. There is always room for speed improvements.
+
+// Only add this code if we do not already have a canvas implementation
+if (!document.createElement('canvas').getContext) {
+
+(function() {
+
+ // alias some functions to make (compiled) code shorter
+ var m = Math;
+ var mr = m.round;
+ var ms = m.sin;
+ var mc = m.cos;
+ var abs = m.abs;
+ var sqrt = m.sqrt;
+
+ // this is used for sub pixel precision
+ var Z = 10;
+ var Z2 = Z / 2;
+
+ var IE_VERSION = +navigator.userAgent.match(/MSIE ([\d.]+)?/)[1];
+
+ /**
+ * This funtion is assigned to the