stv0g/vzlogger
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

worked on frontend javascript code (jqPlot drawing is buggy & needs some research)

Browse source
This commit is contained in:
Steffen Vogel 2010-10-02 18:12:55 +02:00
parent fd4d4cfcc0
commit 7fd2504e7c
20 changed files with 242 additions and 7557 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
frontend/images/information.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 778 B

BIN
frontend/images/zoom.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 692 B

BIN
frontend/images/zoom_in.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 725 B

BIN
frontend/images/zoom_out.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 708 B

23
frontend/index.html
View file

@ -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="&laquo;" /></td>
<td>
<input type="image" src="images/control_end_blue.png" onclick="moveWindow('last')" value="&raquo;&raquo;" />
<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="&raquo;" /></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>

211
frontend/javascripts/functions.js
View file

@ -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);
}
};

21
frontend/javascripts/jqplot/MIT-LICENSE.txt
View file

@ -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.

46
frontend/javascripts/jqplot/README.txt
View file

@ -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.

261
frontend/javascripts/jqplot/changes.txt
View file

@ -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/

13
frontend/javascripts/jqplot/copyright.txt
View file

@ -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 .
*/

1415
frontend/javascripts/jqplot/excanvas.js
View file

File diff suppressed because it is too large Load diff

280
frontend/javascripts/jqplot/gpl-2.0.txt
View file

@ -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.

53
frontend/javascripts/jqplot/jqPlotCssStyling.txt
View file

@ -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".

276
frontend/javascripts/jqplot/jqPlotOptions.txt
View file

@ -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
View file

File diff suppressed because one or more lines are too long

4677
frontend/javascripts/jqplot/jquery.jqplot.js
View file

File diff suppressed because it is too large Load diff

239
frontend/javascripts/jqplot/optionsTutorial.txt
View file

@ -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.

119
frontend/javascripts/jqplot/usage.txt
View file

@ -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
View file

@ -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;

143
frontend/javascripts/script.js
View file

@ -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();
});