Namespace: $.jqplot
jQuery function called by the user to create a plot.
Parameters:
target - ID of target element to render the plot into.
data - an array of data series.
options - user defined options object. See the individual classes for available options.
Properties:
config - object to hold configuration information for jqPlot plot object.
attributes:
enablePlugins - False to disable plugins by default. Plugins must then be explicitly
enabled in the individual plot options. Default: false.
This property sets the "show" property of certain plugins to true or false.
Only plugins that can be immediately active upon loading are affected. This includes
non-renderer plugins like cursor, dragable, highlighter, and trendline.
defaultHeight - Default height for plots where no css height specification exists. This
is a jqplot wide default.
defaultWidth - Default height for plots where no css height specification exists. This
is a jqplot wide default.
- Source:
Classes
- Axis
- CanvasManager
- ColorGenerator
- EventListenerManager
- GenericCanvas
- Grid
- HooksManager
- JqPlot
- Legend
- Series
- Title
Members
(static) colorKeywordMap
{@link}
Properties:
| Name | Type | Description |
|---|---|---|
jqplot |
map | themes commons colors map. |
- Source:
(static) config
Settings and configuration
- Source:
(static) preInitHooks
Hooks: jqPlot Pugin Hooks
$.jqplot.preInitHooks - called before initialization.
$.jqplot.postInitHooks - called after initialization.
$.jqplot.preParseOptionsHooks - called before user options are parsed.
$.jqplot.postParseOptionsHooks - called after user options are parsed.
$.jqplot.preDrawHooks - called before plot draw.
$.jqplot.postDrawHooks - called after plot draw.
$.jqplot.preDrawSeriesHooks - called before each series is drawn.
$.jqplot.postDrawSeriesHooks - called after each series is drawn.
$.jqplot.preDrawLegendHooks - called before the legend is drawn.
$.jqplot.addLegendRowHooks - 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.preDrawAllSeriesHooks - called before the first serie drawn and after grid drawn.
$.jqplot.preDrawSeriesShadowHooks - called before series shadows are drawn.
$.jqplot.postDrawSeriesShadowHooks - called after series shadows are drawn.
- Source:
Methods
(static) CanvasGridRenderer()
- Source:
(static) computeHighlightColors(colors)
Computes a highlight color or array of highlight colors from given colors.
Parameters:
| Name | Type | Description |
|---|---|---|
colors |
array |
- Source:
(static) getColorComponents(s) → {string}
Extracts the r, g, b, a color components out of a css color spec.
Parameters:
| Name | Type | Description |
|---|---|---|
s |
string | match the string color name for the rgba color. |
- Source:
Returns:
the rgba color specified @see $.jqplot.colorKeywordMap
- Type
- string
(static) getColorRGB(color)
Gets the RGB color value for a given color
Parameters:
| Name | Type | Description |
|---|---|---|
color |
String | css string color representation. |
- Source:
Returns:
[Number] rgb array color.
(static) hex2rgb({string, a)
convert a hex color string to rgb string.
Parameters:
| Name | Type | Description |
|---|---|---|
{string |
h 3 or 6 character hex string, with or without leading # | |
a |
number | optional alpha |
- Source:
(static) isDarkColor(color) → {boolean}
know if a color is dark or not
Parameters:
| Name | Type | Description |
|---|---|---|
color |
string | string color css representation |
- Source:
Returns:
true if the color is dark.
- Type
- boolean
(static) log()
Convienence function that won't hang IE or FF without FireBug.
- Source:
(static) normalize2rgb(s, a)
given a css color spec, return an rgb css color spec.
Parameters:
| Name | Type | Description |
|---|---|---|
s |
string | css spec |
a |
number | alpha opacity |
- Source:
(static) rgb2hex(s)
convert an rgb color spec to a hex spec. ignore any alpha specification.
Parameters:
| Name | Type | Description |
|---|---|---|
s |
string | string css spe |
- Source:
(static) sprintf()
- Source:
(static) support_canvas()
canvas related tests taken from modernizer:
Copyright (c) 2009 - 2010 Faruk Ates.
http://www.modernizr.com
- Source:
(static) support_canvas_text()
canvas related tests taken from modernizer:
Copyright (c) 2009 - 2010 Faruk Ates.
http://www.modernizr.com
- Source:
(static) ThemeEngine()
Class: $.jqplot.ThemeEngine
Theme Engine provides a programatic way to change some of the more
common jqplot styling options such as fonts, colors and grid options.
A theme engine instance is created with each plot. The theme engine
manages a collection of themes which can be modified, added to, or
applied to the plot.
The themeEngine class is not instantiated directly.
When a plot is initialized, the current plot options are scanned
an a default theme named "Default" is created. This theme is
used as the basis for other themes added to the theme engine and
is always available.
A theme is a simple javascript object with styling parameters for
various entities of the plot. A theme has the form:
> {
> _name:f "Default",
> target: {
> backgroundColor: "transparent"
> },
> legend: {
> textColor: null,
> fontFamily: null,
> fontSize: null,
> border: null,
> background: null
> },
> title: {
> textColor: "rgb(102, 102, 102)",
> fontFamily: "'Trebuchet MS',Arial,Helvetica,sans-serif",
> fontSize: "19.2px",
> textAlign: "center"
> },
> seriesStyles: {},
> series: [{
> color: "#4bb2c5",
> lineWidth: 2.5,
> linePattern: "solid",
> shadow: true,
> fillColor: "#4bb2c5",
> showMarker: true,
> markerOptions: {
> color: "#4bb2c5",
> show: true,
> style: 'filledCircle',
> lineWidth: 1.5,
> size: 4,
> shadow: true
> }
> }],
> grid: {
> drawGridlines: true,
> gridLineColor: "#cccccc",
> gridLineWidth: 1,
> backgroundColor: "#fffdf6",
> borderColor: "#999999",
> borderWidth: 2,
> shadow: true
> },
> axesStyles: {
> label: {},
> ticks: {}
> },
> axes: {
> xaxis: {
> borderColor: "#999999",
> borderWidth: 2,
> ticks: {
> show: true,
> showGridline: true,
> showLabel: true,
> showMark: true,
> size: 4,
> textColor: "",
> whiteSpace: "nowrap",
> fontSize: "12px",
> fontFamily: "'Trebuchet MS',Arial,Helvetica,sans-serif"
> },
> label: {
> textColor: "rgb(102, 102, 102)",
> whiteSpace: "normal",
> fontSize: "14.6667px",
> fontFamily: "'Trebuchet MS',Arial,Helvetica,sans-serif",
> fontWeight: "400"
> }
> },
> yaxis: {
> borderColor: "#999999",
> borderWidth: 2,
> ticks: {
> show: true,
> showGridline: true,
> showLabel: true,
> showMark: true,
> size: 4,
> textColor: "",
> whiteSpace: "nowrap",
> fontSize: "12px",
> fontFamily: "'Trebuchet MS',Arial,Helvetica,sans-serif"
> },
> label: {
> textColor: null,
> whiteSpace: null,
> fontSize: null,
> fontFamily: null,
> fontWeight: null
> }
> },
> x2axis: {...
> },
> ...
> y9axis: {...
> }
> }
> }
"seriesStyles" is a style object that will be applied to all series in the plot.
It will forcibly override any styles applied on the individual series. "axesStyles" is
a style object that will be applied to all axes in the plot. It will also forcibly
override any styles on the individual axes.
The example shown above has series options for a line series. Options for other
series types are shown below:
Bar Series:
> {
> color: "#4bb2c5",
> seriesColors: ["#4bb2c5", "#EAA228", "#c5b47f", "#579575", "#839557", "#958c12", "#953579", "#4b5de4", "#d8b83f", "#ff5800", "#0085cc", "#c747a3", "#cddf54", "#FBD178", "#26B4E3", "#bd70c7"],
> lineWidth: 2.5,
> shadow: true,
> barPadding: 2,
> barMargin: 10,
> barWidth: 15.09375,
> highlightColors: ["rgb(129,201,214)", "rgb(129,201,214)", "rgb(129,201,214)", "rgb(129,201,214)", "rgb(129,201,214)", "rgb(129,201,214)", "rgb(129,201,214)", "rgb(129,201,214)"]
> }
Pie Series:
> {
> seriesColors: ["#4bb2c5", "#EAA228", "#c5b47f", "#579575", "#839557", "#958c12", "#953579", "#4b5de4", "#d8b83f", "#ff5800", "#0085cc", "#c747a3", "#cddf54", "#FBD178", "#26B4E3", "#bd70c7"],
> padding: 20,
> sliceMargin: 0,
> fill: true,
> shadow: true,
> startAngle: 0,
> lineWidth: 2.5,
> highlightColors: ["rgb(129,201,214)", "rgb(240,189,104)", "rgb(214,202,165)", "rgb(137,180,158)", "rgb(168,180,137)", "rgb(180,174,89)", "rgb(180,113,161)", "rgb(129,141,236)", "rgb(227,205,120)", "rgb(255,138,76)", "rgb(76,169,219)", "rgb(215,126,190)", "rgb(220,232,135)", "rgb(200,167,96)", "rgb(103,202,235)", "rgb(208,154,215)"]
> }
Funnel Series:
> {
> color: "#4bb2c5",
> lineWidth: 2,
> shadow: true,
> padding: {
> top: 20,
> right: 20,
> bottom: 20,
> left: 20
> },
> sectionMargin: 6,
> seriesColors: ["#4bb2c5", "#EAA228", "#c5b47f", "#579575", "#839557", "#958c12", "#953579", "#4b5de4", "#d8b83f", "#ff5800", "#0085cc", "#c747a3", "#cddf54", "#FBD178", "#26B4E3", "#bd70c7"],
> highlightColors: ["rgb(147,208,220)", "rgb(242,199,126)", "rgb(220,210,178)", "rgb(154,191,172)", "rgb(180,191,154)", "rgb(191,186,112)", "rgb(191,133,174)", "rgb(147,157,238)", "rgb(231,212,139)", "rgb(255,154,102)", "rgb(102,181,224)", "rgb(221,144,199)", "rgb(225,235,152)", "rgb(200,167,96)", "rgb(124,210,238)", "rgb(215,169,221)"]
> }
- Source: