worked on frontend javascript code (jqPlot drawing is buggy & needs some research)
This commit is contained in:
parent
fd4d4cfcc0
commit
7fd2504e7c
20 changed files with 242 additions and 7557 deletions
BIN
frontend/images/information.png
Normal file
BIN
frontend/images/information.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 778 B |
BIN
frontend/images/zoom.png
Normal file
BIN
frontend/images/zoom.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 692 B |
BIN
frontend/images/zoom_in.png
Normal file
BIN
frontend/images/zoom_in.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 725 B |
BIN
frontend/images/zoom_out.png
Normal file
BIN
frontend/images/zoom_out.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 708 B |
|
@ -14,9 +14,8 @@
|
|||
<script type="text/javascript" src="javascripts/jqplot/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
|
||||
<script type="text/javascript" src="javascripts/jqplot/plugins/jqplot.dateAxisRenderer.min.js"></script>
|
||||
<script type="text/javascript" src="javascripts/jqplot/plugins/jqplot.cursor.min.js"></script>
|
||||
<script type="text/javascript" src="javascripts/jqplot/plugins/jqplot.categoryAxisRenderer.min.js"></script>
|
||||
<script type="text/javascript" src="javascripts/jqplot/plugins/jqplot.barRenderer.min.js"></script>
|
||||
<script type="text/javascript" src="javascripts/jqplot/plugins/jqplot.highlighter.min.js"></script>
|
||||
<script type="text/javascript" src="javascripts/jqplot/plugins/jqplot.trendline.min.js"></script>
|
||||
|
||||
<script type="text/javascript" src="javascripts/json2.js"></script>
|
||||
<script type="text/javascript" src="javascripts/functions.js"></script>
|
||||
|
@ -24,7 +23,7 @@
|
|||
|
||||
<link rel="stylesheet" type="text/css" href="stylesheets/jquery.jqplot.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="stylesheets/jquery.treeTable.css">
|
||||
<link rel="stylesheet" type="text/css" href="stylesheets/ui-lightness/jquery-ui-1.8.4.css" rel="Stylesheet" />
|
||||
<link rel="stylesheet" type="text/css" href="stylesheets/ui-lightness/jquery-ui-1.8.5.css" rel="Stylesheet" />
|
||||
<link rel="stylesheet" type="text/css" href="stylesheets/style.css">
|
||||
</head>
|
||||
|
||||
|
@ -35,12 +34,19 @@
|
|||
|
||||
<table id="move">
|
||||
<tr>
|
||||
<td><input type="image" src="images/control_rewind_blue.png" onclick="moveWindow('back')" value="«" /></td>
|
||||
<td>
|
||||
<input type="image" src="images/control_end_blue.png" onclick="moveWindow('last')" value="»»" />
|
||||
<input type="image" src="images/arrow_refresh.png" onclick="loadData()" alt="refresh" />
|
||||
<input type="image" src="images/control_rewind_blue.png" value="move_back" />
|
||||
<input type="image" onclick="plot" src="images/zoom_in.png" value="zoom_in" />
|
||||
</td>
|
||||
<td>
|
||||
<input type="image" src="images/control_end_blue.png" value="move_last" />
|
||||
<input type="image" src="images/arrow_refresh.png" value="refresh" />
|
||||
<input type="image" src="images/zoom.png" value="zoom_reset" />
|
||||
</td>
|
||||
<td>
|
||||
<input type="image" src="images/zoom_out.png" value="zoom_out" />
|
||||
<input type="image" src="images/control_fastforward_blue.png" value="move_forward" />
|
||||
</td>
|
||||
<td><input type="image" src="images/control_fastforward_blue.png" onclick="moveWindow('forward')" value="»" /></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
@ -54,6 +60,9 @@
|
|||
<th>Typ</th>
|
||||
<th>Operationen</th>
|
||||
<th>Anzeige</th>
|
||||
<th>Min.</th>
|
||||
<th>Max.</th>
|
||||
<th>Avg.</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
|
|
|
@ -38,19 +38,39 @@ function refreshWindow() {
|
|||
}
|
||||
}
|
||||
|
||||
function moveWindow(mode) {
|
||||
delta = myWindowEnd - myWindowStart;
|
||||
// alter plotting range (for WUI)
|
||||
function plot() {
|
||||
delta = vz.to - vz.from;
|
||||
|
||||
if(mode == 'last')
|
||||
myWindowEnd = (new Date()).getTime();
|
||||
myWindowStart = myWindowEnd - delta;
|
||||
if(mode == 'back') {
|
||||
myWindowStart -= delta;
|
||||
myWindowEnd -= delta;
|
||||
}
|
||||
if(mode == 'forward') {
|
||||
myWindowStart += delta;
|
||||
myWindowEnd += delta;
|
||||
switch(this.value) {
|
||||
case 'move_last':
|
||||
vz.to = (new Date()).getTime();
|
||||
vz.from = vz.to - delta;
|
||||
break;
|
||||
|
||||
case 'move_back':
|
||||
vz.from -= delta;
|
||||
vz.to -= delta;
|
||||
break;
|
||||
case 'move_forward':
|
||||
vz.from += delta;
|
||||
vz.to += delta;
|
||||
break;
|
||||
|
||||
case 'zoom_reset':
|
||||
// TODO
|
||||
break;
|
||||
|
||||
case 'zoom_in':
|
||||
// TODO
|
||||
break;
|
||||
|
||||
case 'zoom_out':
|
||||
// TODO
|
||||
break;
|
||||
|
||||
case 'refresh':
|
||||
// do nothing; just loadData()
|
||||
}
|
||||
|
||||
loadData();
|
||||
|
@ -58,58 +78,30 @@ function moveWindow(mode) {
|
|||
|
||||
//load json data with given time window
|
||||
function loadData() {
|
||||
eachRecursive(entities, function(entity, parent) {
|
||||
eachRecursive(vz.entities, function(entity, parent) {
|
||||
if (entity.active && entity.type != 'group') {
|
||||
$.getJSON(backendUrl + '/data/' + entity.uuid + '.json', { from: myWindowStart, to: myWindowEnd, tuples: tuples }, ajaxWait(function(json) {
|
||||
$.getJSON(vz.options.backendUrl + '/data/' + entity.uuid + '.json', { from: vz.from, to: vz.to, tuples: vz.options.tuples }, ajaxWait(function(json) {
|
||||
entity.data = json.data[0]; // TODO filter for correct uuid
|
||||
}, showChart, 'data'));
|
||||
}, drawPlot, 'data'));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function showChart() {
|
||||
var jqData = new Array();
|
||||
function drawPlot() {
|
||||
//vz.plot.axes.xaxis.min = vz.from;
|
||||
//vz.plot.axes.xaxis.min = vz.to;
|
||||
|
||||
eachRecursive(entities, function(entity, parent) {
|
||||
jqData.push(entity.data.tuples);
|
||||
var i = 0;
|
||||
|
||||
eachRecursive(vz.entities, function(entity, parent) {
|
||||
vz.plot.series[i++].data = entity.data.tuples;
|
||||
});
|
||||
|
||||
// TODO read docs
|
||||
chart = $.jqplot('plot', jqData, jqOptions);
|
||||
chart.replot({
|
||||
clear: true,
|
||||
|
||||
vz.plot.replot({
|
||||
resetAxes: true
|
||||
});
|
||||
}
|
||||
|
||||
/*
|
||||
* Cookie & UUID related functions
|
||||
*/
|
||||
function getUUIDs() {
|
||||
if ($.getCookie('uuids')) {
|
||||
return JSON.parse($.getCookie('uuids'));
|
||||
}
|
||||
else {
|
||||
return new Array;
|
||||
}
|
||||
}
|
||||
|
||||
function addUUID(uuid) {
|
||||
if (!uuids.contains(uuid)) {
|
||||
uuids.push(uuid);
|
||||
$.setCookie('uuids', JSON.stringify(uuids));
|
||||
}
|
||||
}
|
||||
|
||||
function removeUUID(uuid) {
|
||||
if (uuids.contains(uuid)) {
|
||||
uuids.filter(function(value) {
|
||||
return value != uuid;
|
||||
});
|
||||
$.setCookie('uuids', JSON.stringify(uuids));
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Entity list related functions
|
||||
*/
|
||||
|
@ -117,10 +109,10 @@ function removeUUID(uuid) {
|
|||
/**
|
||||
* Get all entity information from backend
|
||||
*/
|
||||
function loadEntities(uuids) {
|
||||
$.each(uuids, function(index, value) {
|
||||
$.getJSON(backendUrl + '/entity/' + value + '.json', ajaxWait(function(json) {
|
||||
entities.push(json.entity);
|
||||
function loadEntities() {
|
||||
$.each(vz.uuids, function(index, value) {
|
||||
$.getJSON(vz.options.backendUrl + '/entity/' + value + '.json', ajaxWait(function(json) {
|
||||
vz.entities.push(json.entity);
|
||||
}, showEntities, 'information'));
|
||||
});
|
||||
}
|
||||
|
@ -134,9 +126,9 @@ function showEntities() {
|
|||
|
||||
var i = 0;
|
||||
|
||||
eachRecursive(entities, function(entity, parent) {
|
||||
eachRecursive(vz.entities, function(entity, parent) {
|
||||
entity.active = true; // TODO active by default or via backend property?
|
||||
entity.color = colors[i++%colors.length];
|
||||
entity.color = vz.options.plot.seriesColors[i++ % vz.options.plot.seriesColors.length];
|
||||
|
||||
$('#entities tbody').append(
|
||||
$('<tr>')
|
||||
|
@ -152,6 +144,12 @@ function showEntities() {
|
|||
)
|
||||
.append($('<td>').text(entity.type))
|
||||
.append($('<td>') // operations
|
||||
.append($('<input>')
|
||||
.attr('type', 'image')
|
||||
.attr('src', 'images/information.png')
|
||||
.attr('alt', 'details')
|
||||
.bind('click', entity, function(event) { showEntityDetails(event.data); })
|
||||
)
|
||||
.append($('<input>')
|
||||
.attr('type', 'image')
|
||||
.attr('src', 'images/delete.png')
|
||||
|
@ -183,6 +181,59 @@ function showEntities() {
|
|||
loadData();
|
||||
}
|
||||
|
||||
function showEntityDetails(entity) {
|
||||
var properties = $('<table>');
|
||||
|
||||
$.each(entity, function(key, value) {
|
||||
properties.append($('<tr>')
|
||||
.append($('<td>')
|
||||
.addClass('key')
|
||||
.text(key)
|
||||
)
|
||||
.append($('<td>')
|
||||
.addClass('value')
|
||||
.text(value)
|
||||
)
|
||||
);
|
||||
});
|
||||
|
||||
$('<div>')
|
||||
.addClass('details')
|
||||
.append(properties)
|
||||
.dialog({
|
||||
title: 'Entity Details',
|
||||
width: 450
|
||||
});
|
||||
}
|
||||
|
||||
/*
|
||||
* Cookie & UUID related functions
|
||||
*/
|
||||
function getUUIDs() {
|
||||
if ($.getCookie('uuids')) {
|
||||
return JSON.parse($.getCookie('uuids'));
|
||||
}
|
||||
else {
|
||||
return new Array();
|
||||
}
|
||||
}
|
||||
|
||||
function addUUID(uuid) {
|
||||
if (!uuids.contains(uuid)) {
|
||||
uuids.push(uuid);
|
||||
$.setCookie('uuids', JSON.stringify(uuids));
|
||||
}
|
||||
}
|
||||
|
||||
function removeUUID(uuid) {
|
||||
if (uuids.contains(uuid)) {
|
||||
uuids.filter(function(value) {
|
||||
return value != uuid;
|
||||
});
|
||||
$.setCookie('uuids', JSON.stringify(uuids));
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* General helper functions
|
||||
*/
|
||||
|
@ -212,18 +263,48 @@ function eachRecursive(array, callback, parent) {
|
|||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Checks if value of part of the array
|
||||
*
|
||||
* @param needle the value to search for
|
||||
* @return boolean
|
||||
*/
|
||||
Array.prototype.contains = function(needle) {
|
||||
for (var i=0; i<this.length; i++) {
|
||||
if (this[i] == needle) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
return this.key(needle) ? true : false;
|
||||
};
|
||||
|
||||
/**
|
||||
* Calculates the diffrence between this and another Array
|
||||
*
|
||||
* @param compare the Array to compare with
|
||||
* @return array
|
||||
*/
|
||||
Array.prototype.diff = function(compare) {
|
||||
return this.filter(function(elem) {
|
||||
return !compare.contains(elem);
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Find the key to an given value
|
||||
*
|
||||
* @param needle the value to search for
|
||||
* @return integer
|
||||
*/
|
||||
Array.prototype.key = function(needle) {
|
||||
for (var i=0; i<this.length; i++) {
|
||||
if (this[i] == needle) {
|
||||
return i;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Remove a value from the array
|
||||
*/
|
||||
Array.prototype.remove = function(needle) {
|
||||
var key = this.key(needle);
|
||||
if (key) {
|
||||
this.splice(key, 1);
|
||||
}
|
||||
};
|
||||
|
|
|
@ -1,21 +0,0 @@
|
|||
Title: MIT License
|
||||
|
||||
Copyright (c) 2009 Chris Leonello
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in
|
||||
all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
THE SOFTWARE.
|
|
@ -1,46 +0,0 @@
|
|||
Title: jqPlot Readme
|
||||
|
||||
Pure JavaScript plotting plugin for jQuery.
|
||||
|
||||
Copyright (c) 2009 Chris Leonello
|
||||
This software is licensed under the GPL version 2.0 and MIT licenses.
|
||||
|
||||
To learn how to use jqPlot, start with the Basic Unsage Instructions below. Then read the
|
||||
usage.txt and jqPlotOptions.txt files included with the distribution.
|
||||
|
||||
The jqPlot home page is at <http://www.jqplot.com/>.
|
||||
|
||||
Downloads can be found at <http://bitbucket.org/cleonello/jqplot/downloads/>.
|
||||
|
||||
The mailing list is at <http://groups.google.com/group/jqplot-users>.
|
||||
|
||||
Examples and unit tests are at <http://www.jqplot.com/tests/>.
|
||||
|
||||
Documentation is at <http://www.jqplot.com/docs/>.
|
||||
|
||||
The project page and source code are at <http://www.bitbucket.org/cleonello/jqplot/>.
|
||||
|
||||
Bugs, issues, feature requests: <http://www.bitbucket.org/cleonello/jqplot/issues/>.
|
||||
|
||||
Basic Usage Instructions:
|
||||
|
||||
jqPlot requires jQuery (tested with 1.3.2 or better). jQuery 1.3.2 is included in
|
||||
the distribution. To use jqPlot include jQuery, the jqPlot jQuery plugin, the jqPlot css file and
|
||||
optionally the excanvas script for IE support in your web page...
|
||||
|
||||
> <!--[if IE]><script language="javascript" type="text/javascript" src="excanvas.js"></script><![endif]-->
|
||||
> <script language="javascript" type="text/javascript" src="jquery-1.3.2.min.js"></script>
|
||||
> <script language="javascript" type="text/javascript" src="jquery.jqplot.min.js"></script>
|
||||
> <link rel="stylesheet" type="text/css" href="jquery.jqplot.css" />
|
||||
|
||||
For usage instructions, see <jqPlot Usage> in usage.txt. For available options, see
|
||||
<jqPlot Options> in jqPlotOptions.txt.
|
||||
|
||||
Building from source:
|
||||
|
||||
To build a distribution from source you need to have ant <http://ant.apache.org>
|
||||
installed. There are 6 targets: clean, dist, min, tests, docs and all. Use
|
||||
|
||||
> ant -p
|
||||
|
||||
to get a description of the various build targets.
|
|
@ -1,261 +0,0 @@
|
|||
Title: Change Log
|
||||
|
||||
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.
|
||||
* Refactored series drawing so that each series and series shadow drawn
|
||||
on it's own canvas. Allows series to be redrawn independently of eachother.
|
||||
* Added additional default series colors.
|
||||
* Aded 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.
|
||||
* Refactored 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 tooptip.
|
||||
* 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 configuraiton 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 ratated label support. This feature is currently expreimental.
|
||||
* 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.
|
||||
* Refactored axis tick renderer instantiation into the axes renderers themselves.
|
||||
|
||||
|
||||
For chnages prior to 0.6.0 release, please see change log at http://bitbucket.org/cleonello/jqplot/changesets/
|
|
@ -1,13 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) 2009 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 dot leonello at gmail 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 .
|
||||
*/
|
File diff suppressed because it is too large
Load diff
|
@ -1,280 +0,0 @@
|
|||
Title: GPL Version 2
|
||||
|
||||
GNU GENERAL PUBLIC LICENSE
|
||||
Version 2, June 1991
|
||||
|
||||
Copyright (C) 1989, 1991 Free Software Foundation, Inc.,
|
||||
51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
|
||||
Everyone is permitted to copy and distribute verbatim copies
|
||||
of this license document, but changing it is not allowed.
|
||||
|
||||
Preamble
|
||||
|
||||
The licenses for most software are designed to take away your
|
||||
freedom to share and change it. By contrast, the GNU General Public
|
||||
License is intended to guarantee your freedom to share and change free
|
||||
software--to make sure the software is free for all its users. This
|
||||
General Public License applies to most of the Free Software
|
||||
Foundation's software and to any other program whose authors commit to
|
||||
using it. (Some other Free Software Foundation software is covered by
|
||||
the GNU Lesser General Public License instead.) You can apply it to
|
||||
your programs, too.
|
||||
|
||||
When we speak of free software, we are referring to freedom, not
|
||||
price. Our General Public Licenses are designed to make sure that you
|
||||
have the freedom to distribute copies of free software (and charge for
|
||||
this service if you wish), that you receive source code or can get it
|
||||
if you want it, that you can change the software or use pieces of it
|
||||
in new free programs; and that you know you can do these things.
|
||||
|
||||
To protect your rights, we need to make restrictions that forbid
|
||||
anyone to deny you these rights or to ask you to surrender the rights.
|
||||
These restrictions translate to certain responsibilities for you if you
|
||||
distribute copies of the software, or if you modify it.
|
||||
|
||||
For example, if you distribute copies of such a program, whether
|
||||
gratis or for a fee, you must give the recipients all the rights that
|
||||
you have. You must make sure that they, too, receive or can get the
|
||||
source code. And you must show them these terms so they know their
|
||||
rights.
|
||||
|
||||
We protect your rights with two steps: (1) copyright the software, and
|
||||
(2) offer you this license which gives you legal permission to copy,
|
||||
distribute and/or modify the software.
|
||||
|
||||
Also, for each author's protection and ours, we want to make certain
|
||||
that everyone understands that there is no warranty for this free
|
||||
software. If the software is modified by someone else and passed on, we
|
||||
want its recipients to know that what they have is not the original, so
|
||||
that any problems introduced by others will not reflect on the original
|
||||
authors' reputations.
|
||||
|
||||
Finally, any free program is threatened constantly by software
|
||||
patents. We wish to avoid the danger that redistributors of a free
|
||||
program will individually obtain patent licenses, in effect making the
|
||||
program proprietary. To prevent this, we have made it clear that any
|
||||
patent must be licensed for everyone's free use or not licensed at all.
|
||||
|
||||
The precise terms and conditions for copying, distribution and
|
||||
modification follow.
|
||||
|
||||
GNU GENERAL PUBLIC LICENSE
|
||||
TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
|
||||
|
||||
0. This License applies to any program or other work which contains
|
||||
a notice placed by the copyright holder saying it may be distributed
|
||||
under the terms of this General Public License. The "Program", below,
|
||||
refers to any such program or work, and a "work based on the Program"
|
||||
means either the Program or any derivative work under copyright law:
|
||||
that is to say, a work containing the Program or a portion of it,
|
||||
either verbatim or with modifications and/or translated into another
|
||||
language. (Hereinafter, translation is included without limitation in
|
||||
the term "modification".) Each licensee is addressed as "you".
|
||||
|
||||
Activities other than copying, distribution and modification are not
|
||||
covered by this License; they are outside its scope. The act of
|
||||
running the Program is not restricted, and the output from the Program
|
||||
is covered only if its contents constitute a work based on the
|
||||
Program (independent of having been made by running the Program).
|
||||
Whether that is true depends on what the Program does.
|
||||
|
||||
1. You may copy and distribute verbatim copies of the Program's
|
||||
source code as you receive it, in any medium, provided that you
|
||||
conspicuously and appropriately publish on each copy an appropriate
|
||||
copyright notice and disclaimer of warranty; keep intact all the
|
||||
notices that refer to this License and to the absence of any warranty;
|
||||
and give any other recipients of the Program a copy of this License
|
||||
along with the Program.
|
||||
|
||||
You may charge a fee for the physical act of transferring a copy, and
|
||||
you may at your option offer warranty protection in exchange for a fee.
|
||||
|
||||
2. You may modify your copy or copies of the Program or any portion
|
||||
of it, thus forming a work based on the Program, and copy and
|
||||
distribute such modifications or work under the terms of Section 1
|
||||
above, provided that you also meet all of these conditions:
|
||||
|
||||
a) You must cause the modified files to carry prominent notices
|
||||
stating that you changed the files and the date of any change.
|
||||
|
||||
b) You must cause any work that you distribute or publish, that in
|
||||
whole or in part contains or is derived from the Program or any
|
||||
part thereof, to be licensed as a whole at no charge to all third
|
||||
parties under the terms of this License.
|
||||
|
||||
c) If the modified program normally reads commands interactively
|
||||
when run, you must cause it, when started running for such
|
||||
interactive use in the most ordinary way, to print or display an
|
||||
announcement including an appropriate copyright notice and a
|
||||
notice that there is no warranty (or else, saying that you provide
|
||||
a warranty) and that users may redistribute the program under
|
||||
these conditions, and telling the user how to view a copy of this
|
||||
License. (Exception: if the Program itself is interactive but
|
||||
does not normally print such an announcement, your work based on
|
||||
the Program is not required to print an announcement.)
|
||||
|
||||
These requirements apply to the modified work as a whole. If
|
||||
identifiable sections of that work are not derived from the Program,
|
||||
and can be reasonably considered independent and separate works in
|
||||
themselves, then this License, and its terms, do not apply to those
|
||||
sections when you distribute them as separate works. But when you
|
||||
distribute the same sections as part of a whole which is a work based
|
||||
on the Program, the distribution of the whole must be on the terms of
|
||||
this License, whose permissions for other licensees extend to the
|
||||
entire whole, and thus to each and every part regardless of who wrote it.
|
||||
|
||||
Thus, it is not the intent of this section to claim rights or contest
|
||||
your rights to work written entirely by you; rather, the intent is to
|
||||
exercise the right to control the distribution of derivative or
|
||||
collective works based on the Program.
|
||||
|
||||
In addition, mere aggregation of another work not based on the Program
|
||||
with the Program (or with a work based on the Program) on a volume of
|
||||
a storage or distribution medium does not bring the other work under
|
||||
the scope of this License.
|
||||
|
||||
3. You may copy and distribute the Program (or a work based on it,
|
||||
under Section 2) in object code or executable form under the terms of
|
||||
Sections 1 and 2 above provided that you also do one of the following:
|
||||
|
||||
a) Accompany it with the complete corresponding machine-readable
|
||||
source code, which must be distributed under the terms of Sections
|
||||
1 and 2 above on a medium customarily used for software interchange; or,
|
||||
|
||||
b) Accompany it with a written offer, valid for at least three
|
||||
years, to give any third party, for a charge no more than your
|
||||
cost of physically performing source distribution, a complete
|
||||
machine-readable copy of the corresponding source code, to be
|
||||
distributed under the terms of Sections 1 and 2 above on a medium
|
||||
customarily used for software interchange; or,
|
||||
|
||||
c) Accompany it with the information you received as to the offer
|
||||
to distribute corresponding source code. (This alternative is
|
||||
allowed only for noncommercial distribution and only if you
|
||||
received the program in object code or executable form with such
|
||||
an offer, in accord with Subsection b above.)
|
||||
|
||||
The source code for a work means the preferred form of the work for
|
||||
making modifications to it. For an executable work, complete source
|
||||
code means all the source code for all modules it contains, plus any
|
||||
associated interface definition files, plus the scripts used to
|
||||
control compilation and installation of the executable. However, as a
|
||||
special exception, the source code distributed need not include
|
||||
anything that is normally distributed (in either source or binary
|
||||
form) with the major components (compiler, kernel, and so on) of the
|
||||
operating system on which the executable runs, unless that component
|
||||
itself accompanies the executable.
|
||||
|
||||
If distribution of executable or object code is made by offering
|
||||
access to copy from a designated place, then offering equivalent
|
||||
access to copy the source code from the same place counts as
|
||||
distribution of the source code, even though third parties are not
|
||||
compelled to copy the source along with the object code.
|
||||
|
||||
4. You may not copy, modify, sublicense, or distribute the Program
|
||||
except as expressly provided under this License. Any attempt
|
||||
otherwise to copy, modify, sublicense or distribute the Program is
|
||||
void, and will automatically terminate your rights under this License.
|
||||
However, parties who have received copies, or rights, from you under
|
||||
this License will not have their licenses terminated so long as such
|
||||
parties remain in full compliance.
|
||||
|
||||
5. You are not required to accept this License, since you have not
|
||||
signed it. However, nothing else grants you permission to modify or
|
||||
distribute the Program or its derivative works. These actions are
|
||||
prohibited by law if you do not accept this License. Therefore, by
|
||||
modifying or distributing the Program (or any work based on the
|
||||
Program), you indicate your acceptance of this License to do so, and
|
||||
all its terms and conditions for copying, distributing or modifying
|
||||
the Program or works based on it.
|
||||
|
||||
6. Each time you redistribute the Program (or any work based on the
|
||||
Program), the recipient automatically receives a license from the
|
||||
original licensor to copy, distribute or modify the Program subject to
|
||||
these terms and conditions. You may not impose any further
|
||||
restrictions on the recipients' exercise of the rights granted herein.
|
||||
You are not responsible for enforcing compliance by third parties to
|
||||
this License.
|
||||
|
||||
7. If, as a consequence of a court judgment or allegation of patent
|
||||
infringement or for any other reason (not limited to patent issues),
|
||||
conditions are imposed on you (whether by court order, agreement or
|
||||
otherwise) that contradict the conditions of this License, they do not
|
||||
excuse you from the conditions of this License. If you cannot
|
||||
distribute so as to satisfy simultaneously your obligations under this
|
||||
License and any other pertinent obligations, then as a consequence you
|
||||
may not distribute the Program at all. For example, if a patent
|
||||
license would not permit royalty-free redistribution of the Program by
|
||||
all those who receive copies directly or indirectly through you, then
|
||||
the only way you could satisfy both it and this License would be to
|
||||
refrain entirely from distribution of the Program.
|
||||
|
||||
If any portion of this section is held invalid or unenforceable under
|
||||
any particular circumstance, the balance of the section is intended to
|
||||
apply and the section as a whole is intended to apply in other
|
||||
circumstances.
|
||||
|
||||
It is not the purpose of this section to induce you to infringe any
|
||||
patents or other property right claims or to contest validity of any
|
||||
such claims; this section has the sole purpose of protecting the
|
||||
integrity of the free software distribution system, which is
|
||||
implemented by public license practices. Many people have made
|
||||
generous contributions to the wide range of software distributed
|
||||
through that system in reliance on consistent application of that
|
||||
system; it is up to the author/donor to decide if he or she is willing
|
||||
to distribute software through any other system and a licensee cannot
|
||||
impose that choice.
|
||||
|
||||
This section is intended to make thoroughly clear what is believed to
|
||||
be a consequence of the rest of this License.
|
||||
|
||||
8. If the distribution and/or use of the Program is restricted in
|
||||
certain countries either by patents or by copyrighted interfaces, the
|
||||
original copyright holder who places the Program under this License
|
||||
may add an explicit geographical distribution limitation excluding
|
||||
those countries, so that distribution is permitted only in or among
|
||||
countries not thus excluded. In such case, this License incorporates
|
||||
the limitation as if written in the body of this License.
|
||||
|
||||
9. The Free Software Foundation may publish revised and/or new versions
|
||||
of the General Public License from time to time. Such new versions will
|
||||
be similar in spirit to the present version, but may differ in detail to
|
||||
address new problems or concerns.
|
||||
|
||||
Each version is given a distinguishing version number. If the Program
|
||||
specifies a version number of this License which applies to it and "any
|
||||
later version", you have the option of following the terms and conditions
|
||||
either of that version or of any later version published by the Free
|
||||
Software Foundation. If the Program does not specify a version number of
|
||||
this License, you may choose any version ever published by the Free Software
|
||||
Foundation.
|
||||
|
||||
10. If you wish to incorporate parts of the Program into other free
|
||||
programs whose distribution conditions are different, write to the author
|
||||
to ask for permission. For software which is copyrighted by the Free
|
||||
Software Foundation, write to the Free Software Foundation; we sometimes
|
||||
make exceptions for this. Our decision will be guided by the two goals
|
||||
of preserving the free status of all derivatives of our free software and
|
||||
of promoting the sharing and reuse of software generally.
|
||||
|
||||
NO WARRANTY
|
||||
|
||||
11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO WARRANTY
|
||||
FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW. EXCEPT WHEN
|
||||
OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES
|
||||
PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED
|
||||
OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
|
||||
MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. THE ENTIRE RISK AS
|
||||
TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU. SHOULD THE
|
||||
PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING,
|
||||
REPAIR OR CORRECTION.
|
||||
|
||||
12. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
|
||||
WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR
|
||||
REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING
|
||||
OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED
|
||||
TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY
|
||||
YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER
|
||||
PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE
|
||||
POSSIBILITY OF SUCH DAMAGES.
|
|
@ -1,53 +0,0 @@
|
|||
Title: jqPlot CSS Customization
|
||||
|
||||
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".
|
|
@ -1,276 +0,0 @@
|
|||
Title: jqPlot Options
|
||||
|
||||
**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
|
||||
}
|
||||
}
|
||||
}
|
||||
}}}
|
19
frontend/javascripts/jqplot/jquery-1.3.2.min.js
vendored
19
frontend/javascripts/jqplot/jquery-1.3.2.min.js
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load diff
|
@ -1,239 +0,0 @@
|
|||
Title: Options Tutorial
|
||||
|
||||
This document will help you understand how jqPlot's options
|
||||
relate to the API documentation and the jqPlot object
|
||||
itself. For a listing of options available to jqPlot,
|
||||
see <jqPlot Options> in the jqPlotOptions.txt file.
|
||||
|
||||
The key to effectively using jqPlot is understanding jqPlot's
|
||||
options. The online documentation is API documentation. While
|
||||
it explains what attributes and methods various objects posses,
|
||||
it doesn't explain how to use or set those attributes through
|
||||
options. This tutorial will help explain that.
|
||||
|
||||
Lets assume you are creating a plot
|
||||
like this:
|
||||
|
||||
> chart = $.jqplot('chart', dataSeries, optionsObj);
|
||||
|
||||
First, note that you shouldn't try to directly set attributes on the
|
||||
"chart" object (like chart.grid.shadow) after your call to $.jqplot().
|
||||
At best this won't do anything **(see below). You should pass options in via
|
||||
the "optionsObj".
|
||||
|
||||
the optionsObj really represents the plot object (jqPlot object, not
|
||||
to be confused with the $.jqplot function which will create a jqPlot
|
||||
object). Attributes you specify on that object will be merged with
|
||||
attributes in the jqPlot object. The axes, legend, series, etc. are
|
||||
attributes on the jqPlot object. The jqPlot/optionsObj object looks
|
||||
something like (only some attributes shown):
|
||||
|
||||
> jqPlot-|
|
||||
> |-seriesColors
|
||||
> |-textColor
|
||||
> |-fontFamily
|
||||
> |-fontSize
|
||||
> |-stackSeries
|
||||
> |-series(Array)-|
|
||||
> | |-Series1-|
|
||||
> | | |-lineWidth
|
||||
> | | |-shadow
|
||||
> | | |-showLine
|
||||
> | | |-showMarker
|
||||
> | | |-color
|
||||
> | |-Series2...
|
||||
> | |-...
|
||||
> | |-SeriesN
|
||||
> |
|
||||
> |-grid(Object)-|
|
||||
> | |-drawGridLines
|
||||
> | |-background
|
||||
> | |-borderColor
|
||||
> | |-borderWidth
|
||||
> | |-shadow
|
||||
> |
|
||||
> |-title(Object)-|
|
||||
> | |-text
|
||||
> | |-show
|
||||
> | |-fontFamily
|
||||
> | |-fontSize
|
||||
> | |-textAlign
|
||||
> | |-textColor
|
||||
> |
|
||||
> |-axes(Object)-|
|
||||
> | |-xais-|
|
||||
> | | |-min
|
||||
> | | |-max
|
||||
> | | |-numberTicks
|
||||
> | | |-showTicks
|
||||
> | | |-showTickMarks
|
||||
> | | |-pad
|
||||
> |
|
||||
> | ... and so on
|
||||
|
||||
The optionsObj should follow the same construction as if it were a
|
||||
jqPlot object (with some exceptions/shortcuts I'll mention in a
|
||||
moment). So generally, when you see something like
|
||||
"this.drawGridLines" in the grid properties in the docs, just replace
|
||||
"this" with "grid" in your options object. So it becomes
|
||||
optionsObj.grid.drawGridLines. Do likewise with the other objects in
|
||||
the plot, replacing "this", with the respective attribute on the plot
|
||||
like "legend" or "title". Series and Axes are handled a little
|
||||
different, because series is an array and axes has 4 distinct children
|
||||
"xaxis", "yaxis", "x2axis" and "y2axis".
|
||||
|
||||
So, to remove the shadow from the grid and change the grid border size
|
||||
you would do:
|
||||
|
||||
> optionObj = {grid:{shadow:false, borderWidth:9.0}};
|
||||
|
||||
To do the same as above but also make all the text in the plot red you
|
||||
would do:
|
||||
|
||||
> optionObj = {
|
||||
> textColor:"#ff0000",
|
||||
> grid:{shadow:false, borderWidth:9.0}
|
||||
> }
|
||||
|
||||
Here is a more deeply nested example. Say you want to specify a min
|
||||
and max on your y axis and use a specific color for your second
|
||||
series. That would look like:
|
||||
|
||||
> optionsObj = {
|
||||
> axes:{yaxis:{min:5, max:230}},
|
||||
> series:[{},{color:"#33ff66"}]
|
||||
> }
|
||||
|
||||
Note that series options are an array in order of the series data you
|
||||
sent in to your plot. To get to the second series, you have to put an
|
||||
object (even if empty) in place of the first series.
|
||||
|
||||
There is a handy shortcut to assign options to all axes or all series
|
||||
at one go. Use axesDefaults and seriesDefaults. So, if you wanted
|
||||
both x and y axes to start at 0 and you wanted all series to not show
|
||||
markers, you could do:
|
||||
|
||||
> optionsObj = {axesDefaults:{min:0}, seriesDefaults:{showMarker:false}}
|
||||
|
||||
Another shortcut is for the plot title. Normally, you would assign
|
||||
options to the title as an object. If you specify a title option as a
|
||||
string, it will assign that to the title.text property automatically.
|
||||
So these two are equivalent:
|
||||
|
||||
> optionsObj = {title:{text:"My Plot"}}
|
||||
|
||||
and
|
||||
|
||||
> optionsObj = {title:"My Plot"}
|
||||
|
||||
Where things need more explaination is with renderers, plugins and
|
||||
their options. Briefly, what's renderer, what's a plugin.
|
||||
|
||||
A renderer is an object that is used to draw something and gets
|
||||
attached to an existing object in the plot in order to draw it. A
|
||||
plugin does more than just provide drawing functionality to an
|
||||
object. It will do more like calculate a trend line, change the
|
||||
cursor, provide event driven functionality, etc. I consider renderers
|
||||
plugins, but plugins don't have to be renderers.
|
||||
|
||||
So, how do you use renderers, plugins, and specify their options?
|
||||
Some common renderes are for bar charts and category axes. If you
|
||||
want to render your series as a bar chart with each set of bars
|
||||
showing up in a category on the x axis, you do:
|
||||
|
||||
> optionsObj = {
|
||||
> seriesDefaults:{renderer:$.jqplot.BarRenderer},
|
||||
> axes:{xaxis:{renderer:$.jqplot.CategoryAxisRenderer}}
|
||||
> }
|
||||
|
||||
This replaces the default renderer used for all series in the plot
|
||||
with a bar renderer and the x axis default renderer (but not any other
|
||||
axis) with a category renderer.
|
||||
|
||||
Now, how would I assign options to those renderers? The renderer's
|
||||
attributes may not be present in the pre-existing jqPlot object, they
|
||||
may be specific to the renderer. This is done through the
|
||||
"rendererOptions" option on the appropriate object. So, if I wanted my
|
||||
bars to be 25 pixels wide, I would do:
|
||||
|
||||
|
||||
> optionsObj = {
|
||||
> seriesDefaults:{
|
||||
> renderer:$.jqplot.BarRenderer},
|
||||
> rendererOptions:{
|
||||
> barWidth:25
|
||||
> },
|
||||
> axes:{xaxis:{renderer:$.jqplot.CategoryAxisRenderer}}
|
||||
> }
|
||||
|
||||
Again, this is using the "seriesDefaults" option, which will apply
|
||||
options to all series in the plot. You could do the same on any
|
||||
particular series in the plot through the "series" options array.
|
||||
|
||||
Plugins are free to add their own options. For example, the
|
||||
highlighter plugin has it's own set of options that are unique to it.
|
||||
As a result, it responds to options placed in the "highlighter"
|
||||
attribute of your options object. So, if I wanted to change the
|
||||
highlighter tooltip to fade in and out slowly and be positioned
|
||||
directly above the point I'm highlighting:
|
||||
|
||||
> optionsObj = {
|
||||
> highlighter:{tooltipFadeSpeed:'slow', tooltipLocation:'n'}
|
||||
> }
|
||||
|
||||
Other plugins, like dragable and trendlines, add their options in with
|
||||
the series. This is because both of those plugins can have different
|
||||
options for different series in the plot. So, if you wanted to specify the
|
||||
color of the dragable and constrain it to drag only on the x axis as well
|
||||
as specify the color of the trend line you could do:
|
||||
|
||||
> series:[{
|
||||
> dragable: {
|
||||
> color: '#ff3366',
|
||||
> constrainTo: 'x'
|
||||
> },
|
||||
> trendline: {
|
||||
> color: '#cccccc'
|
||||
> }
|
||||
> }]
|
||||
|
||||
This would apply those options to the first series only. If you had 2 series
|
||||
and wanted to turn off dragging and trend lines on the second series, you could do:
|
||||
|
||||
> series:[{
|
||||
> dragable: {
|
||||
> color: '#ff3366',
|
||||
> constrainTo: 'x'
|
||||
> },
|
||||
> trendline: {
|
||||
> color: '#cccccc'
|
||||
> }
|
||||
> }, {
|
||||
> isDragable: false,
|
||||
> trendline:{
|
||||
> show: false
|
||||
> }
|
||||
> }]
|
||||
|
||||
Note, series dragability is turned off with the "isDragable" option directly on
|
||||
the series itself, not with a suboption of "dragable". This may be improved
|
||||
in the future.
|
||||
|
||||
I hope this is helpful.
|
||||
A few key points to remember:
|
||||
|
||||
- When you see "this" in the api docs, you generally replace it with
|
||||
the name of the object (in lowercase) you are looking at in your
|
||||
options object.
|
||||
- seriesDefaults and axesDefaults are convenient shortcuts.
|
||||
- to assign options to a renderer, generally use the "rendererOptions"
|
||||
- plugins may add their own options attribute, like "highlighter" or
|
||||
"cursor".
|
||||
|
||||
** Note: you can set attributes after the plot is created (like
|
||||
plot.grid.shadow = false), but you'll have to issue the appropriate
|
||||
calls to possibly reinitialize and redraw the plot. jqPlot can
|
||||
definitely handle this to change the plot after creation (this is how
|
||||
the dragable plugin updates the plot data and the trend line plugin
|
||||
recomputes itself when data changes). This hasn't been documented
|
||||
yet, however.
|
|
@ -1,119 +0,0 @@
|
|||
Title: jqPlot Usage
|
||||
|
||||
Usage Documentation:
|
||||
|
||||
Introduction:
|
||||
|
||||
jqPlot is a jQuery plugin to generate pure client-side javascript charts in your web pages.
|
||||
|
||||
The jqPlot home page is at <http://www.jqplot.com/>.
|
||||
|
||||
The project page and downloads are at <http://www.bitbucket.org/cleonello/jqplot/>.
|
||||
|
||||
Below are a few examples to demonstrate jqPlot usage. These plots are shown as static images.
|
||||
Many more examples of dynamically rendered plots can be seen on the test and examples pages here: <../../tests/>.
|
||||
|
||||
Include the Files:
|
||||
|
||||
jqPlot requires jQuery (tested with 1.3.2 or better). jQuery 1.3.2 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:
|
||||
|
||||
> <!--[if IE]><script language="javascript" type="text/javascript" src="excanvas.js"></script><![endif]-->
|
||||
> <script language="javascript" type="text/javascript" src="jquery-1.3.2.min.js"></script>
|
||||
> <script language="javascript" type="text/javascript" src="jquery.jqplot.min.js"></script>
|
||||
> <link rel="stylesheet" type="text/css" href="jquery.jqplot.css" />
|
||||
|
||||
Add a plot container:
|
||||
|
||||
Add a container (target) to your web page where you want your plot to show up.
|
||||
Be sure to give your target a width and a height:
|
||||
|
||||
> <div id="chartdiv" style="height:400px;width:300px; "></div>
|
||||
|
||||
Create a plot:
|
||||
|
||||
Then, create the actual plot by calling the
|
||||
$.jqplot plugin with the id of your target and some data:
|
||||
|
||||
> $.jqplot('chartdiv', [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]]);
|
||||
|
||||
Which will produce a
|
||||
chart like:
|
||||
|
||||
(see images/basicline.png)
|
||||
|
||||
Plot Options:
|
||||
|
||||
You can customize the plot by passing options to the $.jqplot function. Options are described in
|
||||
<jqPlot Options> in the jqPlotOptions.txt file. An example of options usage:
|
||||
|
||||
> $.jqplot('chartdiv', [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]],
|
||||
> { title:'Exponential Line',
|
||||
> axes:{yaxis:{min:-10, max:240}},
|
||||
> series:[{color:'#5FAB78'}]
|
||||
> });
|
||||
|
||||
Which will produce
|
||||
a plot like:
|
||||
|
||||
(see images/basicoptions.png)
|
||||
|
||||
Using Plugins:
|
||||
|
||||
You can use jqPlot plugins (that is, plugins to the jqPlot plugin) by including them in your html
|
||||
after you include the jqPlot plugin. Here is how to include the log axis plugin:
|
||||
|
||||
> <link rel="stylesheet" type="text/css" href="jquery.jqplot.css" />
|
||||
> <!--[if IE]><script language="javascript" type="text/javascript" src="excanvas.js"></script><![endif]-->
|
||||
> <script language="javascript" type="text/javascript" src="jquery-1.3.2.min.js"></script>
|
||||
> <script language="javascript" type="text/javascript" src="jquery.jqplot.min.js"></script>
|
||||
> <script language="javascript" type="text/javascript" src="jqplot.logAxisRenderer.js"></script>
|
||||
|
||||
Here is a the same $.jqplot call
|
||||
but with a log y axis:
|
||||
|
||||
> $.jqplot('chartdiv', [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]],
|
||||
> { title:'Exponential Line',
|
||||
> axes:{yaxis:{renderer: $.jqplot.LogAxisRenderer}},
|
||||
> series:[{color:'#5FAB78'}]
|
||||
> });
|
||||
|
||||
Which produces
|
||||
a plot like:
|
||||
|
||||
(see images/basiclogaxis.png)
|
||||
|
||||
You can further customize with options specific
|
||||
to the log axis plugin:
|
||||
|
||||
> $.jqplot('chartdiv', [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]],
|
||||
> { title:'Exponential Line',
|
||||
> axes:{yaxis:{renderer: $.jqplot.LogAxisRenderer, tickDistribution:'power'}},
|
||||
> series:[{color:'#5FAB78'}]
|
||||
> });
|
||||
|
||||
Which makes a
|
||||
plot like:
|
||||
|
||||
(see images/basiclogoptions.png)
|
||||
|
||||
For a full list of options, see <jqPlot Options> in the jqPlotOptions.txt file.
|
||||
|
||||
You can add as many plugins as you wish. Order is generally not important.
|
||||
Some plugins, like the highlighter plugin which highlights data points near the
|
||||
mouse, don't need any extra options or setup to function. Highlighter does have
|
||||
additional options which the user can set.
|
||||
|
||||
Other plugins, the barRenderer for example, provide functionality the must be specified
|
||||
in the chart options object. To render a series as a bar graph with the bar renderer,
|
||||
you would first include the plugin after jqPlot:
|
||||
|
||||
> <script language="javascript" type="text/javascript" src="plugins/jqplot.barRenderer.min.js"></script>
|
||||
|
||||
Then you would create
|
||||
a chart like:
|
||||
|
||||
> $.jqplot('chartdiv', [[34.53, 56.32, 25.1, 18.6]], series:[{renderer:$.jqplot.BarRenderer}]);
|
||||
|
||||
Here the default LineRenderer is replaced by a BarRenderer to generate a bar graph for the first (an only) series.
|
3
frontend/javascripts/jquery-extensions.js
vendored
3
frontend/javascripts/jquery-extensions.js
vendored
|
@ -85,7 +85,8 @@ $.extend({
|
|||
var path = options.path ? '; path=' + (options.path) : '';
|
||||
var domain = options.domain ? '; domain=' + (options.domain) : '';
|
||||
var secure = options.secure ? '; secure' : '';
|
||||
document.cookie = [ name, '=', encodeURIComponent(value), expires, path, domain, secure ].join('');
|
||||
|
||||
document.cookie = name + '=' + encodeURIComponent(value) + expires + path + domain + secure;
|
||||
},
|
||||
getCookie: function(name) {
|
||||
var value = null;
|
||||
|
|
|
@ -25,80 +25,81 @@
|
|||
* along with volkszaehler.org. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
/*
|
||||
* Constants & settings
|
||||
*/
|
||||
var backendUrl = '../backend/index.php';
|
||||
var tuples = 300;
|
||||
var colors = ['#83CAFF', '#7E0021', '#579D1C', '#FFD320', '#FF420E', '#004586', '#0084D1', '#C5000B', '#FF950E', '#4B1F6F', '#AECF00', '#314004'];
|
||||
var jqOptions = {
|
||||
series: [],
|
||||
cursor: {
|
||||
zoom: true,
|
||||
showTooltip: true,
|
||||
constrainZoomTo: 'x'
|
||||
},
|
||||
seriesDefaults: {
|
||||
lineWidth: 1,
|
||||
showMarker: true,
|
||||
showLine: false,
|
||||
markerOptions: {
|
||||
style: 'dash',
|
||||
shadow: false,
|
||||
size: 2
|
||||
},
|
||||
trendline: {
|
||||
shadow: false
|
||||
}
|
||||
},
|
||||
axes: {
|
||||
yaxis: {
|
||||
autoscale: true,
|
||||
min: 0,
|
||||
label: 'Leistung (Watt)',
|
||||
tickOptions: {
|
||||
formatString: '%.3f'
|
||||
// volkszaehler.org object
|
||||
// holds all data and options for the frontend
|
||||
var vz = {
|
||||
// storing entities
|
||||
entities: new Array,
|
||||
uuids: new Array,
|
||||
|
||||
// parameter for json server
|
||||
to: new Date().getTime(),
|
||||
|
||||
//parameter for json server (last 24 hours)
|
||||
from: new Date().getTime() - 24*60*60*1000,
|
||||
|
||||
options: {
|
||||
backendUrl: '../backend/index.php',
|
||||
tuples: 300,
|
||||
plot: {
|
||||
series: [],
|
||||
seriesColors: ['#83CAFF', '#7E0021', '#579D1C', '#FFD320', '#FF420E', '#004586', '#0084D1', '#C5000B', '#FF950E', '#4B1F6F', '#AECF00', '#314004'],
|
||||
cursor: {
|
||||
zoom: true,
|
||||
showTooltip: true,
|
||||
constrainZoomTo: 'x',
|
||||
showVerticalLine: true
|
||||
},
|
||||
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
|
||||
},
|
||||
xaxis: {
|
||||
autoscale: true,
|
||||
min: myWindowStart,
|
||||
max: myWindowEnd,
|
||||
tickOptions: {
|
||||
formatString: '%d.%m.%y %H:%M',
|
||||
angle: -35
|
||||
seriesDefaults: {
|
||||
lineWidth: 1,
|
||||
showMarker: true,
|
||||
showLine: false,
|
||||
markerOptions: {
|
||||
style: 'dash',
|
||||
shadow: false,
|
||||
size: 2
|
||||
},
|
||||
trendline: {
|
||||
show: true,
|
||||
shadow: false
|
||||
}
|
||||
},
|
||||
pad: 1,
|
||||
renderer: $.jqplot.DateAxisRenderer,
|
||||
rendererOptions: {
|
||||
tickRenderer: $.jqplot.CanvasAxisTickRenderer
|
||||
axes: {
|
||||
yaxis: {
|
||||
autoscale: true,
|
||||
label: 'Leistung (Watt)',
|
||||
tickOptions: {
|
||||
formatString: '%.3f'
|
||||
},
|
||||
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
|
||||
},
|
||||
xaxis: {
|
||||
autoscale: true,
|
||||
tickOptions: {
|
||||
formatString: '%d.%m.%y %H:%M',
|
||||
angle: -35
|
||||
},
|
||||
pad: 1,
|
||||
renderer: $.jqplot.DateAxisRenderer,
|
||||
rendererOptions: {
|
||||
tickRenderer: $.jqplot.CanvasAxisTickRenderer
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// storing entities
|
||||
var entities = new Array;
|
||||
var uuids = new Array;
|
||||
|
||||
// windowEnd parameter for json server
|
||||
var myWindowEnd = new Date().getTime();
|
||||
|
||||
// windowStart parameter for json server (last 24 hours)
|
||||
var myWindowStart = myWindowEnd - 24*60*60*1000;
|
||||
|
||||
// executed on document loaded complete
|
||||
// this is where it all starts...
|
||||
$(document).ready(function() {
|
||||
// parse uuids from cookie
|
||||
uuids = getUUIDs();
|
||||
vz.uuids = getUUIDs();
|
||||
|
||||
// add optional uuid from url
|
||||
if($.getUrlVar('uuid')) {
|
||||
addUUID($.getUrlVar('uuid'));
|
||||
}
|
||||
console.log('cookie uuids', uuids);
|
||||
|
||||
// start auto refresh timer
|
||||
window.setInterval(refreshWindow, 5000);
|
||||
|
@ -110,18 +111,30 @@ $(document).ready(function() {
|
|||
|
||||
// add new entity to list
|
||||
$('#addEntity button').click(function() {
|
||||
uuids.push($(this).prev().val());
|
||||
loadEntities(uuids);
|
||||
addUUID($(this).prev().val());
|
||||
loadEntities();
|
||||
});
|
||||
|
||||
// bind controls
|
||||
$('#move input').click(plot);
|
||||
|
||||
// options
|
||||
$('input[name=trendline]').change(function() {
|
||||
jqOptions.seriesDefaults.trendline.show = $(this).attr('checked');
|
||||
$('input[name=trendline]').attr('checked', vz.options.plot.seriesDefaults.trendline.show).change(function() {
|
||||
vz.options.plot.seriesDefaults.trendline.show = $(this).attr('checked');
|
||||
drawPlot();
|
||||
});
|
||||
|
||||
$('input[name=backendUrl]').val(backendUrl);
|
||||
$('input[name=tuples]').val(tuples);
|
||||
$('input[name=backendUrl]').val(vz.options.backendUrl).change(function() {
|
||||
vz.options.backendUrl = $(this).val();
|
||||
});
|
||||
|
||||
$('input[name=tuples]').val(vz.options.tuples).change(function() {
|
||||
vz.options.tuples = $(this).val();
|
||||
});
|
||||
|
||||
// initialize plot
|
||||
vz.plot = $.jqplot('plot', [[]], vz.options.plot);
|
||||
|
||||
// load all entity information
|
||||
loadEntities(uuids);
|
||||
loadEntities();
|
||||
});
|
||||
|
|
Loading…
Add table
Reference in a new issue