diff options
324 files changed, 62393 insertions, 2 deletions
diff --git a/liboctopus/python/demos/adc.py b/liboctopus/python/demos/adc.py index 1436c58..338eea9 100644 --- a/liboctopus/python/demos/adc.py +++ b/liboctopus/python/demos/adc.py @@ -1,7 +1,7 @@ + + from octopus import * import time -import pdb -#pdb.set_trace() op=octopus_context() diff --git a/schall/.gitignore b/schall/.gitignore new file mode 100644 index 0000000..46fd9cd --- /dev/null +++ b/schall/.gitignore @@ -0,0 +1,2 @@ +*pyc +data diff --git a/schall/app.py b/schall/app.py new file mode 100644 index 0000000..657d44d --- /dev/null +++ b/schall/app.py @@ -0,0 +1,121 @@ +#!/usr/bin/env python +# coding: utf-8 +# vim: ai ts=4 sts=4 et sw=4 +import time +import math +import json + +from octopus import * +import timeseries + +from gevent.wsgi import WSGIServer +from flask import render_template, Flask, session, redirect, url_for, escape, request + +import gevent +import gevent.event +import gevent.monkey +gevent.monkey.patch_all() + +class SyncDB(timeseries.DBSimpleInt): + def __init__(self,*args): + timeseries.DBSimpleInt.__init__(self, *args) + self.semaphore = gevent.coros.Semaphore() + + def get(self, key): + with self.semaphore: + return timeseries.DBSimpleInt.get(self, key) + + def set(self, key, value): + with self.semaphore: + return timeseries.DBSimpleInt.set(self, key, value) + +class Octopus(gevent.Greenlet): + OCTOPUS_IO_PIN = 33 + ADC_REV_MODE = 2 + ADC_REV_MV = 5000 + ADC_MAX_STEP = 1024 + OV_FACTOR = 4.0 + + def __init__(self,db): + gevent.Greenlet.__init__(self) + self.db = db + self.op = octopus_context() + octopus_init(self.op) + octopus_open(self.op) + octopus_adc_init(self.op, Octopus.OCTOPUS_IO_PIN) + octopus_adc_ref(self.op, Octopus.ADC_REV_MODE) + + def _run(self): + while True: + start = time.time() + value = octopus_adc_get(self.op, Octopus.OCTOPUS_IO_PIN) + value_mv = ((Octopus.ADC_REV_MV/Octopus.ADC_MAX_STEP) * value) / Octopus.OV_FACTOR + value_dba = value_mv / 10.0 # messgerät gibt je dbA 10mV aus + print "{3:s} {4:d} 0x{0:=x}, {1:3.2f}mV, {2:2.2f}dbA".format(value, + round(value_mv,2), + round(value_dba,2), + time.strftime("%H:%M:%S." + "%03d" % ( round( ( start - math.floor(start) )*1000) )), + timeseries.time_ms()) + self.value = value_dba + if value_dba > self.db[timeseries.time_ms()]: + self.db[timeseries.time_ms()] = value_dba + stop = time.time() + + gevent.sleep( abs( 0.5 - ( stop - start ) ) ) + +db = SyncDB(10*timeseries.C.INT_SEC, timeseries.C.INT_DAY, "data", "octopus") + +octopus = Octopus(db) + +app = Flask(__name__) +app.debug = True + +@app.route("/") +def app_index(): + return render_template("index.html") + +@app.route("/now") +def app_now(): + value = db[timeseries.time_ms()] or db[timeseries.time_ms() - db.interval] + return json.dumps({'ts':timeseries.time_ms(), 'value':octopus.value}) + +@app.route("/range/") +@app.route("/range/<int:r_from>") +@app.route("/range/<int:r_from>/<int:r_to>") +@app.route("/range/<int:r_from>/<int:r_to>/<int:count>") +def app_range(r_from=None, r_to=None, count=1000): + if not r_from: + r_to = timeseries.time_ms() + r_from = r_to - (1000 * db.interval) + + if not r_to: + r_to = timeseries.time_ms() + + assert count < 10000 + assert r_to - r_from <= (timeseries.C.INT_DAY * 2), "r_to - r_from = %s < %s"%(r_to-r_from, timeseries.C.INT_DAY * 2) + assert r_to - r_from > db.interval, "r_to - r_from = %s > "%(r_to-r_from, db.interval) + + values = [] + step = int( math.ceil( (r_to - r_from) / float(count) ) ) + for ts in range(r_from, r_to, step): + value = 0 + i = ts + while i < ts + step: + value = max(db[i], value) + i += db.interval + + if value == 0: + value = None + values.append(value) + + values.reverse() + return json.dumps(values) + +if __name__ == "__main__": + octopus.start() + + http_server = WSGIServer(('', 8000), app) + http_server.start() + + http_server._stopped_event.wait() + octopus.wait() diff --git a/schall/doc/lm-358.pdf b/schall/doc/lm-358.pdf Binary files differnew file mode 100644 index 0000000..bb0d4b8 --- /dev/null +++ b/schall/doc/lm-358.pdf diff --git a/schall/lib/timeseries/runtests.sh b/schall/lib/timeseries/runtests.sh new file mode 100755 index 0000000..5d8f2e6 --- /dev/null +++ b/schall/lib/timeseries/runtests.sh @@ -0,0 +1,2 @@ +#!/bin/sh +python -munittest discover -s tests $* diff --git a/schall/lib/timeseries/tests/__init__.py b/schall/lib/timeseries/tests/__init__.py new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/schall/lib/timeseries/tests/__init__.py diff --git a/schall/lib/timeseries/tests/testDBSimple.py b/schall/lib/timeseries/tests/testDBSimple.py new file mode 100644 index 0000000..b1f7630 --- /dev/null +++ b/schall/lib/timeseries/tests/testDBSimple.py @@ -0,0 +1,50 @@ +import os +import random +import tempfile +import logging +import unittest + +import timeseries + + +class TestDB(unittest.TestCase): + def setUp(self): + logging.basicConfig(level=logging.INFO) + self.tempdir = tempfile.mkdtemp() + self.db = timeseries.DBSimpleInt(timeseries.C.INT_MIN, + timeseries.C.INT_DAY, + self.tempdir, "t-dbsimple") + + def tearDown(self): + self.db.close() + for path in os.listdir(self.tempdir): + os.remove(os.path.join(self.tempdir, path)) + os.rmdir(self.tempdir) + +class TestEmptyDB(TestDB): + def testEmptyDB(self): + start=0 + end=timeseries.C.INT_DAY + + self.assertEqual(self.db[start], 0) + self.assertEqual(len(os.listdir(self.tempdir)), 1) + + self.assertEqual(self.db[end-1], 0) + self.assertEqual(len(os.listdir(self.tempdir)), 1) + + self.assertEqual(self.db[end], 0) + self.assertEqual(len(os.listdir(self.tempdir)), 2) + +class TestRandomValues(TestDB): + def testRandomValues(self): + values={} + for i in range(0,100): + key = random.randint(0, timeseries.time_ms()) + value = random.randint(-2147483648, 2147483647) + values[key] = value + self.db[key] = value + + keys = values.keys() + random.shuffle(keys) + for key in keys: + self.assertEqual( self.db[key], values[key] ) diff --git a/schall/lib/timeseries/timeseries.py b/schall/lib/timeseries/timeseries.py new file mode 100644 index 0000000..fbf0f34 --- /dev/null +++ b/schall/lib/timeseries/timeseries.py @@ -0,0 +1,264 @@ +#!/usr/bin/env python +from collections import namedtuple +import struct +import time +import glob +import os + +import logging + +class Constants: + DB_MAX_NAME_LENGTH = 10 + DB_WRITEBUF_LENGTH = 10 + DBDAY_FORMAT_DAY = "%d%m%Y" + DB_OPEN_FILES = 5 + + INT_MILLI = 1 + INT_SEC = 1000 + INT_MIN = 60 * INT_SEC + INT_HOUR = 60 * INT_MIN + INT_DAY = 24 * INT_HOUR + INT_WEEK = 7 * INT_DAY + INT_MONTH = 31 * INT_DAY + INT_YEAR = 365 * INT_DAY + +C = Constants + +def time_ms(): + return int(time.time() * 1000) + +class DB(object): + def __init__(self, interval, fileinterval, directory, name): + assert len(name) <= Constants.DB_MAX_NAME_LENGTH, \ + "name must be smaller than {0} (is {1})".format(Constants.DB_MAX_NAME_LENGTH, len(name)) + self.interval = interval + self.fileinterval = fileinterval + self.directory = directory + self.name = name + self.isize = self.item_size() # item_size + self._files = {} + self._write_buf = {} + self.last_access = [] + for path in glob.glob(self.directory + os.path.sep + name + "*"): + dbday = DBSegment.fopen(path, self) + self._files[dbday.filekey] = dbday + + def __getitem__(self, key): + return self.get(key) + + def get(self, key): + raise NotImplementedError() + + def _get(self, key): + if not isinstance(key, int) and not isinstance(key, long): + raise TypeError("DB keys must be millisecond timestamps (int)") + + logging.debug("get -> key %s fileinterval %s interval %s", key, self.fileinterval, self.interval) + filekey = self._calc_segment_key(key) + key = self._calc_key(key) + logging.debug("get => filekey %s key %s", filekey, key ) + + if (filekey, key) in self._write_buf.keys(): + logging.debug("Write-Cache hit %s", key) + return self._write_buf[(filekey, key)] + + db_segment = self.get_segment(filekey) + return db_segment[key] + + def __setitem__(self, key, value): + return self.set(key, value) + + def set(self, key, value): + raise NotImplementedError() + + def _set(self, key, value): + if not isinstance(key, int) and not isinstance(key, long): + raise TypeError("DB keys must be millisecond timestamps (int)") + + logging.debug("get -> key %s fileinterval %s interval %s", key, self.fileinterval, self.interval) + filekey = self._calc_segment_key(key) + key = self._calc_key(key) + logging.debug("get => filekey %s key %s", filekey, key ) + + self._write_buf[(filekey, key)] = value + if len(self._write_buf) > Constants.DB_WRITEBUF_LENGTH: + self._flush_buf() + + return value + + def get_segment(self, filekey): + if filekey in self._files.keys(): + return self._files[filekey] + else: + header = DBSegment.header( filekey=filekey, + isize=self.isize, interval=self.interval, + fileinterval=self.fileinterval, dbname=self.name) + path = self.directory + os.path.sep + self.name + str(filekey) + db_segment = DBSegment(self, path, header) + logging.info("New File %s", db_segment.path) + self._files[filekey] = db_segment + return db_segment + + + + def _calc_key(self, key): + return int( (key % self.fileinterval) / self.interval) + + def _calc_segment_key(self, key): + return int( key / self.fileinterval ) + + def _flush_buf(self): + logging.debug("flush") + keys = self._write_buf.keys() + keys.sort() + for (filekey,key) in keys: + db_segment = self.get_segment(filekey) + db_segment[key] = self._write_buf[(filekey, key)] + self._write_buf.clear() + + def close(self): + self._flush_buf() + + def item_size(self): + """""" + raise NotImplementedError() + +class InvalidSegmentError(Exception): + def __init__(self, header, *args): + Exception.__init__(self, *args) + self.header = header + +class _LazyEval(object): + def __init__(self, func, *args, **kwargs): + self.func, self.args, self.kwargs = func, args, kwargs + def __str__(self): + return self.func(*self.args, **self.kwargs) + +def _to_hexstring(input_string): + def _do(string): + return " ".join(map(lambda c:"%02x"%ord(c), string)).upper() + return _LazyEval(_do, input_string) + +class DBSegment(object): + header = namedtuple('Header', 'filekey isize interval fileinterval dbname') + header_format = "iiii%dp"%Constants.DB_MAX_NAME_LENGTH + header_size = struct.calcsize( "iiii%dp"%Constants.DB_MAX_NAME_LENGTH ) + + @staticmethod + def fopen(path, db): + filekey = int( os.path.basename(path)[len(db.name):] ) + with file(path, "rb") as fh: + header = DBSegment.header._make( struct.unpack( DBSegment.header_format, fh.read( DBSegment.header_size ) ) ) + if not (header.filekey == filekey + and header.interval == db.interval + and header.fileinterval == db.fileinterval + and header.dbname == db.name): + raise InvalidSegmentError(header) + f = DBSegment(db, path, header) + return f + + def __init__(self, db, path, header): + self.db = db + self.path = path + self.header = header + + self.filekey = header.filekey + if not os.path.exists(self.path): + logging.info("Write header in new file %s", self.path) + self.fh = file(self.path, "wb") + self.fh.write( struct.pack( DBSegment.header_format, *list(header) ) ) + end = ( DBSegment.header_size + + ( self.db.fileinterval / self.db.interval ) * self.db.isize) + self.fh.seek( end ) + self.fh.write( "\0" ) + self.fh.close() + self.fh = None + self.open() + + def __setitem__(self, key, data): + logging.debug("Set %s = %s", key, _to_hexstring(data)) + self._seek(key) + self.fh.write( data[:self.db.isize] ) + self.lastpos = self.fh.tell() + + def __getitem__(self, key): + self._seek(key) + data = self.fh.read( self.db.isize ) + self.lastpos = self.fh.tell() + logging.debug("Get %s => %s", key, _to_hexstring(data)) + return data + + def _seek(self, key): + offset = DBSegment.header_size + \ + key * self.db.isize + + if self.lastpos == offset: + logging.debug("continue at %s", self.lastpos) + else: + logging.debug("seek to %s in %s instance %s (lastpos = %s)", offset, self.path, id(self), self.lastpos) + if not self.fh: + self.open() + self.fh.seek( offset ) + + def open(self): + if not self.fh: + logging.debug("Open %s",self.path) + self.fh = file(self.path, "r+b") + self.lastpos = self.fh.tell() + + def close(self): + logging.info("Close %s instance %s", self.path, id(self)) + if self.fh: + self.fh.close() + self.fh = None + +class DBInt(DB): + payload = namedtuple("payload", "x y z") + payload_format = "iii" + def get(self, key): + return DBInt.payload._make( + struct.unpack( + DBInt.payload_format, self._get(key) ) ) + + def set(self, key, value): + return self._set(key, + struct.pack(DBInt.payload_format, *list(value))) + + def item_size(self): + return struct.calcsize( DBInt.payload_format ) + +class DBSimpleInt(DB): + def get(self, key): + return struct.unpack("i", self._get(key))[0] + + def set(self, key, value): + return self._set(key, + struct.pack("i", value)) + + def item_size(self): + return struct.calcsize( "i" ) + +import random +if __name__ == "__main__": + #logging.basicConfig(level=logging.DEBUG) + logging.basicConfig(level=logging.INFO) + #logging.basicConfig(level=logging.ERROR) + + # Alle 5 sek. + start = time_ms() + stop = time_ms() + Constants.INT_DAY*2 + + db = DBSimple(1000 * Constants.INT_MILLI, Constants.INT_DAY, ".", "testdb") + rand = 123456 + for ts in range(start, stop, 1000*Constants.INT_MILLI): + db[ts] = -ts % rand + assert db[ts] == -ts%rand, "%s != %s"%(db[ts], ts) + + r = range(start, stop, 1000*Constants.INT_MILLI) + r.reverse() + for ts in r: + assert db[ts] == -ts%rand, "%s != %s"%(db[ts], -ts%rand) + + + db.close() + diff --git a/schall/static/RGraph/css/ModalDialog.css b/schall/static/RGraph/css/ModalDialog.css new file mode 100644 index 0000000..c9c339c --- /dev/null +++ b/schall/static/RGraph/css/ModalDialog.css @@ -0,0 +1,90 @@ + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + + + /** + * Modal Dialog + */ + .modalBg { + position: absolute; + top: 0px; + left: 0px; + filter: Alpha(Opacity=50); + -moz-opacity: 0.5; + background-color: #ddd; + visibility: hidden; + width: expression(document.body.clientWidth); + height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight); + z-index: 100; + } + + .modalDialog { + position: absolute; + top: 0px; + left: 0px; + visibility: hidden; + z-index: 101; + background-color: white; + top: expression(document.body.clientHeight / 2 - this.offsetHeight / 2); + left: expression(document.body.clientWidth / 2 - this.offsetWidth / 2); + border: 1px solid #777; + border-top: 0; + padding: 20px; + border-radius: 5px; + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + } + + .modalDialog .modalDialogHeader { + margin:0; + padding: 0px; + color: #333; + font-weight: bold; + background-color: #ccc; + border: 1px solid #989898; + position: absolute; + top: 0px; + left: -1px; + height: 7px; + border-radius: 5px; + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + -moz-border-radius-bottomleft: 0; + -moz-border-radius-bottomright: 0; + -webkit-border-bottom-left-radius: 0; + -webkit-border-bottom-right-radius: 0; + } + + .modalShadow { + position: absolute; + background-color: black; + top: 0px; + left: 0px; + z-index: 99; + top: expression(document.body.clientHeight / 2 - this.offsetHeight / 2); + left: expression(document.body.clientWidth / 2 - this.offsetWidth / 2); + border-radius: 5px; + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + opacity: 0.5; + } + + /** + * This is not part of the core Modal Dialog styles, instead it's just so that the dialog looks + * respectable. + */ + h4 { + font-family: Verdana, Arial; + padding-top: 10px; + }
\ No newline at end of file diff --git a/schall/static/RGraph/css/common.css b/schall/static/RGraph/css/common.css new file mode 100644 index 0000000..5a2cdec --- /dev/null +++ b/schall/static/RGraph/css/common.css @@ -0,0 +1,299 @@ +@font-face { + font-family: Delicious; + src: url('/Delicious-Roman.otf') +} + +/** +* Various +*/ +body { + margin: 0px; +} + +a { + text-decoration: none; +} + +code { + background-color: #dedede; + border: 1px dashed #aaaaaa; + padding: 3px; + display: block; + font-family: Monospace; +} + + +/** +* Datagrid stuff +*/ +table.datagrid { + border-collapse: collapse; + margin-left: 30px; +} + +table.datagrid th { + background-color: #ccc; + border: 1px solid #aaa; + padding: 2px; +} + +table.datagrid tr { + background-color: #ddd; +} + +table.datagrid tr.oddrow { + background-color: #eee; +} + +table.datagrid td { + border: 1px solid #aaa; + padding: 3px; +} + + +/** +* Master div +*/ +.master { + font-family: Georgia; +} + + +/** +* Header section +*/ +.header { + margin-right: 10px; + letter-spacing: 2px; + background-image: url(/images/hdrbg.jpg); + margin-left: 10px; +} + +.header h1 { + margin-top: 0px; +} + +.tagline { + font-size: 8pt; + position: relative; + top: -15px; + left: 15px; + letter-spacing: 0px; +} + + +/** +* Top nav +*/ +.topnav { + color: white; + background-color: #314657; /* Old */ + background-color: #2D4B33; + padding: 1px; + padding-left: 10px; +} + +.topnav a { + color: white; +} + + +/** +* Left nav +*/ +.leftnav, +.searchbox { + width: 180px; + color: black; + background-color: #FF5A18; + margin-left: 5px; + margin-top: 10px; + padding: 10px; + padding-top: 0; + padding-bottom: 0; + padding: expression('10px'); + border: 1px solid #B33E11; +} + +.leftnav { + + box-shadow: 0 0 15px #aaa; + -moz-box-shadow: 0 0 15px #aaa; + -webkit-box-shadow: 0 0 15px #aaa; + + border-radius: 5px; + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + width: 180px; + float: left; + hmargin: 5px; +} + +.leftnav h4 { + border-bottom: 1px solid black; +} +.leftnav a { + color: black; +} + +.leftnav ul { + margin-left: -20px; + margin-left: expression('20px'); + list-style-type: square; +} + + +/** +* Main body section +*/ +.mainbody { + margin-left: 220px; +} + +.borderedTable table { + border-collapse: collapse; +} + +.borderedTable th { + background-color: #dddddd; + border: 1px solid #aaaaaa; + font-size: 70%; + padding-left: 3px; + padding-right: 3px; +} + +.borderedTable td { + vertical-align: top; + font-size: 70%; + border: 1px solid #dddddd; +} + +.newsitem { + margin-bottom: 25px; +} + +.newsitem h2, +.newsitem h1 { + display: inline; +} + +.newsitem .date { + font-size: 70%; +} + +p.firstLetter:first-letter { + font-size: 200%; + font-style: italic; + font-weight: bold; + float: left; + padding-right: 3px; +} + +.newsitem p.update { + background-color: #efefef; + border: 1px dashed black; + padding: 5px; +} + + +/** +* Comments +*/ +.comment { + padding: 5px; + margin-bottom: 20px; + font-size: 80%; + background-color: #efefef; + border: 1px dashed #cccccc; +} + +.comment .body { + margin-top: 5px; + padding-left: 7px; +} + +.comment .quoteLink { + text-align: right; + font-size: 90%; +} + + +/** +* Errors +*/ +.error { + color: red; + font-style: italic; +} + + +/** +* Copyright text +*/ +.copyright { + text-align: right; + font-size: 75%; +} + + +/** +* Admin page +*/ +.adminPage table { + font-family: Verdana; + font-size: 10pt; +} + +.adminPage th { + background-color: #dddddd; +} + + +/** +* Tools page +*/ +#toolsPage th, +#toolsPage td { +} + +#toolsPage th { + font-weight: bold; + text-align: right; + white-space: nowrap; + vertical-align: top; + background-color: #ffffcc; +} + +#toolsPage textarea { + height: 200px; + width: 800px; + filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#ffffff, endColorstr=#ffffcc); +} + +#shortcuts th { + +} + +#shortcuts th { + text-align: left; + background-color: #ededed; + padding: 2px; +} + +/** +* Download header/footer +*/ +div#download pre, +div#download pre a { + +} + +/** +* Code +*/ +div.boxout, +pre.code { + border: 2px dashed gray; + padding: 3px; + background-color: #eee; +}
\ No newline at end of file diff --git a/schall/static/RGraph/css/index.html b/schall/static/RGraph/css/index.html new file mode 100644 index 0000000..2b4a17c --- /dev/null +++ b/schall/static/RGraph/css/index.html @@ -0,0 +1,2 @@ +<?php + header('Location: /');
\ No newline at end of file diff --git a/schall/static/RGraph/css/website.css b/schall/static/RGraph/css/website.css new file mode 100644 index 0000000..4b35303 --- /dev/null +++ b/schall/static/RGraph/css/website.css @@ -0,0 +1,263 @@ + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + + +body { + padding-top: 10px; + font-family: Arial, Sans-Serif; +} + +h1, +h2 { +} + +h1 span, +h2 span { + color: #65AEFF; + font-style: italic; +} + +a#read-more { +} + +pre#code, +code { + display: block; + border: 1px solid #aaa; + padding: 5px; + background-color: #ddd; +} + +#breadcrumb, +#logo { + border: 2px black solid; + background-color: #eee; + padding: 3px; + top: 0; + right: 0; + position: absolute; + margin: 2px; + opacity: 0.8; + border-radius: 5px; +} +#breadcrumb a, +#logo a { + text-decoration: none; +} + +th { + text-align: left; + border: 1px solid gray; + background-color: #ddd; + padding: 3px; + vertical-align: top; +} + +td { + vertical-align: top; +} + +ol li { + margin-top: 20px; +} + +ol#implementation li code { + margin-top: 5px; +} + +td.description { + background-color: #eee; + padding: 3px; + border: 1px solid #ddd; +} + +td.chart { + text-align: center; +} + +.example_boxout { + background-color: #eee; + padding: 3px; + border: 1px solid #aaa; +} + +.code { + padding: 5px; + background-color: #eee; + border: 2px dashed gray +} + +/** +* This is semi-transparent box in the top left corner +*/ +div#devtag { + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + border-radius: 5px; + -webkit-box-shadow: #999 3px 3px 3px; + -moz-box-shadow: #999 3px 3px 3px; + box-shadow: #999 3px 3px 3px; + filter: progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=135); + position: fixed; + top: 2px; + right: 2px; + width: 145px; + border: 2px solid black; + text-align: center; + font-weight: bold; + font-family: Arial; + background-color: #fdd; + z-index: 1001; + opacity: 0.8; +} + +div#devtag a { + font-size: 10px; + text-decoration: none; + color: blue; + opacity: 1; +} + +/** +* This overrides something defined earlier +*/ +ol#colors li { + margin: 0; +} + +/** +* styles lists +*/ +div.list-item { + width: 220px; + display: inline-block; +} + +div.list-item.label { + width: 170px; +} + +legend { + background-color: #efefef; + border: 1px solid #75736e; +} + +body#licensing span { + font-size: 120%; +} + +/** +* The yellow warning box on the front page +*/ +div.warning { + border: 1px solid black; + text-align: center; + background-color: #ffa; + padding: 5px; + margin-top: 5px; + border-radius: 15px; + -moz-border-radius: 15px; + -webkit-border-radius: 15px; + -webkit-box-shadow: #aaa 1px 1px 15px; + -moz-box-shadow: #aaa 1px 1px 15px; + box-shadow: #aaa 1px 1px 15px; + filter: progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=135); + z-index: 98; + opacity: 0.9; +} + +div.canvasfallback { + border: 2px dashed red; + background-color: #fee; + width: 475px; + height: 150px; + text-align: center; + padding-top: 50px; +} + +/** +* The title "bar" +*/ +div#title { +} + +div#title div#image { + float: left; + margin-right: 15px; +} + +div#title div#text { + padding-top: 5px; + margin-left: 70px; +} + + +div.warning p { + text-align: center; + margin-top: 5px; + margin-bottom: 5px; + font-weight: bold; +} + + +div.description { + border: 1px dashed gray; + background-color: #eee; + font-size: 75%; + padding: 3px; +} + +div#social { + display: inline; + display: inline-block; +} + +.upgrade_notice { + display: inline; + display: inline-block; + text-align: center; + background-color: yellow; + border: 1px black solid; + border-radius: 10px; + -webkit-border-radius: 10px; + -moz-border-radius: 10px; + padding: 3px; + padding-left: 5px; + padding-right: 5px; +} + +#google_plusone { + position: fixed; + top: 10px; + left: 145px; + z-index: 1000; +} + +div#testimonial { + font-size: 80%; + background-color: rgba(248,248,248, 0.5); + //background-color: #efe; + padding: 6px; + border: 1px solid #ddd; + border-radius: 15px; + //background: -webkit-gradient(linear, left top, left bottom, from(#efe), to(white)); + //background: -moz-linear-gradient(top, #efe, white); + //filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeffee', endColorstr='#ffffff'); + margin-top: 10px; +} + +div#social_icons img { + border: none; +}
\ No newline at end of file diff --git a/schall/static/RGraph/docs/.BC.txt b/schall/static/RGraph/docs/.BC.txt new file mode 100644 index 0000000..84ed3c4 --- /dev/null +++ b/schall/static/RGraph/docs/.BC.txt @@ -0,0 +1,237 @@ + + Backwards compatibility breaks and advisories + =============================================== + + o [22-10-2011] IMPORTANT: The default positioning for titles has changed - you may need to adjust the positioning of your titles + o [15-10-2011] The Pie chart chart.segments array is being removed (probably November or December) - use .angles array instead. + o [15-10-2011] The Pie chart start axis has been changed to the "north" axis (instead of the "east" axis. Please test your charts! + o [01-10-2011] Note that due FF7 had issue with the gradient used in the Odometer border so you may find that it has changed very + slightly + + +---------------------------------------------------------------------------------------+ + o [24-09-2011] | Stable release | + +---------------------------------------------------------------------------------------+ + + o [10-10-2011] The Bar, Line and Scatter charts have had the background grid autofit turned on by default. Also the number + of horizontal grid lines has been changed to 5. + o [03-10-2011] A change has been made to the Pie chart when using tooltips and the full canvas zoom - please test your charts + if upgrading and you use tooltips in conjunction with the zoom. + + +---------------------------------------------------------------------------------------+ + o [27-08-2011] | Stable release | + +---------------------------------------------------------------------------------------+ + + o [31-08-2011] Donut/Pie chart title positioning may need attention - the default for chart.title.vpos is now 0.5 + (the vertical centre of the gutter) + o [31-08-2011] Filled line charts have been changed - please see the changelog file for more + information (20-08-2011). You may need to reverse your colors if you use multiple lines. + + +---------------------------------------------------------------------------------------+ + o [29-07-2011] | Stable release | + +---------------------------------------------------------------------------------------+ + + o [30-07-2011] When using Line chart specific labels in conjunction with chart.ymin the label positioning + has changed - the labels now start at the X axis vertical position. + o [20-07-2011] The chart.segments option is no longer mmaintained - use obj.angles instead + o [20-07-2011] When adding a Line chart to a Bar chart some of the Line chart properties are no longer set for you - + you will need to set these yourself if you want them. They are (along with what they were set to): + + lineObj.Set('chart.noaxes', true); + lineObj.Set('chart.background.barcolor1', 'rgba(0,0,0,0)'); + lineObj.Set('chart.background.barcolor2', 'rgba(0,0,0,0)'); + lineObj.Set('chart.background.grid', false); + lineObj.Set('chart.ylabels', false); + + o [17-07-2011] The default CSS has been altered for tooltips. This affects all chart types. The changes are: + o There is now no CSS border to the tooltip + o The toltip is now transparent a small amount (opacity=0.9) + o The tooltip shadow X & Y offsets are now zero + + If you wish to revert these changes you will need to use the tooltip CSS class: + + <style> + .RGraph_tooltip { + // ... + } + </style> + + +---------------------------------------------------------------------------------------+ + o [12-07-2011] | Stable release | + +---------------------------------------------------------------------------------------+ + + o [02-07-2011] The Tradar chart has been renamed to the Radar chart. This will make more identifiable. You WILL + need to update you code to the new name! + o [25-06-2011] The HBar default colors have changed. + o [18-06-2011] The Rose chart has undergone significant changes, now supporting a "stacked" Rose chart as well as + a "non-equi-angular" variant. It also now supports chart.colors.sequential property and + the default chart.strokestyle value has been changed to rgba(0,0,0,0.5). You may need to set the + chart.colors.sequential (to true) to maintain BC. + + +---------------------------------------------------------------------------------------+ + o [04-06-2011] | Stable release | + +---------------------------------------------------------------------------------------+ + + o [04-06-2011] MAJOR BREAK: The chart.gutter property has been split into four properties: + o chart.gutter.left + o chart.gutter.right + o chart.gutter.top + o chart.gutter.bottom + This affects all graph types (except the LED chart) so rigorous testing will be necessary if + you choose to upgrade. + o [14-05-2011] If you're using chart.width/chart.height, please switch to the individual gutter settings. These + provide finer grained and more intuitive control over the gutters and certain things are done for you + automatically, like for example adjusting coordinates for tooltips and resizing. The chart.width and + chart.height will cease to function starting immediately. + o [02-04-2011] The default color for background bars on the Scatter has changed from white to transparent. This was + necessary to facilitate background images + + +---------------------------------------------------------------------------------------+ + o [26-03-2011] | Stable release | + +---------------------------------------------------------------------------------------+ + + o [12-03-2011] The RGraph.Clear() API function now clears to transparent, not white. If you wanted it to clear to white + you could call this function from the new onclear event: + + function myClear(obj) + { + obj.context.beginPath(); + obj.context.fillStyle = 'white'; + obj.context.fillRect(-10,-10,obj.canvas.width + 20, obj.canvas.height + 20); + obj.context.fill(); + } + + DO NOT simply use the RGraph.Clear() function in the onclear event listener function, as you will create an + infinite loop. + + o [06-03-2011] The RGraph.getSegment() method has been moved to be a part of both the Pie and Rose objects. This means + that if you use it you will have to change your code slightly. This change was necessary to facilitate + Pie chart exploded segments. This change will also help prevent bugs in this function in the future. + + +---------------------------------------------------------------------------------------+ + o [28-01-2011] | Stable release | + +---------------------------------------------------------------------------------------+ + + o [22-01-2011] The RGraph.Clear() function now uses a square 2,000 pixels wide & high + o [15-01-2011] The Gantt adjusting array (kept in the RGraph registry) now uses associative/textual keys instead of numeric ones + o [08-01-2011] The default number of Line chart X tickmarks has been altered ever-so-slightly: Now if you don't have chart.hmargin + set then the X tickmarks will line up with the points on the chart. See the first example on the line chart test + page for an example: http://dev.rgraph.net/tests/_line.html + o [08-01-2011] The custom RGraph event onannotatestart has been renamed to onannotatebegin. The previous name will still work, + but will eventually be removed. + + +---------------------------------------------------------------------------------------+ + o [24-12-2010] | Stable release | + +---------------------------------------------------------------------------------------+ + + o [04-12-2010] chart.key.vpos is now silently converted to chart.key.position.y (note that these two properies behave slightly + differently - chart.key.position.y is an absolute coordinate). ALSO; the key has been rewritten, so check that + your graphs are working as you expect + o [04-12-2010] The HBar labels (from chart.labels.above) now have an extra property (chart.labels.above.decimals) which controls + how many decimals are shown. This defaults to 0, and as a result you may need to set this if you're expecting decimals. + + +---------------------------------------------------------------------------------------+ + o [27-11-2010] | Stable release | + +---------------------------------------------------------------------------------------+ + + o [20-11-2010] For the line/bar/scatter, when the X axis is at the bottom and there is a background bar with a + negative start (or it results in a negative end value), you now get a warning. + o [13-11-2010] All line chart labels are now shown, regardless of how many points on the line there are. + o [06-11-2010] The HBar and Scatter have had their scaled handling changed slightly - now if you specify a maximum Y value, + that is what is used. + o [06-11-2010] The API function RGraph.getSCale(max, obj) now takes two arguments - the maximum value and the graph object. + + +---------------------------------------------------------------------------------------+ + o [30-10-2010] | Stable release | + +---------------------------------------------------------------------------------------+ + + o [30-10-2010] The Scatter chart can now only have 1/3/5 labels + o [30-10-2010] The Line chart can now only have 1/3/5 labels + o [23-10-2010] The Bar chart can now only have 1/3/5/10 labels + o [23-10-2010] The default for chart.scale.decimals has changed, as such you may need to specify this: + myScatter.Set('chart.scale.decimals', 0); + o [09-10-2010] Scatter chart ticksize has changed behaviour slightly, you therefore may need to alter it slightly. + + +---------------------------------------------------------------------------------------+ + o [25-09-2010] | Stable release | + +---------------------------------------------------------------------------------------+ + + o [18-09-2010] For IE9 compatibility purposes, the IE8 DirectX shadow has been removed from the ModalDialog. This only affects + MSIE8. The background is still semi-opaque. + o [18-09-2010] The common function RGraph.isIE9() has changed to RGraph.isIE9up(). The old one will continue to work, but + not indefinitely. + o [11-09-2010] The Odometer properties chart.units.pre and chart.units.post have now changed to chart.value.units.pre + and chart.value.units.post. The properties chart.units.post and chart.units.pre are now used for the main + labels. + o [04-09-2010] HBar and Pie charts have been moved to DOM2 event registration for tooltips + o [04-09-2010] The RGraph.number_format() function has had its argument list changed + o [04-09-2010] Now that RGraph is moving to DOM2 event handlers, tooltips will be incompatible with IE8 + + +---------------------------------------------------------------------------------------+ + o [28-08-2010] | Stable release | + +---------------------------------------------------------------------------------------+ + + o [28-08-2010] Removed option to have the labels on the outside of a Meter. Now they're always on the inside of the Meter + and there's always 11 of them (including zero) + o [14-08-2010] Changed the HBar property chart.strokecolor to chart.strokestyle + o [07-08-2010] The Odometer property chart.needle.thickness has been changed to chart.needle.width. Work has been done on the + needle head. + o [07-08-2010] Progress bar has now been split into two different graph types: + o HProgress + o VProgress + o [07-08-2010] Progress bar property chart.color is now chart.colors, and should be an array + o [07-08-2010] Changed default Bipolar colors to just one - green + + +---------------------------------------------------------------------------------------+ + o [31-07-2010] | Stable release | + +---------------------------------------------------------------------------------------+ + + o [17-07-2010] Stepped line charts and their tickmarks have been marginally altered. No final tickmark is now shown (it looks + odd being isolated) + o [17-07-2010] Changed the Odo chart.needle.style to chart.needle.color + o [17-07-2010] The Odo properties chart.start, chart.end and chart.value have all been changed to internal properties: + obj.start, obj.end and obj.value + o [09-07-2010] With the Odometer the old property chart.needle.style has been renamed to be chart.needle.color + o [09-07-2010] The Progress bar has had it's properties chart.max and chart.value changed to class properties, this means + that if you want to make use of these, you will now need to use myProgress.value and myProgress.max. + myProgress being the name of your graph object. + + +---------------------------------------------------------------------------------------+ + o [26-06-2010] | Stable release | + +---------------------------------------------------------------------------------------+ + + o [08-05-2010] The Rose charts "chart.labels" property is now different to the "chart.key" property + o [01-05-2010] The Donut chart is now a variant of the Pie chart (chart.variant = donut) + o [24-04-2010] The radar chart has been renamed to Rose. The library is now called RGraph.rose.js and the constructor has + been renamed. It has also been prettied up marginally and labels have been added. + o [17-04-2010] All charts have had their property "chart.tooltip.effect" renamed to "chart.tooltips.effect". + The Scatter chart has also had its property "chart.tooltip.hotspot" renamed to "chart.tooltips.hotspot" + o [17-04-2010] Default chart.tooltips bar chart property has changed from an empty array to null. + o [17-04-2010] The RGraph.common.js library has now been split into 5 separate files because it had + become far too large. You can read the new implementation details here: + http://www.rgraph.net/docs/index.html#implementation + o [10-04-2010] The "coords" arrays (for each object) have been unified. Now you no longer need to take + into account the margins. What you get in the coords arrays are as they are used on the + graph. + + +---------------------------------------------------------------------------------------+ + o [27-03-2010] | Initial stable release | + +---------------------------------------------------------------------------------------+<!-- Social networking buttons --> + <!-- FOO --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 140px; height: 20px"> + <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> + <a href="http://www.twitter.com/_RGraph" target="_blank" title="Follow _RGraph on Twitter"><img src="../images/twitter.png" alt="Follow _RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> +
\ No newline at end of file diff --git a/schall/static/RGraph/docs/.CHANGELOG.txt b/schall/static/RGraph/docs/.CHANGELOG.txt new file mode 100644 index 0000000..3d12334 --- /dev/null +++ b/schall/static/RGraph/docs/.CHANGELOG.txt @@ -0,0 +1,1847 @@ + 20th October 2011 + ================= + o [BAR] Added chart.ymin + o [LINE] Multiple filled Line charts now work with the Trace effect + o [METER] Tweaked the Grow animation. Test your charts before upgrading (if you use the Grow animation) + o [MISC] IMPORTANT: Default positioning for titles has changed - see .BC.txt file + o [PIE] Added chart.key.interactive + + 15th October 2011 + ================= + o [GAUGE} Added Grow effect. Like the Odo (now) it animates from the last reading, not zero all the time. + o [LINE] Added FoldToCenter effect + o [MISC] Converted crosshairs to use DOM2 event handling + o [MISC] Added: chart.crosshairs.vlines + chart.crosshairs.hlines + o [ODO] Changed Grow animation function so that it animates from the last reading - not constantly from zero + o [PIE] Added .Explode() method to pie chart for programmatically exploding segments + o [RADAR] Added Grow effect + o [SCATTER] Added chart.ylabels.inside + o [WATERFALL] Added Grow effect + + 11th October 2011 + ================= + o [NOTE] The Pie chart chart.segments array is being removed (probably November or December) - use obj.angles instead. + o [PIE] IMPORTANT: The Pie chart has been altered so that the start point is now the "north"axis. Please check your + charts - particularly if you use the Pie chart internals. If you want to stick with the older version of the + Pie chart - it's in the libraries/ folder named RGraph.pie.js.old and will be there for a few releases. + You're highly recommended to use the newer version though as the old version will bew only kept for a few + months. + o [PIE] Added RGraph.Effects.Pie.Implode animation - combining it with the RoundRobin animation looks good + o [ROSE] The Rose chart Grow animation also now gradually increases the angle of the segments as well as their size. See + this page for an example: http://www.rgraph.net/examples/index.html Regular and stacked Rose charts are supported + + 8th October 2011 + ================ + o [HBAR] Added easing to the HBar grow effect - the effect is very subtle + o [PIE] Added RoundRobin effect + o [MISC] Added chart.title.font chart.title.xaxis.font chart.title.yaxis.font + chart.title.size chart.title.xaxis.size chart.title.yaxis.size + chart.title.bold chart.title.xaxis.bold chart.title.yaxis.bold + o [SCATTER] Added Scatter chart boxplot tooltips + + 4th October 2011 + ================ + o [LINE] Added Trace animation + o [WEBSITE] Added more testimonials + + 1st October 2011 + ================ + o [FUNNEL] Added chart.taper for Funnels that don't taper to a point + o [FUNNEL] Added chart.labels.sticks that shows indicator lines for the labels + o [GANTT] Added the ability to have multiple "events" per line. For an example see here: + http://www.rgraph.net/examples/gantt.html + Note that if you start adding multiple events then the tooltips order may need attention + o [GAUGE] Added Gauge chart - another meter variant + o [LINE] Added chart.tooltips.hotspot.xonly. This makes the tooltips trigger by the X mouse position only + o [MISC] Not very noticable, but the snap tooltip effect now uses jQuery if it's available. + o [ODO] Note that Firefox 7 had issue with the gradient used in the Odometer border - so you may find that it has changed very + very slightly + o [PIE] Fixed a pie chart bug which presented itself when clicking canvas tags that had nothing to do with RGraph + + 24th September 2011 + =================== + o [WEBSITE] Social icons updated + + 22nd September 2011 (STABLE) + =================== + o [DOCS] Documented how to retrieve just the PNG image from the canvas + o [LICENSE] Added PayPal donation button. If you're covered by the free license but still want to contribute to + help keep RGraph going you now can. All donations are gratefully received. + o [METER] Meter chart title size is now always two points larger than chart.text.size + o [METER] Fixed little bug with Meter chart grow animation not respecting minimum value + o [MISC] STABLE release + o [SCATTER DOCS] Documented chart.line.linewidth + o [WEBSITE] Added testimonial from Cisco Ireland + + 18th September 2011 + =================== + o [LICENSE] If you want to buy multiple licenses (eg you're a web designer with multiple clients that you want + to get RGraph licenses for), then there's now a bulk licenses option with the discount increasing + the more you buy. If you're interested in this then you can inquire about it by emailing + licensing@rgraph.net + o [LINE] Filled line charts and the X axis at the top now works correctly + o [METER] Added Meter chart Grow effect + + 12th September 2011 + =================== + o [HBAR] chart.background.grid.autofit has been turned on by default. + o [LINE] Added chart.curvy and chart.curvy.factor. Curvy lines are NOT exact, and the inaccuracy increases with + the severity of the curve. chart.curvy.factor can be a decimal from 0 (not curvy) to 0.5 (quite curvy) + + 9th September 2011 + ================== + o [BAR] The background grid autofit has been turned on by default. The number of horizontal grid lines has been + changed to 5. + o [EFFECTS] Fade in now operates over a period of 0.5 seconds + o [LICENSE] Revamped the license page - this should make it clearer + o [LINE] Added UnfoldFromCenter() animation + o [LINE] The background grid autofit has been turned on by default. The number of horizontal grid lines has been + changed to 5. + o [ODO] Added Grow animation effect + o [PIE ZOOM] A change has been made to the Pie chart when using tooltips and the full canvas zoom - please test your charts + if you're upgrading and you use tooltips in conjunction with the zoom. + o [PIE] Fixed a Pie chart label/seperation bug where chart.exploded is a number + o [ROSE] Added Grow() animation. This only works with regular and stacked Rose charts. + o [SCATTER] You can now have an X scale. If you specify that the X axis should be scaled then you don't have to specify an + xmax - one will be calculated for you. It may not be what you want though - so you might have to specify the + xmax anyway. + o [SCATTER] Minor bug fixed when hiding the lest tick when the X axis is at the right + o [SCATTER] The background grid autofit has been turned on by default. The number of horizontal grid lines has been + changed to 5. + o [WATERFALL] Added ability to have the X axis in the center + o [WATERFALL] The Waterfall property chart.background.grid.autofit now defaults to true (instead of false) + o [ZOOM] Changed the frame rate for the full canvas zoom + + 30th August 2011 + ================ + o [LINE] Added chart.animation.unfold.initial + o [MISC] Support is now via email - support@rgraph.net - not the forum + + 27th August 2011 (STABLE) + ================ + o [MISC] Stable release + + 25th August 2011 + ================ + o [WEBSITE] Misc website changes + + 22nd August 2011 + ================ + o [LINE] Added RGraph.Effects.Line.Rise(obj) animation function. This is a nice effect made simple because of the + .Animate() function + o [LINE] A bug has been fixed for stepped line chart, but please be cautious when upgrading + + 20th August 2011 + ================ + o [MISC] Changed the RGraph.Clear() method to use .clearRect() method + o [LINE] IMPORTANT Significant change to the way that filled multi-line charts are drawn. Formerly + the lines were stacked on top of each other. Normally this wasn't too much of an issue + unless you wanted semi-transparent colours. Because the lines were stacked on top of + each other the colors wouldn't be exactly right. This has now changed so you CAN now use + semi-transparent colors. + + As a result the order in which the lines are drawn has been changed, so whilst the data + will remain the same, the "stacking" order if the datasets may change. Also, if you use + an array of shadow colors, they may need reversing. + o [MISC] The download archive now works "out-of-the-box" with IE9. Formerly the DOCTYPE wasn't the first line + in the files so it choked. Only offline IE9 was affected. + o [MISC] Added showcase of requestAnimationFrame(): http://dev.rgraph.net/tests/anim.html + + 13th August 2011 + ================ + o [BAR] Added chart.numyticks + o [HPROGRESS] Added .getBar method + o [HPROGRESS] Added chart.strokestyle + o [LINE] Added chart.numyticks + o [METER] Added chart.segment.radius.start which allows you to specify a start point for the green/yellow/red coloured segments + o [METER] Added chart.border + o [METER] Added chart.linewidth.segments (for the lines between the segments + o [METER] Added chart.labels (a boolean controlling whether the labels are shown or not) + o [METER] Added chart.needle.linewidth + o [METER] Added chart.needle.radius + o [METER] Added chart.needle.tail + o [PIE] Added Pie chart Grow effect + o [RADAR] Completely removed chart.tooltips.coords.adjust + o [RADAR] Added .getPoint(e) method + o [RADAR] Fixed a bug with the __dataset__ property that is added to tooltips + o [RADAR] The chart.colors property has changed to: ['red', 'green', 'blue'] + o [RADAR] Added chart.labels.specific + o [RSCATTER} Converted to use a .getPoint(e) method for tooltips + o [SCATTER} Completely removed chart.tooltips.coords.adjust + o [SCATTER] Added chart.numyticks + o [VPROGRESS] Added .getBar method + o [VPROGRESS] Added chart.strokestyle + o [WATERFALL] Added chart.tooltips.event + o [WATERFALL] Added .getBar(e) method for tooltips + + 10th August 2011 + ================ + o [ANIM] Revamped the animation page and added the RGraph.Effects object. This allows you to add animation and wipes + to your RGraph charts. + + 6th August 2011 + =============== + o [BAR LINE] Tooltips highlighting now works with combined bar/line charts + o [METER] Added chart.centery, chart.centery and chart.radius + o [METER] Added chart.colors.ranges - an alternative to the red/yellow/green areas + o [METER] Added chart.strokestyle - default is null + o [SCATTER] Added chart.boxplot.capped - this controls the horizontal lines at the end of boxplots + o [THERMOMETER] The thermometer now supports a scale with chart.scale.visible, chart.scale.decimals and chart.ylabels.count + o [TOOLTIPS] The internal function RGraph.getTooltipText() has been renamed to RGraph.getTooltipTextFromDIV() + o [WEBSITE] Added animation samples to front page and example index page + + 29th July 2011 (STABLE) + ============== + o [BAR] Added chart.noendxtick + o [BAR] Fixed a bug with specific labels vertical positioning with a center X axis + o [LINE] Documented chart.noendxtick + o [LINE] Added chart.tickmarks.linewidth + o [LINE] When using specific labels and a ymin, the first label is now placed where "0" would go + + 25th July 2011 + ============== + o [CONTEXT] Added onbeforecontextmenu RGraph event + o [KEY] Noted Line chart interactive key + o [PIE] Shadow now works correctly with exploded segments + o [SCATTER] Added chart.labels.above, chart.labels.above.size and chart.labels.above.decimals to the Scatter chart + + + 20th July 2011 + ============== + o [BIPOLAR] Converted tooltips to use the new obj.getBar(e) method. + o [PIE] The option chart.exploded can now be a number, which is then applied to each segment (as well as the prior array) + o [PIE] Outlining now works with exploded segments - http://www.rgraph.net/docs/you-dont-need-to-spend-a-lot-of-money.html + o [BAR] When adding a line chart on top of a bar chart, the following are no longer set. + If you want them you will need to set them yourself (the former values are also shown): + + line.Set('chart.noaxes', true); + line.Set('chart.background.barcolor1', 'rgba(0,0,0,0)'); + line.Set('chart.background.barcolor2', 'rgba(0,0,0,0)'); + line.Set('chart.background.grid', false); + line.Set('chart.ylabels', false); + + There are a few things that are still set for you: + + chart.gutter.top + chart.gutter.bottom + chart.gutter.left + chart.gutter.right + chart.ymax + + o [FUNNEL] Converted tooltips to use the new obj.getSegment(e) method. + o [LINE] The Line chart now has a .__index2__ property which can be used in your ontooltip event handlers. This is the index + in the individual array for a particular line. If you're not using multiple lines in your chart, this won't affect + you. + + 17th July 2011 + ============== + o [BAR] Added chart.colors.reverse for reversing the order in which colors are used (stacked bar charts only) + o [FUNNEL] Added a .getSegment(e) method - which greatly simplifies retrieving the segment that has + been clicked on (or the mouse is over etc). + o [LINE] Added chart.key.interactive - this allows you click on a key item and it will be highlighted on the chart + o [TOOLTIPS] Small fix to snap effect when you have multiple charts one one page, both with tooltips + o [TOOLTIPS] The default CSS has been altered for tooltips. This affects all chart types. The changes are: + o There is now no CSS border to the tooltip + o The toltip is now transparent a small amount (opacity=0.9) + o The tooltip shadow X & Y offsets are now zero + + 12th July 2011 + ============== + o [MISC] Stable release + + 11th July 2011 + ============== + o [WEBSITE] Website updates + + 10th July 2011 + ============== + o [CONTEXT] Added the registry variable: RGraph.Registry.Get('chart.contextmenu').__shape__ + This is the underlying hotspot (eg bar/segment/point), if any, that was clicked on. + + Objects that have a .getXXX() method now also have a .getShape() method, which is + exactly the same, but can be used if you don't know what object type you have, + (since it's the same name across all object types). + + 8th July 2011 + ============= + o [DOCS] Documentation updates + o [COMMON] Fixed a slight bug when formatting negative numbers at 1,000 and over + o [METER] Added Meter options: chart.value.label + chart.value.text.decimals + chart.value.text.units.pre + chart.value.text.units.post + + 29th June 2011 + ============== + o [WEBSITE] Website changes + + 28th June 2011 + ============== + o [RADAR] The Tradar has been renamed to Radar - you WILL need to update your code slightly. + o [RADAR] Fixed a bug with tooltips and multiple datasets + o [TOOLTIPS] The 'snap' effect now snaps on the first view, moving in from the top left - see the front page line chart + for an example of its use. + + 25th June 2011 + ============== + o [LINE] "10 labels" with a chart.ymin value now works with X axis at the top and bottom + o [PIE] The chart.tooltips.coords.adjust property has been removed + o [ZOOM] Added ability to fire the full canvas zoom by just a click - no context menu + + 23rd June 2011 + ============== + o [LINE] The chart.tooltips.coords.adjust property has been removed + o [ROSE] The Rose chart getSegment() return value has changed. Instead of just one radius value, there are now two + radius values - the start and end values. This change was necessary to facilitate stacked Rose charts. + Subsequent values have "moved up one" in the array (ie what was index 3 is now 4, what was 4 is now 5 + and what was 5 is now 6) + o [SCATTER] The chart.tooltips.coords.adjust property has been removed + + 21st June 2011 + ============== + o [DONUT] Added chart.variant.donut.color for the center hole + o [HBAR] The default colors have changed + o [HBAR] Added sequential color support to grouped and stacked HBars + + 18th June 2011 + ============== + o [HBAR] Added chart.colors.sequential for regular hbars (not stacked or grouped) + o [HBAR] Converted to .getBar(e) method for tooltips + o [LINE] Added triangle and filledtriangle tickmark types + o [ODO] Added chart.green.solid and documented + o [ODO] Added chart.yellow.solid and documented + o [ODO] Added chart.red.solid and documented + o [ODO] Documented chart.green.color + o [ODO] Documented chart.yellow.color + o [ODO] Documented chart.red.color + o [PIE] Added chart.variant.donut.color - this controls the color of the hole + o [ROSE] Implemented stacked Rose chart (see below) + o [ROSE] Added chart.colors.sequential (which, if you upgrade, you need to set to true to maintain BC) + o [ROSE] When using tooltips, the highlight will now appear "over" the axis labels. This makes the + highlighted segment more identifiable. + o [ROSE] Tooltips can now be a single function, or an array of functions as well as an array of strings + o [ROSE] Added chart.variant - the value can be either null (for a normal or stacked Rose chart) or "non-equi-angular" for a + Rose chart that has unequal segment sizes. See an example here: + + http://dev.rgraph.net/tests/2011-07-30/non-equi-angular_rose.html + + o [ROSE] Added chart.labels.offset + o [ROSE] Added chart.tooltips.event + o [SCATTER] Added in-graph labels to Scatter chart + + The Rose chart has undergone significant changes in order to facilitate stacked and non-equi-angular charts. + In particular, the color handling has changed, and as such you may need to specify chart.colors.sequential in + your chart configurtion to get the colors to behave as they used to. Changing the way colors behave brings the Rose chart + into line with other chart types. Also, the Rose chart .getSegment() return value has changed - now instead of just one radius + value, you get a start radius and end radius value. + + 7th June 1011 + ============= + o [LINE] Documented chart.filled.accumulative + o [WEBSITE] Removed redundant checks from graph libraries + + 4th June 2011 (STABLE) + ============= + o [MISC] Stable release - see .BC.txt, and look through this files entries since the last stable release (25-03-2011) + + 28th May 2011 + ============= + o [LINE] You may need to adjust your titles vertical positioning using chart.title.vpos + o [MISC] Added example of adding a subtitle to your graph + + 21st May 2011 + ============= + o [BIPOLAR] Tooltip handling has changed. If none is set for a particular bar, none will now be shown + o [COMMON] Check your graph titles - the vertical positioning has changed. To reposition you can + use chart.title.vpos + o [HBAR]The X axis title positioning may have changed slightly - if you use it you should check your title is as you expect + o [HBAR] chart.labels.above has been fixed in respect of drawing text in a stacked HBar for sections that it shouldn't do + o [HBAR] Fixed a very minor bug when the chart is redrawn (after being drawn once) and the scale wasn't correctly reset + o [LINE] This chart type may be particularly buggy because of the gutter changes + o [MISC] Individual gutters are now settable with all graph types + o [MISC] The settings chart.width and chart.height are now deprecated in favour of the new individual gutter settings + o [ODO] Added key - helpful for multiple pointers + o [RESIZE] Repositioning the resize handle is no longer necessary with the introduction of independent gutter settings. + Starting with the May release this setting should no longer be used. + o [SCATTER] Added an obj.getPoint(e) method which eases getting the point (if any) that is currently being hovered over + o [WATERFALL] Documented chart.scale.formatter + + Keep in mind that individual gutter settings and using chart.width/chart.height are not meant + to be used together - chart.width/chart.height will cease to be user facing properties and will + (starting this release) stop functioning and be removed completely. The addition of individual + gutter settings is a fundamental change so testing of your graphs is imperative. The + requirement of translating to reclaim lost space is reduced (if not eliminated + entirely) with the addition of these settings. + + 7th May 2011 + ============ + o [API] Added RGraph.Reset() function, which both clears the canvas AND resets any .translate() that has been performed + o [INVOICE] Improved the appearance of the invoice + o [LINE] Added individual gutter settings: + chart.gutter.left + chart.gutter.right + chart.gutter.top + chart.gutter.bottom + Keep in mind that these settings are experimental currently. In particular they may cause dynamic features + not to work 100% correctly. + o [MODALDIALOG] Added an example of covering the scroll bars to the ModalDialog page + o [ODO] Kength of extra pointers is now supported, eg: odo.Set('chart.needle.extra', [[16, 'yellow', 50]]); + o [WATERFALL] Added this new chart type + o [WEBSITE] Changed pages to use uncompressed version of ExCanvas - now works offline + + 30th April 2011 + =============== + o [METER] Added chart.scale.decimals - default is 0 + + 9th April 2011 + ============== + o [BAR] Added support for chart.background.image + o [BAR] Added ability to have X axis at the top for entirely negative data sets, eg: + obj.Set('chart.xaxispos', 'top'); + o [LED] Added chart.width and chart.height. Also changed the sizing so now the letters should always fit the canvas size + o [LINE] Added support for chart.background.image + o [LINE] Added ability to have X axis at the top for entirely negative data sets, eg: + obj.Set('chart.xaxispos', 'top'); + o [MSIE] MSIE 8 now clears to white by default, not transparent + o [PIE] Added chart.tooltips.coords.adjust + o [PIE] Segment separation is now available as a tooltip highlight mode (exploded segments) + o [SCATTER] Added support for chart.background.image + o [SCATTER] Documented chart.ylabels.invert + o [THERMOMETER] Added adjusting + o [THERMOMETER] Added chart.text.color + o [THERMOMETER] Added chart.value.label, which allows to not display the label (true/false) + + 25th March 2011 (STABLE) + =============== + o [COMMON] The default for chart.key.halign is now null, by default the position for the + key depends on the position of the Y axis + o [COMMON] Changed chart.title.yaxis.align to chart.title.yaxis.position + o [MSIE] Positioning tweaks for IE9 final + + 20th March 2011 + =============== + o [LINE] Added workaround for Chrome bug when specifying different line widths for lines + o [MISC] Added chart.key.halign (when using graph mode) which can be left or right (default) + o [TRADAR] Fixed tradar and interactive adjusting (thrown out by the addition of multiple datasets) + + 12th March 2011 + =============== + o [COMMON] The RGraph.Clear() function has been changed to a transparent colour to transparent instead of white. Also, + a new event has been added called onclear which fires when the function is called. You can use this function + to draw a white (or a color of your choice) rectangle over the canvas. Effectively clearing the canvas to + your color, for example: + + function myClear(obj) + { + obj.context.beginPath(); + obj.context.fillStyle = 'white'; + obj.context.fillRect(-10,-10,obj.canvas.width + 20, obj.canvas.height + 20); + obj.context.fill(); + } + + DO NOT simply use the RGraph.Clear() function in the onclear event listener function, as you will create an + infinite loop. + o [COMMON] Added chart.title.yaxis.align to the common background code. This is usable by: + - Bar + - Line + - Scatter + o [LINE] A bug has been fixed that is apparent when you're using chart.outofbounds and have null values. If you have this + combination, please test your graphs! An example is here: http://dev.rgraph.net/tests/null.html + o [ODO] Added chart.border.color1 + o [ODO] Added chart.border.color2 + o [ODO] Added chart.border.color3 + o [ROSE] Corrected a bug in the Rose chart, introduced in the prior beta + o [METER] Added the following tickmark controls to the Meter chart: + chart.tickmarks.small.num + chart.tickmarks.big.num + chart.tickmarks.small.color + chart.tickmarks.big.color + o [RESIZING] Tooltips for the icons are now limited to Google Chrome and MSIE because of reliability issues. The cursor will + still change in all browsers though + o [THERMOMETER] Added chart.title.side + o [TRADAR] Added multiple dataset support. eg: http://www.rgraph.net/examples/tradar.html + o [TRADAR] Added key + + 5th March 2011 + ============== + o [COMMON] The default color for by the RGraph.Clear() function has been changed to transparent. + o [COMMON] The RGraph.getSegment() function has been moved to be a method of both the Rose and the Pie charts, instead of part + of the common object. ie Supposing your object is called myObj, it will now be myObj.getSegment(e), instead of + RGraph.getSegment(e) + o [INVOICE] Added Paypal button to invoice + o [PIE] Added exploded segments. http://www.rgraph.net/docs/animation_segments.html Certain Pie chart options won't work + with this feature + o [THERMOMETER] Added initial implementation of this visual variation on the progress bar + + 26th February 2011 (STABLE) + ================== + [MISC] Stable release + + 19th February 2011 + ================== + o [BAR] Added chart.noaxes + chart.noxaxis + chart.noyaxis + o [KEY] Added new test example of an interactive key. This feature isn't finished yet and has limited use cases. + o [WEBSITE] Added facebook sharing icon + + 14th February 2011 + ================== + o [DOCS] Added example of persistent annotations + o [HBAR] Updated docs + + 11th February 2011 + ================== + o [HBAR] Added chart.xmin + o [MISC] Added chart.width and chart.height properties to remaining libraries + o [LINE] Fixed slight bug in line when multiple lines are specified as one argument + o [SCATTER] Added chart.labels.specific.align which allows you to center align labels + + 28th January 2011 (STABLE) + ================= + o [BAR] Added chart.background.grid.autofit.align, for making the grid lines line up with the ticks. Any chart.hmargin will + throw the alignment out. + o [DOCS] Added note to animation page about CSS vs <canvas> animation + o [DOCS] Documented the custom event removall functions + o [LINE] Corrected a bug with null tickmarks and the mouseover event + o [LINE] Added chart.background.grid.autofit.align, for making the grid lines line up with the ticks. Any chart.hmargin will + throw the alignment out. + o [RESIZING] If the canvas has a CSS "border:", it is now preserved after a reset + + 22nd January 2011 + ================= + o [MISC] You can now revert the canvas back to tranparency with the RGraph.Clear() function by specifying "transparent" as the color. + + 15th January 2011 + ================= + o [ADJUSTING] Converted the Gantt chart state array (which is kept in the registry) to textual keys instead of numeric ones. + o [API] Fixed slight bug with RGraph.array_max which presented itself in a few rare instances + o [ANNOTATE] Converted annotating to DOM2 event registration + o [FUNNEL] Added chart.highlight.stroke and chart.highlight.fill + o [GANTT] You can now resize Gantt chart events (as well as move) by placing your cursor in the right five pixels of the appropriate + bar + o [HBAR] Added chart.xlabels + o [MISC] Added chart.highlight.fill and chart.highlight.stroke to all pertinent graph types + o [PROGRESS] Fully converted the progress bars to DOM2 + o [RESIZING] Converted to DOM2 for event registration + o [SCATTER] Added chart.ylabels.inverted + + 8th January 2011 + ================ + o [ADJUSTING] Converted all adjusting event handlers to DOM2 + o [API] Added RGraph.GetWidth() and RGraph.GetHeight() + o [BAR] Added chart.labels.above.angle, which can be from -90 to 90 (degrees) + o [BAR] Added chart.colors.sequential for regular bar charts (not stacked, not grouped, but the applicable variants work) + o [DOCS] Documentation updates + o [EVENTS] New events have been added - onresizebegin, onresizeend, onannotatecolor, onannotateclear + o [GANTT] Added seventh (border color) and eigth (linewidth) possible options to event options. + o [GANTT] Gantt chart is now adjustable. You can drag the existing events about. Altering the extent of an event to follow. + + 1st January 2011 + ================ + o [ADJUSTING] Added onadjustbegin and onadjustend events + o [API] RGraph.RemoveCustomEventListener() has been added + o [API] RGraph.RemoveAllCustomEventListeners() has been added. This function can optionally take a canvas id to limit the clearing to) + o [BAR] The bar chart now supports the chart.height and chart.width properties + o [BAR] The Bar chart now supports the chart.tooltips.highlight property + o [BAR] Added chart.highlight.fill (which is the fill color used for tooltips highlighting) + o [BAR] Added support for adjusting when the X axis is in the center + o [EVENTS] Added examples of each event to the events page + o [HBAR] This can now have tooltips triggered by the onmousemove event when using chart.tooltips.event + o [HPROGRESS] Added chart.tickmarks.zerostart for having tickmarks/labels start at zero + o [BAR] Added chart.width and chart.height + o [LINE] Added chart.width and chart.height + o [LINE] Added chart.outofbounds support to adjusting (for the line chart) + o [LINE] Added support for adjusting when the X axis is in the center + o [MISC] Text function, when multiple carriage returns are in use, has been fixed + o [ODO] Added border (the color of which is configurable with chart.needle.triangle.border) to the triangle pointer + o [RESIZING] Added chart.resize.handle.adjust + o [RESIZING] Added chart.resize.handle.background + o [SCATTER} Added chart.width and chart.height + o [SKELETON] Added chart.width and chart.height default properties (defaulting to null) + o [VPROGRESS] Added the chart.width and chart.height properties + o [VPROGRESS] Added adjusting to this chart type + o [VPROGRESS] Added an example to the VProgress example page (http://www.rgraph.net/examples/vprogress.html) showing + a key in graph mode. There's an example of gutter mode for the HProgress on the this test page + +NB Different font sizes in charts for X/Y labels is now no longer going to be added since it is no longer + necessary with the new chart.width and chart.height properties. + + 24th December 2010 (STABLE) + ================== + o [ANNOTATING] Annotating has been changed to allow annotating to occur in the gutter + + 18th December 2010 + ================== + o [MSIE] MSIE 9 now uses the double click event to trigger the context menu + o [ZOOM] Added a note about making the zoom in thumdnail mode circular: + http://www.rgraph.net/docs/zoom.html#thumbnail + + 11th December 2010 + ================== + o [API] Added pointer, in the docs, for how to add text to your charts + o [BAR] The Bar chart now converts null values to zero + o [BAR] You can now specify a textual scale with chart.ylabels.specific + o [GANTT] Fixed background bars when specifying an xmin + o [HPROGRESS] Labels can now be on top of the bar as well as the bottom + o [LINE] You can now specify a textual scale with chart.ylabels.specific + o [MISC] Added the RGraph.SetConfig() function - http://www.rgraph.net/docs/setconfig.html + o [MISC] Added chart.title.background to graph types that use a title + o [PIE] Added chart.highlight.style.2d.color - default is a semi-transparent white color + o [PIE] Added chart.tooltips.event + o [SCATTER] Crosshairs readout now works when the X axis is in the center + + 4th December 2010 + ================= + o [GANTT] Added chart.xmin (default is 0) + o [HBAR] Added chart.labels.above.decimals, defaulting to 0. You may need to set this to the number of desired decimals + if you're expecting decimals + o [LICENSING] If you prefer you can now use PayPal instead of Google Checkout to buy an RGraph license: + http://www.rgraph.net/docs/licensing.html#paypal + o [LINE] Fixed a bug with null points still showing tooltips + o [MISC] The key handling has been rewritten. There is now a documentation page about keys: + http://www.rgraph.net/docs/keys.html + o [MISC] Added default key properties to all relevant graph types - the key has been completely rewritten and as such, + you should check your graphs are as you expect. You may neeed to slightly adjust your key coordinates for example. + o [SCATTER] Added option to have vertical bars (much like the horizontal bars option) + o [SKELETON] Added more default properties + o [VPROGRESS] You can now position the labels on the left of the chart instead of the (default) right. + + 27th November 2010 (STABLE) + ================== + o [BAR] When showing 10 Y labels, chart.scale.decimals is respected + o [DOCS] Add an example showing dynamic updating + o [DOCS] Added animation example using jQuery + o [LINE] When showing 10 Y labels, chart.scale.decimals is respected + o [MISC] Improved the jQuery animation example + o [MISC] Removed the "functions as colors" option - this may re-added at a later date + o [SCATTER] When showing 10 Y labels, chart.scale.decimals is respected + o [SKEL] Added lots more default default properties and functionality that common RGraph functionality + uses, for example: chart.resizable. + + 20th November 2010 + ================== + o [API] Documented RGraph.background.Draw(). + o [DOCS] Added note to AJAX section about types + o [DOCS] Added skeleton object which can be used to ease creating new graph types + o [DOCS] Added note to misc docs about debugging your graphs + o [LINE] Fixed line chart tooltips as separate arguments + o [MISC] Minor adjustments to placement and borders + o [MISC] For the line/bar/scatter, when the X axis is at the bottom and there is a background bar with a + negative start (or it results in a negative end value), you now get a warning. + o [MISC] Added animation example using jQuery + o [MSIE] Changed instances of document.all to RGraph.isIE8() + o [RESIZING] Tweaked the positioning a little, so now nothing should move when you resize a canvas + o [SKEL] Added a skeleton file, which can be used as a base when creating new RGraph libraries. + + 13th November 2010 + ================== + o [API] Added RGraph.array_shift() function (removes an element from the beginning of an array) + o [LINE] Added chart.labels.above and chart.labels.above.size (default is 8) + o [LINE] All chart labels are now shown, regardless of how many points on the line there are. + o [LINE] Sets of line points can now be given as one big multi-dimensional array. This may make it easier to use in AJAX, eg: + http://dev.rgraph.net/tests/line.arguments.html + o [LINE] In Google Chrome, the shadow fix is applied by default. An option exists to enable you to turn this off: chart.chromefix + In a few rare cases you will need to turn off shadow blurring (chart.shadow.blur=0) + o [MISC] Added more options for in-graph labels. See http://www.rgraph.net/docs/ingraph.html + o [MISC] Added note about AJAX and types + o [VPROGRESS] Added chart.tooltips.coords.adjust + o [VPROGRESS] Added chart.min + o [VPROGRESS] Added chart.labels.count, chart.min, chart.scale.decimals + + 6th November 2010 + ================= + o [API] RGraph.getScale() now takes the graph object as the second argument + o [BAR] Added chart.labels.above.decimals, defaulting to 0 + o [BAR] Added chart.labels.above.size, which if specified is used as the font size. An example of this and the above change is + here: http://dev.rgraph.net/tests/above.bar.html + o [BIPOLAR] Added chart.gutter.center, which controls the space where the labels are + O [BIPOLAR] Added chart.scale.round + o [DOCS] Added note to API docs about references available + o [HBAR] Added chart.scale.decimals + o [HBAR] Added chart.scale.round + o [HPROGRESS] Added chart.min, for specifying a minimum value and chart.scale.decimals + o [LINE] Y labels can once again be 1/3/5/10 + o [LINE] Added chart.scale.round + o [LINE] chart.outofbounds is now usable in conjunction with chart.ymax + o [LINE] Added chart.chromefix + o [RESIZE] Resize now sets the placeholder DIVs 'position' CSS value as inline-block, thus reducing page re-organisation + o [ROSE] Added chart.scale.decimals + o [ROSE] Added chart.ymax + o [ROSE] Added chart.ymin (There's an example here: http://dev.rgraph.net/tests/rose.ymin.html + o [RSCATTER] Added chart.scale.decimals // If you use the Rscatter, please test this with your graph(s) + o [RSCATTER] Added chart.scale.round // If you use the Rscatter, please test this with your graph(s) + o [RSCATTER] Added chart.ymin // If you use the Rscatter, please test this with your graph(s) + o [SCATTER] Y labels can once again be 1/3/5/10 + o [SCATTER] Added chart.scale.decimals + o [SCATTER] Added chart.scale.round + o [SCATTER] Scatter chart, translating and crosshairs now work when you tell RGraph how you've translated using + chart.tooltips.coords.adjust + o [SCALE] Added chart.scale.round to: bar, bi-polar, line, rscatter, rose, scatter, tradar This means that scales produced are + rounded up, producing rounder values + o [SCALE] Re-added 10 Y labels to Line/Scatter. This may be best used In conjunction with chart.scale.round + o [TRADAR] Added chart.scale.round + + 30th October 2010 (STABLE) + ================= + o [DOCS] The combination example has been changed and extended. It now shows Pie charts in the tooltips, + which can be clicked on. + o [DOCS] Added note about using RGraph.showPNG() without a context menu. + o [DOCS] RGraph.showPNG() has had it's parameter list changed: http://www.rgraph.net/docs/api.html + o [API] Added fix to crosshairs when coordinates are used in conjunction with an X minimum value + + + 23rd October 2010 + ================= + + Important: + The Line (and Scatter chart) chart have been PARTIALLY REVERTED, meaning that the number of labels is again a + choice between 1/3/5. The option to have 10 labels will be re-added, but for positive charts only, and + probably for scales with maximum values over 10. + + o [API] The RGraph.showPNG() function can now accept the canvas to use as an (optional) argument, + allowing you to use the RGraph.showPNG() function with an image, eg: + http://www.rgraph.net/examples/tradar.html (1st graph) + o [BAR] Bar chart can now only have 1/3/5/10 labels + o [GANTT] Borders are now a little thinner (and less blurry) + o [KEY] Rounded key corners now lives behind an option: chart.key.rounded (default is false), also documented this + o [KEY] Filled keys now only cover the key with one layer of color - so transparency works better + o [PNG] URL is now selected by default + o [SCATTER] Box plot coords bug has been corrected + o [SCATTER] The default for chart.scale.decimals has been changed fr0m 0 (zero) to null. You may need to set this now + with: myScatter.Set('chart.scale.decimals', 0); + + 16th October 2010 + ================= + o [LINE] Y axis can now have an arbitrary number of labels: http://dev.rgraph.net/tests/ymin.html + o [LINE] Made addition so that in Chrome a 1px linewidth is changed to 1.01 + o [MISC] Corners on the key (in graph mode) are now curvy + o [MISC] RGraph.showPNG() now shows the data: URL to the image and makes it easy to copy it to the clipboard + + 9th October 2010 + ================ + o [LINE] Changed decimal handling - you may need to specify this: myLine.Set('chart.scale.decimals', 0); + o [LINE] Added chart.outofbounds (default is false) + o [LINE] Added obj.getPoint(e) method which simplifies getting the pertinent point on the line + chart in events (eg the onmousemove event, and now the Line chart uses it) + o [LINE] Line charts can now have custom tickmarks + o [SCATTER] Added facility for custom tickmarks + o [WEBSITE] Fixed favicon path + + 1st October 2010 + ================ + + In October, 25% of all license fees will be donated to Unicef - the International charity for children + + o [BAR] Added .getBar() method. This allows you to easily get the focused/selected bar. There is an example usage here: + o [DOCS] Documentation is no longer dynamic + o [FUNNEL] Shadows can now go upwards (ie any x/y offset is feasible) + o [FUNNEL] Converted this chart type to DOM2 for tooltips + o [GANTT] This chart has been moved to DOM2 for tooltips + o [HPROGRESS] This chart has been moved to DOM2 for tooltips + o [MISC] Colors can now be functions as well as well as strings/gradients. These colors are resolved once, at the start + of the .Draw() method + o [PIE] Documented method .getSegment(). Used for getting the pertinent + segment when the canvas is clicked on (for example), http://www.rgraph.net/docs/pie.html#available.methods + o [ROSE] This chart has been moved to DOM2 for tooltips + o [ROSE] Documented method .getSegment(). Used for getting the pertinent + segment when the canvas is clicked on (for example), http://www.rgraph.net/docs/rose.html#available.methods + o [RSCATTER] This chart has been moved to DOM2 for tooltips + o [SCATTER] This chart has been moved to DOM2 for tooltips + o [SCATTER] Added new properties: chart.yaxispos + chart.xaxis + chart.noendxtick + o [TOOLTIPS] Fixed a tooltip bug that probably only presented itself on the bar chart example page + o [TRADAR] Added chart.tooltips.highlight (default is true) + o [TRADAR] This chart has been moved to DOM2 for tooltips + o [VPROGRESS] This chart has been moved to DOM2 for tooltips + o [XML] Removed XML documentation + + 25th September 2010 (STABLE) + =================== + o [DOCS] Fleshed out the integration example - http://www.rgraph.net/docs/index.html#mysql + o [DOCS] Added note to docs about line chart obj.original_data + + 18th September 2010 + =================== + o [ANNOTATE] Added onannotatestart and onannotateend events + o [CONTEXT] Fixed submenu offset in MSIE 9 + o [DOCS] Added MySQL integration example to integration docs + o [DOCS] Documented how to use a dynamically created canvas with ExCanvas + o [MODALDIALOG] Removed MSIE 8 DirectX shadow from ModalDialog + o [MODALDIALOG] Better MSIE 9 compatibility + o [PIE] Fixed Pie chart sticks for Chrome 6 + o [TOOLTIPS] If Y position is less than 0, tooltips are now shown below the cursor to mitigate this + o [WEBSITE] Added social networking icons to all pages + o [WEBSITE] "Preload" social networking icons + + 11th September 2010 + =================== + o [API] Updated docs for RGraph.Redraw() slightly + o [LINE] Added chart.toltips.highlight + o [MISC] Updated the combined bar/line example + o [ODO] The chart.units.pre and chart.units.post properties have changed to chart.value.units.pre and chart.value.units.post. + The chart.units.pre and chart.units.post properties have changed functionally. + o [ODO] Added chart.needle.extra to allow you to specify extra needles. + o [RSCATTER] Added chart.toltips.highlight + o [SCATTER] Added chart.toltips.highlight + o [SCATTER] Added coordinates readout: chart.crosshairs.coords + chart.crosshairs.coords.fixed + chart.crosshairs.coords.fadeout + chart.crosshairs.coords.labels.x + chart.crosshairs.coords.labels.y + Example: http://dev.rgraph.net/tests/crosshairs.html + o [ZOOM] Much improved the smoothness of the indicator box when in area mode - see http://www.rgraph.net/docs/zoom.html + for an example of area mode + + 4th September 2010 + ================== + o [API] Changed RGraph.number_format() functions arguments + o [API] Added RGraph.getGutterSuggest() function, which is a suggestion based on the left labels (only) + for the chart.gutter setting. + o [API] Added RGraph.showPNG() function, which makes it easy to get images of graphs. This is designed to be + used in conjunction with the context menu, and is therfore defined in the RGraph.common.context.js file. + There's documentation about it here: http://www.rgraph.net/docs/png.html + o [BAR] Added key shadow control + o [BAR] Added chart.scale.point and chart.scale.decimal + o [BIPOLAR] Added chart.scale.point and chart.scale.decimal + o [FUNNEL] Added key shadow control + o [HBAR] Moved to DOM 2 event handler functions + o [HBAR] Added chart.scale.point and chart.scale.decimal + o [LINE] Added key shadow control + o [LINE] Added warning about Chrome 6 shadow bug + o [LINE] Added chart.noyaxis + o [LINE] Added chart.scale.point and chart.scale.decimal + o [MISC] Added RGraph.getGutterSuggest(). See the misc documentation for more detail + o [MSIE] Now that RGraph is moving to DOM2, tooltips on graph libraries that have been changed will not function in MSIE8. + The graphs will still be shown, however tooltips will not function. MSIE9 will still work. + o [ODO] Pointer is now more pointy + o [PIE] Moved to DOM 2 event handler functions + o [ROSE] Added key shadow control + o [RSCATTER] Added key shadow control + o [SCATTER] Added chart.tooltips.coords.adjust + o [SCATTER] Added key shadow control + o [SCATTER] Added chart.scale.point and chart.scale.decimal + o [TRADAR] Added key shadow control + o [WEBSITE] Added code to async page that demonstrates the difference more + + 28th August 2010 + ================ + o [API] Updated the API docs a little with the correct data properties for some graph types + o [DOCS] Added information about AJAX requests to performance section + o [DOCS] Added information about the DOMContentLoaded event to the docs. + o [LINE] Fixed problem with chart.ylabels = false + o [METER] Added arrow head to the Meter + o [METER] Removed outer labels + o [METER] Increased number of labels to 11 + o [MSIE] A few small tweaks to the palette, the scatter chart, the context menu, and tooltips + o [ODO] A few fixes for the Odometer in Chrome 6, and a few minor enhancements to the appearance. + o [WEBSITE] Live site now uses images.rgraph.net for the index page ** REVERTED ** + o [WEBSITE] Social networking icons are now combined into one image. + + 21st August 2010 + ================ + o [HBAR] Added chart.units.ingraph (for when your units are quite long) + o [MISC] Fixed various bugs in circular charts with Chrome 6 + o [MISC] Added note to front page about suitability for Chrome extensions + o [MSIE] Lots more fixes for MSIE 9 + + 14th August 2010 + ================ + o [BAR] Added chart.tooltips.coords.adjust which allows you to adjust tooltip coordinates when you translate + o [HBAR] HBar shadow is now "unified", so you can have an upwards shadow with a large offset and it still looks OK + o [HBAR] "chart.labels.abovebar" are now left aligned if they would go off the end of the canvas + o [HBAR] Fixed a bug with chart.strokecolor - renamed to chart.strokestyle + o [LINE] Added chart.tooltips.coords.adjust (for when you translate() first) + o [LINE] Tweaked filled/stepped line charts - stepped line charts show trailing line again + o [LINE] Tickmarks, as well as a string, can now also be an array of tickmark styles, eg: + http://dev.rgraph.net/tests/test3.html + o [LINE] Added chart.ylabels.invert + o [MISC] You can now specify in-graph labels like this: + line4.Set('chart.labels.ingraph', [6,'July', 3, 'November']); + If you have a lot ofempty spaces, this will help. + o [MISC] Added type property(=common) to common objects + o [ODO] Improved the appearance of the Odometer border + o [SCATTER] Tickmarks are no longer drawn when the ticks are boxplots + o [SCATTER] Added chart.xmin (upgrade cautiously) + o [SCATTER] Boxplots are now usable when the X axis is in the center + + o [NOTE] Chrome 6 appears to have an issue with canvas shadows. Other browsers are fine. A workaround has been added to the + Line chart library, however it won't be a solution for all cases. In these cases, turn off shadow blurring. + + 7th August 2010 + =============== + o [BAR] Changed this graph type over to the DOM2 .addEventListener() for tooltips + o [BAR] Bar chart can now have an arbitrary number of labels + o [BAR] Added chart.ylabels.inside + o [BAR] Labels can now be at any angle + o [BIPOLAR] Changed the default colors to just one - green + o [EVENTS] Added more events: + o onmodaldialog + o onresize + o onadjust + o onannotate + o [HPROGRESS] Multiple segments are now supported + O [HPROGRESS] Added the ability to configure the number of inner tickmarks + o [LINE] Labels can now be at any angle + o [LINE] Changed this graph type to use the DOM2 .addEventListener() for tooltips + o [MISC] Added isRGraph property to common objects + o [MISC] Added chart.title.hpos to all graph libraries + o [MODALDIALOG] Added onmodaldialog event + o [ODO] Outer shadow is now configurable + o [ODO] Inner shadow is now configurable + o [PROGRESS] This has now been split into the HProgress and VProgress + o [SCATTER] Labels can now be at any angle + o [TOOLTIPS] Added contract effect, similar to expand but in reverse + o [TRADAR] Background grid now matches RScatter in terms of width etc + o [VPROGRESS] Multiple segments are now supported + o [VPROGRESS] Added the ability to configure the number of inner tickmarks + + o [NOTE] Upgrading to the new H/VProgress should be done cautiously as they have undergone significant alterations + + 31st July 2010 + ============== + o [MISC] Stable release + o [DOCS] Added CSS class: RGraph_palette + o [DOCS] Added simple example AJAX function to integration documentation: + http://www.rgraph.net/docs/index.html#integration + o [ZOOM] Fixed a fade-in bug with full canvas zoom + + 24th July 2010 + ============== + o [LINE] This chart can now have text at any angle. Other graph types to follow + o [MISC] The minify script now accepts multiple arguments (filenames), + eg. ./minify file1 file2 file3 ... + + 17th July 2010 + ============== + o [BAR] Abovebar labels in GROUPED charts are now formatted + o [BIPOLAR] Moved this to use addeventListener() for events - this is a test case + o [EVENTS] Renamed the RGraph functions RGraph.AddEventListener() and RGraph.FireEvent() + to RGraph..AddCustomEventListener() and RGraph.FireCustomEvent() + o [EVENTS] Added onbeforedraw event which fires at the start of the .Draw() function + o [EVENTS] Added onzoom event to all types of zoom. See docs for details + o [HBAR] Added formatting to above bar labels + o [HBAR] Fixed grouped HBars with shadows going upwards (partially) + o [ODO] Changed a few internal properties. Read more in the docs/.BC.txt file + o [ODO] Changed chart.needle.style to chart.needle.color + o [RSCATTER] Updated test script + o [TRADAR] Added chart.labels.axes - defaults to "nsew" + o [TRADAR] Added chart.ymax + o [BIPOLAR] Implemented chart.xtickinterval. If you specify this, X tickmark spacing is totally down to this setting + o [MISC] Added chart.tooltips.override (see tooltips docs for details) + + 9th July 2010 + ============= + o [API] Added __index__ to tooltip DIVs, which corresponds to the original tooltips array. If you're not using an array of strings + for your tooltips, this is not pertinent + o [API] The RGraph.Tooltip() function now accepts an extra parameter - the index of the tooltip + o [MISC] Introduced event support. There are currently just three events - ontooltip - which naturally fires when + a tooltip is shown, oncontextmenu - which fires when the RGraph context menu is shown and ondraw - which + fires when the .Draw() method is called.. More information is available here: + http://www.rgraph.net/docs/events.html + o [MISC] Added snap tooltip effect for graph types where the tooltips are triggered using the onmousemove event, + ie Line, Rscatter, Scatter and the Tradar + o [MISC] MooTools compatibility fix + o [MISC] Added obj.isRGraph boolean to all graph objects. This is documented on the misc docs page (docs/misc.html) + o [MSIE] MSIE9 compatibility work + o [ODO] You can now use textual labels instead of numbers, eg. N/S/E/W (using chart.labels) + o [ODO] Added chart.zerostart option determining whether the top label is zero or the end value + o [ODO] Fixed a pointer bug + o [ODO] Fixed a rounding issue and added chart.scale.decimals (default is 0) + o [ODO] Colors can now be configured with: chart.green.color, chart.yellow.color, chart.red.color + o [PROGRESS] Changed a few internal properties. Read more in the docs/.BC.txt file + o [TRADAR] Added background diagonal lines (going from the center outwards) + + + 26th June 2010 + ============== + o Stable release + + 18th June 2010 + ============== + o [BAR] Documented grid properties: chart.background.grid.autofit, chart.background.grid.autofit.numhlines, chart.background.grid.autofit.numvlines + o [DOCS] Documentation pages have been reorganised and a contents list added to each page + o [GANTT] Documented grid properties: chart.background.grid.autofit, chart.background.grid.autofit.numhlines, chart.background.grid.autofit.numvlines + o [HBAR] Documented grid properties: chart.background.grid.autofit, chart.background.grid.autofit.numhlines, chart.background.grid.autofit.numvlines + o [LINE] Documented grid properties: chart.background.grid.autofit, chart.background.grid.autofit.numhlines, chart.background.grid.autofit.numvlines + o [SCATTER] Documented grid properties: chart.background.grid.autofit, chart.background.grid.autofit.numhlines, chart.background.grid.autofit.numvlines + o [WEBSITE] Added warning about MSIE versions less than 8 + + 5th June 2010 + ============= + o [HBAR] Added the following properties: chart.title.xaxis + chart.title.yaxis + chart.title.xaxis.pos + chart.title.yaxis.pos + o [ROSE] Slightly increased the area recognised to initiate resizing the Rose (ie the size of the hotspot) + o [TRADAR] Added adjusting to the TRadar + + 29th May 2010 + ============= + o [BAR] Added adjusting + o [ODO] Added gray border effect + o [ODO] Added chart.tickmarks.highlight + o [PROGRESS] Added adjusting + o [ROSE] Added adjusting + o [SCATTER] Added chart.ymin + + 22nd May 2010 + ============= + o [LINE] Added interactive adjustments + + 15th May 2010 + ============= + o [API] Updated the .getSegment() for use with the Rose chart and Donut variant charts + o [API] Added RGraph.array_pad() function + o [BAR] You can now have grouped bar charts with shadows going to the left + o [LINE] Linewidth can now, as well as being a single number, be an array of numbers, one for each line + o [LINE] You can now have labels on the inside of the Y axis as opposed to having them in the gutter + o [MISC] ModalDialog and zoom background DIVs are now much better in regards to page coverage (the semi-opaque background) + o [MISC] Removed RGraph.getPageWidth() and RGraph.getPageHeight() functions + o [MISC] You can now pass a color as the second argument to RGraph.Redraw() which it will use + o [MISC] Resizing the window when zoomed no longer hides the zoom + o [ODO] Little bit of work on pointers and MSIE compatibility + o [ODO] Added "digital" readout option, as shown on the example page + o [PROGRESS] This chart type can now have an "in-bar" indicator + o [PIE] Converted this chart to use RGraph.getSegment() for tooltips + o [ROSE] You can now set the strokestyle + o [ROSE] Converted this chart to use RGraph.getSegment() for tooltips + o [SCATTER] Added chart.line.linewidth and, as with the line, it can be either a number or an array of numbers + o [SCATTER] chart.line.stepped can now, as well as simply true or false, be an array of booleans. This allows you to have + multiple lines, some stepped, some not. + + 8th May 2010 + ============ + o [MISC] You can now have multi-line labels by using the text "\r\n" in your label (without the quotes) + o [MISC] Resizing a graph no longer affects the page layout + o [ROSE] Added labels to this chart + o [ROSE] The Rose chart origin is now the "north" axis + o [WEBSITE] Re-arranged the front page + o [WEBSITE] Removed a lot of examples from the website and made the whole thing a little more streamlined + o [ZOOM] Once visible, you can now double click a zoomed area to expand it to a full size zoom. You can see + this on the line graph on the front page. + + 1st May 2010 + ============ + o [DONUT] This is no longer a seperate class, but now a variant of the Pie chart (chart.variant = donut) + o [MISC] Added note about copying the text in tooltips using Firefox + o [ROSE] Tooltip highlighted area is now "under" the labels (as opposed to "over") + + 25th April 2010 + =============== + o [MISC] Separated out resizing functionality into it's own file - RGraph.common.resizing.js This further reduces the size of + RGraph.common.core.js + o [MISC] In area zoom, you can now left-drag to move the zoom itself around, and right-drag to move the zoomed canvas around inside + the zoom + o [MISC] Added RGraph_zoomed_area CSS class + o [MISC] Added chart.crosshairs.linewidth to bar, line and scatter + o [MISC] You can now have a single level of submenu items with the context menu + o [RADAR] This chart has been renamed to Rose and the appearance enhanced + + 17th April 2010 + =============== + o [BAR] This chart type can now use the onmousemove event for tooltips instead of the onmousedown + o [DOCS] Added tooltips documentation page - this explains tooltips and how you can specify them. There are now 4 methods available. + o [MISC] The zoomed area is now draggable once visible + o [MISC] Split out RGraph.common.js into separate files, consisting of: + o RGraph.common.core.js + o RGraph.common.annotate.js + o RGraph.common.context.js + o RGraph.common.tooltips.js + o RGraph.common.zoom.js + If you don't use any of the interactive features, the core common library is now roughly half the size. See + http://www.rgraph.net/docs/index.html#implementation for details of the new way to implement RGraph + o [MISC] You can now specify the CSS class that tooltips use (using chart.tooltips.css.class). If you have multiple + graphs on one page and want the tooltips to appear differently, this is how to do it + o [MISC] New tooltip effect - "none". Which, as the name implies, doesn't fade or expand. + + 10th April 2010 + =============== + o [MISC] Cleaned up each graphs coords array. If you use the coords arrays, you may need to adjust your numbers slightly. + The new coords may be off for you by one or two chart.margin (it can be hmargin or vmargin depending on your graph type) + o [MISC] Added details of backwards compatibility breaks + o [MISC] New zoom mode - area. You can see this on the front page line graph and on the zoom documentation page + o [MISC] Added resizing capability. Will not work with other dynamic features (except the context menu) + + 3rd April 2010 + ============== + o [BAR] Added new grid properties: chart.background.grid.autofit + chart.background.grid.autofit.numhlines + chart.background.grid.autofit.numvlines + o [BAR] Added chart.title.xaxis + o [BAR] Added chart.title.yaxis + o [BAR] Added chart.title.xaxis.pos + o [BAR] Added chart.title.yaxis.pos + o [GANTT] Adjusted the background grid, adding the required default properties + o [GANTT] Added new grid properties: chart.background.grid.autofit + chart.background.grid.autofit.numhlines + chart.background.grid.autofit.numvlines + o [HBAR] Added new grid properties: chart.background.grid.autofit + chart.background.grid.autofit.numhlines + chart.background.grid.autofit.numvlines + o [LINE] Multiple shadow colors are now facilitated (see example on front page) + o [LINE] Added new grid properties: chart.background.grid.autofit + chart.background.grid.autofit.numhlines + chart.background.grid.autofit.numvlines + o [LINE] Added chart.title.xaxis + o [LINE] Added chart.title.yaxis + o [LINE] Added chart.title.xaxis.pos + o [LINE] Added chart.title.yaxis.pos + o [LINE] Added chart.backdrop, chart.backdrop.alpha and chart.backdrop.size + o [LINE] Shadow color can now be an array of shadow colors. ie. A different one for each line + o [MISC] Added note about installing your own event handlers to misc documentation page + o [MISC] Added RGraph.SetShadow() - a shortcut function for setting the shadow + o [ODO] Added option to not draw the pointer tail + o [ODO] Added chart.needle.type option. It can be "pointer" (default) or "triangle". + o [PROGRESS] Added chart.margin + o [PROGRESS] Added inner tickmarks (chart.tickmarks.inner) + o [PROGRESS] Made examples a bit better + o [SCATTER] Connecting lines can now be stepped (chart.line.stepped) + o [SCATTER] You can now specify the exact X point at which an X label is drawn + o [SCATTER] Added new grid properties: chart.background.grid.autofit + chart.background.grid.autofit.numhlines + chart.background.grid.autofit.numvlines + o [SCATTER] Added chart.title.xaxis + o [SCATTER] Added chart.title.yaxis + o [SCATTER] Added chart.title.xaxis.pos + o [SCATTER] Added chart.title.yaxis.pos + + ++------------------------------------------------------------------------------------------------------------+ +| STABLE RELEASE - 27th March 2010 | ++------------------------------------------------------------------------------------------------------------+ + + + 27th March 2010 + =============== + o [MISC] Just tweaks - nothing major + + 20th March 2010 + =============== + o [MISC] Reverted dark background color for zoom back to the lighter one + o [MODALDIALOG] Reverted the dark background color back to the lighter one + o [METER] Added more feint tickmarks + o [METER] Labels are now angled. This will be an option in the future + o [ODO] Added more feint tickmarks + o [ODO] Labels are now angled. This will be an option in the future + o [ODO] Significant changes to this see the docs page - http://www.rgraph.net/docs/odo.html + + 13th March 2010 + =============== + o [MISC] Removed curvy corner from context menu + o [WEBSITE] Added Google Buzz social networking icon + o [MODALDIALOG] Darkened the background a little. You can set this back if you wish by using the ModalDialog_dialog CSS class + + 6th March 2010 + ============== + o [METER] Documented shadow properties + o [MISC] Added RGraph.getPageWidth() which returns the page width, accommodating browser differences + o [MISC] Added RGraph.getPageHeight() which returns the page height, accommodating browser differences + o [MODALDIALOG] Increased the radius of the corners (ie they're more rounded now) + o [MODALDIALOG] Documented the ModalDialog CSS classes and also added miscellaneous documentation + o [MSIE] Added context menu to the MSIE example + + 27th February 2010 + ================== + o [API] Added information about the coords array. + o [API] Added a little information about dynamically updating your graphs + o [MISC] Zoom in canvas mode now has a dark background option - chart.zoom.background - can be true or false and defaults to true + Note: If you use the full canvas zoom, this will affect you - if you don't like it, you will need to turn it off + o [MISC] Added RGraph_zoomed_canvas CSS class. Also tweaked the default CSS for the two types of zoom + o [MISC] Tweaked the animation example + + 20th February 2010 + ================== + o [DOCS] Added reasonable caching strategy + o [DOCS] Expanded the API docs regarding the data properties + o [LINE] Removed chart.border property. You should use CSS on your canvas element instead. + o [LINE] Added chart.ymin property + o [LINE] Tickmarks are no longer drawn if the tick is outside the Y scale range + o [METER] Added shadow + o [WEBSITE] Removed most tables from the website + o [WEBSITE] Fixed the issue with the front page graphs, Google Chrome and missing text. This was done by NOT using + asynchronous processing. + + 9th February 2010 + ================= + o [PIE] Fixed pie chart sticks with athick white border + o [PIE] Added chart.labels.sticks.color + o [DOCS] Added link anchors to documentation pages, eg: http://www.rgraph.net/docs/bar.html#chart.labels + + 7th February 2010 + ================= + o [BAR] Added ability to specify number of Y labels - 1, 3 or 5 (the default). + o [LINE] Added ability to specify number of Y labels - 1, 3 or 5 (the default). + o [LINE] Added a little missing documentation + o [LINE] Small fix to MSIE arrow style tickmarks + o [MISC] Optimisations to all chart libraries + o [MISC] Added RGraph_zoom_window CSS class - the front page uses it if you want an example + o [SCATTER] Added ability to specify number of Y labels - 1, 3 or 5 (the default). + o [SCATTER] Added a little missing documentation + + 30th January 2010 + ================= + o [BAR] Performance tweaks. + o [DOCS] Made note about using tables for layout and how it can impact negatively on graph speed. + o [DOCS] Documented Pie chart label sticks. + o [LINE] Performance tweaks. + o [MISC] Opera (10.5) now supports the canvas text and shadow APIs + + 23rd January 2010 + ================= + o [LINE] Fix to arrow style tickmarks + o [MISC] Very minor change to tooltips and event handling + o [SCATTER] Added diamond shape tickmarks + + 16th January 2010 + ================= + o [BAR] Documented chart.ylabels + o [CONTEXT] Context menus are now positioned correctly when you specify a DOCTYPE in MSIE + o [LINE] Added and documented chart.ylabels + o [MODAL DIALOG] This is now completely static (when scrolling) in all browsers (Chrome, FF, MSIE, Safari, Opera), (MSIE requires that + you use a doctype. + o [ODO] Improved MSIE support (spurious circles are no longer drawn) + + 9th January 2010 + ================ + o [BAR] Added glass variant + o [BAR] Added sketch variant + o [DOCS] Documented getCanvasXY() function + o [MISC] Links now work in tooltips + o [MISC] Added standard box-shadow: CSS property where necessary + o [MISC] Slight border-radius change to context menu + o [PIE] Added small (optional) label sticks + o [PROGRESS] Added indicator arrows + + 2nd January 2010 + ================ + o [METER] Added this as a new chart type + o [MISC] More optimisations for Meter, Line and Bar charts + o [TRADAR] Added tooltips + o [TRADAR] Added ability to specify offsetx and offsety for labels + + 19th December 2009 + ================== + o [BAR] Added support for MSIE shadows. Shadow blurring is not available though + o [BAR] Fixed dot chart colours not showing correctly in MSIE + o [BIPOLAR] Added support for MSIE shadows. Shadow blurring is not available though + o [FUNNEL] Optimised this chart type a little + o [FUNNEL] Added support for MSIE shadows. Shadow blurring is not available though + o [LINE] Added support for MSIE shadows. Shadow blurring is not available though + o [MISC] The context menu for Safari, Opera and Firefox Mac is now triggered by a double click (left mouse button). + o [MSIE] Tooltips now work (albeit a little unreliably), but this browser is very slow at showing them. Using a doctype will + cause them to be ou of position. + o [PIE] Added support for MSIE shadows. Shadow blurring is not available though + o [PROGRESS] Added support for MSIE shadows. Shadow blurring is not available though + + 12th December 2009 + ================== + o [MSIE] Microsoft Internet Explorer is now supported in a limited fashion. You can see it in action here: + http://www.rgraph.net/docs/msie.html This is not using Google Chrome Frame. + o [TRADAR] Rewrote so that it works with MSIE. This rewrite means that tooltips will be feasible (I'm yet to add them) + o [WEBSITE] Significant reorganisation of website + + 5th December 2009 + ================= + o [API] Added and documented RGraph.Async() function, which can be used to help speed up your pages. There's a page which details it: + http://www.rgraph.net/docs/async.html + o [MISC] Removed text support for Opera. The graphs are still displayed, albeit without text + o [MISC] Changed to object detection in place of specific browser detection for older browsers. This means more + browsers are accounted for. + o [MISC] Added RGraph.getSegment() function, which returns the applicable segment information + (x, y, radius, startAngle, endAngle) + o [SCATTER] Added ability to do Barplots using the Scatter chart. + o [SCATTER] Can now specify the scatter to not display tick marks (be specifying the tickmark as null) + + 28th November 2009 + ================== + o [DOCS] Added RGraph.HideContext() to API documentation. + o [MISC] Simplified logic for showing the context menu. Please test your browser on the website before upgrading as this may + cause regressions. + o [MISC] Fixed slight oddity for zoom which resulted in a small zoom thumbnail + o [MISC] The RGraph website now works with Google Chrome Frame. NB: If you're having a similar problem, ensure the META + tag is in the first 1Kb of the page. + o [MISC] Achieved a degree of Opera compatibility. Please bear in mind that Opera does not yet support the canvas text + or shadow APIs so do not expect to see any shadows on your graphs. Text is simulated however, so the graphs + are still usable in some circumstances however. Also bear in mind that Opera support is buggy. + + 20th November 2009 + ================== + o [MISC] Added new mode for zoom - thumbnail This shows a zoom thumbnail (you must set chart.zoom.mode to thumbnail) instead of + zooming the entire canvas. The line graph on the front page shows an example of it. + o [MISC] Context menu in Mac Firefox is now attached to the left mouse button instead of the right + o [NOTE] Annotations are now persistent in Chrome (dev channel releases at the moment) and Chrome Frame + + 14th November 2009 + ================== + o [ALL] Finished zoom function + o [PIE] Work on linewidth and line color + o [MISC] Changed Safari to use left click for context menu - should elimate the temperamentality + + 8th November 2009 + ================= + o [ALL] Added zoom functionality (This is not finished yet) + o [API] Corrected this regarding graph data + o [MISC] Added RGraph.ClearAnnotations() to API documentation. NB: This function is called when you call RGraph.Clear() + + 31st October 2009 + ================= + o [DOCS] Correct the docs regarding text sizes + o [PIE] Miscellaneous fixes + o [RADAR] Changed to be left aligned + + 25th October 2009 + ================= + o [ALL] Added property: chart.text.font + o [ALL] Added property: chart.text.color + o [ALL] Changed from pixels to points for font sizes (you may need to reduce your font sizes slightly). Default is now 10pt + o [DONUT] Added ability to set key as being in gutter + o [DONUT] Added chart.align for left/center/right aligning the chart + o [PIE] Added chart.align for left/center/right aligning the chart + + 17th October 2009 + ================= + o [BAR] Added new option: chart.axis.color + o [Bipolar] Added new option: chart.axis.color + o [DOCS] Automated generation of API (properties) documentation + o [HBAR] Added new option: chart.axis.color + o [LINE] Added new option: chart.noxaxis + o [LINE] Added new option: chart.axis.color + o [LINE] Reduced default X/Y shadow offset + o [LINE] Added new option: chart.noendtick - useful for when you're generating line charts with Y axes on both sides + o [MISC] Changed "Combining..." page to illustrate combining two line charts + o [MISC] Added XML documentation + o [MISC] Added performance note about combining libraries + o [SCATTER] Added new option: chart.axis.color + + 10th October 2009 + ================= + o [BAR] Added chart.background.grid.hlines, chart.background.grid.chart.background.grid.vlines and chart.background.grid.border + o [BAR] Changed chart.labels.abovebar to chart.labels.above + o [BAR] Added chart.labels.above to stacked bar charts + o [BIPOLAR] Fixed using chart.xmax + o [BIPOLAR] Added chart.scale.decimals + o [HBAR] Added chart.background.grid.hlines, chart.background.grid.chart.background.grid.vlines and chart.background.grid.border + o [HBAR] Added chart.labels.above. Not technically "above" the bar (not at all), but it's so named for API compatibility + o [HBAR] Added chart.labels.above to stacked chart + o [LINE] Added chart.background.grid.hlines, chart.background.grid.chart.background.grid.vlines and chart.background.grid.border + o [PIE] Miscellaeous work + o [SCATTER] Added chart.background.grid.hlines, chart.background.grid.chart.background.grid.vlines and chart.background.grid.border + o [WEBSITE] Added sharing buttons + + 3rd October 2009 + ================ + o [ALL] Charts now clean up events if tooltips are not installed. This means that if tooltips are not being used + the onmousemove/onclick events (depending on the graph library) are reset to null. + o [BAR] 3D effect now works with background grid and bars + o [DOCS] Added API documentation (replaces working.html) + o [MISC] Changed various graphs default background bar colors to white + O [MISC] Removed array_range() function - unused + o [LINE] More (general) work + o [LINE] chart.fillstyle can now be an array as well as a string + o [LINE] Added 3D variant to line chart. + o [MISC] Added minified library archive + + 19th September 2009 + =================== + o [ALL] Added new option - chart.title.color - to all graph types (except the LED) + o [LINE] Slight modification to filled line charts and the (stroke) colour. + o [LINE] Changed stepped line chart so last vertical line is not drawn + o [LINE] Changed the look (for the better) of filled line charts and thick lines + o [LINE] Added option - chart.axesontop - useful in a minority of cases; causes the axes to be + redrawn after the graph + o [LINE] Added "chart.filled.range" option. Used to compare the range/difference between two sets of data. + o [MISC] Fixed negative horizontal bars + o [LINE] Fixed problem with null arguments + o [LINE] Filled line charts now work a little better with negative values + o [PROGRESS] Added chart.tickmarks.color + o [PROGRESS] Added chart.text.color + + 6th September 2009 + ================== + o [ALL] Fixed libraries to work with Prototype.js + o [ALL] Added chart.title.vpos allowing you override and specify the position of the title. This should be a + decimal from 0 to 1. By default it's not used + o [BAR] Can now have Y axis labels in right hand gutter + o [LINE] Can now have Y axis labels in right hand gutter + o [COMMON] Fixed scale generation bug when maximum value is zero (ie all of your values are zero) + + 22nd August 2009 + ================ + o [MISC] Optimisations on various graph libraries + o [MISC] Very minor albeit better HTML5 compliance + o [LINE] You can now specify the Y axis position - left (default) or right + + 8th August 2009 + =============== + o [BAR] Added 3D effect to regular, grouped and stacked charts + o [GANTT] Can now specify background grid width + o [LED] The text is now stripped of right-most whitespace + + 25th July 2009 + ============== + o [MISC] Stop using $() function for better compatibility with outside libraries + o [SCATTER] Support supplying multiple datasets as one big array instead of multiple arrays + o [ALL] Changed all graph types to "new RGraph.xxx()" format + + 3rd July 2009 + ============= + o [DOCS] Misc updates + o [DOCS] Fixed docs regarding default gutter size + o [LINE] Handle null values better + o [LINE] Documented optional different fill colour + o [MISC] Added caching enhancements + o [MISC] Slight change to FixEventObject() so offsetX and offsetY are available in Firefox + o [SCATTER] Allow multiple datasets. Effect is only visible when lines are shown + o [SCATTER] Key can now be shown for multiple lines + + 20th June 2009 + ============== + o [ALL] Code optimisations + o [ALL] Annotations are now persistent in browsers that support HTML5 DOM storage (currently Firefox 3.5 and Safari 4) + o [BAR] Added ability to specify labels above bars on single and grouped bar charts + o [SCATTER] Added ability to show connecting line + + 6th June 2009 + ============= + o [ALL] On graphs that support tooltips, you can now have context menus at the same time as tooltips + o [MISC] Fixes to hiding palette in Chrome + o [MISC] Fixed a palette resizing bug + o [MISC] Changed the number of frames for expand and fade tooltip effects from 5 to 10 - looks a little smoother + o [MISC] Fixed a minor scale bug + o [MISC] Changed name of ShowPalette() function to RGraph.Showpalette() + o [PIE] Fixed minor pie chart bugs with mouse cursor + + 23rd May 2009 + ============= + o [ALL] Documented context menu + o [ALL] Added annotations - useful to highlight interactively, and added example to front page line chart + o [BAR] Added pyramid chart variant + o [BAR] Added arrow chart variant + o [BAR] Added crosshairs + o [FUNNEL] Added tooltips + o [LINE] Added crosshairs + o [LINE] Can now have a context menu at the same time as tooltips + o [MISC] Added annotations mini colour palette + o [SCATTER] Added crosshairs + o [SCATTER] Fixed bug where pre/post units were not being shown + o [SCATTER] Can now have a context menu at the same time as tooltips + + 9th May 2009 + ============ + o [BAR] Can now better control the shadow + o [BAR] Now ymax is exactly that which is used + o [BAR] You can now control the number of decimals that are used + o [BIPOLAR] Added shadow + o [HBAR] Can now better control the shadow + o [HBAR] Added tooltipcapability + o [PIE] Can now better control the shadow + o [LINE] Can now better control the shadow + o [LINE] Reversed order of arguments to the constructor - ie the data - so they are uniform with things like labels and tooltips + o [LINE] Can now have a fill colour that's different to the line colour (see the last example on the lines example page) + o [LINE] Added arrow style tickmarks (filled and not) - look best with a linewidth of 1 or 2 + o [LINE] Number of labels is now independent of number of datapoints, as are number of X tickmarks + The second to last two line chart examples show this in action + o [LINE] Added an interesting example showing off the new independence of labels, datapoints and tickmarks. The ninth + line example (the sin/cos/tan curves) has 361 datapoints but only 5 labels - 361 labels would be a bit much. + o [LINE] Line chart no longer draws in the gutter (see this in action by looking at the above tangent curve example) + o [PROGRESS] Brought shadow into line with the rest of the graphs + o [PROGRESS] Tidied this up a little + o [PROGRESS] Added tooltip capability + o [RADAR] Added tooltip capability + o [DOCS] Added small note about canvas and accessibility + o [MISC] Fixed a few HTML warnings + o [MISC] Cleaned up CSS warnings + o [MISC] Updated license + o [MISC] Slight tweaks to context menu: Specifying a null callback now means that that menu item + will not trigger the rollover effect + o [MISC] Fixed a scale bug where the top value is 5.xxx + o [WEBSITE] Made the line graph and pie chart on the front page a little more interactive + o [WEBSITE] Added a funnel chart to the front page + o [FUNNEL] Added horizontal alignment for labels + + 25th April 1009 + =============== + o [MISC] Changed to .zip format for archive instead of .tar.gz - easier to work with + o [MISC] Fixed issue with "expand" type tooltips & timers + o [MISC] Unified default gutter setting (25px) + o [MISC] Made shadows all point the same way across all graphs + o [MISC] Fixed horizontal background bars so that specifying a value greater than the ymax (or less than the negative ymax) + uses the ymax value instead + o [MISC] ModalDialog fixes for width and height settings on various browsers and DOM modes + o [MISC] Scale is now generated more accurately for *really* tiny values + o [LINE] Performance enhancements regarding scale generation + + 11th April 2009 + =============== + o [MISC] Slight aleration to improve "grow" option of tooltips. Instead of starting at the top and growing downwards, it now + starts in the center and grows outward in all directions + o [MISC] Changed "grow" to "expand" for tooltips + o [ODO] Documented ability to turn off the pointer end + o [DONUT] Added ring-in-ring effect, enabling multiple datasets + o [DONUT] Added option to use in-graph key instead of labels + o [LINE] Changed "tick" style tickmarks to "halftick". "tick" now gives a fullheight tickmark, and also added "endtick" + which gives a full height tick mark at the ends of the lines + o [MISC] Added doctype to all pages and fixed modaldialog accordingly + o [MISC] CSS and DTD fixes across the site + o [MISC] ModalDialog fixes + o [MISC] Add type attribute back to SCRIPT tags - needed for DTD compliance + o [HBAR] Added new graph type - Horizontal Bar chart + + 28th March 2009 + =============== + o [BAR] Added dot chart capability + o [BAR] When mouse is over a hotspot, cursor now changes + o [PIE] When mouse is over a hotspot, cursor now changes + o [LINE] When mouse is over a hotspot, cursor now changes + o [GANTT] When mouse is over a hotspot, cursor now changes + o [DONUT] When mouse is over a hotspot, cursor now changes + o [SCATTER] When mouse is over a hotspot, cursor now changes + o [MISC] Added new effect for tooltips. So now you can have "fade" (default) or "grow" + o [MISC] Added drop shadow to context menu + o [MISC] Resolved Chrome color, shadow and gradient bugs + o [DOCS] Added short section about suggested library layout + o [WEBSITE] Always now show two download links + + 14th March 2009 + =============== + o o------------------------------------------------------------------------------------------------------------------o + | IMPORTANT ! | + | Every single one of the property names has been changed to be a little more unified. The new format is now | + | "chart.xxx" where xxx is the actual name. Some of the names have been changed completely, eg. "chart.text.size", | + | which was formerly "textheight", whilst others only marginally. This was necessary to bring some semblance of | + | uniformity to the RGraph properties across all of the libraries, make it look a bit more "proffessional" and | + | provide plenty of scope for future properties. | + | | + | You should also note that as of this release (14th March 2009) that RGraph has been changed to use the canvas | + | text and shadow APIs. This may mean you needing to upgrade your browser if you want to use the latest version. | + | At the time of writing, this meant Firefox 3.1b2, Safari 4 and Chrome 2. If you don't wish to upgrade your | + | browser, or need Opera support, then you will need to remain on the 28th February 2009 version. | + o------------------------------------------------------------------------------------------------------------------o + o [FUNNEL] Added key ability to Funnel chart + o [FUNNEL] Added shadow for key + o [BAR] Added shadow for key + o [LINE] Added shadow for key + o [RADAR] Added shadow for key + o [TRADAR] Added shadow for key + o [RADAR] Added tick marks to the axes + o [PIE] Added border option. + o [BAR] Added "in graph" static labels, useful for highlighting things + o [LINE] Added "in graph" static labels, useful for highlighting things + o [MISC] Provided easy access to minified copies of the libraries + o [ODO] Added inner and outer shadows + o [BAR] Changed to canvas text & shadow API + o [BIPOLAR] Changed to canvas text & shadow API + o [DONUT] Changed to canvas text & shadow API + o [FUNNEL] Changed to canvas text & shadow API + o [GANTT] Changed to canvas text & shadow API + o [LED] Changed to canvas text & shadow API + o [LINE] Changed to canvas text & shadow API + o [ODO] Changed to canvas text & shadow API + o [PIE] Changed to canvas text & shadow API + o [PROGRESS] Changed to canvas text & shadow API + o [radar] Changed to canvas text & shadow API + o [SCATTER] Changed to canvas text & shadow API + o [TRADAR] Changed to canvas text & shadow API + + 28th February 2009 + ================== + o [MISC] Added performance information about onload + o [BAR] Can now specify Y axis units (both before and after the number) + o [LINE] Can now specify Y axis units (both before and after the number) + o [SCATTER] Can now specify Y axis units (both before and after the number) + o [PROGRESS] Can now specify Y axis units (both before and after the number) + o [BIPOLAR] Can now specify X axis units (both before and after the number) + o [BAR] Fixed scale bug + o [MISC] Added UK pound sign to font set + o [FUNNEL] Added new chart - Funnel chart. Can be used to represent sales processes + o [FUNNEL] Made funnel use canvas shadow API + o [MISC] Changed minification script to work "in-place" NOTE + o [PROGRESS] Made progress use canvas shadow API + o [MISC] Tested RGraph on Safari 4.0 - appears to be fine + o [LINE] Added ability to specify horizontal coloured bars + o [BAR] Added ability to specify horizontal coloured bars + o [SCATTER] Added ability to specify horizontal coloured bars + + 14th February 2009 + ================== + o [PIE] Added tooltips + updated docs to correspond + o [WEBSITE] Added tooltips to Pie on front page + o [LED] Added "counter-like" basic LED grid + o [DONUT] Made donut a proxy to pie chart + o [DONUT] Added tooltips + o [MISC] Moved CSS styles to scripts. You no longer need to define CSS styles unless you wish to override something + o [PIE] Made tooltips for pie use 3D effect. This is optional - it can be the traditional 2D or the new 3D effect + o [SCATTER] Can now have the X axis in the center + o [SCATTER] Added tooltip facility + o [MISC] Consolidated invoice handling + o [MISC] Minor fix to DOM structure of context menu + o [LINE] Can now have combined Line and Bar chart so you can overlay Line graphs on top of Bar charts + o [BAR] Can now have combined Line and Bar chart so you can overlay Line graphs on top of Bar charts + o [MISC] Moved showcase examples to separate pages - showcase.html was doing too much and becoming far too slow + + 31st January 2009 + ================= + o [ODO] Added .beginPath() when starting to draw the Odo - needed for animation + o [MISC] Rewrote ModalDialog + o [GANTT] Corrected gantt chart docs + o [MISC] Context menu is now always the correct width + o [BAR] Added ability to specify X axis labels to be drawn at eith 45 or 90 degrees + o [LINE] Added ability to specify X axis labels to be drawn at eith 45 or 90 degrees + o [SCATTER] Added ability to specify X axis labels to be drawn at eith 45 or 90 degrees + o [BIPOLAR] Added tooltips + o [DOCS] Re-jigged (ever so slightly) docs index layout + o [DOCS] Added info on working with RGraph objects in conjunction with accessing the underlying + canvas/context objects + o [DONUT] Made sure the above was valid + o [PROGRESS] Made sure the above was valid + + 17th January 2009 + ================= + o [MISC] Added licensing FAQ page including invoice mailer + o [MISC] Moved CSS to css subfolder + o [MISC] Renamed modaldialog and removed external fade library + o [MISC] Added example of how to integrate RGraph with external libraries using the ModalDialog + o [MISC] ymax property is no longer deprecated - it can be used to stop the scale changing when animating your graphs. + o [MISC] Added documentation page about animation + o [SCATTER] Added square tick type + o [PIE] Fixed last segments line width + o [MISC] Updated copyright notice + o [DOCS] Added basic example for implementation guidance + o [MISC] Changed test page to use tables instead of divs. This will make it more apparent if something breaks + in the RGraph.getMouseXY() function. + o [ODO] Changed to use 10 labels instead of 8 - should make for nicer scale values. + o [ODO] Made tick marks tie into labels more + + 4th January 2009 + ================ + o [DOCS] Added note about pre-caching + o [SCATTER] Added color example to scatter chart + o [MISC] Fixed tooltips appearing in the wrong place + o [MISC] Removed tooltip shadow layer. Shadows are accomodated for in CSS3 + o [DOCS] CSS class documentation + o [MISC] More work on things working with html5 doctype + o [MISC] Removed shadow layer from tooltips. This will be accomodated in CSS3, and is already by some browsers (MSIE (!), Chrome, + Safari, and the forthcoming FF 3.1) + o [MISC] Ditto for context menus + o [MISC] Changed RGraph.getMouseXY() to be more accomodating + o [WEBSITE] Added favicon.png + o [WEBSITE] Added example of pie chart to front page + o [WEBSITE] Changed front page to use tables instead of divs to tell if tooltips keep working + o [MISC] Overhauled RGraph.getMouseXY() so that it works in spite of being nested in tables. It also works + if you position the canvas absolutely and only specify one of the top or left. Wonderbar! + o [SCATTER] Added ability to specify the color of the tick ie:[x, y, color] It's optional. ** Could do with a key ** + o [DOCS] Added color information + o [DOCS] Added context menu information + o [MISC] Made context menus more XP style + o [GANTT] Customised the example more, showing the completage indicators. + o [GANTT] Events and vertical bars are now defined in the usual way, by using the Set() method + o ]MISC] Added __object__ property to all graph objects + o [MISC] Unified text size at 10 points (and 2 greater for titles). + o [MISC] Added context menus to all graph types + o [MISC] Fixed tooltip widths on front page. And siving in general in Opera + + 20th December 2008 + ================== + o [MISC] Converted all graphs to use dollar ($) function in place of document.getElementById("...") + o [TRADAR] Now defaults to drawing the key out of graph + o [LINE] Now labels are turned off if there's fewer labels than data points (every line) + o [MISC] Added better smaller scales - now goes down to 0.0005 + o [DOCS] Added more details on tooltips and positioning + o [LINE] Added gridwidth property + o [BAR] Added gridwidth property + o [MISC] Removed rotating text example (it's still in the archive - it's just not linked) + o [MISC] More work on scales when decimal values are involved, plus graphs now use thousand seperators to aid readability + o [MISC] More work on tooltips and their positioning. + o [MISC] Added "keyposition" option, which can be either "gutter" or "graph" and determines where the key is drawn + o [MISC] Unified all graphs to use the same "textheight" property for text. + o [MISC] All titles are now drawn two pixels larger than the "textheight" property + o [LINE] Key can now be placed above the actual graph area if desired + o [BAR] Key can now be placed above the actual graph area if desired + o [MISC] Fixes to number formatting, including when there multiple graphs on a page + o [BAR] Changed summary line to default to off + o [BIPOLAR] Scale values now contain thousand separators + o [SCATTER] Scale values now contain thousand separators + o [LINE] Scale values now contain thousand separators + o [BAR] Scale values now contain thousand separators + o [MISC] Updated issues.html with details of the smallest scales + o [SCATTER] Deprecated the ymax property. RGraph.getScale() is now good enough (xMax is bipolar chart equivalent) + o [LINE] Deprecated the ymax property. RGraph.getScale() is now good enough + o [BIPOLAR] Deprecated the xmax property. RGraph.getScale() is now good enough + o [BAR] Deprecated the ymax property. RGraph.getScale() is now good enough + o [MISC] Made RGraph.getScale() return the whole scale (all five values), not just the top value + This means better quality scales can be produced. + o [MISC] Made note about positioning in docs on issues page + o [ODO] Work on Small scale values + o [BIPOLAR] Work on Small scale values + o [BAR] Work on Small scale values + o [LINE] Work on Small scale values + o [MISC] Added tooltip fade in effect using CSS3 opacity + o [BAR] Added tooltip functionality to stacked bar chart + o [BAR] Added tooltip functionality to grouped bar chart + o [MISC] Added gradient to front page graphs + o [TRADAR] Added gradient to bipolar on test page + o [TRADAR] Re-added traditional radar chart. It doesn't work in Opera 9.x, only Opera 10+. Documentation for this also fine tuned + o [MISC] Tidied up RGraph.common.js + o [MISC] Removed drawTextAngle() - RGraph.Text() does this + o [MISC] Added a bar chart with centre X axis to example page + o [GANTT] Fixed Gantt chart title text placement + o [GANTT] Added title text size property + o [WEBSITE] Changed colour of example on website + o [RADAR] Changed key to be the same as the bar/line/tradar + o [DOCS] Lots of link updates + + 5th December 2008 + ================= + o [LINE] Made keys and lines (ie stacked/filled) totally correspond. + o [BAR] Stopped bar chart tooltips redrawing the axes. Not entirely sure why it's doing this, but it seems fine without it. + o [DOCS] Bundled license document with archive + o [DOCS] Documentation and example updates. + o [MISC] Changed index.php to index.html Not earth shattering, but should make it clearer for people where to start, + and also makes the downloaded index.html styled as it should be. + o [WEBSITE] Added Cache-Control: Header + o [WEBSITE] Added link to support group on Google more obvious + o [DOCS] Added list of common issues + o [MISC] Added header into files that didn't have it + o [MISC] Removed CanvasText.enable() - unneccessary + o [ODO] Shortened the Odos pointer + + 28th November 2008 + ================== + o [MISC] Got rid of HTML5 doctypes - they seem to be interfering with tooltip positioning. + If you don't use tooltips, you'll therefore be fine. + o [ODO] Better needle. I think. + o [BAR] Keys for charts are now specified in the same order as the pertaining datasets + o [LINE] Keys for charts are now specified in the same order as the pertaining datasets + o [MISC] Added CSS3 shadows to tooltips + o [GANTT] Fixed bug in Gantt chart textsize property + o [LINE] Finally made shadows 100% accurate (ie tickmarks now have shadows too), including stepped line + o [WEBSITE] Added tooltips to line chart on front page + o [MISC] Fixed release script (check) + o [LINE] Added keys to line & bar chart + o [BAR] Added keys to line & bar chart + o [MISC] o-----------------------------------------------------------------------------------------------------o + | Use unified better getters/setters for all charts. This is a MAJOR update, since it affects all the | + | charts in a fundamental way. For the better. Any update should be done cautiously. But since | + | RGraph is beta, all updates should be done that way. Judging by the RGraph test page though, | + | everything seems fine. | + o-----------------------------------------------------------------------------------------------------o + + 15th November 2008 + ------------------ + o [BAR] Removed animation + o [LINE] Documented stepped line chart + o [LINE] Fixed tick marks + o [LINE] Added ability to specify line chart as being stepped + o [MISC] Documented default values. + o [GANTT] Added gantt chart + o [PROGRESS] Corrected name of Progressbar + o [LINE] Moved the background drawing to RGraph.common.js + o [SCATTER] Moved the background drawing to RGraph.common.js + o [MISC] Tooltips now move to the left of the cursor when it's too far right + o [MISC] Changed print_r() to pr() - less to type + o [MISC] Added GetDays() function for Gantt chart + o [GANT] Added it + o [MISC] Added an RGraph.print_r() method for easier debugging + o [MISC] Added a registry object to the common library to resolve scoping issues and so we don't need to use globals. Globals suck. + o [SCATTER] Added a plus tick style to the scatter chart - added a demo too + o [SCATTER] Fixed a bug in the Scatter graphs background drawing + o [BAR] Moved bar charts DrawBackground() into the RGraph.background class. Should make reuse far easier. + o [BAR] "backgroundGrid" property changed to "grid" + o [MISC] Added a minification script. This script doesn't reduce the scripts to the bare minimum. But it can take 50% off the size (!). + o [LINE] Can now specify colour of shadows for line and bar graphs + o [BAR] Can now specify colour of shadows for line and bar graphs + o [LINE] line chart now has real shadows and so they can be used for lines of any thickness + o [LINE] can now specify shadow offset + o [SCATTER] Fixed background bar boundaries + o [SCATTER] Added plus cross type + o [MISC] Moved background drawing to common library + o [WEBSITE] sitemap.xml Now has correct <lastmod> date which changes correctly when a release is performed CHECK + o [MISC] Tooltip nows store the text in __text__ variable on the tooltip object (.innerHTML changes the HTML when it's set) + + 1st November 2008 + ------------------ + o [BAR] Last bar chart example now uses a gradient + o [MISC] Changed hyphens to be slightly shorter + o [WEBSITE] Changed sitemap to use an update frequency of weekly. Last modified is now updated when a release is performed + o [BAR] Can now specify the grid size on the bar chart + o [LINE] Setting propeties can now be any case, upper or lower + o [MISC] Added RGraph.print_r() function + o [LINE] TickSize now actually has an effect + o [LINE] Added tooltips to line chart + o [WEBSITE] Moved support forum to Google group + o [MISC] Added object registration (for redrawing) + o [BAR] Removed margin from being accounted for in height calculation + o [LINE] Made tickmarks more coherent + o [BAR] Bar chart now uses canvas ID in some, but not all, error messages + o [LINE] Added small drop shadow to line chart + o [WEBSITE] Added example graphs to front page + o [BAR] Added tooltips to line chart + o [WEBSITE] Added more performance related information + o [PIE] Added drop shadow + + 25th October 2008 + ----------------- + o [DOCS[ Added integration section + o [RADAR] Added title to radar + o [RADAR] Added textStyle to radar + o [PIE] Made one of the pie charts use a gradient + o [PROGRESS] Added shadows + o [PROGRESS] Added title + o [ODO] Converted plain colour to radial gradient + o [PIE] Added gutter and title + o [DONUT] Added gutter and title + o [MISC] Fixed comma issue with rendering text + o [MISC] Added something to text bounding box illustrating exactly where the point specified is + o [BIPOLAR] Bipolar middle bit is now 60px wide instead of 50 + o [BAR] Fixed shadow bugettee in Safari, Chrome, Opera + o [ODO] Documented and vastly improved. Made it use a gutter now allowind for a title (implemented) + o [MISC] Added common function, DrawTitle() + o [MISC] Added a Javascript version of the PHP function range() + o [MISC] Added ability to specify a title to the bar chart, line graph and scatter graph. + o [MISC] Changed directory layout slightly + o [MISC] Forum is now ecluded from the tar + o [MISC] Much improved scale auto-generation + o [DOCS] Added code samples to docs pages + o [DOCS] Added section on the front page about performance + o [SCATTER] Many improvements to the scatter graph + o [SCATTER] Much better auto scale generation + o [SCATTER] Made scatter use RGraph common library for text + o [RADAR] Converted to use common library for text + o [LINE] Much improved scale auto-generation + o [LINE] Changed to rounded line ends - not very noticable though + o [LINE] Converted labels to be drawn by the RGraph library + o [BAR] Added optional shadow effect + o [BAR] Removed ability to have X axis at the top. It served no real purpose and only served to complicate the code + o [BAR] Added animation + o [BAR] Much improved scale auto-generation + o [BAR] Converted text functions to use RGraph common library + o [BAR] Can now specify a title for the bar chart + o [BAR] Fixed a bug for Chrome + o [BAR] Fixed minor bugs in bar chart (background bars) + o [BAR] Added grouping property, which defaults to stacked, but can also be grouped, producing what you would + expect (unless you're expecting a chicken. + o [BAR] Added a few warnings concerning bad combinations of axis positions + o [ODO] Added more labels, now at 8 instead of 4 + + 24th September 2008 + ------------------- + o [WEBSITE] Added RSS feed to forum + o [DOCS] Added more documentation + o [ALL] Unified (sort of) the error messages + o [ODO] Added odometer + o [BIPOLAR] Added a bottom gutter for scale to go in + o [BIPOLAR] Added bottom text labels + o [PIE] Made pie chart work without translating + o [TRADAR] Added real radar chart. + o [BAR] Bar chart can now have the X axis in the center, so it now able to represent negative values + o [LINE] Allowed multiple lines + o [LINE] Line chart can now have the X axis in the center, so it now able to represent negative values + o [LINE] Fixed bug in line chart that meant if it was filled the filled line was stopping too short + o [LINE] Made it more obvious (I think) for specifying data when using multiple data sets (ie multiple lines) + + 4th September 2008 + ------------------ + o Various additions including labels on all the graphs
\ No newline at end of file diff --git a/schall/static/RGraph/docs/adjusting.html b/schall/static/RGraph/docs/adjusting.html new file mode 100644 index 0000000..a1876fa --- /dev/null +++ b/schall/static/RGraph/docs/adjusting.html @@ -0,0 +1,141 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - Adjusting your charts interactively</title> + + <meta name="keywords" content="rgraph html5 canvas charts adjusting docs " /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Documentation about adjusting your charts interactively" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js" ></script> + + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> +</head> + +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + <div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="index.html">Documentation</a> + > + Adjusting charts interactively + </div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - Adjusting your charts interactively</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + <div style="float: left"></div> + <p> + Since 24th May 2010 you have had the ability to adjust your so if you want to see the charts interactively. Currently the Bar chart, Line chart, + Progress Bar, Rose chart and the Radar have this facility. Some chart types use multiple event handlers and as such + are unlikely to work well with other dynamic features. The Line chart is an example of this, and whilst it does work + with the context menu (and so the full canvas zoom), it is unlikely to work with other dynamic features. + </p> + + + <p> + At the current time this feature on the Bar and Line charts doesn't work with X axis in the center. + </p> + + + <p> + If your intention is to make some sort of interactive console, new HTML5 input types may also be of interest (for example the new <i>range</i> input type + which gives you a "slider bar"). Eg (Chrome/Safari/Opera): + </p> + + <p style="text-align: center"> + <input type="range" min="0" max="100" value="76" onchange="document.getElementById('range_result').value = this.value"/> + <input type="text" id="range_result" size="3" value="76" /> + </p> + + <h4>Note</h4> + + <p> + Since interactivly adjusting a chart involves completely redrawing it, having a lot of them on one page can cause + slower updates. For this reason each example chart is on its own page: + </p> + + <ul> + <li><a href="adjusting_bar.html">Bar chart</a></li> + <li><a href="adjusting_gantt.html">Gantt chart</a></li> + <li><a href="adjusting_hprogress.html">HProgress bar</a></li> + <li><a href="adjusting_line.html">Line chart</a></li> + <li><a href="adjusting_radar.html">Radar chart</a></li> + <li><a href="adjusting_rose.html">Rose chart</a></li> + <li><a href="adjusting_thermometer.html">Thermometer chart</a></li> + <li><a href="adjusting_vprogress.html">VProgress bar</a></li> + </ul> + + <h4>DOM2 event handlers</h4> + + <p> + In January 2011 all adjusting was converted to DOM2 event handling. This makes adjusting work much better with other + dynamic features. + </p> + </div> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/docs/adjusting_bar.html b/schall/static/RGraph/docs/adjusting_bar.html new file mode 100644 index 0000000..217ddf3 --- /dev/null +++ b/schall/static/RGraph/docs/adjusting_bar.html @@ -0,0 +1,153 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - Adjusting your charts interactively - bar chart</title> + + <meta name="keywords" content="rgraph html5 canvas charts adjusting docs " /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Documentation about adjusting your charts - bar chart" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js" ></script> + <script src="../libraries/RGraph.common.adjusting.js" ></script> + <script src="../libraries/RGraph.bar.js" ></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + + <script> + window.onload = function (e) + { + var bar = new RGraph.Bar('myCanvas', [512,653,512,533,674,453,458,741,496]); + bar.Set('chart.colors', ['blue', 'pink']); + bar.Set('chart.labels.above', true); + bar.Set('chart.shadow', true); + bar.Set('chart.shadow.color', '#aaa'); + bar.Set('chart.strokestyle', 'rgba(0,0,0,0)'); + bar.Set('chart.adjustable', true); + bar.Set('chart.labels', ['2000', '2001', '2002', '2003', '2004', '2005', '2006', '2007', '2008']); + bar.Set('chart.gutter.left', 45); + bar.Set('chart.title', 'An adjustable bar chart'); + bar.Draw(); + + function myFunc (obj) + { + var conf = RGraph.Registry.Get('chart.adjusting.bar.myCanvas'); + + p(conf); + } + RGraph.AddCustomEventListener(bar, 'onadjustend', myFunc); + } + </script> + + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> +</head> + +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + <div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="index.html">Documentation</a> + > + <a href="adjusting.html">Adjusting charts interactively</a> + > + Bar chart + </div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - Adjusting your charts interactively - Bar chart</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + <p> + The Bar chart can be adjusted by clicking on the chart, in line with the bar that you want to adjust.When adjusting is finished + the <i>onadjustend</i> event fires. As you will see in the example you can find the index of the relevant bar in the RGraph registry - + <i>RGraph.Registry.Get('chart.adjusting.bar.myCanvas')</i> (replace <i>myCanvas</i> with the ID of your canvas). + </p> + <canvas id="myCanvas" width="1000" height="250">[No canvas support]</canvas> + + <pre class="code"> +<script> + window.onload = function (e) + { + var bar = new RGraph.Bar('myCanvas', [512,653,512,533,674,453,458,741,496]); + bar.Set('chart.colors', ['blue', 'pink']); + bar.Set('chart.labels.above', true); + bar.Set('chart.shadow', true); + bar.Set('chart.shadow.color', '#aaa'); + bar.Set('chart.strokestyle', 'rgba(0,0,0,0)'); + bar.Set('chart.adjustable', true); + bar.Set('chart.labels', ['2000', '2001', '2002', '2003', '2004', '2005', '2006', '2007', '2008']); + bar.Draw(); + + function myFunc (obj) + { + var conf = RGraph.Registry.Get('chart.adjusting.bar.myCanvas'); + + p(conf); + } + RGraph.AddCustomEventListener(bar, 'onadjustend', myFunc); + } +</script> +</pre> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/docs/adjusting_gantt.html b/schall/static/RGraph/docs/adjusting_gantt.html new file mode 100644 index 0000000..2d19f20 --- /dev/null +++ b/schall/static/RGraph/docs/adjusting_gantt.html @@ -0,0 +1,228 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - Adjusting your charts interactively - Gantt chart</title> + + <meta name="keywords" content="rgraph html5 canvas chart adjusting docs " /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Documentation about adjusting your charts - Gantt chart" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js" ></script> + <script src="../libraries/RGraph.common.adjusting.js" ></script> + <script src="../libraries/RGraph.gantt.js" ></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + + <script> + window.onload = function (e) + { + gantt_events = [ + [31, 28, null, 'Richard'], + [0, 120, null, 'Bob'], + [84, 16, null, 'Fred'], + [35, 45, null, 'Charles'], + [0, 35, null, 'Kev'], + [0, 28, null, 'Wayne'], + [31, 28, null, 'John'] + ]; + var gantt = new RGraph.Gantt('myc'); + gantt.Set('chart.xmax', 120); + gantt.Set('chart.events', gantt_events); + gantt.Set('chart.defaultcolor', 'rgba(255,0,0,0.5)'); + gantt.Set('chart.labels', ['January', 'February', 'March', 'April']); + //gantt.Set('chart.borders', false); + gantt.Set('chart.title', 'An adjustable Gantt chart'); + gantt.Set('chart.adjustable', true); + gantt.Set('chart.vbars', [ + [0, 31, 'rgba(230,230,230,0.8)'], + [59, 31, 'rgba(230,230,230,0.8)'] + ]); + gantt.Draw(); + + /** + * This is how to get notified once adjusting has ended + */ + RGraph.AddCustomEventListener(gantt, 'onadjustend',function (obj) + { + var events = obj.Get('chart.events'); + var conf = RGraph.Registry.Get('chart.adjusting.gantt'); + var idx = conf['index']; + + document.getElementById("eventID").value = idx; + document.getElementById("eventStart").value = events[idx][0]; + document.getElementById("eventDuration").value = events[idx][1]; + }); + + /** + * This is how to get notified during the adjusting + */ + RGraph.AddCustomEventListener(gantt, 'onadjust',function (obj) + { + var events = obj.Get('chart.events'); + var conf = RGraph.Registry.Get('chart.adjusting.gantt'); + var idx = conf[0]; + + document.getElementById("eventID").value = conf['index']; + document.getElementById("eventStart").value = events[conf['index']][0]; + document.getElementById("eventDuration").value = events[conf['index']][1]; + }); + } + </script> + + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> +</head> + +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + <div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="index.html">Documentation</a> + > + <a href="adjusting.html">Adjusting charts interactively</a> + > + Gantt chart + </div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - Adjusting your charts interactively - Gantt chart</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + <p> + The Gantt chart can be adjusted by dragging the bars left or right, or the events can be resized if you place the cursor at the + right edge of the event. To get the details of the bar being dragged you can use the + <i>onadjustend</i> event, and in that you can look at the RGraph registry - <i>RGraph.Registry.Get('chart.adjusting.gantt')</i> The + returned array consists of: + + <ul> + <li>The numerical index of the event being adjusted (corresponding to the chart.events array that you set).</li> + <li>The chart object</li> + <li>The starting X position of the bar (before the chart was adjusted)</li> + <li>The starting Y position of the bar (before the chart was adjusted)</li> + <li>The original numerical value (in relation to your chart.xmax) that the bar started at</li> + </ul> + </p> + + <p> + When adjusting is complete the <i>chart.events</i> array is updated. So you can use the numerical index that you find in + the registry (as above) with the <i>chart.events</i> array to get up-to-date event information. + </p> + + <p> + <b>Note:</b> + The Gantt chart uses console.log() to send notifications. Press CTRL+SHIFT+J in Chrome to see the console, or use Firebug in + Firefox. Other browsers will vary. + </p> + + <canvas id="myc" width="1000" height="250">[No canvas support]</canvas> + Event ID: <input type="text" id="eventID" readonly /> + Event start: <input type="text" id="eventStart" readonly /> + Event duration: <input type="text" id="eventDuration" readonly /> + + <pre class="code"> +<script> + window.onload = function (e) + { + gantt_events = [ + [31, 28, null, 'Richard'], + [0, 120, null, 'Bob'], + [84, 16, null, 'Fred'], + [35, 45, null, 'Charles'], + [0, 35, null, 'Kev'], + ]; + var gantt = new RGraph.Gantt('myc'); + gantt.Set('chart.xmax', 120); + gantt.Set('chart.events', gantt_events); + gantt.Set('chart.defaultcolor', '#0c0'); + gantt.Set('chart.labels', ['January', 'February', 'March', 'April']); + gantt.Set('chart.borders', false); + gantt.Set('chart.adjustable', true); + gantt.Draw(); + + /** + * This is how to get notified once adjusting has ended + */ + RGraph.AddCustomEventListener(gantt, 'onadjustend',function (obj) + { + var idx = RGraph.Registry.Get('chart.adjusting.gantt')[0]; + }); + + /** + * This is how to get notified during the adjusting + */ + RGraph.AddCustomEventListener(gantt, 'onadjust',function (obj) + { + var events = obj.Get('chart.events'); + var conf = RGraph.Registry.Get('chart.adjusting.gantt'); + var idx = conf[0]; + + document.getElementById("eventID").value = conf[0]; + document.getElementById("eventStart").value = events[conf[0]][0]; + document.getElementById("eventDuration").value = events[conf[0]][1]; + }); + } +</script> +</pre> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/docs/adjusting_hprogress.html b/schall/static/RGraph/docs/adjusting_hprogress.html new file mode 100644 index 0000000..d6daeea --- /dev/null +++ b/schall/static/RGraph/docs/adjusting_hprogress.html @@ -0,0 +1,141 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - Adjusting your charts interactively - HProgress bar</title> + + <meta name="keywords" content="rgraph html5 canvas chart adjusting docs" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Documentation about adjusting your charts - HProgress bar" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A chart library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js" ></script> + <script src="../libraries/RGraph.common.adjusting.js" ></script> + <script src="../libraries/RGraph.hprogress.js" ></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + + <script> + window.onload = function (e) + { + + var hprogress = new RGraph.HProgress('myc', 83, 100, 0); + hprogress.Set('chart.color', 'green'); + hprogress.Set('chart.adjustable', true); + hprogress.Set('chart.margin', 5); + hprogress.Set('chart.tickmarks.inner', true); + hprogress.Set('chart.tickmarks.zerostart', true); + hprogress.Set('chart.units.post', '%'); + hprogress.Draw(); + + RGraph.AddCustomEventListener(hprogress, 'onadjustbegin', function () {console.log('Old value: ' + hprogress.value );}); + RGraph.AddCustomEventListener(hprogress, 'onadjustend', function () {console.log('New value: ' + hprogress.value );}); + } + </script> + + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> +</head> + +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + <div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="index.html">Documentation</a> + > + <a href="adjusting.html">Adjusting charts interactively</a> + > + HProgress bar + </div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - Adjusting your charts interactively - HProgress bar</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + <p> + The Horizontal Progress Bar can be adjusted by clicking on it. When adjusting + is finished the onadjustend event fires. If you attach a function to the onadjustend event (as below) you can get the new value by + looking at the <i>.value</i> property (eg <i>myProgress.value</i>). + </p> + + <canvas id="myc" width="1000" height="100">[No canvas support]</canvas> + + <pre class="code"> +<script> + window.onload = function (e) + { + + var hprogress = new RGraph.HProgress('myc', 83, 100, 0); + hprogress.Set('chart.color', 'green'); + hprogress.Set('chart.adjustable', true); + hprogress.Set('chart.margin', 5); + hprogress.Set('chart.tickmarks.inner', true); + hprogress.Set('chart.tickmarks.zerostart', true); + hprogress.Set('chart.units.post', '%'); + hprogress.Draw(); + + RGraph.AddCustomEventListener(hprogress, 'onadjustbegin', function () {console.log('Old value: ' + hprogress.value );}); + RGraph.AddCustomEventListener(hprogress, 'onadjustend', function () {console.log('New value: ' + hprogress.value );}); + } +</script> +</pre> +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/docs/adjusting_line.html b/schall/static/RGraph/docs/adjusting_line.html new file mode 100644 index 0000000..f6f1543 --- /dev/null +++ b/schall/static/RGraph/docs/adjusting_line.html @@ -0,0 +1,150 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - Adjusting your charts interactively - Line chart</title> + + <meta name="keywords" content="rgraph html5 canvas chart adjusting docs " /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Documentation about adjusting your charts - Line chart" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A chart library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js" ></script> + <script src="../libraries/RGraph.common.adjusting.js" ></script> + <script src="../libraries/RGraph.line.js" ></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + + <script> + window.onload = function (e) + { + var line = new RGraph.Line('myc', [45,74,84,85,45,35,65,68,87,97,45,34,12], [15,14,12,16,18,19,14,12,74,84,95,65,35]); + line.Set('chart.labels', ['Kev','Matt','Rich','Dave','Iggy','Polly','Fiona','Fred','Pete','Lou','Fred','Bob']); + line.Set('chart.ylabels.inside', true); + //line.Set('chart.outofbounds', true); + line.Set('chart.linewidth', 2); + line.Set('chart.hmargin', 10); + line.Set('chart.shadow', true); + line.Set('chart.adjustable', true); + line.Set('chart.title', 'An adjustable line chart'); + line.Set('chart.title.vpos', 0.5); + line.Draw(); + + RGraph.AddCustomEventListener(line, 'onadjustend', function (obj) {p(RGraph.Registry.Get('chart.adjusting.line.myc'));}); + } + </script> + + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> +</head> +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + <div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="index.html">Documentation</a> + > + <a href="adjusting.html">Adjusting charts interactively</a> + > + Line chart + </div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - Adjusting your charts interactively - Line chart</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + <p> + The Line chart can be adjusted by dragging the line(s) up and down. By using the RGraph registry - + <i>RGraph.Registry.Get('chart.adjusting.line.myc')</i> - you can get the details of the adjustment + (replace <i>myc</i> with the ID of your canvas). This is an array consisting of: + + <ul> + <li>The chart object</li> + <li>The index of the point in the data series</li> + <li>A two element array consisting of the original coordinates of the point that is being adjusted</li> + <li>The index of the data series that contains the point being adjusted</li> + </ul> + </p> + + <canvas id="myc" width="1000" height="250">[No canvas support]</canvas> + + <pre class="code"> +<script> + window.onload = function (e) + { + var line = new RGraph.Line('myc', [45,74,84,85,45,35,65,68,87,97,45,34,12], [15,14,12,16,18,19,14,12,74,84,95,65,35]); + line.Set('chart.labels', ['Kev','Matt','Rich','Dave','Iggy','Polly','Fiona','Fred','Pete','Lou','Fred','Bob']); + line.Set('chart.ylabels.inside', true); + line.Set('chart.linewidth', 2); + line.Set('chart.hmargin', 10); + line.Set('chart.shadow', true); + line.Set('chart.adjustable', true); + line.Set('chart.title', 'An adjustable line chart'); + line.Set('chart.outofbounds', true); + line.Draw(); + + RGraph.AddCustomEventListener(line, 'onadjustend', function (obj) {p(RGraph.Registry.Get('chart.adjusting.line.myc'));}); + } +</script> +</pre> + + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/docs/adjusting_radar.html b/schall/static/RGraph/docs/adjusting_radar.html new file mode 100644 index 0000000..a7756d9 --- /dev/null +++ b/schall/static/RGraph/docs/adjusting_radar.html @@ -0,0 +1,140 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - Adjusting your charts interactively - Radar chart</title> + + <meta name="keywords" content="rgraph html5 canvas chart adjusting docs " /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Documentation about adjusting your charts - Radar chart" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A chart library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js" ></script> + <script src="../libraries/RGraph.common.adjusting.js" ></script> + <script src="../libraries/RGraph.radar.js" ></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + + <script> + window.onload = function (e) + { + var radar = new RGraph.Radar('myc', [4,3,8,6,8,7,7,4,5], [7,2,4,5,4,3,3,3,3]); + radar.Set('chart.adjustable', true); + radar.Set('chart.colors', ['rgba(255,0,0,0.5)', 'rgba(255,255,0,0.5)']); + radar.Set('chart.labels', ['Hoolio', 'Godfrey', 'Albert', 'Jeff', 'Jack', 'Pete', 'Lou', 'Barney', 'Fred']); + radar.Draw(); + + RGraph.AddCustomEventListener(radar, 'onadjustend', function (obj) {p(RGraph.Registry.Get('chart.adjusting.radar.myc'));}); + } + </script> + + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> +</head> + +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + <div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="index.html">Documentation</a> + > + <a href="adjusting.html">Adjusting charts interactively</a> + > + Radar chart + </div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - Adjusting your charts interactively - Radar chart</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + <canvas id="myc" width="400" height="400" style="float: left">[No canvas support]</canvas> + + <p> + The Radar chart can be adjusted by dragging the points on the chart. When the <i>onadjustend</i> event fires, you will find + the following information in the RGraph registry - <i>RGraph.Registry.Get('chart.adjusting.radar.myc')</i> - where <i>myc</i> + is the ID of your canvas: + </p> + + <ul> + <li>The numerical, zero indexed number that corresponds to the dataset</li> + <li>The numerical, zero indexed point that relates to the original data array</li> + <li>This is a boolean and used to indicate which (horizontal) half of the chart the point is in. true - the right half, false - the left half</li> + <li>This is a boolean and used to indicate which (vertical) half of the chart the point is in. true - the bottom half, false - the top half</li> + </ul> + + <br clear="all" /> + + <pre class="code"> +<script> + window.onload = function (e) + { + var radar = new RGraph.Radar('myc', [4,3,8,6,8,7,7,4,5], [7,2,4,5,4,3,3,3,3]); + radar.Set('chart.adjustable', true); + radar.Set('chart.colors', ['rgba(255,0,0,0.5)', 'rgba(255,255,0,0.5)']); + radar.Set('chart.labels', ['Hoolio', 'Godfrey', 'Albert', 'Jeff', 'Jack', 'Pete', 'Lou', 'Barney', 'Fred']); + radar.Draw(); + + RGraph.AddCustomEventListener(radar, 'onadjustend', function (obj) {p(RGraph.Registry.Get('chart.adjusting.radar.myc'));}); + } +</script> +</pre> +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/docs/adjusting_rose.html b/schall/static/RGraph/docs/adjusting_rose.html new file mode 100644 index 0000000..02aa2a0 --- /dev/null +++ b/schall/static/RGraph/docs/adjusting_rose.html @@ -0,0 +1,147 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - Adjusting your charts interactively - Rose chart</title> + + <meta name="keywords" content="rgraph html5 canvas chart adjusting docs " /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Documentation about adjusting your charts - Rose chart" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A chart library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js" ></script> + <script src="../libraries/RGraph.common.adjusting.js" ></script> + <script src="../libraries/RGraph.rose.js" ></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + + <script> + window.onload = function (e) + { + var rose = new RGraph.Rose('cvs',[4,3,5,6,2,1,4]); + rose.Set('chart.colors.alpha', 0.5); + rose.Set('chart.colors.sequential', true); + rose.Set('chart.adjustable', true); + rose.Set('chart.labels', ['Olga','Kev','Bob','Charlie','Pete','John','Fred']); + rose.Draw(); + + RGraph.AddCustomEventListener(rose, 'onadjustend', function (obj) {p(RGraph.Registry.Get('chart.adjusting.rose.cvs'));}); + } + </script> + + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> +</head> + +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + <div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="index.html">Documentation</a> + > + <a href="adjusting.html">Adjusting charts interactively</a> + > + Rose chart + </div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - Adjusting your charts interactively - Rose chart</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + <canvas id="cvs" width="450" height="400" style="float: right">[No canvas support]</canvas> + + <div> + <p> + The Rose chart can be adjusted by clicking and dragging the segments to the desired size. When the <i>onadjustend</i> event fires + you can get the following segment information from <i>RGraph.Registry.Get('chart.adjusting.rose.myrose')</i> (where <i>myrose</i> + is the canvas ID): + + <ul> + <li>X coordinate</li> + <li>Y coordinate</li> + <li>The radius of the segment</li> + <li>Start angle (in DEGREES)</li> + <li>End angle (in DEGREES)</li> + <li>Numerical index of the segment, starting at the north axis and going clockwise.</li> + </ul> + </p> + </div> + + + <br clear="all" /> + + <pre class="code"> +<script> + window.onload = function (e) + { + var rose = new RGraph.Rose('cvs',[4,3,5,6,2,1,4]); + rose.Set('chart.colors.alpha', 0.5); + rose.Set('chart.adjustable', true); + rose.Set('chart.labels', ['Olga','Kev','Bob','Charlie','Pete','John','Fred']); + rose.Draw(); + + RGraph.AddCustomEventListener(rose, 'onadjustend', function (obj) {p(RGraph.Registry.Get('chart.adjusting.rose.cvs'));}); + } +</script> +</pre> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/docs/adjusting_thermometer.html b/schall/static/RGraph/docs/adjusting_thermometer.html new file mode 100644 index 0000000..6964d5d --- /dev/null +++ b/schall/static/RGraph/docs/adjusting_thermometer.html @@ -0,0 +1,151 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - Adjusting your charts interactively - Thermometer chart</title> + + <meta name="keywords" content="rgraph html5 canvas chart adjusting docs" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Documentation about adjusting your charts - Thermometer chart" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A chart library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js" ></script> + <script src="../libraries/RGraph.common.adjusting.js" ></script> + <script src="../libraries/RGraph.thermometer.js" ></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + + <script> + window.onload = function (e) + { + var thermometer = new RGraph.Thermometer('myc', 0, 100, 78); + + var grad = thermometer.context.createLinearGradient(0,50,0,350); + grad.addColorStop(0, 'orange'); + grad.addColorStop(1, 'white'); + + thermometer.Set('chart.colors', [grad]); + thermometer.Set('chart.title.side', 'An adjustable thermometer'); + thermometer.Set('chart.adjustable', true); + thermometer.Draw(); + + RGraph.AddCustomEventListener(thermometer, 'onadjustbegin', function (obj) {document.getElementById("output").value += 'Value before adjustment: ' + obj.value + '\n';}); + RGraph.AddCustomEventListener(thermometer, 'onadjust', function (obj) {document.getElementById("output").value += 'Value during adjustment: ' + obj.value + '\n';}); + RGraph.AddCustomEventListener(thermometer, 'onadjustend', function (obj) {document.getElementById("output").value += 'Value after adjustment: ' + obj.value + '\n';}); + } + </script> + + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> +</head> + +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + <div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="index.html">Documentation</a> + > + <a href="adjusting.html">Adjusting charts interactively</a> + > + Thermometer chart + </div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - Adjusting your charts interactively - Thermometer chart</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + <canvas id="myc" width="100" height="400" style="float: left">[No canvas support]</canvas> + + <p> + Nothing pertinent is kept in the registry. If you wish to get the new value of the thermometer you can check <i>obj.value</i>. + If you want the value before the adjustment, you can check the value with the onadjustbegin event (instead of the + onadjustend event). + </p> + + <p> + <textarea id="output" style="width: 600px; height: 200px;"></textarea> + </p> + + <br clear="all" /> + + <pre class="code"> +<script> + window.onload = function (e) + { + var thermometer = new RGraph.Thermometer('myc', 0, 100, 78); + + var grad = thermometer.context.createLinearGradient(0,50,0,350); + grad.addColorStop(0, 'orange'); + grad.addColorStop(1, 'white'); + + thermometer.Set('chart.colors', [grad]); + thermometer.Set('chart.title.side', 'An adjustable thermometer'); + thermometer.Set('chart.adjustable', true); + thermometer.Draw(); + + RGraph.AddCustomEventListener(thermometer, 'onadjustbegin', function (obj) {document.getElementById("output").value += 'Value before adjustment: ' + obj.value + '\n';}); + RGraph.AddCustomEventListener(thermometer, 'onadjust', function (obj) {document.getElementById("output").value += 'Value during adjustment: ' + obj.value + '\n';}); + RGraph.AddCustomEventListener(thermometer, 'onadjustend', function (obj) {document.getElementById("output").value += 'Value after adjustment: ' + obj.value + '\n';}); + } +</script> +</pre> +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/docs/adjusting_vprogress.html b/schall/static/RGraph/docs/adjusting_vprogress.html new file mode 100644 index 0000000..9a3f44e --- /dev/null +++ b/schall/static/RGraph/docs/adjusting_vprogress.html @@ -0,0 +1,145 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - Adjusting your charts interactively - VProgress bar</title> + + <meta name="keywords" content="rgraph html5 canvas chart adjusting docs " /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Documentation about adjusting your charts - VProgress bar" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A chart library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js" ></script> + <script src="../libraries/RGraph.common.adjusting.js" ></script> + <script src="../libraries/RGraph.vprogress.js" ></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + + <script> + window.onload = function (e) + { + var vprogress = new RGraph.VProgress('myc', 83, 100, 0); + vprogress.Set('chart.color', 'red'); + vprogress.Set('chart.adjustable', true); + vprogress.Set('chart.margin', 5); + vprogress.Set('chart.tickmarks.inner', true); + vprogress.Set('chart.label.inner', true); + vprogress.Set('chart.units.post', '%'); + vprogress.Set('chart.gutter.right', 45); + vprogress.Draw(); + + RGraph.AddCustomEventListener(vprogress, 'onadjustbegin', function (obj) {document.getElementById("output").value += 'Value before adjustment: ' + obj.value + '\n';}); + RGraph.AddCustomEventListener(vprogress, 'onadjustend', function (obj) {document.getElementById("output").value += 'Value after adjustment: ' + obj.value + '\n';}); + } + </script> + + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> +</head> + +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + <div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="index.html">Documentation</a> + > + <a href="adjusting.html">Adjusting charts interactively</a> + > + VProgress bar + </div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - Adjusting your charts interactively - VProgress bar</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + <canvas id="myc" width="150" height="600" style="border: 1px dashed gray; float: left; margin-right: 5px">[No canvas support]</canvas> + + <p> + Nothing pertinent is kept in the registry. If you wish to get the new value of the progress you can check + <i>obj.value</i>. If you want the value before the adjustment, you can check the value + with the <i>onadjustbegin</i> event (instead of the <i>onadjustend</i> event). + </p> + + <textarea id="output" style="width: 500px; height: 200px" readonly></textarea> + + <br clear="all" /> + + <pre class="code" style="float: left"> +<script> + window.onload = function (e) + { + var vprogress = new RGraph.VProgress('myc', 83, 100, 0); + vprogress.Set('chart.color', 'red'); + vprogress.Set('chart.adjustable', true); + vprogress.Set('chart.margin', 5); + vprogress.Set('chart.tickmarks.inner', true); + vprogress.Set('chart.label.inner', true); + vprogress.Set('chart.units.post', '%'); + vprogress.Set('chart.gutter.right', 45); + vprogress.Draw(); + + RGraph.AddCustomEventListener(vprogress, 'onadjustbegin', function (obj) {document.getElementById("output").value += 'Value before adjustment: ' + obj.value + '\n';}); + RGraph.AddCustomEventListener(vprogress, 'onadjustend', function (obj) {document.getElementById("output").value += 'Value after adjustment: ' + obj.value + '\n';}); + } +</script> +</pre> +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/docs/animation-effects.html b/schall/static/RGraph/docs/animation-effects.html new file mode 100644 index 0000000..0a9342b --- /dev/null +++ b/schall/static/RGraph/docs/animation-effects.html @@ -0,0 +1,19 @@ +<!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> +
\ No newline at end of file diff --git a/schall/static/RGraph/docs/animation_segments.html b/schall/static/RGraph/docs/animation_segments.html new file mode 100644 index 0000000..025f750 --- /dev/null +++ b/schall/static/RGraph/docs/animation_segments.html @@ -0,0 +1,147 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - Animated Pie chart</title> + + <meta name="keywords" content="rgraph html5 canvas chart docs animated pie chart" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - An example of an animated Pie chart" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A chart library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + + <!-- These are the Javascript includes that pull in the RGraph libraries (and ExCanvas) --> + <script src="../libraries/RGraph.common.core.js" ></script> + <script src="../libraries/RGraph.common.tooltips.js" ></script> + <script src="../libraries/RGraph.pie.js" ></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + + + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> +</head> +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + <div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="index.html">Documentation</a> + > + An example of an animated & interactive Pie chart + </div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - An example of an animated & interactive Pie chart</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + + + <!-- This is the canvas that the Pie chart is drawn on --> + <canvas id="cvs" width="500" height="300" style="float: right">[No canvas support]</canvas> + + + + <script> + pie = new RGraph.Pie('cvs', [24,43,51,16,26,23,35]); + pie.Set('chart.strokestyle', 'rgba(0,0,0,0)'); + pie.Set('chart.labels', ['Richard','John','Kev','Lou','Pete','Fred','Bob']); + pie.Set('chart.tooltips', ['Richard','John','Kev','Lou','Pete','Fred','Bob']); + //pie.Set('chart.tooltips.event', 'onmousemove'); + pie.Set('chart.highlight.style', 'explode'); + pie.Set('chart.labels.sticks', true); + pie.Set('chart.radius', 100); + pie.Set('chart.shadow', true); + pie.Draw(); + </script> + + + + <p> + This example shows animated segment separation. This used to be something that had to be done seperately, however now it's + built into the Pie chart as a tooltip effect. You can utilise the effect by using the <i>chart.highlight.style</i> setting + like this: + </p> + + <br clear="all" /> + + + <pre class="code"> +<script> + window.onload = function () + { + var pie = new RGraph.Pie('cvs', [24,43,51,16,26,23,35]); + pie.Set('chart.strokestyle', 'rgba(0,0,0,0)'); + pie.Set('chart.labels', ['Richard','John','Kev','Lou','Pete','Fred','Bob']); + pie.Set('chart.tooltips', ['Richard','John','Kev','Lou','Pete','Fred','Bob']); + <span style="color: green">pie.Set('chart.highlight.style', 'explode');</span> + pie.Set('chart.labels.sticks', true); + pie.Set('chart.radius', 100); + pie.Draw(); + } +</script> +</pre> + + <p> + <a href="animation-effects.html">« Back to animation page</a> + </p> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/docs/annotate_persist.html b/schall/static/RGraph/docs/annotate_persist.html new file mode 100644 index 0000000..c4d4f9d --- /dev/null +++ b/schall/static/RGraph/docs/annotate_persist.html @@ -0,0 +1,303 @@ +<!DOCTYPE html > +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - Making annotations shareable cross browser</title> + + <meta name="keywords" content="rgraph html5 canvas chart docs annotating shareable cross browser" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Making annotations shareable cross browser" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A chart library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js"></script> + <script src="../libraries/RGraph.common.annotate.js"></script> + <script src="../libraries/RGraph.common.context.js"></script> + <script src="../libraries/RGraph.line.js"></script> + + <script> + /** + * The function that loads the annotations from the server + */ + function LoadAnnotations () + { + var canvasPosition = RGraph.getCanvasXY(g.canvas); + var div = document.createElement('DIV'); + + div.style.backgroundColor = 'white'; + div.style.padding = '3px'; + div.style.position = 'absolute'; + div.style.left = canvasPosition[0] + 5 + 'px'; + div.style.top = canvasPosition[1] + 5 + 'px'; + div.style.color = 'gray'; + div.style.opacity = 1; + div.style.border = '2px solid black'; + div.style.zIndex = 99; + div.innerHTML = 'Loading annotations...'; + document.body.appendChild(div); + + div2 = document.createElement('DIV'); + div2.style.backgroundColor = 'gray'; + div2.style.opacity = 0.5; + div2.style.position = 'absolute'; + div2.style.left = canvasPosition[0] + 'px'; + div2.style.top = canvasPosition[1] + 'px'; + div2.style.width = g.canvas.width + 'px'; + div2.style.height = g.canvas.height + 'px'; + //div2.style.zIndex = 98; + document.body.appendChild(div2); + + window.localStorage['__rgraph_annotations_cvs__'] = ''; + AjaxGet('annotate_persist.html?getannotations=12', + +function () +{ + if (this.readyState == 4 && this.status == 200) { + window.localStorage['__rgraph_annotations_cvs__'] = this.responseText; + + RGraph.ReplayAnnotations(g); + + setTimeout(function () {div.style.opacity = 0.8; div2.style.opacity = 0.4;}, 50); + setTimeout(function () {div.style.opacity = 0.6;div2.style.opacity = 0.3;}, 100); + setTimeout(function () {div.style.opacity = 0.4;div2.style.opacity = 0.2;}, 150); + setTimeout(function () {div.style.opacity = 0.2;div2.style.opacity = 0.1;}, 200); + setTimeout(function () {div.style.opacity = 0;div2.style.opacity = 0;}, 250); + setTimeout(function () {div.style.display = 'none';div2.style.display = 'none';}, 300); + } +} + ); + } + + + + /** + * The function that saves annotations to the server + */ + function SaveAnnotations () + { + + var canvasPosition = RGraph.getCanvasXY(g.canvas); + var div = document.createElement('DIV'); + + div.style.backgroundColor = 'white'; + div.style.padding = '3px'; + div.style.position = 'absolute'; + div.style.left = canvasPosition[0] + 5 + 'px'; + div.style.top = canvasPosition[1] + 5 + 'px'; + div.style.color = 'gray'; + div.style.opacity = 1; + div.style.border = '2px solid black'; + div.style.zIndex = 99; + div.innerHTML = 'Saving annotations...'; + document.body.appendChild(div); + + AjaxPost('annotate_persist.html', 'data=' + window.localStorage['__rgraph_annotations_cvs__']); + + setTimeout(function () {div.style.opacity = 0.8}, 50); + setTimeout(function () {div.style.opacity = 0.6}, 100); + setTimeout(function () {div.style.opacity = 0.4}, 150); + setTimeout(function () {div.style.opacity = 0.2}, 200); + setTimeout(function () {div.style.opacity = 0; div.style.display = 'none';}, 250); + } + + + + /** + * Makes an AJAX POST. + */ + function AjaxPost (url, data) + { + // Mozilla, Safari, ... + if (window.XMLHttpRequest) { + var httpRequest = new XMLHttpRequest(); + + // MSIE + } else if (window.ActiveXObject) { + var httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); + } + + //httpRequest.onreadystatechange = callback; + + httpRequest.open('POST', url, true); + httpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); + httpRequest.send(data); + } + + /** + * Makes an AJAX call. It calls the given callback (a function) when ready + * + * @param string url The URL to retrieve + * @param function callback A function object that is called when the response is ready, there's an example below + * called "myCallback". + */ + function AjaxGet (url, callback) + { + // Mozilla, Safari, ... + if (window.XMLHttpRequest) { + var httpRequest = new XMLHttpRequest(); + + // MSIE + } else if (window.ActiveXObject) { + var httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); + } + + httpRequest.onreadystatechange = callback; + + httpRequest.open('GET', url, true); + httpRequest.send(); + } + + + + window.onload = function (e) + { + /** + * This clears the locally stored annotations so that they can be loaded from server + */ + window.localStorage['__rgraph_annotations_cvs__'] = ''; + + g = new RGraph.Line('cvs', [5,6,3,4,8,6,7,5,9]); + g.Set('chart.tickmarks', 'endcircle'); + g.Set('chart.hmargin', 5); + g.Set('chart.annotatable', true); + g.Set('chart.labels', ['Ben','Olga','Jeff','Indigo','Kev','Pete','Lou','Fred','John']); + g.Set('chart.contextmenu', [['Show palette', RGraph.Showpalette], ['Clear', function () {RGraph.Clear(g.canvas);g.Draw();}]]); + g.Set('chart.shadow', true); + g.Set('chart.linewidth', 1.01); + g.Set('chart.ylabels.count', 10); + g.Draw(); + + LoadAnnotations(); + + RGraph.AddCustomEventListener(g, 'onannotateend', function (obj) {SaveAnnotations();}); + RGraph.AddCustomEventListener(g, 'onannotateclear', function (obj) {SaveAnnotations();}); + } + </script> + + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> +</head> +<body> + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + <div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="index.html">Documentation</a> + > + Cross-browser annotations + </div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - Making annotations shareable cross browser</h1> + + <div style="text-align: center"> + <div class="warning" style="display: inline-block"> + This example does not work offline - you must use a website. Annotations are removed every five minutes. + </div> + </div> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + <canvas id="cvs" width="600" height="250" style="float: right">[No canvas support]</canvas> + + <p> + Combining a little AJAX and some very simple server side scripting, you can easily make an annotation system that can persist + across different browsers and computers. You an either use Load/Save buttons to trigger the loading and saving, or like the + example to the right you can make use of the custom RGraph onannotateend event to make it happen automatically. + </p> + + <p> + This simple example uses a small PHP server side script that loads and saves the annotation data to a file on the server, + and that looks like this: + </p> + + <br clear="all" /> + + <pre class="code"> +<?php + $file = '/tmp/annotation_data'; + + /** + * Save the annotations to a tmp file + */ + if (isset($_POST) && isset($_POST['data'])) { + file_put_contents($file, $_POST['data']); + exit; + } + + + /** + * Load the annotations + */ + if (!empty($_GET['getannotations']) && $_GET['getannotations'] == 1) { + $contents = file_get_contents($file); + print($contents); + exit; + } +?> +</pre> + + <p> + By making the Javascript Save/Load functions repeat themselves every few seconds, you could easily make a presentation/demo system + that can be used when paticipants are in differing locations - in a similar fashion to Google Docs - or when you want one persons + annotations to be viewable by multiple PCs. On this page though, the Save function is triggered by the custom RGraph event + <i>onannotateend</i>. + </p> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/docs/annotating.html b/schall/static/RGraph/docs/annotating.html new file mode 100644 index 0000000..c995894 --- /dev/null +++ b/schall/static/RGraph/docs/annotating.html @@ -0,0 +1,216 @@ +<!DOCTYPE html > +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - Annotating your charts</title> + + <meta name="keywords" content="rgraph html5 canvas chart docs annotating" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Documentation about annotating your charts" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A chart library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js" ></script> + <script src="../libraries/RGraph.common.annotate.js" ></script> + <script src="../libraries/RGraph.common.context.js" ></script> + <script src="../libraries/RGraph.common.zoom.js" ></script> + <script src="../libraries/RGraph.bar.js" ></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + + <script> + window.onload = function () + { + bar = new RGraph.Bar('myBar', [[45,64],[32,51],[41,52],[54,43],[43,50]]); + bar.Set('chart.title', 'An annotatable chart with context menu'); + bar.Set('chart.labels', ['John','Fred', 'Barry', 'Charlie', 'Joan']); + bar.Set('chart.colors', ['red', 'blue']); + bar.Set('chart.background.barcolor1', '#fff'); + bar.Set('chart.background.barcolor2', '#fff'); + bar.Set('chart.annotatable', true); + bar.Set('chart.contextmenu', [['Show palette', RGraph.Showpalette], ['Clear', function () {RGraph.Clear(bar.canvas); bar.Draw();}]]); + bar.Draw(); + + RGraph.AddCustomEventListener(bar, 'onannotatestart', function (obj) {cl('Started annotating: ' + obj.id);}); + RGraph.AddCustomEventListener(bar, 'onannotate', function (obj) {cl('Annotating: ' + obj.id);}); + RGraph.AddCustomEventListener(bar, 'onannotateend', function (obj) {cl('Finished annotating: ' + obj.id);}); + RGraph.AddCustomEventListener(bar, 'onannotatecolor', function (obj) {cl('Changed annotate color: ' + obj.Get('chart.annotate.color'));}); + RGraph.AddCustomEventListener(bar, 'onannotateclear', function (obj) {cl('Fired the annotation clear event');}); + } + </script> + + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> +</head> +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + <div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="index.html">Documentation</a> + > + Annotating your charts + </div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - Annotating your charts</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + <div style="float: right"> + <canvas id="myBar" width="400" height="200">[No canvas support]</canvas><br /> + </div> + + <p> + The annotations feature brings presentation style functionality to RGraph charts. You can use this feature + for highlighting your charts if you need to. + </p> + + <ul> + <li><a href="#how">How do annotations work?</a></li> + <li><a href="#browser">Browser support</a></li> + <li><a href="#what">What can I use annotations for?</a></li> + <li><a href="#persistent">Are annotations persistent?</a></li> + <li><a href="#palette">How do I show the mini-palette?</a></li> + <li><a href="#clear">How can I clear the annotations?</a></li> + <li><a href="#replay">Replaying annotations when they're off</a></li> + <li><a href="#persist">Making your annotations persist</a></li> + </ul> + + <a name="how"></a> + <h4>How do annotations work?</h4> + + <p> + Enabling annotations is a very simple affair, and consists of doing the following: + </p> + + <pre class="code" style="width: 55%">myGraph.Set('chart.annotatable', true);</pre> + + <a name="browser"></a> + <h4>Browser support</h4> + + <p> + Annotations are supported in all browsers that RGraph works with - Firefox 3.5+, Chrome 2+, Safari 4+, Opera 10.5+ and + MSIE/Google Chrome Frame. They DO NOT however work with MSIE 8/ExCanvas. + </p> + + <a name="what"></a> + <h4>What can I use annotations for?</h4> + + <p> + As mentioned you can use it for presentations, highlighting things to yourself or others or just to have fun drawing (!). + </p> + + <a name="persistent"></a> + <h4>Are annotations persistent?</h4> + + <p> + That depends on which browser you're using. The annotation data is stored in the users web browser (not on the web server), + meaning currently (21st March 2010) browser support is limited to Firefox 3.5+, Safari 4+, + Chrome 4+ and Opera 10.5+. MSIE 8 also has the required storage capabilities, but since it doesn't yet support canvas, the point is moot. + The user does not have to + confirm anything for storage to be allowed - try it out on this page by drawing on the chart and then refreshing the page. + </p> + + <a name="palette"></a> + <h4>How do I show the mini-palette?</h4> + + + <p> + You can show the palette by using the <i>RGraph.Showpalette</i> function shown below as a context menu item: + </p> + + <pre class="code"> +myObj.Set('chart.contextmenu', [ + ['Show palette', RGraph.Showpalette], + ['Clear', function () {RGraph.Clear(myObj.canvas); myObj.Draw();}] + ]); +</pre> + + <p> + This code will result in the same context menu as the chart above. + </p> + + <a name="clear"></a> + <h4>How can I clear the annotations?</h4> + + You can simply clear the chart and redraw it: + + <pre class="code">RGraph.Clear(myGraph.canvas); // Clear the chart +myGraph.Draw(); // Redraw it</pre> + + <p> + In the chart above, there is a context menu that allows you to both clear the chart and also demonstrates the mini-palette + feature available to you. + </p> + + <a name="replay"></a> + <h4>Replaying annotations when they're off</h4> + <p> + When annotations are not enabled, any prior annotations that may have been made are not displayed. To show them you need + to use the API function <i>RGraph.ReplayAnnotations(object)</i> after the call to .Draw(). + </p> + + <a name="persist"></a> + <h4>Making your annotations persist across browsers/computers</h4> + <p> + With a little bit of custom Javascript and some server side scripting you can make your annotations persist across + different browsers/computers. You can find an example of this <a href="annotate_persist.html"><b>here</b></a>. + </p> + +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/docs/api.html b/schall/static/RGraph/docs/api.html new file mode 100644 index 0000000..b7010fd --- /dev/null +++ b/schall/static/RGraph/docs/api.html @@ -0,0 +1,817 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - API documentation</title> + + <meta name="keywords" content="rgraph html5 canvas chart docs api" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Documentation about the RGraph API" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A chart library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js" ></script> + + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> +</head> +<body> + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + <div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="index.html">Documentation</a> + > + API Documentation + </div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - API documentation</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + <br /> + + <ul> + <li><a href="#overview">Overview</a></li> + <li><a href="#references">Canvas and context references</a></li> + <li><a href="#events">Working with events</a></li> + <li><a href="#coords">Working with chart coordinates</a></li> + <li><a href="#data">Working with chart data</a></li> + <li><a href="#updating">Updating your charts dynamically</a></li> + <li><a href="#accessors">Setting properties</a></li> + <li><a href="#references.other">References available on RGraph objects</a></li> + <li><a href="#scale">Scale information</a></li> + <li><a href="#text">Adding text to your charts</a></li> + <li> + <a href="#functions">RGraph functions</a> + <ul> + <li><a href="#functions.arrays">Arrays</a></li> + <li><a href="#functions.strings">Strings</a></li> + <li><a href="#functions.numbers">Numbers</a></li> + <li><a href="#functions.misc">Miscellaneous</a></li> + <li><a href="#functions.events">Custom RGraph event related functions</a></li> + <li><a href="#functions.other">Other</a></li> + </ul> + </li> + <li><a href="#skeleton">The skeleton file</a></li> + </ul> + + <a name="overview"></a> + <h4>Overview</h4> + + <p> + Working with RGraph objects is purposefully easy, to make them straight forward to integrate into your own scripts if you want to. For any + particular chart type there are a few files required - the common libraries and the chart specific library. Eg: + </p> + + <pre class="code"> +<script src="RGraph.common.core.js"></script> +<script src="RGraph.bar.js"></script> +</pre> + + <p> + <i>RGraph.common.core.js</i> is a function library that contains a large set of functions that support the chart classes. + Some functions, and sets of functions, have their own files. For example, the zoom functions reside in <i>RGraph.common.zoom.js</i>, + so if you don't need zoom, you don't need this file. + Each of the chart libraries (<i>RGraph.*.js</i>) contains that particular charts class. If you'd like to see a "bare bones" + implementation, you can look at the <a href="../examples/basic.html">basic example</a>. There's also a + <a href="#skeleton">skeleton example</a> to make it easier to create new chart types. + </p> + + <a name="references"></a> + <h4>Canvas and context references</h4> + + <p> + Each chart object maintains references to the <i>context</i> and <i>canvas</i> as properties. So to get hold of them all you + need to do is this: + </p> + + <pre class="code"> +<script> + window.onload = function () + { + // 1/2 First draw the chart + var myBar = new RGraph.Bar('myCanvas', [1,5,8,4,6,3,1,5,7,8,4,6]); + myBar.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']); + myBar.Draw(); + + // 2/2 Now get hold of the references + var context = myBar.context; // Get hold of a reference to the context + var canvas = myBar.canvas; // Get hold of a reference to the canvas + } +</script> +</pre> + + <a name="events"></a> + <h4>Working with events</h4> + + <p> + When working with events, you may come across the situation where you have a reference to the <i>canvas</i>, but + also need to access the chart object. For this reason the constructor of each object adds a reference to the object to the + canvas and you can access it like this: + </p> + + <pre class="code"> +<script> + document.getElementById("myCanvas").onclick = function (e) + { + var src = (RGraph.isIE8() ? event.srcElement) : e.target; + + // The RGraph object constructors add __object__ to the canvas. + var myBar = src.__object__; + } +</script> +</pre> + + <a name="coords"></a> + <h4>Working with chart coordinates</h4> + + <p> + For most chart types, the coordinates of elements (eg bars, lines etc) are to be found in the class variable <i>obj.coords</i>. + This is usually a multi-dimensional array consisting of the coordinates of those shapes, or of points. As an example the bar + chart maintains the X, Y, width and height of each bar (or sections of bars in a stacked bar chart). The coords array is + usually a flat array, even when you have multiple sets of data. + </p> + + <p> + By using the RGraph.getMouseXY() function and this array you can determine if a bar was clicked on, or if the mouse is near a + line point etc. + </p> + + <pre class="code"> +var myCoords = myBar.coords; +</pre> + + <p> + <b>Note:</b> Previously the coords array values sometimes included the margin values, and sometimes didn't. As of 17th + April 2010 the values have all been unified to not include the margin values, so the values are as reported. + </p> + + <p> + <b>Note:</b> + The Line chart also has an object variable <i>myObj.coords2</i>, where the coordinates are indexed differently - + by line index. + </p> + + <a name="data"></a> + <h4>Working with chart data</h4> + + <p> + Another variable you may need is the <i>data</i> variable. For most chart types, this is where the data is stored. It is usually + untouched, so it is as you supplied to the chart objects constructor. A notable exception to this is filled line charts. + Here the original data is stored in the class variable <i>original_data</i>. The data supplied is modified to produce the stacking + effect. If you need to modify a filled line charts data you will need to change this variable instead. + </p> + + <p> + Not all chart types use the <i>data</i> variable. For some the name is different so that it makes a little more sense. The + chart types and their associate data variables are listed below<sup>1</sup>. + </p> + + <style> + table#data_properties td, + th { + text-align: center; + } + </style> + + <table border="0" align="center" id="data_properties"> + <tr> + <th>Chart type</th> + <th>Data variable(s)</th> + </tr> + + <tr> + <td>Bar</td> + <td>obj.data</td> + </tr> + + <tr> + <td>Bi-polar</td> + <td>obj.left, obj.right</td> + </tr> + + <tr> + <td>Donut</td> + <td>This is now a variant of the Pie chart</td> + </tr> + + <tr> + <td>Fuel</td> + <td>obj.min, obj.max, obj.value</td> + </tr> + + <tr> + <td>Funnel</td> + <td>obj.data</td> + </tr> + + <tr> + <td>Gantt</td> + <td>See the <a href="gantt.html#events">docs</a></td> + </tr> + + <tr> + <td>Gauge</td> + <td>obj.min, obj.max, obj.value</td> + </tr> + + <tr> + <td>Horizontal Bar</td> + <td>obj.data</td> + </tr> + + <tr> + <td>Horizontal Progress bar</td> + <td>obj.max, obj.value</td> + </tr> + + <tr> + <td>LED</td> + <td>obj.text</td> + </tr> + + <tr> + <td>Line</td> + <td>obj.original_data<sup>3</sup></td> + </tr> + + <tr> + <td>Meter</td> + <td>obj.min, obj.max, obj.value</td> + </tr> + + <tr> + <td>Odometer</td> + <td>obj.start, obj.end, obj.value</td> + </tr> + + <tr> + <td>Pie</td> + <td>obj.angles, obj.data</td> + </tr> + + <tr> + <td>Radial Scatter chart</td> + <td>obj.data</td> + </tr> + + <tr> + <td>Rose</td> + <td>obj.max, obj.data</td> + </tr> + + <tr> + <td>Scatter</td> + <td>obj.max, obj.data<sup>2</sup></td> + </tr> + + <tr> + <td>Thermometer</td> + <td>obj.min, obj.max, obj.value</td> + </tr> + + <tr> + <td>Traditional Radar</td> + <td>obj.data, obj.max</td> + </tr> + + <tr> + <td>Vertical Progress bar</td> + <td>obj.max, obj.value</td> + </tr> + + <tr> + <td>Waterfall chart</td> + <td>obj.max, obj.data</td> + </tr> + </table> + + <ol> + <li style="margin-top: 0">In the table, <i>obj</i> refers to your chart object.</li> + <li style="margin-top: 0">For the Scatter chart, each data point is an array of X/Y coordinates, the color and the tooltip for that point.</li> + <li style="margin-top: 0"> + The Line chart <i>obj.original_data</i> is an aggregation of all the datasets given to the Line chart, so the first + dataset is held in <i>obj.original_data[0]</i>, the second in <i>obj.original_data[1]</i> etc. + </li> + </ol> + + <a name="updating"></a> + <h4>Updating your charts dynamically</h4> + + <p style="background-color: #ffa; padding: 3px; border: 1px dashed black"> + <b>Note:</b> + It is important that you're careful with types when making AJAX requests. Since the response is initially a string, + and your AJAX function/library may not do conversions for you, you may need to convert these strings to numbers. To + do this you can use the <i>Number()</i> or <i>parseInt()</i> functions. For example: + </p> + + <pre class="code"> +<script> + num = Number('23'); + num = parseInt('43'); +</script> +</pre> + + <p> + A common request is to be able to update charts dynamically. This is quite simple and consists of three steps: + </p> + + <ol> + <li style="margin-top: 0">Get the new data from the server (with an AJAX request for example).</li> + <li style="margin-top: 0">Set the data in your chart object. See the above table for the appropriate property to use.</li> + <li style="margin-top: 0">Call the .Draw() method again.</li> + </ol> + + <p> + If you don't need to get data from your server (ie it's all client-side) then you can omit the first step. Also, it may be + sufficient to simply recreate the entire object from scratch. This means that you won't have to alter and + RGraph internal properties - just recreate the chart object and configuration. There's a simple function + you can use for AJAX purposes <a href="index.html#ajax">here</a>. + </p> + + + <a name="accessors"></a> + <h4>Setting properties</h4> + + <p> + To set RGraph properties, ideally you should use each objects setter (there's also a corresponding getter). These functions + accomodate some backwards compatibility changes, so by not using them you run the risk of your charts not working entirely as + expected. + </p> + + <pre class="code"> +myObj.Set('chart.gutter.left', 25); +myObj.Get('chart.gutter.left'); +</pre> + + <a name="references.other"></a> + <p> </p> + <h4>References available on RGraph objects</h4> + <p> + RGraph stores various references to objects on the canvas (typically) to make getting hold of them easier. There's also a + Registry object in + which references are stored. Typically the objects are named with the format <i>__xxx__</i>, and you can inspect the + objects by using a console(eg the inspector that's part of Google Chrome - <i>CTRL+SHIFT+J</i>). Some examples are: + </p> + + <ul> + <li>__object__ on the canvas - a reference to the chart object</li> + <li> + RGraph.Registry.Get('chart.tooltip') - a reference to the currently visible tooltip. This in turn has the following + available: + <ul> + <li>__text__ - Since setting .innerHTML can cause changes in HTML, this is the original tooltip text.</li> + <li>__index__ - This is the numerical index corresponding to the tooltips array that you set.</li> + <li>__dataset__ - Used in the Scatter chart and corresponding to the dataset.</li> + <li>__canvas__ - A reference to the original canvas that triggered the tooltip.</li> + </ul> + </li> + <li> + RGraph.Registry.Get('chart.mousedown') - Used in annotating, and stipulates whether the mouse button is currently + pressed. + </li> + <li> + RGraph.Registry.Get('chart.contextmenu') - The currently shown context menu, if any. This in turn has the following + properties: + <ul> + <li>__canvas__ - The original canvas object.</li> + </ul> + </li> + </ul> + + These are just a sample of what's available, to find more you should use an introspection tool or look at the source. + + + + <a name="scale"></a> + <h4>Scale information</h4> + <p> + For the Bar, Bipolar, HBar, Line and Scatter charts the scale that is used is stored in the <i>scale</i> class variable. Eg: + </p> + + <pre class="code"> +<script> + var myBar = new RGraph.Bar('cvs', [56,43,52,54,51,38,46,42,52]); + myBar.Draw(); + + var myScale = myBar.scale +</script> +</pre> + + <a name="text"></a> + <h4>Adding text to your charts</h4> + <p> + If you want to add arbitrary text to your chart(s) you can use the API function <a href="#functions.other">RGraph.Text().</a> + </p> + + <pre class="code"> +<script> + // Draw a basic chart + var myObj = new RGraph.Bar('myCanvas', [4,5,5,8,7,6,4,8,5,9]); + myObj.Draw(); + + // Draw some text + myObj.context.beginPath(); + size = 12; + font = 'Verdana'; + text = 'Some text!; + x = 10; + y = 10; + + RGraph.Text(myObj.context, font, size, x, y, text); + myObj.context.fill(); +</script> +</pre> + + <a name="functions"></a> + <h4>RGraph functions</h4> + + <p> + This is a list of some of the functions available to you in the RGraph common libraries. + It's not every single one that's available, but is a list of the common ones that you're likely to want to use. Arguments + in square brackets are optional. + </p> + + <pre class="code"> +<script src="RGraph.common.core.js"></script> + +<script> + // Returns 9 + myArray = [3,2,5,4,9,7,8]; + max = RGraph.array_max(myArray); +</script> +</pre> + + <a name="functions.arrays"></a> + <h4>Arrays</h4> + + <ul> + <li><b>(number) RGraph.array_max(array)</b><br />Returns the maximum value in the array.<br /><i>File: RGraph.common.core.js</i><p /></li> + <li><b>(number) RGraph.array_sum(array)</b><br />Returns the sum of all values in the array. You can also pass a single integer, in which case it is simply returned as-is.<br /><i>File: RGraph.common.core.js</i><p /></li> + <li><b>(array) RGraph.array_clone(array)</b><br />Creates a copy/clone of the given array. Only numerically indexed arrays are supported.<br /><i>File: RGraph.common.core.js</i><p /></li> + <li><b>(array) RGraph.array_reverse(array)</b><br />Returns a reversal of the given array.<br /><i>File: RGraph.common.core.js</i><p /></li> + <li><b>(boolean) RGraph.is_array(obj)</b><br />Returns true or false as to whether the given object is an array or not.<br /><i>File: RGraph.common.core.js</i><p /></li> + <li><b>(array) RGraph.array_pad(array, length[, value])</b><br />Pads the given array to the specified length (if the length is less, if not the array is returned as is). The third, optional, argument is the value which is used as the pad value. If not specified, <i>null</i> is used.<br /><i>File: RGraph.common.core.js</i><p /></li> + <li><b>(array) RGraph.array_shift(array)</b><br />Shifts an element off of the start of the given array and returns the new array.<br /><i>File: RGraph.common.core.js</i><p /></li> + </ul> + + <a name="functions.strings"></a> + <h4>Strings</h4> + + <ul> + <li><b>(string) RGraph.rtrim(string)</b><br />Strips the right hand white space from the string that you pass it.<br /><i>File: RGraph.common.core.js</i><p /></li> + <li> + <b>(string) RGraph.number_format(obj, number[, prepend[, append]])</b><br /> + This formats the given number (which can be either an integer or a float. The prepend and append variables are + strings which are added to the string (eg 5%).<br /><br /> + <b>Note:</b>As of 5th September 2010 this functions argument list has been changed to include the chart object, as shown above.<br /><br /> + <i>File: RGraph.common.core.js</i><p /> + </li> + </ul> + + <a name="functions.numbers"></a> + <h4>Numbers</h4> + + <ul> + <li><b>(number) RGraph.random(min, max)</b><br />Returns a random number between the minimum and maximum that you give.<br /><i>File: RGraph.common.core.js</i><br /><br /></li> + <li><b>(string) RGraph.number_format(number[, prepend[, append]])</b><br />See <a href="#functions.strings">above</a>.<br /><i>File: RGraph.common.core.js</i></li> + </ul> + + <a name="functions.misc"></a> + <h4>Miscellaneous</h4> + + <ul> + <li> + <b>(object) RGraph.Effects.ReplaceCanvasWithDIV(canvas)</b><br /> + This function is used by some animation functions to stop the page layout changing when the canvas is removed from + the document. It removes the canvas from the document, replaces it with a DIV and then adds the canvas as a child node + of the DIV. The canvas is placed in the center of the DIV. + <br /><i>File: RGraph.common.effects.js</i> + <p /> + </li> + + <li> + <b>(object) RGraph.FixEventObject(event)</b><br />Pass this function an event object and it will attempt to "fill in" the missing properties (depending on the browser). + It tries to add:<br /><br /> + + <ul> + <li>pageX (MSIE)</li> + <li>pageY (MSIE)</li> + <li>target (MSIE)</li> + <li>stopPropagation() (MSIE)</li> + <li>offsetX (FF)</li> + <li>offsetY (FF)</li> + </ul> + <br /><i>File: RGraph.common.core.js</i> + <p /> + </li> + <li><b>(null) RGraph.OldBrowserCompat(context)</b><br />This function "fills in" any required functions that some browsers don't have. At the moment this consists of adding the measureText() and fillText() functions to the context when they're missing (usually this means older versions of Opera).<br /><i>File: RGraph.common.core.js</i><p /></li> + <li><b>(number) RGraph.GetDays(date)</b><br />This returns the number of days in the given month. The argument should be a Date object.<br /><i>File: RGraph.common.core.js</i><p /></li> + <li><b>(null) RGraph.pr(mixed)</b><br />Emulates the PHP function print_r() by recursively printing the structure of whatever you pass to it. It handles numbers, strings, arrays, booleans, functions and objects.<br /><i>File: RGraph.common.core.js</i><p /></li> + <li><b>(null) p(mixed)</b><br />An alias of the above albeit far shorter to type.<br /><i>File: RGraph.common.core.js</i><p /></li> + <li><b>(null) cl(mixed)</b><br />A shortcut for the Firebug and Google Chrome debug function console.log().<br /><i>File: RGraph.common.core.js</i><p /></li> + <li><b>(null) RGraph.Clear(canvas[, color])</b><br />Clears the canvas by drawing a white (or the optional color you give) rectangle over it. As of 23rd January 2011 you can now specify <i>transparent</i> as the color and the canvas will be reset back to transparency instead of to white. This may become the default at a later date.<br /><i>File: RGraph.common.core.js</i><p /></li> + <li> + <b>(null) RGraph.ClearAnnotations(id)</b><br />This function clears the annotation data associated with the given canvas ID (but DOES NOT redraw the chart). If you want to clear the visible annotations too, you will need to redraw the canvas. You could do this using the following code: + <br /> + <pre class="code"> +function ClearAndRedraw (obj) +{ + RGraph.Clear(obj.canvas); // This function also calls the RGraph.ClearAnnotations() function + obj.Draw(); +}</pre> + <br /><i>File: RGraph.common.annotatate.js</i><p /> + </li> + <li><b>(null) RGraph.ReplayAnnotations(object)</b><br />This function redraws any annotations which have previously been drawn on the canvas. You would use this function when annotations are turned off and you want previous annotations to be displayed.<br /><i>File: RGraph.common.annotate.js</i><p /></li> + <li><b>(array) RGraph.getMouseXY(event)</b><br />When passed your event object, it returns the X and Y coordinates (in relation to the canvas) of the mouse pointer. (0,0) is in the top left corner, with the X value increasing going right and the Y value increasing going down.<br /><i>File: RGraph.common.core.js</i><p /></li> + <li><b>(array) RGraph.getCanvasXY(canvas)</b><br />Similar to the above function but returns the X/Y coordinates of the canvas in relation to the page.<br /><i>File: RGraph.common.core.js</i><p /></li> + <li><b>(number) RGraph.degrees2Radians(number)</b><br />Converts and returns the given number of degrees to radians. 1 radian = 57.3 degrees.<br /><i>File: RGraph.common.core.js</i><p /></li> + <li><b>(array) RGraph.getScale(max, obj)</b><br />Given the maximum value this will return an appropriate scale. The second argument is the graph object.<br /><i>File: RGraph.common.core.js</i><p /></li> + <li><b>(mixed) RGraph.Registry.Get(name)</b><br />In conjunction with the next function, this is an implementation of the Registry pattern which can be used for storing settings.<br /><i>File: RGraph.common.core.js</i><br /><br /></li> + <li><b>(mixed) RGraph.Registry.Set(name, value)</b><br />In conjunction with the previous function, this is an implementation of the Registry pattern which can be used for storing settings.<br /><i>File: RGraph.common.core.js</i><br /><br /></li> + <li><b>(null) RGraph.Register(object)</b><br />This function is used in conjunction with the next to register a canvas for redrawing. Canvases are redrawn (for example) when tooltips or crosshairs are being used.<br /><i>File: RGraph.common.core.js</i><br /><br /></li> + + <li> + <b>(null) RGraph.Redraw([id, [color]])</b><br />This function is used in conjunction with the previous to redraw a canvas. Canvases are redrawn (for example) when tooltips or crosshairs are being used.<br /><br /> <b>Note:</b> All canvases that are registered are redrawn. However the optional first argument can be an ID (a string) of the canvas that is NOT to be redrawn. The optional second argument is the color to use when clearing canvases.<br /><i>File: RGraph.common.core.js</i><br /><br /> + </li> + + <li><b>(null) RGraph.SetShadow(object, color, offetX, offsetY, blur)</b><br />This function is a shortcut function used to set the four shadow properties. The arguments are: your chart object, the shadow color, the X offset, the Y offset, the shadow blur.<br /><i>File: RGraph.common.core.js</i><br /><br /></li> + <li><b>(null) RGraph.NoShadow(object)</b><br />This function is a shortcut function used to "turn off" the shadow. The argument is your chart object.<br /><i>File: RGraph.common.core.js</i><br /><br /></li> + <li> + <b>(number) RGraph.Async(mixed[, delay])</b><br />This is a simple function but has significant implications on your pages performance. You + can pass this either a function pointer, or a string containing the code to run and it will run the code asynchronously (ie in + parallel to the page loading). In doing so it can mean that your page is displayed faster, as the chart is created + seperate to the page loading. As such, the placement of your canvas tag becomes more important. What you can do is + define the canvas tag and then the code to produce the chart immediately after it. This is how the front page is coded, + (but not using the RGraph.Async() function). + There's an example of it <a href="async.html">here</a>. The optional delay argument is measured in milliseconds + (1 second = 1000 milliseconds) and defaults to 1. What you can do is specify something like 1000 to make the effect + more pronounced to ensure it's working as expected. + + <p> + <b>Note:</b> Since a dev release of version 4, Google Chrome versions 4 and 5 have an issue with rendering text when using + the RGraph.Async() function. The solution here is to simply not use the RGraph.Async() function. + </p> + <i>File: RGraph.common.core.js</i><br /><br /> + </li> + + <li> + <b>(null) RGraph.filledCurvyRect(context, x, y, width, height[, radius[, curvy top left[, curvy top right[, curvy bottom right[, curvy bottom left]]]]])</b><br /> + This draws a rectangle with curvy corners. Similar to the built in rectangle functions, and you can control + individual corners. The radius controls the severity of the corner curvature and defaults to 3. By default all + the corners are curvy.<br /><i>File: RGraph.common.core.js</i><br /><br /> + </li> + + <li> + <b>(null) RGraph.strokedCurvyRect(context, x, y, width, height[, radius[, curvy top left[, curvy top right[, curvy bottom right[, curvy bottom left]]]]])</b><br /> + This draws a rectangle with curvy corners. Similar to the built in rectangle functions, and you can control + individual corners. The radius controls the severity of the corner curvature and defaults to 3. By default all + the corners are curvy.<br /><i>File: RGraph.common.core.js</i><br /><br /> + </li> + + <li> + <b>(null) RGraph.Reset(canvas)</b><br /> + This function resets the canvas. At first this function may appear similar to the RGraph.Clear() function, however this + function will reset any translate() that has been performed, and so can stop them accumulating. + <br /><i>File: RGraph.common.core.js</i><br /><br /> + </li> + </ul> + + <a name="functions.events"></a> + <h4>Custom RGraph event related functions</h4> + + <ul> + <li><b>(null) RGraph.FireCustomEvent(object, event)</b><br />This fires a custom event. The object is your chart object, and the name is a string specifying the name of the event.<br /><i>File: RGraph.common.core.js</i><br /><br /></li> + <li><b>(number) RGraph.AddCustomEventListener(object, event, callback)</b><br />This attaches a function to the specified event. The object argument is your chart object, the event argument should be the name of the event, eg <i>ontooltip</i>, and the function argument is your function which handles the event. The return value is an ID which can be used with the <i>RGraph.RemoveCustomEventListener()</i> function.<br /><i>File: RGraph.common.core.js</i><br /><br /></li> + <li><b>(null) RGraph.RemoveCustomEventListener(object, id)</b><br />This removes the custom event listener that corresponds to the given ID. The arguments are the chart object and the ID of the event handler to remove (as returned by <i>RGraph.AddCustomEventListener()</i>).<br /><i>File: RGraph.common.core.js</i><br /><br /></li> + <li><b>(null) RGraph.RemoveAllCustomEventListeners([id])</b><br />To easily remove all custom event listeners you can use this function. It also can optionally take one argument - a canvas ID - to limit the clearing to.<br /><i>File: RGraph.common.core.js</i><br /><br /></li> + </ul> + + <a name="functions.other"></a> + <h4>Other</h4> + + <p> + These are functions which are less generic, and used to build the charts. You may still wish to use them however. + </p> + + <ul> + <li><b>(null) RGraph.lineByAngle(context, x, y, angle, length)</b><br />This function draws a line from the given X and Y coordinates at the specified angle.<br /><i>File: RGraph.common.core.js</i><br /><br /></li> + + <li> + <b>(null) RGraph.Text(context, font, size, x, y, text[, valign[, halign[, border[, angle[, background[, bold[, indicator]]]]]]])</b><br /> + This function acts as a wrapper around the canvas text functionality. The arguments are: + + <ul> + <li>The context is the canvases 2D context.</li> + <li>The font is the name of the font you want to use (eg Arial).</li> + <li>The size is an integer specifying the size of the text, (measured in points).</li> + <li>The x and y arguments are the X/Y coordinates at which to draw the text.</li> + <li>The text argument is the text to draw.</li> + <li>The optional valign argument is the vertical alignment and can be either <i>top</i>, <i>center</i> or <i>bottom</i>.</li> + <li>The optional halign argument is the horizontal alignment and can be <i>left</i>, <i>center</i> or <i>right</i>.</li> + <li>The optional border argument is a boolean (<i>true</i> or <i>false</i>) controlling whether the text has a border.</li> + <li>The optional angle argument specifies the angle at which the text is drawn (rotated around the X/Y coordinates and measured in degrees).</li> + <li>The optional background argument is the color of the background, (eg #fff).</li> + <li>The optional bold argument is boolean which controls whether the text is bold or not.</li> + <li>And the optional indicator argument is a boolean which controls whether a placement indicator is shown.</li> + </ul> + + <br /><i>File: RGraph.common.core.js</i> + <br /><br /> + </li> + + <li><b>(null) RGraph.DrawTitle(canvas, text, gutter[, centerx[, size]])</b><br />This function draws the title. The centerx argument is the center point to use. If not given the center of the canvas is used.<br /><i>File: RGraph.common.core.js</i><br /><br /></li> + <li><b>(null) RGraph.Tooltip(canvas, text, x, y, idx)</b><br />This function shows a tooltip. The idx value corresponds to the tooltip array that you give.<br /><i>File: RGraph.common.tooltips.js</i><br /><br /></li> + <li><b>(null) RGraph.DrawKey(object, key, colors)</b><br />This function draws the key. The first argument is the chart object, the second is an array of key information and the last is an array of the colors to use.<br /><i>File: RGraph.common.core.js</i><br /><br /></li> + <li><b>(null) RGraph.DrawBars(object)</b><br />This draws the horizontal background bars. The argument is the chart object.<br /><i>File: RGraph.common.core.js</i><br /><br /></li> + <li><b>(null) RGraph.DrawInGraphLabels(object)</b><br />This draws the in-graph labels. The argument is the chart object.<br /><i>File: RGraph.common.core.js</i><br /><br /></li> + <li><b>(null) RGraph.DrawCrosshairs(object)</b><br />This function draws the crosshairs. The argument is the chart object.<br /><i>File: RGraph.common.core.js</i><br /><br /></li> + <li><b>(null) RGraph.HideContext()</b><br />This function clears the context menu. RGraph uses it to hide the context menu, but only AFTER your function/callback is run. You may wish to hide the context menu before your own function, in which case you can call this function.<br /><i>File: RGraph.common.context.js</i><br /><br /></li> + <li> + <b>(null) RGraph.showPNG([canvas[, event]])</b><br /> + This function allows you to easily facilitate getting a PNG image representation of your chart. + You can use it like this:<br /> + + <pre class="code">myBar.Set('chart.contextmenu', [ + <span style="color: green">['Get PNG', RGraph.showPNG]</span>, + null, + ['Cancel', function () {}] + ]);</pre> + Optionally, you can pass in the canvas as an argument which will be used, meaning now you do not have to use a + context menu (there's an example <a href="png.html"><b>here</b></a>). It WAS originally designed to be used with a context menu, hence it's part of the <i>RGraph.core.context.js</i> + file.<br /> + <i>File: RGraph.common.context.js</i> + <br /><br /> + </li> + + <li> + <b>(number) RGraph.getGutterSuggest(obj, data)</b><br /> + This function returns a suggested gutter setting based on the vertical labels. If the bottom labels are larger, this + setting may be inappropriate. The <i>data</i> variable is a simple single dimension array, <i>eg [1,2,3,4,5]</i>. + <br /> + <pre class="code"> +var size = RGraph.getGutterSuggest(obj, data); +obj.Set('chart.gutter.left', size); +</pre> + <i>File: RGraph.common.core.js</i> + <br /><br /> + </li> + + <li> + <b>(boolean) RGraph.isIE8()</b><br /> + This function tests the useragent for MSIE8.<br /> + <i>File: RGraph.common.core.js</i> + <br /><br /> + </li> + + <li> + <b>(boolean) RGraph.isIE8up()</b><br /> + This function tests the useragent for MSIE8 or higher.<br /> + <i>File: RGraph.common.core.js</i> + <br /><br /> + </li> + + <li> + <b>(boolean) RGraph.isIE9()</b><br /> + This function tests the useragent for MSIE9.<br /> + <i>File: RGraph.common.core.js</i> + <br /><br /> + </li> + + <li> + <b>(boolean) RGraph.isIE9up()</b><br /> + This function tests the useragent for MSIE9 or higher.<br /> + <i>File: RGraph.common.core.js</i> + <br /><br /> + </li> + + <li> + <b>(null) RGraph.background.Draw(obj)</b><br /> + This function is used by the Bar, Gantt, Line and Scatter chart to draw the chart background (but not the axes). + It is passed the chart object which it uses to get the properties it uses:<br /><br /> + + <div> + <div style="float: left"> + <ul> + <li>chart.gutter</li> + <li>chart.variant</li> + <li>chart.text.size</li> + <li>chart.text.font</li> + <li>chart.title</li> + <li>chart.title.xaxis</li> + <li>chart.title.xaxis.pos</li> + <li>chart.title.yaxis</li> + <li>chart.title.yaxis.pos</li> + <li>chart.background.barcolor1</li> + <li>chart.background.grid</li> + <li>chart.background.grid.width</li> + </ul> + </div> + <div style="float: left"> + <ul> + <li>chart.background.grid.autofit</li> + <li>chart.background.grid.autofit.numhlines</li> + <li>chart.background.grid.autofit.numvlines</li> + <li>chart.background.grid.autofit.align</li> + <li>chart.background.grid.hlines</li> + <li>chart.background.grid.vlines</li> + <li>chart.background.grid.hsize</li> + <li>chart.background.grid.vsize</li> + <li>chart.background.grid.color</li> + <li>chart.background.grid.border</li> + <li>chart.background.barcolor2</li> + </ul> + + </div> + </div> + + <br clear="all" /> + + + + <p> + Note that this function also calls RGraph.DrawTitle() in order to draw the title.<br /> + <i>File: RGraph.common.core.js</i> + </p> + + <br /><br /> + </li> + </ul> + + + <a name="skeleton"></a> + <h4>The skeleton file</h4> + <p> + The skeleton object + (<a href="../libraries/RGraph.skeleton.js" target="_blank"><i>RGraph.skeleton.js</i></a>) gives you a base for creating new chart types that + match the RGraph object system (eg getters, setters, RGraph names etc). Example usage of the skeleton object would be: + </p> + + <pre class="code"> +<script> + var myObj = new RGraph.Skeleton('cvs', [3,3,4,5,3,8,3,2,1,9]); + myObj.Set('chart.colors', ['red']); + myObj.Draw(); + + var colors = myObj.Get('chart.colors'); +</script> +</pre> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/docs/async.html b/schall/static/RGraph/docs/async.html new file mode 100644 index 0000000..82490e4 --- /dev/null +++ b/schall/static/RGraph/docs/async.html @@ -0,0 +1,209 @@ +<!DOCTYPE html > +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - Asynchronous processing</title> + + <meta name="keywords" content="rgraph html5 canvas chart docs async asynchronous" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Documentation about asynchronous processing" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A chart library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js"></script> + <script src="../libraries/RGraph.line.js"></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + + <script> + window.onload = function () + { + var duration = (new Date().getTime() - timer.getTime()) / 1000; + document.getElementById("waiting").innerHTML = '<span style="color: green">Done! Extra time taken: ' + duration.toFixed(1) + ' seconds</span>'; + alert('The window.onload event fired, extra time taken: ' + duration.toFixed(1) + ' seconds'); + } + + // Create a timer to show the difference + timer = new Date(); + </script> + + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> +</head> +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + <div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="index.html">Documentation</a> + > + Asynchronous processing + </div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - Asynchronous processing</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + <p id="waiting" style="; font-weight: bold; font-size: 16pt"><span style="color: #aa0">Waiting for onload event...</span></p> + + <p style="background-color: #eee; border: 1px dashed gray; padding: 5px; height: 50px;"> + <span style="display: inline-block; margin-left: 10px; float: right"> + <script> + document.write('<img src="http://ie.microsoft.com/testdrive/HTML5/DOMContentLoaded/whidbey.jpg?' + Math.random() + '" width="50" height="50" /> '); + document.write('<img src="http://ie.microsoft.com/testdrive/HTML5/DOMContentLoaded/window.jpg?' + Math.random() + '" width="50" height="50" /> '); + document.write('<img src="http://ie.microsoft.com/testdrive/HTML5/DOMContentLoaded/whidbey2.jpg?' + Math.random() + '" width="50" height="50" />'); + </script> + </span> + + These images are here to pad the page and slow down loading so that the window.onload event is slowed. This makes the + difference far more visible. + </p> + + <canvas id="myCanvas" width="600" height="250" style="float: right">[No canvas support]</canvas> + + <script> + /** + * Create the line chart + */ + function CreateLineGraph () + { + var line = new RGraph.Line('myCanvas', [1,2,4,2,1,3,5,6,6,5,3,5]); + line.Set('chart.title', 'Sales for Acme Inc.'); + line.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']); + line.Set('chart.hmargin', 10); + line.Set('chart.linewidth', 5); + line.Set('chart.shadow', true); + line.Set('chart.shadow.offsetx', 0); + line.Set('chart.shadow.offsety', 0); + line.Set('chart.shadow.blur', 15); + line.Draw(); + } + + RGraph.Async(CreateLineGraph); + </script> + + <p> + Asynchronous processing can speed up the display of your charts, because the browser gets to your code, sets it + going and then continues on rendering the page. Particularly if you have a weighty page, + it can make quite a difference. The <i>RGraph.Async()</i> function itself is very simple, but because it can make + a significant difference to the speed of your page, it is documented here. There's an example of it to the right. + One thing to remember is to ensure your canvas tag is defined first before you set the function that creates + the chart going. + </p> + + <p> + Although asynchronous processing can speed up your pages, it can also give the appearance of slower pages due to partial + rendering, (ie your pages render a bit at a time). You therefore will need to experiment to get the best result for you. + </p> + + <br clear="all" /> + + <pre class="code"> +<script src="RGraph.common.js"></script> +<script src="RGraph.line.js"></script> + +<canvas id="myCanvas" width="300" height="100">[No canvas support]</canvas> + +<script> + /** + * Create the line chart + */ + function CreateLineGraph () + { + var line = new RGraph.Line('myCanvas', [1,2,4,2,1,3,5,6,6,5,3,5]); + line.Set('chart.title', 'Sales for Acme Inc.'); + line.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']); + line.Set('chart.hmargin', 10); + line.Set('chart.linewidth', 5); + line.Set('chart.shadow', true); + line.Set('chart.shadow.offsetx', 0); + line.Set('chart.shadow.offsety', 0); + line.Set('chart.shadow.blur', 15); + line.Draw(); + } + + RGraph.Async(CreateLineGraph); +</script> +</pre> + + <p><b>Things to remember</b></p> + + <ul> + <li>All your libraries must be loaded first. In the pages <head> for example. If not, you won't be able to create your charts.</li> + <li>Your <canvas> tag must be defined before setting the asynchronous code going. If not, then the canvas may be referenced before it exists, and thus your charts will not be created.</li> + <li> + The users connection speed may be a factor. Slower connections may mean, for example, that the onload event doesn't fire very + quickly. If you're using the onload event to create your charts then asynchronous creation instead may give you more + apparent speed ups. Alternatively, careful placement of the <canvas> tag and the code that creates the chart may suffice + instead. + </li> + <li>Since the MSIE/ExCanvas combo requires you to use the window.onload event, asynchronous chart creation in this case will probably not be any help.</li> + <li> + Since a dev release of version 4, Google Chrome has had an issue when asynchronous processing is used, meaning that + text isn't always displayed. The solution here is simply to not use asynchronous processing. As of 27th March 2010, + Chrome 5 appears to be fine. + </li> + </ul> + + <h4>See also</h4> + + You might also be interested in the alternative, <a href="domcontentloaded.html">DOMContentLoaded</a> event. + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/docs/bar.html b/schall/static/RGraph/docs/bar.html new file mode 100644 index 0000000..72e2590 --- /dev/null +++ b/schall/static/RGraph/docs/bar.html @@ -0,0 +1,791 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - bar charts documentation</title> + + <meta name="keywords" content="rgraph html5 canvas docs bar charts" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Documentation about the Bar charts" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> +</head> +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + <div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="index.html">Documentation</a> + > + Bar charts + </div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - Bar charts documentation</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + <p> + Bar charts, along with Line charts, are the most configurable of all the charts available, + because they're the most common of chart types. + </p> + + <p> + The example file is <a href="../examples/bar.html">here</a>. + </p> + + <ul> + <li><a href="#available.properties">Properties</a></li> + <li><a href="#available.methods">Methods</a></li> + </ul> + + <pre class="code"> +<script> + window.onload = function () + { + var data = [280,45,133,166,84,259,266,960,219,311]; + + var bar = new RGraph.Bar('myCanvas', data); + bar.Set('chart.labels', ['Richard', 'Alex', 'Nick', 'Scott', 'Kjnell', 'Doug', 'Charles', 'Michelle', 'Mark', 'Alison']); + bar.Set('chart.gutter.left', 45); + bar.Set('chart.background.barcolor1', 'rgba(255,255,255,1)'); + bar.Set('chart.background.barcolor2', 'rgba(255,255,255,1)'); + bar.Set('chart.background.grid', true); + bar.Set('chart.colors', ['rgba(255,0,0,1)']); + bar.Draw(); + } +</script> +</pre> + + <a name="available.properties"></a> + <h2>Properties</h2> + + <p> + You can use these properties to control how the bar chart apears. You can set them by using the Set() method. Eg: + </p> + + <p> + <b>myBar.Set('name', 'value');</b> + </p> + + <ul> + <li><a href="#background">Background</a></li> + <li><a href="#axes">Axes properties</a></li> + <li><a href="#colors">Colors</a></li> + <li><a href="#margins">Margins</a></li> + <li><a href="#labels and text">Labels and text</a></li> + <li><a href="#titles">Titles</a></li> + <li><a href="#shadow">Shadow</a></li> + <li><a href="#scale">Scale</a></li> + <li><a href="#key">Key</a></li> + <li><a href="#interactive features">Interactive features</a></li> + <li><a href="#zoom">Zoom</a></li> + <li><a href="#miscellaneous">Miscellaneous</a></li> + </ul> + + +<a name="background"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Background</h3> <a name="chart.background.barcolor1"></a> +<b>chart.background.barcolor1</b><br /> + The color of the background bars, (1 of 2). <br /><i>Default: white</i><br /><br /> + <a name="chart.background.barcolor2"></a> +<b>chart.background.barcolor2</b><br /> + The color of the background bars, (2 of 2). <br /><i>Default: white</i><br /><br /> + <a name="chart.background.grid"></a> +<b>chart.background.grid</b><br /> + Whether to show the background grid or not. <br /><i>Default: true</i><br /><br /> + <a name="chart.background.grid.color"></a> +<b>chart.background.grid.color</b><br /> + The color of the background grid. <br /><i>Default: #ddd</i><br /><br /> + <a name="chart.background.grid.hsize"></a> +<b>chart.background.grid.hsize</b><br /> + The horizontal background grid size. <br /><i>Default: 40</i><br /><br /> + <a name="chart.background.grid.vsize"></a> +<b>chart.background.grid.vsize</b><br /> + The vertical background grid size. <br /><i>Default: 18</i><br /><br /> + <a name="chart.background.grid.width"></a> +<b>chart.background.grid.width</b><br /> + The width that the background grid lines are. Decimals (eg 0.5) are permitted.<br /><i>Default: 1</i><br /><br /> + <a name="chart.background.grid.border"></a> +<b>chart.background.grid.border</b><br /> + Determines whether a border line is drawn around the grid.<br /><i>Default: true</i><br /><br /> + <a name="chart.background.grid.hlines"></a> +<b>chart.background.grid.hlines</b><br /> + Determines whether to draw the horizontal grid lines.<br /><i>Default: true</i><br /><br /> + <a name="chart.background.grid.vlines"></a> +<b>chart.background.grid.vlines</b><br /> + Determines whether to draw the vertical grid lines.<br /><i>Default: true</i><br /><br /> + + <a name="chart.background.grid.autofit"></a> + <b>chart.background.grid.autofit</b><br /> + Instead of specifying a pixel width/height for the background grid, you can use autofit and specify how many horizontal and vertical lines you want.<br /> + <i>Default: true</i><br /><br /> + + <a name="chart.background.grid.autofit.numhlines"></a> + <b>chart.background.grid.autofit.numhlines</b><br /> + When using autofit this allows you to specify how many horizontal grid lines you want. <br /> + <i>Default: 5</i><br /><br /> + + <a name="chart.background.grid.autofit.numvlines"></a> + <b>chart.background.grid.autofit.numvlines</b><br /> + When using autofit this allows you to specify how many vertical grid lines you want. <br /> + <i>Default: 20</i><br /><br /> + + <a name="chart.background.grid.autofit.align"></a> + <b>chart.background.grid.autofit.align</b><br /> + If you want to have your grid lines line up with the labels (both X and Y axes), you can set this to true and RGraph will + attempt to make the grid lines line up. If you have a <i>chart.hmargin</i> set then the alignment will be thrown out.<br /> + <i>Default: false</i><br /><br /> + + <a name="chart.background.hbars"></a> +<b>chart.background.hbars</b><br /> + An array of information stipulating horizontal coloured bars. You can use these to indicate limits. Eg: <i>myBar.Set('hbars', [[75, 10, 'yellow'], [85, 15, 'red']]);</i> This would give you two bars, one red and a lower yellow bar. The units correspond to your scale, and are the starting point and the height.<br /><i>Default: null</i><br /><br /> + + <a name="chart.background.image"></a> + <b>chart.background.image</b><br /> + If you want to specify a background image to use on your chart, specify it with this property.<br /> + <i>Default: null</i><br /><br /> + +<a name="axes"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Axes properties</h3> + + <a name="chart.noaxes"></a> + <b>chart.noaxes</b><br /> + Whether the axes are drawn<br /> + <i>Default: false (the axes ARE drawn)</i><br /><br /> + + <a name="chart.noxaxis"></a> + <b>chart.noxaxis</b><br /> + Whether the X axis is drawn<br /> + <i>Default: false (the X axis IS drawn)</i><br /><br /> + + <a name="chart.noyaxis"></a> + <b>chart.noyaxis</b><br /> + Whether the Y axis is drawn<br /> + <i>Default: false (the Y axis IS drawn)</i><br /><br /> + + <a name="chart.noendxtick"></a> + <b>chart.noendxtick</b><br /> + When you're combining the Bar and Line charts, you may want to use this property to stop the end X tick from + being drawn.<br /> + <i>Default: false (the end tick IS drawn)</i><br /><br /> + +<a name="colors"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Colors</h3> <a name="chart.strokecolor"></a> +<b>chart.strokecolor</b><br /> + The color of the outline of the bars. <br /><i>Default: #666</i><br /><br /> + + <a name="chart.colors"></a> + <b>chart.colors</b><br /> + An array of the colors of the actual bars. <br /> + <i>Default: An array - ['rgb(0,0,255)', '#0f0', '#00f', '#ff0', '#0ff', '#0f0']</i><br /><br /> + + <a name="chart.colors.sequential"></a> + <b>chart.colors.sequential</b><br /> + If true, for regular bar charts, (not stacked or grouped), the colors that you specify will be used in a sequential + fashion.<br /> + <i>Default: false</i><br /><br /> + + <a name="chart.colors.reverse"></a> + <b>chart.colors.reverse</b><br /> + If true, for stacked bar charts only, the colors that you specify will be used in a reverse order to what they are + normally.<br /> + <i>Default: false</i><br /><br /> + +<a name="margins"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Margins</h3> + + <a name="chart.hmargin"></a> + <b>chart.hmargin</b><br /> + The horizontal margin (in pixels) of the chart. The horizontal margin is on the inside of the axes.<br /> + <i>Default: 5</i><br /><br /> + + <a name="chart.gutter.left"></a> + <b>chart.gutter.left</b><br /> + The left gutter of the chart, (the gutter is where the labels and title are)).<br /> + <i>Default: 25</i><br /><br /> + + <a name="chart.gutter.right"></a> + <b>chart.gutter.right</b><br /> + The right gutter of the chart, (the gutter is where the labels and title are).<br /> + <i>Default: 25</i><br /><br /> + + <a name="chart.gutter.top"></a> + <b>chart.gutter.top</b><br /> + The top gutter of the chart, (the gutter is where the labels and title are).<br /> + <i>Default: 25</i><br /><br /> + + <a name="chart.gutter.bottom"></a> + <b>chart.gutter.bottom</b><br /> + The bottom gutter of the chart, (the gutter is where the labels and title are).<br /> + <i>Default: 25</i><br /><br /> + +<a name="labels and text"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Labels and text</h3> <a name="chart.text.color"></a> +<b>chart.text.color</b><br /> + The color of the labels. <br /><i>Default: black</i><br /><br /> + <a name="chart.text.size"></a> +<b>chart.text.size</b><br /> + The size (in points) of the labels. <br /><i>Default: 10</i><br /><br /> + <a name="chart.text.angle"></a> +<b>chart.text.angle</b><br /> + The angle of the horizontal text labels (at the bottom of the chart). This can be one of three values - 0, 45 or 90.<br /><i>Default: 0 (Horizontal)</i><br /><br /> + <a name="chart.text.font"></a> +<b>chart.text.font</b><br /> + The font used to render the text.<br /><i>Default: Verdana</i><br /><br /> + <a name="chart.labels"></a> +<b>chart.labels</b><br /> + An array of the labels to be used on the chart. <br /><i>Default: An empty array</i><br /><br /> + + <a name="chart.labels.above"></a> + <b>chart.labels.above</b><br /> + If true, values will be shown above the bars. For regular and stacked bar charts units are included, whereas for + grouped bar charts they're not (usually there isn't enough space for them). + <br /><i>Default: false</i><br /><br /> + + <a name="chart.labels.above.decimals"></a> + <b>chart.labels.above.decimals</b><br /> + This stipulates how many decimals are used in the above bar labels. + <br /><i>Default: 0</i><br /><br /> + + <a name="chart.labels.above.size"></a> + <b>chart.labels.above.size</b><br /> + The font size of the above bar labels. Useful if you only have a few bars. + <br /><i>Default: false</i><br /><br /> + + <a name="chart.labels.above.angle"></a> + <b>chart.labels.above.angle</b><br /> + You can use this to angle the text shown above the bars. It can be anything from -90 to 90 (degrees). + <br /><i>Default: null</i><br /><br /> + + <a name="chart.labels.ingraph"></a> +<b>chart.labels.ingraph</b><br /> + An array of labels for the chart which are drawn "inside" the chart. If you have 5 data points then this should have a corresponding number of elements, though there is a <a href="misc.html#shorthand.ingraph.labels">shorthand available</a>.<br /><i>Default: null</i><br /><br /> + + <a name="chart.ylabels"></a> + <b>chart.ylabels</b><br /> + Can be <i>true</i> or <i>false</i> and determines whether the chart has Y axis labels.<br /> + <i>Default: true</i><br /><br /> + + <a name="chart.ylabels.count"></a> + <b>chart.ylabels.count</b><br /> + A value that controls how many Y labels there are. Previously (prior to 8th August 2010) this could be 1,3,5. + Now it can be any number, but keep in mind that if you use this it may result in decimals.<br /> + <i>Default: 5</i><br /><br /> + + <a name="chart.ylabels.specific"></a> + <b>chart.ylabels.specific</b><br /> + You can use this option to give your own Y labels (eg ['Low', 'Medium', 'High'].<br /> + <i>Default: null</i><br /><br /> + + <a name="chart.xlabels.offset"></a> +<b>chart.xlabels.offset</b><br /> + This allows you finer grained control over the X label positioning if you need it.<br /><i>Default: 0</i><br /><br /> + <a name="chart.numyticks"></a> +<b>chart.numyticks</b><br /> + The number of Y tickmarks. If you have changed the number of Y labels, you may also want to change this to match. <br /><i>Default: 10</i><br /><br /> +<a name="titles"></a> + +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Titles</h3> + +<a name="chart.title"></a> +<b>chart.title</b><br /> +The title of the chart, if any. <br /> +<i>Default: null</i><br /><br /> + +<a name="chart.title.font"></a> +<b>chart.title.font</b><br /> +The font that the title is rendered in. If not specified the chart.text.font setting is used (usually Verdana)<br /> +<i>Default: null</i><br /><br /> + +<a name="chart.title.size"></a> +<b>chart.title.size</b><br /> +The size of the title. If not specified the size is usually 2pt bigger than the chart.text.size setting.<br /> +<i>Default: null</i><br /><br /> + +<a name="chart.title.bold"></a> +<b>chart.title.bold</b><br /> +Whather the title is bold or not.<br /> +<i>Default: true</i><br /><br /> + +<a name="chart.title.background"></a> +<b>chart.title.background</b><br /> +The background color (if any) for the title.<br /> +<i>Default: null</i><br /><br /> + +<a name="chart.title.color"></a> +<b>chart.title.color</b><br /> + The color of the title.<br /> <i>Default: black</i><br /><br /> + + <a name="chart.title.hpos"></a> + <b>chart.title.hpos</b><br /> + This allows you to completely override the horizontal positioning of the title. It should be a number between 0 and 1, and is multiplied with the whole width of the canvas and then used as the horizontal position.<br /> + <i>Default: null</i><br /><br /> + + + <a name="chart.title.vpos"></a> + <b>chart.title.vpos</b><br /> + This allows you to completely override the vertical positioning of the title. It should be a number between 0 and 1, and is multiplied with the gutter and then used as the vertical position. It can be useful if you need to have a large gutter.<br /> + <i>Default: null</i><br /><br /> + + <a name="chart.title.xaxis"></a> + <b>chart.title.xaxis</b><br /> + This allows to specify a title for the X axis.<br /><i>Default: none</i><br /><br /> + <a name="chart.title.yaxis"></a> + + <a name="chart.title.xaxis.size"></a> + <b>chart.title.xaxis.size</b><br /> + This allows you to specify a size for the X axis title.<br /> + <i>Default: null</i><br /><br /> + + <a name="chart.title.xaxis.font"></a> + <b>chart.title.xaxis.font</b><br /> + This allows to specify a font for the X axis title.<br /> + <i>Default: null</i><br /><br /> + + <a name="chart.title.xaxis.bold"></a> + <b>chart.title.xaxis.bold</b><br /> + This controls whether the X axis title is bold or not.<br /> + <i>Default: true</i><br /><br /> + + <a name="chart.title.yaxis"></a> + <b>chart.title.yaxis</b><br /> + This allows to specify a title for the Y axis.<br /> + <i>Default: none</i><br /><br /> + + <a name="chart.title.yaxis.size"></a> + <b>chart.title.yaxis.size</b><br /> + This allows you to specify a size for the Y axis title.<br /> + <i>Default: null</i><br /><br /> + + <a name="chart.title.yaxis.font"></a> + <b>chart.title.yaxis.font</b><br /> + This allows to specify a font for the Y axis title.<br /> + <i>Default: null</i><br /><br /> + + <a name="chart.title.yaxis.bold"></a> + <b>chart.title.yaxis.bold</b><br /> + This controls whether the Y axis title is bold or not.<br /> + <i>Default: true</i><br /><br /> + + <a name="chart.title.xaxis.pos"></a> +<b>chart.title.xaxis.pos</b><br /> + This is multiplied with the gutter to give the position of the X axis title.<br /><i>Default: 0.25</i><br /><br /> + <a name="chart.title.yaxis.pos"></a> +<b>chart.title.yaxis.pos</b><br /> + This is multiplied with the gutter to give the position of the Y axis title.<br /><i>Default: 0.25</i><br /><br /> + +<!-- + <a name="chart.title.yaxis.position"></a> + <b>chart.title.yaxis.align</b><br /> + Instead of using the option above you can instead use this option, specifying <i>left</i> or <i>right</i>.<br /> + <i>Default: left</i><br /><br /> +--> + +<a name="shadow"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Shadow</h3> <a name="chart.shadow"></a> +<b>chart.shadow</b><br /> + Whether a drop shadow is applied. <br /><i>Default: false</i><br /><br /> + <a name="chart.shadow.color"></a> +<b>chart.shadow.color</b><br /> + The color of the shadow. <br /><i>Default: #666</i><br /><br /> + <a name="chart.shadow.offsetx"></a> +<b>chart.shadow.offsetx</b><br /> + The X offset of the shadow. <br /><i>Default: 3</i><br /><br /> + <a name="chart.shadow.offsety"></a> +<b>chart.shadow.offsety</b><br /> + The Y offset of the shadow. <br /><i>Default: 3</i><br /><br /> + <a name="chart.shadow.blur"></a> +<b>chart.shadow.blur</b><br /> + The severity of the shadow blurring effect. <br /><i>Default: 3</i><br /><br /> + + <a name="scale"></a> + <h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Scale</h3> + + <a name="chart.scale.formatter"></a> + <b>chart.scale.formatter</b><br /> + To allow thoroughly custom formats of numbers in the scale, you can use this option to + specify a function that is used by RGraph to format numbers. This function should + handle ALL of the formatting. Eg:<br /><br /> + <pre class="code"> +function myFormatter(obj, num) +{ + return num + 'F'; // An example of formatting +} +myGraph.Set('chart.scale.formatter', myFormatter); +</pre> + <br /><i>Default: null</i><br /><br /> + + <a name="chart.scale.decimals"></a> + <b>chart.scale.decimals</b><br /> + The number of decimal places to display for the Y scale. + <br /><i>Default: 0</i><br /><br /> + + <a name="chart.scale.point"></a> + <b>chart.scale.point</b><br /> + The character used as the decimal point.<br /><i>Default: .</i><br /><br /> + + <a name="chart.units.pre"></a> + <b>chart.units.pre</b><br /> + The units that the Y axis is measured in. This string is displayed BEFORE the actual number, allowing you to specify values such as "$50".<br /><i>Default: none</i><br /><br /> + + <a name="chart.units.post"></a> + <b>chart.units.post</b><br /> + The units that the Y axis is measured in. This string is displayed AFTER the actual number, allowing you to specify values such as "50ms".<br /><i>Default: none</i><br /><br /> + + <a name="chart.ymax"></a> + <b>chart.ymax</b><br /> + The optional maximum Y scale value. If not specified then it will be calculated.<br /><i>Default: null (It's calculated)</i><br /><br /> + + <a name="chart.ymin"></a> + <b>chart.ymin</b><br /> + The optional minimum Y scale value. If not specified then it will be 0.<br /><i>Default: 0</i><br /><br /> + + + <a name="key"></a> + <h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Key</h3> + + <a name="chart.key"></a> + <b>chart.key</b><br /> + An array of key information. <br /> + <i>Default: [] (An empty array)</i><br /><br /> + + <a name="chart.key.background"></a> + <b>chart.key.background</b><br /> + The color of the key background. Typically white, you could set this to something like rgba(255,255,255,0.7) to allow people to see things behind it.<br> + <i>Default: white</i><br /><br /> + + <a name="chart.key.halign"></a> + <b>chart.key.halign</b><br /> + Instead of specifying the exact x/y coordinates, you can use this property to simply specify whether the key hould be + aligned <i>left</i> or <i>right</i>.<br /> + <i>Default: right</i><br /><br /> + + <a name="chart.key.position"></a> + <b>chart.key.position</b><br /> + Determines the position of the key.Either <b>graph</b> (default), or <b>gutter</b>.<br /> + <i>Default: graph</i><br /><br /> + + <b>chart.key.position.x</b><br /> + This allows you to specify a specific X coordinate for the key.<br /> + <i>Default: null</i><br /><br /> + + <b>chart.key.position.y</b><br /> + This allows you to specify a specific Y coordinate for the key.<br /> + <i>Default: null</i><br /><br /> + + <b>chart.key.position.gutter.boxed</b><br /> + If you have the key in gutter mode (ie horizontal), this allows you to give a background color.<br /> + <i>Default: true</i><br /><br /> + + <a name="chart.key.shadow"></a> + <b>chart.key.shadow</b><br /> + Whether a small drop shadow is applied to the key.<br /> + <i>Default: false</i><br /><br /> + + <a name="chart.key.shadow.color"></a> + <b>chart.key.shadow.color</b><br /> + The color of the shadow.<br /> + <i>Default: #666</i><br /><br /> + + <a name="chart.key.shadow.blur"></a> + <b>chart.key.shadow.blur</b><br /> + The extent of the blurring effect used on the shadow.<br /> + <i>Default: 3</i><br /><br /> + + <a name="chart.key.shadow.offsetx"></a> + <b>chart.key.shadow.offsetx</b><br /> + The X offset of the shadow.<br /> + <i>Default: 2</i><br /><br /> + + <a name="chart.key.shadow.offsety"></a> + <b>chart.key.shadow.offsety</b><br /> + The Y offset of the shadow.<br /> + <i>Default: 2</i><br /><br /> + + <b>chart.key.rounded</b><br /> + This controls whether the corners of the key (in graph mode) are curved. If the key is gutter mode, this has no effect.<br /> + <i>Default: false</i><br /><br /> + + <b>chart.key.color.shape</b><br /> + This can be <i>square</i>, <i>circle</i> or <i>line</i> and controls how the color indicators in the key appear.<br /> + <i>Default: square</i><br /><br /> + + <b>chart.key.linewidth</b><br /> + The line width of the surrounding border on the key.<br /> + <i>Default: 1</i><br /><br /> + + + +<a name="interactive features"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Interactive features</h3> + + <a name="chart.contextmenu"></a> + <b>chart.contextmenu</b><br /> + An array of context menu items. More information on context menus is <a href="context.html">here</a>.<br /> + <i>Default: [] (An empty array)</i><br /><br /> + + <a name="chart.tooltips"></a> +<b>chart.tooltips</b><br /> + A numerically indexed array of tooltips that are shown when a bar is clicked. These can contain HTML.<br /><i>Default: null</i><br /><br /> + <a name="chart.tooltips.effect"></a> +<b>chart.tooltips.effect</b><br /> + The animated effect used for showing tooltips. Can be either <i>fade</i> or <i>expand</i>.<br /><i>Default: fade</i><br /><br /> + + <a name="chart.tooltips.event"></a> + <b>chart.tooltips.event</b><br /> + This is the event that triggers the tooltips. It can be either <i>onclick</i> or <i>onmousemove</i>.<br /> + <i>Default: onclick</i><br /><br /> + + <a name="chart.tooltips.css.class"></a> +<b>chart.tooltips.css.class</b><br /> + This is the name of the CSS class the chart uses.<br /><i>Default: RGraph_tooltip</i><br /><br /> + + <a name="chart.tooltips.override"></a> + <b>chart.tooltips.override</b><br /> + If you wish to handle showing tooltips yourself, this should be a function object which does just that. + There's more information on the <a href="tooltips.html">tooltips documentation page</a><br /> + <i>Default: null</i><br /><br /> + + <a name="chart.tooltips.highlight"></a> + <b>chart.tooltips.highlight</b><br /> + When combining chartss you will need to set this option to fase.<br /> + <i>Default: true</i><br /><br /> + + + <a name="chart.crosshairs"></a> +<b>chart.crosshairs</b><br /> + If true, you will get a crosshair centering on the current mouse position.<br /><i>Default: false</i><br /><br /> + <a name="chart.crosshairs.linewidth"></a> +<b>chart.crosshairs.linewidth</b><br /> + This controls the linewidth of the crosshairs.<br /><i>Default: 1</i><br /><br /> + <a name="chart.crosshairs.color"></a> +<b>chart.crosshairs.color</b><br /> + The color of the crosshairs.<br /><i>Default: #333</i><br /><br /> + + <a name="chart.crosshairs.hlines"></a> + <b>chart.crosshairs.hlines</b><br /> + This determines whether the horizontal crosshair is shown.<br /> + <i>Default: true</i><br /><br /> + + <a name="chart.crosshairs.vlines"></a> + <b>chart.crosshairs.vlines</b><br /> + This determines whether the vertical crosshair is shown.<br /> + <i>Default: true</i><br /><br /> + + + + <a name="chart.annotatable"></a> +<b>chart.annotatable</b><br /> + Whether annotations are enabled for the chart (ie you can draw on the chart interactively.<br /><i>Default: false</i><br /><br /> + <a name="chart.annotate.color"></a> +<b>chart.annotate.color</b><br /> + If you do not allow the use of the palette, then this will be the only colour allowed for annotations.<br /><i>Default: black</i><br /><br /> + + <a name="chart.resizable"></a> + <b>chart.resizable</b><br /> + Defaulting to false, this determines whether your chart will be resizable. Because of the numerous event handlers this has to install code on, This feature is unlikely to work with other dynamic features (the context menu is fine however).<br /> + <i>Default: false</i><br /><br /> + + <a name="chart.resize.handle.background"></a> + <b>chart.resize.handle.background</b><br /> + With this you can specify the background color for the resize handle. If you're adjusting the position of the + handle then you may need this to make the handle stand out more.<br /> + <i>Default: null</i><br /><br /> + + <a name="chart.adjustable"></a> +<b>chart.adjustable</b><br /> + Defaulting to false, this determines whether your bar chart will be adjustable. <br /><i>Default: false</i><br /><br /> + +<a name="zoom"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Zoom</h3> +<a name="chart.zoom.mode"></a> +<b>chart.zoom.mode</b><br /> + Can be used to control whether the zoom is in thumbnail or canvas mode. Possible values are: <i>thumbnail</i> and <i>canvas</i>.<br /><i>Default: canvas</i><br /><br /> + <a name="chart.zoom.factor"></a> +<b>chart.zoom.factor</b><br /> + This is the factor that the chart will be zoomed by (bigger values means more zoom)<br /><i>Default: 1.5</i><br /><br /> + <a name="chart.zoom.fade.in"></a> +<b>chart.zoom.fade.in</b><br /> + Whether the zoomed canvas fades in or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /><i>Default: true</i><br /><br /> + <a name="chart.zoom.fade.out"></a> +<b>chart.zoom.fade.out</b><br /> + Whether the zoomed canvas fades out or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /><i>Default: true</i><br /><br /> + <a name="chart.zoom.hdir"></a> +<b>chart.zoom.hdir</b><br /> + The horizontal direction of the zoom. Possible values are: <i>left</i>, <i>center</i>, <i>right</i><br /><i>Default: right</i><br /><br /> + <a name="chart.zoom.vdir"></a> +<b>chart.zoom.vdir</b><br /> + The vertical direction of the zoom. Possible values are: <i>up</i>, <i>center</i>, <i>down</i><br /><i>Default: down</i><br /><br /> + <a name="chart.zoom.delay"></a> +<b>chart.zoom.delay</b><br /> + The delay (in milliseconds) between frames.<br /><i>Default: 50</i><br /><br /> + <a name="chart.zoom.frames"></a> +<b>chart.zoom.frames</b><br /> + The number of frames in the zoom animation.<br /><i>Default: 10</i><br /><br /> + <a name="chart.zoom.shadow"></a> +<b>chart.zoom.shadow</b><br /> + Whether or not the zoomed canvas has a shadow or not.<br /><i>Default: true</i><br /><br /> + <a name="chart.zoom.thumbnail.width"></a> +<b>chart.zoom.thumbnail.width</b><br /> + When the zoom is in thumbnail mode, this is the width (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br /> + <a name="chart.zoom.thumbnail.height"></a> +<b>chart.zoom.thumbnail.height</b><br /> + When the zoom is in thumbnail mode, this is the height (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br /> + <a name="chart.zoom.background"></a> +<b>chart.zoom.background</b><br /> + Defaulting to true, this determines whether the zoom has a dark, semi-opaque background that covers the entire web page.<br /><i>Default: true</i><br /><br /> + + + <a name="miscellaneous"></a> + <h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Miscellaneous</h3> + <a name="chart.highlight.stroke"></a> + <b>chart.highlight.stroke</b><br /> + If you use tooltips, this controls the colour of the highlight stroke. + <br /><i>Default: black</i><br /><br /> + + <a name="chart.highlight.fill"></a> + <b>chart.highlight.fill</b><br /> + If you use tooltips, this controls the colour of the highlight fill. + <br /><i>Default: rgba(255,255,255,0.5)</i><br /><br /> + +<a name="chart.line"></a> +<b>chart.line</b><br /> + Formerly a boolean, this now stipulates a line chart object which is to be drawn on top of the bar chart. You can see an example <a href="combine.html">here</a>.<br /><i>Default: null</i><br /><br /> + <a name="chart.variant"></a> +<b>chart.variant</b><br /> + This simply stipulates whether you want a regular bar chart, a dot chart, a pyramid chart a 3D chart, a sketch or a glassy chart. Possible values are:<ul><li>bar</li><li>dot</li><li>pyramid</li><li>arrow</li><li>3d</li><li>sketch</li><li>glass</li></ul>The pyramid, dot, arrow, sketch and glass variants are only effective for regular bar charts - not grouped or stacked charts.<br /><i>Default: bar</i><br /><br /> + + <a name="chart.xaxispos"></a> + <b>chart.xaxispos</b><br /> + The position of the X axis. This can be <i>bottom</i>, <i>center</i> or <i>top</i>. <br /> + <i>Default: bottom</i><br /><br /> + + <a name="chart.axis.color"></a> +<b>chart.axis.color</b><br /> + The color of the axes.<br /><i>Default: black</i><br /><br /> + <a name="chart.grouping"></a> +<b>chart.grouping</b><br /> + How the bars are grouped, and it should be one of: <b>grouped</b> or <b>stacked</b><br /><i>Default: grouped</i><br /><br /> +</div> + + <a name="available.methods"></a> + <br /> <br /> + <h2>Methods</h2> + + <a name="getbar"></a> + <b>obj.getBar()</b><br /><br /> + This method makes it easier to get hold of which bar has been clicked on, or hovered over. It returns an array of: + <ul> + <li>The chart object</li> + <li>The X coordinate</li> + <li>The Y coordinate</li> + <li>The width of the bar</li> + <li>The height of the bar</li> + <li>The numerical index of the bar. This corresponds (for example) to the tooltips array, and the coordinates array</li> + </ul> + + An example usage is: + + <pre class="code"> +<canvas id="cvs" width="600" height="250">[No canvas support]</canvas> + +<script src="RGraph.common.core.js"></script> +<script src="RGraph.bar.js"></script> + +<script> + myGraph = new RGraph.Bar('myCanvas', [1.2, 1.3, 1.4, 1.5,6,1.9,2,2.1,2.5]); + myGraph.Set('chart.labels', ['John', 'Barry', 'Rich', 'Craig', 'Tom', 'Frank', 'Helen', 'Joyce', 'Fred']) + myGraph.Draw(); + + RGraph.Register(myGraph); + + myGraph.canvas.onclick = function (e) + { + RGraph.Redraw(); + + var canvas = e.target; + var context = canvas.getContext('2d'); + var obj = canvas.__object__; + <span style="color: green">var coords = obj.getBar(e);</span> + + if (coords) { + var top = coords[1]; + var left = coords[2]; + var width = coords[3]; + var height = coords[4]; + + context.beginPath(); + context.strokeStyle = 'black'; + context.fillStyle = 'rgba(255,255,255,0.5)'; + context.strokeRect(top, left, width, height); + context.fillRect(top, left, width, height); + context.stroke(); + context.fill(); + } + } +</script> +</pre> + + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/docs/basic_combined.html b/schall/static/RGraph/docs/basic_combined.html new file mode 100644 index 0000000..7185d6e --- /dev/null +++ b/schall/static/RGraph/docs/basic_combined.html @@ -0,0 +1,97 @@ +<!DOCTYPE html> +<html> +<head> + + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + + <title>RGraph: HTML5 Javascript charts library - A basic example of a combined Bar/Line chart</title> + + <meta name="keywords" content="rgraph javascript charts html5 canvas basic example f a combined Bar/Line chart" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - A basic example of a combined Bar/Line chart" /> + + <!-- Include the RGraph libraries --> + <script src="../libraries/RGraph.common.core.js" ></script> + <script src="../libraries/RGraph.common.tooltips.js" ></script> + <script src="../libraries/RGraph.bar.js" ></script> + <script src="../libraries/RGraph.line.js" ></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + +</head> + +<body> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - A basic example of a combined Bar/Line chart</h1> + + <!-- The canvas on to which the chart is drawn --> + <canvas id="cvs" width="1000" height="250" !style="border: 1px solid gray">[No canvas support]</canvas> + + <!-- The Javascript code that creates the chart --> + <script> + window.onload = function () + { + /** + * The order in which you create the charts is important - the Line chart must be last + */ + var bar = new RGraph.Bar('cvs', [143,140,141,135,136,132,129,125,126,127,127,129]); + var line = new RGraph.Line('cvs', [23,25,25,26,27,26,28,28,28,27,29,30]); + + /** + * Some Line chart configuration + */ + line.Set('chart.background.grid', false); + line.Set('chart.noaxes', true); + line.Set('chart.linewidth', 3); + line.Set('chart.tickmarks', 'endcircle'); + line.Set('chart.yaxispos', 'right'); + line.Set('chart.ymax', 50); + line.Set('chart.title', 'A combined Bar and Line chart'); + line.Set('chart.tooltips', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']); + + /** + * Some Bar chart configuration + */ + bar.Set('chart.background.grid.autofit', true); + bar.Set('chart.ymax', 250); + bar.Set('chart.gutter.left', 50); + bar.Set('chart.gutter.right', 5); + bar.Set('chart.colors', ['BLUE']); + bar.Set('chart.strokestyle', 'black'); + bar.Set('chart.linewidth', 3); + bar.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']); + bar.Set('chart.tooltips', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']); + + /** + * Add the Line chart to the Bar chart + */ + bar.Set('chart.line', line); + + /** + * Now draw the Bar chart, which also causes the line chart to be drawn + */ + bar.Draw(); + } + </script> + + <p> + This is an example of a Bar chart combined with a Line chart. The source code is documented to make it easier + for you to copy and paste it if you wish. + </p> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/docs/basic_tooltips.html b/schall/static/RGraph/docs/basic_tooltips.html new file mode 100644 index 0000000..c3d591c --- /dev/null +++ b/schall/static/RGraph/docs/basic_tooltips.html @@ -0,0 +1,105 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + + <title>RGraph: HTML5 Javascript charts library - A basic example of Pie charts in tooltips</title> + + <meta name="keywords" content="rgraph javascript charts html5 canvas basic example pie charts tooltips" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - A basic example of Pie charts in tooltips" /> + + <!-- Include the RGraph libraries --> + <script src="../libraries/RGraph.common.core.js" ></script> + <script src="../libraries/RGraph.common.tooltips.js" ></script> + <script src="../libraries/RGraph.bar.js" ></script> + <script src="../libraries/RGraph.pie.js" ></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + +</head> + +<body> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - A basic example of Pie charts in tooltips</h1> + + <canvas id="myBar" width="1000" height="250">[No canvas support]</canvas> + + <script> + window.onload = function () + { + /** + * This creates the Bar chart + */ + var bar = new RGraph.Bar('myBar', [12,13,16,15]); + bar.Set('chart.gutter.left', 35); + bar.Set('chart.colors', ['red']); + bar.Set('chart.title', 'A basic graph with charts in tooltips'); + bar.Set('chart.labels', ['Kev', 'Brian', 'Fred', 'John']); + + // A function which returns the string which is used as every tooltip + bar.Set('chart.tooltips', function () { return '<canvas id="__tooltip__canvas__" width="300" height="200">[No canvas support]</canvas>';}); + + bar.Draw(); + + + /** + * This is the function which ceates the Pie chart (using the custom ontooltip RGraph event + */ + function myCreatePieChart(obj) + { + var canvas = obj.canvas; + var context = obj.context; + var id = obj.id; + + // This gets the tooltip index from the tooltip (which is stored in the RGraph registry) itself + var idx = RGraph.Registry.Get('chart.tooltip').__index__; + + /** + * The Pie chart data. Realistically this would come from a dynamic source, + * eg AJAX + */ + var pieData = [ + [4,5,3,6], + [8,4,5,2], + [4,3,5,1], + [4,2,1,3] + ]; + + var pie = new RGraph.Pie('__tooltip__canvas__', pieData[idx]); + pie.Set('chart.key', ['Monday','Tuesday','Wednesday','Thursday']); + pie.Set('chart.align', 'left'); + pie.Set('chart.gutter.top', 10); + pie.Set('chart.gutter.bottom', 10); + pie.Set('chart.gutter.left', 10); + pie.Set('chart.gutter.right', 10); + pie.Set('chart.exploded', [3,3,3,3]); + pie.Set('chart.strokestyle', 'rgba(0,0,0,0)'); + pie.Draw(); + } + + RGraph.AddCustomEventListener(bar, 'ontooltip', myCreatePieChart); + } + </script> + + <p> + This is a basic example that shows charts (Pie charts) in tooltips. The canvas element is part of the tooltip + HTML code (specified like regular tooltips), and then it uses the <i>ontooltip</i> event to run some code whhich + then creates the Pie chart in the tooltip. + </p> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/docs/bipolar.html b/schall/static/RGraph/docs/bipolar.html new file mode 100644 index 0000000..02ed99b --- /dev/null +++ b/schall/static/RGraph/docs/bipolar.html @@ -0,0 +1,397 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - Bi-polar charts documentation</title> + + <meta name="keywords" content="rgraph html5 canvas chart docs bipolar charts" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Documentation about Bipolar charts" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A chart library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> +</head> +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + <div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="index.html">Documentation</a> + > + Bi-polar charts + </div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - Bi-polar charts documentation</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + <p> + Bi-polar charts are good for comparing two sets of data side by side. For example sales trends for two separate years, that you + want to compare. + </p> + + <p> + The example file is <a href="../examples/bipolar.html">here</a>. + </p> + + <pre class="code"> +<script> + window.onload = function () + { + var left = [5,6,8,9,12,13,4,9]; + var right = [5,8,4,11,15,26,13,16]; + + var bipolar = new RGraph.Bipolar('myBipolar', left, right); + bipolar.Set('chart.colors', ['#fff', '#eef', '#ddf', '#ccf', '#bbf', '#bbf', '#aaf', '#99f']); + bipolar.Set('chart.margin', 3); + bipolar.Set('chart.labels', ['Barry', 'John', 'Fred', 'George', 'Rich', 'Larry', 'John', 'Mike']); + bipolar.Set('chart.title.left', '2007'); + bipolar.Set('chart.title.right', '2008'); + bipolar.Set('chart.gutter.bottom', 45); + bipolar.Draw(); + } +</script> +</pre> + + + <h2>Properties</h2> + + <p> + You can use these properties to control how the chart apears. You can set them by using the Set() method. Eg: + </p> + + <p> + <b>myBipolar.Set('name', 'value');</b> + </p> + + <ul> + <li><a href="#margins">Margins</a></li> + <li><a href="#titles">Titles</a></li> + <li><a href="#colors">Colors</a></li> + <li><a href="#labels, text and axes">Labels, text and axes</a></li> + <li><a href="#scale">Scale</a></li> + <li><a href="#interactive features">Interactive features</a></li> + <li><a href="#shadow">Shadow</a></li> + <li><a href="#zoom">Zoom</a></li> + <li><a href="#miscellaneous">Miscellaneous</a></li> + </ul> + +<a name="margins"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Margins</h3> + + + + <a name="chart.gutter.left"></a> + <b>chart.gutter.left</b><br /> + The left gutter of the chart, (the gutter is where the labels and title are)).<br /> + <i>Default: 25</i><br /><br /> + + <a name="chart.gutter.right"></a> + <b>chart.gutter.right</b><br /> + The right gutter of the chart, (the gutter is where the labels and title are).<br /> + <i>Default: 25</i><br /><br /> + + <a name="chart.gutter.top"></a> + <b>chart.gutter.top</b><br /> + The top gutter of the chart, (the gutter is where the labels and title are).<br /> + <i>Default: 25</i><br /><br /> + + <a name="chart.gutter.bottom"></a> + <b>chart.gutter.bottom</b><br /> + The bottom gutter of the chart, (the gutter is where the labels and title are).<br /> + <i>Default: 25</i><br /><br /> + + <a name="chart.gutter.center"></a> + <b>chart.gutter.center</b><br /> + The center area of the chart that the labels sit in. If your labels are large then you may need to increase this.<br /> + <i>Default: 60</i><br /><br /> + + <a name="chart.margin"></a> + <b>chart.margin</b><br /> + The space above and below each bar. <br /><i>Default: 2</i><br /><br /> + +<a name="titles"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Titles</h3> + +<b>chart.title</b><br /> +The main title of the chart.<br /> +<i>Default: (An empty string)</i><br /><br /> + +<a name="chart.title.background"></a> +<b>chart.title.background</b><br /> +The background color (if any) for the title.<br /> +<i>Default: null</i><br /><br /> + +<a name="chart.title.hpos"></a> +<b>chart.title.hpos</b><br /> + This allows you to completely override the horizontal positioning of the title. It should be a number between 0 and 1, and is multiplied with the whole width of the canvas and then used as the horizontal position. <br /><i>Default: null</i><br /><br /> + <a name="chart.title.vpos"></a> +<b>chart.title.vpos</b><br /> + This allows you to completely override the vertical positioning of the title. It should be a number between 0 and 1, and is multiplied with the gutter and then used as the vertical position. It can be useful if you need to have a large gutter.<br /><i>Default: null</i><br /><br /> + <a name="chart.title.color"></a> +<b>chart.title.color</b><br /> + The color of the title.<br /> <i>Default: black</i><br /><br /> + <a name="chart.title"></a> + +<a name="chart.title.font"></a> +<b>chart.title.font</b><br /> +The font that the title is rendered in. If not specified the chart.text.font setting is used (usually Verdana)<br /> +<i>Default: null</i><br /><br /> + +<a name="chart.title.size"></a> +<b>chart.title.size</b><br /> +The size of the title. If not specified the size is usually 2pt bigger than the chart.text.size setting.<br /> +<i>Default: null</i><br /><br /> + +<a name="chart.title.bold"></a> +<b>chart.title.bold</b><br /> +Whather the title is bold or not.<br /> +<i>Default: true</i><br /><br /> + + <a name="chart.title.left"></a> +<b>chart.title.left</b><br /> + The left title. <br /><i>Default: An empty string</i><br /><br /> + <a name="chart.title.right"></a> +<b>chart.title.right</b><br /> + The right title. <br /><i>Default: An empty string</i><br /><br /> +<a name="colors"></a> + +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Colors</h3> + + <a name="chart.colors"></a> + <b>chart.colors</b><br /> + An array of colors. These too can be gradients that you make if you wish. <br /> + <i>Default: ['#fcf', '#00f', '#f00', '#0f0', '#ff0', '#0ff', '#f0f', '#ff6101', '#b401ff', '#e4ff01', '#fb8195', '#ccc']</i><br /><br /> + + <a name="chart.strokestyle"></a> + <b>chart.strokestyle</b><br /> + This is the color used as the stroke style. If you didn't want it, you could set this to <i>rgba(0,0,0,0)</i><br /> + <i>Default: #333</i><br /><br /> + +<a name="labels, text and axes"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Labels, text and axes</h3> <a name="chart.xtickinterval"></a> +<b>chart.xtickinterval</b><br /> + The X tick mark interval. <br /><i>Default: null</i><br /><br /> + <a name="chart.axis.color"></a> +<b>chart.axis.color</b><br /> + The color of the axes. <br /><i>Default: black</i><br /><br /> + <a name="chart.xmax"></a> +<b>chart.xmax</b><br /> + This allows you to set the maximum X value that the chart uses, instead of it being auto-generated.<br><i>Default: null</i></br><br /><br /> + +<a name="chart.scale.formatter"></a> + <b>chart.scale.formatter</b><br /> + To allow thoroughly custom formats of numbers in the scale, you can use this option to + specify a function that is used by RGraph to format numbers. This function should + handle ALL of the formatting. Eg:<br /><br /> + <pre class="code"> +function myFormatter(obj, num) +{ + return num + 'F'; // An example of formatting +} +myGraph.Set('chart.scale.formatter', myFormatter); +</pre> + <br /><i>Default: null</i><br /><br /> + + <a name="chart.scale.decimals"></a> +<b>chart.scale.decimals</b><br /> + This allows you to set the precision of the X labels.<br /><i>Default: null</i><br /><br /> + <a name="chart.scale.point"></a> +<b>chart.scale.point</b><br /> + The character used as the decimal point.<br /><i>Default: .</i><br /><br /> + <a name="chart.scale.thousand"></a> +<b>chart.scale.thousand</b><br /> + The character used as the thousand separator<br /><i>Default: ,</i><br /><br /> + <a name="chart.labels"></a> +<b>chart.labels</b><br /> + An array of the charts labels (they go in the middle). <br /><i>Default: null</i><br /><br /> + <a name="chart.text.size"></a> +<b>chart.text.size</b><br /> + The size of the text used (in points). <br /><i>Default: 10</i><br /><br /> + <a name="chart.text.font"></a> +<b>chart.text.font</b><br /> + The font used to render the text.<br /><i>Default: Verdana</i><br /><br /> + <a name="chart.text.color"></a> +<b>chart.text.color</b><br /> + The color of the labels. <br /><i>Default: black</i><br /><br /> +<a name="scale"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Scale</h3> <a name="chart.units.pre"></a> + + + <a name="chart.scale.round"></a> + <b>chart.scale.round</b><br /> + Whether to round the maximum scale value up or not. This will produce slightly better scales in some instances.<br /> + <i>Default: null</i><br /><br /> + +<b>chart.units.pre</b><br /> + The units that are applied to the X axis labels (these are pre-pended to the number).<br /><i>Default: none</i><br /><br /> + <a name="chart.units.post"></a> +<b>chart.units.post</b><br /> + The units that are applied to the X axis labels (these are appended to the number).<br /><i>Default: none</i><br /><br /> +<a name="interactive features"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Interactive features</h3> <a name="chart.tooltips"></a> +<b>chart.tooltips</b><br /> + A numerically indexed array of tooltips that are shown when a bar is clicked. These can contain HTML.<br /><i>Default: An empty array</i><br /><br /> + <a name="chart.tooltips.effect"></a> +<b>chart.tooltips.effect</b><br /> + The animated effect used for showing tooltips. Can be either <i>fade</i> or <i>expand</i>.<br /><i>Default: fade</i><br /><br /> + <a name="chart.tooltips.css.class"></a> +<b>chart.tooltips.css.class</b><br /> + This is the name of the CSS class the chart uses.<br /><i>Default: RGraph_tooltip</i><br /><br /> + <a name="chart.tooltips.override"></a> +<b>chart.tooltips.override</b><br /> + If you wish to handle showing tooltips yourself, this should be a function object which does just that. There's more information on the <a href="tooltips.html">tooltips documentation page</a><br /><i>Default: null</i><br /><br /> + <a name="chart.contextmenu"></a> +<b>chart.contextmenu</b><br /> + An array of context menu items. Cannot be used in conjunction with tooltips.<br /><i>Default: [] (An empty array)</i><br /><br /> + <a name="chart.annotatable"></a> +<b>chart.annotatable</b><br /> + Whether annotations are enabled for the chart (ie you can draw on the chart interactively.<br /><i>Default: false</i><br /><br /> + <a name="chart.annotate.color"></a> +<b>chart.annotate.color</b><br /> + If you do not allow the use of the palette, then this will be the only colour allowed for annotations.<br /><i>Default: black</i><br /><br /> + + + <a name="chart.resizable"></a> + <b>chart.resizable</b><br /> + Defaulting to false, this determines whether your chart will be resizable. Because of the numerous event handlers this has to install code on, This feature is unlikely to work with other dynamic features (the context menu is fine however).<br /> + <i>Default: false</i><br /><br /> + + <a name="chart.resize.handle.background"></a> + <b>chart.resize.handle.background</b><br /> + With this you can specify the background color for the resize handle. If you're adjusting the position of the + handle then you may need this to make the handle stand out more.<br /> + <i>Default: null</i><br /><br /> + + +<a name="shadow"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Shadow</h3> <a name="chart.shadow"></a> +<b>chart.shadow</b><br /> + Turns the shadow on or off.<br /> <i>Default: false</i><br /><br /> + <a name="chart.shadow.color"></a> +<b>chart.shadow.color</b><br /> + The color of the shadow.<br /> <i>Default: #666</i><br /><br /> + <a name="chart.shadow.offsetx"></a> +<b>chart.shadow.offsetx</b><br /> + The horizontal offset of the shadow.<br /> <i>Default: 3</i><br /><br /> + <a name="chart.shadow.offsety"></a> +<b>chart.shadow.offsety</b><br /> + The vertical offset of the shadow. <br /> <i>Default: 3</i><br /><br /> + <a name="chart.shadow.blur"></a> +<b>chart.shadow.blur</b><br /> + How severe the blurring effect is for the shadow.<br /> <i>Default: 3</i><br /><br /> +<a name="zoom"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Zoom</h3> <a name="chart.zoom.mode"></a> +<b>chart.zoom.mode</b><br /> + Can be used to control whether the zoom is in thumbnail or canvas mode. Possible values are: <i>thumbnail</i> and <i>canvas</i>.<br /><i>Default: canvas</i><br /><br /> + <a name="chart.zoom.factor"></a> +<b>chart.zoom.factor</b><br /> + This is the factor that the chart will be zoomed by (bigger values means more zoom)<br /><i>Default: 1.5</i><br /><br /> + <a name="chart.zoom.fade.in"></a> +<b>chart.zoom.fade.in</b><br /> + Whether the zoomed canvas fades in or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /><i>Default: true</i><br /><br /> + <a name="chart.zoom.fade.out"></a> +<b>chart.zoom.fade.out</b><br /> + Whether the zoomed canvas fades out or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /><i>Default: true</i><br /><br /> + <a name="chart.zoom.hdir"></a> +<b>chart.zoom.hdir</b><br /> + The horizontal direction of the zoom. Possible values are: <i>left</i>, <i>center</i>, <i>right</i><br /><i>Default: right</i><br /><br /> + <a name="chart.zoom.vdir"></a> +<b>chart.zoom.vdir</b><br /> + The vertical direction of the zoom. Possible values are: <i>up</i>, <i>center</i>, <i>down</i><br /><i>Default: down</i><br /><br /> + <a name="chart.zoom.delay"></a> +<b>chart.zoom.delay</b><br /> + The delay (in milliseconds) between frames.<br /><i>Default: 50</i><br /><br /> + <a name="chart.zoom.frames"></a> +<b>chart.zoom.frames</b><br /> + The number of frames in the zoom animation.<br /><i>Default: 10</i><br /><br /> + <a name="chart.zoom.shadow"></a> +<b>chart.zoom.shadow</b><br /> + Whether or not the zoomed canvas has a shadow or not.<br /><i>Default: true</i><br /><br /> + <a name="chart.zoom.thumbnail.width"></a> +<b>chart.zoom.thumbnail.width</b><br /> + When the zoom is in thumbnail mode, this is the width (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br /> + <a name="chart.zoom.thumbnail.height"></a> +<b>chart.zoom.thumbnail.height</b><br /> + When the zoom is in thumbnail mode, this is the height (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br /> + <a name="chart.zoom.background"></a> +<b>chart.zoom.background</b><br /> + Defaulting to true, this determines whether the zoom has a dark, semi-opaque background that covers the entire web page.<br /><i>Default: true</i><br /><br /> + + + <a name="miscellaneous"></a> + <h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Miscellaneous</h3> + + <a name="chart.highlight.stroke"></a> + <b>chart.highlight.stroke</b><br /> + If you use tooltips, this controls the colour of the highlight stroke. + <br /><i>Default: black</i><br /><br /> + + <a name="chart.highlight.fill"></a> + <b>chart.highlight.fill</b><br /> + If you use tooltips, this controls the colour of the highlight fill. + <br /><i>Default: rgba(255,255,255,0.5)</i><br /><br /> + +</div><!-- /DOCS --><br /><br /> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/docs/bulk-discount.html b/schall/static/RGraph/docs/bulk-discount.html new file mode 100644 index 0000000..a11bb64 --- /dev/null +++ b/schall/static/RGraph/docs/bulk-discount.html @@ -0,0 +1,191 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - documentation</title> + + <meta name="keywords" content="rgraph html5 canvas chart docs" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Documentation index" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A chart library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.jpg"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <meta name="keywords" content="rgraph chart html5 javascript canvas" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library Javascript charts & HTML5 canvas charts library" /> + + <script src="../libraries/RGraph.common.core.js" ></script> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> + +</head> +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + +<div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + Bulk discount +</div> + +<h1>RGraph: <span>HTML5 Javascript charts library</span> - Bulk discount</h1> + +<p> + If you're a web developer or designer wanting to buy licenses for multiple clients, then buying them in bulk can be done by using the + "Buy now..." buttons below. The discounts are as follows: +</p> + +<ul> + <li><a href="#15">15 licenses - 50% discount</a></li> + <li><a href="#10">10 licenses - 35% discount</a></li> + <li><a href="#5">5 licenses - 25% discount</a></li> +</ul> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + <a name="15"></a> + <p> </p> + <h3>15 licenses with 50% discount</h3> + <fieldset> + Use one of these buy now buttons if you wish to purchase 15 RGraph licenses with a 50% discount. + + <div style="text-align: center"> + <form action="https://checkout.google.com/api/checkout/v2/checkoutForm/Merchant/456239608328156" id="BB_BuyButtonForm" method="post" name="BB_BuyButtonForm"> + <input name="item_name_1" type="hidden" value="RGraph License" /> + <input name="item_description_1" type="hidden" value="15 licenses for RGraph: HTML5 Javascript charts library (50% discount)" /> + <input name="item_quantity_1" type="hidden" value="1" /> + <input name="item_price_1" type="hidden" value="592.50" /> + <input name="item_currency_1" type="hidden" value="GBP" /> + <input name="_charset_" type="hidden" value="utf-8" /> + <input alt="" width="116" height="61" src="../images/buy.png" type="image" /> + </form> + + <form action="https://www.paypal.com/cgi-bin/webscr" method="post"> + <input type="hidden" name="cmd" value="_s-xclick"> + <input type="hidden" name="hosted_button_id" value="AVV9K73Y8UHGG"> + <input type="image" src="https://www.paypalobjects.com/en_US/GB/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal — The safer, easier way to pay online."> + <img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1"> + </form> + + + </div> + </fieldset> + + <p /> + + <a name="10"></a> + <p> </p> + <h3>10 licenses with 35% discount</h3> + <fieldset> + Use one of these buy now buttons if you wish to purchase 10 RGraph licenses with a 35% discount. + + <div style="text-align: center"> + <form action="https://checkout.google.com/api/checkout/v2/checkoutForm/Merchant/456239608328156" id="BB_BuyButtonForm" method="post" name="BB_BuyButtonForm"> + <input name="item_name_1" type="hidden" value="RGraph License" /> + <input name="item_description_1" type="hidden" value="10 licenses for RGraph: HTML5 Javascript charts library (35% discount)" /> + <input name="item_quantity_1" type="hidden" value="1" /> + <input name="item_price_1" type="hidden" value="513.5" /> + <input name="item_currency_1" type="hidden" value="GBP" /> + <input name="_charset_" type="hidden" value="utf-8" /> + <input alt="" width="116" height="61" src="../images/buy.png" type="image" /> + </form> + + <form action="https://www.paypal.com/cgi-bin/webscr" method="post"> + <input type="hidden" name="cmd" value="_s-xclick"> + <input type="hidden" name="hosted_button_id" value="NJX94NZABJTSC"> + <input type="image" src="https://www.paypalobjects.com/en_US/GB/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal — The safer, easier way to pay online."> + <img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1"> + </form> + + </div> + </fieldset> + + <p /> + + <a name="5"></a> + <p> </p> + <h3>5 licenses with 25% discount</h3> + <fieldset> + Use one of these buy now buttons if you wish to purchase 5 RGraph licenses with a 25% discount. + + <div style="text-align: center"> + <form action="https://checkout.google.com/api/checkout/v2/checkoutForm/Merchant/456239608328156" id="BB_BuyButtonForm" method="post" name="BB_BuyButtonForm"> + <input name="item_name_1" type="hidden" value="RGraph License" /> + <input name="item_description_1" type="hidden" value="5 licenses for RGraph: HTML5 Javascript charts library (25% discount)" /> + <input name="item_quantity_1" type="hidden" value="1" /> + <input name="item_price_1" type="hidden" value="296.25" /> + <input name="item_currency_1" type="hidden" value="GBP" /> + <input name="_charset_" type="hidden" value="utf-8" /> + <input alt="" width="116" height="61" src="../images/buy.png" type="image" /> + </form> + + <form action="https://www.paypal.com/cgi-bin/webscr" method="post"> + <input type="hidden" name="cmd" value="_s-xclick"> + <input type="hidden" name="hosted_button_id" value="GHTH3WF8JWCE4"> + <input type="image" src="https://www.paypalobjects.com/en_US/GB/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal — The safer, easier way to pay online."> + <img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1"> + </form> + </div> + + </fieldset> + + <p /> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/docs/color.html b/schall/static/RGraph/docs/color.html new file mode 100644 index 0000000..f32df7d --- /dev/null +++ b/schall/static/RGraph/docs/color.html @@ -0,0 +1,217 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - About canvas color definitions</title> + + <meta name="keywords" content="rgraph html5 canvas chart docs color" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Documentation about canvas colors" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A graph library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> +</head> +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + <div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="index.html">Documentation</a> + > + About canvas color definitions + </div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - About canvas color definitions</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + <p> + You will probably want to know the different ways you can define a color. There are a few + ways which you can use, all of which are quite straight-forward. + </p> + + <ul id="colors"> + <li><a href="#named">Named colors</a></li> + <li><a href="#hex">Hex values</a></li> + <li><a href="#rgb">RGB values</a></li> + <li><a href="#rgba">RGBA values</a></li> + <li><a href="#hsl">HSL values</a></li> + <li><a href="#hsla">HSLA values</a></li> + <li><a href="#lgradients">Linear gradients</a></li> + <li><a href="#rgradients">Radial gradients</a></li> + <li><a href="#info">More information</a></li> + </ul> + + <a name="named"></a> + <br /> <br /> + <h2>Named colors</h2> + + <p> + The first, and easiest, is to use named colors. This gives you a range of color values that have been predefined for you. Eg: + </p> + + <pre class="code">myObject.Set('chart.colors', ['red', 'blue']);</pre> + + <a name="hex"></a> + <br /> <br /> + <h2>Hex values</h2> + + <p> + The next, is straight forward hex values like you can use in normal CSS. These consist of a hash sign, + followed by three or six hexadecimal characters. Eg: + </p> + + <pre class="code">myObject.Set('chart.colors', ['#f00', '#0000ff']);</pre> + + <a name="rgb"></a> + <br /> <br /> + <h2>RGB values</h2> + + <p> + Also as used in CSS, RGB values are the same as what you can use in CSS. Eg: + </p> + + <pre class="code">myObject.Set('chart.colors', ['rgb(255,0,0)', 'rgb(0,0,255)']);</pre> + + <a name="rgba"></a> + <br /> <br /> + <h2>RGBA values</h2> + + <p> + Probably new to most people, is rgba(). Similar to regular rgb() values, but with a fourth value that allows you to specify the + alpha value, which stipulates how transparent the color is. An alpha value of 0 is totally transparent, and a value of 1, is + totally opaque (ie. you can't see through it). With a value of 1, rgba() acts exactly like rgb(). This example gives you red + and blue colors that are semi-transparent: + </p> + + <pre class="code">myObject.Set('chart.colors', ['rgba(255,0,0,0.5)', 'rgba(0,0,255,0.5)']);</pre> + + <a name="hsl"></a> + <br /> <br /> + <h2>HSL() values</h2> + + <p> + Also probably quite new to you, are hsl() values. Much like rgb(), but instead of red green and blue, it allows you to specify + the Hue, Saturation and Light values instead. For example: + </p> + + <pre class="code">myObject.Set('chart.colors', ['hsl(255, 100%, 50%)', 'hsl(169, 100%, 50%)']);</pre> + + <a name="hsla"></a> + <br /> <br /> + <h2>HSLA() values</h2> + + <p> + Much like rgb() and rgba(), hsl() has a corresponding hsla() version, which allows you to specify an alpha (transparency) value. + Eg: + </p> + + <pre class="code">myObject.Set('chart.colors', ['hsla(255, 100%, 50%, 0.5)', 'hsla(169, 100%, 50%, 0.5)']);</pre> + + <a name="lgradients"></a> + <br /> <br /> + <h2>Linear gradients</h2> + + <p> + Gradients can be used in place of color values. You can create a linear gradient like so: + </p> + + <pre class="code">myGradient = myObject.context.createLinearGradient(0,0,0,250); +myGradient.addColorStop(0, 'red'); +myGradient.addColorStop(1, 'blue');</pre> + + <p> + This creates a gradient that goes from red to blue. The gradient starts at 0,0, and finishes at 0,250. ie A vertical + gradient. You may not see the whole gradient - that depends on the extent of the shape you're filling. You can use the gradient + in place of a regular color definition. Eg: + </p> + + <pre class="code">myObject.Set('chart.colors', [myGradient]);</pre> + + <a name="rgradients"></a> + <br /> <br /> + <h2>Radial gradients</h2> + + <p> + Radial gradients are much like their linear counterparts, but circular, as the name suggests. Eg: + </p> + + <pre class="code">myGradient = myObject.context.createRadialGradient(0,0,0,0,0,100); +myGradient.addColorStop(0, 'red'); +myGradient.addColorStop(1, 'blue'); +</pre> + + <p> + Instead of four arguments, it takes six - the coordinates of the start point along with the radius, and the coordinates + of the end point, along with the radius. After it has been created, you can treat as you would a linear gradient: + </p> + + <pre class="code">myObject.Set('chart.colors', [myGradient]);</pre> + + <a name="info"></a> + <br /> <br /> + <h2>More information</h2> + + <p> + You can read more about CSS3 color definitions <a href="http://www.w3.org/TR/css3-color/" target="_blank" rel="nofollow">here</a>. + </p> +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/docs/combine.html b/schall/static/RGraph/docs/combine.html new file mode 100644 index 0000000..e3193d9 --- /dev/null +++ b/schall/static/RGraph/docs/combine.html @@ -0,0 +1,463 @@ +<!DOCTYPE html > +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - combining bar and line charts</title> + + <meta name="keywords" content="rgraph html5 canvas chart docs combining" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Documentation about combining charts" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A chart library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js" ></script> + <script src="../libraries/RGraph.common.context.js" ></script> + <script src="../libraries/RGraph.common.tooltips.js" ></script> + <script src="../libraries/RGraph.common.effects.js" ></script> + <script src="../libraries/RGraph.bar.js" ></script> + <script src="../libraries/RGraph.line.js" ></script> + <script src="../libraries/RGraph.pie.js" ></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + + <style> + div.RGraph_tooltip div { + display: inline-block; + width: 10px; + height: 10px; + margin-right: 5px; + } + + div.RGraph_tooltip div#green { + background-color: green; + } + + div.RGraph_tooltip div#red { + background-color: red; + } + + div.RGraph_tooltip div#gray { + background-color: #ccc; + } + </style> + + + <script> + function enlarge_tooltip_graph (e, title) + { + var bg = document.createElement('DIV'); + bg.style.opacity = 0; + bg.style.position = 'fixed'; + bg.style.left = 0; + bg.style.top = 0; + bg.style.width = '2000px'; + bg.style.height = '2000px'; + bg.style.backgroundColor = 'rgba(0,0,0,0.2)'; + bg.style.zIndex = 32568; + bg.style.textAlign = 'center'; + document.body.appendChild(bg); + + var div = document.createElement('DIV'); + div.style.position = 'relative'; + div.style.backgroundColor = 'white'; + div.style.top = '200px'; + div.style.width = '300px' + div.style.height = '240px'; + div.style.padding = '15px'; + div.style.WebkitBorderRadius = '5px'; + div.style.MozBorderRadius = '5px'; + div.style.borderRadius = '5px'; + div.style.left = ((document.body.clientWidth / 2) - 175) + 'px'; + + // Add standard box-shadow and -moz-box-shadow + div.style.WebkitBoxShadow = 'gray 0 0 25px'; + div.style.MozBoxShadow = '0 0 25px gray'; + div.style.boxShadow = '0 0 25px gray'; + + div.style.border = '1px black solid'; + + bg.appendChild(div); + + var canvas = document.createElement('CANVAS'); + canvas.width = 300; + canvas.height = 240; + canvas.id = 'big_pie'; + div.appendChild(canvas); + + bg.onmousedown = function (e) + { + this.style.display = 'none'; + document.body.removeChild(this); + + e.stopPropagation(); + } + + div.onmousedown = function (e) + { + e.stopPropagation(); + } + + var data = e.target.__object__.data; + + var pie = new RGraph.Pie('big_pie', data); + pie.Set('chart.align', 'left'); + pie.Set('chart.colors', ['red','#3F3','#ccc']); + pie.Set('chart.key', ['Jane', 'Fred', 'John']); + pie.Set('chart.key.shadow', true); + pie.Set('chart.key.shadow.blur', 15); + pie.Set('chart.key.shadow.offsetx', 0); + pie.Set('chart.key.shadow.offsety', 0); + pie.Set('chart.key.shadow.color', 'gray'); + pie.Set('chart.key.rounded', true); + pie.Set('chart.gutter.top', 2); + pie.Set('chart.gutter.bottom', 2); + pie.Set('chart.gutter.left', 2); + pie.Set('chart.gutter.right', 2); + pie.Draw(); + + + setTimeout(function () {bg.style.opacity = 0.2;}, 50); + setTimeout(function () {bg.style.opacity = 0.4;}, 100); + setTimeout(function () {bg.style.opacity = 0.6;}, 150); + setTimeout(function () {bg.style.opacity = 0.8;}, 200); + setTimeout(function () {bg.style.opacity = 1;}, 250); + } + </script> + + + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> +</head> +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + <div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="./index.html">Documentation</a> + > + Combining charts + </div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - Combining charts</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + <ul> + <li><a href="#barandline">Combining bar and line charts</a></li> + <li><a href="#combiningline">Combining Line charts</a></li> + </ul> + + <a name="barandline"></a> + <h4>Combining bar and line charts</h4> + + <canvas id="myCanvas" width="600" height="250" style="float: right">[No canvas support]</canvas> + + <script> + var bar = new RGraph.Bar('myCanvas', [4,5,3,4,1,2,6,5,8,4,9,4]); + bar.Set('chart.title', 'A bar/line/pie combination (tooltips)'); + bar.Set('chart.ymax', 15); + bar.Set('chart.text.angle', 45); + bar.Set('chart.colors', ['#ccc', 'red', 'green']); + bar.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']); + bar.Set('chart.tooltips', ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']); + bar.Set('chart.background.grid.autofit', true); + bar.Set('chart.key', ['John', 'Jane', 'Fred']); + bar.Set('chart.key.shadow', true); + bar.Set('chart.key.shadow.offsetx', 0); + bar.Set('chart.key.shadow.offsety', 0); + bar.Set('chart.key.shadow.blur', 10); + bar.Set('chart.key.shadow.color', 'rgba(128,128,128,0.5)'); + bar.Set('chart.key.background', 'white'); + bar.Set('chart.key.rounded', true); + bar.Set('chart.background.grid.autofit', true); + bar.Set('chart.background.grid.autofit.numvlines', 12); + bar.Set('chart.background.grid.autofit.numhlines', 5); + bar.Set('chart.gutter.bottom', 30); + bar.Set('chart.gutter.right', 5); + + // Define the line first so that it can be added to the bar chart + var line = new RGraph.Line('myCanvas', [1,3,4,3,2,1,4,5,2,3,8,8], [5,6,7,9,7,5,6,3,5,2,5,1]); + line.Set('chart.background.grid', false); + line.Set('chart.linewidth', 2); + line.Set('chart.colors', ['red', 'green']); + line.Set('chart.tickmarks', 'circle'); + line.Set('chart.labels.ingraph', ['January',11,,'February']); + line.Set('chart.highlight.fill', 'black'); + + line.Set('chart.animation.unfold.x', true); + + // This would all be done programmatically normally, and linked to the key, so that if you change a name in the key, + // it changes in all of the tooltips too + line.Set('chart.tooltips', [ + '<b>January</b><br /> <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'January\')"></canvas> <div id="red"></div>Jane: 1<br /><div id="green"></div>Fred: 5<br /><div id="gray"></div>John: 4', + '<b>February</b><br /> <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'February\')"></canvas> <div id="red"></div>Jane: 6<br /><div id="green"></div>Fred: 6<br /><div id="gray"></div>John: 5', + '<b>March</b><br /> <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'March\')"></canvas> <div id="red"></div>Jane: 4<br /><div id="green"></div>Fred: 7<br /><div id="gray"></div>John: 3', + '<b>April</b><br /> <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'April\')"></canvas> <div id="red"></div>Jane: 3<br /><div id="green"></div>Fred: 9<br /><div id="gray"></div>John: 4', + '<b>May</b><br /> <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'May\')"></canvas> <div id="red"></div>Jane: 2<br /><div id="green"></div>Fred: 7<br /><div id="gray"></div>John: 1', + '<b>June</b><br /> <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'June\')"></canvas> <div id="red"></div>Jane: 1<br /><div id="green"></div>Fred: 5<br /><div id="gray"></div>John: 2', + '<b>July</b><br /> <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'July\')"></canvas> <div id="red"></div>Jane: 4<br /><div id="green"></div>Fred: 6<br /><div id="gray"></div>John: 6', + '<b>Aug</b><br /> <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'August\')"></canvas> <div id="red"></div>Jane: 5<br /><div id="green"></div>Fred: 3<br /><div id="gray"></div>John: 5', + '<b>September</b><br /> <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'September\')"></canvas> <div id="red"></div>Jane: 2<br /><div id="green"></div>Fred: 5<br /><div id="gray"></div>John: 8', + '<b>October</b><br /> <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'October\')"></canvas> <div id="red"></div>Jane: 3<br /><div id="green"></div>Fred: 2<br /><div id="gray"></div>John: 4', + '<b>November</b><br /> <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'November\')"></canvas> <div id="red"></div>Jane: 8<br /><div id="green"></div>Fred: 5<br /><div id="gray"></div>John: 9', + '<b>December</b><br /> <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'December\')"></canvas> <div id="red"></div>Jane: 8<br /><div id="green"></div>Fred: 1<br /><div id="gray"></div>John: 4', + + '<b>January</b><br /> <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'January\')"></canvas> <div id="red"></div>Jane: 1<br /><div id="green"></div>Fred: 5<br /><div id="gray"></div>John: 4', + '<b>February</b><br /> <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'February\')"></canvas> <div id="red"></div>Jane: 6<br /><div id="green"></div>Fred: 6<br /><div id="gray"></div>John: 5', + '<b>March</b><br /> <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'March\')"></canvas> <div id="red"></div>Jane: 4<br /><div id="green"></div>Fred: 7<br /><div id="gray"></div>John: 3', + '<b>April</b><br /> <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'April\')"></canvas> <div id="red"></div>Jane: 3<br /><div id="green"></div>Fred: 9<br /><div id="gray"></div>John: 4', + '<b>May</b><br /> <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'May\')"></canvas> <div id="red"></div>Jane: 2<br /><div id="green"></div>Fred: 7<br /><div id="gray"></div>John: 1', + '<b>June</b><br /> <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'June\')"></canvas> <div id="red"></div>Jane: 1<br /><div id="green"></div>Fred: 5<br /><div id="gray"></div>John: 2', + '<b>July</b><br /> <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'July\')"></canvas> <div id="red"></div>Jane: 4<br /><div id="green"></div>Fred: 6<br /><div id="gray"></div>John: 6', + '<b>August</b><br /> <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'August\')"></canvas> <div id="red"></div>Jane: 5<br /><div id="green"></div>Fred: 3<br /><div id="gray"></div>John: 5', + '<b>September</b><br /> <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'September\')"></canvas> <div id="red"></div>Jane: 2<br /><div id="green"></div>Fred: 5<br /><div id="gray"></div>John: 8', + '<b>October</b><br /> <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'October\')"></canvas> <div id="red"></div>Jane: 3<br /><div id="green"></div>Fred: 2<br /><div id="gray"></div>John: 4', + '<b>November</b><br /> <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'November\')"></canvas> <div id="red"></div>Jane: 8<br /><div id="green"></div>Fred: 5<br /><div id="gray"></div>John: 9', + '<b>December</b><br /> <canvas width="50" height="50" id="__tooltip_canvas__" style="float: right" onclick="enlarge_tooltip_graph(event, \'December\')"></canvas> <div id="red"></div>Jane: 8<br /><div id="green"></div>Fred: 1<br /><div id="gray"></div>John: 4' + ]); + //line.Set('chart.tooltips.highlight', false); + // No need to call Draw() - the bar chart will do it + + // Add a Line chart tooltip event that draws the tooltip Pie charts + RGraph.AddCustomEventListener(line, 'ontooltip', CreateTooltipGraph); + + + // Add the line chart to the bar chart + + bar.Set('chart.line', line); + + // Now use effects + //line.Draw(); + //bar.Draw(); + RGraph.Effects.Fade.In(bar); + RGraph.Effects.Bar.Grow(bar); + RGraph.Effects.Line.Unfold(bar.Get('chart.line')); + + /** + * This is the function that creates the tooltip charts + */ + function CreateTooltipGraph (obj) + { + // If the tooltip canvas doesn't exist, don't try to create the + // tooltip pie chart + if (!document.getElementById("__tooltip_canvas__")) { + return; + } + + var index = RGraph.Registry.Get('chart.tooltip').__index__; + var tooltip = obj.Get('chart.tooltips')[index]; + + // Extract the data for the obj.Get('chart.tooltips')[index]ie chart froim the tooltip + var jane_data = Number(tooltip.replace(/.*Jane: (\d+).*/, '$1')); + var fred_data = Number(tooltip.replace(/.*Fred: (\d+).*/, '$1')); + var john_data = Number(tooltip.replace(/.*John: (\d+).*/, '$1')); + + var pie_data = [jane_data,fred_data,john_data]; + + // This data could be dynamic + var pie = new RGraph.Pie('__tooltip_canvas__', pie_data); + pie.Set('chart.gutter.top', 2); + pie.Set('chart.gutter.bottom', 2); + pie.Set('chart.gutter.left', 2); + pie.Set('chart.gutter.right', 2); + pie.Set('chart.colors', ['red','#3F3','#ccc']); + //pie.Draw(); + RGraph.Effects.Pie.Grow(pie); + + pie.canvas.style.cursor = 'pointer'; + } + </script> + + <p> + This is an example of combining Bar and Line charts. It's quite straight-forward, and the code here shows you how it can be achieved. + </p> + + <p> + If the values for the line and bar result in different Y scales you may need to specify the <i>chart.ymax</i> property for each chart + so that the scales are the same. The line turns off Y labels so as not to overwrite the Bars labels. + </p> + + <b>Tooltips</b> + + <p> + You can have tooltips on the Line and Bar chart by setting <i>chart.tooltips.highlight</i> to <i>false</i>, as shown. + The order in which you create the charts is also important, you must define the Bar chart first, and subsequently the Line + chart. + </p> + + <h4>Update - 28th August 2011</h4> + <p> + You can now have tooltips on both the Line chart <b>and</b> the Bar chart, as is shown in the chart here. Keep in mind + that you will need to have highlighting turned off on both chart types - <i>chart.tooltips.highlight</i>. + </p> + +<pre class="code"> +<script> + line.Set('chart.tooltips.highlight', false); + bar.Set('chart.tooltips.highlight', false); +</script> +</pre> + + <p> + Because the tooltips are only triggered by the Line chart, you should put all of the information, for both the Line and the + Bar chart, in the tooltips. + </p> + + <a name="combiningline"></a> + <h4>Combining Line charts</h4> + + <!-- This is the canvas that both the line charts use --> + <canvas id="myCanvas2" width="600" height="250" style="float: right">[No canvas support]</canvas> + <script> + line2 = new RGraph.Line('myCanvas2', [51,22,23,33,35,23,32,45]); + line2.Set('chart.hmargin', 10); + line2.Set('chart.labels', ['Kiff', 'Wayne', 'Pete', 'Lou', 'Jake', 'Jo', 'Fred', 'Bob']); + line2.Set('chart.linewidth', 3); + line2.Set('chart.shadow', true); + line2.Set('chart.shadow.offsetx', 2); + line2.Set('chart.shadow.offsety', 2); + line2.Set('chart.ymax', 65); + line2.Set('chart.units.post', 'l'); + line2.Set('chart.noendxtick', true); + line2.Set('chart.title', 'An example of axes both sides'); + line2.Set('chart.title.yaxis', 'Cost ($)'); + line2.Set('chart.title.yaxis.align', 'right'); + line2.Set('chart.title.yaxis.pos', 0.8); + line2.Set('chart.gutter.left', 55); + line2.Set('chart.gutter.right', 55); + line2.Set('chart.background.grid.autofit', true); + line2.Draw(); + + line3 = new RGraph.Line('myCanvas2', [42,50,51,23,46,48,65,11]); + line3.Set('chart.title.yaxis', 'Volume (l)'); + line3.Set('chart.hmargin', 10); + line3.Set('chart.linewidth', 3); + line3.Set('chart.shadow', true); + line3.Set('chart.shadow.offsetx', 2); + line3.Set('chart.shadow.offsety', 2); + line3.Set('chart.yaxispos', 'right'); + line3.Set('chart.gutter.left', 55); + line3.Set('chart.gutter.right', 55); + line3.Set('chart.noendxtick', true); + line3.Set('chart.background.grid', false); + line3.Set('chart.ymax', 100); + line3.Set('chart.colors', ['blue', 'red']); + line3.Set('chart.units.pre', '$'); + line3.Set('chart.key', ['Cost', 'Volume']); + line3.Set('chart.key.background', 'rgba(255,255,255,0.8)'); + line3.Draw(); + </script> + + <p> + Another type of chart you may want is a line chart with Y axes on both sides, as illustrated on the right. You should + be careful with this chart type as it can easily lead to confusion. + </p> + + <p> + This chart is made up from two line charts, one with the Y axis on the left and one on the right. The code that makes up + this chart is below. + </p> + + <p> + The only reason to combine line charts is to get Y axes on the left and right. If you simply want mutiple lines, + you can do this without combining any charts. <a href="../examples/line.html">See the line chart example page</a> + </p> + + <br clear="all" /> + + <pre class="code"> +<script> + window.onload = function + { + line2 = new RGraph.Line('myCanvas2', [51,22,23,33,35,23,32,45]); + line2.Set('chart.hmargin', 10); + line2.Set('chart.labels', ['Kiff', 'Wayne', 'Pete', 'Lou', 'Jake', 'Jo', 'Fred', 'Bob']); + line2.Set('chart.linewidth', 3); + line2.Set('chart.shadow', true); + line2.Set('chart.shadow.offsetx', 2); + line2.Set('chart.shadow.offsety', 2); + line2.Set('chart.ymax', 65); + line2.Set('chart.units.post', 'l'); + line2.Set('chart.noxaxis', true); + line2.Set('chart.noendxtick', true); + line2.Set('chart.title', 'An example of axes both sides'); + line2.Draw(); + + line3 = new RGraph.Line('myCanvas2', [42,50,51,23,46,48,65,11]); + line3.Set('chart.hmargin', 10); + line3.Set('chart.linewidth', 3); + line3.Set('chart.shadow', true); + line3.Set('chart.shadow.offsetx', 2); + line3.Set('chart.shadow.offsety', 2); + line3.Set('chart.yaxispos', 'right'); + line3.Set('chart.noendxtick', true); + line3.Set('chart.background.grid', false); + line3.Set('chart.ymax', 65); + line3.Set('chart.colors', ['blue', 'red']); + line3.Set('chart.units.pre', '$'); + line3.Set('chart.key', ['Cost', 'Volume']); + line3.Set('chart.key.background', 'rgba(255,255,255,0.5)'); + line3.Draw(); + } +</script> +</pre> + + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/docs/context.html b/schall/static/RGraph/docs/context.html new file mode 100644 index 0000000..413b463 --- /dev/null +++ b/schall/static/RGraph/docs/context.html @@ -0,0 +1,371 @@ +<!DOCTYPE html > +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - Context menus</title> + + <meta name="keywords" content="rgraph html5 canvas chart docs context menus" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Documentation about context menus" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A chart library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js" ></script> + <script src="../libraries/RGraph.common.context.js" ></script> + <script src="../libraries/RGraph.common.zoom.js" ></script> + <script src="../libraries/RGraph.bar.js" ></script> + <script src="../libraries/RGraph.line.js" ></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + + <!-- Contextmenu CSS classes --> + <style> + .RGraph_contextmenu { + } + + .RGraph_contextmenu_background { + } + + .RGraph_contextmenu_item { + } + </style> + + + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> +</head> +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + <div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="index.html">Documentation</a> + > + Context menus + </div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - Context menus</h1> + + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + + + <div style="text-align: center; float: right"> + <canvas id="myCanvas" width="500" height="200">[No canvas support]</canvas><br /> + <small>(<a href="#mac">some browsers use a double left click</a>)</small> + </div> + + <ul> + <li><a href="#what">What are context menus?</a></li> + <li><a href="#look">What do they look like?</a></li> + <li><a href="#multiple">Can I have multiple levels of menus?</a></li> + <li><a href="#define">How do I define context menus?</a></li> + <li><a href="#seperators">Can I have "separators"?</a></li> + <li><a href="#bypass">How do I bypass them?</a></li> + <li><a href="#getshape">How do I get the underlying shape that was clicked on?</a></li> + <li><a href="#use">What can I use them for?</a></li> + <li><a href="#mac">Context menus, Macs, Safari, Opera and MSIE 9</a></li> + <li><a href="#events">Related events</a></li> + </ul> + + <a name="what"></a> + <br /> <br /> + <h3>What are context menus?</h3> + + <p> + Context menus are what you see when you click your right mouse button. With RGraph, you can specify custom menus + for your charts if you wish. This way you can define custom actions to be associated with menu items. Context menus are a + very easy way to extend the functionality of your charts, allowing you to associate presentation style functionality + with them. + </p> + + <p> + <b>Important:</b> Opera does not allow you to customise the context menu, so with this browser you + should use the left mouse button on the chart, instead of the right. + </p> + + <a name="look"></a> + <br /> <br /> + <h3>What do they look like?</h3> + + <img src="../images/context.png" width="148" height="90" alt="An RGraph context menu" style="float: right; margin-right: 200px; border: 2px dashed gray; margin-right: 280px" /> + + <p> + Context menus look like the image on the right. You can of course customise their look by using stylesheets. The CSS classes + you need to use are <b>RGraph_contextmenu_background</b>, <b>RGraph_contextmenu</b> and <b>RGraph_contextmenu_item</b>. Eg: + </p> + + <br clear="all" /> + + <pre class="code"> +<style type="text/css"> + .RGraph_contextmenu { + } + + .RGraph_contextmenu_item { + } + + .RGraph_contextmenu_background { + } +</style></pre> + + <p> + The "! important" is not necessary if you're not overriding a style that is set by the chart script. If you're having trouble, + it's a good idea to use it though. + </p> + + <a name="multiple"></a> + <br /> <br /> + <h3>Can I have multiple levels of menus?</h3> + + <p> + Yes, as of 24th April 2010 you can have a dual level context menu, which can reduce "option overload" in your user interface. + This example defines a simple context menu: + </p> + + <pre class="code"> +bar.Set('chart.contextmenu', [ + ['Zoom', RGraph.Zoom], + ['Application', <span style="color: green">[['Login...', function () {ModalDialog.Show('modaldialog_login', 300);}]]</span> ], + null, + ['Cancel', function () {}] + ]); +</pre> + + <p> + As you can see there could easily get to be a lot of arrays, so it may help you during development to structure your code by using + indentation. + </p> + + <a name="define"></a> + <br /> <br /> + <h3>How do I define context menus?</h3> + + <p> + Defining a context menu is quite a simple affair. Eg: + </p> + + <pre class="code"> +myBar.Set('chart.contextmenu', [ + ['Menu item 1', Callback1], + ['Menu item 2', Callback2] + ]);</pre> + + <p> + As you can see, the value is a two dimension array. The second being an array consisting of a string which is used as the name of the + menu item, and a function object (NOT the function name as a string). The function object is the function called when the menu item is selected. + </p> + + <a name="seperators"></a> + <br /> <br /> + <h3>Can I have "separators"?</h3> + + <p> + Yes. Simply pass null instead of an array as your menu item. Eg: + </p> + + <pre class="code"> +myBar.Set('chart.contextmenu', [ + ['Menu item 1', Callback1], + null, + ['Menu item 2', Callback2] + ]);</pre> + + <a name="bypass"></a> + <br /> <br /> + <h3>How do I bypass them?</h3> + + <p> + If for any reason you wish to access the browsers own context menu, you can hold down your CTRL key on your keyboard when you + click, and the canvas context menu will be bypassed. Try it on the chart below by holding your CTRL key whilst right clicking. + </p> + + + + + <a name="getshape"></a> + <br /> <br /> + + <canvas id="cvs" width="600" height="250" style="float: right">[No canvas support]</canvas> + + <h3>How do I get the underlying shape that was clicked on?</h3> + + <p> + In some circumstances you may want to know which bar/point/segment was right-clicked on when showing the context menu (if any). + In these cases you will find the pertinent information (the same as what you get from the various .get*() methods) on the + context menu object - which is held in the registry: <i>RGraph.Registry.Get('chart.contextmenu').__shape__</i>. The example bar chart + shows it in action. + </p> + + <pre class="code"> +<script> + function myListener (obj) + { + p(RGraph.Registry.Get('chart.contextmenu').__shape__) + } + RGraph.AddCustomEventListener(myBar, 'oncontextmenu', myListener); +</script> +</pre> + + + <a name="use"></a> + <br /> <br /> + <h3>What can I use them for?</h3> + + <p> + Since the context menu items run Javascript functions when selected, you can use them for pretty much + anything you want. For example you could make a presentation system, with the context menu controlling which + chart is shown on the canvas, like the example above. + </p> + + <a name="mac"></a> + <br /> <br /> + <h3>Context menus, Macs, Safari, Opera and MSIE 9</h3> + <p> + Mac Safari, Mac Firefox, Windows Safari and MSIE 9 (beta 1) can have trouble displaying the context menu. So for this reason, for these browsers, + the context menu is attached to a double click of the left mouse button. Opera doesn't support customising the context menu so + this browser also uses a left mouse button double click to trigger the context menu. + </p> + + <a name="events"></a> + <br /> <br /> + <h3>Related events</h3> + <p> + There are two context menu related events which you can utilise: + </p> + + <ul> + <li><i>onbeforecontextmenu</i></li> + <li><i>oncontextmenu</i></li> + </ul> + + <p> + As their names suggest, one fires before the contextmenu is shown, and one after. <b>Important:</b> Because of the + fading effect, it may seem that both events fire before the contextmenu is shown, however this is just due to the nature + of Javascript timers and the fact that alert()s will block them (pause them in effect). + </p> + + <script> + /** + * Shows the bar chart + */ + function ShowGraphOne () + { + RGraph.Clear(document.getElementById('myCanvas')); + + var bar = new RGraph.Bar('myCanvas', [[45,15],[16,23],[52,12],[33,64],[34,54],[62,33],[66,23],[12,23],[12,53],[16,45],[26,43],[46,42],[41,41],[32,46]]); + bar.Set('chart.colors', ['#66f', '#f66']); + bar.Set('chart.title', 'Data represented on a bar chart (with context menu)'); + bar.Set('chart.labels', ['1st', '2nd', '3rd', '4th', '5th', '6th', '7th', '8th', '9th', '10th', '11th', '12th', '13th', '14th']); + bar.Set('chart.contextmenu', [['Zoom in', RGraph.Zoom], null, ['Chart', [['Bar chart', ShowGraphOne], ['Line chart', ShowGraphTwo]]], null, ['Cancel', function () {}]]); + bar.Set('chart.grouping', 'grouped'); + bar.Set('chart.zoom.hdir', 'left'); + bar.Set('chart.zoom.vdir', 'center'); + bar.Draw(); + } + + /** + * Show the line chart + */ + function ShowGraphTwo() + { + RGraph.Clear(document.getElementById('myCanvas')); + + var line = new RGraph.Line('myCanvas', [15,23,12,64,54,33,23,23,53,45,43,42,41,46], [45,16,52,33,34,62,66,12,12,16,26,46,41,32]); + line.Set('chart.title', 'Data represented on a line chart (context menu)'); + line.Set('chart.colors', ['#f66', '#66f']); + line.Set('chart.background.barcolor1', 'white'); + line.Set('chart.background.barcolor2', 'white'); + line.Set('chart.tickmarks', null); + line.Set('chart.linewidth', 3); + line.Set('chart.hmargin', 550 / 26); + line.Set('chart.labels', ['1st', '2nd', '3rd', '4th', '5th', '6th', '7th', '8th', '9th', '10th', '11th', '12th', '13th', '14th']); + + line.Set('chart.contextmenu', [['Zoom in', RGraph.Zoom], null, ['Chart', [['Bar chart', ShowGraphOne],['Line chart', ShowGraphTwo]]], null,['Cancel', function () {}]]); + line.Set('chart.zoom.hdir', 'left'); + line.Set('chart.zoom.vdir', 'center'); + + line.Draw(); + } + + /** + * Show the first chart + */ + window.onload = function () + { + ShowGraphOne(); + + var myBar = new RGraph.Bar('cvs', [54,52,64,84,72,65]); + myBar.Set('chart.labels', ['Fred','Rich','Dave','John','Kev','Lou']); + myBar.Set('chart.title', 'A chart showing the context menu .__shape__ property (context)'); + myBar.Set('chart.contextmenu', [['A sample context menu item', function () {}]]); + myBar.Draw(); + + function myListener (obj) + { + p(RGraph.Registry.Get('chart.contextmenu').__shape__) + } + RGraph.AddCustomEventListener(myBar, 'oncontextmenu', myListener); + } + + </script> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/docs/css.html b/schall/static/RGraph/docs/css.html new file mode 100644 index 0000000..687dd5b --- /dev/null +++ b/schall/static/RGraph/docs/css.html @@ -0,0 +1,270 @@ +<!DOCTYPE html > +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - available CSS classes</title> + + <meta name="keywords" content="rgraph html5 canvas charts docs css classes" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Documentation about RGraph CSS classes" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A graph library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <style type="text/css"> + li { + margin: 0 ! important; + } + + li a { + text-decoration: none; + } + </style> + + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> +</head> +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + <div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="index.html">Documentation</a> + > + Available CSS classes + </div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - Available CSS classes</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + <p> + This is information about the CSS classes available to you to allow you to customise the appearance of tooltips and + context menus. + </p> + + <ul> + <li><a href="#RGraph_png">RGraph_png</a></li> + <li><a href="#RGraph_palette">RGraph_palette</a></li> + <li><a href="#RGraph_tooltip">RGraph_tooltip</a></li> + <li><a href="#RGraph_contextmenu">RGraph_contextmenu</a></li> + <li><a href="#RGraph_contextmenu_item">RGraph_contextmenu_item</a></li> + <li><a href="#RGraph_contextmenu_background">RGraph_contextmenu_background</a></li> + <li><a href="#RGraph_zoom_window">RGraph_zoom_window</a></li> + <li><a href="#RGraph_zoomed_canvas">RGraph_zoomed_canvas</a></li> + <li><a href="#RGraph_zoomed_area">RGraph_zoomed_area</a></li> + <li><a href="#ModalDialog_background">ModalDialog_background</a></li> + <li><a href="#ModalDialog_dialog">ModalDialog_dialog</a></li> + <li><a href="#ModalDialog_topbar">ModalDialog_topbar</a></li> + <li><a href="#example">An example usage</a></li> + <li><a href="#important">! important</a></li> + </ul> + + <a name="RGraph_png"></a> + <br /> <br /> + <h2>RGraph_png</h2> + <p> + This controls the appearance of the PNG image which is shown when you use the context menu option <i>RGraph.showPNG()</i>. + </p> + + <a name="RGraph_palette"></a> + <br /> <br /> + <h2>RGraph_palette</h2> + <p> + This controls the appearance of the mini-palette that can be used with annotating. + </p> + + <a name="RGraph_tooltip"></a> + <br /> <br /> + <h2>RGraph_tooltip</h2> + <p> + This controls the appearance of tooltips. The default is to have them look like Windows tooltips. + </p> + + <a name="RGraph_contextmenu"></a> + <br /> <br /> + <h2>RGraph_contextmenu</h2> + <p> + This controls how context menus appear. The default is similar to the look that Windows XP has. + </p> + + <a name="RGraph_contextmenu_item"></a> + <br /> <br /> + <h2>RGraph_contextmenu_item</h2> + <p> + This controls how individual items on the context menu will appear, for example the default has roughly 25px padding-left + to accomodate the left bar. + </p> + + <a name="RGraph_contextmenu_background"></a> + <br /> <br /> + <h2>RGraph_contextmenu_background</h2> + <p> + This is the Windows XP style left vertical bar. By default this is light grey. + </p> + + <a name="RGraph_zoom_window"></a> + <br /> <br /> + <h2>RGraph_zoom_window</h2> + <p> + This is the class to use if you want to customise the mini-zoom window. + </p> + + <a name="RGraph_zoomed_canvas"></a> + <br /> <br /> + <h2>RGraph_zoomed_canvas</h2> + <p> + This is the class to use if you want to customise the full canvas zoom. + </p> + + <a name="RGraph_zoomed_area"></a> + <br /> <br /> + <h2>RGraph_zoomed_area</h2> + <p> + This is the class to use if you want to customise the zoomed area. + </p> + + <a name="ModalDialog_background"></a> + <br /> <br /> + <h2>ModalDialog_background</h2> + <p> + This class controls the dark semi-opaque background for the ModalDialog. + </p> + + <a name="ModalDialog_dialog"></a> + <br /> <br /> + <h2>ModalDialog_dialog</h2> + <p> + This class controls the ModalDialog itself. + </p> + + <a name="ModalDialog_topbar"></a> + <br /> <br /> + <h2>ModalDialog_topbar</h2> + <p> + This class controls the top bar for the ModalDialog. You could, for example, use the <i>display</i> CSS property to + hide this if you don't want it. + </p> + + <a name="example"></a> + <br /> <br /> + <h2>Example usage</h2> + <p> + Here is an example of using the CSS classes. At the time of writing, some of the items here were only implemented in newer + web browsers: + </p> + + <pre class="code"> +<style> + .RGraph_png { + } + + .RGraph_palette { + } + + .RGraph_tooltip { + } + + .RGraph_contextmenu { + } + + .RGraph_contextmenu_background { + } + + .RGraph_contextmenu_item { + } + + .RGraph_zoom_window { + } + + .RGraph_zoomed_canvas { + } + + .RGraph_zoomed_area { + } + + .ModalDialog_background { + } + + .ModalDialog_dialog { + } + + .ModalDialog_topbar { + } +</style> +</pre> + +<a name="important"></a> +<br /> <br /> +<h2>! important</h2> + + <p> + If you're attempting to override default styles, then because of the ordering (ie the script is setting the style AFTER + your own CSS) you may need to use the "! important" modifier, for example: + </p> + + <pre class="code"> +<style> + .RGraph_tooltip { + background-color: white ! important; + } +</style> +</pre> +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/docs/domcontentloaded.html b/schall/static/RGraph/docs/domcontentloaded.html new file mode 100644 index 0000000..5213101 --- /dev/null +++ b/schall/static/RGraph/docs/domcontentloaded.html @@ -0,0 +1,196 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - DOMContentLoaded event</title> + + <meta name="keywords" content="rgraph html5 canvas charts docs domcontentloaded" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - DOMContentLoaded example" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <meta name="keywords" content="rgraph chart html5 javascript canvas" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library Javascript charts and HTML5 canvas charts library" /> + + <script src="../libraries/RGraph.common.core.js" ></script> + <script src="../libraries/RGraph.line.js" ></script> + + <script> + window.onload = function () + { + var duration = (new Date().getTime() - timer.getTime()) / 1000; + document.getElementById("waiting").innerHTML = '<span style="color: green">Done! Extra time taken: ' + duration.toFixed(1) + ' seconds</span>'; + alert('The window.onload event fired, extra time taken: ' + duration.toFixed(1) + ' seconds'); + } + + function myFunc () + { + var line = new RGraph.Line('cvs', [4,3,2,4,5,6,7,4,8,9]); + line.Set('chart.labels', ['Dez', 'Fliss','Geoff','Hoolio','John','Rich','Kev','Charles','Lou','Bob']); + line.Set('chart.hmargin', 5); + line.Set('chart.title', 'A demonstration of the DOMContentLoaded event'); + line.Set('chart.title.vpos', 0.5); + line.Set('chart.tickmarks', 'circle'); + line.Set('chart.linewidth', 1.01); + + if (navigator.userAgent.indexOf('Chrome/6') == -1) { + line.Set('chart.shadow', true); + line.Set('chart.shadow.offsetx', 0); + line.Set('chart.shadow.offsety', 0); + line.Set('chart.shadow.blur', 15); + } + line.Draw(); + } + + /** + * Install the function to the appropriate event + */ + if(window.addEventListener) { + window.addEventListener('DOMContentLoaded', myFunc, false); + } else { + document.attachEvent("onDOMContentLoaded", myFunc); + } + + // Create a timer to show the difference + timer = new Date(); + </script> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> +</head> +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + +<div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="index.html">Documentation</a> + > + DOMContentLoaded event +</div> + +<h1>RGraph: <span>HTML5 Javascript charts library</span> - DOMContentLoaded example</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + <p id="waiting" style="; font-weight: bold; font-size: 16pt"><span style="color: #aa0">Waiting for onload event...</span></p> + + + + + <p style="background-color: #eee; border: 1px dashed gray; padding: 5px; height: 50px;"> + <span style="display: inline-block; margin-left: 10px; float: right"> + <script> + document.write('<img src="http://ie.microsoft.com/testdrive/HTML5/DOMContentLoaded/whidbey.jpg?' + Math.random() + '" width="50" height="50" /> '); + document.write('<img src="http://ie.microsoft.com/testdrive/HTML5/DOMContentLoaded/window.jpg?' + Math.random() + '" width="50" height="50" /> '); + document.write('<img src="http://ie.microsoft.com/testdrive/HTML5/DOMContentLoaded/whidbey2.jpg?' + Math.random() + '" width="50" height="50" />'); + </script> + </span> + + These images are here to pad the page and slow down loading so that the window.onload event is slowed. This makes the + difference far more visible. + </p> + + <canvas id="cvs" width="600" height="250" style="float: right">[No canvas support]</canvas> + + <p> + The DOMContentLoaded event is an extremely useful event and can make a big impact on the performance of your pages, hence this + example. The DOMContentLoaded event fires when the pages HTML and scripts have loaded, but not necessarily any images or CSS. + This can make a big improvement on the apparent speed of your page(s). + </p> + + <p> + You can read more about the <i>DOMContentLoaded</i> event on the Mozilla site, <a href="https://developer.mozilla.org/en/Gecko-Specific_DOM_Events" target="_blank">here</a>, + and the Microsoft site <a href="http://ie.microsoft.com/testdrive/HTML5/87DOMContent-Loaded/Default.html" target="_blank">here</a>. + </p> + + <br clear="all" /> + + <pre class="code"> +function createGraph(func) +{ + if(window.addEventListener) { + window.addEventListener('DOMContentLoaded', func, false); + } else { + document.attachEvent("onDOMContentLoaded", func); + } +} +</pre> + + <h4>Browser support</h4> + + <p> + The DOMContentLoaded event is supported by the following browsers: + </p> + + <ul> + <li>Google Chrome</li> + <li><a href="https://developer.mozilla.org/en/Gecko-Specific_DOM_Events" target="_blank">Mozilla Firefox</a></li> + <li>Apple Safari</li> + <li>Opera ASA. Opera</li> + <li><a href="http://ie.microsoft.com/testdrive/HTML5/87DOMContent-Loaded/Default.html" target="_blank">Microsoft Internet Explorer 9</a></li> + </ul> + + <h4>See also</h4> + + You might also be interested in <a href="async.html">asynchronous</a> chart creation as an alternative. + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/docs/donut.html b/schall/static/RGraph/docs/donut.html new file mode 100644 index 0000000..a8f812f --- /dev/null +++ b/schall/static/RGraph/docs/donut.html @@ -0,0 +1,113 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - donut charts documentation</title> + + <meta name="keywords" content="rgraph html5 canvas charts docs donut charts" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Documentation about Donut charts" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> +</head> +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + <div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="index.html">Documentation</a> + > + Donut charts + </div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - Donut charts documentation</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + <p> + Donut charts were formerly separate charts, however it's now simply a variant of the Pie chart. + </p> + + <pre class="code"> +<script> + window.onload = function () + { + var data = [45,57,48,32]; + + var donut = new RGraph.Pie('myDonut', data); + donut.Set('chart.labels', ['Jan', 'Ben', 'Mark', 'Lucy']); + donut.Set('chart.linewidth', 5); + donut.Set('chart.strokestyle', 'white'); + donut.Set('chart.tooltips', ['Jan', 'Ben', 'Mark', 'Lucy']); + donut.Set('chart.variant', 'donut'); + donut.Draw(); + } +</script> +</pre> + + <ul> + <li><a href="../examples/donut.html">Donut chart examples</a></li> + <li><a href="pie.html">Pie chart documentation</a></li> + </ul> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/docs/dynamic.html b/schall/static/RGraph/docs/dynamic.html new file mode 100644 index 0000000..ceb86e4 --- /dev/null +++ b/schall/static/RGraph/docs/dynamic.html @@ -0,0 +1,232 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - Updating your charts dynamically</title> + + <meta name="keywords" content="rgraph html5 canvas charts docs dynamic" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Updating your charts dynamically" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js" ></script> + <script src="../libraries/RGraph.common.context.js" ></script> + <script src="../libraries/RGraph.line.js" ></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> +</head> +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + +<div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="index.html">Documentation</a> + > + Updating your charts dynamically +</div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - Updating your charts dynamically</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + <canvas id="cvs" width="600" height="250" style="float: right">[No canvas support]</canvas> + <script> + window.onload = function (e) + { + d1 = []; + d2 = []; + + // Pre-pad the arrays with 100 null values + for (var i=0; i<100; ++i) { + d1.push(null); + d2.push(null); + } + + function getGraph(id, d1, d2) + { + var graph = new RGraph.Line(id, d1, d2); + graph.Set('chart.xticks', 100); + graph.Set('chart.background.barcolor1', 'white'); + graph.Set('chart.background.barcolor2', 'white'); + graph.Set('chart.title.xaxis', 'Time >>>'); + graph.Set('chart.title.yaxis', 'Bandwidth (MB/s)'); + graph.Set('chart.title.vpos', 0.5); + graph.Set('chart.title', 'Bandwidth used by servers 1 and 2'); + graph.Set('chart.filled', true); + graph.Set('chart.fillstyle', ['#daf1fa', '#faa']); + graph.Set('chart.colors', ['rgb(169, 222, 244)', 'red']); + graph.Set('chart.linewidth', 1); + //graph.Set('chart.ylabels.inside', true); + graph.Set('chart.yaxispos', 'right'); + graph.Set('chart.ymax', 20); + graph.Set('chart.xticks', 25); + + return graph; + } + + function drawGraph () + { + RGraph.Clear(document.getElementById("cvs")); + + var graph = getGraph('cvs', d1, d2); + graph.Draw(); + + // Add some data to the data arrays + var r1 = RGraph.random(7, 9); + var r2 = RGraph.random(7, 10); + + d1.push(r1); + d2.push(r2); + + if (d1.length > 100) { + d1 = RGraph.array_shift(d1); + d2 = RGraph.array_shift(d2); + } + + if (document.all && RGraph.isIE8()) { + alert('[MSIE] Sorry, Internet Explorer 8 is not fast enough to support animated charts'); + } else { + setTimeout(drawGraph,25); + } + } + + drawGraph(); + } + </script> + + <p> + The example on the right shows a line chart that automatically updates itself every 15 milliseconds. An ideal + use for this could be showing a networks bandwidth usage, or a servers load value. + </p> + + <p> + This particular example shows a stacked line chart with two data series, though if you're showing load/stress values, a + non-filled chart might be a better choice. + </p> + + <p> + To get up-to-date data from your server you could simply have the page refresh itself, storing the data on the server, + or use <a href="index.html#ajax">AJAX</a> if you want the data stored client-side. + </p> + + <p> + Be careful of the data types you use to pass the data to RGraph - you should use numbers to represent values, not strings. + </p> + + <br clear="all" /> + + <pre class="code"> +<canvas id="cvs" width="600" height="250">[No canvas support]</canvas> + +<script> + d1 = []; + d2 = []; + + // Pre-pad the arrays with 100 null values + for (var i=0; i< 100; ++i) { + d1.push(null); + d2.push(null); + } + + function getGraph(id, d1, d2) + { + var graph = new RGraph.Line(id, d1, d2); + graph.Set('chart.background.barcolor1', 'white'); + graph.Set('chart.background.barcolor2', 'white'); + graph.Set('chart.title.xaxis', 'Time'); + graph.Set('chart.filled', true); + graph.Set('chart.fillstyle', ['#daf1fa', '#faa']); + graph.Set('chart.colors', ['rgb(169, 222, 244)', 'red']); + graph.Set('chart.linewidth', 3); + graph.Set('chart.ymax', 20); + graph.Set('chart.xticks', 25); + + return graph; + } + + function drawGraph (e) + { + // Clear the canvas and redraw the chart + RGraph.Clear(document.getElementById("cvs")); + var graph = getGraph('cvs', d1, d2); + graph.Draw(); + + // Add some data to the data arrays + d1.push(RGraph.random(5, 10)); + d2.push(RGraph.random(5, 10)); + + // Get rid of the first values of the arrays + if (d1.length > 100) { + d1 = RGraph.array_shift(d1); + d2 = RGraph.array_shift(d2); + } + + setTimeout(drawGraph,25); + } + + drawGraph(); +</script> +</pre> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/docs/effects.html b/schall/static/RGraph/docs/effects.html new file mode 100644 index 0000000..a1d98e1 --- /dev/null +++ b/schall/static/RGraph/docs/effects.html @@ -0,0 +1,1448 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - Animation and visual effects</title> + + <meta name="keywords" content="rgraph html5 canvas charts animation visual effects" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Documentation about animation and visual effects" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js" ></script> + <script src="../libraries/RGraph.common.tooltips.js" ></script> + <script src="../libraries/RGraph.common.effects.js" ></script> + <script src="../libraries/RGraph.bar.js" ></script> + <script src="../libraries/RGraph.fuel.js" ></script> + <script src="../libraries/RGraph.line.js" ></script> + <script src="../libraries/RGraph.pie.js" ></script> + <script src="../libraries/RGraph.rose.js" ></script> + <script src="../libraries/RGraph.odo.js" ></script> + <script src="../libraries/RGraph.meter.js" ></script> + <script src="../libraries/RGraph.hbar.js" ></script> + <script src="../libraries/RGraph.gauge.js" ></script> + <script src="../libraries/RGraph.radar.js" ></script> + <script src="../libraries/RGraph.waterfall.js" ></script> + <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" ></script> + + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> +</head> + +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + <div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="index.html">Documentation</a> + > + Animation and visual effects + </div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - Animation and visual effects</h1> + + <ul> + <li><a href="#intro">Introduction</a></li> + <li><a href="#example.use">Example use</a></li> + <li><a href="#css.vs.canvas">CSS animation vs <canvas> animation</a></li> + <li><a href="#combining.effects">Combining effects</a></li> + <li><a href="#animate.function">The .Animate() function</a></li> + <li> + <a href="#available.effects">Available Effects</a> + <ul> + <li><a href="#fadein">Fade in</a></li> + <li><a href="#fadeout">Fade out</a></li> + <li><a href="#expand">Expand</a></li> + <li><a href="#snap">Snap</a></li> + <li><a href="#reveal">Reveal</a></li> + <li><a href="#hblinds.open">Horizontal blinds (open)</a></li> + <li><a href="#hblinds.close">Horizontal blinds (close)</a></li> + <li><a href="#vblinds.open">Vertical blinds (open)</a></li> + <li><a href="#vblinds.close">Vertical blinds (open)</a></li> + <li><a href="#pie.grow">Pie chart Grow</a></li> + <li><a href="#pie.implode">Pie chart Implode</a></li> + <li><a href="#pie.roundrobin">Pie chart RoundRobin</a></li> + <li><a href="#bar.grow">Bar chart Grow</a></li> + <li><a href="#fuel.grow">Fuel chart Grow</a></li> + <li><a href="#slideout">Slide out</a></li> + <li><a href="#slidein">Slide in</a></li> + <li><a href="#unfold">Line chart Unfold</a></li> + <li><a href="#unfoldfromcenter">Line chart UnfoldFromCenter</a></li> + <li><a href="#foldtocenter">Line chart FoldToCenter</a></li> + <li><a href="#line.trace">Line chart Trace</a></li> + <li><a href="#rose.grow">Rose chart Grow</a></li> + <li><a href="#odo.grow">Odometer Grow</a></li> + <li><a href="#meter.grow">Meter chart Grow</a></li> + <li><a href="#hbar.grow">HBar chart Grow</a></li> + <li><a href="#gauge.grow">Gauge chart Grow</a></li> + <li><a href="#radar.grow">Radar chart Grow</a></li> + <li><a href="#waterfall.grow">Waterfall chart Grow</a></li> + </ul> + </li> + <li><a href="animation_segments.html">An animated (interactive) Pie chart</a></li> + <li><a href="#things.to.note">Things to note</a></li> + </ul> + + + <a name="intro"></a> + <h3>Introduction</h3> + <p> + The animation and visual effects code is new to RGraph as of August 2011. It greatly simplifies the process of animating your + graphs or using visual effects. + </p> + + + <a name="example.use"></a> + <h3>Example use</h3> + <p> + To use the effects you simply change your call to the .Draw() method to the appropriate effect function, like this: + </p> + + <pre class="code"> +<script src="RGraph.common.core.js" ></script> +<script src="RGraph.line.js" ></script> +<span style="color: green"><script src="RGraph.common.effects.js" ></script> +<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" ></script></span> + +<script> + var myLine = new RGraph.Line('myLine', [14,13,16,18,14,12,11,14,19,18,17,18], [11,12,14,12,11,13,13,15,14,15,13,14]); + myLine.Set('chart.labels', ['Jane','Geoff','Lou','Pob','Verity','Baz','Hue','Olga','Pete','Lou','Kev','Fred']); + myLine.Set('chart.gutter.top', 35); + myLine.Set('chart.gutter.left', 40 ); + myLine.Set('chart.gutter.right', 5); + myLine.Set('chart.gutter.bottom', 10); + + <span style="color: gray">// myLine.Draw();</span> + <span style="color: green">RGraph.Effects.Fade.In(myLine);</span> +</script> +</pre> + + + <a name="css.vs.canvas"></a> + <h3>CSS animation vs <canvas> animation</h3> + <p> + CSS animation (which jQuery does) can be smoother than canvas animation (ie changing the CSS properties vs redrawing the + canvas). This is because CSS animation (ie changing the CSS properties) does not have the side + effect of clearing the canvas, and so does not incur a redraw. + </p> + + <p> + An alternative to the widely known and understood <i>setTimeout()</i> function is the newer <i>requestAnimationFrame()</i>. + This is a function which has been optimised for animation compared to the standard setTimeout() function. Some of + the animation functions use this over the setTimeout() function and going forward newer animation functions will + use it. RGraph has a fallback though so that if the function isn't available the older setTimeout() will be used. + </p> + + + <a name="combining.effects"></a> + <h3>Combining effects</h3> + <p> + Some of the animation effects (ie those that work on separate aspects of the chart) can be combined. As an example the + Fade in/out can be combined with most other animation effects, allowing you to add a fade effect to the other animation + types. An example of this is below - this chart uses the Grow, Fade and Reveal effects. + </p> + +<canvas id="cvs" width="600" height="250">[No canvas support]</canvas><br /> +<script> + myBar = new RGraph.Bar('cvs', [[23,25, 27, 30], [30,25,29, 32], [27,28,35,33], [26,18,29,30], [31,20,25,27], [39,28,28,35], [27,29,28,29], [26,23,26,27], [30,20,19,21], [30,20,19,21], [30,20,19,21]]); + myBar.Set('chart.units.pre', '$'); + myBar.Set('chart.title', 'Sales in the last 8 months'); + myBar.Set('chart.title.vpos', 0.5); + myBar.Set('chart.colors', ['red', 'yellow', 'green', 'orange', 'gray']); + myBar.Set('chart.gutter.left', 40); + myBar.Set('chart.gutter.right', 5); + myBar.Set('chart.gutter.top', 40); + myBar.Set('chart.gutter.bottom', 50); + myBar.Set('chart.shadow', true); + myBar.Set('chart.shadow.color', '#bbb'); + myBar.Set('chart.shadow.blur', 3); + myBar.Set('chart.background.myBarcolor1', 'white'); + myBar.Set('chart.background.myBarcolor2', 'white'); + myBar.Set('chart.background.grid.autofit', true); + myBar.Set('chart.grouping', 'stacked'); + myBar.Set('chart.labels', ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September','October','November','December']); + myBar.Set('chart.labels.above', true); + myBar.Set('chart.key', ['Richard', 'Barry', 'Johnny', 'Frederick']); + myBar.Set('chart.key.background', 'rgba(255,255,255,0.7)'); + myBar.Set('chart.key.position', 'gutter'); + myBar.Set('chart.key.position.gutter.boxed', false); + myBar.Set('chart.key.position.y', myBar.Get('chart.gutter.top') - 15); + myBar.Set('chart.key.border', false); + myBar.Set('chart.background.grid.width', 1); // Decimals are permitted + myBar.Set('chart.text.angle', 35); + myBar.Set('chart.strokestyle', 'rgba(0,0,0,0)'); + myBar.Set('chart.ymax', 150); + + function ShowCombination(obj) + { + RGraph.Effects.Fade.In(obj); + RGraph.Effects.jQuery.Reveal(obj); + RGraph.Effects.Bar.Grow(obj); + } +</script> +<button onclick="ShowCombination(myBar)" style="width: 500px">Show Combining animations example</button> + + <pre class="code"> +<script> + function ShowCombination(obj) + { + RGraph.Effects.Fade.In(obj); + RGraph.Effects.jQuery.Reveal(obj); + RGraph.Effects.Bar.Grow(obj); + } +</script> +<button onclick="ShowCombination(myBar)">Show Combining animations example</button> +</pre> + + <p> + There's another example of combined effects on the <a href="combine.html"><b>combined charts page</b></a>. + </p> + + <a name="animate.function"></a> + <h3>The .Animate() function</h3> + <p> + The .Animate() function function is similar to the jQuery .Animate() function. You can pass it a map of RGraph + properties and their TARGET values and the .Animate() function will move the properties towards those values. + In this way you can animate a variety of RGraph properties. The .Animate() function takes two or three arguments: + </p> + + <ul> + <li>The graph object</li> + <li>A map of the target chart properties</li> + <li>(Optional) A function object which is called when the animation is complete (it is passed the chart object)</li> + </ul> + + <p>An example of it use is below. It should be used instead of calling the .Draw() method:</p> + + <canvas id="animateCanvas" width="600" height="200">[No canvas support]</canvas><br /> + <script> + animateObj = new RGraph.Bar('animateCanvas', [3,8,4,5,9,6,3,5,7,3]); + + var grad = animateObj.context.createLinearGradient(0,25,0,300); + grad.addColorStop(0, 'white'); + grad.addColorStop(1, 'blue'); + + animateObj.Set('chart.colors', [grad]); + animateObj.Set('chart.labels', ['Indigo','Kev','Per','Pete','Lou','Joe','Fred','Carol','Lisa','Jeff']); + animateObj.Set('chart.title', 'An example bar chart'); + animateObj.Set('chart.hmargin', 27.5); + animateObj.Set('chart.tooltips', ['Indigo','Kev','Per','Pete','Lou','Joe','Fred','Carol','Lisa','Jeff']); + + function myAnimateCallback () + { + alert('A sample callback using the alert() function'); + } + </script> + + <button onclick="RGraph.Clear(animateObj.canvas);animateObj.Set('chart.hmargin', 27.5);RGraph.Effects.Animate(animateObj, {'chart.hmargin': 3}, myAnimateCallback);">Show example</button> + + <pre class="code"> +function myCallback (obj) +{ + alert('A sample callback using the alert() function'); +} + +// myBar.Draw(); +RGraph.Effects.Animate(myBar, {'chart.hmargin': 5, 'chart.gutter.left': 50}, myCallback); +</pre> + + <a name="available.effects"></a> + <h3>Available effects</h3> + + <p> + These are the effects available. You can achieve more effects by using the <a href="#animate.function">.Animate()</a> function, + which allows you to animate any numeric RGraph property. + </p> + + +<!------------------------------------------------------------------------------------------> + + + <div> + <a name="fadein"></a> + <h4>Fade in</h4> + + <canvas id="myLine" width="480" height="150">[No canvas support]</canvas><br /> + <button onclick="RGraph.Effects.Fade.In(myLine);" style="width: 500px">Show Fade in effect</button> + + <p /> + + A simple fade in effect where the canvas is initially drawn with an opacity of zero, increasing to one. + + <pre class="code">RGraph.Effects.Fade.In(obj);</pre> + </div> + + <script> + var data = [1,2,4,6,8,10,12,15,21,29,36,45]; + var labels = ['Jan','Feb','Mar','Apr','May','jun','jul','Aug','Sep','Oct','Nov','Dec'] + + var myLine = new RGraph.Line('myLine', data); + myLine.Set('chart.gutter.top', 35); + myLine.Set('chart.gutter.left', 40 ); + myLine.Set('chart.gutter.right', 5); + myLine.Set('chart.gutter.bottom', 25); + myLine.Set('chart.colors', ['red', 'black']); + myLine.Set('chart.units.post', '%'); + myLine.Set('chart.tickmarks', null); + myLine.Set('chart.shadow', true); + myLine.Set('chart.shadow.offsety', RGraph.isIE8() ? 3 : 0); + myLine.Set('chart.shadow.offsetx', RGraph.isIE8() ? 3 : 0); + myLine.Set('chart.shadow.blur', 15); + myLine.Set('chart.shadow.color', '#f66'); + myLine.Set('chart.linewidth', 1); + myLine.Set('chart.hmargin', 10); + myLine.Set('chart.background.grid.width', 1); + myLine.Set('chart.background.grid.color', '#ddd'); + myLine.Set('chart.background.barcolor1', 'white'); + myLine.Set('chart.background.barcolor2', 'white'); + myLine.Set('chart.background.grid.autofit', true); + myLine.Set('chart.background.grid.autofit.numvlines', 12); + myLine.Set('chart.background.grid.autofit.numhlines', 5); + myLine.Set('chart.text.color', '#333'); + myLine.Set('chart.noaxes', true); + myLine.Set('chart.text.font', 'Arial'); + myLine.Set('chart.labels', labels); + </script> + + +<!------------------------------------------------------------------------------------------> + + + <div> + <a name="fadeout"></a> + <h4>Fade out</h4> + + <canvas id="myLine2" width="480" height="150">[No canvas support]</canvas><br /> + <button onclick="RGraph.Effects.Fade.Out(myLine2);" style="width: 500px">Show Fade out effect</button> + + <p /> + + A simple fade out effect to accompany the fade in, where the canvas initially has an opacity of one, decreasing + to zero. + + <pre class="code">RGraph.Effects.Fade.Out(obj);</pre> + </div> + + <script> + var myLine2 = new RGraph.Line('myLine2', data); + myLine2.Set('chart.gutter.top', 35); + myLine2.Set('chart.gutter.left', 40 ); + myLine2.Set('chart.gutter.right', 5); + myLine2.Set('chart.gutter.bottom', 25); + myLine2.Set('chart.colors', ['red', 'black']); + myLine2.Set('chart.units.post', '%'); + myLine2.Set('chart.tickmarks', null); + myLine2.Set('chart.shadow', true); + myLine2.Set('chart.shadow.offsety', RGraph.isIE8() ? 3 : 0); + myLine2.Set('chart.shadow.offsetx', RGraph.isIE8() ? 3 : 0); + myLine2.Set('chart.shadow.blur', 15); + myLine2.Set('chart.shadow.color', '#f66'); + myLine2.Set('chart.linewidth', 1); + myLine2.Set('chart.hmargin', 10); + myLine2.Set('chart.background.grid.width', 1); + myLine2.Set('chart.background.grid.color', '#ddd'); + myLine2.Set('chart.background.barcolor1', 'white'); + myLine2.Set('chart.background.barcolor2', 'white'); + myLine2.Set('chart.background.grid.autofit', true); + myLine2.Set('chart.background.grid.autofit.numvlines', 12); + myLine2.Set('chart.background.grid.autofit.numhlines', 5); + myLine2.Set('chart.text.color', '#333'); + myLine2.Set('chart.noaxes', true); + myLine2.Set('chart.text.font', 'Arial'); + myLine2.Set('chart.labels', labels); + myLine2.Draw(); + </script> + + +<!------------------------------------------------------------------------------------------> + + + <div> + <a name="expand"></a> + <h4>Expand</h4> + + <canvas id="myLine3" width="480" height="150" style="float: left">[No canvas support]</canvas> + <br clear="all" /> + <button onclick="RGraph.Effects.jQuery.Expand(myLine3)" style="width: 500px">Show Expand effect</button> + + <p /> + + This effect starts initially with the canvases CSS width and height set to 0 and over a period of half a second + increases them to 100%. + + <pre class="code">RGraph.Effects.jQuery.Expand(obj);</pre> + </div> + + <script> + var myLine3 = new RGraph.Line('myLine3', data); + myLine3.Set('chart.gutter.top', 35); + myLine3.Set('chart.gutter.left', 40 ); + myLine3.Set('chart.gutter.right', 5); + myLine3.Set('chart.gutter.bottom', 25); + myLine3.Set('chart.colors', ['red', 'black']); + myLine3.Set('chart.units.post', '%'); + myLine3.Set('chart.tickmarks', null); + myLine3.Set('chart.shadow', true); + myLine3.Set('chart.shadow.offsety', RGraph.isIE8() ? 3 : 0); + myLine3.Set('chart.shadow.offsetx', RGraph.isIE8() ? 3 : 0); + myLine3.Set('chart.shadow.blur', 15); + myLine3.Set('chart.shadow.color', '#f66'); + myLine3.Set('chart.linewidth', 1); + myLine3.Set('chart.hmargin', 10); + myLine3.Set('chart.background.grid.width', 1); + myLine3.Set('chart.background.grid.color', '#ddd'); + myLine3.Set('chart.background.barcolor1', 'white'); + myLine3.Set('chart.background.barcolor2', 'white'); + myLine3.Set('chart.background.grid.autofit', true); + myLine3.Set('chart.background.grid.autofit.numvlines', 12); + myLine3.Set('chart.background.grid.autofit.numhlines', 5); + myLine3.Set('chart.text.color', '#333'); + myLine3.Set('chart.noaxes', true); + myLine3.Set('chart.text.font', 'Arial'); + myLine3.Set('chart.labels', labels); + </script> + + +<!------------------------------------------------------------------------------------------> + + + <div> + <a name="snap"></a> + <h4>Snap</h4> + + <canvas id="myLine4" width="480" height="150">[No canvas support]</canvas><br /> + <button onclick="RGraph.Effects.jQuery.Snap(myLine4);">Show Snap effect</button> + + <p /> + + This effect is similar to the tooltip effect "snap" in that it "snaps" to the correct position, + moving in from the top left. + + <pre class="code">RGraph.Effects.jQuery.Snap(obj);</pre> + </div> + + <script> + var myLine4 = new RGraph.Line('myLine4', data); + myLine4.Set('chart.gutter.top', 35); + myLine4.Set('chart.gutter.left', 40 ); + myLine4.Set('chart.gutter.right', 5); + myLine4.Set('chart.gutter.bottom', 25); + myLine4.Set('chart.colors', ['red', 'black']); + myLine4.Set('chart.units.post', '%'); + myLine4.Set('chart.tickmarks', null); + myLine4.Set('chart.shadow', true); + myLine4.Set('chart.shadow.offsety', RGraph.isIE8() ? 3 : 0); + myLine4.Set('chart.shadow.offsetx', RGraph.isIE8() ? 3 : 0); + myLine4.Set('chart.shadow.blur', 15); + myLine4.Set('chart.shadow.color', '#f66'); + myLine4.Set('chart.linewidth', 1); + myLine4.Set('chart.hmargin', 10); + myLine4.Set('chart.background.grid.width', 1); + myLine4.Set('chart.background.grid.color', '#ddd'); + myLine4.Set('chart.background.barcolor1', 'white'); + myLine4.Set('chart.background.barcolor2', 'white'); + myLine4.Set('chart.background.grid.autofit', true); + myLine4.Set('chart.background.grid.autofit.numvlines', 12); + myLine4.Set('chart.background.grid.autofit.numhlines', 5); + myLine4.Set('chart.text.color', '#333'); + myLine4.Set('chart.noaxes', true); + myLine4.Set('chart.text.font', 'Arial'); + myLine4.Set('chart.labels', labels); + </script> + + +<!------------------------------------------------------------------------------------------> + + + <div> + <a name="reveal"></a> + <h4>Reveal</h4> + + <canvas id="myLine5" width="480" height="150">[No canvas support]</canvas><br /> + <button onclick="RGraph.Effects.jQuery.Reveal(myLine5);">Show Reveal effect</button> + + <p /> + + This effect starts with the the canvas covered and is slowly revealed from the center outwards. The canvas + is at all times the same size (ie it's not resizd as with the Expand effect). + + <pre class="code">RGraph.Effects.jQuery.Reveal(obj);</pre> + </div> + + <script> + var myLine5 = new RGraph.Line('myLine5', data); + myLine5.Set('chart.gutter.top', 35); + myLine5.Set('chart.gutter.left', 40 ); + myLine5.Set('chart.gutter.right', 5); + myLine5.Set('chart.gutter.bottom', 25); + myLine5.Set('chart.colors', ['red', 'black']); + myLine5.Set('chart.units.post', '%'); + myLine5.Set('chart.tickmarks', null); + myLine5.Set('chart.shadow', true); + myLine5.Set('chart.shadow.offsety', RGraph.isIE8() ? 3 : 0); + myLine5.Set('chart.shadow.offsetx', RGraph.isIE8() ? 3 : 0); + myLine5.Set('chart.shadow.blur', 15); + myLine5.Set('chart.shadow.color', '#f66'); + myLine5.Set('chart.linewidth', 1); + myLine5.Set('chart.hmargin', 10); + myLine5.Set('chart.background.grid.width', 1); + myLine5.Set('chart.background.grid.color', '#ddd'); + myLine5.Set('chart.background.barcolor1', 'white'); + myLine5.Set('chart.background.barcolor2', 'white'); + myLine5.Set('chart.background.grid.autofit', true); + myLine5.Set('chart.background.grid.autofit.numvlines', 12); + myLine5.Set('chart.background.grid.autofit.numhlines', 5); + myLine5.Set('chart.text.color', '#333'); + myLine5.Set('chart.noaxes', true); + myLine5.Set('chart.text.font', 'Arial'); + myLine5.Set('chart.labels', labels); + </script> + + +<!------------------------------------------------------------------------------------------> + + + <div> + <a name="hblinds.open"></a> + <h4>Horizontal Blinds (open)</h4> + + <canvas id="myLine6" width="480" height="150">[No canvas support]</canvas><br /> + <button onclick="RGraph.Effects.jQuery.HBlinds.Open(myLine6)">Show horizontal blinds (open) effect</button> + + <p /> + + This effect gradually reveals the canvas by "opening some horizontal blinds", which are positioned + over the canvas. + + <pre class="code">RGraph.Effects.jQuery.Blinds.Open(obj);</pre> + </div> + + <script> + var myLine6 = new RGraph.Line('myLine6', data); + myLine6.Set('chart.gutter.top', 35); + myLine6.Set('chart.gutter.left', 40 ); + myLine6.Set('chart.gutter.right', 5); + myLine6.Set('chart.gutter.bottom', 25); + myLine6.Set('chart.colors', ['red', 'black']); + myLine6.Set('chart.units.post', '%'); + myLine6.Set('chart.tickmarks', null); + myLine6.Set('chart.shadow', true); + myLine6.Set('chart.shadow.offsety', RGraph.isIE8() ? 3 : 0); + myLine6.Set('chart.shadow.offsetx', RGraph.isIE8() ? 3 : 0); + myLine6.Set('chart.shadow.blur', 15); + myLine6.Set('chart.shadow.color', '#f66'); + myLine6.Set('chart.linewidth', 1); + myLine6.Set('chart.hmargin', 10); + myLine6.Set('chart.background.grid.width', 1); + myLine6.Set('chart.background.grid.color', '#ddd'); + myLine6.Set('chart.background.barcolor1', 'white'); + myLine6.Set('chart.background.barcolor2', 'white'); + myLine6.Set('chart.background.grid.autofit', true); + myLine6.Set('chart.background.grid.autofit.numvlines', 12); + myLine6.Set('chart.background.grid.autofit.numhlines', 5); + myLine6.Set('chart.text.color', '#333'); + myLine6.Set('chart.noaxes', true); + myLine6.Set('chart.text.font', 'Arial'); + myLine6.Set('chart.labels', labels); + </script> + + +<!------------------------------------------------------------------------------------------> + + + <div> + <a name="hblinds.close"></a> + <h4>Horizontal Blinds (close)</h4> + + <canvas id="myLine7" width="480" height="150">[No canvas support]</canvas><br /> + <button onclick="RGraph.Effects.jQuery.HBlinds.Close(myLine7);">Show horizonatal blinds (Close) effect</button> + + <p /> + + This effect gradually conceals the canvas by "closing some horizontal blinds", which are positioned + over the canvas. + + <pre class="code">RGraph.Effects.jQuery.HBlinds.Close(obj);</pre> + </div> + + <script> + var myLine7 = new RGraph.Line('myLine7', data); + myLine7.Set('chart.gutter.top', 35); + myLine7.Set('chart.gutter.left', 40 ); + myLine7.Set('chart.gutter.right', 5); + myLine7.Set('chart.gutter.bottom', 25); + myLine7.Set('chart.colors', ['red', 'black']); + myLine7.Set('chart.units.post', '%'); + myLine7.Set('chart.tickmarks', null); + myLine7.Set('chart.shadow', true); + myLine7.Set('chart.shadow.offsety', RGraph.isIE8() ? 3 : 0); + myLine7.Set('chart.shadow.offsetx', RGraph.isIE8() ? 3 : 0); + myLine7.Set('chart.shadow.blur', 15); + myLine7.Set('chart.shadow.color', '#f66'); + myLine7.Set('chart.linewidth', 1); + myLine7.Set('chart.hmargin', 10); + myLine7.Set('chart.background.grid.width', 1); + myLine7.Set('chart.background.grid.color', '#ddd'); + myLine7.Set('chart.background.barcolor1', 'white'); + myLine7.Set('chart.background.barcolor2', 'white'); + myLine7.Set('chart.background.grid.autofit', true); + myLine7.Set('chart.background.grid.autofit.numvlines', 12); + myLine7.Set('chart.background.grid.autofit.numhlines', 5); + myLine7.Set('chart.text.color', '#333'); + myLine7.Set('chart.noaxes', true); + myLine7.Set('chart.text.font', 'Arial'); + myLine7.Set('chart.labels', labels); + myLine7.Draw(); + </script> + + +<!------------------------------------------------------------------------------------------> + + + <div> + <a name="vblinds.open"></a> + <h4>Vertical Blinds (open)</h4> + + <canvas id="myLine8" width="480" height="150">[No canvas support]</canvas><br /> + <button onclick="RGraph.Effects.jQuery.VBlinds.Open(myLine8);"">Show vertical blinds (Open) effect</button> + + <p /> + + This effect gradually reveals the canvas by "opening some vertical blinds", which are positioned + over the canvas. + + <pre class="code">RGraph.Effects.jQuery.VBlinds.Open(obj);</pre> + </div> + + <script> + var myLine8 = new RGraph.Line('myLine8', data); + myLine8.Set('chart.gutter.top', 35); + myLine8.Set('chart.gutter.left', 40 ); + myLine8.Set('chart.gutter.right', 5); + myLine8.Set('chart.gutter.bottom', 25); + myLine8.Set('chart.colors', ['red', 'black']); + myLine8.Set('chart.units.post', '%'); + myLine8.Set('chart.tickmarks', null); + myLine8.Set('chart.shadow', true); + myLine8.Set('chart.shadow.offsety', RGraph.isIE8() ? 3 : 0); + myLine8.Set('chart.shadow.offsetx', RGraph.isIE8() ? 3 : 0); + myLine8.Set('chart.shadow.blur', 15); + myLine8.Set('chart.shadow.color', '#f66'); + myLine8.Set('chart.linewidth', 1); + myLine8.Set('chart.hmargin', 10); + myLine8.Set('chart.background.grid.width', 1); + myLine8.Set('chart.background.grid.color', '#ddd'); + myLine8.Set('chart.background.barcolor1', 'white'); + myLine8.Set('chart.background.barcolor2', 'white'); + myLine8.Set('chart.background.grid.autofit', true); + myLine8.Set('chart.background.grid.autofit.numvlines', 12); + myLine8.Set('chart.background.grid.autofit.numhlines', 5); + myLine8.Set('chart.text.color', '#333'); + myLine8.Set('chart.noaxes', true); + myLine8.Set('chart.text.font', 'Arial'); + myLine8.Set('chart.labels', labels); + </script> + + +<!------------------------------------------------------------------------------------------> + + + <div> + <a name="vblinds.close"></a> + <h4>Vertical Blinds (Close)</h4> + + <canvas id="myLine9" width="480" height="150">[No canvas support]</canvas><br /> + <button onclick="RGraph.Effects.jQuery.VBlinds.Close(myLine9, {remove: true});">Show vertical blinds (close) effect</button> + + <p /> + + This effect gradually conceals the canvas by "closing some vertical blinds", which are positioned + over the canvas. + + <pre class="code">RGraph.Effects.jQuery.VBlinds.Close(obj);</pre> + </div> + + <script> + var myLine9 = new RGraph.Line('myLine9', data); + myLine9.Set('chart.gutter.top', 35); + myLine9.Set('chart.gutter.left', 40 ); + myLine9.Set('chart.gutter.right', 5); + myLine9.Set('chart.gutter.bottom', 25); + myLine9.Set('chart.colors', ['red', 'black']); + myLine9.Set('chart.units.post', '%'); + myLine9.Set('chart.tickmarks', null); + myLine9.Set('chart.shadow', true); + myLine9.Set('chart.shadow.offsety', RGraph.isIE8() ? 3 : 0); + myLine9.Set('chart.shadow.offsetx', RGraph.isIE8() ? 3 : 0); + myLine9.Set('chart.shadow.blur', 15); + myLine9.Set('chart.shadow.color', '#f66'); + myLine9.Set('chart.linewidth', 1); + myLine9.Set('chart.hmargin', 10); + myLine9.Set('chart.background.grid.width', 1); + myLine9.Set('chart.background.grid.color', '#ddd'); + myLine9.Set('chart.background.barcolor1', 'white'); + myLine9.Set('chart.background.barcolor2', 'white'); + myLine9.Set('chart.background.grid.autofit', true); + myLine9.Set('chart.background.grid.autofit.numvlines', 12); + myLine9.Set('chart.background.grid.autofit.numhlines', 5); + myLine9.Set('chart.text.color', '#333'); + myLine9.Set('chart.noaxes', true); + myLine9.Set('chart.text.font', 'Arial'); + myLine9.Set('chart.labels', labels); + myLine9.Draw(); + </script> + + +<!------------------------------------------------------------------------------------------> + + + <div> + <a name="pie.grow"></a> + <h4>Pie chart Grow</h4> + + <canvas id="myPie" width="400" height="300">[No canvas support]</canvas><br /> + <button onclick="RGraph.Effects.Pie.Grow(myPie);">Show Pie chart Grow effect</button> + + <p /> + + This effect gradually increases the radius of the Pie chart, expanding out from the centre. + + <pre class="code">RGraph.Effects.Pie.Grow(obj);</pre> + </div> + + <script> + var myPie = new RGraph.Pie('myPie', [2,3,6,4,45]); + myPie.Set('chart.shadow', true); + myPie.Set('chart.shadow.offsetx', 0); + myPie.Set('chart.shadow.offsety', 0); + myPie.Set('chart.shadow.blur', 15); + myPie.Set('chart.strokestyle', 'white'); + myPie.Set('chart.linewidth', 2); + myPie.Set('chart.exploded', [0,0,0,25,25]); + myPie.Set('chart.labels', ['Rod','Jane','Todd','Mark','Freddy']); + myPie.Set('chart.tooltips', ['Rod','Jane','Tod','Mark','Freddy']); + myPie.Set('chart.highlight.style', '2d'); + </script> + + +<!------------------------------------------------------------------------------------------> + + + <div> + <a name="pie.implode"></a> + <h4>Pie chart Implode</h4> + + <canvas id="myPie2" width="400" height="300">[No canvas support]</canvas><br /> + <button onclick="RGraph.Effects.Pie.Implode(myPie2);">Show Pie chart Implode effect</button> + + <p /> + + This effect gradually decreases the explosion of the chart - gradually bringing it together. Combined with + the RoundRobin effect (documented below) produces a nice combination, as seen on the frony page of this website. + + <pre class="code"> +RGraph.Effects.Pie.Implode(obj); +//RGraph.Effects.Pie.RoundRobin(obj); +</pre> + </div> + + <script> + var myPie2 = new RGraph.Pie('myPie2', [2,3,6,4,45]); + myPie2.Set('chart.shadow', true); + myPie2.Set('chart.shadow.offsetx', 0); + myPie2.Set('chart.shadow.offsety', 0); + myPie2.Set('chart.shadow.blur', 15); + myPie2.Set('chart.strokestyle', 'white'); + myPie2.Set('chart.linewidth', 2); + myPie2.Set('chart.labels', ['Rod','Jane','Todd','Mark','Freddy']); + myPie2.Set('chart.tooltips', ['Rod','Jane','Tod','Mark','Freddy']); + myPie2.Set('chart.highlight.style', '2d'); + </script> + + +<!------------------------------------------------------------------------------------------> + + + <div> + <a name="pie.roundrobin"></a> + <h4>Pie chart RoundRobin</h4> + + <canvas id="myPie3" width="400" height="300">[No canvas support]</canvas><br /> + <button onclick="RGraph.Effects.Pie.RoundRobin(myPie3)">Show Pie chart RoundRobin effect</button> + + <p /> + + This effect gradually increase both the circular size of the Pie chart and also the radius. Combining this effect + with the implode effect produces a nice effect. + + <pre class="code"> +RGraph.Effects.Pie.RoundRobin(obj); +//RGraph.Effects.Pie.Implode(obj); +</pre> + </div> + + <script> + var myPie3 = new RGraph.Pie('myPie3', [2,3,6,4,45]); + myPie3.Set('chart.shadow', true); + myPie3.Set('chart.shadow.offsetx', 0); + myPie3.Set('chart.shadow.offsety', 0); + myPie3.Set('chart.shadow.blur', 15); + myPie3.Set('chart.strokestyle', 'white'); + myPie3.Set('chart.linewidth', 2); + myPie3.Set('chart.labels', ['Rod','Jane','Todd','Mark','Freddy']); + myPie3.Set('chart.tooltips', ['Rod','Jane','Tod','Mark','Freddy']); + myPie3.Set('chart.highlight.style', '2d'); + </script> + + +<!------------------------------------------------------------------------------------------> + + + <div> + <a name="bar.grow"></a> + <h4>Bar chart Grow</h4> + + <canvas id="myBar" width="600" height="200">[No canvas support]</canvas><br /> + <button onclick="RGraph.Effects.Bar.Grow(bar);">Show Bar chart Grow effect</button> + + <p /> + + This effect gradually increases the size of the bars on the bar chart until they are at full size. + + <pre class="code">RGraph.Effects.Bar.Grow(obj);</pre> + </div> + + <script> + var bar = new RGraph.Bar('myBar', [45,53,56,64,76,78,79,81,45,43]); + + var grad = bar.context.createLinearGradient(0,0,0,200); + grad.addColorStop(0, 'red'); + grad.addColorStop(1, 'white'); + + bar.Set('chart.labels', ['John','Fred','Lou','Youseff','Kev','Pete','Hoolio','Nevil','Jobe','Ray']); + bar.Set('chart.ymax', 85); // Stops the scale changing + bar.Set('chart.shadow', true); + bar.Set('chart.shadow.offsetx', 0); + bar.Set('chart.shadow.offsety', 0); + bar.Set('chart.shadow.color', '#ccc'); + bar.Set('chart.shadow.blur', 15); + bar.Set('chart.colors', [grad]); + </script> + + +<!------------------------------------------------------------------------------------------> + + + <div> + <a name="fuel.grow"></a> + <h4>Fuel chart Grow</h4> + + <canvas id="myFuel" width="200" height="200">[No canvas support]</canvas><br /> + <button onclick="drawFuel()">Show Fuel chart Grow effect</button> + + <p /> + + This effect gradually increases the indicated value until it reaches the correct value. + + <pre class="code">RGraph.Effects.Fuel.Grow(obj);</pre> + </div> + + <script> + function drawFuel () + { + var fuel = new RGraph.Fuel('myFuel', 0, 100, 67); + RGraph.Effects.Fuel.Grow(fuel); + } + </script> + + +<!------------------------------------------------------------------------------------------> + + + <div> + <a name="slideout"></a> + <h4>Slide out</h4> + + <canvas id="myLine10" width="600" height="200">[No canvas support]</canvas><br /> + <button onclick="RGraph.Effects.jQuery.Slide.Out(myLine10, {'direction':'left'});">Show slide out effect</button> + + <p /> + + This effect slides the whole canvas out. One potential use would be to slide the canvas out and then + slide another canvas with a different chart in. You can specify that the canvas slides out to by using the second + argument as shown below. + + <pre class="code">RGraph.Effects.jQuery.Slide.Out(obj, {'direction': 'bottom'});</pre> + </div> + + <script> + var data = [1,2,4,6,8,10,12,15,21,29,36,45]; + var labels = ['Jan','Feb','Mar','Apr','May','jun','jul','Aug','Sep','Oct','Nov','Dec'] + + var myLine10 = new RGraph.Line('myLine10', data); + + myLine10.Set('chart.gutter.top', 35); + myLine10.Set('chart.gutter.left', 40 ); + myLine10.Set('chart.gutter.right', 5); + myLine10.Set('chart.gutter.bottom', 25); + myLine10.Set('chart.colors', ['red', 'black']); + myLine10.Set('chart.units.post', '%'); + myLine10.Set('chart.tickmarks', null); + myLine10.Set('chart.shadow', true); + myLine10.Set('chart.shadow.offsety', RGraph.isIE8() ? 3 : 0); + myLine10.Set('chart.shadow.offsetx', RGraph.isIE8() ? 3 : 0); + myLine10.Set('chart.shadow.blur', 15); + myLine10.Set('chart.shadow.color', '#f66'); + myLine10.Set('chart.linewidth', 1); + myLine10.Set('chart.hmargin', 10); + myLine10.Set('chart.background.grid.width', 1); + myLine10.Set('chart.background.grid.color', '#ddd'); + myLine10.Set('chart.background.barcolor1', 'white'); + myLine10.Set('chart.background.barcolor2', 'white'); + myLine10.Set('chart.background.grid.autofit', true); + myLine10.Set('chart.background.grid.autofit.numvlines', 12); + myLine10.Set('chart.background.grid.autofit.numhlines', 5); + myLine10.Set('chart.text.color', '#333'); + myLine10.Set('chart.noaxes', true); + myLine10.Set('chart.text.font', 'Arial'); + myLine10.Set('chart.labels', labels); + myLine10.Draw(); + </script> + + +<!------------------------------------------------------------------------------------------> + + + <div> + <a name="slidein"></a> + <h4>Slide in</h4> + + <canvas id="myLine11" width="600" height="200">[No canvas support]</canvas><br /> + <button onclick="RGraph.Effects.jQuery.Slide.In(myLine11, {'direction':'right'})">Show slide in effect</button> + + <p /> + + This effect slides the whole canvas in. As mentioned above you could this effect with the Slinde Out effect to + create a slideshow. + + <pre class="code">RGraph.Effects.jQuery.Slide.In(obj, {'direction': 'right'});</pre> + </div> + + <script> + var data = [1,2,4,6,8,10,12,15,21,29,36,45]; + var labels = ['Jan','Feb','Mar','Apr','May','jun','jul','Aug','Sep','Oct','Nov','Dec'] + + var myLine11 = new RGraph.Line('myLine11', data); + + myLine11.Set('chart.gutter.top', 35); + myLine11.Set('chart.gutter.left', 40 ); + myLine11.Set('chart.gutter.right', 5); + myLine11.Set('chart.gutter.bottom', 25); + myLine11.Set('chart.colors', ['red', 'black']); + myLine11.Set('chart.units.post', '%'); + myLine11.Set('chart.tickmarks', null); + myLine11.Set('chart.shadow', true); + myLine11.Set('chart.shadow.offsety', RGraph.isIE8() ? 3 : 0); + myLine11.Set('chart.shadow.offsetx', RGraph.isIE8() ? 3 : 0); + myLine11.Set('chart.shadow.blur', 15); + myLine11.Set('chart.shadow.color', '#f66'); + myLine11.Set('chart.linewidth', 1); + myLine11.Set('chart.hmargin', 10); + myLine11.Set('chart.background.grid.width', 1); + myLine11.Set('chart.background.grid.color', '#ddd'); + myLine11.Set('chart.background.barcolor1', 'white'); + myLine11.Set('chart.background.barcolor2', 'white'); + myLine11.Set('chart.background.grid.autofit', true); + myLine11.Set('chart.background.grid.autofit.numvlines', 12); + myLine11.Set('chart.background.grid.autofit.numhlines', 5); + myLine11.Set('chart.text.color', '#333'); + myLine11.Set('chart.noaxes', true); + myLine11.Set('chart.text.font', 'Arial'); + myLine11.Set('chart.labels', labels); + </script> + + +<!------------------------------------------------------------------------------------------> + + + <div> + <a name="unfold"></a> + <h4>Unfold</h4> + + <canvas id="myLine12" width="600" height="200">[No canvas support]</canvas><br /> + <button onclick="RGraph.Effects.Line.Unfold(myLine12)">Show Line chart Unfold effect</button> + + <p /> + + This effect "unfolds" the line from the origin, gradually increasing the X (and/or Y) values. There's also an example + of a combined Bar/Line chart with the Bar chart Grow, the Fade and the Line chart Unfold effects on the + <a href="combine.html"><b>combined charts page</b></a>. + + <pre class="code">RGraph.Effects.Line.Unfold(obj);</pre> + </div> + + <script> + var data = [43,54,35,36,40,12,26,34]; + var labels = ['Jan','Feb','Mar','Apr','May','jun','jul','Aug','Sep','Oct','Nov','Dec'] + + var myLine12 = new RGraph.Line('myLine12', data); + + myLine12.Set('chart.gutter.top', 35); + myLine12.Set('chart.gutter.left', 40 ); + myLine12.Set('chart.gutter.right', 5); + myLine12.Set('chart.gutter.bottom', 25); + myLine12.Set('chart.colors', ['red', 'black']); + myLine12.Set('chart.units.post', '%'); + myLine12.Set('chart.tickmarks', null); + myLine12.Set('chart.shadow', true); + myLine12.Set('chart.shadow.offsety', 2); + myLine12.Set('chart.shadow.offsetx', 2); + myLine12.Set('chart.shadow.blur', 0); + myLine12.Set('chart.shadow.color', '#999'); + myLine12.Set('chart.linewidth', 2); + myLine12.Set('chart.hmargin', 10); + myLine12.Set('chart.background.grid.width', 1); + myLine12.Set('chart.background.grid.color', '#ddd'); + myLine12.Set('chart.background.barcolor1', 'white'); + myLine12.Set('chart.background.barcolor2', 'white'); + myLine12.Set('chart.background.grid.autofit', true); + myLine12.Set('chart.background.grid.autofit.numvlines', 12); + myLine12.Set('chart.background.grid.autofit.numhlines', 5); + myLine12.Set('chart.text.color', '#333'); + myLine12.Set('chart.noaxes', true); + myLine12.Set('chart.text.font', 'Arial'); + myLine12.Set('chart.labels', labels); + + myLine12.Set('chart.animation.unfold.x', true); + myLine12.Set('chart.animation.unfold.y',true); + myLine12.Set('chart.animation.unfold.initial',0); // Default is 2 + </script> + + +<!------------------------------------------------------------------------------------------> + + + <div> + <a name="unfoldfromcenter"></a> + <h4>UnfoldFromCenter</h4> + + <canvas id="myLine13" width="600" height="200">[No canvas support]</canvas><br /> + <button onclick="RGraph.Effects.Line.UnfoldFromCenter(myLine13)">Show Line chart UnfoldFromCenter effect</button> + + <p /> + + This effect "unfolds" the line from the <b>center</b>, gradually increasing or decreasing the Y values as appropriate. + + <pre class="code">RGraph.Effects.Line.UnfoldFromCenter(obj);</pre> + </div> + + <script> + var data = [1,3,5,10,10,8,7,6,9,8,4,7,4,2,3,4]; + var labels = ['Jan','Feb','Mar','Apr','May','jun','jul','Aug','Sep','Oct','Nov','Dec'] + + var myLine13 = new RGraph.Line('myLine13', data); + + myLine13.Set('chart.gutter.top', 35); + myLine13.Set('chart.gutter.left', 40 ); + myLine13.Set('chart.gutter.right', 5); + myLine13.Set('chart.gutter.bottom', 25); + myLine13.Set('chart.colors', ['red', 'black']); + myLine13.Set('chart.units.post', '%'); + myLine13.Set('chart.tickmarks', null); + myLine13.Set('chart.shadow', true); + myLine13.Set('chart.shadow.offsety', 2); + myLine13.Set('chart.shadow.offsetx', 2); + myLine13.Set('chart.shadow.blur', 3); + myLine13.Set('chart.shadow.color', '#999'); + myLine13.Set('chart.linewidth', 2); + myLine13.Set('chart.hmargin', 10); + myLine13.Set('chart.background.grid.width', 1); + myLine13.Set('chart.background.grid.color', '#ddd'); + myLine13.Set('chart.background.barcolor1', 'white'); + myLine13.Set('chart.background.barcolor2', 'white'); + myLine13.Set('chart.background.grid.autofit', true); + myLine13.Set('chart.background.grid.autofit.numvlines', 12); + myLine13.Set('chart.background.grid.autofit.numhlines', 5); + myLine13.Set('chart.text.color', '#333'); + myLine13.Set('chart.noaxes', true); + myLine13.Set('chart.text.font', 'Arial'); + myLine13.Set('chart.labels', labels); + </script> + + +<!------------------------------------------------------------------------------------------> + + + <div> + <a name="foldtocenter"></a> + <h4>FoldTocenter</h4> + + <canvas id="myc" width="600" height="200">[No canvas support]</canvas><br /> + <button onclick="RGraph.Effects.Line.FoldToCenter(myLinef2c)">Show Line chart FoldTromCenter effect</button> + + <p /> + + This effect "folds" the line to the <b>center</b>, gradually increasing or decreasing the Y values as appropriate. In + effect the opposite of the "unfold" effect. + + <pre class="code">RGraph.Effects.Line.FoldToCenter(obj);</pre> + </div> + + <script> + data = [ + [1,3,5,10,10,8,7,6,9,8,4,7,4,2,3,4], + [4,5,8,6,4,3,9,8,7,5,4,6,5,4,8,9] + ]; + labels = ['Jan','Feb','Mar','Apr','May','jun','jul','Aug','Sep','Oct','Nov','Dec'] + + myLinef2c = new RGraph.Line('myc', data); + myLinef2c.Set('chart.hmargin', 10); + myLinef2c.Set('chart.tickmarks', 'endcircle'); + myLinef2c.Set('chart.shadow', true); + myLinef2c.Set('chart.linewidth', 3); + myLinef2c.Set('chart.labels', labels); + myLinef2c.Set('chart.units.post', '%'); + myLinef2c.Set('chart.shadow', true); + myLinef2c.Set('chart.shadow.offsety', 2); + myLinef2c.Set('chart.shadow.offsetx', 2); + myLinef2c.Set('chart.shadow.blur', 3); + myLinef2c.Set('chart.shadow.color', '#999'); + myLinef2c.Set('chart.gutter.left', 35); + myLinef2c.Draw(); + </script> + + +<!------------------------------------------------------------------------------------------> + + + <div> + <a name="line.trace"></a> + <h4>Line chart Trace</h4> + + <canvas id="myLine14" width="600" height="200">[No canvas support]</canvas><br /> + <button onclick="RGraph.Clear(myLine14.canvas);RGraph.Effects.Line.jQuery.Trace(myLine14)">Show Line chart Trace effect</button> + + <p /> + + This effect gradually traces the line across the chart - slowly revealing it in full. Not all Line chart options + (eg filled charts) work with this effect. + + <pre class="code">RGraph.Effects.Line.jQuery.Trace(myLine14);</pre> + </div> + + <script> + var data1 = [1,3,5,10,10,8,7,6,9,8,4,7]; + var data2 = [4,6,5,9,8,4,8,6,1,2,3,4]; + var labels = ['Jan','Feb','Mar','Apr','May','jun','jul','Aug','Sep','Oct','Nov','Dec']; + + myLine14 = new RGraph.Line('myLine14', [data1, data2]); + myLine14.Set('chart.labels', labels); + myLine14.Set('chart.tooltips', labels); + myLine14.Set('chart.hmargin', 10); + myLine14.Set('chart.linewidth', 3); + myLine14.Set('chart.filled', true); + myLine14.Set('chart.fillstyle', ['red', 'pink']); + myLine14.Set('chart.colors', ['black', 'black']); + </script> + + + +<!------------------------------------------------------------------------------------------> + + + + <div> + <a name="rose.grow"></a> + <h4>Rose chart Grow</h4> + + <canvas id="myRose" width="350" height="350">[No canvas support]</canvas><br /> + <button onclick="RGraph.Effects.Rose.Grow(myRose)">Show Rose chart Grow effect</button> + + <p /> + + This effect gradually increases the radius and the radius of each segment. It is not available with + <i>non-equi-angular</i> Rose charts. + + <pre class="code">RGraph.Effects.Rose.Grow(obj);</pre> + </div> + + <script> + var myRose = new RGraph.Rose('myRose', [[12,15,13],[13,16,19],[19,12,16],[20,21,24],[22,23,26]]); + myRose.Set('chart.tooltips', [ + 'John','Fred','Kev', + 'John','Fred','Kev', + 'John','Fred','Kev', + 'John','Fred','Kev', + 'John','Fred','Kev' + ]); + myRose.Set('chart.colors.alpha', 0.5); + myRose.Set('chart.margin', 5); + </script> + + +<!------------------------------------------------------------------------------------------> + + + + <div> + <a name="odo.grow"></a> + <h4>Odometer Grow</h4> + + <canvas id="myOdo" width="350" height="350">[No canvas support]</canvas><br /> + <button onclick="myOdo.value = RGraph.random(0, 360);RGraph.Effects.Odo.Grow(myOdo); event.cancelBubble = true; return false">Show Odo chart Grow effect</button> + + <p /> + + This effect gradually increase the value of the Odometer until it reaches the desired value. The second + argument is not used, but the third can be a Javascript function and will be called when the animation + is finished. + + <pre class="code">RGraph.Effects.Odo.Grow(obj, null, myFunc);</pre> + </div> + + <script> + var myOdo = new RGraph.Odometer('myOdo', 0, 360, 95); + myOdo.Set('chart.needle.color', 'black'); + myOdo.Set('chart.needle.tail', false); + myOdo.Set('chart.label.area', 35); + myOdo.Set('chart.border', RGraph.isIE8() ? false : true); + myOdo.Set('chart.title.vpos', 0.3); + myOdo.Set('chart.labels', ['N','NE','E','SE','S','SW','W','NW']); + myOdo.Set('chart.red.min', 360); + myOdo.Set('chart.red.color', 'gray'); + myOdo.Set('chart.value.text', true); + myOdo.Set('chart.value.text.decimals', 0); + myOdo.Set('chart.value.units.post', '°'); + </script> + + +<!------------------------------------------------------------------------------------------> + + + + <div> + <a name="meter.grow"></a> + <h4>Meter Grow</h4> + + <canvas id="myMeter" width="450" height="250">[No canvas support]</canvas><br /> + <button onclick="RGraph.Effects.Meter.Grow(meter, {'frames': 60});">Show Meter chart Grow effect</button> + + <p /> + + This effect gradually increases the value of the Meter until it reaches the desired value. You can optionally specify an object map + as the second argument of which the only option is <i>frames</i> - allowing to specify the number of frames in the animation. + More frames = longer animation. The animation is set to use a frame rate of roughly 60 frames a second. + + <pre class="code">RGraph.Effects.Meter.Grow(obj, {'frames': 90});</pre> + </div> + + <script> + var meter = new RGraph.Meter('myMeter', 0, 10, 5); + meter.Set('chart.units.post', 'kg'); + meter.Set('chart.red.start', 0); + meter.Set('chart.red.end', 3); + meter.Set('chart.yellow.start', 3); + meter.Set('chart.yellow.end', 6); + meter.Set('chart.green.start', 6); + meter.Set('chart.green.end', 10); + </script> + + +<!------------------------------------------------------------------------------------------> + + + + <div> + <a name="hbar.grow"></a> + <h4>HBar Grow</h4> + + <canvas id="myHbar" width="450" height="250">[No canvas support]</canvas><br /> + <button onclick="RGraph.Effects.HBar.Grow(hbar); RGraph.Effects.Fade.In(hbar);">Show HBar chart Grow effect</button> + + <p /> + + This effect gradually increase the values of the HBar until it reaches the desired value. + + <pre class="code">RGraph.Effects.HBar.Grow(obj);</pre> + </div> + + <script> + var hbar = new RGraph.HBar('myHbar', [[43,45],[85,4],[46, 34],[52, 12],[62, 35],[63, 24],[45, 41]]); + hbar.Set('chart.grouping', 'stacked'); + hbar.Set('chart.shadow', true); + hbar.Set('chart.shadow.color', '#ccc'); + hbar.Set('chart.shadow.offsetx', 0); + hbar.Set('chart.shadow.offsety', 0); + hbar.Set('chart.shadow.blur', 15); + hbar.Set('chart.labels', ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday']); + hbar.Set('chart.gutter.left', 100); + hbar.Set('chart.strokestyle', 'rgba(0,0,0,0)'); + </script> + + +<!------------------------------------------------------------------------------------------> + + + + <div> + <a name="gauge.grow"></a> + <h4>Gauge Grow</h4> + + <canvas id="myGauge" width="450" height="250">[No canvas support]</canvas><br /> + <button onclick="RGraph.Clear(myGauge.canvas);myGauge.value = RGraph.random(50,100);RGraph.Effects.Gauge.Grow(myGauge);">Show Gauge chart Grow effect</button> + + <p /> + + This effect gradually increases the indicated value until it is correct. It's also shown on the + <a href="../examples/gauge.html">Gauge chart example page</a>. By constantly updating the Gauge (with some AJAX + for example) you could make a control panel of sorts. + + <pre class="code">RGraph.Effects.Gauge.Grow(obj);</pre> + </div> + + <script> + var myGauge = new RGraph.Gauge('myGauge', 0, 100,59); + </script> + + +<!------------------------------------------------------------------------------------------> + + + + <div> + <a name="radar.grow"></a> + <h4>Radar Grow</h4> + + <canvas id="myRadar" width="350" height="350">[No canvas support]</canvas><br /> + <button onclick="RGraph.Clear(myRadar.canvas);RGraph.Effects.Radar.Grow(myRadar);RGraph.Effects.Fade.In(myRadar)">Show Radar chart Grow effect</button> + + <p /> + + This effect gradually increases the magnitude of the Radar chart, growing outwards from the center. Multiple + data sets are supported. + + <pre class="code">RGraph.Effects.Radar.Grow(obj);</pre> + </div> + + <script> + var myRadar = new RGraph.Radar('myRadar', [4,6,3,5,8,6,9,5,4]); + myRadar.Set('chart.colors.alpha', 0.5); + </script> + + +<!------------------------------------------------------------------------------------------> + + + + <div> + <a name="waterfall.grow"></a> + <h4>Waterfall Grow</h4> + + <canvas id="myWaterfall" width="550" height="250">[No canvas support]</canvas><br /> + <button onclick="RGraph.Clear(myWaterfall.canvas);RGraph.Effects.Waterfall.Grow(myWaterfall);RGraph.Effects.Fade.In(myWaterfall)">Show Waterfall chart Grow effect</button> + + <p /> + + This effect gradually Grows the waterfall chart in both X and Y respects. + + <pre class="code">RGraph.Effects.Waterfall.Grow(obj);</pre> + </div> + + <script> + var myWaterfall = new RGraph.Waterfall('myWaterfall', [4,5,-8,-8,-5,6,4,-4]); + myWaterfall.Set('chart.xaxispos', 'center'); + </script> + + +<!------------------------------------------------------------------------------------------> + + + <a name="things.to.note"></a> + <h3>Things to note</h3> + <ol> + <li> + With Fade in/out effects remember that just because you can't see the canvas (ie the opacity is 0) doesn't mean + that you can't interact with it, so tooltip hotspots will still be active. If you want to get rid of the canvas + entirely you need to remove it from the DOM. You can do this with the standard.removeNode function: + <pre class="code">obj.canvas.parentNode.removeChild(obj.canvas);</pre> + + This will leave a hole in the page though and will cause the page layout to change. If this is an issue you may + want to use the RGraph API function <i>RGraph.Effects.ReplaceCanvasWithDIV(canvas)</i>. As the name + suggests, this function replaces the canvas with a DIV which has the same dimensions meaning your page structure + won't change. + </li> + + <li> + It should be noted that in order to prevent the canvas being constantly drawn on, it is cleared at the + start of the animation. + </li> + + <li> + In the jQuery animations here, the Google hosted jQuery is used: + + <pre class="code"><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script></pre> + </li> + + <li> + Because canvas based animations may need to redraw the entire chart, + they can be slower than CSS based animations and depend on a variety of things - eg the speed of the users PC + and the work necessary to redraw the canvas. + </li> + </ol> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/docs/events.html b/schall/static/RGraph/docs/events.html new file mode 100644 index 0000000..6f65363 --- /dev/null +++ b/schall/static/RGraph/docs/events.html @@ -0,0 +1,589 @@ +<!DOCTYPE html > +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - Custom RGraph events</title> + + <meta name="keywords" content="rgraph html5 canvas chart docs custom events" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Documentation about the custom RGraph events" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js" ></script> + <script src="../libraries/RGraph.common.adjusting.js" ></script> + <script src="../libraries/RGraph.common.annotate.js" ></script> + <script src="../libraries/RGraph.common.context.js" ></script> + <script src="../libraries/RGraph.common.resizing.js" ></script> + <script src="../libraries/RGraph.common.tooltips.js" ></script> + <script src="../libraries/RGraph.common.zoom.js" ></script> + <script src="../libraries/RGraph.modaldialog.js" ></script> + <script src="../libraries/RGraph.bar.js" ></script> + <script src="../libraries/RGraph.scatter.js" ></script> + + <script> + window.onload = function (e) + { + var bar1 = new RGraph.Bar('bar1', [1,2,3,5,9,7,8]); + bar1.Set('chart.labels', ['January','February','March','April','May','June','July']); + bar1.Set('chart.tooltips', ['January','February','March','April','May','June','July']); + bar1.Set('chart.title', 'An example of the ontooltip event'); + bar1.Draw(); + RGraph.AddCustomEventListener(bar1, 'ontooltip', function (obj) {alert('ontooltip event, showing tooltip with index: ' + RGraph.Registry.Get('chart.tooltip').__index__);}); + + + var bar2 = new RGraph.Bar('bar2', [1,2,3,5,9,7,8]); + bar2.Set('chart.labels', ['January','February','March','April','May','June','July']); + bar2.Set('chart.contextmenu', [['Cancel', function () {}]]); + bar2.Set('chart.title', 'An example of the oncontextmenu event'); + bar2.Draw(); + RGraph.AddCustomEventListener(bar2, 'oncontextmenu', function (obj) {alert('oncontextmenu event fired');}); + + + // Intentionally a global + bar3 = new RGraph.Bar('bar3', [1,2,3,5,9,7,8]); + bar3.Set('chart.labels', ['January','February','March','April','May','June','July']); + bar3.Set('chart.title', 'An example of the onbeforedraw event'); + // Drawn when the button is clicked + RGraph.AddCustomEventListener(bar3, 'onbeforedraw', function (obj) {alert('onbeforedraw event fired');}); + + + // Intentionally a global + bar4 = new RGraph.Bar('bar4', [1,2,3,5,9,7,8]); + bar4.Set('chart.labels', ['January','February','March','April','May','June','July']); + bar4.Set('chart.title', 'An example of the ondraw event'); + // Drawn when the button is clicked + RGraph.AddCustomEventListener(bar4, 'ondraw', function (obj) {alert('ondraw event fired');}); + + + var bar5 = new RGraph.Bar('bar5', [1,2,3,5,9,7,8]); + bar5.Set('chart.labels', ['January','February','March','April','May','June','July']); + bar5.Set('chart.title', 'An example of the onzoom event'); + bar5.Set('chart.contextmenu', [['Zoom', RGraph.Zoom]]); + bar5.Set('chart.zoom.vdir', 'center'); + bar5.Draw(); + RGraph.AddCustomEventListener(bar5, 'onzoom', function (obj) {alert('onzoom event fired');}); + + + var bar6 = new RGraph.Bar('bar6', [1,2,3,5,9,7,8]); + bar6.Set('chart.labels', ['January','February','March','April','May','June','July']); + bar6.Set('chart.title', 'An example of the onmodaldialog event'); + bar6.Set('chart.contextmenu', [['Show dialog', function () {ModalDialog.Show('modaldialog_login', 300);}]]); + bar6.Draw(); + ModalDialog.AddCustomEventListener('onmodaldialog', function (obj) {alert('onmodaldialog event fired');}); + + + var bar7 = new RGraph.Bar('bar7', [1,2,3,5,9,7,8]); + bar7.Set('chart.labels', ['January','February','March','April','May','June','July']); + bar7.Set('chart.title', 'The onresizebeforedraw event'); + bar7.Set('chart.text.angle', 45); + bar7.Set('chart.resizable', true); + bar7.Set('chart.gutter.bottom', 60); + bar7.Draw(); + RGraph.AddCustomEventListener(bar7, 'onresizebeforedraw', function (obj) + { + alert('onresizebeforedraw event fired'); + }); + + + var bar8 = new RGraph.Bar('bar8', [1,2,3,5,9,7,8]); + bar8.Set('chart.labels', ['January','February','March','April','May','June','July']); + bar8.Set('chart.title', 'An example of the onresize event'); + bar8.Set('chart.resizable', true); + bar8.Draw(); + + RGraph.AddCustomEventListener(bar8, 'onresizebegin', function (obj){cl('onresizebegin event fired');}); + RGraph.AddCustomEventListener(bar8, 'onresize', function (obj){cl('onresize event fired');}); + RGraph.AddCustomEventListener(bar8, 'onresizeend', function (obj){cl('onresizeend event fired');}); + + + var bar9 = new RGraph.Bar('bar9', [1,2,3,5,9,7,8]); + bar9.Set('chart.labels', ['January','February','March','April','May','June','July']); + bar9.Set('chart.title', 'An example of the onadjust event'); + bar9.Set('chart.adjustable', true); + bar9.Draw(); + + RGraph.AddCustomEventListener(bar9, 'onadjustbegin', function (obj){cl('The onadjuststart event fired');}); + RGraph.AddCustomEventListener(bar9, 'onadjust', function (obj){cl('The onadjust event fired');}); + RGraph.AddCustomEventListener(bar9, 'onadjustend', function (obj){cl('The onadjustend event fired');}); + + + // Global on purpose + bar10 = new RGraph.Bar('bar10', [1,2,3,5,9,7,8]); + bar10.Set('chart.labels', ['January','February','March','April','May','June','July']); + bar10.Set('chart.title', 'An example of the onannotate event'); + bar10.Set('chart.annotatable', true); + bar10.Set('chart.contextmenu', [['ShowPalette', RGraph.Showpalette], ['Clear', function () {RGraph.Clear(bar10.canvas); bar10.Draw();}]]); + bar10.Draw(); + + RGraph.AddCustomEventListener(bar10, 'onannotatebegin', function (obj){cl('onannotatebegin event fired');}); + RGraph.AddCustomEventListener(bar10, 'onannotate', function (obj){cl('onannotate event fired');}); + RGraph.AddCustomEventListener(bar10, 'onannotateend', function (obj){cl('onannotateend event fired');}); + RGraph.AddCustomEventListener(bar10, 'onannotatecolor', function (obj) {cl('Changed annotate color: ' + obj.Get('chart.annotate.color'));}); + RGraph.AddCustomEventListener(bar10, 'onannotateclear', function (obj) {cl('Fired the annotation clear event');}); + + + // Global on purpose + var bar11 = new RGraph.Bar('bar11', [1,2,3,5,9,7,8]); + bar11.Set('chart.labels', ['January','February','March','April','May','June','July']); + bar11.Set('chart.title', 'The onbeforecontextmenu event'); + bar11.Set('chart.contextmenu', [['A sample context menu item', null]]); + bar11.Draw(); + + RGraph.AddCustomEventListener(bar11, 'onbeforecontextmenu', function (obj) {p('Fired the onbeforecontextmenu event)');}); + + // + // The oncrosshairs event + data = [[45,32]] + var scatter1 = new RGraph.Scatter('scatter1', data); + scatter1.Set('chart.xmax', 90); + scatter1.Set('chart.labels', ['January','February','March']); + scatter1.Set('chart.crosshairs', true); + scatter1.Set('chart.crosshairs.coords', true); + scatter1.Set('chart.crosshairs.coords.labels.x', 'Day'); + scatter1.Set('chart.crosshairs.coords.labels.y', 'Amount'); + scatter1.Draw(); + + function myFunc (obj) + { + document.getElementById("crosshairs.out").value = obj.canvas.__crosshairs_x__ + ', ' + obj.canvas.__crosshairs_y__; + } + RGraph.AddCustomEventListener(scatter1, 'oncrosshairs', myFunc); + } + </script> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> +</head> +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + <div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="index.html">Documentation</a> + > + Custom RGraph events + </div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - Custom RGraph events</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + <ul> + <li><a href="#introduction">Introduction</a></li> + <li> + <a href="#available.events">Available events</a> + <ul> + <li><a href="#event.ontooltip">ontooltip</a></li> + <li><a href="#event.onbeforecontextmenu">onbeforecontextmenu</a></li> + <li><a href="#event.oncontextmenu">oncontextmenu</a></li> + <li><a href="#event.onbeforedraw">onbeforedraw</a></li> + <li><a href="#event.ondraw">ondraw</a></li> + <li><a href="#event.onzoom">onzoom</a></li> + <li><a href="#event.onmodaldialog">onmodaldialog</a></li> + <li><a href="#event.onresizebeforedraw">onresizebeforedraw</a></li> + <li><a href="#event.onresize">onresizebegin</a></li> + <li><a href="#event.onresize">onresize</a></li> + <li><a href="#event.onresize">onresizeend</a></li> + <li><a href="#event.onadjustbegin">onadjustbegin</a></li> + <li><a href="#event.onadjustbegin">onadjust</a></li> + <li><a href="#event.onadjustbegin">onadjustend</a></li> + <li><a href="#event.onannotatebegin">onannotatebegin</a></li> + <li><a href="#event.onannotatebegin">onannotate</a></li> + <li><a href="#event.onannotatebegin">onannotateend</a></li> + <li><a href="#event.onannotatebegin">onannotatecolor</a></li> + <li><a href="#event.onannotatebegin">onannotateclear</a></li> + <li><a href="#event.onclear">onclear</a></li> + <li><a href="#event.oncrosshairs">oncrosshairs</a></li> + </ul> + </li> + <li><a href="#removing.events">Removing events</a></li> + </ul> + + <a name="introduction"></a> + <h4>Introduction</h4> + + <p> + Custom events allow you to easily interact with and extend RGraph for your own purposes. The list of available events is below, + as is an example of how to make use of them with the <i>RGraph.AddCustomEventListener()</i> function. Event handler functions (ie your + functions) are passed a single parameter - the chart object. With this you can get references to the canvas and context. There's + an example of this below. + </p> + +<pre class="code"><script> + window.onload = function () + { + var line = new RGraph.Line('myLine', [45,12,16,18,44,54,23,21,56]); + line.Set('chart.tooltips', ['Fred', 'Barney', 'Jay', 'Pete', 'Frank', 'Bob', 'Ted', 'Lou', 'Kev']); + line.Set('chart.labels', ['Fred', 'Barney', 'Jay', 'Pete', 'Frank', 'Bob', 'Ted', 'Lou', 'Kev']); + line.Set('chart.hmargin', 5); + line.Set('chart.tickmarks', 'dot'); + line.Draw(); + + <span style="color: green">/** + * This is the call to the RGraph function that registers the event listener + * + * line: The chart object + * ontooltip: The name of the event + * myFunc: The function that handles the event + */</span> + RGraph.AddCustomEventListener(line, 'ontooltip', myFunc); + } + + <span style="color: green">/** + * The function that is called when the ontooltip event fires. It is passed a single parameter - the chart object. + * With this you can get the ID and references to the canvas and context: + * o obj.id + * o obj.canvas + * o obj.context + */</span> + function myFunc(obj) + { + var id = obj.id; + var canvas = obj.canvas; + var context = obj.context; + + alert('This alert was triggered by the custom ontooltip event'); + } +</script> +</pre> + + <a name="available.events"></a> + <h4>Available events</h4> + + <p> + <a name="event.ontooltip"></a> + <canvas id="bar1" width="400" height="150" style="float: left">[No canvas support]</canvas> + <b>ontooltip</b><br /> + This event fires immediately after a tooltip has been created. This event allows you to easily show charts in your tooltips (tooltip + effects that involve moving the tooltip, eg. <i>contract</i>, <i>expand</i> & <i>snap</i>, will not function). You + can find the tooltip object in the RGraph registry - <i>RGraph.Registry.Get('chart.tooltip')</i>. Note that if you're testing and + using a function that pauses execution (eg alert()), this will also pause any timers (for animation effects etc). If you want to + avoid this you should use a function that doesn't block execution, eg the Firebug/WebKit function, <i>console.log()</i> (you can use the + <i>cl()</i> shortcut in RGraph). + </p> + + <br clear="all" /> + + <p> + <a name="event.onbeforecontextmenu"></a> + <canvas id="bar11" width="400" height="200" style="float: left">[No canvas support]</canvas> + <b>onbeforecontextmenu</b><br /> + The onbeforecontextmenu event fires before the context menu is shown. + </p> + + <br clear="all" /> + + <p> + <a name="event.oncontextmenu"></a> + <canvas id="bar2" width="400" height="150" style="float: left">[No canvas support]</canvas> + <b>oncontextmenu</b><br /> + This event fires immediately after the RGraph context menu is shown. If you want it, you can get at the context menu in the + RGraph registry: <i>RGraph.Registry.Get('chart.contextmenu')</i> + + <br /><br /> + + <b>Important:</b> Like the <i>ontooltip</i> event, using <i>alert()</i> can + pause the fade in timers, so you might consider using the Firebug/Webkit <i>console.log</i> functions instead. + </p> + + <br clear="all" /> + + <p> + <a name="event.onbeforedraw"></a> + <div style="float: left"> + <canvas id="bar3" width="400" height="150" style="left">[No canvas support]</canvas><br /> + <button onmousedown="bar3.Draw()" style="width: 400px">Draw chart</button> + </div> + + <b>onbeforedraw</b><br /> + Much like the ondraw event, however this fires at the start of the .Draw() method, in effect "before" the method. Keep in mind + that since other charts may trigger the .Draw() method, this event can also be triggered by other charts. + </p> + + <br clear="all" /> + + <p> + <a name="event.ondraw"></a> + <div style="float: left"> + <canvas id="bar4" width="400" height="150" style="left">[No canvas support]</canvas><br /> + <button onmousedown="bar4.Draw()" style="width: 400px">Draw chart</button> + </div> + <b>ondraw</b><br /> + The ondraw event fires <i>after</i> the .Draw() method has run. Note that the interactive features of RGraph may call the .Draw() + method multiple times - the zoom in area mode is a prime example. + A chart with tooltips is also an example. In this case it would demonstrate that the .Draw() method is called twice (and + hence the ondraw event), whereas the ontooltip event only fires once. + + <br /><br /> + + <b>Note:</b> The <i>ondraw</i> event is not only fired by its own chart, + but (if you're using tooltips for example), can also be fired by other charts on the page. + </p> + + <br clear="all" /> + + <p> + <a name="event.onzoom"></a> + <canvas id="bar5" width="400" height="150" style="float: left">[No canvas support]</canvas> + <b>onzoom</b><br /> + The onzoom event fires whenever the canvas is zoomed. When the zoom is in <i>area</i> and <i>canvas</i> modes this fires once, + but when in <i>thumbnail</i> mode this event is like the onmousemove event in that it fires whenever the mouse is moved. + </p> + + <br clear="all" /> + + <p> + <a name="event.onmodaldialog"></a> + <canvas id="bar6" width="400" height="150" style="float: left">[No canvas support]</canvas> + <b>onmodaldialog</b><br /> + The onmodaldialog event fires when the ModalDialog is shown. This event is easily replicated yourself, though using this event + may help you to keep your code tidy. This event is utilised slightly differently to the other events: + + <br clear="all" /> + + <pre class="code">ModalDialog.AddCustomEventListener('onmodaldialog', function () {alert('Hello world!');});</pre> + </p> + + <br clear="all" /> + + <p> + <a name="event.onresizebeforedraw"></a> + <canvas id="bar7" width="400" height="200" style="float: left">[No canvas support]</canvas> + <b>onresizebeforedraw</b><br /> + The onresizebeforedraw event was added when translating was necessary to reclaim wasted space, before the introduction + of independent gutters. This event is now no longer necessary to reposition the resize handle. It will still have an + effect though, so if you choose to upgrade then you should remove this from your configuration. The event isn't + planned to be removed, so if you wish to use it, you can. + </p> + + <br clear="all" /> + + <p style="background-color: #ffa; border: 2px dashed #990; padding: 4px"> + <b>Note:</b> + The annotation events send notifications to the console because using alert() would cause them to lock the window. + </p> + + <p> + <a name="event.onresize"></a> + <canvas id="bar8" width="400" height="150" style="float: left">[No canvas support]</canvas> + <b>onresizebegin</b><br /> + The onresizebegin event fires when a canvas is starting to be resized. It also fires when the canvas is reset to the original + size.<br /><br /> + + <b>onresize</b><br /> + The onresize event fires when a canvas is resized. It also fires when the canvas is reset to the original size.<br /><br /> + + <b>onresizeend</b><br /> + The onresizeend event fires when a canvas is ended resizing. It also fires when the canvas is reset to the original size. + </p> + + <br clear="all" /> + + <p style="background-color: #ffa; border: 2px dashed #990; padding: 4px"> + <b>Note:</b> + The adjusting events send notifications to the console because using alert() would cause them to lock the window. + </p> + + <p> + <a name="event.onadjustbegin"></a> + <canvas id="bar9" width="400" height="200" style="float: left">[No canvas support]</canvas> + <b>onadjustbegin</b><br /> + The onadjustbegin event fires once at the start of an adjusting process. It can be thought of as similar to + the onmousedown event as that's when it usually fires. + </p> + + <br /> + + <p> + <a name="event.onadjust"></a> + <b>onadjust</b><br /> + The onadjust event fires whenever one of the supported chart types is adjusted. It usually fires in conjunction with the + onmousemove event, and can be blocked by alert(). You therefore may need to use a different function (eg console.log()) + whilst debugging. + </p> + + <br /> + + <p> + <a name="event.onadjustend"></a> + <b>onadjustend</b><br /> + The onadjustend event fires once at the end of an adjusting process. It can be thought of as similar to + the onmouseup event as that's when it usually fires. + </p> + + <br clear="all" /> + + <p style="background-color: #ffa; border: 2px dashed #990; padding: 4px"> + <b>Note:</b> + The annotation events send notifications to the console because using alert() would cause them to lock the window. + </p> + + <p> + <a name="event.onannotatebegin"></a> + <canvas id="bar10" width="400" height="350" style="float: left">[No canvas support]</canvas> + <b>onannotatebegin</b><br /> + The onannotatebegin event fires at the beginning of the annotating procedure (ie in a similar vein to the onmousedown event). + </p> + + <p> + <a name="event.onannotate"></a> + <b>onannotate</b><br /> + The onannotate event fires when the chart has been annotated. It fires during the annotate procedure. + </p> + + <p> + <a name="event.onannotateend"></a> + <b>onannotateend</b><br /> + The onannotateend event fires at the end of the annotating procedure (ie in a similar vein to the onmouseup event). + </p> + + <p> + <a name="event.onannotatecolor"></a> + <b>onannotatecolor</b><br /> + The onannotatecolor event fires when the annotation color has been changed using the RGraph palette. + </p> + + <p> + <a name="event.onannotateclear"></a> + <b>onannotateclear</b><br /> + The onannotateclear event fires when the RGraph annotation data has been cleared using the RGraph.ClearAnnotations() API + function. + </p> + + <p> + <a name="event.onclear"></a> + <b>onclear</b><br /> + The onclear event fires when the function <i>RGraph.Clear()</i> is called. If you use the <i>.Clear()</i>function inside the onclear event + handler, it will create a loop. Instead, you could use this function: + </p> + + <a name="event.oncrosshairs"></a> + <div style="width: 400px; float: left"> + <canvas id="scatter1" width="400" height="200">[No canvas support]</canvas> + <input type="text" id="crosshairs.out" style="width: 400px"/> + </div> + + <p> + + <b>oncrosshairs</b><br /> + The oncrosshairs event fires when the crosshairs are moved. This event is very similar to the onmousemove event, but you can + guarantee that this event fires after the crosshairs have been repainted. + </p> + + <br clear="all" /> + + <pre class="code"> +/** +* This function clears the canvas +* +* @param object obj The chart object +*/ +function myClear(obj) +{ + obj.context.beginPath(); + obj.context.fillStyle = 'white'; + obj.context.fillRect(-10,-10,obj.canvas.width + 20, obj.canvas.height + 20); + obj.context.fill(); +} +</pre> + + + <a name="removing.events"></a> + <h4>Removing events</h4> + <p> + In the case that you need to remove RGraph event listeners, there are a few ways that you can do it. The API function + <i>RGraph.RemoveCustomEventListener(obj, id)</i> can be used to remove a single event listener. This function + takes the chart object and the numerical ID (returned by <i>RGraph.AddCustomEventListener()</i>) as its arguments. + + <p /> + + There's + also the <i>RGraph.RemoveAllCustomEventListeners()</i>, for easily removing all of the pertinent event listeners. This + function can either take no arguments at all, in which case ALL event listeners for ALL objects are removed. Or it can + also take an objects ID (the same id that you pass to the constructor), in which case the removal will be limited to + that object. + </p> + + <!-- Login dialog --> + <div style="display: none" class="ModalDialog" id="modaldialog_login"> + + <b>Login to admin area</b><br /><br /> + + <table border="0"> + <tr> + <td align="right">Email:</td> + <td><input type="text" name="email" /></td> + </tr> + <tr> + <td align="right">Password:</td> + <td><input type="password" name="password" /></td> + </tr> + + <tr> + <td> </td> + <td align="right"><input type="submit" value="Login »" /></td> + </tr> + </table> + + <div style="font-size: 8pt; float: right"><a href="" onclick="ModalDialog.Hide(); return false">Dismiss</a></div> + </div> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/docs/external.html b/schall/static/RGraph/docs/external.html new file mode 100644 index 0000000..027f869 --- /dev/null +++ b/schall/static/RGraph/docs/external.html @@ -0,0 +1,357 @@ +<!DOCTYPE html > +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - Integrating RGraph with external libraries</title> + + <meta name="keywords" content="rgraph html5 canvas charts docs external libraries" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Documentation about integrating RGraph with external libraries" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.modaldialog.js" ></script> + <script src="../libraries/RGraph.common.core.js" ></script> + <script src="../libraries/RGraph.common.context.js" ></script> + <script src="../libraries/RGraph.line.js" ></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + + <script> + window.onload = function () + { + /** + * Draw the line chart + */ + var line = new RGraph.Line('myLine', [45,12,16,18,44,54,23,21,56,58,33,47]); + line.Set('chart.background.barcolor1', 'white'); + line.Set('chart.background.barcolor2', 'white'); + line.Set('chart.tickmarks', null); + line.Set('chart.hmargin', 10); + line.Set('chart.linewidth', 3); + line.Set('chart.shadow', true); + line.Set('chart.shadow.offset', 2); + line.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']); + line.Set('chart.title', 'A line chart with context menu'); + + // This defines a context menu which shows the dialog. The commented out + // bit defines an onclick handler on the background, so that when you + // click it (the background), the dialog is hidden. + line.Set('chart.contextmenu', [ + ['Login to admin area...', function () {ModalDialog.Show('myDialog', 300);/*ModalDialog.background.onclick = function () {ModalDialog.Close();};*/}], + null, + ['Cancel', function () {}] + ]); + + line.Draw(); + } + </script> + + + <style> + /* + * These are the CSS classes that you can use to customise the appearance of the ModalDialog. If you're trying to + * override something which the scripts set, then because of the ordering you may need to use the "! important" + * modifier. + */ + .ModalDialog_background { + } + + .ModalDialog_dialog { + -webkit-box-shadow: gray 0 0 15px ! important; + -moz-box-shadow: 0 0 15px gray ! important; + box-shadow: 0 0 15px gray ! important; + } + + .ModalDialog_topbar { + } + </style> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> + +</head> +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + + <div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="index.html">Documentation</a> + > + RGraph & external libraries + </div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - Integrating RGraph with external libraries</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + <ul> + <li><a href="#msie">Note about Microsoft Internet Explorer and the ModalDialog</a></li> + <li><a href="#hiding">Hiding the ModalDialog</a></li> + <li><a href="#customising">Customising the ModalDialog</a></li> + <li><a href="#integration">ModalDialog integration</a></li> + <li><a href="#covering">Covering the scroll bars</a></li> + </ul> + + <canvas id="myLine" width="400" height="200" style="float: right">[No canvas support]</canvas> + + <p> + This page shows you how you can easily integrate the charts with other external Javascript libraries. This particular example + adds a context menu to the chart, of which the only option is to show a login dialog. This could, for example, be used to + allow logging in to an admin area. + </p> + + <p> + The dialog doesn't need to require user input - it could just be a static "Please wait..." type dialog, which is shown while a + subsequent page loads that takes a few seconds. + </p> + + <p> + The ModalDialog was originally an external library, however it's now part of the RGraph package. It's also covered by the + RGraph license - so if you have an <a href="licensing.html">RGraph license</a>, then the ModalDialog is part of that. + </p> + + <br /><br /> + + <pre class="code"> +<script src="RGraph.common.core.js"> +<script src="RGraph.common.context.js"> +<script src="RGraph.line.js"> +<script src="RGraph.modaldialog.js"> + +<script> + window.onload = function () + { + /** + * Draw the line chart + */ + var line = new RGraph.Line('myLine', [45,12,16,18,44,54,23,21,56,58,33,47]); + line.Set('chart.background.barcolor1', 'white'); + line.Set('chart.background.barcolor2', 'white'); + line.Set('chart.tickmarks', null); + line.Set('chart.hmargin', 10); + line.Set('chart.linewidth', 3); + line.Set('chart.shadow', true); + line.Set('chart.shadow.offset', 2); + line.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']); + line.Set('chart.title', 'A line chart with context menu'); + <span style="color: green"> + // This defines a context menu which calls the given function. This function in turn shows the dialog + line.Set('chart.contextmenu', [['Login to admin area...', function () {ModalDialog.Show('myDialog', 300);}}]]); + </span> + line.Draw(); + } +</script> + +<!-- This is the popup dialog--> + <div id="myDialog" class="modalDialog" style="display: none"> + <b>Please login</b> + <p> + <table border="0"> + <tr> + <td align="right" style="padding-top: 4px">Email</td> + <td><input type="text" size="20" name="email" style="width: 150px" /></td> + </tr> + <tr> + <td align="right" style="padding-top: 4px">Password</td> + <td><input type="password" size="20" name="password" style="width: 150px" /></td> + </tr> + <tr> + <td colspan="2" align="right"> + <input type="reset" value="Cancel" onclick="ModalDialog.Close()"> + <input type="submit" + name="submit" + value="Login »" + onclick="alert('This is just an example'); event.stopPropagation()"> + </td> + </tr> + </table> + </p> + </div> +<!-- End of dialog --></pre> + + <p> + If you're interested in using this modal dialog, then you'll probably also want the CSS that styles it. This can be found in the + "css" directory. + </p> + + <a name="msie"></a> + <h3>Note about Microsoft Internet Explorer 8 and the ModalDialog</h3> + + <p> + Microsoft Internet Explorer 8 only supports fixed positioning in strict rendering mode, therefore you must specify a DTD + when using this browser. Eg: + </p> + + <pre class="code"> +<!DOCTYPE html > +</pre> + + <a name="hiding"></a> + <h3>Hiding the ModalDialog</h3> + <p> + To hide the ModalDialog (from a "Cancel" button for example), you can use the Close() method: + </p> + + <pre class="code"> +<input type="reset" value="Cancel" onclick="ModalDialog.Close()"> +</pre> + + <a name="customising"></a> + <h3>Customising the ModalDialog</h3> + <p> + You can customise the appearance of the ModalDialog by using three CSS classes, which are documented <a href="css.html">here</a>. + This page customises the dialog slightly by changing the shadow X/Y offsets: + </p> + + <pre class="code"> +<style> + /* + * These are the CSS classes that you can use to customise the appearance of the ModalDialog. If you're trying to + * override something which the scripts set, then because of the ordering you may need to use the "! important" + * modifier. + */ + + /** + * This is the semi-opaque background + */ + .ModalDialog_background { + } + + + /** + * This is the dialog itself + */ + .ModalDialog_dialog { + -webkit-box-shadow: gray 0 0 15px ! important; + -moz-box-shadow: 0 0 15px gray ! important; + box-shadow: 0 0 15px gray ! important; + } + + + /** + * This is gray bar at the top of the dialog + */ + .ModalDialog_topbar { + } +</style> +</pre> + + <a name="integration"></a> + <h3>ModalDialog integration</h3> + <p> + To integrate the ModalDialog look at the sample code above (the key line is where the context menu is defined). The method you should call is <b>ModalDialog.Show(id, width)</b>. + The <i>id</i> is the <i>id</i> of the layer to use. Only the <i>.innerHTML</i> is used, not the layer itself, so it can be hidden by + setting the display CSS <i>display</i> property to <i>none</i>. The <i>width</i> is a number which is used as the width of the dialog. + </p> + + <p> + The only library needed for the ModalDialog to work is <i>RGraph.modaldialog.js</i> - you do not need to use + <i>RGraph.common.js</i>. This makes for far smaller download requirements. + </p> + + <a name="covering"></a> + <h3>Covering the scroll bars</h3> + <p> + Normally, a regular DIV lives inside the browser and cannot cover the scroll bars. There is however a way to achieve + this but it does mean that restructuring your website may be necessary, and it's done by using an IFRAME. The following + steps are involved: + </p> + + <ol> + <li style="margin-top: 0">The index page of your website creates an IFRAME and sets it to cover the entire window.</li> + <li style="margin-top: 0">This IFRAME then loads the website.</li> + <li style="margin-top: 0">The DIV then covers the top-most window.</li></li> + </ol> + + <p style="margin-bottom: 50px"> + There is an example of this technique <a href="iframe-setup.html"><b>here</b></a> + </p> + + <!-- This is the popup dialog--> + + <div id="myDialog" class="modalDialog" style="display: none"> + + <b>Please login</b> + <p> + <table border="0"> + <tr> + <td align="right" style="padding-top: 4px">Email</td> + <td><input type="text" size="20" name="email" style="width: 150px" /></td> + </tr> + + <tr> + <td align="right" style="padding-top: 4px">Password</td> + <td><input type="password" size="20" name="password" style="width: 150px" /></td> + </tr> + + <tr> + <td colspan="2" align="right"> + <input type="reset" value="Cancel" onclick="ModalDialog.Close()"> + <input type="submit" name="submit" value="Login »" onclick="alert('This is just an example'); event.stopPropagation()"> + </td> + </tr> + </table> + </p> + </div> + + <!-- End of dialog --> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/docs/fuel.html b/schall/static/RGraph/docs/fuel.html new file mode 100644 index 0000000..760881e --- /dev/null +++ b/schall/static/RGraph/docs/fuel.html @@ -0,0 +1,302 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - Fuel Gauge documentation</title> + + <meta name="keywords" content="rgraph html5 canvas docs fuel gauge" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Documentation about the fuel gauge" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> +</head> +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + <div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="index.html">Documentation</a> + > + Fuel Gauge + </div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - Fuel Gauge documentation</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + <p> + The Fuel gauge is recent addition to RGraph, and the available configuration options are shown here. + </p> + + <p> + The example file is <a href="../examples/fuel.html">here</a>. + </p> + + <ul> + <li><a href="#available.properties">Properties</a></li> + </ul> + + <pre class="code"> +<script> + window.onload = function () + { + fuel = new RGraph.Fuel('cvs', 0, 100, 67); + fuel.Set('chart.needle.color', 'blue'); + fuel.Set('chart.colors', ['#ddf']); + fuel.Set('chart.labels.empty', 'Empty!'); + fuel.Set('chart.labels.full', 'Full'); + fuel.Set('chart.icon', '/images/water.jpg'); + fuel.Draw(); + } +</script> +</pre> + + <a name="available.properties"></a> + <h2>Properties</h2> + + <p> + You can use these properties to control how the Fuel Gauge apears. You can set them by using the Set() method. Eg: + </p> + + <p> + <b>myFuel.Set('name', 'value');</b> + </p> + + <ul> + <li><a href="#colors">Colors</a></li> + <li><a href="#margins">Margins</a></li> + <li><a href="#needle">Needle options</a></li> + <li><a href="#labels">Labels and text</a></li> + <li><a href="#interactive">Interactive features</a></li> + <li><a href="#misc">Miscellaneous</a></li> + </ul> + + <div> + <a name="colors"></a> + <h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Colors</h3> + + <a name="chart.colors"></a> + <b>chart.colors</b><br /> + The color of the Fuel Gauge. Noe that despite there being only one color, this is still an array.<br /> + <i>Default: ['red']</i><br /><br /> + + <a name="margins"></a> + <h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Margins</h3> + + <a name="chart.gutter.left"></a> + <b>chart.gutter.left</b><br /> + The left gutter of the chart, (the gutter is where the labels and title are)).<br /> + <i>Default: 5</i><br /><br /> + + <a name="chart.gutter.right"></a> + <b>chart.gutter.right</b><br /> + The right gutter of the chart, (the gutter is where the labels and title are).<br /> + <i>Default: 5</i><br /><br /> + + <a name="chart.gutter.top"></a> + <b>chart.gutter.top</b><br /> + The top gutter of the chart, (the gutter is where the labels and title are).<br /> + <i>Default: 5</i><br /><br /> + + <a name="chart.gutter.bottom"></a> + <b>chart.gutter.bottom</b><br /> + The bottom gutter of the chart, (the gutter is where the labels and title are).<br /> + <i>Default: 5</i><br /><br /> + + <a name="needle"></a> + <h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Needle options</h3> + + <a name="chart.needle.color"></a> + <b>chart.needle.color</b><br /> + The color of the needle (not including the bulb at the bottom). Note that this is NOT an array - it's just a string.<br /> + <i>Default: 'red'</i><br /><br /> + + <a name="labels"></a> + <h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Labels and text</h3> + + <a name="chart.labels.empty"></a> + <b>chart.labels.empty</b><br /> + The label used as the empty text.<br /> + <i>Default: E</i><br /><br /> + + <a name="chart.labels.full"></a> + <b>chart.labels.full</b><br /> + The label used as the full text.<br /> + <i>Default: F</i><br /><br /> + + <a name="chart.text.color"></a> + <b>chart.text.color</b><br /> + The color used for the text on the chart.<br /> + <i>Default: F</i><br /><br /> + + <a name="chart.text.font"></a> + <b>chart.text.font</b><br /> + The font used for the text.<br /> + <i>Default: Verdana</i><br /><br /> + + <a name="interactive"></a> + <h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Interactive features</h3> + + <a name="chart.contextmenu"></a> + <b>chart.contextmenu</b><br /> + The context menu. For more details see <a href="context.html">here</a>.<br /> + <i>Default: null</i><br /><br /> + + <a name="chart.annotatable"></a> + <b>chart.annotatable</b><br /> + Whether annotations are enabled for the chart (ie you can draw on the chart interactively.<br /> + <i>Default: false</i><br /><br /> + + <a name="chart.annotate.color"></a> + <b>chart.annotate.color</b><br /> + If you do not allow the use of the palette, then this will be the only colour allowed for annotations.<br /> + <i>Default: black</i><br /><br /> + + <a name="chart.resizable"></a> + <b>chart.resizable</b><br /> + Defaulting to false, this determines whether your chart will be resizable. Because of the numerous event handlers this has to install code on, This feature is unlikely to work with other dynamic features (the context menu is fine however).<br /> + <i>Default: false</i><br /><br /> + + <a name="chart.resize.handle.background"></a> + <b>chart.resize.handle.background</b><br /> + With this you can specify the background color for the resize handle. If you're adjusting the position of the + handle then you may need this to make the handle stand out more.<br /> + <i>Default: null</i><br /><br /> + + <a name="zoom"></a> + <h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Zoom</h3> + + <a name="chart.zoom.mode"></a> + <b>chart.zoom.mode</b><br /> + Can be used to control whether the zoom is in thumbnail or canvas mode. Possible values are: <i>thumbnail</i> and <i>canvas</i>.<br /> + <i>Default: canvas</i><br /><br /> + + <a name="chart.zoom.factor"></a> + <b>chart.zoom.factor</b><br /> + This is the factor that the chart will be zoomed by (bigger values means more zoom)<br /> + <i>Default: 1.5</i><br /><br /> + + <a name="chart.zoom.fade.in"></a> + <b>chart.zoom.fade.in</b><br /> + Whether the zoomed canvas fades in or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /> + <i>Default: true</i><br /><br /> + + <a name="chart.zoom.fade.out"></a> + <b>chart.zoom.fade.out</b><br /> + Whether the zoomed canvas fades out or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /> + <i>Default: true</i><br /><br /> + + <a name="chart.zoom.hdir"></a> + <b>chart.zoom.hdir</b><br /> + The horizontal direction of the zoom. Possible values are: <i>left</i>, <i>center</i>, <i>right</i><br /> + <i>Default: right</i><br /><br /> + + <a name="chart.zoom.vdir"></a> + <b>chart.zoom.vdir</b><br /> + The vertical direction of the zoom. Possible values are: <i>up</i>, <i>center</i>, <i>down</i><br /> + <i>Default: down</i><br /><br /> + + <a name="chart.zoom.delay"></a> + <b>chart.zoom.delay</b><br /> + The delay (in milliseconds) between frames.<br /> + <i>Default: 50</i><br /><br /> + + <a name="chart.zoom.frames"></a> + <b>chart.zoom.frames</b><br /> + The number of frames in the zoom animation.<br /> + <i>Default: 10</i><br /><br /> + + <a name="chart.zoom.shadow"></a> + <b>chart.zoom.shadow</b><br /> + Whether or not the zoomed canvas has a shadow or not.<br /> + <i>Default: true</i><br /><br /> + + <a name="chart.zoom.thumbnail.width"></a> + <b>chart.zoom.thumbnail.width</b><br /> + When the zoom is in thumbnail mode, this is the width (in pixels) of the thumbnail.<br /> + <i>Default: 75</i><br /><br /> + + <a name="chart.zoom.thumbnail.height"></a> + <b>chart.zoom.thumbnail.height</b><br /> + When the zoom is in thumbnail mode, this is the height (in pixels) of the thumbnail.<br /> + <i>Default: 75</i><br /><br /> + + <a name="chart.zoom.background"></a> + <b>chart.zoom.background</b><br /> + Defaulting to true, this determines whether the zoom has a dark, semi-opaque background that covers the entire web page.<br /> + <i>Default: true</i><br /><br /> + + + <a name="misc"></a> + <h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Miscellaneous</h3> + + <a name="chart.icon"></a> + <b>chart.icon</b><br /> + This should be a data: URL that represents the image to use as the icon on the chart. The + <a href="../examples/fuel.html">example page</a> has an example of a chart that uses this option to show a + water droplet instead of the fuel pump.<br /> + <i>Default: [A fuel icon]</i><br /><br /> + </div> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/docs/funnel.html b/schall/static/RGraph/docs/funnel.html new file mode 100644 index 0000000..c4b5150 --- /dev/null +++ b/schall/static/RGraph/docs/funnel.html @@ -0,0 +1,409 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - funnel charts documentation</title> + + <meta name="keywords" content="rgraph html5 canvas chart docs funnel charts" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Documentation about the Funnel charts" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.jpg"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> + +</head> +<body> + + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + <div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="index.html">Documentation</a> + > + Funnel charts + </div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - Funnel charts documentation</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + <p> + These are funnel charts. It can be used to illustrate stages of a sales or order fulfillment process, and in doing so highlight + any bottlenecks or steps where large amounts of customers are lost. + </p> + + <p> + The example file is <a href="../examples/funnel.html">here</a>. + </p> + + <pre class="code"> +<script> + window.onload = function () + { + var funnel = new RGraph.Funnel('funnel1', [100,45,45,26,21,5]); + funnel.Set('chart.text.boxed', false); + funnel.Set('chart.title', 'Leads through to sales'); + funnel.Set('chart.labels', ['A', 'B', 'C', 'D', 'E', 'F']); + funnel.Set('chart.shadow', true); + funnel.Draw(); + } +</script> +</pre> + + + <h2>Properties</h2> + + <p> + You can use these properties to control how the Funnel chart appears. You can set them by using the Set() method. Eg: + </p> + + <p> + <b>myFunnel.Set('name', 'value');</b> + </p> + + <ul> + <li><a href="#margins">Margins</a></li> + <li><a href="#colors">Colors</a></li> + <li><a href="#labels and text">Labels and text</a></li> + <li><a href="#titles">Titles</a></li> + <li><a href="#shadow">Shadow</a></li> + <li><a href="#interactive features">Interactive features</a></li> + <li><a href="#key">Key</a></li> + <li><a href="#zoom">Zoom</a></li> + <li><a href="#misc">Miscellaneous</a></li> + </ul> + +<a name="margins"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Margins</h3> + + + + <a name="chart.gutter.left"></a> + <b>chart.gutter.left</b><br /> + The left gutter of the chart, (the gutter is where the labels and title are)).<br /> + <i>Default: 25</i><br /><br /> + + <a name="chart.gutter.right"></a> + <b>chart.gutter.right</b><br /> + The right gutter of the chart, (the gutter is where the labels and title are).<br /> + <i>Default: 25</i><br /><br /> + + <a name="chart.gutter.top"></a> + <b>chart.gutter.top</b><br /> + The top gutter of the chart, (the gutter is where the labels and title are).<br /> + <i>Default: 25</i><br /><br /> + + <a name="chart.gutter.bottom"></a> + <b>chart.gutter.bottom</b><br /> + The bottom gutter of the chart, (the gutter is where the labels and title are).<br /> + <i>Default: 25</i><br /><br /> + +<a name="colors"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Colors</h3> <a name="chart.colors"></a> +<b>chart.colors</b><br /> + These are the colors used for each segment.<br /><i>Default: ['red', 'green', 'gray', 'blue', 'black', 'white']</i><br /><br /> +<a name="labels and text"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Labels and text</h3> <a name="chart.labels"></a> +<b>chart.labels</b><br /> + An array of the labels to be used on the chart. <br /><i>Default: An empty array</i><br /><br /> + <a name="chart.text.font"></a> +<b>chart.text.font</b><br /> + The font used to render the text.<br /><i>Default: Verdana</i><br /><br /> + <a name="chart.text.color"></a> +<b>chart.text.color</b><br /> + The color of the labels. <br /><i>Default: black</i><br /><br /> + <a name="chart.text.size"></a> +<b>chart.text.size</b><br /> + The size (in points) of the labels. <br /><i>Default: 10</i><br /><br /> + <a name="chart.text.boxed"></a> +<b>chart.text.boxed</b><br /> + Whether the text is contained within a white bounding box. In some cases this can help readability.<br /><i>Default: true</i><br /><br /> + <a name="chart.text.halign"></a> +<b>chart.text.halign</b><br /> + The horizontal alignment of the text. Can be <i>center</i> or <i>left</i>.<br /><i>Default: left</i><br /><br /> +<a name="titles"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Titles</h3> +<a name="chart.title"></a> +<b>chart.title</b><br /> + The title of the chart, if any. <br /><i>Default: null</i><br /><br /> + +<a name="chart.title.font"></a> +<b>chart.title.font</b><br /> +The font that the title is rendered in. If not specified the chart.text.font setting is used (usually Verdana)<br /> +<i>Default: null</i><br /><br /> + +<a name="chart.title.size"></a> +<b>chart.title.size</b><br /> +The size of the title. If not specified the size is usually 2pt bigger than the chart.text.size setting.<br /> +<i>Default: null</i><br /><br /> + +<a name="chart.title.bold"></a> +<b>chart.title.bold</b><br /> +Whather the title is bold or not.<br /> +<i>Default: true</i><br /><br /> + +<a name="chart.title.background"></a> +<b>chart.title.background</b><br /> +The background color (if any) for the title.<br /> +<i>Default: null</i><br /><br /> + + <a name="chart.title.hpos"></a> +<b>chart.title.hpos</b><br /> + This allows you to completely override the horizontal positioning of the title. It should be a number between 0 and 1, and is multiplied with the whole width of the canvas and then used as the horizontal position. <br /><i>Default: null</i><br /><br /> + <a name="chart.title.vpos"></a> +<b>chart.title.vpos</b><br /> + This allows you to completely override the vertical positioning of the title. It should be a number between 0 and 1, and is multiplied with the gutter and then used as the vertical position. It can be useful if you need to have a large gutter.<br /><i>Default: null</i><br /><br /> + <a name="chart.title.color"></a> +<b>chart.title.color</b><br /> + The color of the title.<br /> <i>Default: black</i><br /><br /> +<a name="shadow"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Shadow</h3> <a name="chart.shadow"></a> +<b>chart.shadow</b><br /> + Whether a drop shadow is applied to the Funnel chart. The funnel is the first to use the canvas shadow API, and as such they won't be supported on all browsers. Currently only Safari 4+ (possibly earlier versions too), Firefox 3.5+ and Chrome 2+ support canvas shadows.<br /><i>Default: false</i><br /><br /> + <a name="chart.shadow.color"></a> +<b>chart.shadow.color</b><br /> + The color of the drop shadow.<br /><i>Default: #666</i><br /><br /> + <a name="chart.shadow.blur"></a> +<b>chart.shadow.blur</b><br /> + The severity of the shadow blurring effect.<br /><i>Default: 3</i><br /><br /> + <a name="chart.shadow.offsetx"></a> +<b>chart.shadow.offsetx</b><br /> + The X offset of the shadow.<br /><i>Default: 3</i><br /><br /> + <a name="chart.shadow.offsety"></a> +<b>chart.shadow.offsety</b><br /> + The Y offset of the shadow.<br /><i>Default: 3</i><br /><br /> + + <a name="interactive features"></a> + <h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Interactive features</h3> + + <a name="chart.contextmenu"></a> + <b>chart.contextmenu</b><br /> + An array of context menu items. More information on context menus is <a href="context.html">here</a>.<br /><i>Default: [] (An empty array)</i><br /><br /> + + <a name="chart.tooltips"></a> + <b>chart.tooltips</b><br /> + An array of tooltips for the Funnel chart segments.<br /><i>Default: null</i><br /><br /> + + <a name="chart.tooltips.effect"></a> + <b>chart.tooltips.effect</b><br /> + The animated effect that tooltips use - <i>fade</i> or <i>expand</i><br /><i>Default: fade</i><br /><br /> + + <a name="chart.tooltips.css.class"></a> + <b>chart.tooltips.css.class</b><br /> + This is the name of the CSS class the chart uses.<br /><i>Default: RGraph_tooltip</i><br /><br /> + + <a name="chart.tooltips.override"></a> + <b>chart.tooltips.override</b><br /> + If you wish to handle showing tooltips yourself, this should be a function object which does just that. There's more information on the <a href="tooltips.html">tooltips documentation page</a><br /><i>Default: null</i><br /><br /> + + <a name="chart.annotatable"></a> +<b>chart.annotatable</b><br /> + Whether annotations are enabled for the chart (ie you can draw on the chart interactively.<br /><i>Default: false</i><br /><br /> + <a name="chart.annotate.color"></a> +<b>chart.annotate.color</b><br /> + If you do not allow the use of the palette, then this will be the only colour allowed for annotations.<br /><i>Default: black</i><br /><br /> + + + + + <a name="chart.resizable"></a> + <b>chart.resizable</b><br /> + Defaulting to false, this determines whether your chart will be resizable. Because of the numerous event handlers this has to install code on, This feature is unlikely to work with other dynamic features (the context menu is fine however).<br /> + <i>Default: false</i><br /><br /> + + + <a name="chart.resize.handle.background"></a> + <b>chart.resize.handle.background</b><br /> + With this you can specify the background color for the resize handle. If you're adjusting the position of the + handle then you may need this to make the handle stand out more.<br /> + <i>Default: null</i><br /><br /> + + + <a name="key"></a> + <h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Key</h3> + + <a name="chart.key"></a> + <b>chart.key</b><br /> + An array of key information. <br /> + <i>Default: [] (An empty array)</i><br /><br /> + + <a name="chart.key.background"></a> + <b>chart.key.background</b><br /> + The color of the key background. Typically white, you could set this to something like rgba(255,255,255,0.7) to allow people to see things behind it.<br> + <i>Default: white</i><br /><br /> + + <a name="chart.key.halign"></a> + <b>chart.key.halign</b><br /> + Instead of specifying the exact x/y coordinates, you can use this property to simply specify whether the key hould be + aligned <i>left</i> or <i>right</i>.<br /> + <i>Default: right</i><br /><br /> + + <a name="chart.key.position"></a> + <b>chart.key.position</b><br /> + Determines the position of the key.Either <b>graph</b> (default), or <b>gutter</b>.<br /> + <i>Default: graph</i><br /><br /> + + <b>chart.key.position.x</b><br /> + This allows you to specify a specific X coordinate for the key.<br /> + <i>Default: null</i><br /><br /> + + <b>chart.key.position.y</b><br /> + This allows you to specify a specific Y coordinate for the key.<br /> + <i>Default: null</i><br /><br /> + + <b>chart.key.position.gutter.boxed</b><br /> + If you have the key in gutter mode (ie horizontal), this allows you to give a background color.<br /> + <i>Default: true</i><br /><br /> + + <a name="chart.key.shadow"></a> + <b>chart.key.shadow</b><br /> + Whether a small drop shadow is applied to the key.<br /> + <i>Default: false</i><br /><br /> + + <a name="chart.key.shadow.color"></a> + <b>chart.key.shadow.color</b><br /> + The color of the shadow.<br /> + <i>Default: #666</i><br /><br /> + + <a name="chart.key.shadow.blur"></a> + <b>chart.key.shadow.blur</b><br /> + The extent of the blurring effect used on the shadow.<br /> + <i>Default: 3</i><br /><br /> + + <a name="chart.key.shadow.offsetx"></a> + <b>chart.key.shadow.offsetx</b><br /> + The X offset of the shadow.<br /> + <i>Default: 2</i><br /><br /> + + <a name="chart.key.shadow.offsety"></a> + <b>chart.key.shadow.offsety</b><br /> + The Y offset of the shadow.<br /> + <i>Default: 2</i><br /><br /> + + <b>chart.key.rounded</b><br /> + This controls whether the corners of the key (in graph mode) are curved. If the key is gutter mode, this has no effect.<br /> + <i>Default: false</i><br /><br /> + + <b>chart.key.color.shape</b><br /> + This can be <i>square</i>, <i>circle</i> or <i>line</i> and controls how the color indicators in the key appear.<br /> + <i>Default: square</i><br /><br /> + + <b>chart.key.linewidth</b><br /> + The line width of the surrounding border on the key.<br /> + <i>Default: 1</i><br /><br /> + + + +<a name="zoom"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Zoom</h3> <a name="chart.zoom.mode"></a> +<b>chart.zoom.mode</b><br /> + Can be used to control whether the zoom is in thumbnail or canvas mode. Possible values are: <i>thumbnail</i> and <i>canvas</i>.<br /><i>Default: canvas</i><br /><br /> + <a name="chart.zoom.factor"></a> +<b>chart.zoom.factor</b><br /> + This is the factor that the chart will be zoomed by (bigger values means more zoom)<br /><i>Default: 1.5</i><br /><br /> + <a name="chart.zoom.fade.in"></a> +<b>chart.zoom.fade.in</b><br /> + Whether the zoomed canvas fades in or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /><i>Default: true</i><br /><br /> + <a name="chart.zoom.fade.out"></a> +<b>chart.zoom.fade.out</b><br /> + Whether the zoomed canvas fades out or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /><i>Default: true</i><br /><br /> + <a name="chart.zoom.hdir"></a> +<b>chart.zoom.hdir</b><br /> + The horizontal direction of the zoom. Possible values are: <i>left</i>, <i>center</i>, <i>right</i><br /><i>Default: right</i><br /><br /> + <a name="chart.zoom.vdir"></a> +<b>chart.zoom.vdir</b><br /> + The vertical direction of the zoom. Possible values are: <i>up</i>, <i>center</i>, <i>down</i><br /><i>Default: down</i><br /><br /> + <a name="chart.zoom.delay"></a> +<b>chart.zoom.delay</b><br /> + The delay (in milliseconds) between frames.<br /><i>Default: 50</i><br /><br /> + <a name="chart.zoom.frames"></a> +<b>chart.zoom.frames</b><br /> + The number of frames in the zoom animation.<br /><i>Default: 10</i><br /><br /> + <a name="chart.zoom.shadow"></a> +<b>chart.zoom.shadow</b><br /> + Whether or not the zoomed canvas has a shadow or not.<br /><i>Default: true</i><br /><br /> + <a name="chart.zoom.thumbnail.width"></a> +<b>chart.zoom.thumbnail.width</b><br /> + When the zoom is in thumbnail mode, this is the width (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br /> + <a name="chart.zoom.thumbnail.height"></a> +<b>chart.zoom.thumbnail.height</b><br /> + When the zoom is in thumbnail mode, this is the height (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br /> + <a name="chart.zoom.background"></a> +<b>chart.zoom.background</b><br /> + Defaulting to true, this determines whether the zoom has a dark, semi-opaque background that covers the entire web page.<br /><i>Default: true</i><br /><br /> + + + <a name="misc"></a> + <h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Miscellaneous</h3> + + <a name="chart.highlight.stroke"></a> + <b>chart.highlight.stroke</b><br /> + If you use tooltips, this controls the colour of the highlight stroke.<br /> + <i>Default: black</i><br /><br /> + + <a name="chart.highlight.fill"></a> + <b>chart.highlight.fill</b><br /> + If you use tooltips, this controls the colour of the highlight fill.<br /> + <i>Default: rgba(255,255,255,0.5)</i><br /><br /> + +</div><br /><br /> +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/docs/gantt.html b/schall/static/RGraph/docs/gantt.html new file mode 100644 index 0000000..b10b91e --- /dev/null +++ b/schall/static/RGraph/docs/gantt.html @@ -0,0 +1,471 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - gantt charts documentation</title> + + <meta name="keywords" content="rgraph html5 canvas charts docs gantt charts" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Documentation about Gantt charts" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.jpg"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> + +</head> +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + <div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="index.html">Documentation</a> + > + Gantt charts + </div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - Gantt charts documentation</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + <p> + Gantt charts can be used to easily represent schedule information, making visualising this information far more straightfoward. + </p> + + <ul> + <li><a href="#events">Adding events to your Gantt charts</a></li> + <li><a href="#vbars">Adding vertical bars to your Gantt charts</a></li> + </ul> + + <h2>Example</h2> + + <p> + The example file is <a href="../examples/gantt.html">here</a>. + </p> + + <pre class="code"> +<script> + window.onload = function () + { + var gantt = new RGraph.Gantt('gantt'); + gantt.Set('chart.xmax', 365); + gantt.Set('chart.gutter.left', 75); + gantt.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']); + gantt.Set('chart.title', 'Holiday schedule for Xyz Ltd'); + gantt.Set('chart.defaultcolor', 'rgba(255,0,0,1)'); + gantt.Set('chart.tooltips', ["<b>Richard</b><br />Richard is going on holiday to Malta.<br />He'll be away for 28 days.", + "<b>Fred</b><br />Fred is also going away for 28 days", + "<b>Barney</b><br />Barney is off work for two weeks", + "<b>Gloria</b><br />Gloria is off for 3 weeks", + "<b>Paul</b><br /> Away for 31 days", + "<b>Harry</b><br />Away for three weeks", + "<b>Shane</b><br />Away for one week", + "<b>Barry</b><br />Away for two weeks", + "<b>Cynthia</b><br />Away for two weeks", + "<b>Graham</b><br />Away for August and September", + "<b>Paul</b><br />Away for 31 days"]); + gantt.Set('chart.events', [ + [31, 28, null, 'Richard'], + [31, 28, null, 'Fred'], + [59, 14, null, 'Barney'], + [59, 21, null, 'Gloria'], + [59, 31, null, 'Paul'], + [80, 21, null, 'Harry'], + [94, 7, null, 'Shane'], + [120, 14, null, 'Barry'], + [130, 14, null, 'Cynthia'], + [211, 61, null, 'Graham'], + [334, 31, null, 'Paul'] + ]); + gantt.Set('chart.vbars', [ + [0, 31, 'rgba(192,255,192,0.5)'], + [59, 31, 'rgba(192,255,192,0.5)'], + [120, 31, 'rgba(192,255,192,0.5)'], + [181, 31, 'rgba(192,255,192,0.5)'], + [243, 30, 'rgba(192,255,192,0.5)'], + [304, 30, 'rgba(192,255,192,0.5)'] + ]); + + gantt.Draw(); + } +</script> +</pre> + + <h2>Properties</h2> + + <p> + You can use these properties to control how the bar chart apears. + </p> + + <ul> + <li><a href="#chart configuration">Chart configuration</a></li> + <li><a href="#background">Background</a></li> + <li><a href="#margins">Margins</a></li> + <li><a href="#labels and text">Labels and text</a></li> + <li><a href="#titles">Titles</a></li> + <li><a href="#interactive features">Interactive features</a></li> + <li><a href="#zoom">Zoom</a></li> + <li><a href="#miscellaneous">Miscellaneous</a></li> + </ul> + + + + <a name="chart configuration"></a> + <h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Chart configuration</h3> + <a name="chart.xmax"></a> + <b>chart.xmax</b><br /> + Required. This determines how many "units" wide the Gantt chart is. For example to represent a year, you would use 365, giving + a granularity of one day.<br /> + <i>Default: none</i><br /><br /> + + <a name="chart.xmin"></a> + <b>chart.xmin</b><br /> + This option can sometimes make using a Gantt chart spread over several pages easier.<br /> + <i>Default: 0</i><br /><br /> + + +<a name="background"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Background</h3> <a name="chart.background.barcolor1"></a> +<b>chart.background.barcolor1</b><br /> + Color of the background bars<br /><i>Default: white</i><br /><br /> + <a name="chart.background.barcolor2"></a> +<b>chart.background.barcolor2</b><br /> + Color of the background bars<br /><i>Default: white</i><br /><br /> + <a name="chart.background.grid"></a> +<b>chart.background.grid</b><br /> + Whether a grid is shown as part of the background<br /><i>Default: true</i><br /><br /> + <a name="chart.background.grid.color"></a> +<b>chart.background.grid.color</b><br /> + The color of the background grid.<br /><i>Default: #eee</i><br /><br /> + <a name="chart.background.grid.hsize"></a> +<b>chart.background.grid.hsize</b><br /> + The size of the horizontal grid.<br /><i>Default: 20</i><br /><br /> + <a name="chart.background.grid.vsize"></a> +<b>chart.background.grid.vsize</b><br /> + The size of the vertical grid.<br /><i>Default: 20</i><br /><br /> + <a name="chart.background.grid.width"></a> +<b>chart.background.grid.width</b><br /> + The line width of the background grid.<br /><i>Default: 1</i><br /><br /> + <a name="chart.background.grid.autofit"></a> +<b>chart.background.grid.autofit</b><br /> + Instead of specifying a pixel width/height for the background grid, you can use autofit and specify how many horizontal and vertical lines you want.<br /><i>Default: false</i><br /><br /> + <a name="chart.background.grid.autofit.numhlines"></a> +<b>chart.background.grid.autofit.numhlines</b><br /> + When using autofit this allows you to specify how many horizontal grid lines you want. <br /><i>Default: 7</i><br /><br /> + <a name="chart.background.grid.autofit.numvlines"></a> +<b>chart.background.grid.autofit.numvlines</b><br /> + When using autofit this allows you to specify how many vertical grid lines you want. <br /><i>Default: 20</i><br /><br /> +<a name="margins"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Margins</h3> + + + + <a name="chart.gutter.left"></a> + <b>chart.gutter.left</b><br /> + The left gutter of the chart, (the gutter is where the labels and title are)).<br /> + <i>Default: 75</i><br /><br /> + + <a name="chart.gutter.right"></a> + <b>chart.gutter.right</b><br /> + The right gutter of the chart, (the gutter is where the labels and title are).<br /> + <i>Default: 25</i><br /><br /> + + <a name="chart.gutter.top"></a> + <b>chart.gutter.top</b><br /> + The top gutter of the chart, (the gutter is where the labels and title are).<br /> + <i>Default: 25</i><br /><br /> + + <a name="chart.gutter.bottom"></a> + <b>chart.gutter.bottom</b><br /> + The bottom gutter of the chart, (the gutter is where the labels and title are).<br /> + <i>Default: 25</i><br /><br /> + +<a name="labels and text"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Labels and text</h3> <a name="chart.text.size"></a> +<b>chart.text.size</b><br /> + The size of the text (in points).<br /><i>Default: 10</i><br /><br /> + <a name="chart.text.font"></a> +<b>chart.text.font</b><br /> + The font used to render the text.<br /><i>Default: Verdana</i><br /><br /> + <a name="chart.text.color"></a> +<b>chart.text.color</b><br /> + The color of the labels. <br /><i>Default: black</i><br /><br /> + <a name="chart.labels"></a> +<b>chart.labels</b><br /> + An array of the labels which are applied to the chart.<br /><i>Default: [] (An empty array)</i><br /><br /> +<a name="titles"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Titles</h3> + +<a name="chart.title"></a> +<b>chart.title</b><br /> + The title of the chart.<br /><i>Default: not set</i><br /><br /> + + + +<a name="chart.title.font"></a> +<b>chart.title.font</b><br /> +The font that the title is rendered in. If not specified the chart.text.font setting is used (usually Verdana)<br /> +<i>Default: null</i><br /><br /> + +<a name="chart.title.size"></a> +<b>chart.title.size</b><br /> +The size of the title. If not specified the size is usually 2pt bigger than the chart.text.size setting.<br /> +<i>Default: null</i><br /><br /> + +<a name="chart.title.bold"></a> +<b>chart.title.bold</b><br /> +Whather the title is bold or not.<br /> +<i>Default: true</i><br /><br /> + +<a name="chart.title.background"></a> +<b>chart.title.background</b><br /> +The background color (if any) for the title.<br /> +<i>Default: null</i><br /><br /> + + <a name="chart.title.color"></a> +<b>chart.title.color</b><br /> + The color of the title.<br /> <i>Default: black</i><br /><br /> + <a name="chart.title.hpos"></a> +<b>chart.title.hpos</b><br /> + This allows you to completely override the horizontal positioning of the title. It should be a number between 0 and 1, and is multiplied with the whole width of the canvas and then used as the horizontal position. <br /><i>Default: null</i><br /><br /> + <a name="chart.title.vpos"></a> +<b>chart.title.vpos</b><br /> + This allows you to completely override the vertical positioning of the title. It should be a number between 0 and 1, and is multiplied with the gutter and then used as the vertical position. It can be useful if you need to have a large gutter.<br /><i>Default: null</i><br /><br /> +<a name="interactive features"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Interactive features</h3> <a name="chart.tooltips"></a> +<b>chart.tooltips</b><br /> + An array of tooltips that are shown when the bars are clicked. They can contain HTML.<br /><i>Default: [] (An empty array)</i><br /><br /> + <a name="chart.tooltips.effect"></a> +<b>chart.tooltips.effect</b><br /> + The animated effect used for showing tooltips. Can be either <i>fade</i> or <i>expand</i>.<br /><i>Default: fade</i><br /><br /> + <a name="chart.tooltips.css.class"></a> +<b>chart.tooltips.css.class</b><br /> + This is the name of the CSS class the chart uses.<br /><i>Default: RGraph_tooltip</i><br /><br /> + <a name="chart.tooltips.override"></a> +<b>chart.tooltips.override</b><br /> + If you wish to handle showing tooltips yourself, this should be a function object which does just that. There's more information on the <a href="tooltips.html">tooltips documentation page</a><br /><i>Default: null</i><br /><br /> + <a name="chart.contextmenu"></a> +<b>chart.contextmenu</b><br /> + An array of context menu items. Cannot be used in conjunction with tooltips.<br /><i>Default: [] (An empty array)</i><br /><br /> + <a name="chart.annotatable"></a> +<b>chart.annotatable</b><br /> + Whether annotations are enabled for the chart (ie you can draw on the chart interactively.<br /><i>Default: false</i><br /><br /> + <a name="chart.annotate.color"></a> +<b>chart.annotate.color</b><br /> + If you do not allow the use of the palette, then this will be the only colour allowed for annotations.<br /><i>Default: black</i><br /><br /> + + + <a name="chart.resizable"></a> + <b>chart.resizable</b><br /> + Defaulting to false, this determines whether your chart will be resizable. Because of the numerous event handlers this has to install code on, This feature is unlikely to work with other dynamic features (the context menu is fine however).<br /> + <i>Default: false</i><br /><br /> + + <a name="chart.resize.handle.background"></a> + <b>chart.resize.handle.background</b><br /> + With this you can specify the background color for the resize handle. If you're adjusting the position of the + handle then you may need this to make the handle stand out more.<br /> + <i>Default: null</i><br /><br /> + + +<a name="zoom"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Zoom</h3> <a name="chart.zoom.mode"></a> +<b>chart.zoom.mode</b><br /> + Can be used to control whether the zoom is in thumbnail or canvas mode. Possible values are: <i>thumbnail</i> and <i>canvas</i>.<br /><i>Default: canvas</i><br /><br /> + <a name="chart.zoom.factor"></a> +<b>chart.zoom.factor</b><br /> + This is the factor that the chart will be zoomed by (bigger values means more zoom)<br /><i>Default: 1.5</i><br /><br /> + <a name="chart.zoom.fade.in"></a> +<b>chart.zoom.fade.in</b><br /> + Whether the zoomed canvas fades in or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /><i>Default: true</i><br /><br /> + <a name="chart.zoom.fade.out"></a> +<b>chart.zoom.fade.out</b><br /> + Whether the zoomed canvas fades out or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /><i>Default: true</i><br /><br /> + <a name="chart.zoom.hdir"></a> +<b>chart.zoom.hdir</b><br /> + The horizontal direction of the zoom. Possible values are: <i>left</i>, <i>center</i>, <i>right</i><br /><i>Default: right</i><br /><br /> + <a name="chart.zoom.vdir"></a> +<b>chart.zoom.vdir</b><br /> + The vertical direction of the zoom. Possible values are: <i>up</i>, <i>center</i>, <i>down</i><br /><i>Default: down</i><br /><br /> + <a name="chart.zoom.delay"></a> +<b>chart.zoom.delay</b><br /> + The delay (in milliseconds) between frames.<br /><i>Default: 50</i><br /><br /> + <a name="chart.zoom.frames"></a> +<b>chart.zoom.frames</b><br /> + The number of frames in the zoom animation.<br /><i>Default: 10</i><br /><br /> + <a name="chart.zoom.shadow"></a> +<b>chart.zoom.shadow</b><br /> + Whether or not the zoomed canvas has a shadow or not.<br /><i>Default: true</i><br /><br /> + <a name="chart.zoom.thumbnail.width"></a> +<b>chart.zoom.thumbnail.width</b><br /> + When the zoom is in thumbnail mode, this is the width (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br /> + <a name="chart.zoom.thumbnail.height"></a> +<b>chart.zoom.thumbnail.height</b><br /> + When the zoom is in thumbnail mode, this is the height (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br /> + <a name="chart.zoom.background"></a> +<b>chart.zoom.background</b><br /> + Defaulting to true, this determines whether the zoom has a dark, semi-opaque background that covers the entire web page.<br /><i>Default: true</i><br /><br /> + + <a name="miscellaneous"></a> + <h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Miscellaneous</h3> + + <a name="chart.highlight.stroke"></a> + <b>chart.highlight.stroke</b><br /> + If you use tooltips, this controls the colour of the highlight stroke. + <br /><i>Default: black</i><br /><br /> + + <a name="chart.highlight.fill"></a> + <b>chart.highlight.fill</b><br /> + If you use tooltips, this controls the colour of the highlight fill. + <br /><i>Default: rgba(255,255,255,0.5)</i><br /><br /> + +<a name="chart.borders"></a> +<b>chart.borders</b><br /> + Whether a border is shown on the event bars<br /><i>Default: true</i><br /><br /> + <a name="chart.defaultcolor"></a> +<b>chart.defaultcolor</b><br /> + The default color of bars. If you don't specify a color for the event, this will be used.<br /><i>Default: white</i><br /><br /> + <a name="chart.events"></a> +<b>chart.events</b><br /> + An array of event information that is displayed on the gantt. See below for further information.<br /><i>Default: [] (An empty array)</i><br /><br /> + <a name="chart.vbars"></a> +<b>chart.vbars</b><br /> + Vertical bars used for decorative purposes, or for marking something on the chart (an event for example). See below for further information.<br /><i>Default: [] (An empty array)</i><br /><br /> +</div><!-- /DOCS --><br /><br /> + + <a name="events"></a> + <h2>Adding events to your Gantt chart</h2> + + <p> + To add events, you specify them using the <i>chart.events</i> property. You could use the following to set some events on your gantt chart: + </p> + + <pre class="code">gantt.Set('chart.events', [ + [31, 28, 75, 'Richard'], + [12, 28, 67, 'Fred'], + [59, 14, 0, 'Barney'], + [59, 21, 5, 'Gloria'], + [46, 31, 94, 'Paul'], + [80, 21, 46, 'Harry'], + [94, 17, 84, 'Shane'], + [34, 14, 32, 'Barry'], + [64, 14, 28, 'Cynthia', 'red', 'yellow'], + [13, 61, 74, 'Graham'], + [84, 31, 16, 'Paul'] + ]); +</pre> + + <p> + The first value is the (zero indexed) start number relative to your <i>chart.xmax</i>. So if you have set your <i>chart.xmax</i> to 62, (to represent + two months), and this value is 31, the start will be the start of the second month. In this case you could give two labels - + <i>['July', 'August']</i>. + </p> + + <p> + The second value is the duration. So using the previous example, if you set this to 7, you would have an event lasting a week. + </p> + + <p> + The third value is the "percentage complete" indicator. This is shown to the right of the event, and is optional - you can + specify <i>null</i> if you wish. + </p> + + <p> + The fourth value is the label that is used on the left hand side. + </p> + + <p> + The optional fifth value stipulates the background colour that the bar is. Default is white. + </p> + + <p> + The optional sixth value is the foreground color of the bar. Defaulting to #0c0. + </p> + + <p> + The optional seventh value is the border color, defaulting to black + </p> + + <p> + And the optional eigth value is the numerical linewidth of the border. The default is 1. + </p> + + <a name="vbars"></a> + <h2>Adding vertical bars to your Gantt chart</h2> + + <p> + You can add decorative vertical bars like so: + </p> + + <pre class="code">gantt.Set('chart.vbars', [ + [0, 31, 'rgba(192,255,192,0.5)'], + [59, 31, 'rgba(192,255,192,0.5)'], + [120, 31, 'rgba(192,255,192,0.5)'], + [181, 31, 'rgba(192,255,192,0.5)'], + [243, 30, 'rgba(192,255,192,0.5)'], + [304, 30, 'rgba(192,255,192,0.5)'], + ]); +</pre> + + <p> + You can use these for decorative purposes, or to mark events/limits. The first value is the start index, as above. + The second value is the unit length, again as above. The third value is the color of the vertical bar. + </p> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/docs/gauge.html b/schall/static/RGraph/docs/gauge.html new file mode 100644 index 0000000..a82a06f --- /dev/null +++ b/schall/static/RGraph/docs/gauge.html @@ -0,0 +1,268 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - gauge charts documentation</title> + + <meta name="keywords" content="rgraph html5 canvas docs gauge charts" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Documentation about Gauge charts" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> +</head> +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + <div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="index.html">Documentation</a> + > + Gauge charts + </div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - Gauge charts documentation</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + <p> + Gauge charts are another variant of the Odometer/Meter and may be more suited to your design. + </p> + + <p> + The example file is <a href="../examples/gauge.html">here</a>. + </p> + + <ul> + <li><a href="#available.properties">Properties</a></li> + </ul> + + <pre class="code"> +<script> + window.onload = function () + { + var gauge = new RGraph.Gauge('cvs', 0, 100, 46); + gauge.Set('chart.title', 'Bandwidth'); + gauge.Draw(); + } +</script> +</pre> + + <a name="available.properties"></a> + <h2>Properties</h2> + + <p> + You can use these properties to control how the Gauge chart apears. You can set them by using the Set() method. Eg: + </p> + + <p> + <b>myGauge.Set('name', 'value');</b> + </p> + + <ul> + <li><a href="#margins">Margins</a></li> + <li><a href="#labels and text">Labels and text</a></li> + <li><a href="#titles">Titles</a></li> + <li><a href="#scale">Scale</a></li> + <li><a href="#colors">Colors</a></li> + <li><a href="#needle">Needle</a></li> + <li><a href="#miscellaneous">Miscellaneous</a></li> + </ul> + + +<a name="margins"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Margins</h3> + + <a name="chart.gutter.left"></a> + <b>chart.gutter.left</b><br /> + The left gutter of the chart.<br /> + <i>Default: 5</i><br /><br /> + + <a name="chart.gutter.right"></a> + <b>chart.gutter.right</b><br /> + The right gutter of the chart.<br /> + <i>Default: 5</i><br /><br /> + + <a name="chart.gutter.top"></a> + <b>chart.gutter.top</b><br /> + The top gutter of the chart.<br /> + <i>Default: 5</i><br /><br /> + + <a name="chart.gutter.bottom"></a> + <b>chart.gutter.bottom</b><br /> + The bottom gutter of the chart.<br /> + <i>Default: 5</i><br /><br /> + + +<a name="labels and text"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Labels and text</h3> + + <a name="chart.text.font"></a> + <b>chart.text.font</b><br /> + The font that is used for the text.<br /> + <i>Default: Verdana</i><br /><br /> + + <a name="chart.text.color"></a> + <b>chart.text.color</b><br /> + The color of the text.<br /> + <i>Default: #666</i><br /><br /> + + <a name="chart.text.size"></a> + <b>chart.text.size</b><br /> + The size of the text<br /> + <i>Default: 10</i><br /><br /> + +<a name="titles"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Titles</h3> + + <a name="chart.title"></a> + <b>chart.title</b><br /> + The title of the chart, if any. <br /> + <i>Default: (An empty string)</i><br /><br /> + +<a name="chart.title.font"></a> +<b>chart.title.font</b><br /> +The font that the title is rendered in. If not specified the chart.text.font setting is used (usually Verdana)<br /> +<i>Default: Verdana</i><br /><br /> + +<a name="chart.title.size"></a> +<b>chart.title.size</b><br /> +The size of the title. If not specified the size is usually 2pt bigger than the chart.text.size setting.<br /> +<i>Default: 14</i><br /><br /> + +<a name="chart.title.bold"></a> +<b>chart.title.bold</b><br /> +Whather the title is bold or not.<br /> +<i>Default: true</i><br /><br /> + + <a name="chart.title.color"></a> + <b>chart.title.color</b><br /> + The color that the title is rendered in.<br /> + <i>Default: #333</i><br /><br /> + +<a name="scale"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Scale</h3> + + <a name="chart.scale.decimals"></a> + <b>chart.scale.decimals</b><br /> + The number of decimals used in the labels<br /> + <i>Default: 0</i><br /><br /> + + <a name="chart.units.pre"></a> + <b>chart.units.pre</b><br /> + The units that the Y axis is measured in. This string is displayed BEFORE the actual number, allowing you to specify values such as "$50".<br /> + <i>Default: '' (An empty string)</i><br /><br /> + + <a name="chart.units.post"></a> + <b>chart.units.post</b><br /> + The units that the Y axis is measured in. This string is displayed AFTER the actual number, allowing you to specify values such as "50ms".<br /> + <i>Default: '' (An empty string)</i><br /><br /> + +<a name="colors"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Colors</h3> + + + <a name="chart.red.start"></a> + <b>chart.red.start</b><br /> + The point at which the red area starts.<br /> + <i>Default: 90% of the max</i><br /><br /> + + <a name="chart.red.color"></a> + <b>chart.red.color</b><br /> + The red color.<br /> + <i>Default: #DC3912</i><br /><br /> + + <a name="chart.yellow.color"></a> + <b>chart.yellow.color</b><br /> + The yellow color.<br /> + <i>Default: #FF9900</i><br /><br /> + + <a name="chart.green.end"></a> + <b>chart.green.end</b><br /> + The point at which the green area ends.<br /> + <i>Default: 70% of the max</i><br /><br /> + + <a name="chart.green.color"></a> + <b>chart.green.color</b><br /> + The green color.<br /> + <i>Default: rgba(0,0,0,0)</i><br /><br /> + +<a name="needle"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Needle</h3> + + <a name="chart.needle.tail"></a> + <b>chart.needle.tail</b><br /> + Whether the tail for the needle is shown.<br /> + <i>Default: false</i><br /><br /> + +<a name="miscellaneous"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Miscellaneous</h3> + + <a name="chart.border.width"></a> + <b>chart.border.width</b><br /> + The width of the border that goes around the Gauge.<br /> + <i>Default: 10</i><br /><br /> + +</div> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/docs/gutters.html b/schall/static/RGraph/docs/gutters.html new file mode 100644 index 0000000..0fe1326 --- /dev/null +++ b/schall/static/RGraph/docs/gutters.html @@ -0,0 +1,229 @@ +<!DOCTYPE html > +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - Variable gutter sizes</title> + + <meta name="keywords" content="rgraph html5 canvas chart docs variable gutter sizes" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Variable gutter sizes" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.jpg"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js" ></script> + <script src="../libraries/RGraph.common.tooltips.js" ></script> + <script src="../libraries/RGraph.common.context.js" ></script> + <script src="../libraries/RGraph.common.zoom.js" ></script> + <script src="../libraries/RGraph.bar.js" ></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + + <script> + window.onload = function (e) + { + var bar = new RGraph.Bar('cvs', [0.2,0.2,0.5,0.6,0.5,0.3,0.5,0.1,0.2,0.7,4.2,3.5]); + bar.Set('chart.ymax', 5); + bar.Set('chart.labels', ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']); + bar.Set('chart.tooltips', ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']); + bar.Set('chart.text.angle', 45); + bar.Set('chart.contextmenu', [['Zoom in', RGraph.Zoom]]); + bar.Set('chart.zoom.hdir', 'left'); + bar.Set('chart.title', '2010 statistics (tooltips)'); + bar.Set('chart.ylabels.specific', ['100,000','10,000','1,000','100','10']); + bar.Set('chart.background.grid.autofit', true); + bar.Set('chart.background.grid.autofit.align', true); + bar.Set('chart.title.vpos', 0.5); + + bar.Set('chart.gutter.left', 65); + bar.Set('chart.gutter.right', 5); + bar.Set('chart.gutter.bottom', 60); + + bar.Draw(); + } + </script> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> + + <style> + ol li { + margin-top: 0; + } + </style> + +</head> +<body> + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + <div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="index.html">Documentation</a> + > + Variable gutter sizes + </div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - Variable gutter sizes</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + <ul> + <li> + <a href="#upgrading">Upgrading from a previous version of RGraph</a> + </li> + </ul> + + <canvas id="cvs" width="620" height="300" style="border: 1px dashed gray; float: right">[No canvas support]</canvas> + + <p> + New in June 2011 is the much requested feature of seperate gutter sizing. As the chart to the right shows, this means + that you can now easily set the left/right/top/bottom gutters independently. This makes it easy to give + yourself the space that you need for labels, which will be most noticeable with the Bar chart, the Line chart + and similar chart types. There is another example on the <a href="../examples/hbar.html#gutter-example">HBar example page</a>. + </p> + + <p> + Because of the fundamental nature of this change (every chart type has been affected) + you should rigorously test your charts if you choose to upgrade. + </p> + + <p> + The new properties are: + </p> + + <ul> + <li>chart.gutter.left</li> + <li>chart.gutter.right</li> + <li>chart.gutter.top</li> + <li>chart.gutter.bottom</li> + </ul> + + <p> + They all default to 25 pixels (with a few exceptions) and each can be set independently. + </p> + + <p> + These new properties eliminate the need for certain others. So starting immediately the following properties are no longer + used: + </p> + + <ul> + <li>chart.gutter</li> + <li>chart.width</li> + <li>chart.height</li> + <li>chart.tooltips.coords.adjust</li> + <li>chart.resize.handle.adjust</li> + </ul> + + <p> + The <i>chart.gutter</i> property has been completely removed, so you will need to start using the new properties immediately. + The <i>chart.width</i> and <i>chart.height</i> properties are completely unused from this point and the last two + will be phased out starting immediately. + </p> + + <br clear="all" /> + + <pre class="code"> +<script> + window.onload = function (e) + { + var bar = new RGraph.Bar('cvs', [0.2,0.2,0.5,0.6,0.5,0.3,0.5,0.1,0.2,0.7,4.2,3.5]); + bar.Set('chart.ymax', 5); + bar.Set('chart.labels', ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']); + bar.Set('chart.tooltips', ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']); + bar.Set('chart.text.angle', 45); + bar.Set('chart.contextmenu', [['Zoom in', RGraph.Zoom]]); + bar.Set('chart.zoom.hdir', 'left'); + bar.Set('chart.title', '2010 statistics (tooltips)'); + bar.Set('chart.ylabels.specific', ['100,000','10,000','1,000','100','10']); + bar.Set('chart.background.grid.autofit', true); + bar.Set('chart.background.grid.autofit.align', true); + bar.Set('chart.title.vpos', 0.5); + + <span style="color: green">bar.Set('chart.gutter.left', 65); + bar.Set('chart.gutter.right', 5); + bar.Set('chart.gutter.bottom', 60);</span> + + bar.Draw(); + } +</script> +</pre> + + <a name="upgrading"></a> + <h2>Upgrading from a previous version of RGraph</h2> + + <p> + If you're upgrading from a previous version of RGraph then there are a few points you should bear in mind: + </p> + + <ol> + <li> + Remove any calls to .translate(). + If you use the .translate() method to give yourself extra space, this should be converted to the new gutter properties. + </li> + + <li> + If you use <i>chart.tooltips.coords.adjust</i> or <i>chart.resize.handle.adjust</i> then you should remove them. These + properties will cease to have any effect eventually, but not immediately. + </li> + + <li> + If you use caching, then you may need to use a CTRL/SHIFT+Refresh on your page to bypass any cached copy of the RGraph + libraries. + </li> + </ol> +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/docs/hbar.html b/schall/static/RGraph/docs/hbar.html new file mode 100644 index 0000000..cc7904b --- /dev/null +++ b/schall/static/RGraph/docs/hbar.html @@ -0,0 +1,689 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - horizontal bar charts documentation</title> + + <meta name="keywords" content="rgraph javascript charts docs hbar horizontal bar" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Documentation about the Horizontal Bar (HBar) charts" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.jpg"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> + +</head> +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + <div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="index.html">Documentation</a> + > + Horizontal bar charts + </div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - Horizontal bar charts documentation</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + <p> + Horizontal bar charts are a variation on Bar charts, which can be useful when you have larger labels, since you have + more space available to you for them. + </p> + + <p> + The example file is <a href="../examples/hbar.html">here</a>. + </p> + + <pre class="code"> +<script> + window.onload = function () + { + var data = [280,45,133,166,84,259,266,960,219,311]; + + var hbar = new RGraph.HBar('myCanvas', data); + hbar.Set('chart.labels', ['Richard', 'Alex', 'Nick', 'Scott', 'Kjnell', 'Doug', 'Charles', 'Michelle', 'Mark', 'Alison']); + hbar.Set('chart.gutter.left', 45); + hbar.Set('chart.background.barcolor1', 'rgba(255,255,255,1)'); + hbar.Set('chart.background.barcolor2', 'rgba(255,255,255,1)'); + hbar.Set('chart.background.grid', true); + hbar.Set('chart.colors', ['rgba(255,0,0,1)']); + hbar.Draw(); + } +</script> +</pre> + + <ul> + <li><a href="#available.properties">Properties</a></li> + <li><a href="#available.methods">Methods</a></li> + </ul> + + <a name="available.properties"></a> + <h2>Properties</h2> + + <p> + You can use these properties to control how the bar chart apears. You can set them by using the Set() method. Eg: + </p> + + <p> + <b>myHBar.Set('name', 'value');</b> + </p> + + <ul> + <li><a href="#chart">Chart configuration</a></li> + <li><a href="#margins">Margins</a></li> + <li><a href="#colors">Colors</a></li> + <li><a href="#background">Background</a></li> + <li><a href="#labels and text">Labels and text</a></li> + <li><a href="#titles">Titles</a></li> + <li><a href="#scale and axes">Scale and axes</a></li> + <li><a href="#miscellaneous">Miscellaneous</a></li> + <li><a href="#shadow">Shadow</a></li> + <li><a href="#key">Key</a></li> + <li><a href="#interactive features">Interactive features</a></li> + <li><a href="#zoom">Zoom</a></li> + </ul> + + +<a name="margins"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Margins</h3> + + + + <a name="chart.gutter.left"></a> + <b>chart.gutter.left</b><br /> + The left gutter of the chart, (the gutter is where the labels and title are)).<br /> + <i>Default: 75</i><br /><br /> + + <a name="chart.gutter.right"></a> + <b>chart.gutter.right</b><br /> + The right gutter of the chart, (the gutter is where the labels and title are).<br /> + <i>Default: 25</i><br /><br /> + + <a name="chart.gutter.top"></a> + <b>chart.gutter.top</b><br /> + The top gutter of the chart, (the gutter is where the labels and title are).<br /> + <i>Default: 25</i><br /><br /> + + <a name="chart.gutter.bottom"></a> + <b>chart.gutter.bottom</b><br /> + The bottom gutter of the chart, (the gutter is where the labels and title are).<br /> + <i>Default: 25</i><br /><br /> + +<a name="colors"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Colors</h3> + + <a name="chart.colors"></a> + <b>chart.colors</b><br /> + An array of the colors of the actual bars. <br /> + <i>Default: An array - ['rgb(0,0,255)', '#0f0', '#00f', '#ff0', '#0ff', '#0f0']</i><br /><br /> + + <a name="chart.colors.sequential"></a> + <b>chart.colors.sequential</b><br /> + If true, for regular bar charts, the colors that you specify will be used in a sequential fashion.<br /> + <i>Default: false</i><br /><br /> + +<a name="background"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Background</h3> <a name="chart.background.barcolor1"></a> +<b>chart.background.barcolor1</b><br /> + The color of the background bars, (1 of 2). <br /><i>Default: white</i><br /><br /> + <a name="chart.background.barcolor2"></a> +<b>chart.background.barcolor2</b><br /> + The color of the background bars, (2 of 2). <br /><i>Default: white</i><br /><br /> + <a name="chart.background.grid"></a> +<b>chart.background.grid</b><br /> + Whether to show the background grid or not. <br /><i>Default: true</i><br /><br /> + <a name="chart.background.grid.color"></a> +<b>chart.background.grid.color</b><br /> + The color of the background grid. <br /><i>Default: #ddd</i><br /><br /> + <a name="chart.background.grid.hsize"></a> +<b>chart.background.grid.hsize</b><br /> + The horizontal background grid size. <br /><i>Default: 40</i><br /><br /> + <a name="chart.background.grid.vsize"></a> +<b>chart.background.grid.vsize</b><br /> + The vertical background grid size. <br /><i>Default: 18</i><br /><br /> + <a name="chart.background.grid.width"></a> +<b>chart.background.grid.width</b><br /> + The width that the background grid lines are. Decimals (eg 0.5) are permitted.<br /><i>Default: 0.5</i><br /><br /> + <a name="chart.background.grid.border"></a> +<b>chart.background.grid.border</b><br /> + Determines whether a border line is drawn around the grid.<br /><i>Default: true</i><br /><br /> + <a name="chart.background.grid.hlines"></a> +<b>chart.background.grid.hlines</b><br /> + Determines whether to draw the horizontal grid lines.<br /><i>Default: true</i><br /><br /> + <a name="chart.background.grid.vlines"></a> +<b>chart.background.grid.vlines</b><br /> + Determines whether to draw the vertical grid lines.<br /><i>Default: true</i><br /><br /> + + <a name="chart.background.grid.autofit"></a> + <b>chart.background.grid.autofit</b><br /> + Instead of specifying a pixel width/height for the background grid, you can use autofit and specify how many horizontal and vertical lines you want.<br /> + <i>Default: true</i><br /><br /> + + <a name="chart.background.grid.autofit.numhlines"></a> + <b>chart.background.grid.autofit.numhlines</b><br /> + When using autofit this allows you to specify how many horizontal grid lines you want. <br /> + <i>Default: 14</i><br /><br /> + + <a name="chart.background.grid.autofit.numvlines"></a> + <b>chart.background.grid.autofit.numvlines</b><br /> + When using autofit this allows you to specify how many vertical grid lines you want. <br /> + <i>Default: 20</i><br /><br /> + + <a name="labels and text"></a> + <h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Labels and text</h3> + + <a name="chart.xlabels"></a> + <b>chart.xlabels</b><br /> + A boolean controlling whether the X labels are shown.<br /> + <i>Default: true</i><br /><br /> + + <a name="chart.labels"></a> + <b>chart.labels</b><br /> + An array of the labels to be used on the chart. <br /> + <i>Default: An empty array</i><br /><br /> + + <a name="chart.labels.above"></a> + <b>chart.labels.above</b><br /> + This is a boolean which if true, will cause labels to be shown to the right of the bars. (It's called "above" + for API compatibility).<br /> + <i>Default: false</i><br /><br /> + + <a name="chart.labels.above.decimals"></a> + <b>chart.labels.above.decimals</b><br /> + This is a number which controls how many decimals are shown. It defaults to 0, and since it was added (4th December 2010) + you may need to set this, otherwise no decimals will be shown.<br /> + <i>Default: 0</i><br /><br /> + + <a name="chart.text.font"></a> + <b>chart.text.font</b><br /> + The font used to render the text.<br /> + <i>Default: Verdana</i><br /><br /> + + <a name="chart.text.color"></a> + <b>chart.text.color</b><br /> + The color of the labels. <br /> + <i>Default: black</i><br /><br /> + + <a name="chart.text.size"></a> + <b>chart.text.size</b><br /> + The size (in points) of the labels. <br /> + <i>Default: 10</i><br /><br /> + + + <a name="titles"></a> + <h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Titles</h3> + + <a name="chart.title"></a> + <b>chart.title</b><br /> + The title of the chart, if any. <br /> + <i>Default: null</i><br /><br /> + + + +<a name="chart.title.font"></a> +<b>chart.title.font</b><br /> +The font that the title is rendered in. If not specified the chart.text.font setting is used (usually Verdana)<br /> +<i>Default: null</i><br /><br /> + +<a name="chart.title.size"></a> +<b>chart.title.size</b><br /> +The size of the title. If not specified the size is usually 2pt bigger than the chart.text.size setting.<br /> +<i>Default: null</i><br /><br /> + +<a name="chart.title.bold"></a> +<b>chart.title.bold</b><br /> +Whather the title is bold or not.<br /> +<i>Default: true</i><br /><br /> + +<a name="chart.title.background"></a> +<b>chart.title.background</b><br /> +The background color (if any) for the title.<br /> +<i>Default: null</i><br /><br /> + + <a name="chart.title.hpos"></a> +<b>chart.title.hpos</b><br /> + This allows you to completely override the horizontal positioning of the title. It should be a number between 0 and 1, and is multiplied with the whole width of the canvas and then used as the horizontal position. <br /><i>Default: null</i><br /><br /> + <a name="chart.title.vpos"></a> +<b>chart.title.vpos</b><br /> + This allows you to completely override the vertical positioning of the title. It should be a number between 0 and 1, and is multiplied with the gutter and then used as the vertical position. It can be useful if you need to have a large gutter.<br /><i>Default: null</i><br /><br /> + <a name="chart.title.xaxis"></a> + <b>chart.title.xaxis</b><br /> + This allows to specify a title for the X axis.<br /> + <i>Default: none</i><br /><br /> + + + <a name="chart.title.xaxis.size"></a> + <b>chart.title.xaxis.size</b><br /> + This allows you to specify a size for the X axis title.<br /> + <i>Default: null</i><br /><br /> + + <a name="chart.title.xaxis.font"></a> + <b>chart.title.xaxis.font</b><br /> + This allows to specify a font for the X axis title.<br /> + <i>Default: null</i><br /><br /> + + <a name="chart.title.xaxis.bold"></a> + <b>chart.title.xaxis.bold</b><br /> + This controls whether the X axis title is bold or not.<br /> + <i>Default: true</i><br /><br /> + + <a name="chart.title.yaxis"></a> + <b>chart.title.yaxis</b><br /> + This allows to specify a title for the Y axis.<br /> + <i>Default: none</i><br /><br /> + + <a name="chart.title.yaxis.size"></a> + <b>chart.title.yaxis.size</b><br /> + This allows you to specify a size for the Y axis title.<br /> + <i>Default: null</i><br /><br /> + + <a name="chart.title.yaxis.font"></a> + <b>chart.title.yaxis.font</b><br /> + This allows to specify a font for the Y axis title.<br /> + <i>Default: null</i><br /><br /> + + <a name="chart.title.yaxis.bold"></a> + <b>chart.title.yaxis.bold</b><br /> + This controls whether the Y axis title is bold or not.<br /> + <i>Default: true</i><br /><br /> + + <a name="chart.title.xaxis.pos"></a> +<b>chart.title.xaxis.pos</b><br /> + This is multiplied with the gutter to give the position of the X axis title.<br /><i>Default: 0.25</i><br /><br /> + <a name="chart.title.yaxis.pos"></a> +<b>chart.title.yaxis.pos</b><br /> + This is multiplied with the gutter to give the position of the Y axis title.<br /><i>Default: 0.5</i><br /><br /> + <a name="chart.title.color"></a> +<b>chart.title.color</b><br /> + The color of the title.<br /> <i>Default: black</i><br /><br /> +<a name="scale and axes"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Scale and axes</h3> <a name="chart.scale.point"></a> +<b>chart.scale.point</b><br /> + The character used as the decimal point.<br /><i>Default: .</i><br /><br /> + <a name="chart.scale.thousand"></a> +<b>chart.scale.thousand</b><br /> + The character used as the thousand separator<br /><i>Default: ,</i><br /><br /> + + <a name="chart.scale.round"></a> + <b>chart.scale.round</b><br /> + Whether to round the maximum scale value up or not. This will produce slightly better scales in some instances.<br /> + <i>Default: null</i><br /><br /> + + <a name="chart.xmax"></a> + <b>chart.xmax</b><br /> + (Optional) An optional max figure for the X scale.<br /> + <i>Default: none (one is calculated)</i><br /><br /> + + <a name="chart.xmin"></a> + <b>chart.xmin</b><br /> + An optional minimum figure for the X scale.<br /> + <i>Default: 0</i><br /><br /> + + <a name="chart.yaxispos"></a> +<b>chart.yaxispos</b><br /> + The position of the Y axis. Works with regular and grouped charts. Can be either <i>center</i> or <i>left</i>.<br /> <i>Default: left</i><br /><br /> + <a name="chart.axis.color"></a> +<b>chart.axis.color</b><br /> + The color of the axes.<br /> <i>Default: black</i><br /><br /> + <a name="chart.units.pre"></a> +<b>chart.units.pre</b><br /> + The units that the X axis is measured in. This string is displayed BEFORE the actual number, allowing you to specify values such as "$50".<br /><i>Default: none</i><br /><br /> + <a name="chart.units.post"></a> +<b>chart.units.post</b><br /> + The units that the X axis is measured in. This string is displayed AFTER the actual number, allowing you to specify values such as "50ms".<br /><i>Default: none</i><br /><br /> + <a name="chart.units.ingraph"></a> +<b>chart.units.ingraph</b><br /> + If your units are long, setting this stipulates them to be used for ingraph labels only.<br /><i>Default: false</i><br /><br /> + + + + + + + + +<a name="miscellaneous"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Miscellaneous</h3> + + <a name="chart.grouping"></a> + <b>chart.grouping</b><br /> + How the bars are grouped, and it should be one of: <b>grouped</b> or <b>stacked</b><br /> + <i>Default: grouped</i><br /><br /> + + <a name="chart.vmargin"></a> + <b>chart.vmargin</b><br /> + The vertical margin that is applied to each individual bar.<br /> + <i>Default: 3</i><br /><br /> + + <a name="chart.strokestyle"></a> + <b>chart.strokestyle</b><br /> + The color of the outlines of the bars.<br /> + <i>Default: black</i><br /><br /> + + <a name="chart.highlight.stroke"></a> + <b>chart.highlight.stroke</b><br /> + If you use tooltips, this controls the colour of the highlight stroke. + <br /><i>Default: black</i><br /><br /> + + <a name="chart.highlight.fill"></a> + <b>chart.highlight.fill</b><br /> + If you use tooltips, this controls the colour of the highlight fill. + <br /><i>Default: rgba(255,255,255,0.5)</i><br /><br /> + + + + + +<a name="shadow"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Shadow</h3> <a name="chart.shadow"></a> +<b>chart.shadow</b><br /> + Whether a small drop shadow is applied. <br /><i>Default: false</i><br /><br /> + <a name="chart.shadow.color"></a> +<b>chart.shadow.color</b><br /> + The color of the shadow. <br /><i>Default: #666</i><br /><br /> + <a name="chart.shadow.offsetx"></a> +<b>chart.shadow.offsetx</b><br /> + The X offset of the shadow. <br /><i>Default: 3</i><br /><br /> + <a name="chart.shadow.offsety"></a> +<b>chart.shadow.offsety</b><br /> + The Y offset of the shadow. <br /><i>Default: 3</i><br /><br /> + <a name="chart.shadow.blur"></a> +<b>chart.shadow.blur</b><br /> + The severity of the shadow blurring effect. <br /><i>Default: 3</i><br /><br /> + + + + <a name="key"></a> + <h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Key</h3> + + <a name="chart.key"></a> + <b>chart.key</b><br /> + An array of key information. <br /> + <i>Default: [] (An empty array)</i><br /><br /> + + <a name="chart.key.background"></a> + <b>chart.key.background</b><br /> + The color of the key background. Typically white, you could set this to something like rgba(255,255,255,0.7) to allow people to see things behind it.<br> + <i>Default: white</i><br /><br /> + + <a name="chart.key.halign"></a> + <b>chart.key.halign</b><br /> + Instead of specifying the exact x/y coordinates, you can use this property to simply specify whether the key hould be + aligned <i>left</i> or <i>right</i>.<br /> + <i>Default: right</i><br /><br /> + + <a name="chart.key.position"></a> + <b>chart.key.position</b><br /> + Determines the position of the key.Either <b>graph</b> (default), or <b>gutter</b>.<br /> + <i>Default: graph</i><br /><br /> + + <b>chart.key.position.x</b><br /> + This allows you to specify a specific X coordinate for the key.<br /> + <i>Default: null</i><br /><br /> + + <b>chart.key.position.y</b><br /> + This allows you to specify a specific Y coordinate for the key.<br /> + <i>Default: null</i><br /><br /> + + <b>chart.key.position.gutter.boxed</b><br /> + If you have the key in gutter mode (ie horizontal), this allows you to give a background color.<br /> + <i>Default: true</i><br /><br /> + + <a name="chart.key.shadow"></a> + <b>chart.key.shadow</b><br /> + Whether a small drop shadow is applied to the key.<br /> + <i>Default: false</i><br /><br /> + + <a name="chart.key.shadow.color"></a> + <b>chart.key.shadow.color</b><br /> + The color of the shadow.<br /> + <i>Default: #666</i><br /><br /> + + <a name="chart.key.shadow.blur"></a> + <b>chart.key.shadow.blur</b><br /> + The extent of the blurring effect used on the shadow.<br /> + <i>Default: 3</i><br /><br /> + + <a name="chart.key.shadow.offsetx"></a> + <b>chart.key.shadow.offsetx</b><br /> + The X offset of the shadow.<br /> + <i>Default: 2</i><br /><br /> + + <a name="chart.key.shadow.offsety"></a> + <b>chart.key.shadow.offsety</b><br /> + The Y offset of the shadow.<br /> + <i>Default: 2</i><br /><br /> + + <b>chart.key.rounded</b><br /> + This controls whether the corners of the key (in graph mode) are curved. If the key is gutter mode, this has no effect.<br /> + <i>Default: false</i><br /><br /> + + <b>chart.key.color.shape</b><br /> + This can be <i>square</i>, <i>circle</i> or <i>line</i> and controls how the color indicators in the key appear.<br /> + <i>Default: square</i><br /><br /> + + <b>chart.key.linewidth</b><br /> + The line width of the surrounding border on the key.<br /> + <i>Default: 1</i><br /><br /> + + +<a name="interactive features"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Interactive features</h3> + +<a name="chart.contextmenu"></a> + <b>chart.contextmenu</b><br /> + An array of context menu items. You cannot have context menus AND tooltips, only one or the other. More information on context menus is <a href="context.html">here</a>.<br /> + <i>Default: [] (An empty array)</i><br /><br /> + + <a name="chart.tooltips"></a> + <b>chart.tooltips</b><br /> + An array of tooltips for the chart.<br /> + <i>Default: An empty array</i><br /><br /> + + <a name="chart.tooltips.event"></a> + <b>chart.tooltips.event</b><br /> + This is the event that triggers the tooltips. It can be <i>onclick</i> or <i>onmousemove</i>.<br /> + <i>Default: onclick</i><br /><br /> + + <a name="chart.tooltips.effect"></a> + <b>chart.tooltips.effect</b><br /> + The visual effect used when showing tooltips. Can be either <i>fade</i> or <i>expand</i>.<br /> + <i>Default: fade</i><br /><br /> + + <a name="chart.tooltips.css.class"></a> +<b>chart.tooltips.css.class</b><br /> + This is the name of the CSS class the chart uses.<br /><i>Default: RGraph_tooltip</i><br /><br /> + <a name="chart.tooltips.override"></a> +<b>chart.tooltips.override</b><br /> + If you wish to handle showing tooltips yourself, this should be a function object which does just that. There's more information on the <a href="tooltips.html">tooltips documentation page</a><br /><i>Default: null</i><br /><br /> + <a name="chart.annotatable"></a> +<b>chart.annotatable</b><br /> + Whether annotations are enabled for the chart (ie you can draw on the chart interactively.<br /><i>Default: false</i><br /><br /> + <a name="chart.annotate.color"></a> +<b>chart.annotate.color</b><br /> + If you do not allow the use of the palette, then this will be the only colour allowed for annotations.<br /><i>Default: black</i><br /><br /> + + + <a name="chart.resizable"></a> + <b>chart.resizable</b><br /> + Defaulting to false, this determines whether your chart will be resizable. Because of the numerous event handlers this has to install code on, This feature is unlikely to work with other dynamic features (the context menu is fine however).<br /> + <i>Default: false</i><br /><br /> + + + <a name="chart.resize.handle.background"></a> + <b>chart.resize.handle.background</b><br /> + With this you can specify the background color for the resize handle. If you're adjusting the position of the + handle then you may need this to make the handle stand out more.<br /> + <i>Default: null</i><br /><br /> + + + +<a name="zoom"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Zoom</h3> <a name="chart.zoom.mode"></a> +<b>chart.zoom.mode</b><br /> + Can be used to control whether the zoom is in thumbnail or canvas mode. Possible values are: <i>thumbnail</i> and <i>canvas</i>.<br /><i>Default: canvas</i><br /><br /> + <a name="chart.zoom.factor"></a> +<b>chart.zoom.factor</b><br /> + This is the factor that the chart will be zoomed by (bigger values means more zoom)<br /><i>Default: 1.5</i><br /><br /> + <a name="chart.zoom.fade.in"></a> +<b>chart.zoom.fade.in</b><br /> + Whether the zoomed canvas fades in or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /><i>Default: true</i><br /><br /> + <a name="chart.zoom.fade.out"></a> +<b>chart.zoom.fade.out</b><br /> + Whether the zoomed canvas fades out or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /><i>Default: true</i><br /><br /> + <a name="chart.zoom.hdir"></a> +<b>chart.zoom.hdir</b><br /> + The horizontal direction of the zoom. Possible values are: <i>left</i>, <i>center</i>, <i>right</i><br /><i>Default: right</i><br /><br /> + <a name="chart.zoom.vdir"></a> +<b>chart.zoom.vdir</b><br /> + The vertical direction of the zoom. Possible values are: <i>up</i>, <i>center</i>, <i>down</i><br /><i>Default: down</i><br /><br /> + <a name="chart.zoom.delay"></a> +<b>chart.zoom.delay</b><br /> + The delay (in milliseconds) between frames.<br /><i>Default: 50</i><br /><br /> + <a name="chart.zoom.frames"></a> +<b>chart.zoom.frames</b><br /> + The number of frames in the zoom animation.<br /><i>Default: 10</i><br /><br /> + <a name="chart.zoom.shadow"></a> +<b>chart.zoom.shadow</b><br /> + Whether or not the zoomed canvas has a shadow or not.<br /><i>Default: true</i><br /><br /> + <a name="chart.zoom.thumbnail.width"></a> +<b>chart.zoom.thumbnail.width</b><br /> + When the zoom is in thumbnail mode, this is the width (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br /> + <a name="chart.zoom.thumbnail.height"></a> +<b>chart.zoom.thumbnail.height</b><br /> + When the zoom is in thumbnail mode, this is the height (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br /> + <a name="chart.zoom.background"></a> +<b>chart.zoom.background</b><br /> + Defaulting to true, this determines whether the zoom has a dark, semi-opaque background that covers the entire web page.<br /><i>Default: true</i><br /><br /> +</div><!-- /DOCS --><br /><br /> + + + + + + + + + + + + + <a name="available.methods"></a> + <br /> <br /> + <h2>Methods</h2> + + <a name="getbar"></a> + <b>obj.getBar()</b><br /><br /> + This method makes it easier to get hold of which bar has been clicked on, or hovered over. It returns an array of: + <ul> + <li>The X coordinate</li> + <li>The Y coordinate</li> + <li>The width of the bar</li> + <li>The height of the bar</li> + <li>The numerical index of the bar. This corresponds (for example) to the tooltips array, and the coordinates array</li> + </ul> + + An example usage is: + + <pre class="code"> +<canvas id="cvs" width="600" height="250">[No canvas support]</canvas> + +<script src="RGraph.common.core.js"></script> +<script src="RGraph.hbar.js"></script> + +<script> + myGraph = new RGraph.HBar('myCanvas', [1.2, 1.3, 1.4, 1.5,6,1.9,2,2.1,2.5]); + myGraph.Set('chart.labels', ['John', 'Barry', 'Rich', 'Craig', 'Tom', 'Frank', 'Helen', 'Joyce', 'Fred']) + myGraph.Draw(); + + RGraph.Register(myGraph); + + myGraph.canvas.onclick = function (e) + { + RGraph.Redraw(); + + var canvas = e.target; + var context = canvas.getContext('2d'); + var obj = canvas.__object__; + <span style="color: green">var bar = obj.getBar(e);</span> + + if (bar) { + + var top = bar[0]; + var left = bar[1]; + var width = bar[2]; + var height = bar[3]; + var idx = bar[4]; + + context.beginPath(); + context.strokeStyle = 'black'; + context.fillStyle = 'rgba(255,255,255,0.5)'; + context.strokeRect(top, left, width, height); + context.fillRect(top, left, width, height); + context.stroke(); + context.fill(); + } + } +</script> +</pre> +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/docs/hprogress.html b/schall/static/RGraph/docs/hprogress.html new file mode 100644 index 0000000..3437dca --- /dev/null +++ b/schall/static/RGraph/docs/hprogress.html @@ -0,0 +1,427 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for personal, | + * | charity and educational purposes it is free to use. You can read the full | + * | license here: | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - horizontal progress bar documentation</title> + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.jpg"/> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> + +</head> +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + <div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="index.html">Documentation</a> + > + Horizontal Progress bar + </div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - Horizontal Progress bar documentation</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + <p> + The example file is <a href="../examples/hprogress.html">here</a>. + </p> + + <pre class="code"> +<script> + window.onload = function () + { + var myProgress = new RGraph.HProgress('myProgress', 78, 100); + myProgress.Set('chart.colors', ['red']); + myProgress.Draw(); + } +</script> +</pre> + + <h2>Properties</h2> + + <p> + You can use these properties to control how the progress bar apears. You can set them by using the Set() method. Eg: + </p> + + <p> + <b>myProgress.Set('name', 'value');</b> + </p> + + <ul> + <li><a href="#chart configuration">Chart configuration</a></li> + <li><a href="#margins">Margins</a></li> + <li><a href="#colors">Colors</a></li> + <li><a href="#shadow">Shadow</a></li> + <li><a href="#labels and text">Labels and text</a></li> + <li><a href="#scale">Scale</a></li> + <li><a href="#titles">Titles</a></li> + <li><a href="#interactive features">Interactive features</a></li> + <li><a href="#zoom">Zoom</a></li> + <li><a href="#key">Key</a></li> + </ul> + + + <a name="chart configuration"></a> + <h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Chart configuration</h3> + + + <a name="chart.tickmarks"></a> + <b>chart.tickmarks</b><br /> + Whether the tickmarks are drawn. <br /> + <i>Default: true</i><br /><br /> + + <a name="chart.tickmarks.color"></a> +<b>chart.tickmarks.color</b><br /> + The color used for tickmarks.<br /><i>Default: black</i><br /><br /> + <a name="chart.tickmarks.inner"></a> +<b>chart.tickmarks.inner</b><br /> + This controls whether the bar has inner tickmarks<br /><i>Default: false</i><br /><br /> +<!-- + <a name="chart.value"></a> + <b>chart.value</b><br /> + The indicated value. You don't need to set this because it's one of the arguments to the constructor.<br /><br /> + + <a name="chart.max"></a> + <b>chart.max</b><br /> + The maximum value. You don't need to set this because it's one of the arguments to the constructor.<br /><br /> +--> + <a name="chart.numticks"></a> +<b>chart.numticks</b><br /> + How many tick marks there are. <br /><i>Default: 10</i><br /><br /> + <a name="chart.numticks.inner"></a> +<b>chart.numticks.inner</b><br /> + How many inner tick marks there are. <br /><i>Default: 50</i><br /><br /> + <a name="chart.arrows"></a> +<b>chart.arrows</b><br /> + This stipulates that two indicator arrows are drawn. It works best if you have tickmarks off, and no title.<br><i>Default: false</i><br /><br /> +<a name="margins"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Margins</h3> + + + + <a name="chart.gutter.left"></a> + <b>chart.gutter.left</b><br /> + The left gutter of the chart, (the gutter is where the labels and title are)).<br /> + <i>Default: 25</i><br /><br /> + + <a name="chart.gutter.right"></a> + <b>chart.gutter.right</b><br /> + The right gutter of the chart, (the gutter is where the labels and title are).<br /> + <i>Default: 25</i><br /><br /> + + <a name="chart.gutter.top"></a> + <b>chart.gutter.top</b><br /> + The top gutter of the chart, (the gutter is where the labels and title are).<br /> + <i>Default: 25</i><br /><br /> + + <a name="chart.gutter.bottom"></a> + <b>chart.gutter.bottom</b><br /> + The bottom gutter of the chart, (the gutter is where the labels and title are).<br /> + <i>Default: 25</i><br /><br /> + +<a name="colors"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Colors</h3> <a name="chart.colors"></a> +<b>chart.colors</b><br /> + The colors of the bar(s). This can be a solid color, or a gradient that you create. <br /><i>Default: [#0c0]</i><br /><br /> + <a name="chart.background.color"></a> +<b>chart.background.color</b><br /> + The background color. <br /><i>Default: #eee</i><br /><br /> +<a name="shadow"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Shadow</h3> <a name="chart.shadow"></a> +<b>chart.shadow</b><br /> + Whether the progress bar has a shadow. This uses the canvas shadow API and therefore is only supported on Chrome 2, Safari 3.1 and Firefox 3.1 (and above).<br /><i>Default: false</i><br /><br /> + <a name="chart.shadow.offsetx"></a> +<b>chart.shadow.offsetx</b><br /> + The X offset of the progress bar shadow.<br /><i>Default: 3</i><br /><br /> + <a name="chart.shadow.offsety"></a> +<b>chart.shadow.offsety</b><br /> + The Y offset of the progress bar shadow.<br /><i>Default: 3</i><br /><br /> + <a name="chart.shadow.color"></a> +<b>chart.shadow.color</b><br /> + The color of the shadow.<br /><i>Default: rgba(0,0,0,0.5)</i><br /><br /> + <a name="chart.shadow.blur"></a> +<b>chart.shadow.blur</b><br /> + The blurring effect that is applied to the shadow.<br /><i>Default: 3</i><br /><br /> +<a name="labels and text"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Labels and text</h3> <a name="chart.text.font"></a> +<b>chart.text.font</b><br /> + The font used to render the text.<br /><i>Default: Verdana</i><br /><br /> + <a name="chart.text.color"></a> +<b>chart.text.color</b><br /> + The color of the labels. <br /><i>Default: black</i><br /><br /> + <a name="chart.text.size"></a> +<b>chart.text.size</b><br /> + The size of the text (in points). <br /><i>Default: 10</i><br /><br /> + <a name="chart.labels"></a> + <b>chart.labels</b><br /> + Labels that are applied to the chart. <br /> + <i>Default: An empty array</i><br /><br /> + + <a name="chart.labels.position"></a> + <b>chart.labels.position</b><br /> + This determines whether the labels are placed on the top or the bottom of the progress bar.<br /> + <i>Default: bottom</i><br /><br /> + +<a name="scale"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Scale</h3> <a name="chart.units.pre"></a> +<b>chart.units.pre</b><br /> + The units that the Y scale is measured in (these are preppend to the number). <br /><i>Default: none</i><br /><br /> + <a name="chart.units.post"></a> +<b>chart.units.post</b><br /> + The units that the Y scale is measured in (these are appended to the number). <br /><i>Default: none</i><br /><br /> +<a name="titles"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Titles</h3> + +<a name="chart.title"></a> +<b>chart.title</b><br /> + The title of the progress bar. <br /><i>Default: An empty string</i><br /><br /> + + + +<a name="chart.title.font"></a> +<b>chart.title.font</b><br /> +The font that the title is rendered in. If not specified the chart.text.font setting is used (usually Verdana)<br /> +<i>Default: null</i><br /><br /> + +<a name="chart.title.size"></a> +<b>chart.title.size</b><br /> +The size of the title. If not specified the size is usually 2pt bigger than the chart.text.size setting.<br /> +<i>Default: null</i><br /><br /> + +<a name="chart.title.bold"></a> +<b>chart.title.bold</b><br /> +Whather the title is bold or not.<br /> +<i>Default: true</i><br /><br /> + +<a name="chart.title.background"></a> +<b>chart.title.background</b><br /> +The background color (if any) for the title.<br /> +<i>Default: null</i><br /><br /> + + <a name="chart.title.hpos"></a> +<b>chart.title.hpos</b><br /> + This allows you to completely override the horizontal positioning of the title. It should be a number between 0 and 1, and is multiplied with the whole width of the canvas and then used as the horizontal position. <br /><i>Default: null</i><br /><br /> + <a name="chart.title.vpos"></a> +<b>chart.title.vpos</b><br /> + This allows you to completely override the vertical positioning of the title. It should be a number between 0 and 1, and is multiplied with the gutter and then used as the vertical position. It can be useful if you need to have a large gutter.<br /><i>Default: null</i><br /><br /> + <a name="chart.title.color"></a> +<b>chart.title.color</b><br /> + The color of the title.<br /> <i>Default: black</i><br /><br /> +<a name="interactive features"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Interactive features</h3> <a name="chart.tooltips"></a> +<b>chart.tooltips</b><br /> + An array, albeit one element only. This is shown when the progress bar is clicked on. This can contain HTML.<br /><i>Default: An empty array</i><br /><br /> + <a name="chart.tooltips.effect"></a> +<b>chart.tooltips.effect</b><br /> + The animated effect used for showing the tooltip. Can be either <i>fade</i> or <i>expand</i>.<br /><i>Default: fade</i><br /><br /> + <a name="chart.tooltips.css.class"></a> +<b>chart.tooltips.css.class</b><br /> + This is the name of the CSS class the tooltips use.<br /><i>Default: RGraph_tooltip</i><br /><br /> + <a name="chart.tooltips.override"></a> +<b>chart.tooltips.override</b><br /> + If you wish to handle showing tooltips yourself, this should be a function object which does just that. There's more information on the <a href="tooltips.html">tooltips documentation page</a><br /><i>Default: null</i><br /><br /> + <a name="chart.contextmenu"></a> +<b>chart.contextmenu</b><br /> + An array of context menu items. More information on context menus is <a href="context.html">here</a>.<br /><i>Default: [] (An empty array)</i><br /><br /> + <a name="chart.annotatable"></a> +<b>chart.annotatable</b><br /> + Whether annotations are enabled for the chart (ie you can draw on the chart interactively.<br /><i>Default: false</i><br /><br /> + <a name="chart.annotate.color"></a> +<b>chart.annotate.color</b><br /> + If you do not allow the use of the palette, then this will be the only colour allowed for annotations.<br /><i>Default: black</i><br /><br /> + + + <a name="chart.resizable"></a> + <b>chart.resizable</b><br /> + Defaulting to false, this determines whether your chart will be resizable. Because of the numerous event handlers this has to install code on, This feature is unlikely to work with other dynamic features (the context menu is fine however).<br /> + <i>Default: false</i><br /><br /> + + + <a name="chart.resize.handle.background"></a> + <b>chart.resize.handle.background</b><br /> + With this you can specify the background color for the resize handle. If you're adjusting the position of the + handle then you may need this to make the handle stand out more.<br /> + <i>Default: null</i><br /><br /> + + + + <a name="chart.adjustable"></a> +<b>chart.adjustable</b><br /> + Defaulting to false, this determines whether your progress bar will be adjustable (click the bar and drag it). <br /><i>Default: false</i><br /><br /> +<a name="zoom"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Zoom</h3> <a name="chart.zoom.factor"></a> +<b>chart.zoom.factor</b><br /> + This is the factor that the chart will be zoomed by (bigger values means more zoom)<br /><i>Default: 1.5</i><br /><br /> + <a name="chart.zoom.fade.in"></a> +<b>chart.zoom.fade.in</b><br /> + Whether the zoomed canvas fades in or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /><i>Default: true</i><br /><br /> + <a name="chart.zoom.fade.out"></a> +<b>chart.zoom.fade.out</b><br /> + Whether the zoomed canvas fades out or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /><i>Default: true</i><br /><br /> + <a name="chart.zoom.hdir"></a> +<b>chart.zoom.hdir</b><br /> + The horizontal direction of the zoom. Possible values are: <i>left</i>, <i>center</i>, <i>right</i><br /><i>Default: right</i><br /><br /> + <a name="chart.zoom.vdir"></a> +<b>chart.zoom.vdir</b><br /> + The vertical direction of the zoom. Possible values are: <i>up</i>, <i>center</i>, <i>down</i><br /><i>Default: down</i><br /><br /> + <a name="chart.zoom.delay"></a> +<b>chart.zoom.delay</b><br /> + The delay (in milliseconds) between frames.<br /><i>Default: 50</i><br /><br /> + <a name="chart.zoom.frames"></a> +<b>chart.zoom.frames</b><br /> + The number of frames in the zoom animation.<br /><i>Default: 10</i><br /><br /> + <a name="chart.zoom.shadow"></a> +<b>chart.zoom.shadow</b><br /> + Whether or not the zoomed canvas has a shadow or not.<br /><i>Default: true</i><br /><br /> + <a name="chart.zoom.background"></a> +<b>chart.zoom.background</b><br /> + Defaulting to true, this determines whether the zoom has a dark, semi-opaque background that covers the entire web page.<br /><i>Default: true</i><br /><br /> + + <a name="miscellaneous"></a> + <h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Miscellaneous</h3> + <a name="chart.highlight.stroke"></a> + <b>chart.highlight.stroke</b><br /> + If you use tooltips, this controls the colour of the highlight stroke. + <br /><i>Default: black</i><br /><br /> + + <a name="chart.highlight.fill"></a> + <b>chart.highlight.fill</b><br /> + If you use tooltips, this controls the colour of the highlight fill. + <br /><i>Default: rgba(255,255,255,0.5)</i><br /><br /> + + + <a name="key"></a> + <h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Key</h3> + + <a name="chart.key"></a> + <b>chart.key</b><br /> + An array of key information. <br /> + <i>Default: [] (An empty array)</i><br /><br /> + + <a name="chart.key.background"></a> + <b>chart.key.background</b><br /> + The color of the key background. Typically white, you could set this to something like rgba(255,255,255,0.7) to allow people to see things behind it.<br> + <i>Default: white</i><br /><br /> + + <a name="chart.key.halign"></a> + <b>chart.key.halign</b><br /> + Instead of specifying the exact x/y coordinates, you can use this property to simply specify whether the key hould be + aligned <i>left</i> or <i>right</i>.<br /> + <i>Default: right</i><br /><br /> + + <a name="chart.key.position"></a> + <b>chart.key.position</b><br /> + Determines the position of the key. Either <b>graph</b> or <b>gutter</b> (default).<br /> + <i>Default: gutter</i><br /><br /> + + <b>chart.key.position.x</b><br /> + This allows you to specify a specific X coordinate for the key.<br /> + <i>Default: null</i><br /><br /> + + <b>chart.key.position.y</b><br /> + This allows you to specify a specific Y coordinate for the key.<br /> + <i>Default: null</i><br /><br /> + + <b>chart.key.position.gutter.boxed</b><br /> + If you have the key in gutter mode (ie horizontal), this allows you to give a background color.<br /> + <i>Default: false</i><br /><br /> + + <a name="chart.key.shadow"></a> + <b>chart.key.shadow</b><br /> + Whether a small drop shadow is applied to the key.<br /> + <i>Default: false</i><br /><br /> + + <a name="chart.key.shadow.color"></a> + <b>chart.key.shadow.color</b><br /> + The color of the shadow.<br /> + <i>Default: #666</i><br /><br /> + + <a name="chart.key.shadow.blur"></a> + <b>chart.key.shadow.blur</b><br /> + The extent of the blurring effect used on the shadow.<br /> + <i>Default: 3</i><br /><br /> + + <a name="chart.key.shadow.offsetx"></a> + <b>chart.key.shadow.offsetx</b><br /> + The X offset of the shadow.<br /> + <i>Default: 2</i><br /><br /> + + <a name="chart.key.shadow.offsety"></a> + <b>chart.key.shadow.offsety</b><br /> + The Y offset of the shadow.<br /> + <i>Default: 2</i><br /><br /> + + <b>chart.key.rounded</b><br /> + This controls whether the corners of the key (in graph mode) are curved. If the key is gutter mode, this has no effect.<br /> + <i>Default: true</i><br /><br /> + + <b>chart.key.color.shape</b><br /> + This can be <i>square</i>, <i>circle</i> or <i>line</i> and controls how the color indicators in the key appear.<br /> + <i>Default: square</i><br /><br /> + + <b>chart.key.linewidth</b><br /> + The line width of the surrounding border on the key.<br /> + <i>Default: 1</i><br /><br /> +</div> +<br /><br /> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/docs/iframe-setup.html b/schall/static/RGraph/docs/iframe-setup.html new file mode 100644 index 0000000..be60ee0 --- /dev/null +++ b/schall/static/RGraph/docs/iframe-setup.html @@ -0,0 +1,78 @@ +<!DOCTYPE html > +<html> +<head> + <title></title> +</head> +<body> +<!DOCTYPE html > +<html> +<head> + <style> + .ModalDialog_dialog { + font-family: Georgia, Verdana; + } + </style> +</head> +<body> + + <iframe style="position: fixed; top: 0; left: 0; border: none" id="myIframe" src="iframe.html"></iframe> + + <div id="myCover"></div> + + <script> + + document.getElementById("myIframe").style.height = '100%'; + document.getElementById("myIframe").style.width = '100%'; + </script> + + <script src="../libraries/RGraph.modaldialog.js" ></script> + + <!-- This is the popup dialog--> + + <div id="loginDialog" style="display: none"> + + <b>Please login</b> + <p> + <table border="0"> + <tr> + <td align="right" style="padding-top: 4px">Email</td> + <td><input type="text" size="20" name="email" style="width: 150px" /></td> + </tr> + + <tr> + <td align="right" style="padding-top: 4px">Password</td> + <td><input type="password" size="20" name="password" style="width: 150px" /></td> + </tr> + + <tr> + <td colspan="2" align="right"> + <input type="reset" value="Cancel" onclick="ModalDialog.Close()"> + <input type="submit" name="submit" value="Login »" onclick="alert('This is just an example'); event.stopPropagation()"> + </td> + </tr> + </table> + </p> + </div> + + <!-- End of dialog --> +</body> +</html> + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> +
\ No newline at end of file diff --git a/schall/static/RGraph/docs/iframe.html b/schall/static/RGraph/docs/iframe.html new file mode 100644 index 0000000..1e63864 --- /dev/null +++ b/schall/static/RGraph/docs/iframe.html @@ -0,0 +1,186 @@ +<!DOCTYPE html > +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - Integrating RGraph with external libraries - covering the scrollbars</title> + + <meta name="keywords" content="rgraph html5 canvas chart docs external libraries" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Documentation about integrating RGraph with external libraries" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script> + obj = document.all ? top.document.all['myCover'] : top.document.getElementById('myCover'); + iframe = document.all ? top.document.all['myIframe'] : top.document.getElementById('myIframe'); + + function Cover (msg) + { + // Show the ModalDialog + top.ModalDialog.Show('loginDialog', 300); + } + + /** + * This function uncovers the window + */ + function Uncover () + { + Resize = function (size) + { + iframe.style.width = size + 'px'; + iframe.style.height = size + 'px'; + iframe.style.position = 'static'; + iframe.style.border = '2px dashed gray'; + } + + for (var i=0; i<10; i++) { + setTimeout('Resize(' + (((10 - i) * 50) + 250 )+')', i * 50); + } + } + </script> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> + +</head> +<body id="outer"> + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + <div id="breadcrumb"> + <a href="../index.html" target="_top">RGraph: HTML5 Javascript charts library</a> + > + <a href="index.html" target="_top">Documentation</a> + > + Covering the browsers scroll bars + </div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - Covering the scroll bars</h1> + + <button onclick="top.location.href = 'external.html#covering'">« Back</button> + <button onclick="Cover('The window is now completely covered...')">Cover me!</button> + <button onclick="Uncover()">Resize me!</button> + + <p> + This is an example of getting the ModalDialog to cover the entire page - including the scroll bars. A regular DIV does + not do this. This text is just here to pad the page and ensure that the browser creates a scroll bar. + </p> + + <hr> + + <p> + gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui + gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui + gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui + gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui + gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui + gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui + gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui + gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui + gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui + gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui + gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui + gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui + gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui + gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui + gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui + gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui + gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui + gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui + gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui + </p> + + <p> + gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui + gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui + gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui + gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui + gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui + gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui + gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui + gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui + gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui + gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui + gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui + gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui + gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui + gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui + gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui + gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui + gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui + gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui + gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui + </p> + + <p> + gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui + gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui + gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui + gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui + gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui + gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui + gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui + gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui + gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui + gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui + gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui + gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui + gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui + gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui + gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui + gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui + gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui + gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui + gh ghiu gyu gfyugf yu gfyu fgyugfyufgyu gfyu gfyu fgyu yu fyu yu gyu guighui ghui ghui uhi hui hui + </p> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/docs/image2url.html b/schall/static/RGraph/docs/image2url.html new file mode 100644 index 0000000..7579bd5 --- /dev/null +++ b/schall/static/RGraph/docs/image2url.html @@ -0,0 +1,142 @@ +<html> +<head> + <title>Image to data: url converter</title> + + <style> + body { + font-size: 12pt; + font-family: Georgia; + } + </style> +</head> +<body onload="document.getElementById('url').focus(); document.getElementById('url').value = '/images/logo.png'"> + + <div style="position: fixed; right: 5px; background-color: #eee; border: 2px solid #000; padding: 3px"> + <a href="http://www.rgraph.net" target="_blank"><i>Courtesy of www.rgraph.net</i></a> + </div> + + <h1>Image to data: url converter</h1> + + <i> + This only works for online images, which are on the [<script>document.write(location.host)</script>] domain. There's no server-side + scripting though, so feel free to put it on your website and use it there. + </i> + # + <h2>Why use data: URLs?</h2> + + <p> + By using data: URLs you reduce the number of HTTP requests needed to display your page since the images are part of the + page itself. This does mean though that the images can't be cached (unless of course the page itself is cached). But, if you were + to reuse the same image on subsequent pages, they wouldn't be cached. You can get around this though by using some + Javascript at the bottom of your page to change the URLs to the real image files. The + <a href="http://www.rgraph.net" target="_blank">www.rgraph.net</a> front page uses this technique. + </p> + + <p /> + + URL: <input type="text" value="" id="url" /> + <button onclick="Go()">Go!</button> + + <p /> + + The data: url: + <textarea id="output" readonly style="width: 100%" rows="20" style="color: gray" onclick="this.select()">This is where the output URL goes...</textarea> + + <p /> + + A full image tag with the url as the src: + <textarea id="output_tag" readonly style="width: 100%" rows="20" style="color: gray" onclick="this.select()">This is where the image tag goes...</textarea> + + <p>The image itself using the data: url:</p> + <script> + function Go() + { + var url = document.getElementById("url").value; + var text = document.getElementById("output"); + var text_tag = document.getElementById("output_tag"); + var img = document.createElement('IMG'); + + img.src = url; + document.body.appendChild(img); + + /******************************************************* + * Create the canvas and paint the image onto it + *******************************************************/ + canvas = CreateCanvas(img); + + /******************************************************* + * Now use the .toDataURL() function to get the data: url + *******************************************************/ + var data = canvas.toDataURL(); + + /******************************************************* + * Populate the first text box + *******************************************************/ + text.value = data; + text.select(); + + /******************************************************* + * Populate the second text box + *******************************************************/ + text_tag.value = '<img src="' + data + '" width="' + img.offsetWidth + '" height="' + img.offsetHeight + '" alt="An image" />' + + /******************************************************* + * Add the image tag just created to the DOM + *******************************************************/ + img.src = data; + img.width = img.offsetWidth; + img.height = img.offsetHeight; + } + + /******************************************************* + * This function creates the canvas and appends it to the + * DOM + * + * @param img The image DOM object + *******************************************************/ + function CreateCanvas(img) + { + var canvas = document.createElement('CANVAS'); + var context = canvas.getContext('2d'); + + canvas.width = img.offsetWidth; + canvas.height = img.offsetHeight; + document.body.appendChild(canvas); + + /******************************************************* + * Now add the image to the canvas + *******************************************************/ + context.drawImage(img, 0, 0); + + /******************************************************* + * Move the canvas off-screen + *******************************************************/ + + canvas.style.position = 'absolute'; + canvas.style.left = (-1 * img.offsetWidth) + 'px'; + canvas.style.top = (-1 * img.offsetHeight) + 'px'; + + return canvas; + } + </script> + +</body> +</html><!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> +
\ No newline at end of file diff --git a/schall/static/RGraph/docs/index.html b/schall/static/RGraph/docs/index.html new file mode 100644 index 0000000..116fddb --- /dev/null +++ b/schall/static/RGraph/docs/index.html @@ -0,0 +1,909 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - documentation</title> + + <meta name="keywords" content="rgraph html5 canvas chart docs examples" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Documentation and HTML5 examples" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A chart library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.jpg"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <meta name="keywords" content="rgraph chart html5 javascript canvas" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library Javascript charts & HTML5 canvas charts library" /> + + <script src="../libraries/RGraph.common.core.js" ></script> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> + +</head> +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + +<div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + Documentation and HTML5 examples +</div> + +<h1>RGraph: <span>HTML5 Javascript charts library</span> - Documentation and HTML5 examples</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + <div style="text-align: center"> + <div class="warning" style="display: inline; display: inline-block"> + Need something that RGraph doesn't currently support? RGraph license holders can usually be accomodated - please + <a href="mailto:support@rgraph.net"><b>contact support</b></a> to discuss your requirements. + </div> + </div> + + <div> + <h4>Introduction</h4> + + <ul> + <li> + <a href="../index.html#intro" title="A short description of RGraph: HTML5 Javascript charts library">Introduction to RGraph: HTML5 Javascript charts library</a> + <ul> + <li><a href="what-is-html5-canvas.html" title="A brief description of what HTML5 canvas is">What is HTML5 canvas?</a></li> + </ul> + </li> + </ul> + + <ul> + <li><a href="../examples/index.html"><b>Example charts</b></a></li> + </ul> + </div> + + + <div style="float: left; width: 202px"> + <h4>Chart types</h4> + <ul> + <li><a href="bar.html">Bar charts</a></li> + <li><a href="bipolar.html">Bi-polar charts</a></li> + <li><a href="donut.html">Donut charts</a></li> + <li><a href="fuel.html">Fuel charts</a></li> + <li><a href="funnel.html">Funnel charts</a></li> + <li><a href="gauge.html">Gauge charts</a></li> + <li><a href="gantt.html">Gantt charts</a></li> + <li><a href="hbar.html">Horizontal bar charts</a></li> + <li><a href="hprogress.html">Horizontal progress bar</a></li> + <li><a href="led.html">LED Grid</a></li> + <li><a href="line.html">Line charts</a></li> + <li><a href="meter.html">Meter charts</a></li> + <li><a href="odo.html">Odometer charts</a></li> + <li><a href="pie.html">Pie charts</a></li> + <li><a href="radar.html">Radar charts</a></li> + <li><a href="rose.html">Rose charts</a></li> + <li><a href="rscatter.html">Radial scatter charts</a></li> + <li><a href="scatter.html">Scatter charts</a></li> + <li><a href="thermometer.html">Thermometer charts</a></li> + <li><a href="vprogress.html">Vertical progress bar</a></li> + <li><a href="waterfall.html">Waterfall charts</a></li> + </ul> + + <h4>Basic examples</h4> + + <ul> + <li><a href="../examples/basic.html">A basic example</a></li> + <li><a href="basic_tooltips.html">A basic example of a charts in tooltips</a></li> + <li><a href="basic_combined.html">A basic example of a combined Bar/Line chart</a></li> + </ul> + </div> + + <div style="float: left; width: 435px"> + + <h4>Features</h4> + <ul> + <li><a href="effects.html">Animation and visual effects <img src="../images/new.png" border="0" alt="New! width="31" height="12" /></a></li> + <li><a href="gutters.html">Variable gutter sizes</a></li> + <li><a href="setconfig.html">The RGraph.SetConfig() function</a></li> + <li><a href="keys.html">Examples of keys in charts</a></li> + <li><a href="dynamic.html">Updating your charts dynamically</a></li> + <li><a href="png.html">Retrieving a PNG of your charts</a></li> + <li><a href="domcontentloaded.html">DOMContentLoaded example</a></li> + <li><a href="events.html">Custom RGraph events</a></li> + <li><a href="adjusting.html">Adjusting your charts interactively</a></li> + <li><a href="tooltips.html">Using tooltips in your charts</a></li> + <li><a href="resizing.html">Resizing your charts</a></li> + <li><a href="msie.html">Microsoft Internet Explorer support</a></li> + <li><a href="async.html">Asynchronous processing</a></li> + <li><a href="zoom.html">Zooming your charts</a></li> + <li> + <a href="annotating.html">Annotating your charts</a> + <ul> + <li><a href="annotate_persist.html">Making your annotations shareable across browsers/computers</a></li> + </ul> + </li> + <li><a href="combine.html">Combining charts</a></li> + <li><a href="external.html">Integrating RGraph with external libraries (ModalDialog)</a></li> + <li><a href="css.html">Available CSS classes</a></li> + <li><a href="color.html">About canvas color definitions</a></li> + <li><a href="context.html">Context menus</a></li> + </ul> + + <ul> + <li><a href="#support" title="Need support? Get it here"><b>Support</b></a></li> + </ul> + + <ul> + <li><a href="misc.html">Miscellaneous documentation</a></li> + <li><a href="issues.html">Common issues</a></li> + <li><a href="api.html">API Documentation</a></li> + </ul> + </div> + + <div style="float: left; width: 338px"> + <h4>Miscellaneous</h4> + <ul> + <li><a href="licensing.html"><b>The RGraph license</b></a></li> + <li><a href=".CHANGELOG.txt">The changelog</a></li> + <li><a href=".BC.txt">Backwards compatibility breaks</a></li> + </ul> + + <h4>On this page:</h4> + + <ul> + <li><a href="#benefits" title="Benefits of RGraph: HTML5 Javascript charts library">Benefits of RGraph: HTML5 Javascript charts library</a></li> + <li><a href="#browser" title="Information about browser support">Browser support</a></li> + <li><a href="#performance" title="Things you may want to look at concerning performance">Improving the performance of your charts</a></li> + <li><a href="#implementation" title="Implementing RGraph on your website">Implementing RGraph</a></li> + <li><a href="#structure" title="Suggested structure for RGraph">Suggested structure for RGraph</a></li> + <li> + <a href="#integration" title="Information on integrating RGraph with server side scripting">Integration with server side scripting</a> + <ul> + <li><a href="#mysql" title="Integration with PHP & MySQL">Integration with PHP & MySQL</a></li> + <li><a href="#ajax" title="Making AJAX requests">Making AJAX requests</a></li> + </ul> + </li> + </ul> + </div> + + + +<!------------------------------------------------------------------------------------------------------------------------> + + + + <br clear="all" /> + <hr /> + + + + <a name="benefits"></a> + <br /> <br /> <br /> + <h2>Benefits of RGraph: HTML5 Javascript charts library</h2> + + <p> + The HTML5 canvas tag is a new tag for HTML5. It allows for two dimensional drawing easily using Javascript. + This makes it perfect for producing charts. Because Javascript runs on your users' computer, none of the load on your web server + normally associated with producing charts is incurred. Not only that but because + of the greater processing power that is typically available on users' computers, they will be much faster. And, + because the code can be both compressed (for example if you're using Apache, mod_gzip will do this automatically for you) and + cached, bandwidth usage can be massively reduced. This makes it economically attractive to employ at the same time as + benefiting your website, ie: + </p> + + <ul> + <li><b>It can save you money by reducing the load on your web server(s)</b><br /><br /></li> + <li><b>It can speed up your web pages</b></li> + </ul> + + <p> + Imagine, you are creating 10,000 charts a day and the data is such that the resulting charts cannot be cached. With the RGraph + library you can reduce that figure to zero. All the processing is done by each individual web browser, much like + showing the HTML that you send to them. So you don't have to send any images, you simply send them the Javascript charts libraries + once. So, much lower bandwidth bills and less strain on your webserver. + </p> + + <p> + And if that wasn't enough, because the charts are created using Javascript, they will work offline if you view a .html page + on your own PC. Download the archive and see! Useful if you need to do a presentation (for example) and want to use the same + charts as your website. + </p> + + <div> + <div style="width: 45%; background-color: #fff; display: inline; display: inline-block"> + <ul> + <li>Cross browser support.</li> + <li>20+ Different base chart types (<a href="../examples/index.html">Examples</a>).</li> + <li>Charts work on and off-line.</li> + <li>Interactive features.</li> + </ul> + </div> + + <div style="width: 45%; display: inline; display: inline-block"> + <ul> + <li>Charts are created on the client - no server overhead.</li> + <li>Very easy setup (see <a href="#implementation">Implementing RGraph</a>).</li> + <li>Fully documented.</a></li> + <li>Very easy to learn.</li> + </ul> + </div> + </div> + + + <a name="browser"></a> + <br /> <br /> <br /> + <h2>Browser support</h2> + + <p> + Since the charts are produced using HTML5 features (the new <b>canvas</b> tag), client support includes: + </p> + + <ul> + <li>Mozilla Firefox 3.0+</li> + <li>Google Chrome 1+</li> + <li>Apple Safari 3+</li> + <li>Opera 9.5+</li> + <li>Microsoft Internet Explorer 8+ (see note)</li> + <li>iPhone (text support from iOS v4+)</li> + <li>iPad (text support from iOS v4.2+)</li> + </ul> + + <p> + The HTML5 canvas tag is part of the <a href="http://www.w3.org/html/wg/html5/" target="_blank">HTML5 specification</a>, + and all of the above browsers have some sort of support for it. + </p> + + <p> + <b>HTML5 canvas & Microsoft Internet Explorer (MSIE)</b><br /> + Microsoft Internet Explorer 8 doesn't natively support the HTML5 canvas tag. To support + MSIE8 you will need to use either + <a href="http://code.google.com/chrome/chromeframe/" target="_blank">Google Chrome Frame</a> or + <a href="http://code.google.com/p/explorercanvas/" target="_blank">ExCanvas from Google</a> + (which is included in the RGraph archive). Read more about Internet Explorer compatibility + <a href="msie.html">here</a>. + + <p /> + + <span style="color: #090"> + Starting from the developer preview 3, <b style="color: black">Microsoft Internet Explorer 9</b> has full support for + HTML5 canvas. + MSIE 6 and 7 are supported by way of Google Chrome Frame. + </span> + </p> + + <p> + <b>RGraph and older browsers</b><br /> + Older browsers (eg Chrome 1, Firefox 3, Safari 3, Opera 9.5) are supported, however if they don't support the canvas shadow or + text APIs, these will naturally be unavailable. Earlier versions of these browsers may work, but are untested. + </p> + + <p> + <b>Other devices</b><br /> + Other devices (eg mobile devices) may support or may be intending to support the HTML5 CANVAS tag as part of their HTML5 support. Typically + the newer a device or its OS the higher the likelyhood is that it has support for HTML5 canvas. + </p> + + <a name="performance"></a> + <br /> <br /> <br /> + <h2>Improving the performance of your charts</h2> + + <p> + Although performance is excellent, (eg compared to server based charts libraries), you may still want to tune + RGraph further. The biggest thing you can do is use HTTP compression, which reduces the initial download time of the libraries, + but there are a number of things you can do: + </p> + + <ul> + <li> + <b>Compression</b><br />HTTP compression can dramatically reduce your bandwidth bills and increase the speed + of your website. The RGraph.common.core.js file for example used to be over 100k, but with compression this was reduced + to around 17k. Less than a fifth of the original size! <span style="color: red">If you do only one thing to aid performance, + then it should be this.</span> + + <p> + To achieve this with Apache you have a few options: + </p> + + <ul style="list-style-type: disc"> + <li>You can use the Apache module mod_gzip which compresses the libraries on the fly.</li> + <li> + You can compress the libraries manually using the Unix gzip command, rename them to remove the .gz suffix + and add the header using an Apache directive + (eg <span style="background-color: #C5FFC5; padding: 1px">AddEncoding gzip .js</span>). If you have some sort of + release process/script, it would make sense to add this to it to automate the procedure. + </li> + </ul> + <p> + </li> + + <li> + <b>Minification</b><br /> + Minification reduces the size of the library before compression takes effect, removing unnecessary spaces and comments etc. + A combination of minification and compression will give superb results. For example, before being split up into seperate files, + minification combined with compression reduced the common library from over 100k to roughly 10k (!). There is a PHP shell + script that you can use to minify the libraries in the scripts directory. + + <p> + You can get pre-minified versions of the libraries <a href="http://www.rgraph.net/RGraph.minified.zip">here</a>. + </p> + </li> + + <p> + + <li> + <b>Pre-emptive caching</b><br /> + Slightly different to caching itself, is pre-emptive caching. This involves downloading the libraries before the page that requires + them is shown. This way, they're already in the users browser cache and the chart will subsequently appear to be much much + quicker. An example of this would be having the library included at the bottom of your index page of your website (optionally + with the <b>defer="defer"</b> attribute). The script can be downloaded at will because the page doesn't actually use it, but + for subsequent pages it will already be in the users browser cache. + + <p> + </li> + + <li> + <b>Caching</b><br /> + Since the libraries you're using won't change that often, you can set distant Expires: headers on them, or appropriate + Cache-Control: headers, and the client will not even have to contact your server for it. When you want to make sure + the library is re-downloaded (eg. you update the library), then simply change the filename. + + <p> + </li> + + <li> + <b>Script tag placement</b><br /> + According to <a href="http://developer.yahoo.com/performance/" target="_blank">Yahoo! guidelines</a> placing the <SCRIPT> + tag at the bottom of the page can increase the percieved load time. If you do this, then your charts should be + created in the window.onload event, otherwise the browser may try to create them without the library + having been loaded, and will therefore subsequently fail. + + <p> + + You should also consider the effect that this has when your page is rather weighty. If the page is weighty there + will be a small delay before the onload event fires, and therefore creates the chart. This might not be so bad if the + chart is not immediately visible, however if it is then you should carefully consider using the onload event. You + may wish to load the library in the page header, define the canvas tag and then immediately define the javascript + that creates the chart. This way + the chart will be created and shown, and then the rest of the page loads. The end result is that your chart + appears to be faster. + + <p /> + + Between the onload event, asychronous Javascript and careful tag placement, you will need to experiment to get the right result + for you. + </li> + + <li> + <b>Document structure</b><br /> + The structure of your document can have a significant impact on how fast your charts are displayed. If, for example, you use + tables for layout, this can delay the display of elements that are affected by the size of the table. Where possible, you + should consider trying to convert your layout to DIVs. An example of this is the front page of this website. The charts + were right aligned using a table as a container. This caused a visible delay when showing them. In this case it was a + simple matter to convert the page to use DIVs, and the page subsequently displays much faster. + <p /> + </li> + + <li> + <b>Creating your charts asynchronously</b><br /> + Where possible, you may wish to create your charts asynchronously. This allows the browser to continue rendering the page + immediately after getting to the code that creates the chart. This might not be perceptible if you don't have a lot of + charts, or your page is small. You can read a little more about this and see example code <a href="async.html">here</a>. + + <p /> + + Note that recent releases of Google Chrome (from a dev release of version 4) have had an issue with creating charts + asynchronously, which presents itself by not drawing text sometimes (it's not consistent). Simply not using + asynchronous chart production in this case resolves the issue. + </li> + + <li> + <b>DOMContentLoaded event</b><br /> + Using this event can speed up the display of your charts signifcantly compared to the more well known <i>onload</i> event. + It is supported by Chrome, Gecko based browsers (ie Firefox), Safari, Opera and Internet Explorer 9. This event fires when + the structure of the page is loaded, but not necessarily the images or CSS. This means that if your page is laden with + images, this event will fire before the onload event, thus creating your charts quicker. The effect can be very noticeable. + + <pre class="code"> +function addListener(func) +{ + if(window.addEventListener) { + window.addEventListener('DOMContentLoaded', func, false); + } else { + document.attachEvent("onDOMContentLoaded", func); + } +} +</pre> + You can read more about the <i>DOMContentLoaded</i> event on the Mozilla site, <a href="https://developer.mozilla.org/en/Gecko-Specific_DOM_Events" target="_blank">here</a>, + and the Microsoft site <a href="http://ie.microsoft.com/testdrive/HTML5/87DOMContent-Loaded/Default.html" target="_blank">here</a>. + There's an example <a href="domcontentloaded.html">here</a>. + <p /> + </li> + + <li> + <b>AJAX requests</b><br /> + If you can take advantage of AJAX, you can use this method to retrieve data from your server. If, for example, you have a chart that + shows ongoing information, instead of simply refreshing the entire page, you could use an AJAX request to just retrieve the + data that you want and update the chart that way. This reduces the amount of data needed to be transferred, thus reducing the + bandwidth used, and will be quicker than a full page refresh, particularly if your page is weighty. There's a simple AJAX + function that you can use <a href="#ajax">below</a>. + <p /> + </li> + + <li> + <b>Combining libraries</b><br /> + You may wish to consider combining the RGraph libraries into a single file. + This won't save on the size of the individual libraries, but will save on the headers that are sent as part of the response. + If a typical response sends 500 bytes worth of headers, and you send four chart libraries, then combining the libraries + would save 1500 bytes. Multiple factors need to be considered though, including things like caching, which can circumvent + the unneccessary repeated downloading of the libraries. + + <p> + To make your life straight-forward, you may want to make this a part of your release script/process. This way you + can make changes to the scripts in your development environment as you would normally. + </p> + + <p> + Another effect of combining libraries is reducing the amount of HTTP connections needed to retrieve them. Most browsers + have a limit on how many connections they can create simultaneously, so if they're not being used to retrieve your + chart libraries, they can be used for something else. + </p> + </li> + + <li> + <b>Avoiding shadow blur with animations</b><br /> + If you're using animations then you may wish to avoid or reduce the shadow blur that you're using. With HTML5 canvas shadow + blur is a drain on performance - so if you're looking to get the most out of your charts or are using animations + which require redrawing the chart, turning off the shadow blur can reduce the time it takes to draw the charts leading to + smoother charts. + </li> + </ul> + + <b>A reasonable performance strategy</b> + + <p> + Although there's a lot you can do in regards to performance, a few of the points here will suffice for most + websites: + + <ul> + <li>Compression</li> + <li>Minification</li> + <li>Pre-emptive caching</li> + <li>Caching</li> + </ul> + + The number one thing you should do is compress your libraries. This has multiple benefits and provides by far the most gain, + effectively for free. Secondly, use the minified libraries. Since you can download them <a href="../RGraph.minified.zip">here</a>, + you might as well use them. Then we have pre-emptive caching. Since most websites won't show charts on the front page or will + have a login page that is shown before any charts, this effectively eliminates the charts library download. And lastly caching + should be done as a matter of course. There's no reason to keep downloading the same library so even caching for only 30 minutes + (or the duration of an average visit to your website) will produce results. + </p> + + <p> + <b>General website performance tools</b><br /><br /> + + If your aim is to improve your websites performance as a whole then you may be interested in these tools: + </p> + + <ul> + <li> + <a href="http://www.webpagetest.org/" target="_blank">http://www.webpagetest.org/</a><br /> + This site can provide a wealth of information about how to improve the permance of your website, specific to your site.<br /><br /> + </li> + + <li> + <a href="http://code.google.com/speed/page-speed/docs/using_chrome.html" target="_blank">Page Speed for Google Chrome</a><br /> + <a href="http://code.google.com/speed/page-speed/docs/using_firefox.html" target="_blank">Page Speed for Mozilla Firefox</a><br /> + <a href="http://pagespeed.googlelabs.com/" target="_blank">Page Speed online</a><br /> + The Page Speed plugins and the online tool also provide a great deal of information about how to speed up your website.<br /><br /> + </li> + + <li> + <a href="image2url.html">Convert images to <i>data:</i> URLs</a><br /> + A tool which converts images to <i>data:</i> URLs. Using <i>data:</i> URLs can reduce the number of HTTP requests used. + </li> + </ul> + + <a name="implementation"></a> + <br /> <br /> <br /> + <h2>Implementing RGraph</h2> + + <p> + Getting RGraph up and running is very easy and consists of three steps. If you're having trouble I suggest you get hold of a copy of + <a href="http://www.mozilla.com" target="_blank">Firefox</a> along with <a href="http://www.getfirebug.com" target="_blank">Firebug</a> - its + Javascript error console will make debugging your issue much easier. Many problems are down to a library not having been included or + not using the onload event when you need to. You might also benefit from using the <a href="https://addons.mozilla.org/en-US/firefox/addon/60" target="_blank">Web Developer toolbar</a> + for Firefox. This allows you to easily disable caching, thus eliminating any problems that that causes. You could equally use + the Chrome developer tools (CTRL+SHIFT+J), optionally in docked mode, which also provides a good quality Javascript console. + </p> + + <ol> + <li> + Include the libraries (put this in your documents <HEAD>): +<pre class="code"> +<script src="RGraph.common.core.js"></script> + +<script src="RGraph.common.adjusting.js"></script> <!-- Just needed for adjusting --> +<script src="RGraph.common.annotate.js"></script> <!-- Just needed for annotating --> +<script src="RGraph.common.context.js"></script> <!-- Just needed for context menus --> +<script src="RGraph.common.effects.js"></script> <!-- Just needed for visual effects --> +<script src="RGraph.common.resizing.js"></script> <!-- Just needed for resizing --> +<script src="RGraph.common.tooltips.js"></script> <!-- Just needed for tooltips --> +<script src="RGraph.common.zoom.js"></script> <!-- Just needed for zoom --> + +<script src="RGraph.bar.js"></script> <!-- Just needed for bar charts --> +<script src="RGraph.bipolar.js"></script> <!-- Just needed for bi-polar charts --> +<script src="RGraph.fuel.js"></script> <!-- Just needed for fuel charts --> +<script src="RGraph.funnel.js"></script> <!-- Just needed for funnel charts --> +<script src="RGraph.gantt.js"></script> <!-- Just needed for gantt charts --> +<script src="RGraph.gauge.js"></script> <!-- Just needed for gauge charts --> +<script src="RGraph.hbar.js"></script> <!-- Just needed for horizontal bar charts --> +<script src="RGraph.hprogress.js"></script> <!-- Just needed for horizontal progress bars --> +<script src="RGraph.led.js"></script> <!-- Just needed for LED charts --> +<script src="RGraph.line.js"></script> <!-- Just needed for line charts --> +<script src="RGraph.meter.js"></script> <!-- Just needed for meter charts --> +<script src="RGraph.odo.js"></script> <!-- Just needed for odometers --> +<script src="RGraph.pie.js"></script> <!-- Just needed for pie AND donut charts --> +<script src="RGraph.radar.js"></script> <!-- Just needed for radar charts --> +<script src="RGraph.rose.js"></script> <!-- Just needed for rose charts --> +<script src="RGraph.rscatter.js"></script> <!-- Just needed for rscatter charts --> +<script src="RGraph.scatter.js"></script> <!-- Just needed for scatter charts --> +<script src="RGraph.thermometer.js"></script> <!-- Just needed for thermometer charts --> +<script src="RGraph.vprogress.js"></script> <!-- Just needed for vertical progress bars --> +<script src="RGraph.waterfall.js"></script> <!-- Just needed for waterfall charts --> +</pre> + </li> + + <li> + Add the canvas tag (put it where you want the chart to appear): +<pre class="code"> +<canvas id="myCanvas" width="600" height="250">[No canvas support]</canvas> +</pre> + </li> + + <li> + Create the chart (since it is using the onload event, you can put this anywhere): + +<pre class="code"> +<script> + window.onload = function () + { + var data = [280, 45, 133, 166, 84, 259, 266, 960, 219, 311, 67, 89]; + + var bar = new RGraph.Bar('myCanvas', data); + bar.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']); + bar.Set('chart.gutter.left', 35); + bar.Draw(); + } +</script> +</pre> + </li> + </ol> + + <p> + There's also a very <a href="../examples/basic.html">basic example</a> of using RGraph, that does very little. It can be helpful to + illustrate how you can get RGraph up and running. + </p> + + <a name="structure"></a> + <br /> <br /> <br /> + <h2>Suggested structure for RGraph</h2> + + <img src="../images/structure.png" width="175" height="205" alt="Suggested structure for RGraph" style="float: right" /> + + <p> + The suggested layout structure for the RGraph libraries is shown on the right. The <b>www.example.com</b> folder represents + the root/top level of your website with the <b>javascript</b> directory beneath that. The <b>css</b> and <b>images</b> + folders are shown for + illustrative purposes only. If you follow this layout then your URLs to the RGraph libraries would be: + </p> + + <p> + <b>http://www.example.com/javascript/rgraph/RGraph.common.core.js</b><br /> + <b>http://www.example.com/javascript/rgraph/RGraph.bar.js</b><br /> + etc + </p> + + <p> + By using this structure you make RGraph easy to update should you need to, and also keep all the RGraph libraries in + one, easy to find, place. + </p> + + <br clear="all" /> + + <a name="integration"></a> + <br /> <br /> <br /> + <h2>Integration with server side scripting</h2> + + <p> + This is a very easy process, as easy as sending content to the browser. All you need to do is make the <i>data</i> variable + (as in the example below) contain the data you want to be displayed. Eg: + </p> + + <pre class="code"> +<script src="RGraph.common.core.js"></script> +<script src="RGraph.line.js"></script> + +<canvas id="myCanvasTag" width="600" height="200">[No canvas support]</canvas> + +<script> + data = [78,16,26,23,25,51,34,64,84,84]; + + line = new RGraph.Line("myCanvasTag", data); + line.Set("chart.labels", ["Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov"]); + line.Draw(); +</script> +</pre> + + <p> + To get the above using PHP you could do this: + </p> + + <pre class="code"><?php + // This simply makes a string out of the array of data + $myData = join(',', array(78,16,26,23,25,51,34,64,84,84)); + + // This prints out the required HTML markup + print('<script src="RGraph.common.core.js"></script>' . "\n"); + print('<script src="RGraph.line.js"></script>' . "\n\n"); + print('<canvas id="myCanvasTag" width="600" height="200">[No canvas support]</canvas>' . "\n\n"); + print('<script>' . "\n"); + print(' var data = [' . $myData . '];' . "\n\n"); + print(' var line = new RGraph.Line("myCanvasTag", data);' . "\n"); + print(' line.Set("chart.labels", ["Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov"]);' . "\n"); + print(' line.Draw();' . "\n"); + print('</script>'); +?> +</pre> + + <p> + Strictly speaking the <span style="font-family: Monospace">var</span> isn't necessary, however if you put the code inside a + function (like window.onload), it's probably best to do so as using <span style="font-family: Monospace">var</span> will + make the variable local, and not global. So doing so will help prevent naming clashes. + </p> + + + <a name="mysql"></a> + <br /> <br /> <br /> + <h4>Integration with PHP & MySQL</h4> + + <p> + This is a simple matter of formatting what you get back from MySQL into a string, as the MySQL dump and PHP code + below shows (it's based on a database called RGraph_example): + </p> + + <pre class="code"> +# +# Table structure for table `daily_statistics` +# + +CREATE TABLE `daily_statistics` ( + `st_day` char(9) NOT NULL, + `st_statistics` tinyint(4) NOT NULL, + UNIQUE KEY `st_day` (`st_day`) +) ENGINE=MyISAM DEFAULT CHARSET=latin1; + +# +# Dumping data for table `daily_statistics` +# + +INSERT INTO `daily_statistics` VALUES ('Mon', 124); +INSERT INTO `daily_statistics` VALUES ('Tue', 95); +INSERT INTO `daily_statistics` VALUES ('Wed', 64); +INSERT INTO `daily_statistics` VALUES ('Thu', 94); +INSERT INTO `daily_statistics` VALUES ('Fri', 75); +INSERT INTO `daily_statistics` VALUES ('Sat', 98); +INSERT INTO `daily_statistics` VALUES ('Sun', 84); +</pre> + + <pre class="code"> +<?php + /** + * Change these to your own credentials + */ + $hostname = "localhost"; + $username = "root"; + $password = "PASSWORD"; + $database = "RGraph_example"; + + $connection = mysql_connect($hostname, $username, $password) OR die('Could not connect to MySQL: ' . mysql_error()); + mysql_select_db($database); + + $result = mysql_query("SELECT st_day, st_statistics FROM daily_statistics"); + if ($result) { + + $labels = array(); + $data = array(); + + while ($row = mysql_fetch_assoc($result)) { + $labels[] = $row["st_day"]; + $data[] = $row["st_statistics"]; + } + + // Now you can aggregate all the data into one string + $data_string = "[" . join(", ", $data) . "]"; + $labels_string = "['" . join("', '", $labels) . "']"; + } else { + print('MySQL query failed with error: ' . mysql_error()); + } +?> +<html> +<head> + + <!-- Don't forget to update these paths --> + + <script src="libraries/RGraph.common.core.js" ></script> + <script src="libraries/RGraph.line.js" ></script> + +</head> +<body> + + <canvas id="cvs" width="600" height="250">[No canvas support]</canvas> + <script> + chart = new RGraph.Line('cvs', <?php print($data_string) ?>); + chart.Set('chart.background.grid.autofit', true); + chart.Set('chart.gutter.left', 35); + chart.Set('chart.gutter.right', 5); + chart.Set('chart.hmargin', 10); + chart.Set('chart.tickmarks', 'endcircle'); + chart.Set('chart.labels', <?php print($labels_string) ?>); + chart.Draw(); + </script> + +</body> +</html> +</pre> + + <p> + This PHP code provides the data in two strings - <i>$labels_string</i> and <i>$data_string</i>. These variables are then used + in the RGraph code to provide the data and the labels. + </p> + + <p><b>Remember:</b></p> + + <ul> + <li>Change the database hostname/username/password/database to match your own.</li> + <li>Ensure you have the correct paths to the RGraph libraries.</li> + </ul> + + <a name="ajax"></a> + <br /> <br /> <br /> + <h4>Making AJAX requests</h4> + + <p style="background-color: #ffa; padding: 3px; border: 1px dashed black"> + <b>Note:</b> + It is important that you're careful with types when making AJAX requests. Since the response is initially a string, + and your AJAX function/library may not do conversions for you, you may need to convert these strings to numbers. To + do this you can use the <i>Number()</i> or <i>parseInt()</i> functions. For example: + </p> + + <pre class="code"> +<script> + num = Number('23'); + num = parseInt('43'); +</script> +</pre> + + <p> + Here is a simple function that you could use to get data from your server using AJAX: + </p> + + <pre class="code"> +<script> + /** + * Makes an AJAX call. It calls the given callback (a function) when ready + * + * @param string url The URL to retrieve + * @param function callback A function object that is called when the response is ready, there's an example below + * called "myCallback". + */ + function AjaxCall (url, callback) + { + // Mozilla, Safari, ... + if (window.XMLHttpRequest) { + var httpRequest = new XMLHttpRequest(); + + // MSIE + } else if (window.ActiveXObject) { + var httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); + } + + httpRequest.onreadystatechange = callback; + + httpRequest.open('GET', url, true); + httpRequest.send(); + } + + + /** + * This sample callback function is called when the data is ready (readyState=4) + */ + function myCallback () + { + if (this.readyState == 4 && this.status == 200) { + // Everything is good, the response is received + alert(this.responseText); + } + } +</script> +</pre> + + <p>And you would use it like this:</p> + + <pre class="code"> +<script> + AjaxCall('http://www.example.com/getSomething.php', myCallback); +</script> +</pre> + + <p> + There's an example <a href="dynamic.html">here</a> that shows updating your chart dynamically. + </p> + + + <a name="support"></a> + <br /> <br /> <br /> + <h2>Support</h2> + + <p> + If you have a support issue you can send it to the support email address: + <a href="mailto:support@rgraph.net"><b>support@rgraph.net</b></a>. You can also follow + <a href="http://www.twitter.com/_rgraph" target="_blank">@_rgraph on twitter</a> to get notifications of new releases and + notable updates. + </p> + + <br /> + <br /> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/docs/ingraph.html b/schall/static/RGraph/docs/ingraph.html new file mode 100644 index 0000000..2c44f28 --- /dev/null +++ b/schall/static/RGraph/docs/ingraph.html @@ -0,0 +1,179 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - In-graph labels</title> + + <meta name="keywords" content="rgraph html5 canvas charts docs ingraph in-graph" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Documentation about in-graph labels" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.jpg"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js" ></script> + <script src="../libraries/RGraph.line.js" ></script> + <script src="../libraries/RGraph.bar.js" ></script> + <script src="../libraries/RGraph.scatter.js" ></script> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> + +</head> +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + <div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="index.html">Documentation</a> + > + In-graph labels + </div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - In-graph labels</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + <br /> + + <p> + This page shows the various options for in-graph labels. The in-graph labels can be set like this: + </p> + + <pre class="code">obj.Set('chart.labels.ingraph', [,,'Hoolio',,'Olga']);</pre> + + <p> + Or like this if you want to be more specific: + </p> + + <pre class="code">obj.Set('chart.labels.ingraph', [,,<span style="color: green">['Hoolio', 'red', 'yellow', -1, 60]</span>,,'Olga']);</pre> + + <p> + The array can consist of: + </p> + + <ul> + <li>The label text</li> + <li>The text color</li> + <li>The background color</li> + <li>This can be 1 or -1 and denotes whether the label should be above or below the line. This has no effect in Bar or Scatter charts</li> + <li>The length of the label pointer/arrow</li> + </ul> + + <h4>Example line chart</h4> + + <canvas id="line" width="600" height="250">[No canvas support]</canvas> + <script> + myGraph = new RGraph.Line('line', [4,5,6,3,2,5,6,4,2,4,1]); + myGraph.Set('chart.title', 'Line chart with in-graph labels'); + myGraph.Set('chart.labels', ['Jim','Gail','Hoolio','Kev','Olga','Jimmy','Paul','Jake','John','Fred', 'Jobe']); + myGraph.Set('chart.labels.ingraph', [,,['Hoolio', 'red', 'yellow', -1, 60],,'Olga']); + myGraph.Draw(); + </script> + + <h4>Example bar chart</h4> + + <canvas id="bar" width="600" height="250">[No canvas support]</canvas> + <script> + myGraph = new RGraph.Bar('bar', [4,5,6,3,2,5,6,4,2,4,1]); + myGraph.Set('chart.colors', ['#fcc']); + myGraph.Set('chart.title', 'Bar chart with in-graph labels'); + myGraph.Set('chart.labels', ['Jim','Gail','Hoolio','Kev','Olga','Jimmy','Paul','Jake','John','Fred', 'Jobe']); + myGraph.Set('chart.labels.ingraph', [,,['Hoolio', 'red', 'yellow', -1, 60],,'Olga']); + myGraph.Draw(); + </script> + + <canvas id="scatter" width="600" height="250">[No canvas support]</canvas> + <script> + myGraph = new RGraph.Scatter('scatter', [[5,15],[24,30],[27,3],[23, 5]], [[4,12]]); + myGraph.Set('chart.title', 'Scatter chart with in-graph labels'); + myGraph.Set('chart.labels', ['W1','W2','W3','W4']); + myGraph.Set('chart.labels.ingraph', [null,null,['Hoolio', 'red', 'yellow', -1, 60],'Olga','Fred']); + myGraph.Set('chart.xmax', 31); + myGraph.Draw(); + </script> + + <h4>Example bar chart (arrow variant)</h4> + + <canvas id="bar1" width="600" height="250">[No canvas support]</canvas> + <script> + myGraph = new RGraph.Bar('bar1', [4,5,6,3,2,5,6,4,2,4,1]); + myGraph.Set('chart.colors', ['#fcc']); + myGraph.Set('chart.title', 'Bar chart with in-graph labels (arrow variant)'); + myGraph.Set('chart.labels', ['Jim','Gail','Hoolio','Kev','Olga','Jimmy','Paul','Jake','John','Fred', 'Jobe']); + myGraph.Set('chart.variant', 'arrow'); + myGraph.Set('chart.labels.ingraph', [,,['Hoolio', 'red', 'yellow', -1, 60],,'Olga']); + myGraph.Draw(); + </script> + + + <h4>Example bar chart (dot variant)</h4> + <canvas id="bar2" width="600" height="250">[No canvas support]</canvas> + <script> + myGraph = new RGraph.Bar('bar2', [4,5,6,3,2,5,6,4,2,4,1]); + myGraph.Set('chart.colors', ['#fcc']); + myGraph.Set('chart.title', 'Bar chart with in-graph labels (dot variant)'); + myGraph.Set('chart.labels', ['Jim','Gail','Hoolio','Kev','Olga','Jimmy','Paul','Jake','John','Fred', 'Jobe']); + myGraph.Set('chart.labels.ingraph', [6,['Foo', 'red', 'yellow', null, 75],3,'Bar']); + myGraph.Set('chart.variant', 'dot'); + myGraph.Set('chart.labels.ingraph', [,,['Hoolio', 'red', 'yellow', -1, 60],,'Olga']); + myGraph.Draw(); + </script> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/docs/issues.html b/schall/static/RGraph/docs/issues.html new file mode 100644 index 0000000..fbdac20 --- /dev/null +++ b/schall/static/RGraph/docs/issues.html @@ -0,0 +1,148 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - Common issues</title> + + <meta name="keywords" content="rgraph html5 canvas chart docs common issues" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Documentation about common issues" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.jpg"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js" ></script> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> + +</head> +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + <div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="index.html">Documentation</a> + > + Common issues + </div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - Common issues</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + <p> + These are some common issues that you should be aware of. If you're having trouble, you may want to look through these to see + if any apply to you or may be the source of your problem. + </p> + + + <a name="annotations"></a> + <h4>Annotations aren't saved when running locally in Mozilla Firefox</h4> + + <p> + The solution here is to run the charts using a web server. At this time (March 2010) only Safari, Chrome and Opera + support saving annotations when running locally. + </p> + + <a name="missing.text"></a> + <h4>Missing text in Google Chrome</h4> + + <p> + Since one of the Chrome 4 dev releases there has been an issue with Google Chrome 4 and 5, asynchronous processing and not rendering + chart labels. This has been remedied by simply not using asynchronous processing. Because of the tag placement on the front page, + the effect shouldn't be apparent. Other browsers (eg Firefox, Safari, Opera, MSIE) are fine. + </p> + + <p> + <b>Update:</b> Currently, (roughly March 2011), the missing text issue appears to be much less evident, if not resolved entirely. + </p> + + <a name="firefox.tooltips.clipboard"></a> + <h4>Firefox, tooltips and the clipboard</h4> + + <p> + Firefox, tooltips and using the clipboard is a little convoluted. To copy the text in a tooltip you must do the following: + </p> + + <ol> + <li style="margin-top: 0">Select the text you want with the mouse.</li> + <li style="margin-top: 0">Press CTRL+C (it may be a different key combination if you're not using Windows) to copy the text to the clipboard.</li> + </ol> + + <p> + <b>Note:</b> Recent versions of Firefox 4 (from beta 6 onwards) appear to work as expected, and you can copy text with the mouse as normal. + </p> + + <h4>Shadows in Google Chrome and the line chart</h4> + + <p> + Shadows in recent versions of Google Chrome are somewhat broken. Firefox, MSIE, Opera and Safari are fine. The reason for this + error is a combination of factors it seems - shadow blurring and line width. Fixes have been added to allow shadow blurring and + a 1 pixel linewidth, though some chart types may still be affected. + </p> + +<!-- + + <p> + <b></b><br /> + </p> +--> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/docs/keys.html b/schall/static/RGraph/docs/keys.html new file mode 100644 index 0000000..ab4fd5c --- /dev/null +++ b/schall/static/RGraph/docs/keys.html @@ -0,0 +1,164 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - Examples of keys</title> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../favicon.png"> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.jpg"/> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js" ></script> + <script src="../libraries/RGraph.line.js" ></script> + <script src="../libraries/RGraph.pie.js" ></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + + <script> + window.onload = function () + { + var pie = new RGraph.Pie('myPie', [45,43,23,68,84,41]); + pie.Set('chart.title', 'A pie chart showing gutter mode'); + pie.Set('chart.key', ['John','Fred','Lou','Pete','Kevin','Gary']); + pie.Set('chart.key.position', 'gutter'); + pie.Set('chart.key.position.y', pie.canvas.height - 35); + pie.Set('chart.key.rounded', false); + pie.Set('chart.key.shadow', true); + pie.Set('chart.key.shadow.offsetx', 3); + pie.Set('chart.key.shadow.offsety', 3); + pie.Set('chart.key.shadow.blur', 0); + pie.Set('chart.key.shadow.color', '#aaa'); + pie.Set('chart.radius', 80); + pie.Draw(); + + var line = new RGraph.Line('myLine', [8,4,2,5,6,4,3,7,8,9,7,6], [4,3,1,6,5,8,4,9,8,7,4,6]); + line.Set('chart.key', ['Richard', 'Fred']); + line.Set('chart.title', 'A line chart showing the key in graph mode (interactive)'); + line.Set('chart.key.position', 'graph'); + line.Set('chart.key.shadow', true); + line.Set('chart.key.shadow.offsetx', 0); + line.Set('chart.key.shadow.offsety', 0); + line.Set('chart.key.shadow.blur', 15); + line.Set('chart.key.shadow.color', '#ccc'); + line.Set('chart.key.interactive', true); + line.Set('chart.hmargin', 5); + line.Set('chart.linewidth', 3); + line.Set('chart.labels', ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']); + line.Draw(); + } + </script> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> + +</head> +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + <div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="index.html">Documentation</a> + > + Examples of keys in charts + </div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - Examples of keys in charts</h1> + + <div style="float: right; display: inline-block; width: 650px"> + <canvas id="myLine" width="600" height="250" style="float: right">[No canvas support]</canvas> + <canvas id="myPie" width="450" height="250" style="float: right">[No canvas support]</canvas> + </div> + + <p> + As of 4th December 2010 the code that produces the keys has been rewritten. There are two variants of keys available, + a horizontal one designed to sit in the gutter, and a vertical one that is designed to sit on top of (ie over) the chart. + </p> + + <p> + The actual positioning is now configurable though, so you could have a horizontal key and position it to sit on top + of the chart. + </p> + + <h4>Key properties</h4> + + <p> + The available key properties and their defaults are listed below (some chart types have slightly different defaults to + suit): + </p> + + + <ul> + <li>chart.key (<i>[] (An empty array)</i>)</li> + <li>chart.key.position (<i>graph</i>)</li> + <li>chart.key.position.gutter.boxed (<i>true</i>)</li> + <li>chart.key.position.x (<i>null</i>)</li> + <li>chart.key.position.y (<i>null</i>)</li> + <li>chart.key.shadow (<i>false</i>)</li> + <li>chart.key.shadow.offsetx (<i>2</i>)</li> + <li>chart.key.shadow.offsety (<i>2</i>)</li> + <li>chart.key.shadow.color (<i>#666</i>)</li> + <li>chart.key.shadow.blur (<i>3</i>)</li> + <li>chart.key.color.shape (<i>square</i>)</li> + <li>chart.key.background (<i>white</i>)</li> + <li>chart.key.rounded (<i>true</i>)</li> + <li>chart.key.text.size (<i>10</i>)</li> + </ul> + + <h4>Interactive keys</h4> + <p> + The Line chart supports interactive keys - as shown in the example. This is only available when the key + is in <i>graph</i> mode. This allows you to click a key item and it will be highlighted on the chart. + </p> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/docs/led.html b/schall/static/RGraph/docs/led.html new file mode 100644 index 0000000..92b619d --- /dev/null +++ b/schall/static/RGraph/docs/led.html @@ -0,0 +1,186 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - LED Grid documentation</title> + + <meta name="keywords" content="rgraph html5 canvas charts docs LED chart" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Documentation about LED charts" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.jpg"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> + +</head> +<body> + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + <div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="index.html">Documentation</a> + > + LED Grids + </div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - LED Grid documentation</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + <p> + The LED grid can be used to represent simple letters and numbers. + </p> + + <p> + The example file is <a href="../examples/led.html">here</a>. + </p> + + <pre class="code"> +<script> + window.onload = function () + { + var led = new RGraph.LED('myCanvas', '456461'); + led.Set('chart.dark', '#666'); + led.Set('chart.light', 'rgba(255,255,255,1)'); + led.Draw(); + } +</script> +</pre> + + <h2>Properties</h2> + + <p> + You can use these properties to control how the LED grid apears. + </p> + + <ul> + <li><a href="#chart configuration">Chart configuration</a></li> + <li><a href="#interactive features">Interactive features</a></li> + <li><a href="#zoom">Zoom</a></li> + </ul> + + +<a name="chart configuration"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Chart configuration</h3> <a name="chart.dark"></a> +<b>chart.dark</b><br /> + Color of the darkened (ie unlit) lights<br /><i>Default: #eee</i><br /><br /> + <a name="chart.light"></a> +<b>chart.light</b><br /> + Color of lit lights<br /><i>Default: #f66</i><br /><br /> + <a name="chart.background"></a> +<b>chart.background</b><br /> + The color of the background.<br /><i>Default: white</i><br /><br /> +<a name="interactive features"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Interactive features</h3> + + + + <a name="chart.resizable"></a> + <b>chart.resizable</b><br /> + Defaulting to false, this determines whether your chart will be resizable. Because of the numerous event handlers this has to install code on, This feature is unlikely to work with other dynamic features (the context menu is fine however).<br /> + <i>Default: false</i><br /><br /> + + <a name="chart.resize.handle.background"></a> + <b>chart.resize.handle.background</b><br /> + With this you can specify the background color for the resize handle. If you're adjusting the position of the + handle then you may need this to make the handle stand out more.<br /> + <i>Default: null</i><br /><br /> + + +<a name="zoom"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Zoom</h3> <a name="chart.zoom.mode"></a> +<b>chart.zoom.mode</b><br /> + Can be used to control whether the zoom is in thumbnail or canvas mode. Possible values are: <i>thumbnail</i> and <i>canvas</i>.<br /><i>Default: canvas</i><br /><br /> + <a name="chart.zoom.factor"></a> +<b>chart.zoom.factor</b><br /> + This is the factor that the chart will be zoomed by (bigger values means more zoom)<br /><i>Default: 1.5</i><br /><br /> + <a name="chart.zoom.fade.in"></a> +<b>chart.zoom.fade.in</b><br /> + Whether the zoomed canvas fades in or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /><i>Default: true</i><br /><br /> + <a name="chart.zoom.fade.out"></a> +<b>chart.zoom.fade.out</b><br /> + Whether the zoomed canvas fades out or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /><i>Default: true</i><br /><br /> + <a name="chart.zoom.hdir"></a> +<b>chart.zoom.hdir</b><br /> + The horizontal direction of the zoom. Possible values are: <i>left</i>, <i>center</i>, <i>right</i><br /><i>Default: right</i><br /><br /> + <a name="chart.zoom.vdir"></a> +<b>chart.zoom.vdir</b><br /> + The vertical direction of the zoom. Possible values are: <i>up</i>, <i>center</i>, <i>down</i><br /><i>Default: down</i><br /><br /> + <a name="chart.zoom.delay"></a> +<b>chart.zoom.delay</b><br /> + The delay (in milliseconds) between frames.<br /><i>Default: 50</i><br /><br /> + <a name="chart.zoom.frames"></a> +<b>chart.zoom.frames</b><br /> + The number of frames in the zoom animation.<br /><i>Default: 10</i><br /><br /> + <a name="chart.zoom.shadow"></a> +<b>chart.zoom.shadow</b><br /> + Whether or not the zoomed canvas has a shadow or not.<br /><i>Default: true</i><br /><br /> + <a name="chart.zoom.thumbnail.width"></a> +<b>chart.zoom.thumbnail.width</b><br /> + When the zoom is in thumbnail mode, this is the width (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br /> + <a name="chart.zoom.thumbnail.height"></a> +<b>chart.zoom.thumbnail.height</b><br /> + When the zoom is in thumbnail mode, this is the height (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br /> + <a name="chart.zoom.background"></a> +<b>chart.zoom.background</b><br /> + Defaulting to true, this determines whether the zoom has a dark, semi-opaque background that covers the entire web page.<br /><i>Default: true</i><br /><br /> +</div><!-- /DOCS --><br /><br /> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/docs/licensing.html b/schall/static/RGraph/docs/licensing.html new file mode 100644 index 0000000..8d82c92 --- /dev/null +++ b/schall/static/RGraph/docs/licensing.html @@ -0,0 +1,330 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - Licensing FAQs</title> + + <meta name="keywords" content="rgraph html5 canvas chart licensing" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Documentation about RGraph licensing" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.jpg"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> + +</head> +<body id="licensing"> + + <a name="top"></a> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + <div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="index.html">Documentation</a> + > + Licensing + </div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - The RGraph license</h1> + + <p> + There are two license types available with RGraph - a free one for non-commercial entities and a non-free commercial use license. + Each is described below. + </p> + + <ul> + <li><a href="#license.overview">An overview of the licensing</a></li> + <li> + <a href="#license.commercial">Commercial usage</a> + <ul> + <li><a href="#license.commercial.faqs">Commercial license FAQs</a></li> + </ul> + </li> + <li><a href="#license.free">Non-commercial free usage</a></li> + <li><a href="#license.legal">The legal bit</a></li> + </ul> + + <ul> + <li><a href="#contact"><b>Contact support</b></a></li> + </ul> + + <a name="license.overview"></a> + <br /><br /> + <h2>An <span>overview of the licensing</span></h2> + <p> + A overview of the licensing is that for commercial use there is a one-time licensing fee of <b>£79</b> (GBP) + whilst for <a href="#license.free">non-commercial use</a> (eg personal, government, charity, educational etc) it's free + to use assuming that you link to <a href="http://www.rgraph.net" target="_blank">www.rgraph.net</a> on your website. + </p> + + <a name="license.commercial"></a> + <br /><br /> + <h2>Commercial <span>usage</span></h2> + + <div style="float: right; margin-right: 50px; text-align: center"> + <form action="https://checkout.google.com/api/checkout/v2/checkoutForm/Merchant/456239608328156" id="BB_BuyButtonForm" method="post" name="BB_BuyButtonForm"> + <input name="item_name_1" type="hidden" value="RGraph License" /> + <input name="item_description_1" type="hidden" value="License for RGraph: HTML5 Javascript charts library" /> + <input name="item_quantity_1" type="hidden" value="1" /> + <input name="item_price_1" type="hidden" value="79.0" /> + <input name="item_currency_1" type="hidden" value="GBP" /> + <input name="_charset_" type="hidden" value="utf-8" /> + <input alt="" width="116" height="61" src="../images/buy.png" type="image" /> + </form> + + <form action="https://www.paypal.com/cgi-bin/webscr" method="post"> + <input type="hidden" name="cmd" value="_s-xclick"> + <input type="hidden" name="hosted_button_id" value="FDVK4T4GKQ6M8"> + <input type="image" src="../images/paypal.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online."> + <img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1"> + </form> + </div> + + <p> + Commercial usage covers commercial entities for their websites + (either internal or external) or in software that they produce. If your organisation generates + profit then a commercial license is most appropriate. There are some FAQs below that + should help to answer any questions that you may have, but if they don't then you can + email your question to: <a href="mailto:support@rgraph.net"><b>support@rgraph.net</b></a> + </p> + + <p> + After completion of either Google Checkout or Paypal payment you are granted an RGraph commercial license. You will + be sent the license details via email. + </p> + + <p> + Example uses are: + + <ul> + <li>Internal websites (eg intranets)</li> + <li>Private websites</li> + <li>Public facing websites</li> + <li>Online applications</li> + <li>Offline applications</li> + </ul> + + + You may alter the RGraph code to suit your particular needs. Also, if you're covered by the non-commercial license, however + you don't wish to link to the RGraph website then buying a commercial license means that you dont have to. + </p> + + <a name="license.commercial.faqs"></a> + <br /><br /> + <h4>Commercial license FAQs</h4> + + <ul> + <li><a href="#do.i.need.to.buy.a.license">Do I need to buy a commercial license?</a></li> + <li><a href="#how.much.is.a.license">How much is a license?</a></li> + <li><a href="#what.if.i.need.something.thats.not.part.of.rgraph">What if I need something that's not part of RGraph?</a></li> + <li><a href="#what.does.the.license.cover">What does the license cover?</a></li> + <li><a href="#what.if.im.a.web.designer">What if I'm a web designer?</a></li> + <li><a href="#bulk.discount">Is there a discount for buying multiple licenses?</a></li> + <li><a href="#do.i.need.to.provide.a.backlink">Do I need to provide a backlink?</a></li> + <li><a href="#can.you.send.me.an.invoice">Can you send me an invoice?</a></li> + </ul> + + <p> + <a name="do.i.need.to.buy.a.license"></a> + <br /><br /><br /> + <b>Do I need to buy a commercial license?</b><br /> + For commercial/business use, then yes - you need a license to use RGraph. + + <br /><br /> + + <a name="how.much.is.a.license"></a> + <br /><br /><br /> + <b>How much is a license?</b><br /> + A license is a fee of <b>£79</b> (UK pounds). That's a little over $120 (US dollars) at + the time of writing. + + <br /><br /> + + <a name="what.if.i.need.something.thats.not.part.of.rgraph"></a> + <br /><br /><br /> + <b>What if I need something that's not part of RGraph?</b><br /> + If there's a feature that you need that's not part of RGraph then I can usually accommodate you assuming that + you're a license holder. Please <a href="#contact">contact support</a> first to discuss your needs. If it's not too specific to you then + I can add it to the main RGraph software. If it is then I can add it to your specific copy of RGraph. You can + contact support with <a href="mailto:support@rgraph.net">support@rgraph.net</a> + + <br /><br /> + + <a name="what.does.the.license.cover"></a> + <br /><br /><br /> + <b>What does the license cover?</b><br /> + The RGraph license covers RGraph as a whole. Excepting ExCanvas, all code that you find in the RGraph archive is + covered by the RGraph license. + + <br /><br /> + + <a name="what.if.im.a.web.designer"></a> + <br /><br /><br /> + <b>What if I'm a web designer?</b><br /> + In this situation each client would need a separate license for themselves. They can then use RGraph as much as they wish. + If you prefer to buy in bulk - discounts are available (see next question). + + <br /><br /> + + <a name="bulk.discount"></a> + <br /><br /><br /> + <b>Is there a discount for buying licenses in bulk?</b><br /> + Yes there's a discount available if you wish to buy 5, 10 or 15 licenses (you could be a web designer for example + wishing to license your clients). Please <a href="#contact">contact support</a> if this interests you. + + <br /><br /> + + <a name="do.i.need.to.provide.a.backlink"></a> + <br /><br /><br /> + <b>Do I need to provide a backlink?</b><br /> + Commercial license holders do not need to provide a backlink to the RGraph website. + + <br /><br /> + + <a name="can.you.send.me.an.invoice"></a> + <br /><br /><br /> + <b>Can you send me an invoice?</b><br /> + Of course, simply go here: <a href="http://www.rgraph.net/invoice.html">http://www.rgraph.net/invoice.html</a>, enter your email + address and you'll be sent an invoice that you can use for tax purposes. + </p> + + <a name="license.free"></a> + <br /><br /> + <h2>Non-commercial <span>free usage</span></h2> + <p> + RGraph can be used free-of-charge by non-commercial entities who wish to use it either on an internal or external website + or in software that they make. Examples of non-commercial entities include: + + <ul> + <li>Individuals</li> + <li>Charities</li> + <li>Government bodies</li> + <li>Educational institutes</li> + </ul> + + Attribute RGraph on your website by linking back to the RGraph site - example HTML code as follows: + </p> + + <pre class="code"> +<a href="http://www.rgraph.net" target="_blank"> + Charts made with RGraph: HTML5 Javascript charts library +</a> +</pre> + + <p> + If you would prefer not to link to the RGraph website, then you can buy an RGraph commercial license and you won't need to. + You may alter the RGraph code to suit your particular needs. + </p> + + + <div style="float: left; padding-top: 8px"> + <form action="https://www.paypal.com/cgi-bin/webscr" method="post"> + <input type="hidden" name="cmd" value="_s-xclick"> + <input type="hidden" name="hosted_button_id" value="3JDYAEAW8LBFW"> + <input type="image" src="https://www.paypalobjects.com/en_GB/i/btn/btn_donate_SM.gif" border="0" name="submit" alt="PayPal — The safer, easier way to pay online."> + <img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1"> + </form> + </div> + + <p> + If you're covered by the free license but want to make a donation to help keep RGraph going then they're all gratefully + received. You can use PayPal button on the left to send it. Thanks! + </p> + + + <hr /> + + <a name="license.legal"></a> + <br /><br /> + <h2>The <span>legal bit</span></h2> + <h4>Copyright notice</h4> + <p> + The ownership of the Licensed material is not transferred to you in either of these agreements. + </p> + + + <h4>Limitations of liability</h4> + <p> + In no event shall the initial developers or copyright holders be + liable for any damages whatsoever, including - but not restricted to + - lost revenue or profits or other direct, indirect, special, + incidental or consequential damages, even if they have been advised + of the possibility of such damages, except to the extent invariable + law, if any, provides otherwise. + </p> + + + <h4>No warranty</h4> + <p> + The Software and this license document are provided AS IS with NO + WARRANTY OF ANY KIND, INCLUDING THE WARRANTY OF DESIGN, + MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. + </p> + + <h4>Choice of law</h4> + <p> + This license is governed by the Laws of England. Disputes shall be + settled by Chelmsford town court. + </p> + + <a name="contact"></a> + <h2>Contact <span>support</span></h2> + <p> + Any questions or queries about this license or its extent should + be directed to <a href="mailto:support@rgraph.net"><b>supportrgraph.net</b></a> + </p> +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/docs/line.html b/schall/static/RGraph/docs/line.html new file mode 100644 index 0000000..02185e0 --- /dev/null +++ b/schall/static/RGraph/docs/line.html @@ -0,0 +1,990 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - line charts documentation</title> + + <meta name="keywords" content="rgraph html5 canvas docs line charts" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Documentation about Line charts" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.jpg"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> + +</head> +<body> + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + <div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="index.html">Documentation</a> + > + Line charts + </div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - Line charts documentation</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + <div class="warning"> + <b>Note:</b> + With the Line chart, there isn't an option to have a scale on the X axis. For this you'll need a Scatter chart with + <i>chart.line</i> set to true. + </div> + + <p> + Line charts, along with Bar charts, are probably the most configurable of all the charts available. + </p> + + <p> + The example file is <a href="../examples/line.html">here</a>. + </p> + + <ul> + <li><a href="#available.properties">Properties</a></li> + <li><a href="#available.methods">Methods</a></li> + <li><a href="#combining.line.bar">Combining the Line and Bar charts</a></li> + <li><a href="#alternative.colors">Alternative colors</a></li> + <li><a href="#filled.accumulative">Accumulative filled Line charts</a></li> + <li><a href="#custom.tickmarks">Custom tickmarks</a></li> + <li><a href="#coords2">The coords2 array</a></li> + </ul> + + <pre class="code"> +<script> + window.onload = function () + { + var data = [10,4,17,50,25,19,20,25,30,29,30,29]; + + var line = new RGraph.Line("myLine", data); + line.Set('chart.background.barcolor1', 'rgba(255,255,255,1)'); + line.Set('chart.background.barcolor2', 'rgba(255,255,255,1)'); + line.Set('chart.background.grid.color', 'rgba(238,238,238,1)'); + line.Set('chart.colors', ['rgba(255,0,0,1)']); + line.Set('chart.linewidth', 2); + line.Set('chart.filled', true); + line.Set('chart.hmargin', 5); + line.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']); + line.Set('chart.gutter.left', 40); + line.Draw(); + } +</script> +</pre> + + <a name="available.properties"></a> + <h2>Properties</h2> + + <p> + You can use these properties to control how the Line chart apears. You can set them by using the Set() method. Eg: + </p> + + <p> + <b>myLine.Set('name', 'value');</b> + </p> + + <ul> + <li><a href="#background">Background</a></li> + <li><a href="#labels and text">Labels and text</a></li> + <li><a href="#margins">Margins</a></li><li><a href="#colors">Colors</a></li> + <li><a href="#shadow">Shadow</a></li> + <li><a href="#interactive features">Interactive features</a></li> + <li><a href="#titles">Titles</a></li><li><a href="#key">Key</a></li> + <li><a href="#scale">Scale</a></li> + <li><a href="#axis properties">Axis properties</a></li> + <li><a href="#zoom">Zoom</a></li><li><a href="#miscellaneous">Miscellaneous</a> + </li> + </ul> + + +<a name="background"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Background</h3> <a name="chart.background.barcolor1"></a> +<b>chart.background.barcolor1</b><br /> + The color of the background bars (1 of 2).<br /><i>Default: rgba(0,0,0,0)</i><br /><br /> + <a name="chart.background.barcolor2"></a> +<b>chart.background.barcolor2</b><br /> + The color of the background bars (2 of 2).<br /><i>Default: rgba(0,0,0,0)</i><br /><br /> + <a name="chart.background.grid"></a> +<b>chart.background.grid</b><br /> + Whether to show the background grid or not.<br /><i>Default: true</i><br /><br /> + <a name="chart.background.grid.color"></a> +<b>chart.background.grid.color</b><br /> + The color of the background grid.<br /><i>Default: #eee</i><br /><br /> + <a name="chart.background.hbars"></a> +<b>chart.background.hbars</b><br /> + An array of information stipulating horizontal colored bars. You can use these to indicate limits. Eg: <i>myLine.Set('hbars', [[75, 10, 'yellow'], [85, 15, 'red']]);</i> This would give you two bars, one red and a lower yellow bar. The units correspond to your scale, and are the starting point and the height.<br /><i>Default: null</i><br /><br /> + <a name="chart.background.grid.hsize"></a> +<b>chart.background.grid.hsize</b><br /> + The horizontal size of the grid.<br /><i>Default: 25</i><br /><br /> + <a name="chart.background.grid.vsize"></a> +<b>chart.background.grid.vsize</b><br /> + The vertical size of the grid.<br /><i>Default: 25</i><br /><br /> + <a name="chart.background.grid.width"></a> +<b>chart.background.grid.width</b><br /> + The width of the background grid.<br /><i>Default: 1</i><br /><br /> + <a name="chart.background.grid.border"></a> +<b>chart.background.grid.border</b><br /> + Determines whether a border line is drawn around the grid.<br /><i>Default: true</i><br /><br /> + <a name="chart.background.grid.hlines"></a> +<b>chart.background.grid.hlines</b><br /> + Determines whether to draw the horizontal grid lines.<br /><i>Default: true</i><br /><br /> + <a name="chart.background.grid.vlines"></a> +<b>chart.background.grid.vlines</b><br /> + Determines whether to draw the vertical grid lines.<br /><i>Default: true</i><br /><br /> + + <a name="chart.background.grid.autofit"></a> + <b>chart.background.grid.autofit</b><br /> + Instead of specifying a pixel width/height for the background grid, you can use autofit and specify how many + horizontal and vertical lines you want.<br /> + <i>Default: true</i><br /><br /> + + <a name="chart.background.grid.autofit.numhlines"></a> + <b>chart.background.grid.autofit.numhlines</b><br /> + When using autofit this allows you to specify how many horizontal grid lines you want. <br /> + <i>Default: 5</i><br /><br /> + + <a name="chart.background.grid.autofit.numvlines"></a> + <b>chart.background.grid.autofit.numvlines</b><br /> + When using autofit this allows you to specify how many vertical grid lines you want. <br /> + <i>Default: 20</i><br /><br /> + + <a name="chart.background.grid.autofit.align"></a> + <b>chart.background.grid.autofit.align</b><br /> + If you want to have your grid lines line up with the labels (both X and Y axes), you can set this to true and RGraph will + attempt to make the grid lines line up. If you have a <i>chart.hmargin</i> set then the alignment will be thrown out.<br /> + <i>Default: false</i><br /><br /> + + <a name="chart.background.image"></a> + <b>chart.background.image</b><br /> + If you want to specify a background image to use on your chart, specify it with this property.<br /> + <i>Default: null</i><br /><br /> + + <a name="chart.backdrop"></a> +<b>chart.backdrop</b><br /> + When enabled this specifies that the line(s) will have a backdrop effect. You can control the transparency with the other backdrop settings).<br /><i>Default: false</i><br /><br /> + <a name="chart.backdrop.size"></a> +<b>chart.backdrop.size</b><br /> + This controls the size/extent of the backdrop effect.<br /><i>Default: 30</i><br /><br /> + <a name="chart.backdrop.alpha"></a> +<b>chart.backdrop.alpha</b><br /> + This controls how much transparency the backdrop effect has. It can go from 0 - 1.<br /><i>Default: 0.2</i><br /><br /> +<a name="labels and text"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Labels and text</h3> + + <a name="chart.labels.above"></a> + <b>chart.labels.above</b><br /> + Whether the values are shown in labels drawn above the line.<br /> + <i>Default: false</i><br /><br /> + + <a name="chart.labels.above.size"></a> + <b>chart.labels.above.size</b><br /> + The size of the labels which are drawn above the line.<br /> + <i>Default: 8</i><br /><br /> + + <a name="chart.labels"></a> + <b>chart.labels</b><br /> + An array of the X labels for the chart. <br /> + <i>Default: [] (An empty array)</i><br /><br /> + + <a name="chart.labels.ingraph"></a> +<b>chart.labels.ingraph</b><br /> + An array of labels for the chart which are drawn "inside" the chart. If you have 5 data points then this should have a corresponding number of elements, though there is a <a href="misc.html#shorthand.ingraph.labels">shorthand available</a>.<br /><i>Default: null</i><br /><br /> + <a name="chart.ylabels"></a> +<b>chart.ylabels</b><br /> + Can be <i>true</i> or <i>false</i> and determines whether the chart has Y axis labels.<br /><i>Default: true</i><br /><br /> + + <a name="chart.ylabels.invert"></a> + <b>chart.ylabels.invert</b><br /> + Reverses the Y axis so that 0 is at the top, instead of the bottom.<br /> + <i>Default: false</i><br /><br /> + + <a name="chart.ylabels.count"></a> + <b>chart.ylabels.count</b><br /> + A value (<i>1, 3, 5 or 10</i>) that controls how many Y labels there are. <br /> + <i>Default: 5</i><br /><br /> + + <a name="chart.ylabels.inside"></a> +<b>chart.ylabels.inside</b><br /> + This controls whether the Y labels are drawn inside the Y axis or not. If your labels are large, this may help.<br /><i>Default: false</i><br /><br /> + <a name="chart.ylabels.inside.color"></a> +<b>chart.ylabels.inside.color</b><br /> + If the Y labels are to be drawn inside the Y axis, this is used as the background color.<br /> + <i>Default: rgba(255,255,255,0.5)</i><br /><br /> + + <a name="chart.ylabels.specific"></a> + <b>chart.ylabels.specific</b><br /> + You can use this option to give your own Y labels (eg ['Low', 'Medium', 'High'].<br /> + <i>Default: null</i><br /><br /> + + <a name="chart.xlabels.inside"></a> + <b>chart.xlabels.inside</b><br /> + This controls whether the X labels are drawn inside the X axis or not. By using this you can significantly + reduce the size of the gutter needed. <br /> + <i>Default: false</i><br /><br /> + + <a name="chart.xlabels.inside.color"></a> +<b>chart.xlabels.inside.color</b><br /> + If the X labels are to be drawn inside the X axis, this is used as the background color.<br /><i>Default: rgba(255,255,255,0.5)</i><br /><br /> + <a name="chart.text.size"></a> +<b>chart.text.size</b><br /> + The size of the text (in points).<br /><i>Default: 10</i><br /><br /> + <a name="chart.text.angle"></a> +<b>chart.text.angle</b><br /> + The angle of the horizontal text labels (at the bottom of the chart). Previously this could be 0, 45 or 90, but now (31st July 2010) this can be any angle.<br /><i>Default: 0 (Horizontal)</i><br /><br /> + <a name="chart.text.font"></a> +<b>chart.text.font</b><br /> + The font used to render the text.<br /><i>Default: Verdana</i><br /><br /> + <a name="chart.text.color"></a> +<b>chart.text.color</b><br /> + The color of the labels. <br /><i>Default: black</i><br /><br /> + +<a name="margins"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Margins</h3> + + + + <a name="chart.gutter.left"></a> + <b>chart.gutter.left</b><br /> + The left gutter of the chart, (the gutter is where the labels and title are)).<br /> + <i>Default: 25</i><br /><br /> + + <a name="chart.gutter.right"></a> + <b>chart.gutter.right</b><br /> + The right gutter of the chart, (the gutter is where the labels and title are).<br /> + <i>Default: 25</i><br /><br /> + + <a name="chart.gutter.top"></a> + <b>chart.gutter.top</b><br /> + The top gutter of the chart, (the gutter is where the labels and title are).<br /> + <i>Default: 25</i><br /><br /> + + <a name="chart.gutter.bottom"></a> + <b>chart.gutter.bottom</b><br /> + The bottom gutter of the chart, (the gutter is where the labels and title are).<br /> + <i>Default: 25</i><br /><br /> + + + <a name="chart.hmargin"></a> +<b>chart.hmargin</b><br /> + The size of the horizontal margin. This is on the inside of the axes.<br /><i>Default: 0</i><br /><br /> +<a name="colors"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Colors</h3> <a name="chart.colors"></a> +<b>chart.colors</b><br /> + An array of line colors.<br /><i>Default: ['#f00', '#0f0', '', '#00f', '#f0f', '#ff0', '#0ff'] 9</i><br /><br /> + <a name="chart.colors.alternate"></a> +<b>chart.colors.alternate</b><br /> + Set this to true if you want your line color(s) to be alternated. <a href="#note.colors">See note</a><br /><i>Default: false</i><br /><br /> + <a name="chart.fillstyle"></a> +<b>chart.fillstyle</b><br /> + A single color or an array of colors that filled line charts will use.<br /><br /><b>Important:</b> This used to be a string, and still can be, but can now also be an array.<br /><i>Default: null</i><br /><br /> + + <a name="chart.filled"></a> + <b>chart.filled</b><br /> + Whether the area under the line is filled or not. This looks best when there is no horizontal + margin.<br /><br /> + + <b>Note:</b> When showing multiple lines the values are additive by default. This means that if you have two lines + they will be "stacked" on top of each other. If this is not the desired behaviour then you can set the option + below to false.<br /> + <i>Default: false</i><br /><br /> + + <a name="chart.filled.accumulative"></a> + <b>chart.filled.accumulative</b><br /> + When showing multiple filled lines the values are by default accumulative (ie added to each other). If this is not the + desired behaviour, then you can set this property to <i>false</i> to have them drawn "non-accumulatively".<br/><br/> + + <b>Note:</b> If you use fully opaque colors in conjunction with this option set to false it's feasible that you + might not see one or more of the lines, or parts of the line. If you want to see all of the lines you should + leave this option set to its default <i>true</i> setting. You can see an example of this setting + <a href="line_filled.html">here</a>. + + <br /><br /> + + <i>Default: true</i><br /><br /> + + <a name="chart.filled.range"></a> +<b>chart.filled.range</b><br /> + This is useful for indicating a range. Exactly two datasets are required, with the space between them filled. This is useful for indicating a range.The <a href="../examples/line.html">line chart examples</a> page demonstrates this in action.<br /><i>Default: false</i><br /><br /> +<a name="shadow"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Shadow</h3> <a name="chart.shadow"></a> +<b>chart.shadow</b><br /> + If true a shadow will be applied to the line.<br /><i>Default: false</i><br /><br /> + <a name="chart.shadow.color"></a> +<b>chart.shadow.color</b><br /> + The color of the shadow. As well as a single color definition, this can also be an array of colors. This means that if you have multiple lines on your chart, each can have a different shadow color. <br /><i>Default: rgba(0,0,0,0.5)</i><br /><br /> + <a name="chart.shadow.offsetx"></a> +<b>chart.shadow.offsetx</b><br /> + The X offset in pixels for the shadow.<br /><i>Default: 3</i><br /><br /> + <a name="chart.shadow.offsety"></a> +<b>chart.shadow.offsety</b><br /> + The Y offset in pixels for the shadow.<br /><i>Default: 3</i><br /><br /> + <a name="chart.shadow.blur"></a> +<b>chart.shadow.blur</b><br /> + The severity of the shadow blurring effect.<br /><i>Default: 3</i><br /><br /> +<a name="interactive features"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Interactive features</h3> <a name="chart.tooltips"></a> +<b>chart.tooltips</b><br /> + These are tooltips for the line(s). It should be an array of tooltips. If you have multiple lines, simply pass multiple arrays to the Set() method. <br /><i>Default: [] (An empty array)</i><br /><br /> + <a name="chart.tooltips.effect"></a> +<b>chart.tooltips.effect</b><br /> + The animated effect used for showing tooltips. Can be either <i>fade</i> or <i>expand</i>.<br /><i>Default: fade</i><br /><br /> + + <a name="chart.tooltips.css.class"></a> +<b>chart.tooltips.css.class</b><br /> + This is the name of the CSS class the chart uses.<br /><i>Default: RGraph_tooltip</i><br /><br /> + <a name="chart.tooltips.override"></a> +<b>chart.tooltips.override</b><br /> + If you wish to handle showing tooltips yourself, this should be a function object which does just that. There's more information on the <a href="tooltips.html">tooltips documentation page</a><br /><i>Default: null</i><br /><br /> + + <a name="chart.tooltips.highlight"></a> + <b>chart.tooltips.highlight</b><br /> + If you don't want/need the chart to be highlighted and thus avoid redrawing, (eg When + <a href="combine.html">combining charts</a>), then set this to false.<br /> + <i>Default: true</i><br /><br /> + + <a name="chart.tooltips.hotspot.xonly"></a> + <b>chart.tooltips.hotspot.xonly</b><br /> + Set this to true if you want the tooltips to be triggered by the mouse X position only.<br /> + <i>Default: false</i><br /><br /> + + <a name="chart.crosshairs"></a> +<b>chart.crosshairs</b><br /> + If true, you will get a crosshair centering on the current mouse position.<br /><i>Default: false</i><br /><br /> + <a name="chart.crosshairs.linewidth"></a> +<b>chart.crosshairs.linewidth</b><br /> + This controls the linewidth of the crosshairs.<br /><i>Default: 1</i><br /><br /> + <a name="chart.crosshairs.color"></a> +<b>chart.crosshairs.color</b><br /> + The color of the crosshairs.<br /><i>Default: #333</i><br /><br /> + + <a name="chart.crosshairs.hlines"></a> + <b>chart.crosshairs.hlines</b><br /> + This determines whether the horizontal crosshair is shown.<br /> + <i>Default: true</i><br /><br /> + + <a name="chart.crosshairs.vlines"></a> + <b>chart.crosshairs.vlines</b><br /> + This determines whether the vertical crosshair is shown.<br /> + <i>Default: true</i><br /><br /> + + + <a name="chart.contextmenu"></a> +<b>chart.contextmenu</b><br /> + An array of context menu items. Unlike the bar chart, you CAN have context menus at the same time as tooltips. More information on context menus is <a href="context.html">here</a>.<br /><i>Default: [] (An empty array)</i><br /><br /> + <a name="chart.annotatable"></a> +<b>chart.annotatable</b><br /> + Whether annotations are enabled for the chart (ie you can draw on the chart interactively.<br /><i>Default: false</i><br /><br /> + <a name="chart.annotate.color"></a> +<b>chart.annotate.color</b><br /> + If you do not allow the use of the palette, then this will be the only color allowed for annotations.<br /><i>Default: black</i><br /><br /> + + + <a name="chart.resizable"></a> + <b>chart.resizable</b><br /> + Defaulting to false, this determines whether your chart will be resizable. Because of the numerous event handlers this has to install code on, This feature is unlikely to work with other dynamic features (the context menu is fine however).<br /> + <i>Default: false</i><br /><br /> + + + <a name="chart.resize.handle.background"></a> + <b>chart.resize.handle.background</b><br /> + With this you can specify the background color for the resize handle. If you're adjusting the position of the + handle then you may need this to make the handle stand out more.<br /> + <i>Default: null</i><br /><br /> + + + <a name="chart.adjustable"></a> +<b>chart.adjustable</b><br /> + Defaulting to false, this determines whether your chart will be adjustable (click a point and drag it). <br /><i>Default: false</i><br /><br /> +<a name="titles"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Titles</h3> + +<a name="chart.title"></a> +<b>chart.title</b><br /> + The title of the chart.<br /><i>Default: none</i><br /><br /> + + + +<a name="chart.title.font"></a> +<b>chart.title.font</b><br /> +The font that the title is rendered in. If not specified the chart.text.font setting is used (usually Verdana)<br /> +<i>Default: null</i><br /><br /> + +<a name="chart.title.size"></a> +<b>chart.title.size</b><br /> +The size of the title. If not specified the size is usually 2pt bigger than the chart.text.size setting.<br /> +<i>Default: null</i><br /><br /> + +<a name="chart.title.bold"></a> +<b>chart.title.bold</b><br /> +Whather the title is bold or not.<br /> +<i>Default: true</i><br /><br /> + +<a name="chart.title.background"></a> +<b>chart.title.background</b><br /> +The background color (if any) for the title.<br /> +<i>Default: null</i><br /><br /> + + <a name="chart.title.vpos"></a> +<b>chart.title.vpos</b><br /> + This allows you to completely override the vertical positioning of the title. It should be a number between 0 and 1, and is multiplied with the gutter and then used as the vertical position. It can be useful if you need to have a large gutter.<br /><i>Default: null</i><br /><br /> + <a name="chart.title.color"></a> +<b>chart.title.color</b><br /> + The color of the title.<br /> <i>Default: black</i><br /><br /> + + <a name="chart.title.xaxis"></a> + <b>chart.title.xaxis</b><br /> + This allows to specify a title for the X axis.<br /> + <i>Default: none</i><br /><br /> + + <a name="chart.title.xaxis.size"></a> + <b>chart.title.xaxis.size</b><br /> + This allows you to specify a size for the X axis title.<br /> + <i>Default: null</i><br /><br /> + + <a name="chart.title.xaxis.font"></a> + <b>chart.title.xaxis.font</b><br /> + This allows to specify a font for the X axis title.<br /> + <i>Default: null</i><br /><br /> + + <a name="chart.title.xaxis.bold"></a> + <b>chart.title.xaxis.bold</b><br /> + This controls whether the X axis title is bold or not.<br /> + <i>Default: true</i><br /><br /> + + <a name="chart.title.yaxis"></a> + <b>chart.title.yaxis</b><br /> + This allows to specify a title for the Y axis.<br /> + <i>Default: none</i><br /><br /> + + <a name="chart.title.yaxis.size"></a> + <b>chart.title.yaxis.size</b><br /> + This allows you to specify a size for the Y axis title.<br /> + <i>Default: null</i><br /><br /> + + <a name="chart.title.yaxis.font"></a> + <b>chart.title.yaxis.font</b><br /> + This allows to specify a font for the Y axis title.<br /> + <i>Default: null</i><br /><br /> + + <a name="chart.title.yaxis.bold"></a> + <b>chart.title.yaxis.bold</b><br /> + This controls whether the Y axis title is bold or not.<br /> + <i>Default: true</i><br /><br /> + + <a name="chart.title.xaxis.pos"></a> +<b>chart.title.xaxis.pos</b><br /> + This is multiplied with the gutter to give the position of the X axis title.<br /><i>Default: 0.25</i><br /><br /> + <a name="chart.title.yaxis.pos"></a> +<b>chart.title.yaxis.pos</b><br /> + This is multiplied with the gutter to give the position of the Y axis title.<br /><i>Default: 0.25</i><br /><br /> + + <a name="chart.title.yaxis.position"></a> + <b>chart.title.yaxis.align</b><br /> + Instead of using the option above you can instead use this option, specifying <i>left</i> or <i>right</i>.<br /> + <i>Default: left</i><br /><br /> + + + + <a name="key"></a> + <h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Key</h3> + + <a name="chart.key"></a> + <b>chart.key</b><br /> + An array of key information. <br /> + <i>Default: [] (An empty array)</i><br /><br /> + + <a name="chart.key.background"></a> + <b>chart.key.background</b><br /> + The color of the key background. Typically white, you could set this to something like rgba(255,255,255,0.7) to allow people to see things behind it.<br> + <i>Default: white</i><br /><br /> + + <a name="chart.key.halign"></a> + <b>chart.key.halign</b><br /> + Instead of specifying the exact x/y coordinates, you can use this property to simply specify whether the key hould be + aligned <i>left</i> or <i>right</i>. By default the key is positioned on the opposite side to the Y axis.<br /> + <i>Default: null</i><br /><br /> + + <a name="chart.key.position"></a> + <b>chart.key.position</b><br /> + Determines the position of the key.Either <b>graph</b> (default), or <b>gutter</b>.<br /> + <i>Default: graph</i><br /><br /> + + <b>chart.key.position.x</b><br /> + This allows you to specify a specific X coordinate for the key.<br /> + <i>Default: null</i><br /><br /> + + <b>chart.key.position.y</b><br /> + This allows you to specify a specific Y coordinate for the key.<br /> + <i>Default: null</i><br /><br /> + + <b>chart.key.position.gutter.boxed</b><br /> + If you have the key in gutter mode (ie horizontal), this allows you to give a background color.<br /> + <i>Default: true</i><br /><br /> + + <a name="chart.key.shadow"></a> + <b>chart.key.shadow</b><br /> + Whether a small drop shadow is applied to the key.<br /> + <i>Default: false</i><br /><br /> + + <a name="chart.key.shadow.color"></a> + <b>chart.key.shadow.color</b><br /> + The color of the shadow.<br /> + <i>Default: #666</i><br /><br /> + + <a name="chart.key.shadow.blur"></a> + <b>chart.key.shadow.blur</b><br /> + The extent of the blurring effect used on the shadow.<br /> + <i>Default: 3</i><br /><br /> + + <a name="chart.key.shadow.offsetx"></a> + <b>chart.key.shadow.offsetx</b><br /> + The X offset of the shadow.<br /> + <i>Default: 2</i><br /><br /> + + <a name="chart.key.shadow.offsety"></a> + <b>chart.key.shadow.offsety</b><br /> + The Y offset of the shadow.<br /> + <i>Default: 2</i><br /><br /> + + <a name="chart.key.rounded"></a> + <b>chart.key.rounded</b><br /> + This controls whether the corners of the key (in graph mode) are curved. If the key is gutter mode, this has no effect.<br /> + <i>Default: false</i><br /><br /> + + <a name="chart.key.color.shape"></a> + <b>chart.key.color.shape</b><br /> + This can be <i>square</i>, <i>circle</i> or <i>line</i> and controls how the color indicators in the key appear.<br /> + <i>Default: square</i><br /><br /> + + <a name="chart.key.linewidth"></a> + <b>chart.key.linewidth</b><br /> + The line width of the surrounding border on the key.<br /> + <i>Default: 1</i><br /><br /> + + <a name="chart.key.interactive"></a> + <b>chart.key.interactive</b><br /> + The Line chart supports interactive keys - so you can click on a key element and RGraph will highlight + the appropriate line, whilst fading the rest of the chart.<br /> + <i>Default: false</i><br /><br /> + +<a name="scale"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Scale</h3> + +<a name="chart.scale.formatter"></a> + <b>chart.scale.formatter</b><br /> + To allow thoroughly custom formats of numbers in the scale, you can use this option to + specify a function that is used by RGraph to format numbers. This function should + handle ALL of the formatting. Eg:<br /><br /> + <pre class="code"> +function myFormatter(obj, num) +{ + return num + 'F'; // An example of formatting +} +myGraph.Set('chart.scale.formatter', myFormatter); +</pre> + <br /><i>Default: null</i><br /><br /> + +<a name="chart.units.post"></a> +<b>chart.units.post</b><br /> + The units (if any) that the Y axis is measured in (gets appended to the number)<br /><i>Default: none</i><br /><br /> + <a name="chart.units.pre"></a> +<b>chart.units.pre</b><br /> + The units (if any) that the Y axis is measured in (gets preppended to the number)<br /><i>Default: none</i><br /><br /> + <a name="chart.scale.decimals"></a> +<b>chart.scale.decimals</b><br /> + Determines the precision of the numbers used as the scale.<br /><i>Default: 0</i><br /><br /> + <a name="chart.scale.point"></a> +<b>chart.scale.point</b><br /> + The character used as the decimal point.<br /><i>Default: .</i><br /><br /> + + <a name="chart.scale.thousand"></a> + <b>chart.scale.thousand</b><br /> + The character used as the thousand separator<br /><i>Default: ,</i><br /><br /> + + <a name="chart.scale.round"></a> + <b>chart.scale.round</b><br /> + Whether to round the maximum scale value up or not. This will produce slightly better scales in some instances.<br /> + <i>Default: null</i><br /><br /> + + <a name="chart.ymin"></a> +<b>chart.ymin</b><br /> + The optional minimum Y scale value. If not specified then it will be zero.<br /><i>Default: null</i><br /><br /> + <a name="chart.ymax"></a> + + <b>chart.ymax</b><br /> + The optional maximum Y scale value. If not specified then it will be calculated.<br /> + <i>Default: null (It's calculated)</i><br /><br /> + + <b>chart.outofbounds</b><br /> + Normally, out-of-bounds values are not drawn. By setting this to <i>true</i> you can change this behaviour.<br /> + <i>Default: false</i><br /><br /> + +<a name="axis properties"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Axis properties</h3> <a name="chart.xticks"></a> +<b>chart.xticks</b><br /> + The number of X tickmarks.<br /><i>Default: null (linked to number of datapoints)</i><br /><br /> + <a name="chart.ticksize"></a> +<b>chart.ticksize</b><br /> + The size of the tick marks. This only affects certain styles of tickmarks.<br /><i>Default: 3</i><br /><br /> + <a name="chart.tickdirection"></a> +<b>chart.tickdirection</b><br /> + Whether the ticks are above or below the axis.<br /><i>Default: -1 (-1 is below, 1 is above)</i><br /><br /> + <a name="chart.axis.color"></a> +<b>chart.axis.color</b><br /> + The color of the axes.<br /><i>Default: black</i><br /><br /> + <a name="chart.xaxispos"></a> +<b>chart.xaxispos</b><br /> + The position of the X axis. It can be either <i>bottom</i> or <i>center</i>.<br /><i>Default: bottom</i><br /><br /> + + <a name="chart.yaxispos"></a> + <b>chart.yaxispos</b><br /> + Specifies the Y axis position. Can be <i>left</i> or <i>right</i>.<br /><i>Default: left</i><br /><br /> + + <a name="chart.noaxes"></a> + <b>chart.noaxes</b><br /> + Whether the axes are drawn<br /> + <i>Default: false (the axes ARE drawn)</i><br /><br /> + + <a name="chart.axesontop"></a> + <b>chart.axesontop</b><br /> + A minor option, this sets the axes to be redrawn after the chart has been drawn. This is only useful in a certain + set of circumstances - the chart is filled and the line width is small.<br /> + <i>Default: false</i><br /><br /> + + <a name="chart.noendxtick"></a> + <b>chart.noendxtick</b><br /> + When you're combining the Bar and Line charts, you may want to use this property to stop the end X tick from + being drawn.<br /> + <i>Default: false (the end tick IS drawn)</i><br /><br /> + +<a name="zoom"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Zoom</h3> <a name="chart.zoom.mode"></a> +<b>chart.zoom.mode</b><br /> + Can be used to control whether the zoom is in thumbnail or canvas mode. Possible values are: <i>thumbnail</i> and <i>canvas</i>.<br /><i>Default: canvas</i><br /><br /> + <a name="chart.zoom.factor"></a> +<b>chart.zoom.factor</b><br /> + This is the factor that the chart will be zoomed by (bigger values means more zoom)<br /><i>Default: 1.5</i><br /><br /> + <a name="chart.zoom.fade.in"></a> +<b>chart.zoom.fade.in</b><br /> + Whether the zoomed canvas fades in or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /><i>Default: true</i><br /><br /> + <a name="chart.zoom.fade.out"></a> +<b>chart.zoom.fade.out</b><br /> + Whether the zoomed canvas fades out or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /><i>Default: true</i><br /><br /> + <a name="chart.zoom.hdir"></a> +<b>chart.zoom.hdir</b><br /> + The horizontal direction of the zoom. Possible values are: <i>left</i>, <i>center</i>, <i>right</i><br /><i>Default: right</i><br /><br /> + <a name="chart.zoom.vdir"></a> +<b>chart.zoom.vdir</b><br /> + The vertical direction of the zoom. Possible values are: <i>up</i>, <i>center</i>, <i>down</i><br /><i>Default: down</i><br /><br /> + <a name="chart.zoom.delay"></a> +<b>chart.zoom.delay</b><br /> + The delay (in milliseconds) between frames.<br /><i>Default: 50</i><br /><br /> + <a name="chart.zoom.frames"></a> +<b>chart.zoom.frames</b><br /> + The number of frames in the zoom animation.<br /><i>Default: 10</i><br /><br /> + <a name="chart.zoom.shadow"></a> +<b>chart.zoom.shadow</b><br /> + Whether or not the zoomed canvas has a shadow or not.<br /><i>Default: true</i><br /><br /> + <a name="chart.zoom.thumbnail.width"></a> +<b>chart.zoom.thumbnail.width</b><br /> + When the zoom is in thumbnail mode, this is the width (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br /> + <a name="chart.zoom.thumbnail.height"></a> +<b>chart.zoom.thumbnail.height</b><br /> + When the zoom is in thumbnail mode, this is the height (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br /> + <a name="chart.zoom.background"></a> +<b>chart.zoom.background</b><br /> + Defaulting to true, this determines whether the zoom has a dark, semi-opaque background that covers the entire web page.<br /><i>Default: true</i><br /><br /> + +<a name="miscellaneous"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Miscellaneous</h3> + + <a name="chart.tickmarks"></a> + <b>chart.tickmarks</b><br /> + What kind of tickmarks to use on the chart. This can be:<ul><li>dot</li><li>circle</li><li>filledcircle</li><li>endcircle</li><li>square</li><li>endsquare</li><li>filledsquare</li><li>filledendsquare</li><li>tick</li><li>halftick</li><li>endtick</li><li>cross</li><li>borderedcircle (same as dot)</li><li>arrow</li><li>filledarrow</li></ul><p>Note that "arrow" and "filledarrow" look better with a thinner (1 or 2) linewidth setting. Also note that now (10th August 2010) as well as a string, this can be an array of different tickmark styles.<br /> + <i>Default: null</i><br /><br /> + + <a name="chart.tickmarks.dot.color"></a> + <b>chart.tickmarks.dot.color</b><br /> + This is the color of the BORDER around the dot/borderedcircle style tickmarks. <br /> + <i>Default: #fff</i><br /><br /> + + <a name="chart.tickmarks.linewidth"></a> + <b>chart.tickmarks.linewidth</b><br /> + This is the width of the line used when drawing the tickmarks. By default this is the same as the chart.linewidth setting.<br /> + <i>Default: null</i><br /><br /> + + <a name="chart.stepped"></a> + <b>chart.stepped</b><br /> + Draws the line as stepped. Useful for showing stock performance for example.<br /> + <i>Default: false</i><br /><br /> + + <a name="chart.linewidth"></a> + <b>chart.linewidth</b><br /> + The width of the line (ie the actual line on the chart). Note: If your line is stepped and filled, and you don't want a trailing line indicating the last value, you can set this to zero.<br /> + <i>Default: 1</i><br /><br /> + + <a name="chart.variant"></a> + <b>chart.variant</b><br /> + At present this can only be <i>3d</i>, and gives a small 3D effect.<br /> + <i>Default: null</i><br /><br /> + + <a name="chart.animation.unfold.x"></a> + <b>chart.animation.unfold.x</b><br /> + This is used by the Unfold Line chart animation and dictates whether the X value is unfolded.<br /> + <i>Default: false</i><br /><br /> + + <a name="chart.animation.unfold.y"></a> + <b>chart.animation.unfold.y</b><br /> + This is used by the Unfold Line chart animation and dictates whether the Y value is unfolded.<br /> + <i>Default: true</i><br /><br /> + + <a name="chart.animation.unfold.initial"></a> + <b>chart.animation.unfold.initial</b><br /> + This property can be used to set the initial factor for the Unfold animation. Setting this to a value less than one + will cause the line to expand outwards, whilst a value greater than one will cause the line to contract towards + the correct values.<br /> + <i>Default: 2</i> + +</div><!-- /DOCS --><br /><br /> + + <b>chart.chromefix</b><br /> + Since version 6, Chrome has had a shadow bug, which becomes apparent when you use shadow blurring. This value defaults + to true and means that RGraph will skirt the bug with a small fix.<br /><i>Default: true</i><br /><br /> + + <a name="chart.highlight.stroke"></a> + <b>chart.highlight.stroke</b><br /> + If you use tooltips, this controls the colour of the highlight stroke. + <br /><i>Default: black</i><br /><br /> + + <a name="chart.highlight.fill"></a> + <b>chart.highlight.fill</b><br /> + If you use tooltips, this controls the colour of the highlight fill. + <br /><i>Default: rgba(255,255,255,0.5)</i><br /><br /> + + <a name="chart.curvy"></a> + <b>chart.curvy</b><br /> + If you prefer - this draws a more cuvy chart. Because of the curves these charts are not exact, and the inaccuracy increases + with a greater curve factor (controlled by the next property). Being new, this property may not work with all the line chart features + and should be used with caution. + <br /><i>Default: false</i><br /><br /> + + <a name="chart.curvy.factor"></a> + <b>chart.curvy.factor</b><br /> + This controls the severity of the curves when the above property is used. It can be a decimal from 0 (not curvy at all) + to 0.5 (quite curvy). + <br /><i>Default: 0.25</i><br /><br /> + + </div> + <br /><br /> + + + <a name="available.methods"></a> + <h2>Methods</h2> + + <a href="getPoint"></a> + <b>obj.getPoint(e)</b><br /><br /> + This method makes it easier to get hold of which point on the Line chart has been hovered over. It returns an array of: + + <ul> + <li>The chart object</li> + <li>The X coordinate</li> + <li>The Y coordinate</li> + <li>The numerical index of the point. This corresponds (for example) to the tooltips array, and the coordinates array</li> + </ul> + + An example usage is: + + <pre class="code"> +<canvas id="cvs" width="600" height="300">[No canvas support]</canvas> + +<script src="RGraph.common.core.js"></script> +<script src="RGraph.line.js"></script> + +<script> + myGraph = new RGraph.Line('cvs', [10,4,2,4,1]); + myGraph.Set('chart.hmargin', 10); + myGraph.Set('chart.tickmarks', 'endcircle'); + myGraph.Set('chart.labels', ['Fred','John','Kev','Lou','Pete']); + myGraph.Draw(); + + + RGraph.Register(myGraph); + + myGraph.canvas.onmousemove = function (e) + { + RGraph.FixEventObject(e); + + var canvas = e.target; + var context = canvas.getContext('2d'); + var obj = e.target.__object__; + + // This is the new method which simplifies getting coordinates + var point = obj.getPoint(e); + + + if (point) { + + canvas.style.cursor = 'pointer'; + + // Is this the same tooltip as the one (if any) that's already being shown + if (RGraph.Registry.Get('chart.tooltip') && RGraph.Registry.Get('chart.tooltip').__index__ == point[3]) { + return; + } + + // Start afresh + RGraph.Redraw(); + + // Show the tooltip + RGraph.Tooltip(canvas, obj.Get('chart.labels')[point[3]], e.pageX, e.pageY, point[3]); + + // Highlight the point + context.strokeStyle = 'gray'; + context.fillStyle = 'white'; + context.beginPath(); + context.moveTo(point[1], point[2]); + context.arc(point[1], point[2], 2, 0, 6.26, 0); + context.stroke(); + context.fill(); + + return; + } + + canvas.style.cursor = 'default'; + } + + window.onclick = function () + { + RGraph.Redraw(); + } +</script> +</pre> + + <a name="combining.line.bar"></a> + <h2>Combining the Line and Bar charts</h2> + + <p> + You can combine the Bar and Line charts with a bit of magic. It's actually quite easy to do. <a href="combine.html">Find out more here</a>. + In the same vein, you can have Y axes on both the left and right. + </p> + + + <a name="alternative.colors"></a> + <h2>Alternative colors</h2> + + <p> + Instead of a string stipulating the color, each element of the colors array can itself be a two element array, + stipulating the up color, and the down color. To use alternating colors you must also stipulate the alternate property: + </p> + + + <pre class="code"> +myLine.Set('chart.colors.alternate', true); +myLine.Set('chart.colors', ['red', ['blue', 'yellow'], 'green]); +</pre> + + <a name="filled.accumulative"></a> + <h2>Accumulative filled Line charts</h2> + + <p> + The default behaviour of filled Line charts is to "stack" the lines on top of each other. This allows them all + to be totally visible, no matter what (unless a line has a zero value of course). If this is not desired, then there is an + option (<i>chart.filled.accumulative</i> - true/false) to change this behaviour so the lines are plotted "as-is". + Keep in mind that if you set this option to false (ie the Lines are plotted as-is) it may be wiser to use + semi-transparent colors or some parts of data sets (or even entire data sets) may be hidden by others. There's a + comparison of the different modes <a href="line_filled.html">here</a>. + </p> + + <a name="custom.tickmarks"></a> + <h2>Custom tickmarks</h2> + <p> + If none of the available tickmark styles are suitable, you can instead specify a function object that draws the tickmark, + enabling you to draw the tickmark yourself. For example: + </p> + + <pre class="code"> +<script> + line.Set('chart.tickmarks', myTick); + + /** + * The function that is called once per tickmark, to draw it + * + * @param object obj The chart object + * @param array data The entire line data + * @param number value The individual points value + * @param number index The current index, in the data array + * @param number x The X coordinate + * @param number y The Y coordinate + * @param string color The color of the line + * @param number prevX The previous X coordinate + * @param number prevY The previous Y coordinate + */ + function myTick (obj, data, value, index, x, y, color, prevX, prevY) + { + // Draw your custom tick here + } +</script> +</pre> + + <a name="coords2"></a> + <h2>The coords2 array</h2> + + An alternative method of indexing the chart coordinates is available in <i>obj.coords2</i>. With this array, all of the first + lines coordinates are available in <i>obj.coords2[0]</i>, the second lines coordinates in <i>obj.coords2[1]</i> and so on. +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/docs/line_filled.html b/schall/static/RGraph/docs/line_filled.html new file mode 100644 index 0000000..dbc341b --- /dev/null +++ b/schall/static/RGraph/docs/line_filled.html @@ -0,0 +1,142 @@ +<!DOCTYPE html > +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - The Line chart setting chart.filled.accumulative</title> + + <meta name="keywords" content="rgraph html5 canvas chart docs accumulative" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - The Line chart setting chart.filled.accumulative" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js" ></script> + <script src="../libraries/RGraph.line.js" ></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + + <script> + window.onload = function () + { + line = new RGraph.Line('cvs', [4,3,6,7,8,4,9,5,1,3,4,3], [4,5,1,6,2,3,4,5,8,1,9,7]); + line.Set('chart.labels', ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']); + line.Set('chart.linewidth', 5); + line.Set('chart.fillstyle', ['rgba(255,0,0,0.3)', 'rgba(0,0,255,0.3)']); + line.Set('chart.colors', ['red', 'blue']); + line.Set('chart.filled', true); + line.Set('chart.filled.accumulative', true); + line.Set('chart.title', 'A filled line with chart.filled.accumulative=true'); + line.Set('chart.gutter.right', 15); + line.Set('chart.gutter.bottom', 15); + line.Set('chart.background.grid.autofit', true); + line.Draw(); + + line2 = new RGraph.Line('cvs2', [4,3,6,7,8,4,9,5,1,3,4,3], [4,5,1,6,2,3,4,5,8,1,9,7]); + line2.Set('chart.labels', ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']); + line2.Set('chart.linewidth', 5); + line2.Set('chart.fillstyle', ['rgba(255,0,0,0.3)', 'rgba(0,0,255,0.3)']); + line2.Set('chart.colors', ['red', 'blue']); + line2.Set('chart.filled', true); + line2.Set('chart.filled.accumulative', false); + line2.Set('chart.title', 'A filled line with chart.filled.accumulative=false'); + line2.Set('chart.gutter.right', 15); + line2.Set('chart.gutter.bottom', 15); + line2.Set('chart.background.grid.autofit', true); + line2.Draw(); + } + </script> + + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> +</head> +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + <div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="index.html">Documentation</a> + > + The Line chart setting: chart.filled.accumulative + </div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - The Line chart setting: chart.filled.accumulative</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + <p> + This page shows how the setting <i>chart.filled.accumulative</i> affects your charts. The chart on the left has + it enabled (the default), so the lines in effect sit on top of each other. The chart on the right has the setting + set to false so the points are drawn "as-is", ie not accumulatively. The first chart could be more useful if you wish + to see accumulated values, whereas the chart on the right might be better if you want to see individual values. + </p> + + <p> + Keep in mind that if you choose to use a non-accumulative chart the colors may be better as semi-transparent ones, + otherwise parts or all of some lines may get hidden by others. + </p> + + <div style="text-align: center"> + <canvas id="cvs" width="450" height="200">[No canvas support]</canvas> + <canvas id="cvs2" width="450" height="200">[No canvas support]</canvas> + + <p> + <a href="line.html">« Back to the Line chart documentation</a> + </p> + </div> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/docs/meter.html b/schall/static/RGraph/docs/meter.html new file mode 100644 index 0000000..19d994e --- /dev/null +++ b/schall/static/RGraph/docs/meter.html @@ -0,0 +1,448 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - meter charts documentation</title> + + <meta name="keywords" content="rgraph html5 canvas docs meter chart" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Documentation about Meter charts" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.jpg"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> + +</head> +<body> + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + <div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="index.html">Documentation</a> + > + Meter charts + </div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - Meter charts documentation</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + <p> + These are Meter charts. Similar to half the Odometer. The difference is purely visual, but may well be more suited to + a control panel type application. + </p> + + <p> + The example file is <a href="../examples/meter.html">here</a>. + </p> + + <pre class="code"> +<script> + window.onload = function () + { + var meter = new RGraph.Meter('myCanvas', 50, 100, 60); + meter.Set('chart.contextmenu', [ + ['Show palette', RGraph.Showpalette], + ['Clear annotations', function () {RGraph.Clear(meter.canvas); meter.Draw();}], + null, + ['Cancel', function () {}] + ]); + meter.Set('chart.annotatable', true); + meter.Set('chart.label.position', 'inside'); + meter.Set('chart.title', 'A sample measurement'); + meter.Set('chart.title.vpos', 0.5); + meter.Set('chart.units.post', 'k'); + meter.Set('chart.red.start', 0); + meter.Set('chart.red.end', 3); + meterSet('chart.yellow.start', 3); + meter.Set('chart.yellow.end', 6); + meter.Set('chart.green.start', 6); + meter.Set('chart.green.end', 10); + meter.Draw(); + } +</script> +</pre> + <h2>Properties</h2> + + <p> + You can use these properties to control how the Meter apears. You can set them by using the Set() method. Eg: + </p> + + <p> + <b>myMeter.Set('name', 'value');</b> + </p> + + <ul> + <li><a href="#margins">Margins</a></li> + <li><a href="#colors">Colors</a></li> + <li><a href="#labels and text">Labels and text</a></li> + <li><a href="#titles">Titles</a></li> + <li><a href="#scale">Scale</a></li> + <li><a href="#interactive features">Interactive features</a></li> + <li><a href="#shadow">Shadow</a></li> + <li><a href="#zoom">Zoom</a></li> + <li><a href="#miscellaneous">Miscellaneous</a></li> + </ul> + +<a name="margins"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Margins</h3> + + + + <a name="chart.gutter.left"></a> + <b>chart.gutter.left</b><br /> + The left gutter of the chart, (the gutter is where the labels and title are)).<br /> + <i>Default: 25</i><br /><br /> + + <a name="chart.gutter.right"></a> + <b>chart.gutter.right</b><br /> + The right gutter of the chart, (the gutter is where the labels and title are).<br /> + <i>Default: 25</i><br /><br /> + + <a name="chart.gutter.top"></a> + <b>chart.gutter.top</b><br /> + The top gutter of the chart, (the gutter is where the labels and title are).<br /> + <i>Default: 25</i><br /><br /> + + <a name="chart.gutter.bottom"></a> + <b>chart.gutter.bottom</b><br /> + The bottom gutter of the chart, (the gutter is where the labels and title are).<br /> + <i>Default: 25</i><br /><br /> + +<a name="colors"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Colors</h3> + + <a name="chart.strokestyle"></a> + <b>chart.strokestyle</b><br /> + The color of the bits separating the segements. By setting this to white you can get a separation effect.<br /> + <i>Default: null</i><br /><br /> + + <a name="chart.border.color"></a> + <b>chart.border.color</b><br /> + The color of the outline (including tickmarks).<br /> + <i>Default: black</i><br /><br /> + + <a name="chart.green.start"></a> +<b>chart.green.start</b><br /> + The value that the green area should begin at. <br /><i>Default: 35% of the maximum value</i><br /><br /> + <a name="chart.green.end"></a> +<b>chart.green.end</b><br /> + The value that the green area should end at. <br /><i>Default: The maximum value</i><br /><br /> + <a name="chart.green.color"></a> +<b>chart.green.color</b><br /> + The color of the green area, (can be any color).. <br /><i>Default: #207A20</i><br /><br /> + <a name="chart.yellow.start"></a> +<b>chart.yellow.start</b><br /> + The value that the yellow area should begin at. <br /><i>Default: 10% of the maximum value</i><br /><br /> + <a name="chart.yellow.end"></a> +<b>chart.yellow.end</b><br /> + The value that the yellow area should end at. <br /><i>Default: 35% of the maximum value</i><br /><br /> + <a name="chart.green.color"></a> +<b>chart.green.color</b><br /> + The color of the yellow area, (can be any color).. <br /><i>Default: #D0AC41</i><br /><br /> + <a name="chart.red.start"></a> +<b>chart.red.start</b><br /> + The value that the red area should begin at. <br /><i>Default: The minimum value</i><br /><br /> + <a name="chart.red.end"></a> +<b>chart.red.end</b><br /> + The value that the red area should end at. <br /><i>Default: 10% of the maximum value</i><br /><br /> + <a name="chart.red.color"></a> +<b>chart.red.color</b><br /> + The color of the red area, (can be any color).. <br /><i>Default: #9E1E1E</i><br /><br /> + +<a name="labels and text"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Labels and text</h3> <a name="chart.text.color"></a> + + <b>chart.text.color</b><br /> + The color of the labels. <br /> + <i>Default: black</i><br /><br /> + + <a name="chart.text.size"></a> +<b>chart.text.size</b><br /> + The size (in points) of the labels. <br /><i>Default: 10</i><br /><br /> + + <a name="chart.text.font"></a> + <b>chart.text.font</b><br /> + The font used to render the text.<br /> + <i>Default: Verdana</i><br /><br /> + + <a name="chart.value.text"></a> + <b>chart.value.text</b><br /> + This option controls whether the value of the Meter is shown in text.<br /> + <i>Default: false</i><br /><br /> + + <a name="chart.value.text.decimals"></a> + <b>chart.value.text.decimals</b><br /> + The amount of decimals shown in the text label.<br /> + <i>Default: 0</i><br /><br /> + + <a name="chart.value.text.units.pre"></a> + <b>chart.value.text.units.pre</b><br /> + The units (before the value) shown in the text label.<br /> + <i>Default: None (an empty string)</i><br /><br /> + + <a name="chart.value.text.units.post"></a> + <b>chart.value.text.units.post</b><br /> + The units (after the value) shown in the text label.<br /> + <i>Default: None (an empty string)</i><br /><br /> + + <a name="chart.labels"></a> + <b>chart.labels</b><br /> + Whether the labels are shown or not.<br /> + <i>Default: true</i><br /><br /> + +<a name="titles"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Titles</h3> + +<a name="chart.title"></a> +<b>chart.title</b><br /> + The title of the chart, if any. <br /><i>Default: null</i><br /><br /> + + + +<a name="chart.title.font"></a> +<b>chart.title.font</b><br /> +The font that the title is rendered in. If not specified the chart.text.font setting is used (usually Verdana)<br /> +<i>Default: null</i><br /><br /> + +<a name="chart.title.size"></a> +<b>chart.title.size</b><br /> +The size of the title. If not specified the size is usually 2pt bigger than the chart.text.size setting.<br /> +<i>Default: null</i><br /><br /> + +<a name="chart.title.bold"></a> +<b>chart.title.bold</b><br /> +Whather the title is bold or not.<br /> +<i>Default: true</i><br /><br /> + +<a name="chart.title.background"></a> +<b>chart.title.background</b><br /> +The background color (if any) for the title.<br /> +<i>Default: null</i><br /><br /> + + <a name="chart.title.color"></a> +<b>chart.title.color</b><br /> + The color of the title.<br /> <i>Default: black</i><br /><br /> + <a name="chart.title.hpos"></a> +<b>chart.title.hpos</b><br /> + This allows you to completely override the horizontal positioning of the title. It should be a number between 0 and 1, and is multiplied with the whole width of the canvas and then used as the horizontal position. <br /><i>Default: null</i><br /><br /> + <a name="chart.title.vpos"></a> +<b>chart.title.vpos</b><br /> + This allows you to completely override the vertical positioning of the title. It should be a number between 0 and 1, and is multiplied with the gutter and then used as the vertical position. It can be useful if you need to have a large gutter.<br /><i>Default: null</i><br /><br /> + + <a name="scale"></a> + <h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Scale</h3> + + <a name="chart.units.pre"></a> + <b>chart.units.pre</b><br /> + The units that the labels are measured in. This string is displayed BEFORE the actual number, allowing you to + specify values such as "$50".<br /> + <i>Default: none</i><br /><br /> + + <a name="chart.units.post"></a> + <b>chart.units.post</b><br /> + The units that the labels are measured in. This string is displayed AFTER the actual number, allowing you to specify + values such as "50ms".<br /> + <i>Default: none</i><br /><br /> + + <a name="chart.scale.decimals"></a> + <b>chart.scale.decimals</b><br /> + The number of decimal places to display for the values.<br /> + <i>Default: 0</i><br /><br /> + + <a name="interactive features"></a> + <h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Interactive features</h3> <a name="chart.contextmenu"></a> +<b>chart.contextmenu</b><br /> + An array of context menu items. More information on context menus is <a href="context.html">here</a>.<br /><i>Default: [] (An empty array)</i><br /><br /> + + + <a name="chart.resizable"></a> + <b>chart.resizable</b><br /> + Defaulting to false, this determines whether your chart will be resizable. Because of the numerous event handlers this has to install code on, This feature is unlikely to work with other dynamic features (the context menu is fine however).<br /> + <i>Default: false</i><br /><br /> + + + <a name="chart.resize.handle.background"></a> + <b>chart.resize.handle.background</b><br /> + With this you can specify the background color for the resize handle. If you're adjusting the position of the + handle then you may need this to make the handle stand out more.<br /> + <i>Default: null</i><br /><br /> + + + <a name="chart.annotatable"></a> +<b>chart.annotatable</b><br /> + Whether annotations are enabled for the chart (ie you can draw on the chart interactively).<br /><i>Default: false</i><br /><br /> + <a name="chart.annotate.color"></a> +<b>chart.annotate.color</b><br /> + If you do not allow the use of the palette, then this will be the only color allowed for annotations.<br /><i>Default: black</i><br /><br /> +<a name="shadow"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Shadow</h3> <a name="chart.shadow"></a> +<b>chart.shadow</b><br /> + If true a shadow will be applied to the meter.<br /><i>Default: false</i><br /><br /> + <a name="chart.shadow.color"></a> +<b>chart.shadow.color</b><br /> + The color of the shadow. <br /><i>Default: rgba(0,0,0,0.5)</i><br /><br /> + <a name="chart.shadow.offsetx"></a> +<b>chart.shadow.offsetx</b><br /> + The X offset in pixels for the shadow.<br /><i>Default: 3</i><br /><br /> + <a name="chart.shadow.offsety"></a> +<b>chart.shadow.offsety</b><br /> + The Y offset in pixels for the shadow.<br /><i>Default: 3</i><br /><br /> + <a name="chart.shadow.blur"></a> +<b>chart.shadow.blur</b><br /> + The severity of the shadow blurring effect.<br /><i>Default: 3</i><br /><br /> +<a name="zoom"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Zoom</h3> <a name="chart.zoom.mode"></a> +<b>chart.zoom.mode</b><br /> + Can be used to control whether the zoom is in thumbnail or canvas mode. Possible values are: <i>thumbnail</i> and <i>canvas</i>.<br /><i>Default: canvas</i><br /><br /> + <a name="chart.zoom.factor"></a> +<b>chart.zoom.factor</b><br /> + This is the factor that the chart will be zoomed by (bigger values means more zoom)<br /><i>Default: 1.5</i><br /><br /> + <a name="chart.zoom.fade.in"></a> +<b>chart.zoom.fade.in</b><br /> + Whether the zoomed canvas fades in or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /><i>Default: true</i><br /><br /> + <a name="chart.zoom.fade.out"></a> +<b>chart.zoom.fade.out</b><br /> + Whether the zoomed canvas fades out or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /><i>Default: true</i><br /><br /> + <a name="chart.zoom.hdir"></a> +<b>chart.zoom.hdir</b><br /> + The horizontal direction of the zoom. Possible values are: <i>left</i>, <i>center</i>, <i>right</i><br /><i>Default: right</i><br /><br /> + <a name="chart.zoom.vdir"></a> +<b>chart.zoom.vdir</b><br /> + The vertical direction of the zoom. Possible values are: <i>up</i>, <i>center</i>, <i>down</i><br /><i>Default: down</i><br /><br /> + <a name="chart.zoom.delay"></a> +<b>chart.zoom.delay</b><br /> + The delay (in milliseconds) between frames.<br /><i>Default: 50</i><br /><br /> + <a name="chart.zoom.frames"></a> +<b>chart.zoom.frames</b><br /> + The number of frames in the zoom animation.<br /><i>Default: 10</i><br /><br /> + <a name="chart.zoom.shadow"></a> +<b>chart.zoom.shadow</b><br /> + Whether or not the zoomed canvas has a shadow or not.<br /><i>Default: true</i><br /><br /> + <a name="chart.zoom.thumbnail.width"></a> +<b>chart.zoom.thumbnail.width</b><br /> + When the zoom is in thumbnail mode, this is the width (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br /> + <a name="chart.zoom.thumbnail.height"></a> +<b>chart.zoom.thumbnail.height</b><br /> + When the zoom is in thumbnail mode, this is the height (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br /> + <a name="chart.zoom.background"></a> +<b>chart.zoom.background</b><br /> + Defaulting to true, this determines whether the zoom has a dark, semi-opaque background that covers the entire web page.<br /><i>Default: true</i><br /><br /> + +<a name="miscellaneous"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Miscellaneous</h3> + <a name="chart.linewidth"></a> + <b>chart.linewidth</b><br /> + The width of the outline of the Meter. <br /><i>Default: 2</i><br /><br /> + + <a name="chart.linewidth.segments"></a> + <b>chart.linewidth.segments</b><br /> + The linewidth of the lines separating the segments.<br /> + <i>Default: 1</i><br /><br /> + + <a name="chart.tickmarks.small.num"></a> + <b>chart.tickmarks.small.num</b><br /> + This controls the number of small tickmarks.<br /> + <i>Default: 100</i><br /><br /> + + <a name="chart.tickmarks.big.num"></a> + <b>chart.tickmarks.big.num</b><br /> + This controls the number of large tickmarks.<br /> + <i>Default: 10</i><br /><br /> + + <a name="chart.tickmarks.small.color"></a> + <b>chart.tickmarks.small.color</b><br /> + This sets the color of the small tickmarks.<br /> + <i>Default: #bbb</i><br /><br /> + + <a name="chart.tickmarks.big.color"></a> + <b>chart.tickmarks.big.color</b><br /> + This sets the color of the large tickmarks.<br /> + <i>Default: black</i><br /><br /> + + <a name="chart.border"></a> + <b>chart.border</b><br /> + Whether the outline is drawn.<br /> + <i>Default: true</i><br /><br /> + + <a name="chart.segment.radius.start"></a> + <b>chart.segment.radius.start</b><br /> + Instead of the segments going from the center point outwards, you can use this to specify a start point of the + coloured segments.<br /> + <i>Default: null</i><br /><br /> + + <a name="chart.needle.radius"></a> + <b>chart.needle.radius</b><br /> + This can be used to stipulate the radius of the pointer.<br /> + <i>Default: null</i><br /><br /> + + <a name="chart.needle.linewidth"></a> + <b>chart.needle.linewidth</b><br /> + This can be used to specify the linewidth used when drawing the needle.<br /> + <i>Default: null</i><br /><br /> + + <a name="chart.needle.tail"></a> + <b>chart.needle.tail</b><br /> + If true the needle will have a small tail.<br /> + <i>Default: false</i><br /><br /> +</div> + +<br /><br /> +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/docs/misc.html b/schall/static/RGraph/docs/misc.html new file mode 100644 index 0000000..9711912 --- /dev/null +++ b/schall/static/RGraph/docs/misc.html @@ -0,0 +1,843 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - Miscellaneous</title> + + <meta name="keywords" content="rgraph html5 canvas misc docs" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Miscellaneous documentation" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.jpg"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js" ></script> + <script src="../libraries/RGraph.common.tooltips.js" ></script> + <script src="../libraries/RGraph.line.js" ></script> + <script src="../libraries/RGraph.scatter.js" ></script> + + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> + +</head> +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + <div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="index.html">Documentation</a> + > + Miscellaneous documentation + </div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - Miscellaneous documentation</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + <ul> + <li><a href="#fallback.content">Canvas fallback content and visually impaired users</a></li> + <li><a href="#limits">Upper and lower limits for horizontal bars</a></li> + <li><a href="#canvas.width.height">Setting the canvas width and height</a></li> + <li><a href="#canvas.coordinates">The canvas coordinate system</a></li> + <li><a href="#older.browsers">RGraph and older browsers</a></li> + <li><a href="#msie">RGraph and Microsoft Internet Explorer</a></li> + <li><a href="#debugging">Debugging tips</a></li> + <li><a href="#inspecting">Inspecting an RGraph chart</a></li> + <li><a href="#context.menus">Double click context menus</a></li> + <li><a href="#event.handlers">Adding your own event handlers</a></li> + <li><a href="#crlf">Carriage returns and newlines in labels</a></li> + <li><a href="#character.set">Character set issues</a></li> + <li><a href="#rgraph.identify">How to identify an RGraph object</a></li> + <li><a href="#static.y.axis">Static Y axis</a></li> + <li><a href="#reducing.white.space">Reducing white space</a></li> + <li><a href="#in.graph">In-graph labels</a></li> + <li><a href="#shorthand.ingraph.labels">Shorthand for in-graph labels</a></li> + <li><a href="#dom2.events">DOM2 Event handlers</a></li> + <li><a href="#data.types">Data types</a></li> + <li><a href="#create.your.own">Creating your own chart type</a></li> + <li><a href="#world.map">World map</a></li> + <li><a href="#text">Adding text to your charts</a></li> + <li><a href="#crosshairs">Crosshairs</a></li> + <li><a href="#known.issues">Known issues</a></li> + </ul> + + <a name="fallback.content"></a> + <br /> <br /> <br /> + <h4>Canvas fallback content and visually impaired users</h4> + + <p> + When using the canvas element you should be aware of the accessibility of your charts, for example where vision limited users are + concerned. Screen readers, for example, may not be able to convert a chart into something that is reasonable, so you should + consider + doing this yourself, possibly using the canvas fallback content (ie the content in between the canvas tags). A possible example + would be to put a table of data inside the canvas tag that the chart on the canvas represents. Doing this goes a long way + towards making the data available to everyone. You might also wish to consider using the <a href="zoom.html">full canvas + zoom</a> or the <a href="resizing.html">resizing feature</a> to enable people to enlarge the chart. + </p> + + <a name="limits"></a> + <br /> <br /> <br /> + <h4>Upper and lower limits for horizontal bars</h4> + + <p> + If you don't wish to specify an upper or lower limit for horizontal bars, and you just want them to extend to the upper or lower + limits of the chart, whatever they may be, you can specify null for the value determining how far they extend. For cases where + the X axis is in the middle and you're specifying a negative start value, or you want the bar to extend all the way to the + bottom, you can simply specify an arbitrary length (eg -999999). Eg: + </p> + + <pre class="code">myBar.Set('chart.background.hbars', [[0, null, 'green'], [0,-999999,'red']]);</pre> + + <a name="canvas.width.height"></a> + <br /> <br /> <br /> + <h4>Setting the canvas width and height</h4> + + <p> + To set the canvas width and height you must use the HTML width/height attributes and NOT CSS. If you do use CSS, the canvas + will be scaled, and not enlarged, to fit the new width/height. Eg: + </p> + + <pre class="code"><canvas id="myCanvas" width="200" height="100">[No canvas support]<canvas></pre> + + <p> + <b>Note:</b> + When you resize the canvas using CSS, not only will it be scaled (not enlarged), but it will also NOT be cleared. You can + see this effect on the <a href="animation.html">animation page</a> with the jQuery animation example. + </p> + + <a name="canvas.coordinates"></a> + <br /> <br /> <br /> + <h4>The canvas coordinate system</h4> + <p> + The canvas coordinate system starts in the top left of the canvas (at [0,0] - the X value increasing as you go right + and the Y value as you go down), much like the CSS coordinates for the entire page. The + gutter goes around the canvas (ie top/bottom/left/right - where the labels and titles are placed), and the actual chart + sits in the middle. + </p> + + <a name="older.browsers"></a> + <br /> <br /> <br /> + <h4>RGraph and older browsers</h4> + + <p> + Older versions of browsers are supported (assuming they have canvas support), however, if they don't support the canvas text + or shadow APIs these will naturally be unavailable. The charts will still be drawn, though without shadows or text. + </p> + + <a name="msie"></a> + <br /> <br /> <br /> + <h4>RGraph and Microsoft Internet Explorer</h4> + + <p> + You can now use RGraph with Internet Explorer 8 in conjunction with ExCanvas, (which brings a degree of <canvas> support to MSIE). + Bear in mind though that shadows are not available and thus are simulated. Microsoft Internet Explorer 9 has native <canvas> + support. + </p> + + <a name="debugging"></a> + <br /> <br /> <br /> + + <h4>Debugging tips</h4> + + <p> + If you're having a hard time debugging your chart, try these: + </p> + + <ul> + <li>Ensure you have only one chart on the page</li> + <li>Make sure you have disabled your web browsers cache (the Firefox <a href="https://addons.mozilla.org/en-US/firefox/addon/60" target="_blank">Web Developer toolbar</a> can do this for Firefox)</li> + <li> + Try using <a href="http://www.getfirebug.com" target="_blank">Firebug</a> for Firefox or the + Webkit developer tools for Google Chrome (CTRL_SHIFT+J) and Safari (CTRL+ALT+C). There's a + video about using the Chrome developer tools + <a href="http://www.youtube.com/watch?v=N8SS-rUEZPg&feature=youtu.be" target="_blank">here</a>. These are very useful + tools that make development much easier. + </li> + <li>Reduce the page to the bare minimum.</li> + <li>Start with a very basic chart and build it up slowly.</li> + </ul> + + + + <a name="inspecting"></a> + <br /> <br /> <br /> + <h4>Inspecting an RGraph chart</h4> + + <p> + To help when debugging your RGraph charts and canvas elements, you can use you browsers built in debugging tools. + An example is the WebKit developer tools which are available in Google Chrome and Apple Safari. There is a screenshot + of these tools (in docked mode) <a href="../images/introspection.png" target="_blank"><b>here</b></a>. To view these + tools in Google Chrome press CTRL+SHIFT+J. Inspect the canvas, and then the associated object can be found via + the <i>__object__</i> property. + </p> + + + <a name="context.menus"></a> + <br /> <br /> <br /> + <h4>Double click context menus</h4> + + <p> + Windows Opera, Windows Safari, Mac Safari and Mac Firefox all attach the context menu to the double click event (left mouse button), + not the right, in order to make it more reliable. + </p> + + + <a name="event.handlers"></a> + <br /> <br /> <br /> + <h4>Adding your own event handlers</h4> + + <p> + Because each RGraph object exposes the canvas element (the same as what you get from <i>document.getElementById()</i>), + you can use normal procedures to add your own event handlers. Eg If you wanted to add your own onclick handler you could + do this: + </p> + + <pre class="code"> +<script> + var myBar = new RGraph.Bar('cvs', [7,4,2,6,3,4,8]); + myBar.Draw(); + + myBar.canvas.onclick = function () + { + } +</script> +</pre> + <p> + But what if, for example, you're using an RGraph feature which + uses the event handler that you need? In this case you can use the standard DOM2 method <i>addEventListener()</i>. This will add + your new event handler without replacing any existing one (ie the one installed by RGraph). For example: + </p> + + <pre class="code"> +<script> + var myBar = new RGraph.Bar('cvs', [7,4,2,6,3,4,8]); + myBar.Draw(); + + function myFunc () + { + } + + myBar.canvas.addEventListener('click', myFunc, false) +</script> +</pre> + + + <a name="crlf"></a> + <br /> <br /> <br /> + <h4>Carriage returns and newlines in labels</h4> + + <p> + You can put carriage returns in your labels by using the string <i>\r\n</i>. This means your labels will span multiple lines. + Like so: + </p> + + <pre class="code">myBar.Set('chart.labels', 'John\r\n(Winner!)', ...)</pre> + + + <a name="character.set"></a> + <br /> <br /> <br /> + <h4>Character set issues</h4> + + <p> + If you're seeing strange, unrecognised characters in your text labels or titles, you may need to specify the correct + character set that the browser should use. In PHP you can do this with the <i>header()</i> function (which, as the + name suggests, sends a HTTP header): + </p> + + <pre class="code"><?php + header("Content-Type: text/html; charset=ISO-8859-1"); +?></pre> + + <p> + If you use Apache, you could use the <i>header</i> directive, though this may be overridden by other directives, + eg <i>AddDefaultCharset</i>. + </p> + + <a name="rgraph.identify"></a> + <br /> <br /> <br /> + <h4>How to identify an RGraph object</h4> + + <p> + Because identity can sometimes be a tricky affair, there are a few RGraph properties that you can use to check whether an object + is an RGraph object: + </p> + + <ul> + <li><i>obj.isRGraph</i> - This is a boolean that you can use to clearly identify an RGraph object.</li> + <li><i>obj.type</i> - This identifies the type of an RGraph object. It is a string which contains a one word description of the objects chart type, eg bar/line/pie.</li> + </ul> + + + <!-------------------------------------------------------------------------------------------------------------> + + + + + + + <a name="static.y.axis"></a> + <br /> <br /> <br /> + <h4>Static Y axis</h4> + + <!-- + The HTML and script necessary for a chart with a static Y axis. The libraries are included at the top of the page + in the <HEAD> + --> + <div style="position: relative; float: right; margin-right: 10px"> + <!-- The width here is set further down the page in script --> + <canvas id="axes" width="0" height="170" style="position: absolute; top: 0; left: 0; z-index: 100"></canvas> + <div style="width: 600px; overflow: auto"> + <canvas id="cvs" width="1000" height="200"></canvas> + </div> + </div> + + <script> + ShowGraphOne = function () + { + /** + * This is the script that draws the chart + */ + line = new RGraph.Line('cvs', [3,15,22,26,28,24,22,25,23,24,26,23,24,25,27,28,29,26,23,22,24,21,24,25]); + line.Set('chart.noaxes', true); // We draw the Y axis ourselves further down the page + line.Set('chart.gutter.top', 25); + line.Set('chart.gutter.bottom', 35); + line.Set('chart.gutter.left', 50); + line.Set('chart.hmargin', 5); + line.Set('chart.linewidth', 3); + line.Set('chart.shadow', true); + line.Set('chart.shadow.offsetx', 0); + line.Set('chart.shadow.offsety', 0); + line.Set('chart.shadow.blur', 15); + line.Set('chart.shadow.color', 'red'); + line.Set('chart.text.angle', 15); + line.Set('chart.tooltips', [ + 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December', + 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' + ]); + line.Set('chart.labels', [ + 'Jan `09','Feb 09', 'Mar 09','Apr 09','May 09','Jun 09','Jul 09','Aug 09','Sep 09','Oct 09','Nov 09', 'Dec 09', + 'Jan 10', 'Feb 10', 'Mar 10','Apr 10','May 10','Jun 10','Jul 10','Aug 10','Sep 10','Oct 10','Nov 10', 'Dec 10' + ]); + line.Draw(); + + + + /** + * And this is the script that draws the left axis, on the other canvas (that doesn't move) + */ + ca = document.getElementById("axes") + co = ca.getContext('2d'); + + + /** + * This sets the smaller canvas to cover the whole of the charts left gutter + */ + ca.width = line.Get('chart.gutter.left') + 1; + + + RGraph.Clear(ca, 'white'); + + + /** + * This draws the static axis + */ + + co.beginPath(); + co.moveTo(line.Get('chart.gutter.left'), line.Get('chart.gutter.top')); + co.lineTo(line.Get('chart.gutter.left'), line.canvas.height - line.Get('chart.gutter.bottom')); + + // Draw the tickmarks on the axis + var numTicks = 10; + for (var i=0; i<=numTicks; ++i) { + co.moveTo(line.Get('chart.gutter.left'), line.Get('chart.gutter.top') + (((line.canvas.height - line.Get('chart.gutter.top') - line.Get('chart.gutter.bottom')) / numTicks) * i)); + co.lineTo(line.Get('chart.gutter.left') - 3, line.Get('chart.gutter.top') + (((line.canvas.height - line.Get('chart.gutter.top') - line.Get('chart.gutter.bottom')) / numTicks) * i)); + } + + co.stroke(); + + + + /** + * This draws the labels for the static axis + */ + co.beginPath(); + var color = 'black'; + var size = 10; + + for (var i=0; i<5; ++i) { + co.fillStyle = color; + co.textAlign = 'right'; + co.textBaseline = 'middle'; + var h = line.canvas.height - line.Get('chart.gutter.top') - line.Get('chart.gutter.bottom'); + + RGraph.Text(co, 'Verdana', size, line.Get('chart.gutter.left') - 4, line.Get('chart.gutter.top') + (h * (i/5)), line.max - (line.max * (i/5))); + } + + // Draw zero + RGraph.Text(co, + 'Verdana', + size, + line.Get('chart.gutter.left') - 4, + 165, + '0'); + co.fill(); + } + </script> + + A static Y axis is useful if you have a wide chart but limited space. Whilst not part of the RGraph libraries itself, it can be + achieved with a little HTML, like the chart shown. The HTML and the script to achieve this is shown below. + It involves placing an extra canvas above the chart with the Y axis drawn on it. This canvas doesn't + move when the main canvas scrolls left and right. + + <p /> + + <b>Note:</b> Because Firefox doesn't support the event.offsetX and event.offsetY properties and they have to be simulated, + scrolling in conjunction with tooltips in this case and this browser doesn't work. + + <pre class="code"> +<div style="position: relative; float: right; margin-right: 10px; margin-top: 10px"> + <!-- The width here is set further down the page in script --> + <canvas id="axes" width="0" height="200" style="position: absolute; top: 0; left: 0; z-index: 100"></canvas> + <div style="width: 600px; overflow: auto"> + <canvas id="cvs" width="1000" height="200"></canvas> + </div> +</div> + +<script> + window.onload = function () + { + /** + * This is the script that draws the chart + */ + line = new RGraph.Line('cvs', [3,15,22,26,28,24,22,25,23,24,26,23,24,25,27,28,29,26,23,22,24,21,24,25]); + line.Set('chart.noaxes', true); // We draw the Y axis ourselves + line.Set('chart.gutter.top', 25); + line.Set('chart.gutter.bottom', 35); + line.Set('chart.gutter.left', 50); + line.Set('chart.hmargin', 5); + line.Set('chart.linewidth', 3); + line.Set('chart.shadow', true); + line.Set('chart.shadow.offsetx', 0); + line.Set('chart.shadow.offsety', 0); + line.Set('chart.shadow.blur', 15); + line.Set('chart.shadow.color', 'red'); + line.Set('chart.text.angle', 15); + line.Set('chart.tooltips', [ + 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December', + 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' + ]); + line.Set('chart.labels', [ + '','Feb 09', 'Mar 09','Apr 09','May 09','Jun 09','Jul 09','Aug 09','Sep 09','Oct 09','Nov 09', 'Dec 09', + 'Jan 10', 'Feb 10', 'Mar 10','Apr 10','May 10','Jun 10','Jul 10','Aug 10','Sep 10','Oct 10','Nov 10', 'Dec 10' + ]); + line.Draw(); + + + + /** + * And this is the script that draws the left axis, on the other canvas (that doesn't move) + */ + ca = document.getElementById("axes") + co = ca.getContext('2d'); + + + /** + * This sets the smaller canvas to cover the whole of the charts left gutter + */ + ca.width = line.Get('chart.gutter.left') + 1; + + + RGraph.Clear(ca, 'white'); + + + /** + * This draws the static axis + */ + co.beginPath(); + co.moveTo(line.Get('chart.gutter.left'), line.Get('chart.gutter.top')); + co.lineTo(line.Get('chart.gutter.left'), line.canvas.height - line.Get('chart.gutter.bottom')); + + // Draw the tickmarks on the axis + var numTicks = 10; + for (var i=0; i<=numTicks; ++i) { + co.moveTo(line.Get('chart.gutter.left'), line.Get('chart.gutter.top') + (((ca.height - line.Get('chart.gutter.top') - line.Get('chart.gutter.bottom')) / numTicks) * i)); + co.lineTo(line.Get('chart.gutter.left') - 3, line.Get('chart.gutter.top') + (((ca.height - line.Get('chart.gutter.top') - line.Get('chart.gutter.bottom')) / numTicks) * i)); + } + + co.stroke(); + + + + /** + * This draws the labels for the static axis + */ + co.beginPath(); + var color = 'black'; + var size = 10; + + for (var i=0; i<5; ++i) { + co.fillStyle = color; + co.textAlign = 'right'; + co.textBaseline = 'middle'; + var h = line.canvas.height - line.Get('chart.gutter.top') - line.Get('chart.gutter.bottom'); + + RGraph.Text(co, + 'Verdana', + size, + line.Get('chart.gutter.left') - 4, + line.Get('chart.gutter.top') + (h * (i/5)), + line.max - (line.max * (i/5))); + } + co.fill(); + } +</script> +</pre> + <!-------------------------------------------------------------------------------------------------------------> + + + <br clear="all" /> + <br clear="all" /> + + + <!-- This chart is an example of how you can eliminate the gutter white space by translating before you draw the chart. --> + + <a name="reducing.white.space"></a> + <br /> <br /> <br /> + <h4>Reducing white space</h4> + + <canvas id="myc" width="600" height="250" style="float: right; border: dashed 1px gray; margin-right: 10px"></canvas> + + <script> + ShowGraphTwo = function () + { + + var arg1 = [73, 65, 76, 75, 69, 73, 54, 61, 89, 77]; + var arg2 = [264, 240, 240, 256, 200, 208, 240, 216, 248, 240] + + var line1 = new RGraph.Line('myc', arg1 , arg2); + line1.Set('chart.colors', ['red', 'silver']); + line1.Set('chart.background.barcolor1', 'white'); + line1.Set('chart.background.barcolor2', 'white'); + line1.Set('chart.labels', ['Jan 2000', + 'Feb 2001', + 'Mar 2002', + 'Apr 2003', + 'May 2004', + 'Jun 2005', + 'Jul 2006', + 'Aug 2007', + 'Sep 2008', + 'Oct 2009']) + line1.Set('chart.filled', true); + line1.Set('chart.fillstyle', ['#fcc', '#cfc']); + line1.Set('chart.gutter.top', 5); + line1.Set('chart.gutter.bottom', 55); + line1.Set('chart.gutter.left', 55); + line1.Set('chart.gutter.right', 35); + line1.Set('chart.background.grid', true); + line1.Set('chart.ymax', 365) + line1.Set('chart.yaxispos', 'right'); + line1.Set('chart.title.xaxis', 'Month'); + line1.Set('chart.title.yaxis', 'Temperature'); + line1.Set('chart.title.xaxis.pos', -0.3); + line1.Set('chart.title.yaxis.pos', 0.5); + line1.Set('chart.text.angle', 30); + line1.Set('chart.tooltips', [ + 'January 2000','February 2001','March 2002','April 2003','May 2004','June 2005','July 2006','August 2007','September 2008','October 2009', + 'January 2000','February 2001','March 2002','April 2003','May 2004','June 2005','July 2006','August 2007','September 2008','October 2009' + ]); + line1.Draw(); + } + + window.onload = function () + { + ShowGraphOne(); + ShowGraphTwo(); + } + </script> + + <p> + New in June 2011 is the ability to set the gutters independently. This removes the necessity to translate + and adjust the coordinates to get more space and is far more straight-forward. The new properties are: + + <ul> + <li>chart.gutter.left</li> + <li>chart.gutter.right</li> + <li>chart.gutter.top</li> + <li>chart.gutter.bottom</li> + </ul> + + You can read more about this change <a href="gutters.html"><b>here</b></a>. + </p> + + + <br clear="all" /> + + + <a name="in.graph"></a> + <br /> <br /> <br /> + <h4>In-graph labels</h4> + + <p> + As well as an array of strings, like this: + </p> + + <pre class="code">obj.Set('chart.labels.ingraph', ['First label','Second label']);</pre> + + <p> + The string can also be an array, consisting of color and placement information, like this: + </p> + + <pre class="code">obj.Set('chart.labels.ingraph', ['First label',<span style="color: green">['Second label', 'red', 'yellow', -1, 50]</span> ]);</pre> + + + <p> + You can read more information about this <a href="ingraph.html">here</a>. + </p> + + <a name="shorthand.ingraph.labels"></a> + <br /> <br /> <br /> + <h4>Shorthand for in-graph labels</h4> + <p> + Instead of providing a full array of <i>null</i> elements for in-graph labels which may get a little unwieldy, + you can instead specify an integer that specifies how many elements to skip. Like this: + </p> + + <pre class="code">line.Set('chart.labels.ingraph', [6, 'July', 3, 'November']);</pre> + + <br clear="all" /> + <br clear="all" /> + + <a name="dom2.events"></a> + <br /> <br /> <br /> + <h4>DOM2 Event handlers</h4> + <p> + All the charts have now (1st October 2010) been converted to DOM2 for tooltips event registration. This allows them to + be far more co-operative if you're using events. Tooltips will not be compatible with MSIE8 - the charts will still be + drawn, albeit without tooltips. + </p> + + + + <br clear="all" /> + + + + + <a name="data.types"></a> + <br /> <br /> <br /> + <h4>Data types</h4> + <p> + If your data values aren't the correct type - ie numbers - it can cause problems. Pay particular attention to this + when you're getting your data from data sources which may be classed as strings, such as JSON or AJAX requests. + </p> + + + + + <a name="create.your.own"></a> + <br /> <br /> <br /> + <h4>Creating your own chart type</h4> + <p> + If you wish to create your own chart type, there is a skeleton file + <a href="../libraries/RGraph.skeleton.js" target="_blank"><b>here</b></a> that you can use as a starting point. + This file contains the bare bones of an RGraph object, such as the .Get() and .Set() methods, as well as examples + of common properties. + </p> + + + <a name="world.map"></a> + <br /> <br /> <br /> + <h4>World map</h4> + <p> + There is no function in RGraph to do mapping, either of the World or a smaller region. If this is what you want then you + may be interested in this HTML5 canvas based mapping system: + <a href="http://joncom.be/code/excanvas-world-map/" target="_blank">http://joncom.be/code/excanvas-world-map/</a> + </p> + + + <a name="text"></a> + <br /> <br /> <br /> + <h4>Adding text to your charts</h4> + <p> + You can add arbitrary text to your charts by using the RGraph API. For example you could use this code after the call to .Draw(): + </p> + + <pre class="code"> +function DrawSubTitle (obj) +{ + var context = obj.context; + + context.beginPath(); + context.fillStyle = 'gray'; + RGraph.Text(context, + 'Verdana', + 7, + obj.canvas.width / 2, + obj.Get('chart.gutter.top') - 6, + 'The subtitle', + 'center', + 'center'); + context.fill(); +} + +DrawSubTitle(myLine); +</pre> + + <a name="crosshairs"></a> + <br /> <br /> <br /> + <h4>Crosshairs</h4> + + <div style="width: 600px; float: right"> + <canvas id="scatter_crosshairs" width="600" height="250">[No canvas support]</canvas> + <input type="text" style="margin-left: 25px; width: 550px" id="crosshairs.out" /> + </div> + + <script> + var data = [[84,68],[45,65],[185,54],[222,62],[354,45],[153,21]]; + + var scatter = new RGraph.Scatter('scatter_crosshairs', data); + scatter.Set('chart.xmax', 365); + scatter.Set('chart.labels', ['Q1','Q2','Q3','Q4']); + + /** + * Configure the crosshairs + */ + scatter.Set('chart.crosshairs', true); + scatter.Set('chart.crosshairs.coords', true); + scatter.Set('chart.crosshairs.coords.labels.x', 'Day'); + scatter.Set('chart.crosshairs.coords.labels.y', 'Amount'); + scatter.Set('chart.crosshairs.coords.fixed', false); + scatter.Set('chart.crosshairs.color', 'gray'); + scatter.Set('chart.crosshairs.linewidth', 5); + + scatter.Draw(); + + /** + * Now add the custom event listener that updates the text box with the coordinates + */ + function myFunc (obj) + { + var x = obj.canvas.__crosshairs_x__; + var y = obj.canvas.__crosshairs_y__; + + document.getElementById("crosshairs.out").value = x + ',' + y; + } + RGraph.AddCustomEventListener(scatter, 'oncrosshairs', myFunc); + </script> + + <p> + Some charts type have the ability to use crosshairs. The supported charts are: + </p> + + <ul> + <li>Bar charts</li> + <li>Line charts</li> + <li>Scatter charts</li> + <li>Waterfall charts</li> + </ul> + + <p> + There are various options that control the crosshairs, though because some apply to the readout, they are only applicable to + the Scatter chart. The crosshairs can be customised by stipulating the linewidth, the color and whether only the horizontal, + vertical or both lines are shown. + </p> + + <h4>Crosshairs and the Scatter chart</h4> + <p> + Because the X axis is scaled, the Scatter chart has the extra ability of having a coordinates readout when + the crosshairs are in use. This is shown in the example above. The appropriate properties are: + </p> + + <ul> + <li>obj.canvas.__crosshairs_x__</li> + <li>obj.canvas.__crosshairs_y__</li> + <li>obj.canvas.__crosshairs_labels__ (this is the coordinates readout)</li> + </ul> + + <p> + In the above example the coordinates are put in the text input by using the custom event <i>oncrosshairs</i>. This is as + follows: + </p> + + <pre class="code"> +function myFunc (obj) +{ + var x = obj.canvas.__crosshairs_x__; + var y = obj.canvas.__crosshairs_y__; + + document.getElementById("crosshairs.out").value = x + ',' + y; +} +RGraph.AddCustomEventListener(scatter, 'oncrosshairs', myFunc); +</pre> + + <a name="known.issues"></a> + <br /> <br /> <br /> + <h4>Known issues</h4> + + <p> + There's a few known issues documented <a href="issues.html">here</a> + </p> + + + <p /> +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/docs/msie.html b/schall/static/RGraph/docs/msie.html new file mode 100644 index 0000000..4a45c62 --- /dev/null +++ b/schall/static/RGraph/docs/msie.html @@ -0,0 +1,237 @@ +<!DOCTYPE html > +<html> +<head> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - Microsoft Internet Explorer support</title> + + <meta name="keywords" content="rgraph html5 canvas docs msie" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Documentation about Microsoft Internet Explorer (MSIE) support" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.jpg"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js" ></script> + <script src="../libraries/RGraph.common.context.js" ></script> + <script src="../libraries/RGraph.line.js" ></script> + <script src="../libraries/RGraph.modaldialog.js" ></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + + <style> + div#msie9 { + background-color: #dfd; + padding: 5px; + border: 2px dashed green; + } + </style> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> + + +</head> +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + <div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="index.html">Documentation</a> + > + MSIE support + </div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - Microsoft Internet Explorer (MSIE) support</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + <p /> + + <div id="msie9"> + <b>Microsoft Internet Explorer 9</b> + + <p> + Starting from preview 3, Internet Explorer 9 has support for canvas, including the text and shadow APIs. It also + benefits from hardware acceleration, and quick rendering times. + </p> + </div> + + <br /> + + <canvas id="myLine" width="600" height="250" style="float: right">[No canvas support]</canvas> + + <script> + + window.onload = function () + { + var data1 = [4,3,6,8,4,2,1,4,9,8,7,8]; + var data2 = [1,2,4,2,1,3,5,6,6,5,3,5]; + + // No "var" as the variable has to be global + line = new RGraph.Line('myLine', data1, data2); + line.Set('chart.title', 'Sales for Acme Inc. (context menu)'); + line.Set('chart.title.vpos', 0.5); + line.Set('chart.colors', ['red', 'black']); + line.Set('chart.linewidth', 5); + + // Odd, but this seems to fix an strange MSIE bug where the text is truncated + line.Set('chart.units.post', '% .'); + + line.Set('chart.yaxispos', 'right'); + line.Set('chart.key', ['2007', '2008']); + line.Set('chart.key.background', 'white'); + line.Set('chart.noaxes', true); + line.Set('chart.gutter.left', 5); + line.Set('chart.gutter.right', 35); + line.Set('chart.hmargin', 10); + line.Set('chart.background.barcolor1', 'white'); + line.Set('chart.background.barcolor2', 'white'); + line.Set('chart.shadow', true); + line.Set('chart.background.grid.autofit', true); + line.Set('chart.contextmenu', [['Show dialog', function () {ModalDialog.Show('myDialog', 300);}], ['Cancel', function () {}]]); + line.Draw(); + } + </script> + + <ul> + <li><a href="#introduction">Introduction</a></li> + <li><a href="#getting">Getting hold of ExCanvas</a></li> + <li><a href="#caveats">Caveats</a></li> + <li><a href="#frame">Google Chrome Frame</a></li> + <li><a href="#dynamic.canvas">Using a dynamically created canvas</a></li> + </ul> + + <a name="introduction"></a> + <h4>Introduction</h4> + + <p> + As of December 2009 RGraph now works partially with Internet Explorer without Google Chrome Frame. + Charts are rendered as VML. You are still recommended to use + <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a> to get the best results. + The interactive features are unlikely to work correctly. RGraph only works with Microsoft + Internet Explorer 8. + </p> + + <p> + Thanks go to everyone involved with the <a href="http://code.google.com/p/explorercanvas/" target="_blank" rel="nofollow">ExCanvas project</a> for providing the ExCanvas library. + </p> + + <a name="getting"></a> + <h4>Getting hold of ExCanvas</h4> + + <p> + Google ExCanvas is distributed with RGraph in the "excanvas" directory. There is a minified gzip compressed version, along + with the original. + </p> + + <a name="caveats"></a> + <h4>Caveats</h4> + + <ul> + <li>The interactive features of RGraph are unlikely to work correctly with MSIE 8.</li> + <li>Shadows are now available (on some chart types), albeit without blurring.</li> + <li>You must reference the Javascript libraries in the documents <head>.</li> + <li>You must use the window.onload event to create your chart.</li> + <li>If your page is large, there may be a slight pause before the window.onload event fires and thus creates the chart.</li> + <li>Changing the font that text is shown in is not available.</li> + </ul> + + <a name="frame"></a> + <h4>Google Chrome Frame</h4> + <p> + Instead of ExCanvas you can also use Google Chrome Frame. This basically turns Internet Explorer into Google Chrome, and fully + supports RGraph. Since it involves a plugin installation, this is a better option if you can fully influence the users PC. If you + can fully influence the users PC however, a better option might be to simply use one of the browsers with native + support. + </p> + + + <br /> + + + <a name="dynamic.canvas"></a> + <h4>Using a dynamically created canvas</h4> + <p> + If you're creating your canvas dynamically there is an extra step that you must perform to allow it to be recognised by + ExCanvas: + </p> + + <pre class="code"> +var canvas = document.createElement('CANVAS'); + canvas.id = 'cvs'; + canvas.width = 600; + canvas.height = 250; + canvas.style.border = '1px dashed black'; +document.body.appendChild(canvas); + +<span style="color: green">G_vmlCanvasManager.initElement(canvas);</span> +</pre> + + + + <br /> + <br /> + <br /> + + <!-- This is the ModdalDialog --> + <div id="myDialog" style="display: none"> + <div style="text-align: center; font-family: Arial"> + <h4>Please wait...</h4> + <span style="font-size: 8pt">(Nothing is going to happen, this is simply an example <a href="" onclick="ModalDialog.Close(); return false">Close</a>)</span> + </div> + </div> +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/docs/odo.html b/schall/static/RGraph/docs/odo.html new file mode 100644 index 0000000..1fa7f71 --- /dev/null +++ b/schall/static/RGraph/docs/odo.html @@ -0,0 +1,420 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - Odometer charts documentation</title> + + <meta name="keywords" content="rgraph html5 canvas docs odometer charts" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Documentation about Odometer charts" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.jpg"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js" ></script> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> + +</head> +<body> + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + <div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="index.html">Documentation</a> + > + Odometer charts + </div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - Odometer charts documentation</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + <p> + The example file is <a href="../examples/odo.html">here</a>. + </p> + + <pre class="code"> +<script> + window.onload = function () + { + // ID, MINIMUM, MAXIMUM, INDICATED VALUE + var odo = new RGraph.Odometer('myOdo', 0, 100, 18); + + odo.Set('chart.green.max', 75); + odo.Set('chart.red.min', 90); + odo.Set('chart.label.area', 50); + odo.Set('chart.needle.thickness', 2); + + odo.Draw(); + } +</script> +</pre> + + <!-- + <div class="warning"> + <p>Note</p> + As of 20th March 2010, how you specify the start and end values has changed. The chart.green.start, chart.green.end, chart.yellow.start, + chart.yellow.end, chart.red.start and chart.red.end have all been replaced by chart.green.max and chart.red.min. Now the + green area always starts at zero and goes to chart.green.max, and the red area starts (by default - you can customise this by using + chart.red.min) at 90% of the maximum value and goes to the maximum value. The yellow area is between the two. + </div> + --> + + <h2>Properties</h2> + + <p> + You can use these properties to control how the Odometer apears. You can set these properties using the <b>Set()</b> method. + </p> + + <ul> + <li><a href="#chart configuration">Chart configuration</a></li> + <li><a href="#margins">Margins</a></li> + <li><a href="#colors">Colors</a></li> + <li><a href="#labels and text">Labels and text</a></li> + <li><a href="#needle">Needle</a></li> + <li><a href="#title">Title</a></li> + <li><a href="#shadow">Shadow</a></li> + <li><a href="#interactive features">Interactive features</a></li> + <li><a href="#zoom">Zoom</a></li><li><a href="#scale">Scale</a></li> + </ul> + + +<a name="chart configuration"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Chart configuration</h3> + + <a name="chart.value.text"></a> + <b>chart.value.text</b><br /> + Controls whether the value is indicated as a text label in the center of the dial.<br /><i>Default: false</i><br /><br /> + + <a name="chart.value.units.pre"></a> + <b>chart.value.units.pre</b><br /> + The pre units used on the textual value.<br /><i>Default: nothing (An empty string)</i><br /><br /> + + <a name="chart.value.units.post"></a> + <b>chart.value.units.post</b><br /> + The post units used on the textual value.<br /><i>Default: nothing (An empty string)</i><br /><br /> + + <a name="chart.border"></a> + <b>chart.border</b><br /> + This controls the gray border of the Odometer.<br /><i>Default: false</i><br /><br /> + + <a name="chart.tickmarks.highlighted"></a> + <b>chart.tickmarks.highlighted</b><br /> + This controls whether the tickmarks are highlighted in red/yellow/green.<br /><i>Default: false</i><br /><br /> + + <a name="chart.zerostart"></a> + <b>chart.zerostart</b><br /> + If you want the top value on your chart to be zero instead of the maximum value, set this to true.<br /><i>Default: false</i><br /><br /> + +<a name="margins"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Margins</h3> + + + + + <a name="chart.gutter.left"></a> + <b>chart.gutter.left</b><br /> + The left gutter of the chart, (the gutter is where the labels and title are)).<br /> + <i>Default: 25</i><br /><br /> + + <a name="chart.gutter.right"></a> + <b>chart.gutter.right</b><br /> + The right gutter of the chart, (the gutter is where the labels and title are).<br /> + <i>Default: 25</i><br /><br /> + + <a name="chart.gutter.top"></a> + <b>chart.gutter.top</b><br /> + The top gutter of the chart, (the gutter is where the labels and title are).<br /> + <i>Default: 25</i><br /><br /> + + <a name="chart.gutter.bottom"></a> + <b>chart.gutter.bottom</b><br /> + The bottom gutter of the chart, (the gutter is where the labels and title are).<br /> + <i>Default: 25</i><br /><br /> + +<a name="colors"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Colors</h3> + + <a name="chart.border.color1"></a> + <b>chart.border.color1</b><br /> + This is the first color used in the gradient of the outer border of the chart (if enabled).<br /> + <i>Default: #BEBCB0</i><br /><br /> + + <a name="chart.border.color2"></a> + <b>chart.border.color2</b><br /> + This is the second/middle color used in the gradient of the outer border of the chart (if enabled).<br /> + <i>Default: #F0EFEA</i><br /><br /> + + <a name="chart.border.color3"></a> + <b>chart.border.color3</b><br /> + This is the third color used in the gradient of the outer border of the chart (if enabled).<br /> + <i>Default: #BEBCB0</i><br /><br /> + + <a name="chart.green.max"></a> + <b>chart.green.max</b><br /> + This is the point at which the green area ends.<br /> + <i>Default: 75% of the maximum value</i><br /><br /> + + <a name="chart.red.min"></a> + <b>chart.red.min</b><br /> + This is the point at which the red area starts. The yellow area is between the green and red areas.<br /> + <i>Default: 90% of the maximum value</i><br /><br /> + + <a name="chart.green.color"></a> + <b>chart.green.color</b><br /> + This option has two roles. If <i>chart.green.solid</i> is true, this is the actual color, whereas if + <i>chart.green.solid</i> is false (the default), it's used as one of the gradient colors.<br /> + <i>Default: green</i><br /><br /> + + <a name="chart.yellow.color"></a> + <b>chart.yellow.color</b><br /> + This option has two roles. If <i>chart.yellow.solid</i> is true, this is the actual color, whereas if + <i>chart.yellow.solid</i> is false (the default), it's used as one of the gradient colors.<br /> + <i>Default: yellow</i><br /><br /> + + <a name="chart.red.color"></a> + <b>chart.red.color</b><br /> + This option has two roles. If <i>chart.red.solid</i> is true, this is the actual color, whereas if + <i>chart.red.solid</i> is false (the default), it's used as one of the gradient colors.<br /> + <i>Default: red</i><br /><br /> + + <a name="chart.green.solid"></a> + <b>chart.green.solid</b><br /> + If <i>true</i> then the associated <i>chart.green.color</i> option is used as the actual color, not part of a gradient<br /> + <i>Default: false</i><br /><br /> + + <a name="chart.yellow.solid"></a> + <b>chart.yellow.solid</b><br /> + If <i>true</i> then the associated <i>chart.yellow.color</i> option is used as the actual color, not part of a gradient<br /> + <i>Default: false</i><br /><br /> + + <a name="chart.red.solid"></a> + <b>chart.red.solid</b><br /> + If <i>true</i> then the associated <i>chart.red.color</i> option is used as the actual color, not part of a gradient<br /> + <i>Default: false</i><br /><br /> + +<a name="labels and text"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Labels and text</h3> <a name="chart.labels"></a> +<b>chart.labels</b><br /> + Instead of using computed numbers, which uses the maximum value, you can specify the Odometer to use textual labels instead, with this option.<br /> <i>Default: null</i><br /><br /> + <a name="chart.label.area"></a> +<b>chart.label.area</b><br /> + The width of the area that labels are put in. <br /><i>Default: 35</i><br /><br /> + <a name="chart.text.size"></a> +<b>chart.text.size</b><br /> + The size of the text (in points). <br /><i>Default: 10</i><br /><br /> + <a name="chart.text.font"></a> +<b>chart.text.font</b><br /> + The font used to render the text.<br /><i>Default: Verdana</i><br /><br /> + <a name="chart.text.color"></a> +<b>chart.text.color</b><br /> + The color of the labels. <br /><i>Default: black</i><br /><br /> +<a name="needle"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Needle</h3> <a name="chart.needle.width"></a> +<b>chart.needle.width</b><br /> + How thick the needle is. <br /><i>Default: 2</i><br /><br /> + <a name="chart.needle.color"></a> +<b>chart.needle.color</b><br /> + The color that is applied to the needle. <br /><i>Default: black</i><br /><br /> + <a name="chart.needle.head"></a> +<b>chart.needle.head</b><br /> + This controls whether the arrow head on the end of the needle is displayed. <br /><i>Default: true</i><br /><br /> + + <a name="chart.needle.type"></a> + <b>chart.needle.type</b><br /> + This determines which type of needle is used. It can be <i>pointer</i> or <i>triangle</i>. <br /> + <i>Default: pointer</i><br /><br /> + + <a name="chart.needle.triangle.border"></a> + <b>chart.needle.triangle.border</b><br /> + This controls the colour of the border for the pointer. If you don't want it you could set it to be transparent - + <i>rgba(0,0,0,0)</i>.<br /> + <i>Default: #aaa</i><br /><br /> + + <a name="chart.needle.extra"></a> + <b>chart.needle.extra</b><br /> + With this you can specify a number of extra pointers that will be drawn on the Odometer. An example would be a meter that's used to show upload and download data. An example use:<pre class="code">odo.Set('chart.needle.extra', [[16, 'red'], [24, 'blue']]);</pre><br /> + <i>Default: [] (An empty array)</i><br /><br /> + +<a name="title"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Title</h3> + +<a name="chart.title"></a> +<b>chart.title</b><br /> + The title text. <br /><i>Default: no title set</i><br /><br /> + + + +<a name="chart.title.font"></a> +<b>chart.title.font</b><br /> +The font that the title is rendered in. If not specified the chart.text.font setting is used (usually Verdana)<br /> +<i>Default: null</i><br /><br /> + +<a name="chart.title.size"></a> +<b>chart.title.size</b><br /> +The size of the title. If not specified the size is usually 2pt bigger than the chart.text.size setting.<br /> +<i>Default: null</i><br /><br /> + +<a name="chart.title.bold"></a> +<b>chart.title.bold</b><br /> +Whather the title is bold or not.<br /> +<i>Default: true</i><br /><br /> + +<a name="chart.title.background"></a> +<b>chart.title.background</b><br /> +The background color (if any) for the title.<br /> +<i>Default: null</i><br /><br /> + + <a name="chart.title.color"></a> +<b>chart.title.color</b><br /> + The color of the title.<br /> <i>Default: black</i><br /><br /> + <a name="chart.title.hpos"></a> +<b>chart.title.hpos</b><br /> + This allows you to completely override the horizontal positioning of the title. It should be a number between 0 and 1, and is multiplied with the whole width of the canvas and then used as the horizontal position. <br /><i>Default: null</i><br /><br /> + <a name="chart.title.vpos"></a> +<b>chart.title.vpos</b><br /> + This allows you to completely override the vertical positioning of the title. It should be a number between 0 and 1, and is multiplied with the gutter and then used as the vertical position. It can be useful if you need to have a large gutter.<br /><i>Default: null</i><br /><br /> +<a name="shadow"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Shadow</h3> <a name="chart.shadow.inner"></a> +<b>chart.shadow.inner</b><br /> + Whether a drop shadow is applied to the inner circle of the Odometer<br /><i>Default: false</i><br /><br /> + <a name="chart.shadow.outer"></a> +<b>chart.shadow.outer</b><br /> + Whether a drop shadow is applied to the whole Odometer.<br /><i>Default: false</i><br /><br /> +<a name="interactive features"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Interactive features</h3> <a name="chart.contextmenu"></a> +<b>chart.contextmenu</b><br /> + An array of context menu items. More information on context menus is <a href="context.html">here</a>.<br /><i>Default: [] (An empty array)</i><br /><br /> + <a name="chart.annotatable"></a> +<b>chart.annotatable</b><br /> + Whether annotations are enabled for the chart (ie you can draw on the chart interactively.<br /><i>Default: false</i><br /><br /> + <a name="chart.annotate.color"></a> +<b>chart.annotate.color</b><br /> + If you do not allow the use of the palette, then this will be the only colour allowed for annotations.<br /><i>Default: black</i><br /><br /> + + + + <a name="chart.resizable"></a> + <b>chart.resizable</b><br /> + Defaulting to false, this determines whether your chart will be resizable. Because of the numerous event handlers this has to install code on, This feature is unlikely to work with other dynamic features (the context menu is fine however).<br /> + <i>Default: false</i><br /><br /> + + + <a name="chart.resize.handle.background"></a> + <b>chart.resize.handle.background</b><br /> + With this you can specify the background color for the resize handle. If you're adjusting the position of the + handle then you may need this to make the handle stand out more.<br /> + <i>Default: null</i><br /><br /> + + +<a name="zoom"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Zoom</h3> <a name="chart.zoom.mode"></a> +<b>chart.zoom.mode</b><br /> + Can be used to control whether the zoom is in thumbnail or canvas mode. Possible values are: <i>thumbnail</i> and <i>canvas</i>.<br /><i>Default: canvas</i><br /><br /> + <a name="chart.zoom.factor"></a> +<b>chart.zoom.factor</b><br /> + This is the factor that the chart will be zoomed by (bigger values means more zoom)<br /><i>Default: 1.5</i><br /><br /> + <a name="chart.zoom.fade.in"></a> +<b>chart.zoom.fade.in</b><br /> + Whether the zoomed canvas fades in or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /><i>Default: true</i><br /><br /> + <a name="chart.zoom.fade.out"></a> +<b>chart.zoom.fade.out</b><br /> + Whether the zoomed canvas fades out or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /><i>Default: true</i><br /><br /> + <a name="chart.zoom.hdir"></a> +<b>chart.zoom.hdir</b><br /> + The horizontal direction of the zoom. Possible values are: <i>left</i>, <i>center</i>, <i>right</i><br /><i>Default: right</i><br /><br /> + <a name="chart.zoom.vdir"></a> +<b>chart.zoom.vdir</b><br /> + The vertical direction of the zoom. Possible values are: <i>up</i>, <i>center</i>, <i>down</i><br /><i>Default: down</i><br /><br /> + <a name="chart.zoom.delay"></a> +<b>chart.zoom.delay</b><br /> + The delay (in milliseconds) between frames.<br /><i>Default: 50</i><br /><br /> + <a name="chart.zoom.frames"></a> +<b>chart.zoom.frames</b><br /> + The number of frames in the zoom animation.<br /><i>Default: 10</i><br /><br /> + <a name="chart.zoom.shadow"></a> +<b>chart.zoom.shadow</b><br /> + Whether or not the zoomed canvas has a shadow or not.<br /><i>Default: true</i><br /><br /> + <a name="chart.zoom.thumbnail.width"></a> +<b>chart.zoom.thumbnail.width</b><br /> + When the zoom is in thumbnail mode, this is the width (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br /> + <a name="chart.zoom.thumbnail.height"></a> +<b>chart.zoom.thumbnail.height</b><br /> + When the zoom is in thumbnail mode, this is the height (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br /> + <a name="chart.zoom.background"></a> +<b>chart.zoom.background</b><br /> + Defaulting to true, this determines whether the zoom has a dark, semi-opaque background that covers the entire web page.<br /><i>Default: true</i><br /><br /> +<a name="scale"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Scale</h3> + + <a name="chart.units.pre"></a> + <b>chart.units.pre</b><br /> + The units that the value is measured in. This string is displayed BEFORE the actual number, allowing you to specify values such as "$50" and is only used if chart.value.text is <i>true</i>.<br /><i>Default: none</i><br /><br /> + + <a name="chart.units.post"></a> + <b>chart.units.post</b><br /> + The units that the value is measured in. This string is displayed AFTER the actual number, allowing you to specify values such as "50ms" and is only used if chart.value.text is <i>true</i>.<br /><i>Default: none</i><br /><br /> + + <a name="chart.scale.decimals"></a> +<b>chart.scale.decimals</b><br /> + The number of decimal places to display for the labels.<br /><i>Default: 0</i><br /><br /> +</div><!-- /DOCS --><br /><br /> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/docs/pie.html b/schall/static/RGraph/docs/pie.html new file mode 100644 index 0000000..bd1ffc9 --- /dev/null +++ b/schall/static/RGraph/docs/pie.html @@ -0,0 +1,567 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - Pie charts documentation</title> + + <meta name="keywords" content="rgraph html5 canvas chart docs pie charts" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Documentation about the Pie charts" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.jpg"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> + +</head> +<body> + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + <div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="index.html">Documentation</a> + > + Pie charts + </div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - Pie charts documentation</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + <p> + The pie chart can be used, for example, to represent something that is akin to percentages. ie A set of data that + should be taken as part of a whole. + </p> + + <p> + The example file is <a href="../examples/pie.html">here</a>. + </p> + + <pre class="code"> +<script> + window.onload = function () + { + var data = [564,155,499,611,322]; + + var pie = new RGraph.Pie('myPie', data); + pie.Set('chart.labels', ['Abc', 'Def', 'Ghi', 'Jkl', 'Mno']); + pie.Set('chart.linewidth', 5); + pie.Set('chart.stroke', '#fff'); + pie.Draw(); + } +</script> +</pre> + + <a name="available.properties"></a> + <ul> + <li><a href="#available.properties">Properties</a></li> + <li><a href="#available.methods">Methods</a></li> + </ul> + + <h2>Properties</h2> + + <p> + You can use these properties to control how the pie chart looks. You can set them by using the Set() method. Eg: + </p> + + <p> + <b>myPie.Set('name', 'value');</b> + </p> + + <ul> + <li><a href="#margins">Margins</a></li> + <li><a href="#colors">Colors</a></li> + <li><a href="#labels and text">Labels and text</a></li> + <li><a href="#titles">Titles</a></li> + <li><a href="#shadows">Shadows</a></li> + <li><a href="#interactive features">Interactive features</a></li> + <li><a href="#key">Key</a></li> + <li><a href="#zoom">Zoom</a></li> + <!-- <li><a href="#scale">Scale</a></li> --> + <li><a href="#miscellaneous">Miscellaneous</a></li> + </ul> + + +<a name="margins"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Margins</h3> + + + + <a name="chart.gutter.left"></a> + <b>chart.gutter.left</b><br /> + The left gutter of the chart, (the gutter is where the labels and title are)).<br /> + <i>Default: 25</i><br /><br /> + + <a name="chart.gutter.right"></a> + <b>chart.gutter.right</b><br /> + The right gutter of the chart, (the gutter is where the labels and title are).<br /> + <i>Default: 25</i><br /><br /> + + <a name="chart.gutter.top"></a> + <b>chart.gutter.top</b><br /> + The top gutter of the chart, (the gutter is where the labels and title are).<br /> + <i>Default: 25</i><br /><br /> + + <a name="chart.gutter.bottom"></a> + <b>chart.gutter.bottom</b><br /> + The bottom gutter of the chart, (the gutter is where the labels and title are).<br /> + <i>Default: 25</i><br /><br /> + +<a name="colors"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Colors</h3> <a name="chart.colors"></a> +<b>chart.colors</b><br /> + Colors to be used for the pie segments. <br /><i>Default: ['rgb(255,0,0)', '#ddd', 'rgb(0,255,0)', 'rgb(0,0,255)', 'rgb(255,255,0)', 'rgb(0,255,255)', 'red', 'pink', 'black', 'white']</i><br /><br /> + <a name="chart.strokestyle"></a> +<b>chart.strokestyle</b><br /> + The color of the seperating lines. By setting this to your background color, and setting the linewidth to approx. 5, it will make the pie chart look "exploded". <br /><i>Default: #999</i><br /><br /> +<a name="labels and text"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Labels and text</h3> <a name="chart.text.size"></a> +<b>chart.text.size</b><br /> + The size of the text (in points). <br /><i>Default: 10</i><br /><br /> + <a name="chart.text.font"></a> +<b>chart.text.font</b><br /> + The font used to render the text.<br /><i>Default: Verdana</i><br /><br /> + <a name="chart.text.color"></a> +<b>chart.text.color</b><br /> + The color of the labels. <br /><i>Default: black</i><br /><br /> + <a name="chart.labels"></a> +<b>chart.labels</b><br /> + An array of labels to be used for the chart. <br /><i>Default: [] (an empty array)</i><br /><br /> + + <a name="chart.labels.sticks"></a> + <b>chart.labels.sticks</b><br /> + Stipulates that sticks for the labels are shown.<br /> + <i>Default: false</i><br /><br /> + + <a name="chart.labels.sticks.color"></a> + <b>chart.labels.sticks.color</b><br /> + Sets the color of the label sticks.<br /> + <i>Default: #aaa</i><br /><br /> + + <a name="chart.labels.sticks.length"></a> + <b>chart.labels.sticks.length</b><br /> + Sets the length of the label sticks.<br /> + <i>Default: 7</i><br /><br /> + +<a name="titles"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Titles</h3> + +<a name="chart.title"></a> +<b>chart.title</b><br /> + The title of the pie chart. <br /><i>Default: none</i><br /><br /> + + + +<a name="chart.title.font"></a> +<b>chart.title.font</b><br /> +The font that the title is rendered in. If not specified the chart.text.font setting is used (usually Verdana)<br /> +<i>Default: null</i><br /><br /> + +<a name="chart.title.size"></a> +<b>chart.title.size</b><br /> +The size of the title. If not specified the size is usually 2pt bigger than the chart.text.size setting.<br /> +<i>Default: null</i><br /><br /> + +<a name="chart.title.bold"></a> +<b>chart.title.bold</b><br /> +Whather the title is bold or not.<br /> +<i>Default: true</i><br /><br /> + +<a name="chart.title.background"></a> +<b>chart.title.background</b><br /> +The background color (if any) for the title.<br /> +<i>Default: null</i><br /><br /> + + <a name="chart.title.color"></a> +<b>chart.title.color</b><br /> + The color of the title.<br /> <i>Default: black</i><br /><br /> + <a name="chart.title.hpos"></a> +<b>chart.title.hpos</b><br /> + This allows you to completely override the horizontal positioning of the title. It should be a number between 0 and 1, and is multiplied with the whole width of the canvas and then used as the horizontal position. <br /><i>Default: null</i><br /><br /> + <a name="chart.title.vpos"></a> +<b>chart.title.vpos</b><br /> + This allows you to completely override the vertical positioning of the title. It should be a number between 0 and 1, and is multiplied with the gutter and then used as the vertical position. It can be useful if you need to have a large gutter.<br /><i>Default: null</i><br /><br /> +<a name="shadows"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Shadows</h3> <a name="chart.shadow"></a> +<b>chart.shadow</b><br /> + Whether a simple shadow effect is applied. <br /><i>Default: false</i><br /><br /> + <a name="chart.shadow.color"></a> +<b>chart.shadow.color</b><br /> + The color of the shadow. <br /> <i>Default: rgba(0,0,0,0.5)</i><br /><br /> + <a name="chart.shadow.blur"></a> +<b>chart.shadow.blur</b><br /> + The severity of the shadow blurring effect. <br /> <i>Default: 3</i><br /><br /> + <a name="chart.shadow.offsetx"></a> +<b>chart.shadow.offsetx</b><br /> + The X offset of the shadow.<br /><i>Default: 3</i><br /><br /> + <a name="chart.shadow.offsety"></a> +<b>chart.shadow.offsety</b><br /> + The Y offset of the shadow.<br /><i>Default: 3</i><br /><br /> +<a name="interactive features"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Interactive features</h3> + + <a name="chart.tooltips"></a> + <b>chart.tooltips</b><br /> + An array of tooltips, starting from the middle right (ie east) axis, and going clockwise sequentially.<br /> + <i>Default: [] (An empty array)</i><br /><br /> + + <a name="chart.tooltips.event"></a> + <b>chart.tooltips.event</b><br /> + This can be <i>onclick</i> or <i>onmousemove</i> and determines which event is used for tooltips.<br /> + <i>Default: onclick</i><br /><br /> + + <a name="chart.tooltips.effect"></a> + <b>chart.tooltips.effect</b><br /> + The animated effect used for showing tooltips. Can be either <i>fade</i> or <i>expand</i>.<br /> + <i>Default: fade</i><br /><br /> + + <a name="chart.tooltips.css.class"></a> + <b>chart.tooltips.css.class</b><br /> + This is the name of the CSS class the chart uses.<br /> + <i>Default: RGraph_tooltip</i><br /><br /> + + <a name="chart.tooltips.override"></a> + <b>chart.tooltips.override</b><br /> + If you wish to handle showing tooltips yourself, this should be a function object which does just that. There's more + information on the <a href="tooltips.html">tooltips documentation page</a><br /> + <i>Default: null</i><br /><br /> + + + <a name="chart.contextmenu"></a> +<b>chart.contextmenu</b><br /> + An array of context menu items. More information on context menus is <a href="context.html">here</a>.<br /><i>Default: [] (An empty array)</i><br /><br /> + <a name="chart.annotatable"></a> +<b>chart.annotatable</b><br /> + Whether annotations are enabled for the chart (ie you can draw on the chart interactively.<br /><i>Default: false</i><br /><br /> + <a name="chart.annotate.color"></a> +<b>chart.annotate.color</b><br /> + If you do not allow the use of the palette, then this will be the only colour allowed for annotations.<br /><i>Default: black</i><br /><br /> + + + + <a name="chart.resizable"></a> + <b>chart.resizable</b><br /> + Defaulting to false, this determines whether your chart will be resizable. Because of the numerous event handlers this has to install code on, This feature is unlikely to work with other dynamic features (the context menu is fine however).<br /> + <i>Default: false</i><br /><br /> + + + <a name="chart.resize.handle.background"></a> + <b>chart.resize.handle.background</b><br /> + With this you can specify the background color for the resize handle. If you're adjusting the position of the + handle then you may need this to make the handle stand out more.<br /> + <i>Default: null</i><br /><br /> + + + + + + <a name="key"></a> + <h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Key</h3> + + <a name="chart.key"></a> + <b>chart.key</b><br /> + An array of key information. <br /> + <i>Default: [] (An empty array)</i><br /><br /> + + <a name="chart.key.background"></a> + <b>chart.key.background</b><br /> + The color of the key background. Typically white, you could set this to something like rgba(255,255,255,0.7) to allow people to see things behind it.<br> + <i>Default: white</i><br /><br /> + + <a name="chart.key.halign"></a> + <b>chart.key.halign</b><br /> + Instead of specifying the exact x/y coordinates, you can use this property to simply specify whether the key hould be + aligned <i>left</i> or <i>right</i>.<br /> + <i>Default: right</i><br /><br /> + + <a name="chart.key.position"></a> + <b>chart.key.position</b><br /> + Determines the position of the key.Either <b>graph</b> (default), or <b>gutter</b>.<br /> + <i>Default: graph</i><br /><br /> + + <b>chart.key.position.x</b><br /> + This allows you to specify a specific X coordinate for the key.<br /> + <i>Default: null</i><br /><br /> + + <b>chart.key.position.y</b><br /> + This allows you to specify a specific Y coordinate for the key.<br /> + <i>Default: null</i><br /><br /> + + <b>chart.key.position.gutter.boxed</b><br /> + If you have the key in gutter mode (ie horizontal), this allows you to give a background color.<br /> + <i>Default: true</i><br /><br /> + + <a name="chart.key.shadow"></a> + <b>chart.key.shadow</b><br /> + Whether a small drop shadow is applied to the key.<br /> + <i>Default: false</i><br /><br /> + + <a name="chart.key.shadow.color"></a> + <b>chart.key.shadow.color</b><br /> + The color of the shadow.<br /> + <i>Default: #666</i><br /><br /> + + <a name="chart.key.shadow.blur"></a> + <b>chart.key.shadow.blur</b><br /> + The extent of the blurring effect used on the shadow.<br /> + <i>Default: 3</i><br /><br /> + + <a name="chart.key.shadow.offsetx"></a> + <b>chart.key.shadow.offsetx</b><br /> + The X offset of the shadow.<br /> + <i>Default: 2</i><br /><br /> + + <a name="chart.key.shadow.offsety"></a> + <b>chart.key.shadow.offsety</b><br /> + The Y offset of the shadow.<br /> + <i>Default: 2</i><br /><br /> + + <a name="chart.key.rounded"></a> + <b>chart.key.rounded</b><br /> + This controls whether the corners of the key (in graph mode) are curved. If the key is gutter mode, this has no effect.<br /> + <i>Default: false</i><br /><br /> + + <a name="chart.key.color.shape"></a> + <b>chart.key.color.shape</b><br /> + This can be <i>square</i>, <i>circle</i> or <i>line</i> and controls how the color indicators in the key appear.<br /> + <i>Default: square</i><br /><br /> + + <a name="chart.key.linewidth"></a> + <b>chart.key.linewidth</b><br /> + The line width of the surrounding border on the key.<br /> + <i>Default: 1</i><br /><br /> + + <a name="chart.key.interactive"></a> + <b>chart.key.interactive</b><br /> + This option enables the facility to click on the pie chart to highlight (explode only) the relevant segment.<br /> + <i>Default: false</i><br /><br /> + + + +<a name="zoom"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Zoom</h3> <a name="chart.zoom.mode"></a> +<b>chart.zoom.mode</b><br /> + Can be used to control whether the zoom is in thumbnail or canvas mode. Possible values are: <i>thumbnail</i> and <i>canvas</i>.<br /><i>Default: canvas</i><br /><br /> + <a name="chart.zoom.factor"></a> +<b>chart.zoom.factor</b><br /> + This is the factor that the chart will be zoomed by (bigger values means more zoom)<br /><i>Default: 1.5</i><br /><br /> + <a name="chart.zoom.fade.in"></a> +<b>chart.zoom.fade.in</b><br /> + Whether the zoomed canvas fades in or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /><i>Default: true</i><br /><br /> + <a name="chart.zoom.fade.out"></a> +<b>chart.zoom.fade.out</b><br /> + Whether the zoomed canvas fades out or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /><i>Default: true</i><br /><br /> + <a name="chart.zoom.hdir"></a> +<b>chart.zoom.hdir</b><br /> + The horizontal direction of the zoom. Possible values are: <i>left</i>, <i>center</i>, <i>right</i><br /><i>Default: right</i><br /><br /> + <a name="chart.zoom.vdir"></a> +<b>chart.zoom.vdir</b><br /> + The vertical direction of the zoom. Possible values are: <i>up</i>, <i>center</i>, <i>down</i><br /><i>Default: down</i><br /><br /> + <a name="chart.zoom.delay"></a> +<b>chart.zoom.delay</b><br /> + The delay (in milliseconds) between frames.<br /><i>Default: 50</i><br /><br /> + <a name="chart.zoom.frames"></a> +<b>chart.zoom.frames</b><br /> + The number of frames in the zoom animation.<br /><i>Default: 10</i><br /><br /> + <a name="chart.zoom.shadow"></a> +<b>chart.zoom.shadow</b><br /> + Whether or not the zoomed canvas has a shadow or not.<br /><i>Default: true</i><br /><br /> + <a name="chart.zoom.thumbnail.width"></a> +<b>chart.zoom.thumbnail.width</b><br /> + When the zoom is in thumbnail mode, this is the width (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br /> + <a name="chart.zoom.thumbnail.height"></a> +<b>chart.zoom.thumbnail.height</b><br /> + When the zoom is in thumbnail mode, this is the height (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br /> + <a name="chart.zoom.background"></a> +<b>chart.zoom.background</b><br /> + Defaulting to true, this determines whether the zoom has a dark, semi-opaque background that covers the entire web page.<br /><i>Default: true</i><br /><br /> + +<!-- + +<a name="scale"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Scale</h3> + +--> + + +<a name="miscellaneous"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Miscellaneous</h3> <a name="chart.align"></a> +<b>chart.align</b><br /> + Whether to left, center or right align the pie chart.<br /><i>Default: center</i><br /><br /> + <a name="chart.linewidth"></a> +<b>chart.linewidth</b><br /> + By setting this to roughly 5, and setting the strokestyle to the same colour as your background colour,you will get a segment separation effect.<br /><i>Default: 1</i><br /><br /> + + <a name="chart.variant"></a> + <b>chart.variant</b><br /> + This can be either <i>pie</i> (the default) or <i>donut</i>. Setting this to <i>donut</i> is how you get a + donut chart.<br /> + <i>Default: pie</i><br /><br /> + + <a name="chart.variant.donut.color"></a> + <b>chart.variant.donut.color</b><br /> + This is the color of the center of the Donut chart.<br /> + <i>Default: white</i><br /><br /> + + <a name="chart.highlight.style"></a> + <b>chart.highlight.style</b><br /> + Can be either <i>explode</i>, <i>2d</i> or <i>3d</i> and determines which style of segment highlighting is used in + conjunction with tooltips.<br /> + <i>Default: 2d</i><br /><br /> + + <a name="chart.highlight.style.2d.fill"></a> + <b>chart.highlight.style.2d.fill</b><br /> + When 2D highlighting for tooltips is used, this controls the color of the highlighting. The former name for this property was + <i>chart.highlight.style.2d.color</i>.<br /> + <i>Default: rgba(255,255,255,0.5)</i><br /><br /> + + <a name="chart.highlight.style.2d.stroke"></a> + <b>chart.highlight.style.2d.stroke</b><br /> + When 2D highlighting for tooltips is used, this controls the stroke color of the highlighting.<br /> + <i>Default: rgba(255,255,255,0)</i><br /><br /> + + <a name="chart.explode"></a> + <b>chart.explode</b><br /> + This can either be an array with the same number of elements as segments, or a single number, in which case every + segment will be exploded that amount. If it's an array then only those segments will be exploded - eg <i>[0,5,0,0]</i><br /> + <i>Default: [] (an empty array)</i><br /><br /> +</div> + + <a name="available.methods"></a> + <br /> <br /> + <h2>Methods</h2> + + <b>obj.getSegment()</b><br /><br /> + + obj.getSegment() makes it easy to determine which segment of the Pie chart was clicked on. It provides: + + <ul> + <li>Originating X coordinate</li> + <li>Originating Y coordinate</li> + <li>The radius of the segment</li> + <li>The starting angle (in degrees)</li> + <li>The ending angle (in degrees)</li> + <li>The zero-indexed segment number</li> + </ul> + + <pre class="code"> +<script> + RGraph.Register(myGraph); + + myGraph.canvas.onclick = function (e) + { + RGraph.FixEventObject(e); + RGraph.Redraw(); + + var canvas = e.target; + var context = canvas.getContext('2d'); + var obj = canvas.__object__; + <span style="color: green">var segment = obj.getSegment(e);</span> + + if (segment) { + context.fillStyle = 'rgba(255,255,255,0.5)'; + context.beginPath(); + + // Angles are provided in degrees, so convert them to radians + segment[3] /= 57.29; + segment[4] /= 57.29; + + context.moveTo(segment[0], segment[1]); + context.arc(segment[0], segment[1], segment[2], segment[3], segment[4], 0); + context.stroke(); + context.fill(); + + e.stopPropagation(); + } + } + + window.onclick = function (e) + { + RGraph.Redraw(); + } +</script> +</pre> + + <b>obj.Explode()</b><br /><br /> + <p> + The Explode() method allows you to programmatically trigger the exploding (ie the highlighting of) a particular segment. + The Explode() method is used like so: + </p> + + <pre class="code"> +<script> + myObj = new RGraph.Pie('cvs', [8,9,4,6]); + myObj.Draw(); + + <span style="color: green">myObj.Explode(index, size);</span> +</script> +</pre> + + <p> + The index argument is the zero-index segment to operate on (counting from the north axis). An the size is measured in pixels. + </p> + + <b>Important Note</b> + + <p> + This method was formerly a common object method, called <i>RGraph.getSegment(e)</i>, but has now (6th March 2011) been + moved to be part of the Pie chart object. + </p> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/docs/png.html b/schall/static/RGraph/docs/png.html new file mode 100644 index 0000000..a5eafe3 --- /dev/null +++ b/schall/static/RGraph/docs/png.html @@ -0,0 +1,214 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - Retrieving a PNG of your graph</title> + + <meta name="keywords" content="rgraph html5 canvas charts docs png image" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Retrieving a PNG representation of your chart" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.jpg"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js" ></script> + <script src="../libraries/RGraph.common.context.js" ></script> + <script src="../libraries/RGraph.line.js" ></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + + <script> + window.onload = function () + { + line = new RGraph.Line('cvs', [4,3,7,4,5,6,7,4,8,9]); + line.Set('chart.labels', ['Dez', 'Fliss','Geoff','Hoolio','John','Rich','Kev','Charles','Lou','Bob']); + line.Set('chart.hmargin', 5); + line.Set('chart.title', 'Retrieving a PNG of your chart (context menu)'); + line.Set('chart.title.vpos', 0.5); + line.Set('chart.tickmarks', 'endcircle'); + + line.Set('chart.contextmenu', [ + ['Get PNG', RGraph.showPNG], + null, + ['Cancel', function () {}] + ]); + + line.Set('chart.linewidth', 2); + line.Set('chart.shadow', true); + line.Set('chart.shadow.offsetx', 0); + line.Set('chart.shadow.offsety', 0); + line.Set('chart.shadow.blur', 15); + line.Set('chart.shadow.color', 'red'); + + RGraph.Clear(line.canvas, 'white'); // This effectively sets the background color to be white + + line.Draw(); + } + </script> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> + +</head> +<body> + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + +<div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="index.html">Documentation</a> + > + Retrieving a PNG of your chart +</div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - Retrieving a PNG of your chart</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + <style> + span#png_link { + position: absolute; + left: 535px; + top: 30px; + border: 1px black solid; + padding: 1px; + background-color: white; + cursor: pointer; + color: blue; + font-size: 10pt; + border: 2px solid gray; + border-radius: 5px; + font-weight: bold; + font-family: Arial; + } + </style> + + <div style="position: relative"> + <span id="png_link" onclick="RGraph.showPNG(document.getElementById('cvs'), event);">PNG</span> + <canvas id="cvs" width="600" height="250" style="float: left">[No canvas support]</canvas> + </div> + + + <p> + RGraph provides an easy way to get a PNG image of your chart. This allows you to + easily save the image locally to use in (for example) a document, spreadsheet or presentation. + </p> + + <p> + Originally, the function was designed to be used with a context menu, so it is located in the <i>RGraph.common.context.js</i>. + Now though, you do not have to use the function with a context menu, and can instead pass in the canvas as the optional argument. There's an + example of its usage on the first <a href="../examples/radar.html">Radar example</a href>. + </p> + + <br clear="all" /> + + <p>Include the context menu code:</p> + <pre class="code"><script src="../libraries/RGraph.common.context.js" ></script></pre> + + <p>Add the context menu:</p> + <pre class="code"> +myGraph.Set('chart.contextmenu', [ + <span style="color: green">['Get PNG', RGraph.showPNG]</span>, + null, + ['Cancel', function () {}] + ]);</pre> + + <h4>Using the function without a context menu</h4> + + <p> + If you want to use the function with a piece of text (or an image) as the "link", optionally positioned over the canvas, you can pass + the canvas into the function as an argument, along with the event object. + </p> + + <pre class="code"> +<!-- This CSS positions the link over the top right of the canvas --> +<style> + span#png_link { + position: absolute; + left: 450px; + top: 30px; + border: 1px black solid; + padding: 1px; + background-color: #eee; + cursor: pointer; + } +</style> + +<div style="position: relative"> + <span id="png_link" <span style="color: green">onclick="RGraph.showPNG(myCanvas, event)"</span>>Get PNG</span> + <canvas id="cvs" width="600" height="250">[No canvas support]</canvas> +</div> +</pre> + + <h4>Retrieving just the PNG URL</h4> + <p> + If you just want to get the PNG image URL - this can be done with the standard canvas function<i>.toDataUrl()</i>: + </p> + + <pre class="code">var myUrl = myCanvas.toDataURL();</pre> + + <p> + This gives you a data: URL which represents the canvas. Like <a href="javascript: location.href = line.canvas.toDataURL()">this</a>. + Because the URLs are very long there are some things that you should be aware of: + </p> + + <ul> + <li>Google Chrome shows the image, but doesn't show the URL in the address bar</li> + <li>MSIE9 can show the image using the context menu API (top) method, but not the stand-alone image.</li> + </ul> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/docs/radar.html b/schall/static/RGraph/docs/radar.html new file mode 100644 index 0000000..b9902bd --- /dev/null +++ b/schall/static/RGraph/docs/radar.html @@ -0,0 +1,445 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for personal, | + * | charity and educational purposes it is free to use. You can read the full | + * | license here: | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - Radar charts documentation</title> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="/favicon.png"> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.jpg"/> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> + +</head> +<body> + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + <div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="index.html">Documentation</a> + > + Radar charts + </div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - Radar charts documentation</h1> + + <div style="background-color: #ffb; border: 2px dashed #000; padding: 3px"> + This chart used to be called the Tradar chart (T standing for "Traditional" - there used to be two Radar charts in RGraph), + however now (July 2011), it has been renamed to the "Radar" chart to make it easier for people to identify. If you use it + you will need to update your code accordingly. Keep in mind that if you use the .type property - this has been updated too + (to <i>radar</i>). + </div> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + <p> + A Radar chart. + </p> + + <p> + The example file is <a href="../examples/radar.html">here</a>. + </p> + + <pre class="code"> +<script> + window.onload = function () + { + var data = [3, 3, 41, 37, 16]; + + var radar = new RGraph.Radar('myRadar', data); + radar.Set('chart.background.circles', true); + radar.Set('chart.color', 'rgba(255,0,0,0.5)'); + radar.Set('chart.circle', 20); + radar.Set('chart.circle.fill', 'rgba(200,255,200,0.5)'); + radar.Set('chart.labels', ['Safari (3%)', 'Other (3%)', 'MSIE 7 (41%)', 'MSIE 6 (37%)', 'Firefox (16%)']); + radar.Set('chart.key', ['Market share', 'A made up figure']); + radar.Draw(); + } +</script> +</pre> + + + <h2>Properties</h2> + + <p> + You can use these properties to control how the chart apears. You can set these properties by using the Set() method. Eg: + </p> + + <p> + <b>myRadar.Set('color', 'rgba(255,0,0,0.5)');</b> + </p> + + <ul> + <li><a href="#margins">Margins</a></li> + <li><a href="#colors">Colors</a></li> + <li><a href="#title">Title</a></li> + <li><a href="#labels and text">Labels and text</a></li> + <li><a href="#scale">Scale</a></li> + <li><a href="#misc">Miscellaneous</a></li> + <li><a href="#key">Key</a></li> + <li><a href="#interactive features">Interactive features</a></li> + <li><a href="#zoom">Zoom</a></li> + </ul> + + + +<a name="margins"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Margins</h3> + + + + <a name="chart.gutter.left"></a> + <b>chart.gutter.left</b><br /> + The left gutter of the chart, (the gutter is where the labels and title are)).<br /> + <i>Default: 25</i><br /><br /> + + <a name="chart.gutter.right"></a> + <b>chart.gutter.right</b><br /> + The right gutter of the chart, (the gutter is where the labels and title are).<br /> + <i>Default: 25</i><br /><br /> + + <a name="chart.gutter.top"></a> + <b>chart.gutter.top</b><br /> + The top gutter of the chart, (the gutter is where the labels and title are).<br /> + <i>Default: 25</i><br /><br /> + + <a name="chart.gutter.bottom"></a> + <b>chart.gutter.bottom</b><br /> + The bottom gutter of the chart, (the gutter is where the labels and title are).<br /> + <i>Default: 25</i><br /><br /> + +<a name="colors"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Colors</h3> + <a name="chart.colors"></a> + <b>chart.colors</b><br /> + The colors of the radar chart(s).<br /> + <i>Default: red</i><br /><br /> + + <a name="chart.colors.alpha"></a> + <b>chart.colors.alpha</b><br /> + If set (a number between 0 nd 1), this will be used as the alpha value of the colors of the chart.<br /> + <i>Default: null</i><br /><br /> + +<a name="title"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Title</h3> + + <a name="chart.title"></a> + <b>chart.title</b><br /> + The title, if any, of the chart.<br /> + <i>Default: Not set</i><br /><br /> + + + +<a name="chart.title.font"></a> +<b>chart.title.font</b><br /> +The font that the title is rendered in. If not specified the chart.text.font setting is used (usually Verdana)<br /> +<i>Default: null</i><br /><br /> + +<a name="chart.title.size"></a> +<b>chart.title.size</b><br /> +The size of the title. If not specified the size is usually 2pt bigger than the chart.text.size setting.<br /> +<i>Default: null</i><br /><br /> + +<a name="chart.title.bold"></a> +<b>chart.title.bold</b><br /> +Whather the title is bold or not.<br /> +<i>Default: true</i><br /><br /> + + <a name="chart.title.color"></a> +<b>chart.title.color</b><br /> + The color of the title.<br /> <i>Default: black</i><br /><br /> + <a name="chart.title.vpos"></a> +<b>chart.title.vpos</b><br /> + This allows you to completely override the vertical positioning of the title. It should be a number between 0 and 1, and is multiplied with the gutter and then used as the vertical position. It can be useful if you need to have a large gutter.<br /><i>Default: null</i><br /><br /> + <a name="chart.title.hpos"></a> +<b>chart.title.hpos</b><br /> + This allows you to completely override the horizontal positioning of the title. It should be a number between 0 and 1, and is multiplied with the whole width of the canvas and then used as the horizontal position. <br /><i>Default: null</i><br /><br /> +<a name="labels and text"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Labels and text</h3> <a name="chart.labels"></a> +<b>chart.labels</b><br /> + The labels to use for the chart.<br /><i>Default: An empty array</i><br /><br /> + <a name="chart.labels.axes"></a> +<b>chart.labels.axes</b><br /> + This controls the axes that show the scale labels. Each letter stands for the appropriate axis (North, South, East and West)<br /><i>Default: nsew</i><br /><br /> + <a name="chart.labels.offsetx"></a> +<b>chart.labels.offsetx</b><br /> + The X pixel offset for the labels.<br /><i>Default: 10</i><br /><br /> + <a name="chart.labels.offsety"></a> +<b>chart.labels.offsety</b><br /> + The Y pixel offset for the labels.<br /><i>Default: 10</i><br /><br /> + <a name="chart.text.font"></a> +<b>chart.text.font</b><br /> + The font used to render the text.<br /><i>Default: Verdana</i><br /><br /> + <a name="chart.text.color"></a> +<b>chart.text.color</b><br /> + The color of the labels. <br /><i>Default: black</i><br /><br /> + <a name="chart.text.size"></a> +<b>chart.text.size</b><br /> + The size of the text (in points).<br /><i>Default: 10</i><br /><br /> +<a name="scale"></a> + +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Scale</h3> <a name="chart.ymax"></a> + <b>chart.ymax</b><br /> + The optional maximum Y scale value. If not specified then it will be calculated.<br /><i>Default: null (It's calculated)</i><br /><br /> + + <a name="chart.scale.round"></a> + <b>chart.scale.round</b><br /> + Whether to round the maximum scale value up or not. This will produce slightly better scales in some instances.<br /> + <i>Default: null</i><br /><br /> + + <a name="misc"></a> + <h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Miscellaneous</h3> + <a name="chart.highlight.stroke"></a> + <b>chart.highlight.stroke</b><br /> + If you use tooltips, this controls the color of the highlight stroke. + <br /><i>Default: gray</i><br /><br /> + + <a name="chart.highlight.fill"></a> + <b>chart.highlight.fill</b><br /> + If you use tooltips, this controls the colour of the highlight fill. + <br /><i>Default: white</i><br /><br /> + +<a name="chart.background.circles"></a> +<b>chart.background.circles</b><br /> + Whether to draw the grey background circles.<br /><i>Default: true</i><br /><br /> + <a name="chart.linewidth"></a> +<b>chart.linewidth</b><br /> + The width of the outline.<br /><i>Default: 1</i><br /><br /> + <a name="chart.circle"></a> +<b>chart.circle</b><br /> + What value to draw a circle at. Defaults to zero (off). You could use this to represent a threshold of some sort.<br /><i>Default: 0</i><br /><br /> + <a name="chart.circle.fill"></a> +<b>chart.circle.fill</b><br /> + What color to fill the circle with.<br /><i>Default: red</i><br /><br /> + <a name="chart.circle.stroke"></a> +<b>chart.circle.stroke</b><br /> + What color to stroke (ie The outline) the circle with.<br /><i>Default: black</i><br /><br /> + + + + + + + <a name="key"></a> + <h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Key</h3> + + <a name="chart.key"></a> + <b>chart.key</b><br /> + An array of key information. <br /> + <i>Default: [] (An empty array)</i><br /><br /> + + <a name="chart.key.background"></a> + <b>chart.key.background</b><br /> + The color of the key background. Typically white, you could set this to something like rgba(255,255,255,0.7) to allow people to see things behind it.<br> + <i>Default: white</i><br /><br /> + + <a name="chart.key.halign"></a> + <b>chart.key.halign</b><br /> + Instead of specifying the exact x/y coordinates, you can use this property to simply specify whether the key hould be + aligned <i>left</i> or <i>right</i>.<br /> + <i>Default: right</i><br /><br /> + + <a name="chart.key.position"></a> + <b>chart.key.position</b><br /> + Determines the position of the key.Either <b>graph</b> (default), or <b>gutter</b>.<br /> + <i>Default: graph</i><br /><br /> + + <b>chart.key.position.x</b><br /> + This allows you to specify a specific X coordinate for the key.<br /> + <i>Default: null</i><br /><br /> + + <b>chart.key.position.y</b><br /> + This allows you to specify a specific Y coordinate for the key.<br /> + <i>Default: null</i><br /><br /> + + <b>chart.key.position.gutter.boxed</b><br /> + If you have the key in gutter mode (ie horizontal), this allows you to give a background color.<br /> + <i>Default: true</i><br /><br /> + + <a name="chart.key.shadow"></a> + <b>chart.key.shadow</b><br /> + Whether a small drop shadow is applied to the key.<br /> + <i>Default: false</i><br /><br /> + + <a name="chart.key.shadow.color"></a> + <b>chart.key.shadow.color</b><br /> + The color of the shadow.<br /> + <i>Default: #666</i><br /><br /> + + <a name="chart.key.shadow.blur"></a> + <b>chart.key.shadow.blur</b><br /> + The extent of the blurring effect used on the shadow.<br /> + <i>Default: 3</i><br /><br /> + + <a name="chart.key.shadow.offsetx"></a> + <b>chart.key.shadow.offsetx</b><br /> + The X offset of the shadow.<br /> + <i>Default: 2</i><br /><br /> + + <a name="chart.key.shadow.offsety"></a> + <b>chart.key.shadow.offsety</b><br /> + The Y offset of the shadow.<br /> + <i>Default: 2</i><br /><br /> + + <b>chart.key.rounded</b><br /> + This controls whether the corners of the key (in graph mode) are curved. If the key is gutter mode, this has no effect.<br /> + <i>Default: false</i><br /><br /> + + <b>chart.key.color.shape</b><br /> + This can be <i>square</i>, <i>circle</i> or <i>line</i> and controls how the color indicators in the key appear.<br /> + <i>Default: square</i><br /><br /> + + <b>chart.key.linewidth</b><br /> + The line width of the surrounding border on the key.<br /> + <i>Default: 1</i><br /><br /> + + + + + + + +<a name="interactive features"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Interactive features</h3> + + <a name="chart.contextmenu"></a> + <b>chart.contextmenu</b><br /> + An array of context menu items. More information on context menus is <a href="context.html">here</a>.<br /> + <i>Default: [] (An empty array)</i><br /><br /> + + <a name="chart.annotatable"></a> + <b>chart.annotatable</b><br /> + Whether annotations are enabled for the chart (ie you can draw on the chart interactively.<br /><i>Default: false</i><br /><br /> + + <a name="chart.annotate.color"></a> + <b>chart.annotate.color</b><br /> + If you do not allow the use of the palette, then this will be the only colour allowed for annotations.<br /> + <i>Default: black</i><br /><br /> + + <a name="chart.tooltips"></a> + <b>chart.tooltips</b><br /> + A numerically indexed array of tooltips that are shown when a hotspot is hovered over. These can contain HTML.<br /> + <i>Default: An empty array</i><br /><br /> + + <a name="chart.tooltips.effect"></a> + <b>chart.tooltips.effect</b><br /> + The visual effect used when showing tooltips. Can be either <i>fade</i> or <i>expand</i>.<br /> + <i>Default: fade</i><br /><br /> + + <a name="chart.tooltips.css.class"></a> + <b>chart.tooltips.css.class</b><br /> + This is the name of the CSS class the chart uses.<br /> + <i>Default: RGraph_tooltip</i><br /><br /> + + <a name="chart.tooltips.override"></a> + <b>chart.tooltips.override</b><br /> + If you wish to handle showing tooltips yourself, this should be a function object which does just that. There's more information on the <a href="tooltips.html">tooltips documentation page</a><br /> + <i>Default: null</i><br /><br /> + + <a name="chart.resizable"></a> + <b>chart.resizable</b><br /> + Defaulting to false, this determines whether your chart will be resizable. Because of the numerous event handlers this has to install code on, This feature is unlikely to work with other dynamic features (the context menu is fine however).<br /> + <i>Default: false</i><br /><br /> + + + <a name="chart.resize.handle.background"></a> + <b>chart.resize.handle.background</b><br /> + With this you can specify the background color for the resize handle. If you're adjusting the position of the + handle then you may need this to make the handle stand out more.<br /> + <i>Default: null</i><br /><br /> + +<a name="zoom"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Zoom</h3> <a name="chart.zoom.mode"></a> +<b>chart.zoom.mode</b><br /> + Can be used to control whether the zoom is in thumbnail or canvas mode. Possible values are: <i>thumbnail</i> and <i>canvas</i>.<br /><i>Default: canvas</i><br /><br /> + <a name="chart.zoom.factor"></a> +<b>chart.zoom.factor</b><br /> + This is the factor that the chart will be zoomed by (bigger values means more zoom)<br /><i>Default: 1.5</i><br /><br /> + <a name="chart.zoom.fade.in"></a> +<b>chart.zoom.fade.in</b><br /> + Whether the zoomed canvas fades in or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /><i>Default: true</i><br /><br /> + <a name="chart.zoom.fade.out"></a> +<b>chart.zoom.fade.out</b><br /> + Whether the zoomed canvas fades out or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /><i>Default: true</i><br /><br /> + <a name="chart.zoom.hdir"></a> +<b>chart.zoom.hdir</b><br /> + The horizontal direction of the zoom. Possible values are: <i>left</i>, <i>center</i>, <i>right</i><br /><i>Default: right</i><br /><br /> + <a name="chart.zoom.vdir"></a> +<b>chart.zoom.vdir</b><br /> + The vertical direction of the zoom. Possible values are: <i>up</i>, <i>center</i>, <i>down</i><br /><i>Default: down</i><br /><br /> + <a name="chart.zoom.delay"></a> +<b>chart.zoom.delay</b><br /> + The delay (in milliseconds) between frames.<br /><i>Default: 50</i><br /><br /> + <a name="chart.zoom.frames"></a> +<b>chart.zoom.frames</b><br /> + The number of frames in the zoom animation.<br /><i>Default: 10</i><br /><br /> + <a name="chart.zoom.shadow"></a> +<b>chart.zoom.shadow</b><br /> + Whether or not the zoomed canvas has a shadow or not.<br /><i>Default: true</i><br /><br /> + <a name="chart.zoom.thumbnail.width"></a> +<b>chart.zoom.thumbnail.width</b><br /> + When the zoom is in thumbnail mode, this is the width (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br /> + <a name="chart.zoom.thumbnail.height"></a> +<b>chart.zoom.thumbnail.height</b><br /> + When the zoom is in thumbnail mode, this is the height (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br /> + <a name="chart.zoom.background"></a> +<b>chart.zoom.background</b><br /> + Defaulting to true, this determines whether the zoom has a dark, semi-opaque background that covers the entire web page.<br /><i>Default: true</i><br /><br /> +</div><!-- /DOCS --><br /><br /> +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/docs/released.txt b/schall/static/RGraph/docs/released.txt new file mode 100644 index 0000000..bf56e8f --- /dev/null +++ b/schall/static/RGraph/docs/released.txt @@ -0,0 +1,2691 @@ +This version released on: Thu, 20 Oct 2011 21:03:55 +0100 + +A RGraph +A RGraph/tests.old +A RGraph/tests.old/ramon.html +A RGraph/tests.old/animated_meter.html +A RGraph/tests.old/context.html +A RGraph/tests.old/zoom.html +A RGraph/tests.old/kwong.html +A RGraph/tests.old/clear.html +A RGraph/tests.old/key.html +A RGraph/tests.old/getPoint.html +A RGraph/tests.old/grafica.html +A RGraph/tests.old/lots-of-points.html +A RGraph/tests.old/above.bar.html +A RGraph/tests.old/set.config.html +A RGraph/tests.old/getSegment.html +A RGraph/tests.old/ralphoid.html +A RGraph/tests.old/pointers.html +A RGraph/tests.old/test4.html +A RGraph/tests.old/scatter_crosshairs.html +A RGraph/tests.old/test6.html +A RGraph/tests.old/browsers.html +A RGraph/tests.old/smoothing.html +A RGraph/tests.old/null.values.html +A RGraph/tests.old/scale2.html +A RGraph/tests.old/boxplots.html +A RGraph/tests.old/sparklines.html +A RGraph/tests.old/getGutterSuggest.html +A RGraph/tests.old/___.html +A RGraph/tests.old/ymin.html +A RGraph/tests.old/scatter_yvalues.html +A RGraph/tests.old/tooltips.html +A RGraph/tests.old/crosshairs.html +A RGraph/tests.old/ajax.html +A RGraph/tests.old/rose.ymin.html +A RGraph/tests.old/gantt-xmin.html +A RGraph/tests.old/line.html +A RGraph/tests.old/scale.html +A RGraph/tests.old/tickmarks.html +A RGraph/tests.old/ingraph.labels.html +A RGraph/tests.old/animated_line.html +A RGraph/tests.old/noxaxis.html +A RGraph/tests.old/msie.html +A RGraph/tests.old/ie-events.html +A RGraph/tests.old/chrome-text.html +A RGraph/tests.old/trends.html +A RGraph/tests.old/3D-effect.html +A RGraph/tests.old/out-of-bounds.html +A RGraph/tests.old/resize.html +A RGraph/tests.old/mfrancis.html +A RGraph/tests.old/rscatter.ymin.html +A RGraph/tests.old/scatter_vbars.html +A RGraph/tests.old/test3.html +A RGraph/tests.old/smallrunedex.html +A RGraph/tests.old/getBar.html +A RGraph/tests.old/scatter.html +A RGraph/tests.old/log-scale.html +A RGraph/tests.old/kwong2.html +A RGraph/tests.old/highlight.html +A RGraph/tests.old/shadows.html +A RGraph/tests.old/missing.html +A RGraph/tests.old/.svg +A RGraph/tests.old/.svg/RGraph.svg.bar.js +A RGraph/tests.old/.svg/svg.html +A RGraph/tests.old/.svg/RGraph.common.svg.js +A RGraph/tests.old/animated_rose.html +A RGraph/tests.old/scale3.html +A RGraph/www.phpguru.org_4849532196 +A RGraph/www.phpguru.org_4849532196/CanvasText +A RGraph/www.phpguru.org_4849532196/CanvasText/CanvasText.js +A RGraph/www.phpguru.org_4849532196/CanvasText/index.php +A RGraph/www.phpguru.org_4849532196/Log +A RGraph/www.phpguru.org_4849532196/Log/test.phps +A RGraph/www.phpguru.org_4849532196/Log/Log.phps +A RGraph/www.phpguru.org_4849532196/RGraph +A RGraph/www.phpguru.org_4849532196/RGraph/index.php +A RGraph/www.phpguru.org_4849532196/DB +A RGraph/www.phpguru.org_4849532196/DB/pear_db_replacement.zip +A RGraph/www.phpguru.org_4849532196/Console_Menu +A RGraph/www.phpguru.org_4849532196/Console_Menu/test.phps +A RGraph/www.phpguru.org_4849532196/Console_Menu/Menu.phps +A RGraph/www.phpguru.org_4849532196/FileIterator +A RGraph/www.phpguru.org_4849532196/FileIterator/FileIterator.phps +A RGraph/www.phpguru.org_4849532196/header.html +A RGraph/www.phpguru.org_4849532196/TableEditor +A RGraph/www.phpguru.org_4849532196/TableEditor/TableEditor.zip +A RGraph/www.phpguru.org_4849532196/TableEditor/TableEditor_de.phps +A RGraph/www.phpguru.org_4849532196/TableEditor/TableEditor_Pear-DB.phps +A RGraph/www.phpguru.org_4849532196/TableEditor/TableEditor.php +A RGraph/www.phpguru.org_4849532196/TableEditor/ChangeLog.txt +A RGraph/www.phpguru.org_4849532196/TableEditor/TableEditor.phps +A RGraph/www.phpguru.org_4849532196/TableEditor/release.sh +A RGraph/www.phpguru.org_4849532196/TableEditor/.TableEditor_new.php +A RGraph/www.phpguru.org_4849532196/TableEditor/TableEditor_de.php +A RGraph/www.phpguru.org_4849532196/TableEditor/TableEditor_Pear-DB.php +A RGraph/www.phpguru.org_4849532196/.HTML5_linechart +A RGraph/www.phpguru.org_4849532196/.HTML5_linechart/bak +A RGraph/www.phpguru.org_4849532196/.HTML5_linechart/bak/LineChart.js +A RGraph/www.phpguru.org_4849532196/.HTML5_linechart/bak/index.html +A RGraph/www.phpguru.org_4849532196/.HTML5_linechart/bak/_index.php +A RGraph/www.phpguru.org_4849532196/.HTML5_linechart/bak/base.html +A RGraph/www.phpguru.org_4849532196/.HTML5_linechart/index.php +A RGraph/www.phpguru.org_4849532196/js_sleep +A RGraph/www.phpguru.org_4849532196/js_sleep/example.html +A RGraph/www.phpguru.org_4849532196/RGrid +A RGraph/www.phpguru.org_4849532196/RGrid/2009-09-02 +A RGraph/www.phpguru.org_4849532196/RGrid/2009-09-02/RGrid.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2009-09-02/release +A RGraph/www.phpguru.org_4849532196/RGrid/2009-09-02/example.php +A RGraph/www.phpguru.org_4849532196/RGrid/2009-09-02/example7.html +A RGraph/www.phpguru.org_4849532196/RGrid/2009-09-02/example2.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2009-09-02/example8.html +A RGraph/www.phpguru.org_4849532196/RGrid/2009-09-02/example3.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2009-09-02/example4.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2009-09-02/docs +A RGraph/www.phpguru.org_4849532196/RGrid/2009-09-02/docs/index.html +A RGraph/www.phpguru.org_4849532196/RGrid/2009-09-02/example5.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2009-09-02/example6.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2009-09-02/example7.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2009-09-02/example8.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2009-09-02/RGrid.php +A RGraph/www.phpguru.org_4849532196/RGrid/2009-09-02/example9.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2009-09-02/example2.php +A RGraph/www.phpguru.org_4849532196/RGrid/2009-09-02/example3.php +A RGraph/www.phpguru.org_4849532196/RGrid/2009-09-02/example.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2009-09-02/example4.php +A RGraph/www.phpguru.org_4849532196/RGrid/2009-09-02/example5.php +A RGraph/www.phpguru.org_4849532196/RGrid/2009-09-02/example6.php +A RGraph/www.phpguru.org_4849532196/RGrid/2009-09-02/example7.php +A RGraph/www.phpguru.org_4849532196/RGrid/2009-09-02/example7.css +A RGraph/www.phpguru.org_4849532196/RGrid/2009-09-02/example8.php +A RGraph/www.phpguru.org_4849532196/RGrid/2009-09-02/example8.css +A RGraph/www.phpguru.org_4849532196/RGrid/2009-09-02/example9.php +A RGraph/www.phpguru.org_4849532196/RGrid/2009-09-02/index.html +A RGraph/www.phpguru.org_4849532196/RGrid/2009-09-02/header.png +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-08 +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-08/datagrid.zip +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-08/release +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-08/example.php +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-08/example7.html +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-08/example2.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-08/example8.html +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-08/example3.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-08/example4.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-08/docs +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-08/docs/index.html +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-08/Datagrid.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-08/example5.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-08/example6.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-08/example7.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-08/example8.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-08/example9.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-08/example2.php +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-08/example3.php +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-08/example.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-08/example4.php +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-08/Datagrid.php +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-08/php-datagrid.zip +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-08/example5.php +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-08/example6.php +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-08/example7.php +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-08/example7.css +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-08/example8.php +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-08/example8.css +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-08/example9.php +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-08/header.png +A RGraph/www.phpguru.org_4849532196/RGrid/2010-03-10 +A RGraph/www.phpguru.org_4849532196/RGrid/2010-03-10/RGrid.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2010-03-10/release +A RGraph/www.phpguru.org_4849532196/RGrid/2010-03-10/example.php +A RGraph/www.phpguru.org_4849532196/RGrid/2010-03-10/example7.html +A RGraph/www.phpguru.org_4849532196/RGrid/2010-03-10/example2.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2010-03-10/example8.html +A RGraph/www.phpguru.org_4849532196/RGrid/2010-03-10/example3.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2010-03-10/example4.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2010-03-10/docs +A RGraph/www.phpguru.org_4849532196/RGrid/2010-03-10/docs/index.html +A RGraph/www.phpguru.org_4849532196/RGrid/2010-03-10/example5.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2010-03-10/example6.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2010-03-10/example7.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2010-03-10/example8.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2010-03-10/RGrid.php +A RGraph/www.phpguru.org_4849532196/RGrid/2010-03-10/example9.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2010-03-10/example2.php +A RGraph/www.phpguru.org_4849532196/RGrid/2010-03-10/example3.php +A RGraph/www.phpguru.org_4849532196/RGrid/2010-03-10/example.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2010-03-10/example4.php +A RGraph/www.phpguru.org_4849532196/RGrid/2010-03-10/example5.php +A RGraph/www.phpguru.org_4849532196/RGrid/2010-03-10/example6.php +A RGraph/www.phpguru.org_4849532196/RGrid/2010-03-10/example7.php +A RGraph/www.phpguru.org_4849532196/RGrid/2010-03-10/example7.css +A RGraph/www.phpguru.org_4849532196/RGrid/2010-03-10/example8.php +A RGraph/www.phpguru.org_4849532196/RGrid/2010-03-10/example8.css +A RGraph/www.phpguru.org_4849532196/RGrid/2010-03-10/example9.php +A RGraph/www.phpguru.org_4849532196/RGrid/2010-03-10/header.png +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-19 +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-19/RGrid.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-19/release +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-19/example.php +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-19/example7.html +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-19/example2.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-19/example8.html +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-19/example3.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-19/example4.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-19/docs +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-19/docs/index.html +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-19/example5.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-19/example6.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-19/example7.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-19/example8.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-19/RGrid.php +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-19/example9.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-19/example2.php +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-19/example3.php +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-19/example.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-19/example4.php +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-19/example5.php +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-19/example6.php +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-19/example7.php +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-19/example7.css +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-19/example8.php +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-19/example8.css +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-19/example9.php +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-19/header.png +A RGraph/www.phpguru.org_4849532196/RGrid/2009-06-26 +A RGraph/www.phpguru.org_4849532196/RGrid/2009-06-26/RGrid.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2009-06-26/release +A RGraph/www.phpguru.org_4849532196/RGrid/2009-06-26/example.php +A RGraph/www.phpguru.org_4849532196/RGrid/2009-06-26/example7.html +A RGraph/www.phpguru.org_4849532196/RGrid/2009-06-26/example2.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2009-06-26/example8.html +A RGraph/www.phpguru.org_4849532196/RGrid/2009-06-26/example3.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2009-06-26/example4.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2009-06-26/docs +A RGraph/www.phpguru.org_4849532196/RGrid/2009-06-26/docs/index.html +A RGraph/www.phpguru.org_4849532196/RGrid/2009-06-26/example5.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2009-06-26/example6.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2009-06-26/example7.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2009-06-26/example8.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2009-06-26/RGrid.php +A RGraph/www.phpguru.org_4849532196/RGrid/2009-06-26/example9.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2009-06-26/example2.php +A RGraph/www.phpguru.org_4849532196/RGrid/2009-06-26/example3.php +A RGraph/www.phpguru.org_4849532196/RGrid/2009-06-26/example.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2009-06-26/example4.php +A RGraph/www.phpguru.org_4849532196/RGrid/2009-06-26/example5.php +A RGraph/www.phpguru.org_4849532196/RGrid/2009-06-26/example6.php +A RGraph/www.phpguru.org_4849532196/RGrid/2009-06-26/example7.php +A RGraph/www.phpguru.org_4849532196/RGrid/2009-06-26/example7.css +A RGraph/www.phpguru.org_4849532196/RGrid/2009-06-26/example8.php +A RGraph/www.phpguru.org_4849532196/RGrid/2009-06-26/example8.css +A RGraph/www.phpguru.org_4849532196/RGrid/2009-06-26/example9.php +A RGraph/www.phpguru.org_4849532196/RGrid/2009-06-26/index.html +A RGraph/www.phpguru.org_4849532196/RGrid/2009-06-26/header.png +A RGraph/www.phpguru.org_4849532196/RGrid/2008-08-17 +A RGraph/www.phpguru.org_4849532196/RGrid/2008-08-17/release +A RGraph/www.phpguru.org_4849532196/RGrid/2008-08-17/example.php +A RGraph/www.phpguru.org_4849532196/RGrid/2008-08-17/example7.html +A RGraph/www.phpguru.org_4849532196/RGrid/2008-08-17/example2.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2008-08-17/example8.html +A RGraph/www.phpguru.org_4849532196/RGrid/2008-08-17/example3.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2008-08-17/example4.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2008-08-17/docs +A RGraph/www.phpguru.org_4849532196/RGrid/2008-08-17/docs/index.html +A RGraph/www.phpguru.org_4849532196/RGrid/2008-08-17/Datagrid.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2008-08-17/example5.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2008-08-17/example6.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2008-08-17/example7.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2008-08-17/example8.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2008-08-17/example9.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2008-08-17/link.html +A RGraph/www.phpguru.org_4849532196/RGrid/2008-08-17/example2.php +A RGraph/www.phpguru.org_4849532196/RGrid/2008-08-17/example3.php +A RGraph/www.phpguru.org_4849532196/RGrid/2008-08-17/example.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2008-08-17/example4.php +A RGraph/www.phpguru.org_4849532196/RGrid/2008-08-17/Datagrid.php +A RGraph/www.phpguru.org_4849532196/RGrid/2008-08-17/example5.php +A RGraph/www.phpguru.org_4849532196/RGrid/2008-08-17/example6.php +A RGraph/www.phpguru.org_4849532196/RGrid/2008-08-17/example7.php +A RGraph/www.phpguru.org_4849532196/RGrid/2008-08-17/example7.css +A RGraph/www.phpguru.org_4849532196/RGrid/2008-08-17/example8.php +A RGraph/www.phpguru.org_4849532196/RGrid/2008-08-17/example8.css +A RGraph/www.phpguru.org_4849532196/RGrid/2008-08-17/example9.php +A RGraph/www.phpguru.org_4849532196/RGrid/2008-08-17/header.png +A RGraph/www.phpguru.org_4849532196/RGrid/2008-08-17/common.php +A RGraph/www.phpguru.org_4849532196/RGrid/RGrid.zip +A RGraph/www.phpguru.org_4849532196/RGrid/2009-05-01 +A RGraph/www.phpguru.org_4849532196/RGrid/2009-05-01/RGrid.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2009-05-01/release +A RGraph/www.phpguru.org_4849532196/RGrid/2009-05-01/example.php +A RGraph/www.phpguru.org_4849532196/RGrid/2009-05-01/example7.html +A RGraph/www.phpguru.org_4849532196/RGrid/2009-05-01/example2.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2009-05-01/example8.html +A RGraph/www.phpguru.org_4849532196/RGrid/2009-05-01/example3.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2009-05-01/example4.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2009-05-01/docs +A RGraph/www.phpguru.org_4849532196/RGrid/2009-05-01/docs/index.html +A RGraph/www.phpguru.org_4849532196/RGrid/2009-05-01/example5.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2009-05-01/example6.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2009-05-01/example7.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2009-05-01/example8.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2009-05-01/RGrid.php +A RGraph/www.phpguru.org_4849532196/RGrid/2009-05-01/example9.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2009-05-01/example2.php +A RGraph/www.phpguru.org_4849532196/RGrid/2009-05-01/example3.php +A RGraph/www.phpguru.org_4849532196/RGrid/2009-05-01/example.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2009-05-01/example4.php +A RGraph/www.phpguru.org_4849532196/RGrid/2009-05-01/example5.php +A RGraph/www.phpguru.org_4849532196/RGrid/2009-05-01/example6.php +A RGraph/www.phpguru.org_4849532196/RGrid/2009-05-01/example7.php +A RGraph/www.phpguru.org_4849532196/RGrid/2009-05-01/example7.css +A RGraph/www.phpguru.org_4849532196/RGrid/2009-05-01/example8.php +A RGraph/www.phpguru.org_4849532196/RGrid/2009-05-01/example8.css +A RGraph/www.phpguru.org_4849532196/RGrid/2009-05-01/example9.php +A RGraph/www.phpguru.org_4849532196/RGrid/2009-05-01/header.png +A RGraph/www.phpguru.org_4849532196/RGrid/.htaccess +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-12 +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-12/datagrid.zip +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-12/release +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-12/example.php +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-12/example7.html +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-12/example2.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-12/example8.html +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-12/example3.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-12/example4.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-12/docs +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-12/docs/index.html +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-12/Datagrid.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-12/example5.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-12/example6.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-12/example7.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-12/example8.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-12/example9.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-12/example2.php +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-12/example3.php +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-12/example.phps +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-12/example4.php +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-12/Datagrid.php +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-12/php-datagrid.zip +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-12/example5.php +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-12/example6.php +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-12/example7.php +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-12/example7.css +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-12/example8.php +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-12/example8.css +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-12/example9.php +A RGraph/www.phpguru.org_4849532196/RGrid/2009-04-12/header.png +A RGraph/www.phpguru.org_4849532196/LineReader +A RGraph/www.phpguru.org_4849532196/LineReader/LineReader.php +A RGraph/www.phpguru.org_4849532196/LineReader/example.php +A RGraph/www.phpguru.org_4849532196/LineReader/LineReader.phps +A RGraph/www.phpguru.org_4849532196/LineReader/example.phps +A RGraph/www.phpguru.org_4849532196/search.replace +A RGraph/www.phpguru.org_4849532196/search.replace/search.replace.zip +A RGraph/www.phpguru.org_4849532196/phpSQLiteAdmin +A RGraph/www.phpguru.org_4849532196/phpSQLiteAdmin/phpSQLiteAdmin.2004-03-07.zip +A RGraph/www.phpguru.org_4849532196/smtp +A RGraph/www.phpguru.org_4849532196/smtp/smtp-1.0.5.zip +A RGraph/www.phpguru.org_4849532196/smtp/index.html +A RGraph/www.phpguru.org_4849532196/mailb +A RGraph/www.phpguru.org_4849532196/mailb/mailb.phps +A RGraph/www.phpguru.org_4849532196/zoom +A RGraph/www.phpguru.org_4849532196/zoom/Zoom.js +A RGraph/www.phpguru.org_4849532196/zoom/zoom.html +A RGraph/www.phpguru.org_4849532196/.HTML5_xy +A RGraph/www.phpguru.org_4849532196/.HTML5_xy/_index.html +A RGraph/www.phpguru.org_4849532196/.HTML5_xy/index.php +A RGraph/www.phpguru.org_4849532196/.HTML5_CanvasTag +A RGraph/www.phpguru.org_4849532196/.HTML5_CanvasTag/_index.php +A RGraph/www.phpguru.org_4849532196/.HTML5_CanvasTag/index.php +A RGraph/www.phpguru.org_4849532196/Tree +A RGraph/www.phpguru.org_4849532196/Tree/Tree-1.0.3.tgz +A RGraph/www.phpguru.org_4849532196/Tree/docs +A RGraph/www.phpguru.org_4849532196/Tree/docs/Tree.html +A RGraph/www.phpguru.org_4849532196/Tree/docs/Tree.doc +A RGraph/www.phpguru.org_4849532196/Tree/Tree-2.0.0.tgz +A RGraph/www.phpguru.org_4849532196/AutoComplete +A RGraph/www.phpguru.org_4849532196/AutoComplete/AutoComplete.zip +A RGraph/www.phpguru.org_4849532196/AutoComplete/AutoComplete.html +A RGraph/www.phpguru.org_4849532196/AutoComplete/versions.txt +A RGraph/www.phpguru.org_4849532196/AutoComplete/AutoComplete.css +A RGraph/www.phpguru.org_4849532196/AutoComplete/AutoComplete.old.js +A RGraph/www.phpguru.org_4849532196/AutoComplete/release.sh +A RGraph/www.phpguru.org_4849532196/AutoComplete/AutoComplete.js +A RGraph/www.phpguru.org_4849532196/.HTML5_dualbar +A RGraph/www.phpguru.org_4849532196/.HTML5_dualbar/bak +A RGraph/www.phpguru.org_4849532196/.HTML5_dualbar/bak/distribution.js +A RGraph/www.phpguru.org_4849532196/.HTML5_dualbar/bak/index.html +A RGraph/www.phpguru.org_4849532196/.HTML5_dualbar/bak/_index.php +A RGraph/www.phpguru.org_4849532196/.HTML5_dualbar/index.php +A RGraph/www.phpguru.org_4849532196/Rmail +A RGraph/www.phpguru.org_4849532196/Rmail/.htmlMimeMail-2.5.2 +A RGraph/www.phpguru.org_4849532196/Rmail/.htmlMimeMail-2.5.2/RFC822.phps +A RGraph/www.phpguru.org_4849532196/Rmail/.htmlMimeMail-2.5.2/example.1.php +A RGraph/www.phpguru.org_4849532196/Rmail/.htmlMimeMail-2.5.2/example.2.php +A RGraph/www.phpguru.org_4849532196/Rmail/.htmlMimeMail-2.5.2/example.3.php +A RGraph/www.phpguru.org_4849532196/Rmail/.htmlMimeMail-2.5.2/example.4.php +A RGraph/www.phpguru.org_4849532196/Rmail/.htmlMimeMail-2.5.2/background.gif +A RGraph/www.phpguru.org_4849532196/Rmail/.htmlMimeMail-2.5.2/example.5.php +A RGraph/www.phpguru.org_4849532196/Rmail/.htmlMimeMail-2.5.2/API.txt +A RGraph/www.phpguru.org_4849532196/Rmail/.htmlMimeMail-2.5.2/mimePart.phps +A RGraph/www.phpguru.org_4849532196/Rmail/.htmlMimeMail-2.5.2/htmlMimeMail.phps +A RGraph/www.phpguru.org_4849532196/Rmail/.htmlMimeMail-2.5.2/RFC822.php +A RGraph/www.phpguru.org_4849532196/Rmail/.htmlMimeMail-2.5.2/example.zip +A RGraph/www.phpguru.org_4849532196/Rmail/.htmlMimeMail-2.5.2/smtp.phps +A RGraph/www.phpguru.org_4849532196/Rmail/.htmlMimeMail-2.5.2/example.html +A RGraph/www.phpguru.org_4849532196/Rmail/.htmlMimeMail-2.5.2/example.1.phps +A RGraph/www.phpguru.org_4849532196/Rmail/.htmlMimeMail-2.5.2/example.2.phps +A RGraph/www.phpguru.org_4849532196/Rmail/.htmlMimeMail-2.5.2/mimePart.php +A RGraph/www.phpguru.org_4849532196/Rmail/.htmlMimeMail-2.5.2/changelog.txt +A RGraph/www.phpguru.org_4849532196/Rmail/.htmlMimeMail-2.5.2/htmlMimeMail.php +A RGraph/www.phpguru.org_4849532196/Rmail/.htmlMimeMail-2.5.2/example.4.phps +A RGraph/www.phpguru.org_4849532196/Rmail/.htmlMimeMail-2.5.2/example.5.phps +A RGraph/www.phpguru.org_4849532196/Rmail/.htmlMimeMail-2.5.2/example.txt +A RGraph/www.phpguru.org_4849532196/Rmail/.htmlMimeMail-2.5.2/smtp.php +A RGraph/www.phpguru.org_4849532196/Rmail/.htmlMimeMail5 +A RGraph/www.phpguru.org_4849532196/Rmail/.htmlMimeMail5/RFC822.phps +A RGraph/www.phpguru.org_4849532196/Rmail/.htmlMimeMail5/example.php +A RGraph/www.phpguru.org_4849532196/Rmail/.htmlMimeMail5/background.gif +A RGraph/www.phpguru.org_4849532196/Rmail/.htmlMimeMail5/example2.phps +A RGraph/www.phpguru.org_4849532196/Rmail/.htmlMimeMail5/mimePart.phps +A RGraph/www.phpguru.org_4849532196/Rmail/.htmlMimeMail5/release.sh +A RGraph/www.phpguru.org_4849532196/Rmail/.htmlMimeMail5/htmlMimeMail5.php +A RGraph/www.phpguru.org_4849532196/Rmail/.htmlMimeMail5/docs.html +A RGraph/www.phpguru.org_4849532196/Rmail/.htmlMimeMail5/example.zip +A RGraph/www.phpguru.org_4849532196/Rmail/.htmlMimeMail5/RFC822.php +A RGraph/www.phpguru.org_4849532196/Rmail/.htmlMimeMail5/smtp.phps +A RGraph/www.phpguru.org_4849532196/Rmail/.htmlMimeMail5/LICENSE.txt +A RGraph/www.phpguru.org_4849532196/Rmail/.htmlMimeMail5/example2.php +A RGraph/www.phpguru.org_4849532196/Rmail/.htmlMimeMail5/mimePart.php +A RGraph/www.phpguru.org_4849532196/Rmail/.htmlMimeMail5/example.phps +A RGraph/www.phpguru.org_4849532196/Rmail/.htmlMimeMail5/htmlMimeMail5.zip +A RGraph/www.phpguru.org_4849532196/Rmail/.htmlMimeMail5/smtp.php +A RGraph/www.phpguru.org_4849532196/Rmail/.htmlMimeMail5/index.html +A RGraph/www.phpguru.org_4849532196/Rmail/.htmlMimeMail5/htmlMimeMail5.phps +A RGraph/www.phpguru.org_4849532196/Rmail/Rmail for PHP +A RGraph/www.phpguru.org_4849532196/Rmail/Rmail for PHP/RFC822.phps +A RGraph/www.phpguru.org_4849532196/Rmail/Rmail for PHP/example.php +A RGraph/www.phpguru.org_4849532196/Rmail/Rmail for PHP/background.gif +A RGraph/www.phpguru.org_4849532196/Rmail/Rmail for PHP/example2.phps +A RGraph/www.phpguru.org_4849532196/Rmail/Rmail for PHP/example3.phps +A RGraph/www.phpguru.org_4849532196/Rmail/Rmail for PHP/mimePart.phps +A RGraph/www.phpguru.org_4849532196/Rmail/Rmail for PHP/release.sh +A RGraph/www.phpguru.org_4849532196/Rmail/Rmail for PHP/Rmail.php +A RGraph/www.phpguru.org_4849532196/Rmail/Rmail for PHP/docs.html +A RGraph/www.phpguru.org_4849532196/Rmail/Rmail for PHP/example.zip +A RGraph/www.phpguru.org_4849532196/Rmail/Rmail for PHP/RFC822.php +A RGraph/www.phpguru.org_4849532196/Rmail/Rmail for PHP/smtp.phps +A RGraph/www.phpguru.org_4849532196/Rmail/Rmail for PHP/LICENSE.txt +A RGraph/www.phpguru.org_4849532196/Rmail/Rmail for PHP/example2.php +A RGraph/www.phpguru.org_4849532196/Rmail/Rmail for PHP/example3.php +A RGraph/www.phpguru.org_4849532196/Rmail/Rmail for PHP/example.phps +A RGraph/www.phpguru.org_4849532196/Rmail/Rmail for PHP/mimePart.php +A RGraph/www.phpguru.org_4849532196/Rmail/Rmail for PHP/Rmail.zip +A RGraph/www.phpguru.org_4849532196/Rmail/Rmail for PHP/namedFileAttachment.phps +A RGraph/www.phpguru.org_4849532196/Rmail/Rmail for PHP/Rmail_Patch.diff.txt +A RGraph/www.phpguru.org_4849532196/Rmail/Rmail for PHP/smtp.php +A RGraph/www.phpguru.org_4849532196/Rmail/Rmail for PHP/index.html +A RGraph/www.phpguru.org_4849532196/Rmail/Rmail for PHP/Rmail.phps +A RGraph/www.phpguru.org_4849532196/Rmail/_index.html +A RGraph/www.phpguru.org_4849532196/registry +A RGraph/www.phpguru.org_4849532196/registry/Registry.phps +A RGraph/www.phpguru.org_4849532196/registry/example.php +A RGraph/www.phpguru.org_4849532196/registry/example.phps +A RGraph/www.phpguru.org_4849532196/registry/.htaccess +A RGraph/www.phpguru.org_4849532196/registry/Registry.php +A RGraph/www.phpguru.org_4849532196/PorterStemmer +A RGraph/www.phpguru.org_4849532196/PorterStemmer/PorterStemmer.phps +A RGraph/www.phpguru.org_4849532196/formproc3 +A RGraph/www.phpguru.org_4849532196/formproc3/formproc-3.0.4.tar.gz +A RGraph/www.phpguru.org_4849532196/formproc3/formproc-3.0.5.tar.gz +A RGraph/www.phpguru.org_4849532196/toncarta.cache +A RGraph/www.phpguru.org_4849532196/toncarta.cache/toncarta.cache.zip +A RGraph/www.phpguru.org_4849532196/.HTML5_ScatterGraph +A RGraph/www.phpguru.org_4849532196/.HTML5_ScatterGraph/bak +A RGraph/www.phpguru.org_4849532196/.HTML5_ScatterGraph/bak/ScatterGraph.js +A RGraph/www.phpguru.org_4849532196/.HTML5_ScatterGraph/bak/index.html +A RGraph/www.phpguru.org_4849532196/.HTML5_ScatterGraph/bak/_index.php +A RGraph/www.phpguru.org_4849532196/.HTML5_ScatterGraph/index.php +A RGraph/www.phpguru.org_4849532196/datagrid +A RGraph/www.phpguru.org_4849532196/pcntl +A RGraph/www.phpguru.org_4849532196/pcntl/example.php +A RGraph/www.phpguru.org_4849532196/pcntl/Forked_Child.php +A RGraph/www.phpguru.org_4849532196/pcntl/example.phps +A RGraph/www.phpguru.org_4849532196/pcntl/Forked_Child.phps +A RGraph/www.phpguru.org_4849532196/pcntl/Forked_Parent.php +A RGraph/www.phpguru.org_4849532196/pcntl/Forked_Parent.phps +A RGraph/www.phpguru.org_4849532196/Timer +A RGraph/www.phpguru.org_4849532196/Timer/Console +A RGraph/www.phpguru.org_4849532196/Timer/Console/Table.phps +A RGraph/www.phpguru.org_4849532196/Timer/Console/Table.php +A RGraph/www.phpguru.org_4849532196/Timer/test.phps +A RGraph/www.phpguru.org_4849532196/Timer/Timer.phps +A RGraph/www.phpguru.org_4849532196/.HTML5_donut +A RGraph/www.phpguru.org_4849532196/.HTML5_donut/bak +A RGraph/www.phpguru.org_4849532196/.HTML5_donut/bak/donut.js.bak +A RGraph/www.phpguru.org_4849532196/.HTML5_donut/bak/pie.js.bak +A RGraph/www.phpguru.org_4849532196/.HTML5_donut/bak/index.html.bak +A RGraph/www.phpguru.org_4849532196/.HTML5_donut/bak/index.php.bak +A RGraph/www.phpguru.org_4849532196/.HTML5_donut/index.php +A RGraph/www.phpguru.org_4849532196/pop3 +A RGraph/www.phpguru.org_4849532196/pop3/POP3_example.phps +A RGraph/www.phpguru.org_4849532196/pop3/POP3.phps +A RGraph/www.phpguru.org_4849532196/dynCalendar +A RGraph/www.phpguru.org_4849532196/dynCalendar/dynCalendar.zip +A RGraph/www.phpguru.org_4849532196/rgraph.html +A RGraph/www.phpguru.org_4849532196/HTTP_Request +A RGraph/www.phpguru.org_4849532196/HTTP_Request/Request.phps +A RGraph/www.phpguru.org_4849532196/HTTP_Request/download-progress.phps +A RGraph/www.phpguru.org_4849532196/HTTP_Request/example.phps +A RGraph/www.phpguru.org_4849532196/HTTP_Request/Listener.phps +A RGraph/www.phpguru.org_4849532196/PCRE Cheat Sheet +A RGraph/www.phpguru.org_4849532196/PCRE Cheat Sheet/PHP PCRE Cheat Sheet.pdf +A RGraph/www.phpguru.org_4849532196/benchmark +A RGraph/www.phpguru.org_4849532196/benchmark/class.phps +A RGraph/www.phpguru.org_4849532196/benchmark/function.phps +A RGraph/www.phpguru.org_4849532196/Rtemplate +A RGraph/www.phpguru.org_4849532196/messaging2 +A RGraph/www.phpguru.org_4849532196/messaging2/Messages2.php +A RGraph/www.phpguru.org_4849532196/messaging2/green_tick2.png +A RGraph/www.phpguru.org_4849532196/messaging2/example.php +A RGraph/www.phpguru.org_4849532196/messaging2/Messages2.phps +A RGraph/www.phpguru.org_4849532196/messaging2/yellow_exclamation.png +A RGraph/www.phpguru.org_4849532196/messaging2/example.phps +A RGraph/www.phpguru.org_4849532196/messaging2/yellow_exclamation2.png +A RGraph/www.phpguru.org_4849532196/messaging2/red_cross.png +A RGraph/www.phpguru.org_4849532196/messaging2/red_cross2.png +A RGraph/www.phpguru.org_4849532196/messaging2/green_tick.png +A RGraph/www.phpguru.org_4849532196/dynContext +A RGraph/www.phpguru.org_4849532196/dynContext/dynContext-1.3.1.tar.gz +A RGraph/www.phpguru.org_4849532196/TextualNumber +A RGraph/www.phpguru.org_4849532196/TextualNumber/TextualNumber.phps +A RGraph/www.phpguru.org_4849532196/static_tabstrip +A RGraph/www.phpguru.org_4849532196/static_tabstrip/example.php +A RGraph/www.phpguru.org_4849532196/static_tabstrip/example.phps +A RGraph/www.phpguru.org_4849532196/static_tabstrip/Static_Tabstrip.php +A RGraph/www.phpguru.org_4849532196/static_tabstrip/images +A RGraph/www.phpguru.org_4849532196/static_tabstrip/images/tab_active_tl.png +A RGraph/www.phpguru.org_4849532196/static_tabstrip/images/tab_tl.png +A RGraph/www.phpguru.org_4849532196/static_tabstrip/images/tab_active_tr.png +A RGraph/www.phpguru.org_4849532196/static_tabstrip/images/tab_tr.png +A RGraph/www.phpguru.org_4849532196/static_tabstrip/Static_Tabstrip.css +A RGraph/www.phpguru.org_4849532196/static_tabstrip/Static_Tabstrip.phps +A RGraph/www.phpguru.org_4849532196/image_rotate +A RGraph/www.phpguru.org_4849532196/image_rotate/right.png +A RGraph/www.phpguru.org_4849532196/image_rotate/rotate.html +A RGraph/www.phpguru.org_4849532196/image_rotate/reset.png +A RGraph/www.phpguru.org_4849532196/image_rotate/plus.png +A RGraph/www.phpguru.org_4849532196/image_rotate/up.png +A RGraph/www.phpguru.org_4849532196/image_rotate/down.png +A RGraph/www.phpguru.org_4849532196/image_rotate/rotate_left.png +A RGraph/www.phpguru.org_4849532196/image_rotate/left.png +A RGraph/www.phpguru.org_4849532196/image_rotate/minus.png +A RGraph/www.phpguru.org_4849532196/image_rotate/rotate_right.png +A RGraph/www.phpguru.org_4849532196/Console +A RGraph/www.phpguru.org_4849532196/Console/test.phps +A RGraph/www.phpguru.org_4849532196/Console/Console.phps +A RGraph/www.phpguru.org_4849532196/windowskey +A RGraph/www.phpguru.org_4849532196/windowskey/cheat_sheet.doc +A RGraph/www.phpguru.org_4849532196/windowskey/cheat_sheet.pdf +A RGraph/www.phpguru.org_4849532196/treeBoard +A RGraph/www.phpguru.org_4849532196/treeBoard/treeBoard.tar.gz +A RGraph/www.phpguru.org_4849532196/smtp5 +A RGraph/www.phpguru.org_4849532196/smtp5/release +A RGraph/www.phpguru.org_4849532196/smtp5/example.php +A RGraph/www.phpguru.org_4849532196/smtp5/example.phps +A RGraph/www.phpguru.org_4849532196/smtp5/SMTP5.zip +A RGraph/www.phpguru.org_4849532196/smtp5/smtp.php +A RGraph/www.phpguru.org_4849532196/smtp5/index.html +A RGraph/www.phpguru.org_4849532196/smtp5/smtp.phps +A RGraph/www.phpguru.org_4849532196/mime.decode +A RGraph/www.phpguru.org_4849532196/mime.decode/mime.decode.zip +A RGraph/www.phpguru.org_4849532196/.htaccess +A RGraph/www.phpguru.org_4849532196/messaging +A RGraph/www.phpguru.org_4849532196/messaging/exclamation-yellow.jpg +A RGraph/www.phpguru.org_4849532196/messaging/Message.phps +A RGraph/www.phpguru.org_4849532196/csharp +A RGraph/www.phpguru.org_4849532196/csharp/getopt +A RGraph/www.phpguru.org_4849532196/csharp/getopt/GetOpt.zip +A RGraph/www.phpguru.org_4849532196/csharp/SQLite.NET +A RGraph/www.phpguru.org_4849532196/csharp/SQLite.NET/SQLite.NET-1.0.0.zip +A RGraph/www.phpguru.org_4849532196/csharp/SQLite.NET/SQLite.NET.2.0.1.zip +A RGraph/www.phpguru.org_4849532196/csharp/ConsoleTable +A RGraph/www.phpguru.org_4849532196/csharp/ConsoleTable/ConsoleTable.cs +A RGraph/www.phpguru.org_4849532196/.HTML5_radar +A RGraph/www.phpguru.org_4849532196/.HTML5_radar/bak +A RGraph/www.phpguru.org_4849532196/.HTML5_radar/bak/basic.html +A RGraph/www.phpguru.org_4849532196/.HTML5_radar/bak/RadarChart.js +A RGraph/www.phpguru.org_4849532196/.HTML5_radar/bak/index.html +A RGraph/www.phpguru.org_4849532196/.HTML5_radar/bak/_index.php +A RGraph/www.phpguru.org_4849532196/.HTML5_radar/index.php +A RGraph/www.phpguru.org_4849532196/sortAlgorithms +A RGraph/www.phpguru.org_4849532196/sortAlgorithms/sorting.phps +A RGraph/www.phpguru.org_4849532196/BrowserDetection +A RGraph/www.phpguru.org_4849532196/BrowserDetection/UserAgent.php +A RGraph/www.phpguru.org_4849532196/BrowserDetection/test.php +A RGraph/www.phpguru.org_4849532196/BrowserDetection/UserAgent.phps +A RGraph/www.phpguru.org_4849532196/BrowserDetection/test.phps +A RGraph/www.phpguru.org_4849532196/search_input +A RGraph/www.phpguru.org_4849532196/search_input/index.phps +A RGraph/www.phpguru.org_4849532196/search_input/search.png +A RGraph/www.phpguru.org_4849532196/search_input/index.php +A RGraph/www.phpguru.org_4849532196/RPC_for_PHP5 +A RGraph/www.phpguru.org_4849532196/RPC_for_PHP5/RPC for PHP5-1.0.zip +A RGraph/www.phpguru.org_4849532196/curtains +A RGraph/www.phpguru.org_4849532196/curtains/curtains.js +A RGraph/www.phpguru.org_4849532196/curtains/example.html +A RGraph/www.phpguru.org_4849532196/rtemplate +A RGraph/www.phpguru.org_4849532196/rtemplate/example.php +A RGraph/www.phpguru.org_4849532196/rtemplate/RTemplate.php +A RGraph/www.phpguru.org_4849532196/rtemplate/docs +A RGraph/www.phpguru.org_4849532196/rtemplate/docs/index.html +A RGraph/www.phpguru.org_4849532196/rtemplate/release.sh +A RGraph/www.phpguru.org_4849532196/rtemplate/inc.html +A RGraph/www.phpguru.org_4849532196/rtemplate/index.php +A RGraph/www.phpguru.org_4849532196/rtemplate/RTemplate.zip +A RGraph/www.phpguru.org_4849532196/rtemplate/example.html +A RGraph/www.phpguru.org_4849532196/Tree_array +A RGraph/www.phpguru.org_4849532196/Tree_array/Tree.phps +A RGraph/www.phpguru.org_4849532196/rss2email +A RGraph/www.phpguru.org_4849532196/rss2email/RSS2email.phps +A RGraph/www.phpguru.org_4849532196/footer.html +A RGraph/www.phpguru.org_4849532196/PHP_Unserialize +A RGraph/www.phpguru.org_4849532196/PHP_Unserialize/PHP_Unserialize.php +A RGraph/www.phpguru.org_4849532196/PHP_Unserialize/PHP_Unserialize.phps +A RGraph/www.phpguru.org_4849532196/PHP_Unserialize/PHP_Unserialize.js +A RGraph/www.phpguru.org_4849532196/Cache +A RGraph/www.phpguru.org_4849532196/Cache/Cache.zip +A RGraph/www.phpguru.org_4849532196/.HTML5_pie +A RGraph/www.phpguru.org_4849532196/.HTML5_pie/bak +A RGraph/www.phpguru.org_4849532196/.HTML5_pie/bak/pie.html +A RGraph/www.phpguru.org_4849532196/.HTML5_pie/bak/pie.php +A RGraph/www.phpguru.org_4849532196/.HTML5_pie/bak/pie.js +A RGraph/www.phpguru.org_4849532196/.HTML5_pie/bak/index.html +A RGraph/www.phpguru.org_4849532196/.HTML5_pie/bak/_index.php +A RGraph/www.phpguru.org_4849532196/.HTML5_pie/index.php +A RGraph/www.phpguru.org_4849532196/articles +A RGraph/www.phpguru.org_4849532196/articles/pop3.html +A RGraph/www.phpguru.org_4849532196/articles/phpSQLiteAdmin.html +A RGraph/www.phpguru.org_4849532196/articles/js-registry.html +A RGraph/www.phpguru.org_4849532196/articles/dyncalendar.html +A RGraph/www.phpguru.org_4849532196/articles/ApplicationStructure.html +A RGraph/www.phpguru.org_4849532196/articles/treemenu.html +A RGraph/www.phpguru.org_4849532196/articles/TableEditorComparison.html +A RGraph/www.phpguru.org_4849532196/articles/dynContext.example.html +A RGraph/www.phpguru.org_4849532196/articles/pleasewait.html +A RGraph/www.phpguru.org_4849532196/articles/getopt.html +A RGraph/www.phpguru.org_4849532196/articles/auth.sasl.html +A RGraph/www.phpguru.org_4849532196/articles/messages.html +A RGraph/www.phpguru.org_4849532196/articles/html5-dom-storage.html +A RGraph/www.phpguru.org_4849532196/articles/PariahBB.html +A RGraph/www.phpguru.org_4849532196/articles/mime.decode.html +A RGraph/www.phpguru.org_4849532196/articles/libComments.html +A RGraph/www.phpguru.org_4849532196/articles/webkit-transformations.html +A RGraph/www.phpguru.org_4849532196/articles/search.replace.html +A RGraph/www.phpguru.org_4849532196/articles/google-checkout.html +A RGraph/www.phpguru.org_4849532196/articles/file.html +A RGraph/www.phpguru.org_4849532196/articles/license.html +A RGraph/www.phpguru.org_4849532196/articles/TextualNumbers.html +A RGraph/www.phpguru.org_4849532196/articles/smtp.html +A RGraph/www.phpguru.org_4849532196/articles/SQLite.NET.html +A RGraph/www.phpguru.org_4849532196/articles/net.url.html +A RGraph/www.phpguru.org_4849532196/articles/firefox3.5.html +A RGraph/www.phpguru.org_4849532196/articles/console.table.html +A RGraph/www.phpguru.org_4849532196/articles/faqs.html +A RGraph/www.phpguru.org_4849532196/articles/clock.html +A RGraph/www.phpguru.org_4849532196/articles/Caching.html +A RGraph/www.phpguru.org_4849532196/articles/User-Agent2.html +A RGraph/www.phpguru.org_4849532196/articles/PHP_Unserialize.html +A RGraph/www.phpguru.org_4849532196/articles/backlinks.html +A RGraph/www.phpguru.org_4849532196/articles/positioning.html +A RGraph/www.phpguru.org_4849532196/articles/seo-tips.html +A RGraph/www.phpguru.org_4849532196/articles/geolocation.html +A RGraph/www.phpguru.org_4849532196/articles/css-reflections.html +A RGraph/www.phpguru.org_4849532196/articles/templating.html +A RGraph/www.phpguru.org_4849532196/articles/rgraph-text.html +A RGraph/www.phpguru.org_4849532196/articles/http.request.html +A RGraph/www.phpguru.org_4849532196/articles/html5-desktop-notifications.html +A RGraph/www.phpguru.org_4849532196/articles/canvas.html +A RGraph/www.phpguru.org_4849532196/articles/css3.html +A RGraph/www.phpguru.org_4849532196/articles/datagrid.html +A RGraph/www.phpguru.org_4849532196/articles/rgraph.html +A RGraph/www.phpguru.org_4849532196/articles/browser.html +A RGraph/www.phpguru.org_4849532196/articles/Modal-Dialog.html +A RGraph/www.phpguru.org_4849532196/articles/FileIterator.html +A RGraph/www.phpguru.org_4849532196/articles/TextualNumber.html +A RGraph/www.phpguru.org_4849532196/articles/dynContext.html +A RGraph/www.phpguru.org_4849532196/articles/static_tabstrip.html +A RGraph/www.phpguru.org_4849532196/articles/tree.html +A RGraph/www.phpguru.org_4849532196/articles/smiley.html +A RGraph/www.phpguru.org_4849532196/articles/windowskey.html +A RGraph/www.phpguru.org_4849532196/articles/Rmail.html +A RGraph/www.phpguru.org_4849532196/articles/search.html +A RGraph/www.phpguru.org_4849532196/articles/ie6-dies.html +A RGraph/www.phpguru.org_4849532196/articles/html5-examples.html +A RGraph/www.phpguru.org_4849532196/articles/PorterStemmer.html +A RGraph/www.phpguru.org_4849532196/articles/ConsoleTable.html +A RGraph/www.phpguru.org_4849532196/articles/breakout.html +A RGraph/www.phpguru.org_4849532196/articles/layerfun.html +A RGraph/www.phpguru.org_4849532196/articles/attributes.html +A RGraph/www.phpguru.org_4849532196/articles/html5.html +A RGraph/www.phpguru.org_4849532196/articles/TableEditor.html +A RGraph/www.phpguru.org_4849532196/articles/AutoComplete.html +A RGraph/www.phpguru.org_4849532196/articles/Cache.html +A RGraph/www.phpguru.org_4849532196/articles/rmail.html +A RGraph/www.phpguru.org_4849532196/articles/canvas-example.html +A RGraph/www.phpguru.org_4849532196/articles/css-gradients.html +A RGraph/www.phpguru.org_4849532196/articles/html5-form-inputs.html +A RGraph/www.phpguru.org_4849532196/articles/sieve.html +A RGraph/www.phpguru.org_4849532196/articles/template.html +A RGraph/www.phpguru.org_4849532196/.HTML5_text +A RGraph/www.phpguru.org_4849532196/.HTML5_text/_index.php +A RGraph/www.phpguru.org_4849532196/.HTML5_text/index.php +A RGraph/www.phpguru.org_4849532196/Console_ProgressBar +A RGraph/www.phpguru.org_4849532196/Console_ProgressBar/Console_ProgressBar.php +A RGraph/www.phpguru.org_4849532196/Console_ProgressBar/example.php +A RGraph/www.phpguru.org_4849532196/Console_ProgressBar/Console_ProgressBar.phps +A RGraph/www.phpguru.org_4849532196/Console_ProgressBar/example.phps +A RGraph/www.phpguru.org_4849532196/template +A RGraph/www.phpguru.org_4849532196/libComments +A RGraph/www.phpguru.org_4849532196/libComments/libComments-1.0.1.zip +A RGraph/www.phpguru.org_4849532196/ModalDialog +A RGraph/www.phpguru.org_4849532196/ModalDialog/ModalDialog.css +A RGraph/www.phpguru.org_4849532196/ModalDialog/ModalDialog.js +A RGraph/www.phpguru.org_4849532196/ModalDialog/fade.js +A RGraph/www.phpguru.org_4849532196/ModalDialog/example.html +A RGraph/www.phpguru.org_4849532196/.HTML5_bargraph +A RGraph/www.phpguru.org_4849532196/.HTML5_bargraph/bak +A RGraph/www.phpguru.org_4849532196/.HTML5_bargraph/bak/index.php.bak +A RGraph/www.phpguru.org_4849532196/.HTML5_bargraph/bak/BarChart.js.bak +A RGraph/www.phpguru.org_4849532196/.HTML5_bargraph/index.php +A RGraph/scripts +A RGraph/scripts/social.php +A RGraph/scripts/diff.sh +A RGraph/scripts/replace.php +A RGraph/scripts/generateSitemap.php +A RGraph/scripts/tests.php +A RGraph/scripts/release.sh +A RGraph/scripts/index.html +A RGraph/scripts/minify +A RGraph/docs +A RGraph/docs/async.html +A RGraph/docs/color.html +A RGraph/docs/effects.html +A RGraph/docs/.CHANGELOG.txt +A RGraph/docs/waterfall.html +A RGraph/docs/external.html +A RGraph/docs/annotate_persist.html +A RGraph/docs/animation_segments.html +A RGraph/docs/context.html +A RGraph/docs/ingraph.html +A RGraph/docs/adjusting.html +A RGraph/docs/css.html +A RGraph/docs/vprogress.html +A RGraph/docs/thermometer.html +A RGraph/docs/adjusting_line.html +A RGraph/docs/licensing.html +A RGraph/docs/pie.html +A RGraph/docs/tooltips.html +A RGraph/docs/basic_tooltips.html +A RGraph/docs/adjusting_rose.html +A RGraph/docs/setconfig.html +A RGraph/docs/png.html +A RGraph/docs/adjusting_hprogress.html +A RGraph/docs/adjusting_gantt.html +A RGraph/docs/line.html +A RGraph/docs/funnel.html +A RGraph/docs/gauge.html +A RGraph/docs/donut.html +A RGraph/docs/misc.html +A RGraph/docs/animation-effects.html +A RGraph/docs/msie.html +A RGraph/docs/gutters.html +A RGraph/docs/adjusting_radar.html +A RGraph/docs/annotating.html +A RGraph/docs/iframe.html +A RGraph/docs/events.html +A RGraph/docs/rose.html +A RGraph/docs/api.html +A RGraph/docs/keys.html +A RGraph/docs/issues.html +A RGraph/docs/meter.html +A RGraph/docs/hprogress.html +A RGraph/docs/gantt.html +A RGraph/docs/.BC.txt +A RGraph/docs/odo.html +A RGraph/docs/bulk-discount.html +A RGraph/docs/zoom.html +A RGraph/docs/image2url.html +A RGraph/docs/downloads +A RGraph/docs/radar.html +A RGraph/docs/fuel.html +A RGraph/docs/.htaccess +A RGraph/docs/hbar.html +A RGraph/docs/adjusting_bar.html +A RGraph/docs/combine.html +A RGraph/docs/what-is-html5-canvas.html +A RGraph/docs/basic_combined.html +A RGraph/docs/domcontentloaded.html +A RGraph/docs/dynamic.html +A RGraph/docs/forum +A RGraph/docs/rscatter.html +A RGraph/docs/zoom_thumbnail.html +A RGraph/docs/bipolar.html +A RGraph/docs/resizing.html +A RGraph/docs/.TODO.txt +A RGraph/docs/iframe-setup.html +A RGraph/docs/adjusting_vprogress.html +A RGraph/docs/adjusting_thermometer.html +A RGraph/docs/led.html +A RGraph/docs/bar.html +A RGraph/docs/scatter.html +A RGraph/docs/line_filled.html +A RGraph/docs/index.html +A RGraph/docs/forums +A RGraph/docs/examples +A RGraph/downloads +A RGraph/invoice.html +A RGraph/tools +A RGraph/tools/tabs.css +A RGraph/tools/mail +A RGraph/tools/mail/mime +A RGraph/tools/mail/mime/mimePart.php +A RGraph/tools/mail/mime/smtp.php +A RGraph/tools/mail/mime/htmlMimeMail5.php +A RGraph/tools/mail/mime/RFC822.php +A RGraph/tools/mail/index.html +A RGraph/tools/index.html +A RGraph/tools/.htaccess +A RGraph/write-a-testimonial.html +A RGraph/tests +A RGraph/tests/_pie.html +A RGraph/tests/2011-10-30 +A RGraph/tests/2011-10-30/combine.html +A RGraph/tests/2011-10-30/pie_roundrobin.html +A RGraph/tests/2011-10-30/filled.html +A RGraph/tests/2011-10-30/scatter.inside.html +A RGraph/tests/2011-10-30/waterfall_grow.html +A RGraph/tests/2011-10-30/bar_ymin.html +A RGraph/tests/2011-10-30/pie_programmatic_explode.html +A RGraph/tests/2011-10-30/line-trace.html +A RGraph/tests/2011-10-30/boxplot_tooltips.html +A RGraph/tests/2011-10-30/titles.html +A RGraph/tests/2011-10-30/meter_grow.html +A RGraph/tests/2011-10-30/pie_interactive.html +A RGraph/tests/2011-10-30/pie_north_axis.html +A RGraph/tests/pie_rr.html +A RGraph/tests/sofax.html +A RGraph/tests/setConfig.html +A RGraph/tests/nu.html +A RGraph/tests/annotate_persist.html +A RGraph/tests/rotated-text.html +A RGraph/tests/scatter.crosshairs.html +A RGraph/tests/interactive_key.html +A RGraph/tests/2011-08-31 +A RGraph/tests/2011-08-31/scatter_scale.html +A RGraph/tests/2011-08-31/pie.html +A RGraph/tests/2011-08-31/animate.html +A RGraph/tests/2011-08-31/radar_specific.html +A RGraph/tests/2011-08-31/hprogress_getbar.html +A RGraph/tests/2011-08-31/rscatter_getpoint.html +A RGraph/tests/2011-08-31/radar_getpoint.html +A RGraph/tests/2011-08-31/requestAnimationFrame.html +A RGraph/tests/2011-08-31/filled_line.html +A RGraph/tests/2011-08-31/numyticks.html +A RGraph/tests/2011-08-31/radar.html +A RGraph/tests/2011-08-31/vprogress.html +A RGraph/tests/2011-08-31/fuel.html +A RGraph/tests/2011-08-31/stepped_line.html +A RGraph/tests/switcheroo.html +A RGraph/tests/scatter_labels.html +A RGraph/tests/sofax.js +A RGraph/tests/frame.html +A RGraph/tests/_fuel.html +A RGraph/tests/thomas.html +A RGraph/tests/noaxes.html +A RGraph/tests/event_removal.html +A RGraph/tests/scatter_animated.html +A RGraph/tests/data.html +A RGraph/tests/pie_bug.html +A RGraph/tests/null.html +A RGraph/tests/_hbar.html +A RGraph/tests/scatter_line.html +A RGraph/tests/ymin.html +A RGraph/tests/_odo.html +A RGraph/tests/_waterfall.html +A RGraph/tests/hbar_scale.html +A RGraph/tests/2011-07-30 +A RGraph/tests/2011-07-30/bipolar_getbar.html +A RGraph/tests/2011-07-30/line_tooltips_index2.html +A RGraph/tests/2011-07-30/stacked_bar_colors.html +A RGraph/tests/2011-07-30/funnel_getsegment.html +A RGraph/tests/2011-07-30/scale.specific.html +A RGraph/tests/_funnel.html +A RGraph/tests/_rscatter.html +A RGraph/tests/line.html +A RGraph/tests/css-2D-transforms.html +A RGraph/tests/gauge.html +A RGraph/tests/_vprogress.html +A RGraph/tests/scatter_invert.html +A RGraph/tests/n.html +A RGraph/tests/gutters.html +A RGraph/tests/pie_grow2.html +A RGraph/tests/combo.html +A RGraph/tests/values.html +A RGraph/tests/animate2.html +A RGraph/tests/snap.html +A RGraph/tests/formatter.html +A RGraph/tests/line_empty.html +A RGraph/tests/line-anim.html +A RGraph/tests/offsetx.html +A RGraph/tests/bronson.html +A RGraph/tests/anim.html +A RGraph/tests/zoom.html +A RGraph/tests/hbar.sequential.html +A RGraph/tests/clear.html +A RGraph/tests/_gauge.html +A RGraph/tests/_bipolar.html +A RGraph/tests/box.html +A RGraph/tests/2011-09-24 +A RGraph/tests/2011-09-24/waterfall_axes.html +A RGraph/tests/2011-09-24/hbar-sequential-colors.html +A RGraph/tests/2011-09-24/scatter_xscale.html +A RGraph/tests/2011-09-24/curvy.html +A RGraph/tests/2011-05-28 +A RGraph/tests/2011-05-28/scatter_getpoint.html +A RGraph/tests/2011-05-28/background-images.html +A RGraph/tests/2011-05-28/xaxispos_bar.html +A RGraph/tests/2011-05-28/context.html +A RGraph/tests/2011-05-28/exploded.html +A RGraph/tests/2011-05-28/led.html +A RGraph/tests/2011-05-28/xaxispos_line.html +A RGraph/tests/2011-05-28/pie_coords.html +A RGraph/tests/2011-05-28/hbar.above.html +A RGraph/tests/2011-05-28/invert.html +A RGraph/tests/2011-05-28/filled_line_accumulative.html +A RGraph/tests/2011-05-28/odo.key.html +A RGraph/tests/2011-05-28/ie8-clear.html +A RGraph/tests/2011-05-28/gutters +A RGraph/tests/2011-05-28/gutters/meter.html +A RGraph/tests/2011-05-28/gutters/hprogress.html +A RGraph/tests/2011-05-28/gutters/hbar.html +A RGraph/tests/2011-05-28/gutters/tradar.html +A RGraph/tests/2011-05-28/gutters/pie.html +A RGraph/tests/2011-05-28/gutters/gantt.html +A RGraph/tests/2011-05-28/gutters/odo.html +A RGraph/tests/2011-05-28/gutters/waterfall.html +A RGraph/tests/2011-05-28/gutters/rscatter.html +A RGraph/tests/2011-05-28/gutters/line.html +A RGraph/tests/2011-05-28/gutters/funnel.html +A RGraph/tests/2011-05-28/gutters/bipolar.html +A RGraph/tests/2011-05-28/gutters/vprogress.html +A RGraph/tests/2011-05-28/gutters/thermometer.html +A RGraph/tests/2011-05-28/gutters/led.html +A RGraph/tests/2011-05-28/gutters/bar.html +A RGraph/tests/2011-05-28/gutters/scatter.html +A RGraph/tests/2011-05-28/gutters/rose.html +A RGraph/tests/2011-05-28/thermometer.html +A RGraph/tests/dyn.html +A RGraph/tests/meter_resize.html +A RGraph/tests/pie_start_angle +A RGraph/tests/pie_start_angle/test.html +A RGraph/tests/pie_start_angle/RGraph.pie.js +A RGraph/tests/pie_snap.html +A RGraph/tests/border-radius.html +A RGraph/tests/_led.html +A RGraph/tests/_bar.html +A RGraph/tests/thursday.html +A RGraph/tests/_scatter.html +A RGraph/tests/stacked_rose.html +A RGraph/tests/__template.html +A RGraph/tests/ie8-line.html +A RGraph/tests/_hprogress.html +A RGraph/tests/_meter.html +A RGraph/tests/combine.html +A RGraph/tests/_gantt.html +A RGraph/tests/xscale.html +A RGraph/tests/2011-07-12 +A RGraph/tests/2011-07-12/getShape.html +A RGraph/tests/2011-07-12/triangle_ticks.html +A RGraph/tests/2011-07-12/hbar.sequential.html +A RGraph/tests/2011-07-12/rose_tooltips_event.html +A RGraph/tests/2011-07-12/stacked_rose.html +A RGraph/tests/2011-07-12/donut_color.html +A RGraph/tests/2011-07-12/scale.html +A RGraph/tests/2011-07-12/hprogress_ticks.html +A RGraph/tests/2011-07-12/zoom_click.html +A RGraph/tests/2011-07-12/meter.value.text.html +A RGraph/tests/2011-07-12/non-equi-angular_rose.html +A RGraph/tests/chrome6-shadow.html +A RGraph/tests/_line.html +A RGraph/tests/_radar.html +A RGraph/tests/multiple_needles.html +A RGraph/tests/_thermometer.html +A RGraph/tests/sequential_colors.html +A RGraph/tests/line-reveal.html +A RGraph/tests/line_filled.html +A RGraph/tests/video.html +A RGraph/tests/_rose.html +A RGraph/tests/curvy.html +A RGraph/tests/meter_ranges.html +A RGraph/images +A RGraph/images/barg2.png +A RGraph/images/barg4.png +A RGraph/images/analogo.gif +A RGraph/images/twitter.png +A RGraph/images/barg8.png +A RGraph/images/barc1.gif +A RGraph/images/bara32.png +A RGraph/images/barg2.gif +A RGraph/images/bare32.png +A RGraph/images/bard16.png +A RGraph/images/barg4.gif +A RGraph/images/bari32.png +A RGraph/images/barh16.png +A RGraph/images/barg8.gif +A RGraph/images/html2.png +A RGraph/images/alex.png +A RGraph/images/bard2.png +A RGraph/images/sqg.png +A RGraph/images/bara32.gif +A RGraph/images/bard4.png +A RGraph/images/barh1.png +A RGraph/images/bare32.gif +A RGraph/images/bard16.gif +A RGraph/images/bard8.png +A RGraph/images/bari32.gif +A RGraph/images/barh16.gif +A RGraph/images/html2.gif +A RGraph/images/download-stable-sml.png +A RGraph/images/bard2.gif +A RGraph/images/bard4.gif +A RGraph/images/barh1.gif +A RGraph/images/bard8.gif +A RGraph/images/bara2.png +A RGraph/images/bara4.png +A RGraph/images/bare1.png +A RGraph/images/bara8.png +A RGraph/images/bari2.png +A RGraph/images/bari4.png +A RGraph/images/google_+1_button.png +A RGraph/images/bari8.png +A RGraph/images/download.png +A RGraph/images/bara2.gif +A RGraph/images/download-beta-sml.png +A RGraph/images/bara4.gif +A RGraph/images/bare1.gif +A RGraph/images/favicon.ico +A RGraph/images/icons_combined.png +A RGraph/images/reddit.png +A RGraph/images/bard32.png +A RGraph/images/bara8.gif +A RGraph/images/barc16.png +A RGraph/images/water.jpg +A RGraph/images/bari2.gif +A RGraph/images/barh32.png +A RGraph/images/bari4.gif +A RGraph/images/barg16.png +A RGraph/images/context.png +A RGraph/images/bari8.gif +A RGraph/images/barb1.png +A RGraph/images/.htaccess +A RGraph/images/barf2.png +A RGraph/images/chrome_logo.png +A RGraph/images/barf4.png +A RGraph/images/bard32.gif +A RGraph/images/barj1.png +A RGraph/images/barc16.gif +A RGraph/images/introspection.png +A RGraph/images/barh32.gif +A RGraph/images/barf8.png +A RGraph/images/border-radius.png +A RGraph/images/barg16.gif +A RGraph/images/sq0.png +A RGraph/images/sq2.png +A RGraph/images/coins.jpg +A RGraph/images/sq4.png +A RGraph/images/barb1.gif +A RGraph/images/facebook.png +A RGraph/images/sq6.png +A RGraph/images/png.icon.png +A RGraph/images/sq8.png +A RGraph/images/barf2.gif +A RGraph/images/barf4.gif +A RGraph/images/barj1.gif +A RGraph/images/barf8.gif +A RGraph/images/favicon.png +A RGraph/images/barc2.png +A RGraph/images/barc4.png +A RGraph/images/barg1.png +A RGraph/images/logo.jpg +A RGraph/images/barc8.png +A RGraph/images/structure.png +A RGraph/images/paypal.gif +A RGraph/images/barc2.gif +A RGraph/images/fuel-pump.png +A RGraph/images/stumble.png +A RGraph/images/barc32.png +A RGraph/images/barc4.gif +A RGraph/images/barg1.gif +A RGraph/images/barb16.png +A RGraph/images/barg32.png +A RGraph/images/barc8.gif +A RGraph/images/download-beta.png +A RGraph/images/search_party.jpg +A RGraph/images/barf16.png +A RGraph/images/barj16.png +A RGraph/images/bard1.png +A RGraph/images/barc32.gif +A RGraph/images/barh2.png +A RGraph/images/barb16.gif +A RGraph/images/barh4.png +A RGraph/images/barg32.gif +A RGraph/images/barf16.gif +A RGraph/images/barh8.png +A RGraph/images/barj16.gif +A RGraph/images/rss.png +A RGraph/images/merry-christmas-snowman.png +A RGraph/images/bard1.gif +A RGraph/images/barh2.gif +A RGraph/images/barh4.gif +A RGraph/images/rgraph.logo.png +A RGraph/images/bg.jpg +A RGraph/images/barh8.gif +A RGraph/images/bara1.png +A RGraph/images/bare2.png +A RGraph/images/friendfeed.png +A RGraph/images/bare4.png +A RGraph/images/bari1.png +A RGraph/images/logo.png +A RGraph/images/bare8.png +A RGraph/images/bara1.gif +A RGraph/images/unicef.png +A RGraph/images/barb32.png +A RGraph/images/bara16.png +A RGraph/images/bare2.gif +A RGraph/images/googlegroups.png +A RGraph/images/bare4.gif +A RGraph/images/bari1.gif +A RGraph/images/barf32.png +A RGraph/images/bare16.png +A RGraph/images/bn.personal.png +A RGraph/images/bare8.gif +A RGraph/images/barj32.png +A RGraph/images/shared +A RGraph/images/shared/me-in-drag.png +A RGraph/images/shared/.htaccess +A RGraph/images/bari16.png +A RGraph/images/barb2.png +A RGraph/images/bn.business.png +A RGraph/images/new.png +A RGraph/images/barb4.png +A RGraph/images/barf1.png +A RGraph/images/barb32.gif +A RGraph/images/bara16.gif +A RGraph/images/barb8.png +A RGraph/images/buy.png +A RGraph/images/barj2.png +A RGraph/images/barf32.gif +A RGraph/images/atom.png +A RGraph/images/bare16.gif +A RGraph/images/barj4.png +A RGraph/images/barj32.gif +A RGraph/images/sq1.png +A RGraph/images/bari16.gif +A RGraph/images/barj8.png +A RGraph/images/sq3.png +A RGraph/images/sq5.png +A RGraph/images/barb2.gif +A RGraph/images/sq7.png +A RGraph/images/barb4.gif +A RGraph/images/barf1.gif +A RGraph/images/sq9.png +A RGraph/images/barb8.gif +A RGraph/images/download-stable.png +A RGraph/images/analogo.png +A RGraph/images/delicious.png +A RGraph/images/barj2.gif +A RGraph/images/barj4.gif +A RGraph/images/barj8.gif +A RGraph/images/index.html +A RGraph/images/bg.png +A RGraph/images/barc1.png +A RGraph/images/rss_big.png +A RGraph/images/buzz.png +A RGraph/info.txt +A RGraph/404.html +A RGraph/.htaccess +A RGraph/common.php +A RGraph/corner-gauges.png +A RGraph/robots.txt +A RGraph/admin +A RGraph/admin/publicise +A RGraph/admin/publicise/index.php +A RGraph/admin/load +A RGraph/admin/load/index.php +A RGraph/admin/comments +A RGraph/admin/comments/comments +A RGraph/admin/comments/comments/index.php +A RGraph/admin/comments/index.php +A RGraph/admin/forum +A RGraph/admin/forum/index.php +A RGraph/admin/config.php +A RGraph/admin/index.php +A RGraph/admin/invoice.html +A RGraph/admin/resellers +A RGraph/admin/resellers/index.php +A RGraph/admin/hosts +A RGraph/admin/hosts/trace.php +A RGraph/admin/hosts/index.html +A RGraph/admin/phpMyAdmin-3.4.3.1-english.tar.gz +A RGraph/admin/mysql +A RGraph/admin/mysql/phpdoctor.ini +A RGraph/admin/mysql/db_printview.php +A RGraph/admin/mysql/phpmyadmin.css.php +A RGraph/admin/mysql/tbl_addfield.php +A RGraph/admin/mysql/server_replication.php +A RGraph/admin/mysql/server_import.php +A RGraph/admin/mysql/scripts +A RGraph/admin/mysql/scripts/upgrade.pl +A RGraph/admin/mysql/scripts/remove-incomplete-mo +A RGraph/admin/mysql/scripts/signon.php +A RGraph/admin/mysql/scripts/upgrade_tables_mysql_4_1_2+.sql +A RGraph/admin/mysql/scripts/openid.php +A RGraph/admin/mysql/scripts/update-po-foreign +A RGraph/admin/mysql/scripts/decode_bug.php +A RGraph/admin/mysql/scripts/convertcfg.pl +A RGraph/admin/mysql/scripts/create_tables.sql +A RGraph/admin/mysql/show_config_errors.php +A RGraph/admin/mysql/tbl_structure.php +A RGraph/admin/mysql/tbl_chart.php +A RGraph/admin/mysql/url.php +A RGraph/admin/mysql/README.VENDOR +A RGraph/admin/mysql/tbl_create.php +A RGraph/admin/mysql/schema_edit.php +A RGraph/admin/mysql/chk_rel.php +A RGraph/admin/mysql/server_export.php +A RGraph/admin/mysql/config.inc.php +A RGraph/admin/mysql/webapp.php +A RGraph/admin/mysql/pmd_save_pos.php +A RGraph/admin/mysql/db_import.php +A RGraph/admin/mysql/tbl_select.php +A RGraph/admin/mysql/main.php +A RGraph/admin/mysql/tbl_operations.php +A RGraph/admin/mysql/pmd_relation_upd.php +A RGraph/admin/mysql/js +A RGraph/admin/mysql/js/jquery +A RGraph/admin/mysql/js/jquery/jquery.json-2.2.js +A RGraph/admin/mysql/js/jquery/jquery-ui-1.8.custom.js +A RGraph/admin/mysql/js/jquery/jquery.qtip-1.0.0.min.js +A RGraph/admin/mysql/js/jquery/timepicker.js +A RGraph/admin/mysql/js/jquery/jquery-1.4.4.js +A RGraph/admin/mysql/js/jquery/jquery.sprintf.js +A RGraph/admin/mysql/js/db_structure.js +A RGraph/admin/mysql/js/config.js +A RGraph/admin/mysql/js/functions.js +A RGraph/admin/mysql/js/replication.js +A RGraph/admin/mysql/js/import.js +A RGraph/admin/mysql/js/db_search.js +A RGraph/admin/mysql/js/tbl_relation.js +A RGraph/admin/mysql/js/tbl_select.js +A RGraph/admin/mysql/js/export.js +A RGraph/admin/mysql/js/messages.php +A RGraph/admin/mysql/js/keyhandler.js +A RGraph/admin/mysql/js/tbl_change.js +A RGraph/admin/mysql/js/db_operations.js +A RGraph/admin/mysql/js/common.js +A RGraph/admin/mysql/js/update-location.js +A RGraph/admin/mysql/js/dom-drag.js +A RGraph/admin/mysql/js/pMap.js +A RGraph/admin/mysql/js/querywindow.js +A RGraph/admin/mysql/js/navigation.js +A RGraph/admin/mysql/js/indexes.js +A RGraph/admin/mysql/js/server_privileges.js +A RGraph/admin/mysql/js/sql.js +A RGraph/admin/mysql/js/server_synchronize.js +A RGraph/admin/mysql/js/tbl_structure.js +A RGraph/admin/mysql/js/cross_framing_protection.js +A RGraph/admin/mysql/Documentation.html +A RGraph/admin/mysql/db_export.php +A RGraph/admin/mysql/tbl_change.php +A RGraph/admin/mysql/prefs_manage.php +A RGraph/admin/mysql/changelog.php +A RGraph/admin/mysql/docs.css +A RGraph/admin/mysql/server_variables.php +A RGraph/admin/mysql/navigation.php +A RGraph/admin/mysql/server_binlog.php +A RGraph/admin/mysql/robots.txt +A RGraph/admin/mysql/tbl_indexes.php +A RGraph/admin/mysql/user_password.php +A RGraph/admin/mysql/schema_export.php +A RGraph/admin/mysql/Documentation.txt +A RGraph/admin/mysql/ChangeLog +A RGraph/admin/mysql/db_sql.php +A RGraph/admin/mysql/tbl_row_action.php +A RGraph/admin/mysql/index.php +A RGraph/admin/mysql/db_tracking.php +A RGraph/admin/mysql/pmd_display_field.php +A RGraph/admin/mysql/tbl_alter.php +A RGraph/admin/mysql/contrib +A RGraph/admin/mysql/contrib/swekey.sample.conf +A RGraph/admin/mysql/contrib/README +A RGraph/admin/mysql/contrib/htaccess +A RGraph/admin/mysql/setup +A RGraph/admin/mysql/setup/validate.php +A RGraph/admin/mysql/setup/scripts.js +A RGraph/admin/mysql/setup/lib +A RGraph/admin/mysql/setup/lib/index.lib.php +A RGraph/admin/mysql/setup/lib/ConfigGenerator.class.php +A RGraph/admin/mysql/setup/lib/common.inc.php +A RGraph/admin/mysql/setup/lib/form_processing.lib.php +A RGraph/admin/mysql/setup/lib/.htaccess +A RGraph/admin/mysql/setup/styles.css +A RGraph/admin/mysql/setup/config.php +A RGraph/admin/mysql/setup/frames +A RGraph/admin/mysql/setup/frames/form.inc.php +A RGraph/admin/mysql/setup/frames/menu.inc.php +A RGraph/admin/mysql/setup/frames/config.inc.php +A RGraph/admin/mysql/setup/frames/index.inc.php +A RGraph/admin/mysql/setup/frames/servers.inc.php +A RGraph/admin/mysql/setup/frames/.htaccess +A RGraph/admin/mysql/setup/index.php +A RGraph/admin/mysql/db_qbe.php +A RGraph/admin/mysql/import_status.php +A RGraph/admin/mysql/config +A RGraph/admin/mysql/db_datadict.php +A RGraph/admin/mysql/prefs_forms.php +A RGraph/admin/mysql/server_sql.php +A RGraph/admin/mysql/tbl_printview.php +A RGraph/admin/mysql/print.css +A RGraph/admin/mysql/view_create.php +A RGraph/admin/mysql/server_privileges.php +A RGraph/admin/mysql/themes +A RGraph/admin/mysql/themes/svg_gradient.php +A RGraph/admin/mysql/themes/pmahomme +A RGraph/admin/mysql/themes/pmahomme/jquery +A RGraph/admin/mysql/themes/pmahomme/jquery/images +A RGraph/admin/mysql/themes/pmahomme/jquery/images/ui-icons_2e83ff_256x240.png +A RGraph/admin/mysql/themes/pmahomme/jquery/images/ui-bg_glass_95_fef1ec_1x400.png +A RGraph/admin/mysql/themes/pmahomme/jquery/images/ui-icons_888888_256x240.png +A RGraph/admin/mysql/themes/pmahomme/jquery/images/ui-bg_glass_55_fbf9ee_1x400.png +A RGraph/admin/mysql/themes/pmahomme/jquery/images/ui-bg_glass_75_dadada_1x400.png +A RGraph/admin/mysql/themes/pmahomme/jquery/images/ui-bg_flat_75_ffffff_40x100.png +A RGraph/admin/mysql/themes/pmahomme/jquery/images/ui-bg_glass_75_e6e6e6_1x400.png +A RGraph/admin/mysql/themes/pmahomme/jquery/images/ui-bg_glass_65_ffffff_1x400.png +A RGraph/admin/mysql/themes/pmahomme/jquery/images/ui-bg_highlight-soft_75_cccccc_1x100.png +A RGraph/admin/mysql/themes/pmahomme/jquery/images/ui-icons_cd0a0a_256x240.png +A RGraph/admin/mysql/themes/pmahomme/jquery/images/ui-bg_flat_0_aaaaaa_40x100.png +A RGraph/admin/mysql/themes/pmahomme/jquery/images/ui-icons_454545_256x240.png +A RGraph/admin/mysql/themes/pmahomme/jquery/images/ui-icons_222222_256x240.png +A RGraph/admin/mysql/themes/pmahomme/jquery/jquery-ui-1.8.custom.css +A RGraph/admin/mysql/themes/pmahomme/screen.png +A RGraph/admin/mysql/themes/pmahomme/css +A RGraph/admin/mysql/themes/pmahomme/css/theme_left.css.php +A RGraph/admin/mysql/themes/pmahomme/css/theme_print.css.php +A RGraph/admin/mysql/themes/pmahomme/css/theme_right.css.php +A RGraph/admin/mysql/themes/pmahomme/info.inc.php +A RGraph/admin/mysql/themes/pmahomme/layout.inc.php +A RGraph/admin/mysql/themes/pmahomme/img +A RGraph/admin/mysql/themes/pmahomme/img/logo_right.png +A RGraph/admin/mysql/themes/pmahomme/img/b_print.png +A RGraph/admin/mysql/themes/pmahomme/img/s_sync.png +A RGraph/admin/mysql/themes/pmahomme/img/window-new.png +A RGraph/admin/mysql/themes/pmahomme/img/b_tblanalyse.png +A RGraph/admin/mysql/themes/pmahomme/img/b_lastpage.png +A RGraph/admin/mysql/themes/pmahomme/img/new_data_selected_hovered.jpg +A RGraph/admin/mysql/themes/pmahomme/img/s_notice.png +A RGraph/admin/mysql/themes/pmahomme/img/b_tblops.png +A RGraph/admin/mysql/themes/pmahomme/img/b_index.png +A RGraph/admin/mysql/themes/pmahomme/img/b_prevpage.png +A RGraph/admin/mysql/themes/pmahomme/img/arrow_rtl.png +A RGraph/admin/mysql/themes/pmahomme/img/new_data.jpg +A RGraph/admin/mysql/themes/pmahomme/img/tab_bg.png +A RGraph/admin/mysql/themes/pmahomme/img/error.ico +A RGraph/admin/mysql/themes/pmahomme/img/vertical_line.png +A RGraph/admin/mysql/themes/pmahomme/img/s_rights.png +A RGraph/admin/mysql/themes/pmahomme/img/b_edit.png +A RGraph/admin/mysql/themes/pmahomme/img/s_vars.png +A RGraph/admin/mysql/themes/pmahomme/img/b_empty.png +A RGraph/admin/mysql/themes/pmahomme/img/bd_lastpage.png +A RGraph/admin/mysql/themes/pmahomme/img/b_unique.png +A RGraph/admin/mysql/themes/pmahomme/img/new_struct_selected_hovered.jpg +A RGraph/admin/mysql/themes/pmahomme/img/bd_prevpage.png +A RGraph/admin/mysql/themes/pmahomme/img/new_data_selected.jpg +A RGraph/admin/mysql/themes/pmahomme/img/b_docsql.png +A RGraph/admin/mysql/themes/pmahomme/img/s_reload.png +A RGraph/admin/mysql/themes/pmahomme/img/input_bg.gif +A RGraph/admin/mysql/themes/pmahomme/img/bd_sbrowse.png +A RGraph/admin/mysql/themes/pmahomme/img/b_docs.png +A RGraph/admin/mysql/themes/pmahomme/img/b_selboard.png +A RGraph/admin/mysql/themes/pmahomme/img/b_views.png +A RGraph/admin/mysql/themes/pmahomme/img/b_pdfdoc.png +A RGraph/admin/mysql/themes/pmahomme/img/asc_order.png +A RGraph/admin/mysql/themes/pmahomme/img/b_relations.png +A RGraph/admin/mysql/themes/pmahomme/img/b_browse.png +A RGraph/admin/mysql/themes/pmahomme/img/b_comment.png +A RGraph/admin/mysql/themes/pmahomme/img/b_tbloptimize.png +A RGraph/admin/mysql/themes/pmahomme/img/b_props.png +A RGraph/admin/mysql/themes/pmahomme/img/s_loggoff.png +A RGraph/admin/mysql/themes/pmahomme/img/left_nav_bg.png +A RGraph/admin/mysql/themes/pmahomme/img/b_usrcheck.png +A RGraph/admin/mysql/themes/pmahomme/img/b_sdb.png +A RGraph/admin/mysql/themes/pmahomme/img/marked_bg.png +A RGraph/admin/mysql/themes/pmahomme/img/bd_unique.png +A RGraph/admin/mysql/themes/pmahomme/img/b_tblimport.png +A RGraph/admin/mysql/themes/pmahomme/img/docs_menu_bg.png +A RGraph/admin/mysql/themes/pmahomme/img/s_theme.png +A RGraph/admin/mysql/themes/pmahomme/img/s_fulltext.png +A RGraph/admin/mysql/themes/pmahomme/img/bd_firstpage.png +A RGraph/admin/mysql/themes/pmahomme/img/b_help.png +A RGraph/admin/mysql/themes/pmahomme/img/s_replication.png +A RGraph/admin/mysql/themes/pmahomme/img/b_newtbl.png +A RGraph/admin/mysql/themes/pmahomme/img/s_error2.png +A RGraph/admin/mysql/themes/pmahomme/img/s_process.png +A RGraph/admin/mysql/themes/pmahomme/img/new_struct_selected.jpg +A RGraph/admin/mysql/themes/pmahomme/img/bd_browse.png +A RGraph/admin/mysql/themes/pmahomme/img/s_db.png +A RGraph/admin/mysql/themes/pmahomme/img/b_deltbl.png +A RGraph/admin/mysql/themes/pmahomme/img/logo_left.png +A RGraph/admin/mysql/themes/pmahomme/img/b_nextpage.png +A RGraph/admin/mysql/themes/pmahomme/img/b_tipp.png +A RGraph/admin/mysql/themes/pmahomme/img/item_ltr.png +A RGraph/admin/mysql/themes/pmahomme/img/b_usredit.png +A RGraph/admin/mysql/themes/pmahomme/img/b_insrow.png +A RGraph/admin/mysql/themes/pmahomme/img/b_export.png +A RGraph/admin/mysql/themes/pmahomme/img/s_success.png +A RGraph/admin/mysql/themes/pmahomme/img/s_host.png +A RGraph/admin/mysql/themes/pmahomme/img/b_sql.png +A RGraph/admin/mysql/themes/pmahomme/img/b_dbstatistics.png +A RGraph/admin/mysql/themes/pmahomme/img/more.png +A RGraph/admin/mysql/themes/pmahomme/img/b_more.png +A RGraph/admin/mysql/themes/pmahomme/img/body_bg.png +A RGraph/admin/mysql/themes/pmahomme/img/b_drop.png +A RGraph/admin/mysql/themes/pmahomme/img/b_bookmark.png +A RGraph/admin/mysql/themes/pmahomme/img/s_cancel.png +A RGraph/admin/mysql/themes/pmahomme/img/bd_deltbl.png +A RGraph/admin/mysql/themes/pmahomme/img/arrow_ltr.png +A RGraph/admin/mysql/themes/pmahomme/img/spacer.png +A RGraph/admin/mysql/themes/pmahomme/img/s_views.png +A RGraph/admin/mysql/themes/pmahomme/img/bd_nextpage.png +A RGraph/admin/mysql/themes/pmahomme/img/tab_hover_bg.png +A RGraph/admin/mysql/themes/pmahomme/img/eye.png +A RGraph/admin/mysql/themes/pmahomme/img/b_sbrowse.png +A RGraph/admin/mysql/themes/pmahomme/img/bd_insrow.png +A RGraph/admin/mysql/themes/pmahomme/img/bd_primary.png +A RGraph/admin/mysql/themes/pmahomme/img/item.png +A RGraph/admin/mysql/themes/pmahomme/img/bd_ftext.png +A RGraph/admin/mysql/themes/pmahomme/img/b_chart.png +A RGraph/admin/mysql/themes/pmahomme/img/new_struct_hovered.jpg +A RGraph/admin/mysql/themes/pmahomme/img/s_status.png +A RGraph/admin/mysql/themes/pmahomme/img/b_usrlist.png +A RGraph/admin/mysql/themes/pmahomme/img/bd_drop.png +A RGraph/admin/mysql/themes/pmahomme/img/s_error.png +A RGraph/admin/mysql/themes/pmahomme/img/bd_index.png +A RGraph/admin/mysql/themes/pmahomme/img/pma_logo2.png +A RGraph/admin/mysql/themes/pmahomme/img/b_snewtbl.png +A RGraph/admin/mysql/themes/pmahomme/img/b_select.png +A RGraph/admin/mysql/themes/pmahomme/img/b_firstpage.png +A RGraph/admin/mysql/themes/pmahomme/img/database_list_li_hover.png +A RGraph/admin/mysql/themes/pmahomme/img/s_asc.png +A RGraph/admin/mysql/themes/pmahomme/img/s_cancel2.png +A RGraph/admin/mysql/themes/pmahomme/img/b_minus.png +A RGraph/admin/mysql/themes/pmahomme/img/b_info.png +A RGraph/admin/mysql/themes/pmahomme/img/b_save.png +A RGraph/admin/mysql/themes/pmahomme/img/b_newdb.png +A RGraph/admin/mysql/themes/pmahomme/img/s_asci.png +A RGraph/admin/mysql/themes/pmahomme/img/s_lang.png +A RGraph/admin/mysql/themes/pmahomme/img/bd_empty.png +A RGraph/admin/mysql/themes/pmahomme/img/database.png +A RGraph/admin/mysql/themes/pmahomme/img/b_close.png +A RGraph/admin/mysql/themes/pmahomme/img/b_search.png +A RGraph/admin/mysql/themes/pmahomme/img/ajax_clock_small.gif +A RGraph/admin/mysql/themes/pmahomme/img/eye_grey.png +A RGraph/admin/mysql/themes/pmahomme/img/s_really.png +A RGraph/admin/mysql/themes/pmahomme/img/b_view.png +A RGraph/admin/mysql/themes/pmahomme/img/s_partialtext.png +A RGraph/admin/mysql/themes/pmahomme/img/b_usradd.png +A RGraph/admin/mysql/themes/pmahomme/img/bd_select.png +A RGraph/admin/mysql/themes/pmahomme/img/b_inline_edit.png +A RGraph/admin/mysql/themes/pmahomme/img/b_plus.png +A RGraph/admin/mysql/themes/pmahomme/img/b_tblexport.png +A RGraph/admin/mysql/themes/pmahomme/img/s_okay.png +A RGraph/admin/mysql/themes/pmahomme/img/new_struct.jpg +A RGraph/admin/mysql/themes/pmahomme/img/new_data_hovered.jpg +A RGraph/admin/mysql/themes/pmahomme/img/b_usrdrop.png +A RGraph/admin/mysql/themes/pmahomme/img/s_desc.png +A RGraph/admin/mysql/themes/pmahomme/img/s_tbl.png +A RGraph/admin/mysql/themes/pmahomme/img/b_engine.png +A RGraph/admin/mysql/themes/pmahomme/img/b_sqlhelp.png +A RGraph/admin/mysql/themes/pmahomme/img/b_calendar.png +A RGraph/admin/mysql/themes/pmahomme/img/tabactive_bg.png +A RGraph/admin/mysql/themes/pmahomme/img/b_import.png +A RGraph/admin/mysql/themes/pmahomme/img/s_info.png +A RGraph/admin/mysql/themes/pmahomme/img/php_sym.png +A RGraph/admin/mysql/themes/pmahomme/img/item_rtl.png +A RGraph/admin/mysql/themes/pmahomme/img/s_passwd.png +A RGraph/admin/mysql/themes/pmahomme/img/b_primary.png +A RGraph/admin/mysql/themes/pmahomme/img/b_sqldoc.png +A RGraph/admin/mysql/themes/pmahomme/img/s_attention.png +A RGraph/admin/mysql/themes/pmahomme/img/b_home.png +A RGraph/admin/mysql/themes/pmahomme/img/b_ftext.png +A RGraph/admin/mysql/themes/original +A RGraph/admin/mysql/themes/original/jquery +A RGraph/admin/mysql/themes/original/jquery/images +A RGraph/admin/mysql/themes/original/jquery/images/ui-icons_2e83ff_256x240.png +A RGraph/admin/mysql/themes/original/jquery/images/ui-bg_glass_95_fef1ec_1x400.png +A RGraph/admin/mysql/themes/original/jquery/images/ui-icons_888888_256x240.png +A RGraph/admin/mysql/themes/original/jquery/images/ui-bg_glass_55_fbf9ee_1x400.png +A RGraph/admin/mysql/themes/original/jquery/images/ui-bg_glass_75_dadada_1x400.png +A RGraph/admin/mysql/themes/original/jquery/images/ui-bg_flat_75_ffffff_40x100.png +A RGraph/admin/mysql/themes/original/jquery/images/ui-bg_glass_75_e6e6e6_1x400.png +A RGraph/admin/mysql/themes/original/jquery/images/ui-bg_glass_65_ffffff_1x400.png +A RGraph/admin/mysql/themes/original/jquery/images/ui-bg_highlight-soft_75_cccccc_1x100.png +A RGraph/admin/mysql/themes/original/jquery/images/ui-icons_cd0a0a_256x240.png +A RGraph/admin/mysql/themes/original/jquery/images/ui-bg_flat_0_aaaaaa_40x100.png +A RGraph/admin/mysql/themes/original/jquery/images/ui-icons_454545_256x240.png +A RGraph/admin/mysql/themes/original/jquery/images/ui-icons_222222_256x240.png +A RGraph/admin/mysql/themes/original/jquery/jquery-ui-1.8.custom.css +A RGraph/admin/mysql/themes/original/screen.png +A RGraph/admin/mysql/themes/original/css +A RGraph/admin/mysql/themes/original/css/theme_left.css.php +A RGraph/admin/mysql/themes/original/css/theme_print.css.php +A RGraph/admin/mysql/themes/original/css/theme_right.css.php +A RGraph/admin/mysql/themes/original/info.inc.php +A RGraph/admin/mysql/themes/original/layout.inc.php +A RGraph/admin/mysql/themes/original/img +A RGraph/admin/mysql/themes/original/img/b_print.png +A RGraph/admin/mysql/themes/original/img/logo_right.png +A RGraph/admin/mysql/themes/original/img/s_sync.png +A RGraph/admin/mysql/themes/original/img/window-new.png +A RGraph/admin/mysql/themes/original/img/b_tblanalyse.png +A RGraph/admin/mysql/themes/original/img/s_host.png +A RGraph/admin/mysql/themes/original/img/b_sql.png +A RGraph/admin/mysql/themes/original/img/b_dbstatistics.png +A RGraph/admin/mysql/themes/original/img/more.png +A RGraph/admin/mysql/themes/original/img/new_data_selected_hovered.jpg +A RGraph/admin/mysql/themes/original/img/b_more.png +A RGraph/admin/mysql/themes/original/img/s_notice.png +A RGraph/admin/mysql/themes/original/img/b_tblops.png +A RGraph/admin/mysql/themes/original/img/b_drop.png +A RGraph/admin/mysql/themes/original/img/b_bookmark.png +A RGraph/admin/mysql/themes/original/img/s_cancel.png +A RGraph/admin/mysql/themes/original/img/b_index.png +A RGraph/admin/mysql/themes/original/img/bd_deltbl.png +A RGraph/admin/mysql/themes/original/img/arrow_rtl.png +A RGraph/admin/mysql/themes/original/img/arrow_ltr.png +A RGraph/admin/mysql/themes/original/img/spacer.png +A RGraph/admin/mysql/themes/original/img/new_data.jpg +A RGraph/admin/mysql/themes/original/img/error.ico +A RGraph/admin/mysql/themes/original/img/s_views.png +A RGraph/admin/mysql/themes/original/img/vertical_line.png +A RGraph/admin/mysql/themes/original/img/eye.png +A RGraph/admin/mysql/themes/original/img/s_rights.png +A RGraph/admin/mysql/themes/original/img/b_sbrowse.png +A RGraph/admin/mysql/themes/original/img/bd_insrow.png +A RGraph/admin/mysql/themes/original/img/b_edit.png +A RGraph/admin/mysql/themes/original/img/bd_primary.png +A RGraph/admin/mysql/themes/original/img/s_vars.png +A RGraph/admin/mysql/themes/original/img/bd_ftext.png +A RGraph/admin/mysql/themes/original/img/b_empty.png +A RGraph/admin/mysql/themes/original/img/b_chart.png +A RGraph/admin/mysql/themes/original/img/new_struct_hovered.jpg +A RGraph/admin/mysql/themes/original/img/s_status.png +A RGraph/admin/mysql/themes/original/img/b_usrlist.png +A RGraph/admin/mysql/themes/original/img/b_unique.png +A RGraph/admin/mysql/themes/original/img/bd_drop.png +A RGraph/admin/mysql/themes/original/img/s_error.png +A RGraph/admin/mysql/themes/original/img/bd_index.png +A RGraph/admin/mysql/themes/original/img/new_struct_selected_hovered.jpg +A RGraph/admin/mysql/themes/original/img/b_snewtbl.png +A RGraph/admin/mysql/themes/original/img/b_select.png +A RGraph/admin/mysql/themes/original/img/new_data_selected.jpg +A RGraph/admin/mysql/themes/original/img/s_asc.png +A RGraph/admin/mysql/themes/original/img/s_reload.png +A RGraph/admin/mysql/themes/original/img/b_docs.png +A RGraph/admin/mysql/themes/original/img/bd_sbrowse.png +A RGraph/admin/mysql/themes/original/img/b_selboard.png +A RGraph/admin/mysql/themes/original/img/b_info.png +A RGraph/admin/mysql/themes/original/img/b_minus.png +A RGraph/admin/mysql/themes/original/img/b_views.png +A RGraph/admin/mysql/themes/original/img/b_save.png +A RGraph/admin/mysql/themes/original/img/b_newdb.png +A RGraph/admin/mysql/themes/original/img/b_relations.png +A RGraph/admin/mysql/themes/original/img/s_asci.png +A RGraph/admin/mysql/themes/original/img/b_browse.png +A RGraph/admin/mysql/themes/original/img/bd_empty.png +A RGraph/admin/mysql/themes/original/img/b_tbloptimize.png +A RGraph/admin/mysql/themes/original/img/b_comment.png +A RGraph/admin/mysql/themes/original/img/s_lang.png +A RGraph/admin/mysql/themes/original/img/b_props.png +A RGraph/admin/mysql/themes/original/img/s_loggoff.png +A RGraph/admin/mysql/themes/original/img/b_search.png +A RGraph/admin/mysql/themes/original/img/b_close.png +A RGraph/admin/mysql/themes/original/img/ajax_clock_small.gif +A RGraph/admin/mysql/themes/original/img/b_usrcheck.png +A RGraph/admin/mysql/themes/original/img/eye_grey.png +A RGraph/admin/mysql/themes/original/img/s_really.png +A RGraph/admin/mysql/themes/original/img/b_view.png +A RGraph/admin/mysql/themes/original/img/bd_unique.png +A RGraph/admin/mysql/themes/original/img/b_tblimport.png +A RGraph/admin/mysql/themes/original/img/b_usradd.png +A RGraph/admin/mysql/themes/original/img/s_partialtext.png +A RGraph/admin/mysql/themes/original/img/b_tblexport.png +A RGraph/admin/mysql/themes/original/img/b_inline_edit.png +A RGraph/admin/mysql/themes/original/img/b_plus.png +A RGraph/admin/mysql/themes/original/img/bd_select.png +A RGraph/admin/mysql/themes/original/img/docs_menu_bg.png +A RGraph/admin/mysql/themes/original/img/s_theme.png +A RGraph/admin/mysql/themes/original/img/b_help.png +A RGraph/admin/mysql/themes/original/img/new_struct.jpg +A RGraph/admin/mysql/themes/original/img/s_fulltext.png +A RGraph/admin/mysql/themes/original/img/new_data_hovered.jpg +A RGraph/admin/mysql/themes/original/img/s_replication.png +A RGraph/admin/mysql/themes/original/img/b_newtbl.png +A RGraph/admin/mysql/themes/original/img/s_error2.png +A RGraph/admin/mysql/themes/original/img/b_usrdrop.png +A RGraph/admin/mysql/themes/original/img/s_desc.png +A RGraph/admin/mysql/themes/original/img/s_process.png +A RGraph/admin/mysql/themes/original/img/new_struct_selected.jpg +A RGraph/admin/mysql/themes/original/img/s_tbl.png +A RGraph/admin/mysql/themes/original/img/bd_browse.png +A RGraph/admin/mysql/themes/original/img/b_engine.png +A RGraph/admin/mysql/themes/original/img/b_deltbl.png +A RGraph/admin/mysql/themes/original/img/s_db.png +A RGraph/admin/mysql/themes/original/img/b_sqlhelp.png +A RGraph/admin/mysql/themes/original/img/b_calendar.png +A RGraph/admin/mysql/themes/original/img/logo_left.png +A RGraph/admin/mysql/themes/original/img/b_import.png +A RGraph/admin/mysql/themes/original/img/b_tipp.png +A RGraph/admin/mysql/themes/original/img/item_ltr.png +A RGraph/admin/mysql/themes/original/img/item_rtl.png +A RGraph/admin/mysql/themes/original/img/b_usredit.png +A RGraph/admin/mysql/themes/original/img/b_export.png +A RGraph/admin/mysql/themes/original/img/b_insrow.png +A RGraph/admin/mysql/themes/original/img/s_passwd.png +A RGraph/admin/mysql/themes/original/img/b_primary.png +A RGraph/admin/mysql/themes/original/img/b_home.png +A RGraph/admin/mysql/themes/original/img/s_success.png +A RGraph/admin/mysql/themes/original/img/b_ftext.png +A RGraph/admin/mysql/server_synchronize.php +A RGraph/admin/mysql/phpinfo.php +A RGraph/admin/mysql/db_structure.php +A RGraph/admin/mysql/CREDITS +A RGraph/admin/mysql/favicon.ico +A RGraph/admin/mysql/db_create.php +A RGraph/admin/mysql/pmd_pdf.php +A RGraph/admin/mysql/server_status.php +A RGraph/admin/mysql/enum_editor.php +A RGraph/admin/mysql/tbl_import.php +A RGraph/admin/mysql/tbl_replace.php +A RGraph/admin/mysql/pmd_general.php +A RGraph/admin/mysql/view_operations.php +A RGraph/admin/mysql/tbl_relation.php +A RGraph/admin/mysql/INSTALL +A RGraph/admin/mysql/tbl_export.php +A RGraph/admin/mysql/bs_play_media.php +A RGraph/admin/mysql/db_operations.php +A RGraph/admin/mysql/pmd +A RGraph/admin/mysql/pmd/styles +A RGraph/admin/mysql/pmd/styles/default +A RGraph/admin/mysql/pmd/styles/default/images +A RGraph/admin/mysql/pmd/styles/default/images/small_tab.png +A RGraph/admin/mysql/pmd/styles/default/images/left_panel_tab.png +A RGraph/admin/mysql/pmd/styles/default/images/1.png +A RGraph/admin/mysql/pmd/styles/default/images/2.png +A RGraph/admin/mysql/pmd/styles/default/images/3.png +A RGraph/admin/mysql/pmd/styles/default/images/4.png +A RGraph/admin/mysql/pmd/styles/default/images/5.png +A RGraph/admin/mysql/pmd/styles/default/images/6.png +A RGraph/admin/mysql/pmd/styles/default/images/7.png +A RGraph/admin/mysql/pmd/styles/default/images/left_panel_butt.png +A RGraph/admin/mysql/pmd/styles/default/images/8.png +A RGraph/admin/mysql/pmd/styles/default/images/Field_small_date.png +A RGraph/admin/mysql/pmd/styles/default/images/Field_small_char.png +A RGraph/admin/mysql/pmd/styles/default/images/Field_small.png +A RGraph/admin/mysql/pmd/styles/default/images/Header_Linked.png +A RGraph/admin/mysql/pmd/styles/default/images/top_panel.png +A RGraph/admin/mysql/pmd/styles/default/images/plus.png +A RGraph/admin/mysql/pmd/styles/default/images/FieldKey_small.png +A RGraph/admin/mysql/pmd/styles/default/images/Field_small_int.png +A RGraph/admin/mysql/pmd/styles/default/images/Header.png +A RGraph/admin/mysql/pmd/styles/default/images/minus.png +A RGraph/admin/mysql/pmd/styles/default/style1.css +A RGraph/admin/mysql/pmd/images +A RGraph/admin/mysql/pmd/images/uparrow2_m.png +A RGraph/admin/mysql/pmd/images/def.png +A RGraph/admin/mysql/pmd/images/save.png +A RGraph/admin/mysql/pmd/images/ang_direct.png +A RGraph/admin/mysql/pmd/images/resize.png +A RGraph/admin/mysql/pmd/images/downarrow1.png +A RGraph/admin/mysql/pmd/images/2leftarrow_m.png +A RGraph/admin/mysql/pmd/images/downarrow2.png +A RGraph/admin/mysql/pmd/images/bottom.png +A RGraph/admin/mysql/pmd/images/reload.png +A RGraph/admin/mysql/pmd/images/display_field.png +A RGraph/admin/mysql/pmd/images/pdf.png +A RGraph/admin/mysql/pmd/images/rightarrow1.png +A RGraph/admin/mysql/pmd/images/and_icon.png +A RGraph/admin/mysql/pmd/images/2rightarrow.png +A RGraph/admin/mysql/pmd/images/rightarrow2.png +A RGraph/admin/mysql/pmd/images/favicon.ico +A RGraph/admin/mysql/pmd/images/query_builder.png +A RGraph/admin/mysql/pmd/images/exec_small.png +A RGraph/admin/mysql/pmd/images/relation.png +A RGraph/admin/mysql/pmd/images/downarrow2_m.png +A RGraph/admin/mysql/pmd/images/exec.png +A RGraph/admin/mysql/pmd/images/grid.png +A RGraph/admin/mysql/pmd/images/help_relation.png +A RGraph/admin/mysql/pmd/images/bord.png +A RGraph/admin/mysql/pmd/images/2rightarrow_m.png +A RGraph/admin/mysql/pmd/images/2leftarrow.png +A RGraph/admin/mysql/pmd/images/table.png +A RGraph/admin/mysql/pmd/images/help.png +A RGraph/admin/mysql/pmd/images/or_icon.png +A RGraph/admin/mysql/pmd/scripts +A RGraph/admin/mysql/pmd/scripts/move.js +A RGraph/admin/mysql/pmd/scripts/iecanvas.js +A RGraph/admin/mysql/pmd/scripts/history.js +A RGraph/admin/mysql/pmd/scripts/ajax.js +A RGraph/admin/mysql/LICENSE +A RGraph/admin/mysql/transformation_overview.php +A RGraph/admin/mysql/server_collations.php +A RGraph/admin/mysql/querywindow.php +A RGraph/admin/mysql/sql.php +A RGraph/admin/mysql/server_processlist.php +A RGraph/admin/mysql/tbl_sql.php +A RGraph/admin/mysql/tbl_move_copy.php +A RGraph/admin/mysql/tbl_tracking.php +A RGraph/admin/mysql/transformation_wrapper.php +A RGraph/admin/mysql/RELEASE-DATE-3.4.3.1 +A RGraph/admin/mysql/README +A RGraph/admin/mysql/import.php +A RGraph/admin/mysql/db_search.php +A RGraph/admin/mysql/server_databases.php +A RGraph/admin/mysql/bs_disp_as_mime_type.php +A RGraph/admin/mysql/server_engines.php +A RGraph/admin/mysql/TODO +A RGraph/admin/mysql/export.php +A RGraph/admin/mysql/license.php +A RGraph/admin/mysql/tbl_get_field.php +A RGraph/admin/mysql/browse_foreigners.php +A RGraph/admin/mysql/themes.php +A RGraph/admin/mysql/pmd_relation_new.php +A RGraph/admin/mysql/libraries +A RGraph/admin/mysql/libraries/tbl_common.php +A RGraph/admin/mysql/libraries/tbl_links.inc.php +A RGraph/admin/mysql/libraries/information_schema_relations.lib.php +A RGraph/admin/mysql/libraries/session.inc.php +A RGraph/admin/mysql/libraries/Error.class.php +A RGraph/admin/mysql/libraries/header_http.inc.php +A RGraph/admin/mysql/libraries/display_change_password.lib.php +A RGraph/admin/mysql/libraries/js_escape.lib.php +A RGraph/admin/mysql/libraries/config.values.php +A RGraph/admin/mysql/libraries/chart.lib.php +A RGraph/admin/mysql/libraries/mysql_charsets.lib.php +A RGraph/admin/mysql/libraries/server_synchronize.lib.php +A RGraph/admin/mysql/libraries/header_printview.inc.php +A RGraph/admin/mysql/libraries/user_preferences.inc.php +A RGraph/admin/mysql/libraries/db_info.inc.php +A RGraph/admin/mysql/libraries/sqlvalidator.class.php +A RGraph/admin/mysql/libraries/db_structure.lib.php +A RGraph/admin/mysql/libraries/bookmark.lib.php +A RGraph/admin/mysql/libraries/tbl_replace_fields.inc.php +A RGraph/admin/mysql/libraries/chart +A RGraph/admin/mysql/libraries/chart/pChart +A RGraph/admin/mysql/libraries/chart/pChart/pChart.class +A RGraph/admin/mysql/libraries/chart/pChart/pCache.class +A RGraph/admin/mysql/libraries/chart/pChart/fonts +A RGraph/admin/mysql/libraries/chart/pChart/fonts/DejaVuSans.ttf +A RGraph/admin/mysql/libraries/chart/pChart/fonts/LICENSE +A RGraph/admin/mysql/libraries/chart/pChart/fonts/README +A RGraph/admin/mysql/libraries/chart/pChart/pData.class +A RGraph/admin/mysql/libraries/chart/pma_pchart_pie.php +A RGraph/admin/mysql/libraries/chart/pma_pchart_multi_bar.php +A RGraph/admin/mysql/libraries/chart/pma_chart.php +A RGraph/admin/mysql/libraries/chart/pma_pchart_chart.php +A RGraph/admin/mysql/libraries/chart/pma_pchart_multi_line.php +A RGraph/admin/mysql/libraries/chart/pma_pchart_single.php +A RGraph/admin/mysql/libraries/chart/pma_pchart_stacked_bar.php +A RGraph/admin/mysql/libraries/chart/pma_pchart_multi_radar.php +A RGraph/admin/mysql/libraries/chart/pma_pchart_single_bar.php +A RGraph/admin/mysql/libraries/chart/pma_pchart_single_line.php +A RGraph/admin/mysql/libraries/chart/pma_pchart_multi.php +A RGraph/admin/mysql/libraries/chart/pma_pchart_single_radar.php +A RGraph/admin/mysql/libraries/Partition.class.php +A RGraph/admin/mysql/libraries/blowfish.php +A RGraph/admin/mysql/libraries/server_links.inc.php +A RGraph/admin/mysql/libraries/List.class.php +A RGraph/admin/mysql/libraries/string_type_ctype.lib.php +A RGraph/admin/mysql/libraries/db_events.inc.php +A RGraph/admin/mysql/libraries/replication_gui.lib.php +A RGraph/admin/mysql/libraries/relation_cleanup.lib.php +A RGraph/admin/mysql/libraries/Table.class.php +A RGraph/admin/mysql/libraries/cleanup.lib.php +A RGraph/admin/mysql/libraries/error.inc.php +A RGraph/admin/mysql/libraries/List_Database.class.php +A RGraph/admin/mysql/libraries/build_html_for_db.lib.php +A RGraph/admin/mysql/libraries/zip_extension.lib.php +A RGraph/admin/mysql/libraries/user_preferences.lib.php +A RGraph/admin/mysql/libraries/ob.lib.php +A RGraph/admin/mysql/libraries/tbl_properties.inc.php +A RGraph/admin/mysql/libraries/display_select_lang.lib.php +A RGraph/admin/mysql/libraries/schema +A RGraph/admin/mysql/libraries/schema/Pdf_Relation_Schema.class.php +A RGraph/admin/mysql/libraries/schema/Visio_Relation_Schema.class.php +A RGraph/admin/mysql/libraries/schema/Dia_Relation_Schema.class.php +A RGraph/admin/mysql/libraries/schema/Svg_Relation_Schema.class.php +A RGraph/admin/mysql/libraries/schema/Export_Relation_Schema.class.php +A RGraph/admin/mysql/libraries/schema/User_Schema.class.php +A RGraph/admin/mysql/libraries/schema/Eps_Relation_Schema.class.php +A RGraph/admin/mysql/libraries/sqlvalidator.lib.php +A RGraph/admin/mysql/libraries/tcpdf +A RGraph/admin/mysql/libraries/tcpdf/LICENSE.TXT +A RGraph/admin/mysql/libraries/tcpdf/tcpdf.p12 +A RGraph/admin/mysql/libraries/tcpdf/cache +A RGraph/admin/mysql/libraries/tcpdf/cache/table_data_demo.txt +A RGraph/admin/mysql/libraries/tcpdf/cache/utf8test.txt +A RGraph/admin/mysql/libraries/tcpdf/cache/chapter_demo_1.txt +A RGraph/admin/mysql/libraries/tcpdf/cache/chapter_demo_2.txt +A RGraph/admin/mysql/libraries/tcpdf/CHANGELOG.TXT +A RGraph/admin/mysql/libraries/tcpdf/config +A RGraph/admin/mysql/libraries/tcpdf/config/lang +A RGraph/admin/mysql/libraries/tcpdf/config/lang/urd.php +A RGraph/admin/mysql/libraries/tcpdf/config/lang/mlt.php +A RGraph/admin/mysql/libraries/tcpdf/config/lang/heb.php +A RGraph/admin/mysql/libraries/tcpdf/config/lang/hrv.php +A RGraph/admin/mysql/libraries/tcpdf/config/lang/zho.php +A RGraph/admin/mysql/libraries/tcpdf/config/lang/bel.php +A RGraph/admin/mysql/libraries/tcpdf/config/lang/dan.php +A RGraph/admin/mysql/libraries/tcpdf/config/lang/slv.php +A RGraph/admin/mysql/libraries/tcpdf/config/lang/srp.php +A RGraph/admin/mysql/libraries/tcpdf/config/lang/cat.php +A RGraph/admin/mysql/libraries/tcpdf/config/lang/ces.php +A RGraph/admin/mysql/libraries/tcpdf/config/lang/mkd.php +A RGraph/admin/mysql/libraries/tcpdf/config/lang/hat.php +A RGraph/admin/mysql/libraries/tcpdf/config/lang/ger.php +A RGraph/admin/mysql/libraries/tcpdf/config/lang/nob.php +A RGraph/admin/mysql/libraries/tcpdf/config/lang/kat.php +A RGraph/admin/mysql/libraries/tcpdf/config/lang/msa.php +A RGraph/admin/mysql/libraries/tcpdf/config/lang/hye.php +A RGraph/admin/mysql/libraries/tcpdf/config/lang/yid.php +A RGraph/admin/mysql/libraries/tcpdf/config/lang/cym.php +A RGraph/admin/mysql/libraries/tcpdf/config/lang/pol.php +A RGraph/admin/mysql/libraries/tcpdf/config/lang/hun.php +A RGraph/admin/mysql/libraries/tcpdf/config/lang/swa.php +A RGraph/admin/mysql/libraries/tcpdf/config/lang/kor.php +A RGraph/admin/mysql/libraries/tcpdf/config/lang/est.php +A RGraph/admin/mysql/libraries/tcpdf/config/lang/eus.php +A RGraph/admin/mysql/libraries/tcpdf/config/lang/sqi.php +A RGraph/admin/mysql/libraries/tcpdf/config/lang/ron.php +A RGraph/admin/mysql/libraries/tcpdf/config/lang/swe.php +A RGraph/admin/mysql/libraries/tcpdf/config/lang/por.php +A RGraph/admin/mysql/libraries/tcpdf/config/lang/ara.php +A RGraph/admin/mysql/libraries/tcpdf/config/lang/chi.php +A RGraph/admin/mysql/libraries/tcpdf/config/lang/bra.php +A RGraph/admin/mysql/libraries/tcpdf/config/lang/gle.php +A RGraph/admin/mysql/libraries/tcpdf/config/lang/afr.php +A RGraph/admin/mysql/libraries/tcpdf/config/lang/fra.php +A RGraph/admin/mysql/libraries/tcpdf/config/lang/glg.php +A RGraph/admin/mysql/libraries/tcpdf/config/lang/eng.php +A RGraph/admin/mysql/libraries/tcpdf/config/lang/rus.php +A RGraph/admin/mysql/libraries/tcpdf/config/lang/ind.php +A RGraph/admin/mysql/libraries/tcpdf/config/lang/nld.php +A RGraph/admin/mysql/libraries/tcpdf/config/lang/ita.php +A RGraph/admin/mysql/libraries/tcpdf/config/lang/aze.php +A RGraph/admin/mysql/libraries/tcpdf/config/lang/spa.php +A RGraph/admin/mysql/libraries/tcpdf/config/tcpdf_config.php +A RGraph/admin/mysql/libraries/tcpdf/config/tcpdf_config_alt.php +A RGraph/admin/mysql/libraries/tcpdf/unicode_data.php +A RGraph/admin/mysql/libraries/tcpdf/tcpdf.php +A RGraph/admin/mysql/libraries/tcpdf/tcpdf.crt +A RGraph/admin/mysql/libraries/tcpdf/fonts +A RGraph/admin/mysql/libraries/tcpdf/fonts/dejavuserif.z +A RGraph/admin/mysql/libraries/tcpdf/fonts/timesi.php +A RGraph/admin/mysql/libraries/tcpdf/fonts/dejavuserifb.z +A RGraph/admin/mysql/libraries/tcpdf/fonts/dejavu-fonts-ttf-2.32 +A RGraph/admin/mysql/libraries/tcpdf/fonts/dejavu-fonts-ttf-2.32/LICENSE +A RGraph/admin/mysql/libraries/tcpdf/fonts/dejavu-fonts-ttf-2.32/README +A RGraph/admin/mysql/libraries/tcpdf/fonts/timesbi.php +A RGraph/admin/mysql/libraries/tcpdf/fonts/dejavusans.ctg.z +A RGraph/admin/mysql/libraries/tcpdf/fonts/dejavusansb.ctg.z +A RGraph/admin/mysql/libraries/tcpdf/fonts/dejavusans.php +A RGraph/admin/mysql/libraries/tcpdf/fonts/helvetica.php +A RGraph/admin/mysql/libraries/tcpdf/fonts/dejavuserif.ctg.z +A RGraph/admin/mysql/libraries/tcpdf/fonts/dejavusansb.php +A RGraph/admin/mysql/libraries/tcpdf/fonts/symbol.php +A RGraph/admin/mysql/libraries/tcpdf/fonts/helveticab.php +A RGraph/admin/mysql/libraries/tcpdf/fonts/dejavuserifb.ctg.z +A RGraph/admin/mysql/libraries/tcpdf/fonts/dejavuserif.php +A RGraph/admin/mysql/libraries/tcpdf/fonts/courier.php +A RGraph/admin/mysql/libraries/tcpdf/fonts/dejavuserifb.php +A RGraph/admin/mysql/libraries/tcpdf/fonts/courierb.php +A RGraph/admin/mysql/libraries/tcpdf/fonts/zapfdingbats.php +A RGraph/admin/mysql/libraries/tcpdf/fonts/helveticai.php +A RGraph/admin/mysql/libraries/tcpdf/fonts/helveticabi.php +A RGraph/admin/mysql/libraries/tcpdf/fonts/courieri.php +A RGraph/admin/mysql/libraries/tcpdf/fonts/times.php +A RGraph/admin/mysql/libraries/tcpdf/fonts/courierbi.php +A RGraph/admin/mysql/libraries/tcpdf/fonts/timesb.php +A RGraph/admin/mysql/libraries/tcpdf/fonts/dejavusans.z +A RGraph/admin/mysql/libraries/tcpdf/fonts/README.TXT +A RGraph/admin/mysql/libraries/tcpdf/fonts/dejavusansb.z +A RGraph/admin/mysql/libraries/tcpdf/README.TXT +A RGraph/admin/mysql/libraries/tcpdf/htmlcolors.php +A RGraph/admin/mysql/libraries/tcpdf/spotcolors.php +A RGraph/admin/mysql/libraries/tcpdf/tcpdf.fdf +A RGraph/admin/mysql/libraries/display_tbl.lib.php +A RGraph/admin/mysql/libraries/Index.class.php +A RGraph/admin/mysql/libraries/string.lib.php +A RGraph/admin/mysql/libraries/PMA.php +A RGraph/admin/mysql/libraries/import.lib.php +A RGraph/admin/mysql/libraries/config +A RGraph/admin/mysql/libraries/config/ConfigFile.class.php +A RGraph/admin/mysql/libraries/config/FormDisplay.class.php +A RGraph/admin/mysql/libraries/config/validate.lib.php +A RGraph/admin/mysql/libraries/config/messages.inc.php +A RGraph/admin/mysql/libraries/config/config_functions.lib.php +A RGraph/admin/mysql/libraries/config/user_preferences.forms.php +A RGraph/admin/mysql/libraries/config/setup.forms.php +A RGraph/admin/mysql/libraries/config/Form.class.php +A RGraph/admin/mysql/libraries/config/FormDisplay.tpl.php +A RGraph/admin/mysql/libraries/string_native.lib.php +A RGraph/admin/mysql/libraries/PHPExcel +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Cell +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Cell/IValueBinder.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Cell/DataType.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Cell/DataValidation.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Cell/DefaultValueBinder.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Cell/Hyperlink.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Cell/AdvancedValueBinder.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/RichText.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/HashTable.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/DocumentProperties.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/CachedObjectStorage +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/CachedObjectStorage/DiscISAM.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/CachedObjectStorage/ICache.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/CachedObjectStorage/PHPTemp.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/CachedObjectStorage/CacheBase.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/CachedObjectStorage/Wincache.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/CachedObjectStorage/Memcache.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/CachedObjectStorage/MemoryGZip.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/CachedObjectStorage/APC.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/CachedObjectStorage/MemorySerialized.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/CachedObjectStorage/Memory.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/ReferenceHelper.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Calculation.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/IOFactory.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Autoloader.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Settings.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Style.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/NamedRange.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Comment.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/RichText +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/RichText/TextElement.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/RichText/Run.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/RichText/ITextElement.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/DocumentSecurity.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Calculation +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Calculation/Engineering.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Calculation/ExceptionHandler.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Calculation/DateTime.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Calculation/Exception.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Calculation/Database.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Calculation/LookupRef.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Calculation/FormulaToken.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Calculation/Functions.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Calculation/functionlist.txt +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Calculation/Logical.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Calculation/TextData.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Calculation/MathTrig.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Calculation/FormulaParser.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Calculation/Statistical.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Calculation/Financial.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Calculation/Function.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Style +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Style/Border.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Style/Alignment.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Style/Color.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Style/Borders.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Style/NumberFormat.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Style/Conditional.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Style/Fill.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Style/Font.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Style/Protection.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/CachedObjectStorageFactory.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Worksheet.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Reader +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Reader/Excel2007.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Reader/Gnumeric.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Reader/IReadFilter.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Reader/CSV.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Reader/IReader.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Reader/Excel5 +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Reader/Excel5/Escher.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Reader/OOCalc.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Reader/SYLK.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Reader/Excel2007 +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Reader/Excel2007/Theme.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Reader/Excel5.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Reader/DefaultReadFilter.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Reader/Excel2003XML.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/IComparable.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Cell.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Shared +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Shared/OLE +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Shared/OLE/PPS +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Shared/OLE/PPS/File.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Shared/OLE/PPS/Root.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Shared/OLE/ChainedBlockStream.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Shared/OLE/PPS.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Shared/Drawing.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Shared/XMLWriter.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Shared/PasswordHasher.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Shared/ZipArchive.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Shared/String.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Shared/Font.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Shared/CodePage.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Shared/Escher.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Shared/PCLZip +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Shared/PCLZip/gnu-lgpl.txt +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Shared/PCLZip/readme.txt +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Shared/PCLZip/pclzip.lib.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Shared/OLERead.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Shared/Date.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Shared/OLE.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Shared/File.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Shared/ZipStreamWrapper.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Shared/JAMA +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Shared/JAMA/utils +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Shared/JAMA/utils/Error.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Shared/JAMA/utils/Maths.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Shared/JAMA/LUDecomposition.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Shared/JAMA/CholeskyDecomposition.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Shared/JAMA/SingularValueDecomposition.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Shared/JAMA/CHANGELOG.TXT +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Shared/JAMA/QRDecomposition.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Shared/JAMA/EigenvalueDecomposition.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Shared/JAMA/Matrix.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Shared/Escher +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Shared/Escher/DgContainer.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Shared/Escher/DggContainer +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Shared/Escher/DggContainer/BstoreContainer +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Shared/Escher/DggContainer/BstoreContainer/BSE.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Shared/Escher/DggContainer/BstoreContainer/BSE +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Shared/Escher/DggContainer/BstoreContainer/BSE/Blip.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Shared/Escher/DggContainer/BstoreContainer.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Shared/Escher/DggContainer.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Shared/Escher/DgContainer +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Shared/Escher/DgContainer/SpgrContainer.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Shared/Escher/DgContainer/SpgrContainer +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Shared/Escher/DgContainer/SpgrContainer/SpContainer.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Shared/Excel5.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Shared/trend +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Shared/trend/logarithmicBestFitClass.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Shared/trend/polynomialBestFitClass.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Shared/trend/exponentialBestFitClass.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Shared/trend/linearBestFitClass.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Shared/trend/trendClass.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Shared/trend/powerBestFitClass.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Shared/trend/bestFitClass.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Worksheet +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Worksheet/CellIterator.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Worksheet/Drawing.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Worksheet/PageMargins.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Worksheet/PageSetup.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Worksheet/RowDimension.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Worksheet/RowIterator.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Worksheet/ColumnDimension.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Worksheet/HeaderFooterDrawing.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Worksheet/SheetView.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Worksheet/MemoryDrawing.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Worksheet/Drawing +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Worksheet/Drawing/Shadow.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Worksheet/BaseDrawing.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Worksheet/Protection.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Worksheet/HeaderFooter.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Worksheet/Row.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/WorksheetIterator.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Writer +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Writer/Excel2007.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Writer/PDF.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Writer/CSV.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Writer/Excel5 +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Writer/Excel5/Escher.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Writer/Excel5/Worksheet.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Writer/Excel5/Parser.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Writer/Excel5/Workbook.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Writer/Excel5/Xf.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Writer/Excel5/BIFFwriter.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Writer/Excel5/Font.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Writer/Excel2007 +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Writer/Excel2007/DocProps.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Writer/Excel2007/Drawing.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Writer/Excel2007/Worksheet.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Writer/Excel2007/Workbook.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Writer/Excel2007/StringTable.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Writer/Excel2007/ContentTypes.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Writer/Excel2007/Style.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Writer/Excel2007/Theme.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Writer/Excel2007/WriterPart.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Writer/Excel2007/Comments.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Writer/Excel2007/Rels.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Writer/HTML.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Writer/Excel5.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel/Writer/IWriter.php +A RGraph/admin/mysql/libraries/PHPExcel/PHPExcel.php +A RGraph/admin/mysql/libraries/vendor_config.php +A RGraph/admin/mysql/libraries/plugin_interface.lib.php +A RGraph/admin/mysql/libraries/server_variables_doc.php +A RGraph/admin/mysql/libraries/import +A RGraph/admin/mysql/libraries/import/csv.php +A RGraph/admin/mysql/libraries/import/upload +A RGraph/admin/mysql/libraries/import/upload/uploadprogress.php +A RGraph/admin/mysql/libraries/import/upload/noplugin.php +A RGraph/admin/mysql/libraries/import/upload/apc.php +A RGraph/admin/mysql/libraries/import/xlsx.php +A RGraph/admin/mysql/libraries/import/sql.php +A RGraph/admin/mysql/libraries/import/xml.php +A RGraph/admin/mysql/libraries/import/docsql.php +A RGraph/admin/mysql/libraries/import/ods.php +A RGraph/admin/mysql/libraries/import/xls.php +A RGraph/admin/mysql/libraries/import/README +A RGraph/admin/mysql/libraries/import/ldi.php +A RGraph/admin/mysql/libraries/sqlparser.data.php +A RGraph/admin/mysql/libraries/database_interface.lib.php +A RGraph/admin/mysql/libraries/Error_Handler.class.php +A RGraph/admin/mysql/libraries/export +A RGraph/admin/mysql/libraries/export/csv.php +A RGraph/admin/mysql/libraries/export/xlsx.php +A RGraph/admin/mysql/libraries/export/texytext.php +A RGraph/admin/mysql/libraries/export/sql.php +A RGraph/admin/mysql/libraries/export/xml.php +A RGraph/admin/mysql/libraries/export/htmlword.php +A RGraph/admin/mysql/libraries/export/excel.php +A RGraph/admin/mysql/libraries/export/yaml.php +A RGraph/admin/mysql/libraries/export/mediawiki.php +A RGraph/admin/mysql/libraries/export/codegen.php +A RGraph/admin/mysql/libraries/export/xls.php +A RGraph/admin/mysql/libraries/export/pdf.php +A RGraph/admin/mysql/libraries/export/json.php +A RGraph/admin/mysql/libraries/export/latex.php +A RGraph/admin/mysql/libraries/export/php_array.php +A RGraph/admin/mysql/libraries/export/ods.php +A RGraph/admin/mysql/libraries/export/odt.php +A RGraph/admin/mysql/libraries/tbl_triggers.lib.php +A RGraph/admin/mysql/libraries/db_links.inc.php +A RGraph/admin/mysql/libraries/core.lib.php +A RGraph/admin/mysql/libraries/mult_submits.inc.php +A RGraph/admin/mysql/libraries/header.inc.php +A RGraph/admin/mysql/libraries/db_table_exists.lib.php +A RGraph/admin/mysql/libraries/Theme_Manager.class.php +A RGraph/admin/mysql/libraries/common.inc.php +A RGraph/admin/mysql/libraries/parse_analyze.lib.php +A RGraph/admin/mysql/libraries/display_import.lib.php +A RGraph/admin/mysql/libraries/tbl_info.inc.php +A RGraph/admin/mysql/libraries/opendocument.lib.php +A RGraph/admin/mysql/libraries/header_scripts.inc.php +A RGraph/admin/mysql/libraries/display_import_ajax.lib.php +A RGraph/admin/mysql/libraries/check_user_privileges.lib.php +A RGraph/admin/mysql/libraries/language_stats.inc.php +A RGraph/admin/mysql/libraries/url_generating.lib.php +A RGraph/admin/mysql/libraries/display_export.lib.php +A RGraph/admin/mysql/libraries/auth +A RGraph/admin/mysql/libraries/auth/config.auth.lib.php +A RGraph/admin/mysql/libraries/auth/cookie.auth.lib.php +A RGraph/admin/mysql/libraries/auth/swekey +A RGraph/admin/mysql/libraries/auth/swekey/swekey.auth.lib.php +A RGraph/admin/mysql/libraries/auth/swekey/musbe-ca.crt +A RGraph/admin/mysql/libraries/auth/swekey/authentication.inc.php +A RGraph/admin/mysql/libraries/auth/swekey/swekey.php +A RGraph/admin/mysql/libraries/auth/signon.auth.lib.php +A RGraph/admin/mysql/libraries/auth/http.auth.lib.php +A RGraph/admin/mysql/libraries/navigation_header.inc.php +A RGraph/admin/mysql/libraries/display_create_database.lib.php +A RGraph/admin/mysql/libraries/replication.inc.php +A RGraph/admin/mysql/libraries/sqlparser.lib.php +A RGraph/admin/mysql/libraries/string_type_native.lib.php +A RGraph/admin/mysql/libraries/iconv_wrapper.lib.php +A RGraph/admin/mysql/libraries/File.class.php +A RGraph/admin/mysql/libraries/sanitizing.lib.php +A RGraph/admin/mysql/libraries/db_routines.inc.php +A RGraph/admin/mysql/libraries/.htaccess +A RGraph/admin/mysql/libraries/server_common.inc.php +A RGraph/admin/mysql/libraries/string_mb.lib.php +A RGraph/admin/mysql/libraries/ip_allow_deny.lib.php +A RGraph/admin/mysql/libraries/logging.lib.php +A RGraph/admin/mysql/libraries/mime.lib.php +A RGraph/admin/mysql/libraries/blobstreaming.lib.php +A RGraph/admin/mysql/libraries/common.lib.php +A RGraph/admin/mysql/libraries/StorageEngine.class.php +A RGraph/admin/mysql/libraries/transformations.lib.php +A RGraph/admin/mysql/libraries/Tracker.class.php +A RGraph/admin/mysql/libraries/engines +A RGraph/admin/mysql/libraries/engines/mrg_myisam.lib.php +A RGraph/admin/mysql/libraries/engines/ndbcluster.lib.php +A RGraph/admin/mysql/libraries/engines/bdb.lib.php +A RGraph/admin/mysql/libraries/engines/berkeleydb.lib.php +A RGraph/admin/mysql/libraries/engines/memory.lib.php +A RGraph/admin/mysql/libraries/engines/innodb.lib.php +A RGraph/admin/mysql/libraries/engines/binlog.lib.php +A RGraph/admin/mysql/libraries/engines/pbxt.lib.php +A RGraph/admin/mysql/libraries/engines/innobase.lib.php +A RGraph/admin/mysql/libraries/engines/merge.lib.php +A RGraph/admin/mysql/libraries/engines/myisam.lib.php +A RGraph/admin/mysql/libraries/engines/pbms.lib.php +A RGraph/admin/mysql/libraries/charset_conversion.lib.php +A RGraph/admin/mysql/libraries/transformations +A RGraph/admin/mysql/libraries/transformations/image_png__inline.inc.php +A RGraph/admin/mysql/libraries/transformations/text_plain__link.inc.php +A RGraph/admin/mysql/libraries/transformations/image_jpeg__inline.inc.php +A RGraph/admin/mysql/libraries/transformations/text_plain__sql.inc.php +A RGraph/admin/mysql/libraries/transformations/text_plain__imagelink.inc.php +A RGraph/admin/mysql/libraries/transformations/TEMPLATE_MIMETYPE +A RGraph/admin/mysql/libraries/transformations/text_plain__longToIpv4.inc.php +A RGraph/admin/mysql/libraries/transformations/template_generator.sh +A RGraph/admin/mysql/libraries/transformations/README +A RGraph/admin/mysql/libraries/transformations/global.inc.php +A RGraph/admin/mysql/libraries/transformations/generator.sh +A RGraph/admin/mysql/libraries/transformations/image_jpeg__link.inc.php +A RGraph/admin/mysql/libraries/transformations/application_octetstream__download.inc.php +A RGraph/admin/mysql/libraries/transformations/template_generator_mimetype.sh +A RGraph/admin/mysql/libraries/transformations/text_plain__external.inc.php +A RGraph/admin/mysql/libraries/transformations/text_plain__substr.inc.php +A RGraph/admin/mysql/libraries/transformations/text_plain__formatted.inc.php +A RGraph/admin/mysql/libraries/transformations/text_plain__dateformat.inc.php +A RGraph/admin/mysql/libraries/transformations/TEMPLATE +A RGraph/admin/mysql/libraries/transformations/application_octetstream__hex.inc.php +A RGraph/admin/mysql/libraries/display_create_table.lib.php +A RGraph/admin/mysql/libraries/db_common.inc.php +A RGraph/admin/mysql/libraries/footer.inc.php +A RGraph/admin/mysql/libraries/Theme.class.php +A RGraph/admin/mysql/libraries/zip.lib.php +A RGraph/admin/mysql/libraries/file_listing.php +A RGraph/admin/mysql/libraries/dbi +A RGraph/admin/mysql/libraries/dbi/mysqli.dbi.lib.php +A RGraph/admin/mysql/libraries/dbi/mysql.dbi.lib.php +A RGraph/admin/mysql/libraries/Config.class.php +A RGraph/admin/mysql/libraries/select_server.lib.php +A RGraph/admin/mysql/libraries/sql_query_form.lib.php +A RGraph/admin/mysql/libraries/relation.lib.php +A RGraph/admin/mysql/libraries/grab_globals.lib.php +A RGraph/admin/mysql/libraries/php-gettext +A RGraph/admin/mysql/libraries/php-gettext/streams.php +A RGraph/admin/mysql/libraries/php-gettext/gettext.php +A RGraph/admin/mysql/libraries/php-gettext/gettext.inc +A RGraph/admin/mysql/libraries/kanji-encoding.lib.php +A RGraph/admin/mysql/libraries/select_lang.lib.php +A RGraph/admin/mysql/libraries/header_meta_style.inc.php +A RGraph/admin/mysql/libraries/Message.class.php +A RGraph/admin/mysql/libraries/config.default.php +A RGraph/admin/mysql/pmd_help.php +A RGraph/admin/mysql/pmd_common.php +A RGraph/admin/licenses +A RGraph/admin/licenses/multi.php +A RGraph/admin/licenses/statistics.php +A RGraph/admin/licenses/reports.php +A RGraph/admin/licenses/index.php +A RGraph/admin/articles +A RGraph/admin/articles/index.html +A RGraph/admin/.htaccess +A RGraph/admin/news +A RGraph/admin/news/iframe.php +A RGraph/admin/news/index.php +A RGraph/admin/lib_auth.php +A RGraph/admin/zphpMyAdmin.old +A RGraph/admin/zphpMyAdmin.old/pdf_schema.php +A RGraph/admin/zphpMyAdmin.old/db_details_links.php +A RGraph/admin/zphpMyAdmin.old/db_printview.php +A RGraph/admin/zphpMyAdmin.old/tbl_addfield.php +A RGraph/admin/zphpMyAdmin.old/tbl_properties.php +A RGraph/admin/zphpMyAdmin.old/scripts +A RGraph/admin/zphpMyAdmin.old/scripts/remove_control_m.sh +A RGraph/admin/zphpMyAdmin.old/scripts/check_lang.php +A RGraph/admin/zphpMyAdmin.old/scripts/decode_bug.php +A RGraph/admin/zphpMyAdmin.old/scripts/convertcfg.pl +A RGraph/admin/zphpMyAdmin.old/scripts/create-release.sh +A RGraph/admin/zphpMyAdmin.old/scripts/create_tables.sql +A RGraph/admin/zphpMyAdmin.old/scripts/extchg.sh +A RGraph/admin/zphpMyAdmin.old/scripts/inno2pma.sh +A RGraph/admin/zphpMyAdmin.old/tbl_create.php +A RGraph/admin/zphpMyAdmin.old/ldi_check.php +A RGraph/admin/zphpMyAdmin.old/server_export.php +A RGraph/admin/zphpMyAdmin.old/chk_rel.php +A RGraph/admin/zphpMyAdmin.old/header_printview.inc.php +A RGraph/admin/zphpMyAdmin.old/config.inc.php +A RGraph/admin/zphpMyAdmin.old/server_links.inc.php +A RGraph/admin/zphpMyAdmin.old/tbl_select.php +A RGraph/admin/zphpMyAdmin.old/main.php +A RGraph/admin/zphpMyAdmin.old/tbl_change.php +A RGraph/admin/zphpMyAdmin.old/Documentation.html +A RGraph/admin/zphpMyAdmin.old/docs.css +A RGraph/admin/zphpMyAdmin.old/translators.html +A RGraph/admin/zphpMyAdmin.old/db_details.php +A RGraph/admin/zphpMyAdmin.old/tbl_row_delete.php +A RGraph/admin/zphpMyAdmin.old/lang +A RGraph/admin/zphpMyAdmin.old/lang/basque-utf-8.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/italian-utf-8.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/italian-iso-8859-1.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/arabic-utf-8.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/latvian-windows-1257.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/serbian_latin-windows-1250.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/thai-tis-620.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/indonesian-iso-8859-1.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/english-utf-8.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/english-iso-8859-1.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/serbian_cyrillic-windows-1251.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/japanese-sjis.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/georgian-utf-8.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/czech-iso-8859-2.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/polish-iso-8859-2.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/persian-utf-8.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/portuguese-iso-8859-1.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/malay-utf-8.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/bosnian-windows-1250.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/spanish-iso-8859-1.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/spanish-utf-8.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/danish-utf-8.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/swedish-iso-8859-1.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/galician-utf-8.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/dutch-iso-8859-1.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/slovak-windows-1250.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/azerbaijani-utf-8.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/bulgarian-windows-1251.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/ukrainian-utf-8.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/chinese_gb-utf-8.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/russian-dos-866.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/sync_lang.sh +A RGraph/admin/zphpMyAdmin.old/lang/czech-utf-8.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/lithuanian-utf-8.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/greek-utf-8.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/brazilian_portuguese-utf-8.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/brazilian_portuguese-iso-8859-1.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/finnish-utf-8.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/slovenian-utf-8.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/japanese-euc.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/afrikaans-iso-8859-1.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/slovak-utf-8.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/russian-windows-1251.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/sort_lang.sh +A RGraph/admin/zphpMyAdmin.old/lang/greek-iso-8859-7.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/arabic-windows-1256.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/catalan-utf-8.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/romanian-iso-8859-1.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/danish-iso-8859-1.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/add_message.sh +A RGraph/admin/zphpMyAdmin.old/lang/bulgarian-koi8-r.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/slovenian-windows-1250.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/korean-ks_c_5601-1987.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/croatian-windows-1250.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/hungarian-iso-8859-2.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/estonian-iso-8859-1.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/persian-windows-1256.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/chinese_big5-utf-8.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/chinese_gb.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/thai-utf-8.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/indonesian-utf-8.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/norwegian-iso-8859-1.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/norwegian-utf-8.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/russian-koi8-r.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/finnish-iso-8859-1.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/ukrainian-windows-1251.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/slovenian-iso-8859-2.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/croatian-iso-8859-2.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/malay-iso-8859-1.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/bulgarian-utf-8.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/romanian-utf-8.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/galician-iso-8859-1.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/dutch-utf-8.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/remove_message.sh +A RGraph/admin/zphpMyAdmin.old/lang/hungarian-utf-8.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/serbian_cyrillic-utf-8.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/estonian-utf-8.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/basque-iso-8859-1.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/translatecount.sh +A RGraph/admin/zphpMyAdmin.old/lang/chinese_big5.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/russian-utf-8.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/japanese-utf-8.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/azerbaijani-iso-8859-9.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/check_lang.sh +A RGraph/admin/zphpMyAdmin.old/lang/bosnian-utf-8.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/turkish-utf-8.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/hindi-utf-8.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/latvian-utf-8.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/polish-utf-8.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/afrikaans-utf-8.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/croatian-utf-8.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/slovak-iso-8859-2.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/turkish-iso-8859-9.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/portuguese-utf-8.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/catalan-iso-8859-1.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/french-utf-8.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/french-iso-8859-1.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/albanian-utf-8.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/albanian-iso-8859-1.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/add_message_file.sh +A RGraph/admin/zphpMyAdmin.old/lang/swedish-utf-8.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/czech-windows-1250.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/hebrew-iso-8859-8-i.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/german-utf-8.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/german-iso-8859-1.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/serbian_latin-utf-8.inc.php +A RGraph/admin/zphpMyAdmin.old/lang/lithuanian-windows-1257.inc.php +A RGraph/admin/zphpMyAdmin.old/db_details_export.php +A RGraph/admin/zphpMyAdmin.old/tbl_properties_links.php +A RGraph/admin/zphpMyAdmin.old/server_variables.php +A RGraph/admin/zphpMyAdmin.old/tbl_properties_export.php +A RGraph/admin/zphpMyAdmin.old/tbl_indexes.php +A RGraph/admin/zphpMyAdmin.old/user_password.php +A RGraph/admin/zphpMyAdmin.old/Documentation.txt +A RGraph/admin/zphpMyAdmin.old/ChangeLog +A RGraph/admin/zphpMyAdmin.old/tbl_properties.inc.php +A RGraph/admin/zphpMyAdmin.old/index.php +A RGraph/admin/zphpMyAdmin.old/tbl_alter.php +A RGraph/admin/zphpMyAdmin.old/db_details_structure.php +A RGraph/admin/zphpMyAdmin.old/tbl_query_box.php +A RGraph/admin/zphpMyAdmin.old/queryframe.php +A RGraph/admin/zphpMyAdmin.old/db_datadict.php +A RGraph/admin/zphpMyAdmin.old/tbl_printview.php +A RGraph/admin/zphpMyAdmin.old/server_privileges.php +A RGraph/admin/zphpMyAdmin.old/mult_submits.inc.php +A RGraph/admin/zphpMyAdmin.old/header.inc.php +A RGraph/admin/zphpMyAdmin.old/db_details_common.php +A RGraph/admin/zphpMyAdmin.old/phpinfo.php +A RGraph/admin/zphpMyAdmin.old/tbl_properties_common.php +A RGraph/admin/zphpMyAdmin.old/CREDITS +A RGraph/admin/zphpMyAdmin.old/db_create.php +A RGraph/admin/zphpMyAdmin.old/server_status.php +A RGraph/admin/zphpMyAdmin.old/db_details_db_info.php +A RGraph/admin/zphpMyAdmin.old/tbl_replace.php +A RGraph/admin/zphpMyAdmin.old/tbl_properties_structure.php +A RGraph/admin/zphpMyAdmin.old/tbl_relation.php +A RGraph/admin/zphpMyAdmin.old/ldi_table.php +A RGraph/admin/zphpMyAdmin.old/images +A RGraph/admin/zphpMyAdmin.old/images/button_nodrop.png +A RGraph/admin/zphpMyAdmin.old/images/pma_logo.png +A RGraph/admin/zphpMyAdmin.old/images/button_unique.png +A RGraph/admin/zphpMyAdmin.old/images/asc_order.png +A RGraph/admin/zphpMyAdmin.old/images/browse.png +A RGraph/admin/zphpMyAdmin.old/images/button_fulltext.png +A RGraph/admin/zphpMyAdmin.old/images/button_select.png +A RGraph/admin/zphpMyAdmin.old/images/button_noprimary.png +A RGraph/admin/zphpMyAdmin.old/images/button_primary.png +A RGraph/admin/zphpMyAdmin.old/images/vertical_line.png +A RGraph/admin/zphpMyAdmin.old/images/plus.png +A RGraph/admin/zphpMyAdmin.old/images/minus.png +A RGraph/admin/zphpMyAdmin.old/images/arrow_ltr.gif +A RGraph/admin/zphpMyAdmin.old/images/arrow_rtl.gif +A RGraph/admin/zphpMyAdmin.old/images/button_browse.png +A RGraph/admin/zphpMyAdmin.old/images/button_nounique.png +A RGraph/admin/zphpMyAdmin.old/images/spacer.gif +A RGraph/admin/zphpMyAdmin.old/images/button_noindex.png +A RGraph/admin/zphpMyAdmin.old/images/button_nofulltext.png +A RGraph/admin/zphpMyAdmin.old/images/button_drop.png +A RGraph/admin/zphpMyAdmin.old/images/button_insert.png +A RGraph/admin/zphpMyAdmin.old/images/button_bookmark.png +A RGraph/admin/zphpMyAdmin.old/images/partialtext.png +A RGraph/admin/zphpMyAdmin.old/images/button_index.png +A RGraph/admin/zphpMyAdmin.old/images/Thumbs.db +A RGraph/admin/zphpMyAdmin.old/images/fulltext.png +A RGraph/admin/zphpMyAdmin.old/images/button_noselect.png +A RGraph/admin/zphpMyAdmin.old/images/desc_order.png +A RGraph/admin/zphpMyAdmin.old/images/item_rtl.png +A RGraph/admin/zphpMyAdmin.old/images/item_ltr.png +A RGraph/admin/zphpMyAdmin.old/images/button_edit.png +A RGraph/admin/zphpMyAdmin.old/images/button_smallbrowse.png +A RGraph/admin/zphpMyAdmin.old/images/button_noempty.png +A RGraph/admin/zphpMyAdmin.old/images/button_properties.png +A RGraph/admin/zphpMyAdmin.old/images/button_empty.png +A RGraph/admin/zphpMyAdmin.old/images/button_nobrowse.png +A RGraph/admin/zphpMyAdmin.old/INSTALL +A RGraph/admin/zphpMyAdmin.old/db_details_qbe.php +A RGraph/admin/zphpMyAdmin.old/server_common.inc.php +A RGraph/admin/zphpMyAdmin.old/left.php +A RGraph/admin/zphpMyAdmin.old/db_details_importdocsql.php +A RGraph/admin/zphpMyAdmin.old/LICENSE +A RGraph/admin/zphpMyAdmin.old/server_collations.php +A RGraph/admin/zphpMyAdmin.old/querywindow.php +A RGraph/admin/zphpMyAdmin.old/sql.php +A RGraph/admin/zphpMyAdmin.old/server_processlist.php +A RGraph/admin/zphpMyAdmin.old/read_dump.php +A RGraph/admin/zphpMyAdmin.old/tbl_properties_operations.php +A RGraph/admin/zphpMyAdmin.old/tbl_move_copy.php +A RGraph/admin/zphpMyAdmin.old/css +A RGraph/admin/zphpMyAdmin.old/css/phpmyadmin.css.php +A RGraph/admin/zphpMyAdmin.old/tbl_replace_fields.php +A RGraph/admin/zphpMyAdmin.old/RELEASE-DATE-2.5.5-pl1 +A RGraph/admin/zphpMyAdmin.old/footer.inc.php +A RGraph/admin/zphpMyAdmin.old/transformation_wrapper.php +A RGraph/admin/zphpMyAdmin.old/README +A RGraph/admin/zphpMyAdmin.old/tbl_rename.php +A RGraph/admin/zphpMyAdmin.old/db_search.php +A RGraph/admin/zphpMyAdmin.old/server_databases.php +A RGraph/admin/zphpMyAdmin.old/TODO +A RGraph/admin/zphpMyAdmin.old/tbl_properties_table_info.php +A RGraph/admin/zphpMyAdmin.old/export.php +A RGraph/admin/zphpMyAdmin.old/browse_foreigners.php +A RGraph/admin/zphpMyAdmin.old/libraries +A RGraph/admin/zphpMyAdmin.old/libraries/export +A RGraph/admin/zphpMyAdmin.old/libraries/export/csv.php +A RGraph/admin/zphpMyAdmin.old/libraries/export/latex.php +A RGraph/admin/zphpMyAdmin.old/libraries/export/sql.php +A RGraph/admin/zphpMyAdmin.old/libraries/export/xml.php +A RGraph/admin/zphpMyAdmin.old/libraries/mysql_wrappers.lib.php +A RGraph/admin/zphpMyAdmin.old/libraries/header_http.inc.php +A RGraph/admin/zphpMyAdmin.old/libraries/db_table_exists.lib.php +A RGraph/admin/zphpMyAdmin.old/libraries/config_import.lib.php +A RGraph/admin/zphpMyAdmin.old/libraries/mysql_charsets.lib.php +A RGraph/admin/zphpMyAdmin.old/libraries/sqlvalidator.class.php +A RGraph/admin/zphpMyAdmin.old/libraries/bookmark.lib.php +A RGraph/admin/zphpMyAdmin.old/libraries/url_generating.lib.php +A RGraph/admin/zphpMyAdmin.old/libraries/auth +A RGraph/admin/zphpMyAdmin.old/libraries/auth/config.auth.lib.php +A RGraph/admin/zphpMyAdmin.old/libraries/auth/cookie.auth.lib.php +A RGraph/admin/zphpMyAdmin.old/libraries/auth/http.auth.lib.php +A RGraph/admin/zphpMyAdmin.old/libraries/display_export.lib.php +A RGraph/admin/zphpMyAdmin.old/libraries/display_tbl_links.lib.php +A RGraph/admin/zphpMyAdmin.old/libraries/tbl_change.js +A RGraph/admin/zphpMyAdmin.old/libraries/blowfish.php +A RGraph/admin/zphpMyAdmin.old/libraries/left.js +A RGraph/admin/zphpMyAdmin.old/libraries/db_config.lib.php +A RGraph/admin/zphpMyAdmin.old/libraries/sqlparser.lib.php +A RGraph/admin/zphpMyAdmin.old/libraries/server_privileges.js +A RGraph/admin/zphpMyAdmin.old/libraries/user_password.js +A RGraph/admin/zphpMyAdmin.old/libraries/relation_cleanup.lib.php +A RGraph/admin/zphpMyAdmin.old/libraries/fpdf +A RGraph/admin/zphpMyAdmin.old/libraries/fpdf/fpdf.php +A RGraph/admin/zphpMyAdmin.old/libraries/fpdf/font +A RGraph/admin/zphpMyAdmin.old/libraries/fpdf/font/tahoma.php +A RGraph/admin/zphpMyAdmin.old/libraries/fpdf/font/timesi.php +A RGraph/admin/zphpMyAdmin.old/libraries/fpdf/font/tahomab.php +A RGraph/admin/zphpMyAdmin.old/libraries/fpdf/font/timesbi.php +A RGraph/admin/zphpMyAdmin.old/libraries/fpdf/font/zapfdingbats.php +A RGraph/admin/zphpMyAdmin.old/libraries/fpdf/font/helveticai.php +A RGraph/admin/zphpMyAdmin.old/libraries/fpdf/font/helveticabi.php +A RGraph/admin/zphpMyAdmin.old/libraries/fpdf/font/times.php +A RGraph/admin/zphpMyAdmin.old/libraries/fpdf/font/timesb.php +A RGraph/admin/zphpMyAdmin.old/libraries/fpdf/font/helvetica.php +A RGraph/admin/zphpMyAdmin.old/libraries/fpdf/font/symbol.php +A RGraph/admin/zphpMyAdmin.old/libraries/fpdf/font/helveticab.php +A RGraph/admin/zphpMyAdmin.old/libraries/fpdf/font/courier.php +A RGraph/admin/zphpMyAdmin.old/libraries/fpdf/README +A RGraph/admin/zphpMyAdmin.old/libraries/ip_allow_deny.lib.php +A RGraph/admin/zphpMyAdmin.old/libraries/get_foreign.lib.php +A RGraph/admin/zphpMyAdmin.old/libraries/functions.js +A RGraph/admin/zphpMyAdmin.old/libraries/common.lib.php +A RGraph/admin/zphpMyAdmin.old/libraries/transformations.lib.php +A RGraph/admin/zphpMyAdmin.old/libraries/charset_conversion.lib.php +A RGraph/admin/zphpMyAdmin.old/libraries/transformations +A RGraph/admin/zphpMyAdmin.old/libraries/transformations/image_png__inline.inc.php0000644 +A RGraph/admin/zphpMyAdmin.old/libraries/transformations/text_plain__link.inc.php +A RGraph/admin/zphpMyAdmin.old/libraries/transformations/image_jpeg__inline.inc.php +A RGraph/admin/zphpMyAdmin.old/libraries/transformations/text_plain__imagelink.inc.php +A RGraph/admin/zphpMyAdmin.old/libraries/transformations/TEMPLATE_MIMETYPE +A RGraph/admin/zphpMyAdmin.old/libraries/transformations/template_generator.sh +A RGraph/admin/zphpMyAdmin.old/libraries/transformations/overview.php +A RGraph/admin/zphpMyAdmin.old/libraries/transformations/README +A RGraph/admin/zphpMyAdmin.old/libraries/transformations/global.inc.php +A RGraph/admin/zphpMyAdmin.old/libraries/transformations/generator.sh +A RGraph/admin/zphpMyAdmin.old/libraries/transformations/image_jpeg__link.inc.php +A RGraph/admin/zphpMyAdmin.old/libraries/transformations/template_generator_mimetype.sh +A RGraph/admin/zphpMyAdmin.old/libraries/transformations/text_plain__external.inc.php +A RGraph/admin/zphpMyAdmin.old/libraries/transformations/text_plain__substr.inc.php +A RGraph/admin/zphpMyAdmin.old/libraries/transformations/text_plain__formatted.inc.php +A RGraph/admin/zphpMyAdmin.old/libraries/transformations/text_plain__dateformat.inc.php +A RGraph/admin/zphpMyAdmin.old/libraries/transformations/TEMPLATE +A RGraph/admin/zphpMyAdmin.old/libraries/read_dump.lib.php +A RGraph/admin/zphpMyAdmin.old/libraries/ob.lib.php +A RGraph/admin/zphpMyAdmin.old/libraries/dbg +A RGraph/admin/zphpMyAdmin.old/libraries/dbg/profiling.php +A RGraph/admin/zphpMyAdmin.old/libraries/dbg/setup.php +A RGraph/admin/zphpMyAdmin.old/libraries/defines_mysql.lib.php +A RGraph/admin/zphpMyAdmin.old/libraries/zip.lib.php +A RGraph/admin/zphpMyAdmin.old/libraries/sqlvalidator.lib.php +A RGraph/admin/zphpMyAdmin.old/libraries/display_tbl.lib.php +A RGraph/admin/zphpMyAdmin.old/libraries/string.lib.php +A RGraph/admin/zphpMyAdmin.old/libraries/dom-drag.js +A RGraph/admin/zphpMyAdmin.old/libraries/relation.lib.php +A RGraph/admin/zphpMyAdmin.old/libraries/defines.lib.php +A RGraph/admin/zphpMyAdmin.old/libraries/grab_globals.lib.php +A RGraph/admin/zphpMyAdmin.old/libraries/indexes.js +A RGraph/admin/zphpMyAdmin.old/libraries/sqlparser.data.php +A RGraph/admin/zphpMyAdmin.old/libraries/kanji-encoding.lib.php +A RGraph/admin/zphpMyAdmin.old/libraries/select_lang.lib.php +A RGraph/admin/zphpMyAdmin.old/libraries/header_meta_style.inc.php +A RGraph/admin/zphpMyAdmin.old/pdf_pages.php +A RGraph/analog.css +A RGraph/css +A RGraph/css/common.css +A RGraph/css/ModalDialog.css +A RGraph/css/website.css +A RGraph/css/index.html +A RGraph/css/.htaccess +A RGraph/testimonial.html +A RGraph/librariesRGraph.rose.js.bak +A RGraph/video.webm +A RGraph/screenshots +A RGraph/screenshots/led.png +A RGraph/screenshots/bar.png +A RGraph/screenshots/scatter.png +A RGraph/screenshots/rose.png +A RGraph/screenshots/meter.png +A RGraph/screenshots/hprogress.png +A RGraph/screenshots/hbar.png +A RGraph/screenshots/tradar.png +A RGraph/screenshots/pie.png +A RGraph/screenshots/gantt.png +A RGraph/screenshots/odo.png +A RGraph/screenshots/rscatter.png +A RGraph/screenshots/line.png +A RGraph/screenshots/funnel.png +A RGraph/screenshots/bipolar.png +A RGraph/screenshots/donut.png +A RGraph/screenshots/vprogress.png +A RGraph/sitemap.xml +A RGraph/documents +A RGraph/documents/PG-invoice.html +A RGraph/entry.html +A RGraph/potential-faqs.txt +A RGraph/captcha.html +A RGraph/excanvas +A RGraph/excanvas/EXCANVAS-LICENSE.txt +A RGraph/excanvas/excanvas.compressed.js +A RGraph/excanvas/excanvas.original.js +A RGraph/excanvas/.htaccess +A RGraph/excanvas/HTACCESS-SAMPLE +A RGraph/favicon.png +A RGraph/index.html +A RGraph/libraries +A RGraph/libraries/RGraph.skeleton.js +A RGraph/libraries/RGraph.radar.js +A RGraph/libraries/RGraph.vprogress.js +A RGraph/libraries/RGraph.pie.js.old +A RGraph/libraries/RGraph.thermometer.js +A RGraph/libraries/RGraph.fuel.js +A RGraph/libraries/RGraph.common.annotate.js +A RGraph/libraries/RGraph.common.zoom.js +A RGraph/libraries/RGraph.modaldialog.js +A RGraph/libraries/RGraph.hbar.js +A RGraph/libraries/RGraph.pie.js +A RGraph/libraries/.htaccess +A RGraph/libraries/RGraph.rscatter.js +A RGraph/libraries/RGraph.line.js +A RGraph/libraries/RGraph.funnel.js +A RGraph/libraries/RGraph.bipolar.js +A RGraph/libraries/RGraph.gauge.js +A RGraph/libraries/RGraph.led.js +A RGraph/libraries/RGraph.bar.js +A RGraph/libraries/RGraph.common.tooltips.js +A RGraph/libraries/RGraph.scatter.js +A RGraph/libraries/RGraph.common.effects.js +A RGraph/libraries/RGraph.rose.js +A RGraph/libraries/RGraph.common.context.js +A RGraph/libraries/RGraph.meter.js +A RGraph/libraries/RGraph.hprogress.js +A RGraph/libraries/RGraph.gantt.js +A RGraph/libraries/index.html +A RGraph/libraries/RGraph.common.adjusting.js +A RGraph/libraries/RGraph.common.core.js +A RGraph/libraries/RGraph.waterfall.js +A RGraph/libraries/RGraph.odo.js +A RGraph/libraries/RGraph.common.resizing.js +A RGraph/examples +A RGraph/examples/meter.html +A RGraph/examples/hprogress.html +A RGraph/examples/hbar.html +A RGraph/examples/showcase.html +A RGraph/examples/gantt.html +A RGraph/examples/pie.html +A RGraph/examples/odo.html +A RGraph/examples/basic.html +A RGraph/examples/waterfall.html +A RGraph/examples/text.html +A RGraph/examples/line.html +A RGraph/examples/funnel.html +A RGraph/examples/rscatter.html +A RGraph/examples/gauge.html +A RGraph/examples/bipolar.html +A RGraph/examples/donut.html +A RGraph/examples/radar.html +A RGraph/examples/vprogress.html +A RGraph/examples/fuel.html +A RGraph/examples/thermometer.html +A RGraph/examples/led.html +A RGraph/examples/bar.html +A RGraph/examples/scatter.html +A RGraph/examples/index.html +A RGraph/examples/.htaccess +A RGraph/examples/rose.html +Exported revision 1751. diff --git a/schall/static/RGraph/docs/resizing.html b/schall/static/RGraph/docs/resizing.html new file mode 100644 index 0000000..8bc93a9 --- /dev/null +++ b/schall/static/RGraph/docs/resizing.html @@ -0,0 +1,159 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - Resizing your charts</title> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../favicon.png"> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.jpg"/> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js" ></script> + <script src="../libraries/RGraph.common.context.js" ></script> + <script src="../libraries/RGraph.common.resizing.js" ></script> + <script src="../libraries/RGraph.common.tooltips.js" ></script> + <script src="../libraries/RGraph.line.js" ></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + + <script> + window.onload = function () + { + /** + * Draw the line chart + */ + var line = new RGraph.Line('myLine', [4,6,3,7,8,4,9,5,6,4,8,5] ); + line.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']); + line.Set('chart.hmargin', 5); + line.Set('chart.title', 'A resizable line chart (tooltips)'); + line.Set('chart.colors', ['red']); + line.Set('chart.resizable', true); + line.Set('chart.hmargin', 5); + line.Set('chart.shadow', true); + line.Set('chart.shadow.blur', 5); + line.Set('chart.shadow.offsetx', 1); + line.Set('chart.shadow.offsety', 1); + line.Set('chart.contextmenu', [['Sample!', function () {alert('A sample item');}]]); + line.Set('chart.background.grid.autofit', true); + line.Set('chart.background.grid.autofit.numhlines', 10); + line.Set('chart.linewidth', 3); + //line.Set('chart.tooltips', ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']); + line.Draw(); + } + </script> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> + +</head> +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + <div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="index.html">Documentation</a> + > + Resizing your charts + </div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - Resizing your charts</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + <canvas id="myLine" width="400" height="200" style="float: left">[No canvas support]</canvas> + + <p> </p> + + <p> + RGraph has the facility to allow you to resize your charts. This is new as of 10th April 2010. Because of the + numerous events it has to install code on, it is unlikely to work with other dynamic features. The context + menu does though, and now that tooltips use DOM2 events, so do they. It can be useful if you are, + for example, doing a presentation and need to enlarge the chart. + </p> + + <p> + All you need to do to enable it is set <i>chart.resizable</i> to true. There are certain caveats that you should be aware of though: + </p> + + <br clear="all" /> + + <ul> + <li> + Charts can only be enlarged down and to the right, so you will get better results if your chart is not placed at the + right of the page. + </li> + + <li> + The minimum you can resize your charts to is 50% of the original chart width/height. + </li> + + <li> + <b>Note:</b> Resizing can change the layout of your page (reflows). As such you will need to be careful when laying out your + page, and you may need to experiment with things like CSS float:, width, height etc so that the effect is either not apparent + or is minimal. + </li> + + <li> + If your canvas is nested within a table, resizing can result in very minor (1-2px) positioning changes. These + can be mitigated by turning off table borders, setting the cellspacing to 0 and also setting the cellpadding to 0. + </li> + </ul> + + <br /><br /><br /> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/docs/rose.html b/schall/static/RGraph/docs/rose.html new file mode 100644 index 0000000..e70abbe --- /dev/null +++ b/schall/static/RGraph/docs/rose.html @@ -0,0 +1,593 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for personal, | + * | charity and educational purposes it is free to use. You can read the full | + * | license here: | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - rose charts documentation</title> + + <script src="../libraries/RGraph.common.core.js" ></script> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="/favicon.png"> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.jpg"/> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> + +</head> +<body> + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + <div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="index.html">Documentation</a> + > + Rose charts + </div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - Rose charts documentation</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + <p> + The example file is <a href="../examples/rose.html">here</a>. + </p> + + <pre class="code"> +<script> + window.onload = function () + { + var data = [41,37,16,3,3]; + + var rose = new RGraph.Rose('myRose', data); + rose.Set('chart.labels', ['MSIE 7 (41%)', + 'MSIE 6 (37%)', + 'Firefox (16%)', + 'Safari (3%)', + 'Other (3%)']); + rose.Draw(); + } +</script> +</pre> + + <a name="available.properties"></a> + <ul> + <li><a href="#available.properties">Properties</a></li> + <li><a href="#available.methods">Methods</a></li> + <li><a href="#stacked">Stacked Rose charts</a></li> + <li><a href="#non-equi-angular">Non-equi-angular Rose charts</a></li> + <li><a href="#animations">Rose chart specific animations</a></li> + </ul> + + <h2>Properties</h2> + + <p> + You can use these properties to control how the Rose chart appears. You can set them by using the Set() method. Eg: + </p> + + <p> + <b>myRose.Set('name', 'value');</b> + </p> + + <ul> + <li><a href="#margins">Margins</a></li> + <li><a href="#colors">Colors</a></li> + <li><a href="#labels and text">Labels and text</a></li> + <li><a href="#titles">Titles</a></li> + <li><a href="#axis properties">Axis properties</a></li> + <li><a href="#scale">Scale</a></li> + <li><a href="#key">Key</a></li> + <li><a href="#interactive features">Interactive features</a></li> + <li><a href="#zoom">Zoom</a></li> + <li><a href="#misc">Miscellaneous</a></li> + </ul> + + +<a name="margins"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Margins</h3> + + <a name="chart.gutter.left"></a> + <b>chart.gutter.left</b><br /> + The left gutter of the chart, (the gutter is where the labels and title are)).<br /> + <i>Default: 25</i><br /><br /> + + <a name="chart.gutter.right"></a> + <b>chart.gutter.right</b><br /> + The right gutter of the chart, (the gutter is where the labels and title are).<br /> + <i>Default: 25</i><br /><br /> + + <a name="chart.gutter.top"></a> + <b>chart.gutter.top</b><br /> + The top gutter of the chart, (the gutter is where the labels and title are).<br /> + <i>Default: 25</i><br /><br /> + + <a name="chart.gutter.bottom"></a> + <b>chart.gutter.bottom</b><br /> + The bottom gutter of the chart, (the gutter is where the labels and title are).<br /> + <i>Default: 25</i><br /><br /> + + <a name="chart.margin"></a> + <b>chart.margin</b><br /> + This is the margin that is either side of each segment. This allows you to have a gap between each segment. It is the size + of the gap in <b>degrees</b>. It doesn't apply to non-equi-angular Rose charts - only regular and stacked charts. + <br /> + <i>Default: 0</i><br /><br /> + + +<a name="colors"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Colors</h3> + + <a name="chart.colors"></a> + <b>chart.colors</b><br /> + An array of colors to be used by the chart.<br /> + <i>Default: ['red', 'rgb(0,255,255)', 'rgb(0,255,0)', 'gray', 'blue', 'rgb(255,128,255)','green', 'pink', 'gray', 'aqua']</i><br /><br /> + + <a name="chart.colors.alpha"></a> + <b>chart.colors.alpha</b><br /> + Instead of using <i>rgba()</i>, you can use color definitions such as <i>red</i> along with this setting to add + transparency.<br /> + <i>Default: null</i></i><br /><br /> + + <a name="chart.colors.sequential"></a> + <b>chart.colors.sequential</b><br /> + Because of the new (as of July 2011) support for grouped Rose charts, the way colors are used has changed. So to have them + used in a sequential fashion as before the change, you will need to set this option to true. + <i>Default: false</i></i><br /><br /> + +<a name="labels and text"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Labels and text</h3> <a name="chart.text.font"></a> +<b>chart.text.font</b><br /> + The font used to render the text.<br /><i>Default: Verdana</i><br /><br /> + <a name="chart.text.color"></a> +<b>chart.text.color</b><br /> + The color of the labels. <br /><i>Default: black</i><br /><br /> + <a name="chart.text.size"></a> +<b>chart.text.size</b><br /> + The size of the text (in points).<br /> <i>Default: 10</i><br /><br /> + <a name="chart.labels"></a> +<b>chart.labels</b><br /> + The labels, if any, for the chart.<br /><i>Default: none</i><br /><br /> + <a name="chart.labels.axes"></a> +<b>chart.labels.axes</b><br /> + This controls the axes that show the scale labels. Each letter stands for the appropriate axis (North, South, East and West)<br /><i>Default: nsew</i><br /><br /> + <a name="chart.labels.position"></a> +<b>chart.labels.position</b><br /> + This can be either <i>center</i> or <i>edge</i> and determines the position of the labels.<br /><i>Default: center</i><br /><br /> +<a name="titles"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Titles</h3> + +<a name="chart.title"></a> +<b>chart.title</b><br /> + The title of the chart. <br /><i>Default: none</i><br /><br /> + + + +<a name="chart.title.font"></a> +<b>chart.title.font</b><br /> +The font that the title is rendered in. If not specified the chart.text.font setting is used (usually Verdana)<br /> +<i>Default: null</i><br /><br /> + +<a name="chart.title.size"></a> +<b>chart.title.size</b><br /> +The size of the title. If not specified the size is usually 2pt bigger than the chart.text.size setting.<br /> +<i>Default: null</i><br /><br /> + +<a name="chart.title.bold"></a> +<b>chart.title.bold</b><br /> +Whather the title is bold or not.<br /> +<i>Default: true</i><br /><br /> + + <a name="chart.title.background"></a> + <b>chart.title.background</b><br /> + The background color (if any) for the title.<br /> + <i>Default: null</i><br /><br /> + + <a name="chart.title.color"></a> +<b>chart.title.color</b><br /> + The color of the title.<br /> <i>Default: black</i><br /><br /> + <a name="chart.title.hpos"></a> +<b>chart.title.hpos</b><br /> + This allows you to completely override the horizontal positioning of the title. It should be a number between 0 and 1, and is multiplied with the whole width of the canvas and then used as the horizontal position. <br /><i>Default: null</i><br /><br /> + <a name="chart.title.vpos"></a> +<b>chart.title.vpos</b><br /> + This allows you to completely override the vertical positioning of the title. It should be a number between 0 and 1, and is multiplied with the gutter and then used as the vertical position. It can be useful if you need to have a large gutter.<br /><i>Default: null</i><br /><br /> + +<a name="axis properties"></a> + <h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Axis properties</h3> <a name="chart.ymax"></a> + <b>chart.ymax</b><br /> + This can be set to control the maximum value of the scale. It's so called to maintain a degree of API compatibility across chart libraries.<br /><i>Default: null</i><br /><br /> + +<a name="scale"></a> + <h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Scale</h3> + + <a name="chart.scale.round"></a> + <b>chart.scale.round</b><br /> + Whether to round the maximum scale value up or not. This will produce slightly better scales in some instances.<br /> + <i>Default: null</i><br /><br /> + + + + <a name="key"></a> + <h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Key</h3> + + <a name="chart.key"></a> + <b>chart.key</b><br /> + An array of key information. <br /> + <i>Default: [] (An empty array)</i><br /><br /> + + <a name="chart.key.background"></a> + <b>chart.key.background</b><br /> + The color of the key background. Typically white, you could set this to something like rgba(255,255,255,0.7) to allow people to see things behind it.<br> + <i>Default: white</i><br /><br /> + + <a name="chart.key.halign"></a> + <b>chart.key.halign</b><br /> + Instead of specifying the exact x/y coordinates, you can use this property to simply specify whether the key hould be + aligned <i>left</i> or <i>right</i>.<br /> + <i>Default: right</i><br /><br /> + + <a name="chart.key.position"></a> + <b>chart.key.position</b><br /> + Determines the position of the key.Either <b>graph</b> (default), or <b>gutter</b>.<br /> + <i>Default: graph</i><br /><br /> + + <b>chart.key.position.x</b><br /> + This allows you to specify a specific X coordinate for the key.<br /> + <i>Default: null</i><br /><br /> + + <b>chart.key.position.y</b><br /> + This allows you to specify a specific Y coordinate for the key.<br /> + <i>Default: null</i><br /><br /> + + <b>chart.key.position.gutter.boxed</b><br /> + If you have the key in gutter mode (ie horizontal), this allows you to give a background color.<br /> + <i>Default: true</i><br /><br /> + + <a name="chart.key.shadow"></a> + <b>chart.key.shadow</b><br /> + Whether a small drop shadow is applied to the key.<br /> + <i>Default: false</i><br /><br /> + + <a name="chart.key.shadow.color"></a> + <b>chart.key.shadow.color</b><br /> + The color of the shadow.<br /> + <i>Default: #666</i><br /><br /> + + <a name="chart.key.shadow.blur"></a> + <b>chart.key.shadow.blur</b><br /> + The extent of the blurring effect used on the shadow.<br /> + <i>Default: 3</i><br /><br /> + + <a name="chart.key.shadow.offsetx"></a> + <b>chart.key.shadow.offsetx</b><br /> + The X offset of the shadow.<br /> + <i>Default: 2</i><br /><br /> + + <a name="chart.key.shadow.offsety"></a> + <b>chart.key.shadow.offsety</b><br /> + The Y offset of the shadow.<br /> + <i>Default: 2</i><br /><br /> + + <b>chart.key.rounded</b><br /> + This controls whether the corners of the key (in graph mode) are curved. If the key is gutter mode, this has no effect.<br /> + <i>Default: false</i><br /><br /> + + <b>chart.key.color.shape</b><br /> + This can be <i>square</i>, <i>circle</i> or <i>line</i> and controls how the color indicators in the key appear.<br /> + <i>Default: square</i><br /><br /> + + <b>chart.key.linewidth</b><br /> + The line width of the surrounding border on the key.<br /> + <i>Default: 1</i><br /><br /> + + + +<a name="interactive features"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Interactive features</h3> <a name="chart.tooltips"></a> + + <b>chart.tooltips</b><br /> + An array of tooltips. You can use HTML if you so wish.<br /> + <i>Default: [] (An empty array)</i><br /><br /> + + <a name="chart.tooltips.event"></a> + <b>chart.tooltips.event</b><br /> + This is the event that triggers the tooltips. It can be either <i>onclick</i> or <i>onmousemove</i>.<br /> + <i>Default: onclick</i><br /><br /> + + <a name="chart.tooltips.effect"></a> + <b>chart.tooltips.effect</b><br /> + The tooltip effect used. Can be either <i>fade</i> or <i>expand</i>.<br /> + <i>Default: fade</i><br /><br /> + + <a name="chart.tooltips.css.class"></a> + <b>chart.tooltips.css.class</b><br /> + This is the name of the CSS class the chart uses.<br /> + <i>Default: RGraph_tooltip</i><br /><br /> + + <a name="chart.tooltips.override"></a> + <b>chart.tooltips.override</b><br /> + If you wish to handle showing tooltips yourself, this should be a function object which does just that. There's more + information on the <a href="tooltips.html">tooltips documentation page</a><br /> + <i>Default: null</i><br /><br /> + + <a name="chart.contextmenu"></a> + <b>chart.contextmenu</b><br /> + An array of context menu items. More information on context menus is <a href="context.html">here</a>.<br /> + <i>Default: [] (An empty array)</i><br /><br /> + + <a name="chart.annotatable"></a> + <b>chart.annotatable</b><br /> + Whether annotations are enabled for the chart (ie you can draw on the chart interactively.<br /> + <i>Default: false</i><br /><br /> + + <a name="chart.annotate.color"></a> + <b>chart.annotate.color</b><br /> + If you do not allow the use of the palette, then this will be the only colour allowed for annotations.<br /> + <i>Default: black</i><br /><br /> + + + + <a name="chart.resizable"></a> + <b>chart.resizable</b><br /> + Defaulting to false, this determines whether your chart will be resizable. Because of the numerous event handlers this has to install code on, This feature is unlikely to work with other dynamic features (the context menu is fine however).<br /> + <i>Default: false</i><br /><br /> + + + <a name="chart.resize.handle.background"></a> + <b>chart.resize.handle.background</b><br /> + With this you can specify the background color for the resize handle. If you're adjusting the position of the + handle then you may need this to make the handle stand out more.<br /> + <i>Default: null</i><br /><br /> + + + <a name="chart.adjustable"></a> +<b>chart.adjustable</b><br /> + Defaulting to false, this determines whether your rose chart will be adjustable (click the edge of a segment and drag to adjust it). <br /><i>Default: false</i><br /><br /> +<a name="zoom"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Zoom</h3> <a name="chart.zoom.mode"></a> +<b>chart.zoom.mode</b><br /> + Can be used to control whether the zoom is in thumbnail or canvas mode. Possible values are: <i>thumbnail</i> and <i>canvas</i>.<br /><i>Default: canvas</i><br /><br /> + <a name="chart.zoom.factor"></a> +<b>chart.zoom.factor</b><br /> + This is the factor that the chart will be zoomed by (bigger values means more zoom)<br /><i>Default: 1.5</i><br /><br /> + <a name="chart.zoom.fade.in"></a> +<b>chart.zoom.fade.in</b><br /> + Whether the zoomed canvas fades in or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /><i>Default: true</i><br /><br /> + <a name="chart.zoom.fade.out"></a> +<b>chart.zoom.fade.out</b><br /> + Whether the zoomed canvas fades out or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /><i>Default: true</i><br /><br /> + <a name="chart.zoom.hdir"></a> +<b>chart.zoom.hdir</b><br /> + The horizontal direction of the zoom. Possible values are: <i>left</i>, <i>center</i>, <i>right</i><br /><i>Default: right</i><br /><br /> + <a name="chart.zoom.vdir"></a> +<b>chart.zoom.vdir</b><br /> + The vertical direction of the zoom. Possible values are: <i>up</i>, <i>center</i>, <i>down</i><br /><i>Default: down</i><br /><br /> + <a name="chart.zoom.delay"></a> +<b>chart.zoom.delay</b><br /> + The delay (in milliseconds) between frames.<br /><i>Default: 50</i><br /><br /> + <a name="chart.zoom.frames"></a> +<b>chart.zoom.frames</b><br /> + The number of frames in the zoom animation.<br /><i>Default: 10</i><br /><br /> + <a name="chart.zoom.shadow"></a> +<b>chart.zoom.shadow</b><br /> + Whether or not the zoomed canvas has a shadow or not.<br /><i>Default: true</i><br /><br /> + <a name="chart.zoom.thumbnail.width"></a> +<b>chart.zoom.thumbnail.width</b><br /> + When the zoom is in thumbnail mode, this is the width (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br /> + <a name="chart.zoom.thumbnail.height"></a> +<b>chart.zoom.thumbnail.height</b><br /> + When the zoom is in thumbnail mode, this is the height (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br /> + <a name="chart.zoom.background"></a> +<b>chart.zoom.background</b><br /> + Defaulting to true, this determines whether the zoom has a dark, semi-opaque background that covers the entire web page.<br /><i>Default: true</i><br /><br /> + +<a name="misc"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Miscellaneous</h3> + + <a name="chart.highlight.stroke"></a> + <b>chart.highlight.stroke</b><br /> + If you use tooltips, this controls the colour of the highlight stroke. + <br /><i>Default: black</i><br /><br /> + + <a name="chart.highlight.fill"></a> + <b>chart.highlight.fill</b><br /> + If you use tooltips, this controls the colour of the highlight fill. + <br /><i>Default: rgba(255,255,255,0.5)</i><br /><br /> + + <a name="chart.variant"></a> + <b>chart.variant</b><br /> + This option can be either <i>stacked</i> (the default) or <i>non-equi-angular</i>. Just because his option is set to + <i>stacked</i> does not automatically mean your chart is stacked. If you don't suppy the appropriate data you chart + may well appear as a regular Rose chart. Examples of appropriate data: + + <p> + A regular Rose chart + </p> + + <pre class="code"> +myRose = new RGraph.Rose('myCanvas', [8,5,4,8,6,7,2,3,5,8]); +</pre> + + <p> + A stacked Rose chart + </p> + + <pre class="code"> +myRose = new RGraph.Rose('myCanvas', [[2,6],[2,4],[1,5],[4,3],[7,5],[8,3],[4,5],[3,4],[2,6],[4,5]]); +</pre> + + <p> + A non-equi-angular Rose chart + </p> + + <pre class="code"> +myRose = new RGraph.Rose('myCanvas', [[45,23],[45,23],[5,26],[78,4],[49,12],[49,21],[40,18],[48,12],[43,23],[45,12]]); +myRose.Set('chart.variant', 'non-equi-angular'); +</pre> + + <p> + It is important to note that with a non-equi-angular each "value" is actually an array consisting of two values, + as shown. The first value represents the magnitude of the segment (ie how far the segment extends outwards), + and the second value represents the size of the segment. The second value is relative to all the other second + values - it is not the absolute angle used. The angle is calculated for you. + </p> + + <i>Default: stacked</i><br /><br /> +</div> + + <a name="available.methods"></a> + <br /> <br /> + <h2>Methods</h2> + + <b>obj.getSegment()</b><br /><br /> + + obj.getSegment() makes it easy to determine which segment of the Rose chart was clicked on. It provides: + + <ul> + <li>Originating X coordinate</li> + <li>Originating Y coordinate</li> + <li>The starting radius of the segment</li> + <li>The ending radius of the segment</li> + <li>The starting angle (in degrees)</li> + <li>The ending angle (in degrees)</li> + <li>The numerical index of the segment</li> + </ul> + + <pre class="code"> +<script> + RGraph.Register(myGraph); + + myGraph.canvas.onclick = function (e) + { + RGraph.FixEventObject(e); + RGraph.Redraw(); + + var canvas = e.target; + var context = canvas.getContext('2d'); + var obj = canvas.__object__; + <span style="color: green">var segment = obj.getSegment(e);</span> + + if (segment) { + context.fillStyle = 'rgba(255,255,255,0.5)'; + context.beginPath(); + + // Angles are provided in degrees, so convert them to radians + segment[4] /= 57.29; + segment[5] /= 57.29; + + context.moveTo(segment[0], segment[1]); + context.arc(segment[0], segment[1], segment[3], segment[4], segment[5], 0); + context.arc(segment[0], segment[1], segment[2], segment[5], segment[4], true); + context.stroke(); + context.fill(); + + e.stopPropagation(); + } + } + + window.onclick = function (e) + { + RGraph.Redraw(); + } +</script> +</pre> + + <b>Important Note</b> + + <p> + This method was formerly a common object method, called <i>RGraph.getSegment(e)</i>, but has now (6th March 2011) been + moved to be part of the Rose chart object. + </p> + + <a name="stacked"></a> + <br /> <br /> + <h2>Stacked Rose charts</h2> + <p> + Rose charts can now be stacked, much like stacked Bar charts. For an example see the <a href="../examples/rose.html">Rose + chart example page</a>. The data should be supplied in the same format as a stacked Bar chart: + </p> + + <pre class="code"> +myRose = new RGraph.Rose('myCanvas', [[4,6,2],[8,4,7],[4,3,6],[1,5,6]]); +</pre> + + <a name="non-equi-angular"></a> + <br /> <br /> + <h2>Non-equi-angular Rose charts</h2> + <p> + Rose charts can be displayed in a <i>non-equi-angular</i> mode. For an example see the + <a href="../examples/rose.html">Rose chart example page</a>. Instead of a plain array of values (as with a regular + Rose chart), each data point should itself be a two element array consisting of the magnitude value and also a relative + circular size. This second value is not the actual degrees used - these are calculated. For example: + </p> + + <pre class="code"> +<script> + myRose = new RGraph.Rose('myCanvas', [[47,6],[48,2],[40,4],[43,5],[45,6]]); + myRose.Set('chart.variant', 'non-equi-angular'); + myRose.Draw(); +</script> +</pre> + + <a name="animations"></a> + <br /> <br /> + <h2>Rose chart specific animations</h2> + + There is a Rose chart Grow() animation, which can be used with regular and stacked Rose charts (not non-equi-angular charts). You + can see an example of it on the <a href="effects.html">effects page</a>. + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/docs/rscatter.html b/schall/static/RGraph/docs/rscatter.html new file mode 100644 index 0000000..cc33585 --- /dev/null +++ b/schall/static/RGraph/docs/rscatter.html @@ -0,0 +1,373 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - Radial scatter charts documentation</title> + + <meta name="keywords" content="rgraph html5 canvas javascript charts docs radial scatter chart" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Documentation about Radial scatter charts" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.jpg"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> + +</head> +<body> + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + <div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="index.html">Documentation</a> + > + Radial scatter charts + </div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - Radial scatter charts documentation</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + <p> + The Radial scatter chart is, as the name suggests, a circular variant of scatter charts. + </p> + + <p> + The example file is <a href="../examples/rscatter.html">here</a>. + </p> + + <pre class="code"> +<script> + window.onload = function () + { + var data = [ + [15,53,'red'], + [45,63,null, 'The tooltip'], + [48,45,'green'], + [52,38], + [51,61] + ]; + + var rscatter= new RGraph.Rscatter('myCanvas', data); + rscatter.Set('chart.labels', ['NE','E','SE','S','SW','W','NW','N']); + rscatter.Set('chart.gutter.left', 35); + rscatter.Set('chart.gutter.right', 35); + rscatter.Draw(); + } +</script> +</pre> + + <h2>Properties</h2> + + <p> + You can use these properties to control how the chart appears. You can set them by using the Set() method. Eg: + </p> + + <p> + <b>myRscatter.Set('name', 'value');</b> + </p> + + <ul> + <li><a href="#margins">Margins</a></li> + <li><a href="#labels and text">Labels and text</a></li> + <li><a href="#titles">Titles</a></li> + <li><a href="#key">Key</a></li> + <li><a href="#scale">Scale</a></li> + <li><a href="#interactive features">Interactive features</a></li> + <li><a href="#zoom">Zoom</a></li> + </ul> + +<a name="margins"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Margins</h3> + + <a name="chart.gutter.left"></a> + <b>chart.gutter.left</b><br /> + The left gutter of the chart, (the gutter is where the labels and title are)).<br /> + <i>Default: 25</i><br /><br /> + + <a name="chart.gutter.right"></a> + <b>chart.gutter.right</b><br /> + The right gutter of the chart, (the gutter is where the labels and title are).<br /> + <i>Default: 25</i><br /><br /> + + <a name="chart.gutter.top"></a> + <b>chart.gutter.top</b><br /> + The top gutter of the chart, (the gutter is where the labels and title are).<br /> + <i>Default: 25</i><br /><br /> + + <a name="chart.gutter.bottom"></a> + <b>chart.gutter.bottom</b><br /> + The bottom gutter of the chart, (the gutter is where the labels and title are).<br /> + <i>Default: 25</i><br /><br /> + +<a name="labels and text"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Labels and text</h3> <a name="chart.text.color"></a> +<b>chart.text.color</b><br /> + The color of the labels. <br /><i>Default: black</i><br /><br /> + <a name="chart.text.size"></a> +<b>chart.text.size</b><br /> + The size (in points) of the labels. <br /><i>Default: 10</i><br /><br /> + <a name="chart.text.font"></a> +<b>chart.text.font</b><br /> + The font used to render the text.<br /><i>Default: Verdana</i><br /><br /> + <a name="chart.labels"></a> +<b>chart.labels</b><br /> + The labels, if any, for the chart.<br /><i>Default: none</i><br /><br /> + <a name="chart.labels.axes"></a> +<b>chart.labels.axes</b><br /> + This controls the axes that show the scale labels. Each letter stands for the appropriate axis (North, South, East and West)<br /><i>Default: nsew</i><br /><br /> + <a name="chart.labels.position"></a> +<b>chart.labels.position</b><br /> + This can be either <i>center</i> or <i>edge</i> and determines the position of the labels.<br /><i>Default: center</i><br /><br /> +<a name="titles"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Titles</h3> + +<a name="chart.title"></a> +<b>chart.title</b><br /> + The title of the chart, if any. <br /><i>Default: null</i><br /><br /> + + + +<a name="chart.title.font"></a> +<b>chart.title.font</b><br /> +The font that the title is rendered in. If not specified the chart.text.font setting is used (usually Verdana)<br /> +<i>Default: null</i><br /><br /> + +<a name="chart.title.size"></a> +<b>chart.title.size</b><br /> +The size of the title. If not specified the size is usually 2pt bigger than the chart.text.size setting.<br /> +<i>Default: null</i><br /><br /> + +<a name="chart.title.bold"></a> +<b>chart.title.bold</b><br /> +Whather the title is bold or not.<br /> +<i>Default: true</i><br /><br /> + +<a name="chart.title.background"></a> +<b>chart.title.background</b><br /> +The background color (if any) for the title.<br /> +<i>Default: null</i><br /><br /> + + <a name="chart.title.color"></a> +<b>chart.title.color</b><br /> + The color of the title.<br /> <i>Default: black</i><br /><br /> + <a name="chart.title.hpos"></a> +<b>chart.title.hpos</b><br /> + This allows you to completely override the horizontal positioning of the title. It should be a number between 0 and 1, and is multiplied with the whole width of the canvas and then used as the horizontal position. <br /><i>Default: null</i><br /><br /> + <a name="chart.title.vpos"></a> +<b>chart.title.vpos</b><br /> + This allows you to completely override the vertical positioning of the title. It should be a number between 0 and 1, and is multiplied with the gutter and then used as the vertical position. It can be useful if you need to have a large gutter.<br /><i>Default: null</i><br /><br /> + + + + + + <a name="key"></a> + <h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Key</h3> + + <a name="chart.key"></a> + <b>chart.key</b><br /> + An array of key information. <br /> + <i>Default: [] (An empty array)</i><br /><br /> + + <a name="chart.key.background"></a> + <b>chart.key.background</b><br /> + The color of the key background. Typically white, you could set this to something like rgba(255,255,255,0.7) to allow people to see things behind it.<br> + <i>Default: white</i><br /><br /> + + <a name="chart.key.halign"></a> + <b>chart.key.halign</b><br /> + Instead of specifying the exact x/y coordinates, you can use this property to simply specify whether the key hould be + aligned <i>left</i> or <i>right</i>.<br /> + <i>Default: right</i><br /><br /> + + <a name="chart.key.position"></a> + <b>chart.key.position</b><br /> + Determines the position of the key.Either <b>graph</b> (default), or <b>gutter</b>.<br /> + <i>Default: graph</i><br /><br /> + + <b>chart.key.position.x</b><br /> + This allows you to specify a specific X coordinate for the key.<br /> + <i>Default: null</i><br /><br /> + + <b>chart.key.position.y</b><br /> + This allows you to specify a specific Y coordinate for the key.<br /> + <i>Default: null</i><br /><br /> + + <b>chart.key.position.gutter.boxed</b><br /> + If you have the key in gutter mode (ie horizontal), this allows you to give a background color.<br /> + <i>Default: true</i><br /><br /> + + <a name="chart.key.shadow"></a> + <b>chart.key.shadow</b><br /> + Whether a small drop shadow is applied to the key.<br /> + <i>Default: false</i><br /><br /> + + <a name="chart.key.shadow.color"></a> + <b>chart.key.shadow.color</b><br /> + The color of the shadow.<br /> + <i>Default: #666</i><br /><br /> + + <a name="chart.key.shadow.blur"></a> + <b>chart.key.shadow.blur</b><br /> + The extent of the blurring effect used on the shadow.<br /> + <i>Default: 3</i><br /><br /> + + <a name="chart.key.shadow.offsetx"></a> + <b>chart.key.shadow.offsetx</b><br /> + The X offset of the shadow.<br /> + <i>Default: 2</i><br /><br /> + + <a name="chart.key.shadow.offsety"></a> + <b>chart.key.shadow.offsety</b><br /> + The Y offset of the shadow.<br /> + <i>Default: 2</i><br /><br /> + + <b>chart.key.rounded</b><br /> + This controls whether the corners of the key (in graph mode) are curved. If the key is gutter mode, this has no effect.<br /> + <i>Default: false</i><br /><br /> + + <b>chart.key.color.shape</b><br /> + This can be <i>square</i>, <i>circle</i> or <i>line</i> and controls how the color indicators in the key appear.<br /> + <i>Default: square</i><br /><br /> + + <b>chart.key.linewidth</b><br /> + The line width of the surrounding border on the key.<br /> + <i>Default: 1</i><br /><br /> + + + +<a name="interactive features"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Interactive features</h3> <a name="chart.contextmenu"></a> +<b>chart.contextmenu</b><br /> + An array of context menu items. More information on context menus is <a href="context.html">here</a>.<br /><i>Default: [] (An empty array)</i><br /><br /> + <a name="chart.tooltips.effect"></a> +<b>chart.tooltips.effect</b><br /> + The animated effect used for showing tooltips. Can be either <i>fade</i> or <i>expand</i>.<br /><i>Default: fade</i><br /><br /> + <a name="chart.tooltips.event"></a> +<b>chart.tooltips.event</b><br /> + This is the event that triggers the tooltips. It can be either <i>onclick</i> or <i>onmousemove</i>.<br /><i>Default: onclick</i><br /><br /> + <a name="chart.tooltips.css.class"></a> +<b>chart.tooltips.css.class</b><br /> + This is the name of the CSS class the chart uses.<br /><i>Default: RGraph_tooltip</i><br /><br /> + <a name="chart.tooltips.override"></a> +<b>chart.tooltips.override</b><br /> + If you wish to handle showing tooltips yourself, this should be a function object which does just that. There's more information on the <a href="tooltips.html">tooltips documentation page</a><br /><i>Default: null</i><br /><br /> + <a name="chart.annotatable"></a> +<b>chart.annotatable</b><br /> + Whether annotations are enabled for the chart (ie you can draw on the chart interactively.<br /><i>Default: false</i><br /><br /> + <a name="chart.annotate.color"></a> +<b>chart.annotate.color</b><br /> + If you do not allow the use of the palette, then this will be the only colour allowed for annotations.<br /><i>Default: black</i><br /><br /> + + + <a name="chart.resizable"></a> + <b>chart.resizable</b><br /> + Defaulting to false, this determines whether your chart will be resizable. Because of the numerous event handlers this has to install code on, This feature is unlikely to work with other dynamic features (the context menu is fine however).<br /> + <i>Default: false</i><br /><br /> + + + <a name="chart.resize.handle.background"></a> + <b>chart.resize.handle.background</b><br /> + With this you can specify the background color for the resize handle. If you're adjusting the position of the + handle then you may need this to make the handle stand out more.<br /> + <i>Default: null</i><br /><br /> + +<a name="zoom"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Zoom</h3> <a name="chart.zoom.mode"></a> +<b>chart.zoom.mode</b><br /> + Can be used to control whether the zoom is in thumbnail or canvas mode. Possible values are: <i>thumbnail</i> and <i>canvas</i>.<br /><i>Default: canvas</i><br /><br /> + <a name="chart.zoom.factor"></a> +<b>chart.zoom.factor</b><br /> + This is the factor that the chart will be zoomed by (bigger values means more zoom)<br /><i>Default: 1.5</i><br /><br /> + <a name="chart.zoom.fade.in"></a> +<b>chart.zoom.fade.in</b><br /> + Whether the zoomed canvas fades in or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /><i>Default: true</i><br /><br /> + <a name="chart.zoom.fade.out"></a> +<b>chart.zoom.fade.out</b><br /> + Whether the zoomed canvas fades out or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /><i>Default: true</i><br /><br /> + <a name="chart.zoom.hdir"></a> +<b>chart.zoom.hdir</b><br /> + The horizontal direction of the zoom. Possible values are: <i>left</i>, <i>center</i>, <i>right</i><br /><i>Default: right</i><br /><br /> + <a name="chart.zoom.vdir"></a> +<b>chart.zoom.vdir</b><br /> + The vertical direction of the zoom. Possible values are: <i>up</i>, <i>center</i>, <i>down</i><br /><i>Default: down</i><br /><br /> + <a name="chart.zoom.delay"></a> +<b>chart.zoom.delay</b><br /> + The delay (in milliseconds) between frames.<br /><i>Default: 50</i><br /><br /> + <a name="chart.zoom.frames"></a> +<b>chart.zoom.frames</b><br /> + The number of frames in the zoom animation.<br /><i>Default: 10</i><br /><br /> + <a name="chart.zoom.shadow"></a> +<b>chart.zoom.shadow</b><br /> + Whether or not the zoomed canvas has a shadow or not.<br /><i>Default: true</i><br /><br /> + <a name="chart.zoom.thumbnail.width"></a> +<b>chart.zoom.thumbnail.width</b><br /> + When the zoom is in thumbnail mode, this is the width (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br /> + <a name="chart.zoom.thumbnail.height"></a> +<b>chart.zoom.thumbnail.height</b><br /> + When the zoom is in thumbnail mode, this is the height (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br /> + <a name="chart.zoom.background"></a> +<b>chart.zoom.background</b><br /> + Defaulting to true, this determines whether the zoom has a dark, semi-opaque background that covers the entire web page.<br /><i>Default: true</i><br /><br /> +</div><!-- /DOCS --><br /><br /> + +<br /><br /> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/docs/scatter.html b/schall/static/RGraph/docs/scatter.html new file mode 100644 index 0000000..6ae0c03 --- /dev/null +++ b/schall/static/RGraph/docs/scatter.html @@ -0,0 +1,987 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for personal, | + * | charity and educational purposes it is free to use. You can read the full | + * | license here: | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + + <title>RGraph: HTML5 Javascript charts library - scatter charts documentation</title> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="/favicon.png"> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library - Scatter charts documentation" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.jpg"/> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> + +</head> +<body> + <a name="top"></a> + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + <div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="index.html">Documentation</a> + > + Scatter charts + </div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - Scatter charts documentation</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + <p> + Scatter charts. Used to represent many data points over a period of time. For example, events occurring in a given year. + </p> + + <p> + The example file is <a href="../examples/scatter.html">here</a>. + </p> + + <ul> + <li><a href="#properties">Properties</a></li> + <li><a href="#methods">Methods</a></li> + <li><a href="#boxplots">Box plots</a></li> + <li><a href="#labelpoints">Specific points for labels on the X axis</a></li> + <li><a href="#custom.tickmarks">Custom tickmarks</a></li> + <li><a href="#colors">Note about colors and the key</a></li> + <li><a href="#oncrosshairs">Note about the on crosshairs event</a></li> + </ul> + + <pre class="code"> +<script> + window.onload = function () + { + var data = [ + [67,78,null, 'The winner!'], [67,40,'red'], [58,12], [78,56], [365,90], [360,300], [320,150], [15,45], + [16,43], [84,12], [67,89,'green'], [90,23,'green'], [23,80], [80,66], [55,66], [88,12], [43,45], [61,12], + [15,89], [13,16] + ]; + var sg = new RGraph.Scatter('myScatter', data); + sg.Set('chart.background.barcolor1','rgba(255,255,255,1)'); + sg.Set('chart.background.barcolor2', 'rgba(255,255,255,1)'); + sg.Set('chart.grid.color', 'rgba(238,238,238,1)'); + sg.Set('chart.gutter.left', 30); + sg.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']); + sg.Set('chart.xmax', 365); // Important! + sg.Draw(); + } +</script> +</pre> + + <p> + As you can see each mark on the Scatter chart is made by supplying an array of up to 4 elements: + </p> + + <ul> + <li>The X value (required)</li> + <li>The Y value (required)</li> + <li>The color (optional)</li> + <li>The tooltip for this mark (optional)</li> + </ul> + + <p> + If you wish to specify a tooltip, but not a color (ie use the default color instead), you can pass null instead of a color. + </p> + + + <a name="properties"></a> + <h2>Properties</h2> + + <p> + You can use these properties to control how the Scatter apears. You can set them by using the Set() method. Eg: + </p> + + <p> + <b>myScatter.Set('chart.xmax', 365);</b> + </p> + + <ul> + <li><a href="#background">Background</a></li> + <li><a href="#labels and text">Labels and text</a></li> + <li><a href="#margins">Margins</a></li> + <li><a href="#axis properties">Axis properties</a></li> + <li><a href="#titles">Titles</a></li> + <li><a href="#scale">Scale</a></li> + <li><a href="#interactive features">Interactive features</a></li> + <li><a href="#line properties">Line properties</a></li> + <li><a href="#key">Key</a></li> + <li><a href="#zoom">Zoom</a></li> + <li><a href="#miscellaneous">Miscellaneous</a></li> + </ul> + + +<a name="background"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Background</h3> <a name="chart.background.barcolor1"></a> +<b>chart.background.barcolor1</b><br /> + The color of the background bars. <br /><i>Default: rgba(0,0,0,0)</i><br /><br /> + <a name="chart.background.barcolor2"></a> +<b>chart.background.barcolor2</b><br /> + The color of the background bars. <br /><i>Default: rgba(0,0,0,0)</i><br /><br /> + <a name="chart.background.grid"></a> +<b>chart.background.grid</b><br /> + Whether to show the background grid or not. <br /><i>Default: true</i><br /><br /> + <a name="chart.background.grid.color"></a> +<b>chart.background.grid.color</b><br /> + The color of the background grid. <br /><i>Default: #eee</i><br /><br /> + + <a name="chart.background.hbars"></a> + <b>chart.background.hbars</b><br /> + An array of information stipulating horizontal coloured bars. You can use these to indicate limits. Eg: + + <pre class="code">myScatter.Set('chart.background.hbars', [[75, 10, 'yellow'], [85, 15, 'red']]);</pre> + + This would give you two bars, one red and a lower yellow bar. The units correspond to your scale, and are the + starting point and the height.<br /> + <i>Default: null</i><br /><br /> + + <b>chart.background.vbars</b><br /> + An array of vertical bar information. They're specified like his: + <pre class="code">myScatter.Set('chart.background.vbars', [[0, 181, 'rgba(0,255,0,0.5)']]);</pre> + <i>Default: null</i><br /><br /> + + <a name="chart.background.grid.border"></a> +<b>chart.background.grid.border</b><br /> + Determines whether a border line is drawn around the grid.<br /><i>Default: true</i><br /><br /> + <a name="chart.background.grid.hlines"></a> +<b>chart.background.grid.hlines</b><br /> + Determines whether to draw the horizontal grid lines.<br /><i>Default: true</i><br /><br /> + <a name="chart.background.grid.vlines"></a> +<b>chart.background.grid.vlines</b><br /> + Determines whether to draw the vertical grid lines.<br /><i>Default: true</i><br /><br /> + + <a name="chart.background.grid.autofit"></a> + <b>chart.background.grid.autofit</b><br /> + Instead of specifying a pixel width/height for the background grid, you can use autofit and specify how many horizontal and vertical lines you want.<br /> + <i>Default: true</i><br /><br /> + + <a name="chart.background.grid.autofit.numhlines"></a> +<b>chart.background.grid.autofit.numhlines</b><br /> + When using autofit this allows you to specify how many horizontal grid lines you want. <br /><i>Default: 5</i><br /><br /> + + <a name="chart.background.grid.autofit.numvlines"></a> + <b>chart.background.grid.autofit.numvlines</b><br /> + When using autofit this allows you to specify how many vertical grid lines you want. <br /> + <i>Default: 20</i><br /><br /> + + <a name="chart.background.grid.autofit.align"></a> + <b>chart.background.grid.autofit.align</b><br /> + If you want to have your grid lines line up with the labels (both X and Y axes), you can set this to true and RGraph will + attempt to make the grid lines line up. If you have a <i>chart.hmargin</i> set then the alignment will be thrown out.<br /> + <i>Default: false</i><br /><br /> + + <a name="chart.background.image"></a> + <b>chart.background.image</b><br /> + If you want to specify a background image to use on your chart, specify it with this property.<br /> + <i>Default: null</i><br /><br /> + +<a name="labels and text"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Labels and text</h3> + + <a name="chart.labels"></a> + <b>chart.labels</b><br /> + An array of the X labels for the chart. <br /> + <i>Default: [] (An empty array)</i><br /><br /> + + <a name="chart.labels.above"></a> + <b>chart.labels.above</b><br /> + If true this will show the values of the points above them.<br /> + <i>Default: false</i><br /><br /> + + <a name="chart.labels.above.size"></a> + <b>chart.labels.above.size</b><br /> + If you're showing the labels above the points, this controls their size.<br /> + <i>Default: 8</i><br /><br /> + + <a name="chart.labels.avove.decimals"></a> + <b>chart.labels.above.decimals</b><br /> + If your points have lots of decimals, you use this option to curtail them.<br /> + <i>Default: 0</i><br /><br /> + + <a name="chart.ylabels"></a> +<b>chart.ylabels</b><br /> + A boolean (<i>true</i> or <i>false</i>) that controls whether the chart has Y labels. <br /><i>Default: true</i><br /><br /> + + <a name="chart.ylabels.count"></a> + <b>chart.ylabels.count</b><br /> + A value (<i>1, 3, 5 or 10</i>) that controls how many Y labels there are. <br /> + <i>Default: 5</i><br /><br /> + + <a name="chart.ylabels.invert"></a> + <b>chart.ylabels.invert</b><br /> + Reverses the Y axis so that 0 is at the top, instead of the bottom.<br /> + <i>Default: false</i><br /><br /> + + <a name="chart.ylabels.specific"></a> + <b>chart.ylabels.specific</b><br /> + You can use this option to give your own Y labels (eg ['Low', 'Medium', 'High'].<br /> + <i>Default: null</i><br /><br /> + + <a name="chart.text.font"></a> +<b>chart.text.font</b><br /> + The font used to render the text.<br /><i>Default: Verdana</i><br /><br /> + + <a name="chart.text.color"></a> + <b>chart.text.color</b><br /> + The color of the labels. <br /> + <i>Default: black</i><br /><br /> + + <a name="chart.text.size"></a> + <b>chart.text.size</b><br /> + The size of the text (in points).<br /> + <i>Default: 10</i><br /><br /> + + <a name="chart.text.angle"></a> + <b>chart.text.angle</b><br /> + The angle of the horizontal text labels (at the bottom of the chart). This can be from 0-90 (degrees)<br /> + <i>Default: 0 (Horizontal)</i><br /><br /> + + <a name="chart.labels.specific.align"></a> + <b>chart.labels.specific.align</b><br /> + If you are using specific points for X labels, by default the labels are left aligned within its section. With this setting + you can center the labels within its section.<br /> + <i>Default: left</i><br /><br /> +<!-- + <a name="chart.text.halign"></a> + <b>chart.text.halign</b><br /> + This only affects X labels when you're using specific X points, and controls the alignment in the labels + individual "section".<br /> + <i>Default: left</i><br /><br /> +--> +<a name="margins"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Margins</h3> + + + + <a name="chart.gutter.left"></a> + <b>chart.gutter.left</b><br /> + The left gutter of the chart, (the gutter is where the labels and title are)).<br /> + <i>Default: 25</i><br /><br /> + + <a name="chart.gutter.right"></a> + <b>chart.gutter.right</b><br /> + The right gutter of the chart, (the gutter is where the labels and title are).<br /> + <i>Default: 25</i><br /><br /> + + <a name="chart.gutter.top"></a> + <b>chart.gutter.top</b><br /> + The top gutter of the chart, (the gutter is where the labels and title are).<br /> + <i>Default: 25</i><br /><br /> + + <a name="chart.gutter.bottom"></a> + <b>chart.gutter.bottom</b><br /> + The bottom gutter of the chart, (the gutter is where the labels and title are).<br /> + <i>Default: 25</i><br /><br /> + +<a name="axis properties"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Axis properties</h3> + + <a name="chart.xmin"></a> + <b>chart.xmin</b><br /> + The minimum X axis value you wish to set.<br /> + <i>Default: 0</i><br /><br /> + + <a name="chart.xmax"></a> + <b>chart.xmax</b><br /> + The maximum X axis value you wish to set. For example if you're displaying products sold in a year, you might use 365. <br /> + <i>Default: none - must be supplied</i><br /><br /> + + <a name="chart.ymax"></a> +<b>chart.ymax</b><br /> + The optional maximum Y scale value. If not specified then it will be calculated.<br /><i>Default: null (It's calculated)</i><br /><br /> + <a name="chart.ymin"></a> +<b>chart.ymin</b><br /> + The optional minimum Y scale value. If not specified it will be zero.<br /><i>Default: null</i><br /><br /> + <a name="chart.ticksize"></a> +<b>chart.ticksize</b><br /> + The size of the tickmarks. <br /><i>Default: 3</i><br /><br /> + <a name="chart.tickmarks"></a> +<b>chart.tickmarks</b><br /> + The style of the tickmarks. Can be: <i>cross</i>, <i>plus</i>, <i>circle</i>, <i>diamond</i>, <i>square</i> or <i>null</i> (no tickmarks). <br /><i>Default: cross</i><br /><br /> + <a name="chart.xticks"></a> +<b>chart.xticks</b><br /> + This controls whether the X axis tickmarks are drawn.<br /><i>Default: true</i><br /><br /> + + <a name="chart.noendxtick"></a> + <b>chart.noendxtick</b><br /> + Whether to draw an end X tick. Usually used when combining Scatter charts<br /> + <i>Default: false</i><br /><br /> + + <a name="chart.noendytick"></a> + <b>chart.noendytick</b><br /> + Whether to draw an end Y tick. Usually used when combining Scatter charts<br /> + <i>Default: true</i><br /><br /> + + <a name="chart.xaxispos"></a> +<b>chart.xaxis</b><br /> + This controls whether the X axis is drawn.<br /><i>Default: true</i><br /><br /> + <a name="chart.xaxispos"></a> +<b>chart.xaxispos</b><br /> + Where the X axis should be drawn. Can be either <i>center</i> or <i>bottom</i>.<br /><i>Default: bottom</i><br /><br /> + <a name="chart.yaxispos"></a> +<b>chart.yaxispos</b><br /> + Where the Y axis should be drawn. Can be either <i>left</i> or <i>right</i>.<br /><i>Default: left</i><br /><br /> + <a name="chart.axis.color"></a> +<b>chart.axis.color</b><br /> + The color of the axes.<br /><i>Default: black</i><br /><br /> + <a name="chart.noaxes"></a> +<b>chart.noaxes</b><br /> + If this is set to true, no axes will be drawn. <br /><i>Default: false</i><br /><br /> + + <a name="chart.xscale"></a> + <b>chart.xscale</b><br /> + If true then an X scale is drawn instead of X labels.<br /> + <i>Default: false</i><br /><br /> + + <a name="chart.xscale.units.pre"></a> + <b>chart.xscale.units.pre</b><br /> + These are units that are prepended to the number.<br /> + <i>Default: none</i><br /><br /> + + <a name="chart.xscale.units.post"></a> + <b>chart.xscale.units.post</b><br /> + These are units that are appended to the number.<br /> + <i>Default: none</i><br /><br /> + + <a name="chart.xscale.formatter"></a> + <b>chart.xscale.formatter</b><br /> + This can be a function, which is passed the object and the number and should return a formatted number (formatted as you wish).<br /> + <i>Default: null</i><br /><br /> + + <a name="chart.xscale.numlabels"></a> + <b>chart.xscale.numlabels</b><br /> + This is a number representing how many X labels there should be when you're using the X scale.<br /> + <i>Default: 10</i><br /><br /> + +<a name="titles"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Titles</h3> + +<a name="chart.title"></a> +<b>chart.title</b><br /> + The title of the scatter chart. <br /><i>Default: none</i><br /><br /> + + + +<a name="chart.title.font"></a> +<b>chart.title.font</b><br /> +The font that the title is rendered in. If not specified the chart.text.font setting is used (usually Verdana)<br /> +<i>Default: null</i><br /><br /> + +<a name="chart.title.size"></a> +<b>chart.title.size</b><br /> +The size of the title. If not specified the size is usually 2pt bigger than the chart.text.size setting.<br /> +<i>Default: null</i><br /><br /> + +<a name="chart.title.bold"></a> +<b>chart.title.bold</b><br /> +Whather the title is bold or not.<br /> +<i>Default: true</i><br /><br /> + +<a name="chart.title.background"></a> +<b>chart.title.background</b><br /> +The background color (if any) for the title.<br /> +<i>Default: null</i><br /><br /> + + <a name="chart.title.hpos"></a> +<b>chart.title.hpos</b><br /> + This allows you to completely override the horizontal positioning of the title. It should be a number between 0 and 1, and is multiplied with the whole width of the canvas and then used as the horizontal position. <br /><i>Default: null</i><br /><br /> + <a name="chart.title.vpos"></a> +<b>chart.title.vpos</b><br /> + This allows you to completely override the vertical positioning of the title. It should be a number between 0 and 1, and is multiplied with the gutter and then used as the vertical position. It can be useful if you need to have a large gutter.<br /><i>Default: null</i><br /><br /> + <a name="chart.title.color"></a> +<b>chart.title.color</b><br /> + The color of the title.<br /> <i>Default: black</i><br /><br /> + + <a name="chart.title.xaxis"></a> + <b>chart.title.xaxis</b><br /> + This allows to specify a title for the X axis.<br /> + <i>Default: none</i><br /><br /> + + <a name="chart.title.xaxis.size"></a> + <b>chart.title.xaxis.size</b><br /> + This allows you to specify a size for the X axis title.<br /> + <i>Default: null</i><br /><br /> + + <a name="chart.title.xaxis.font"></a> + <b>chart.title.xaxis.font</b><br /> + This allows to specify a font for the X axis title.<br /> + <i>Default: null</i><br /><br /> + + <a name="chart.title.xaxis.bold"></a> + <b>chart.title.xaxis.bold</b><br /> + This controls whether the X axis title is bold or not.<br /> + <i>Default: true</i><br /><br /> + + <a name="chart.title.yaxis"></a> + <b>chart.title.yaxis</b><br /> + This allows to specify a title for the Y axis.<br /> + <i>Default: none</i><br /><br /> + + <a name="chart.title.yaxis.size"></a> + <b>chart.title.yaxis.size</b><br /> + This allows you to specify a size for the Y axis title.<br /> + <i>Default: null</i><br /><br /> + + <a name="chart.title.yaxis.font"></a> + <b>chart.title.yaxis.font</b><br /> + This allows to specify a font for the Y axis title.<br /> + <i>Default: null</i><br /><br /> + + <a name="chart.title.yaxis.bold"></a> + <b>chart.title.yaxis.bold</b><br /> + This controls whether the Y axis title is bold or not.<br /> + <i>Default: true</i><br /><br /> + + <a name="chart.title.xaxis.pos"></a> +<b>chart.title.xaxis.pos</b><br /> + This is multiplied with the gutter to give the position of the X axis title.<br /><i>Default: 0.25</i><br /><br /> + <a name="chart.title.yaxis.pos"></a> +<b>chart.title.yaxis.pos</b><br /> + This is multiplied with the gutter to give the position of the Y axis title.<br /><i>Default: 0.25</i><br /><br /> + + <a name="chart.title.yaxis.position"></a> + <b>chart.title.yaxis.position</b><br /> + Instead of using the option above you can instead use this option, specifying <i>left</i> or <i>right</i>.<br /> + <i>Default: left</i><br /><br /> + +<a name="scale"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Scale</h3> + +<a name="chart.scale.formatter"></a> + <b>chart.scale.formatter</b><br /> + To allow thoroughly custom formats of numbers in the scale, you can use this option to + specify a function that is used by RGraph to format numbers. This function should + handle ALL of the formatting. Eg:<br /><br /> + <pre class="code"> +function myFormatter(obj, num) +{ + return num + 'F'; // An example of formatting +} +myGraph.Set('chart.scale.formatter', myFormatter); +</pre> + <br /><i>Default: null</i><br /><br /> + +<a name="chart.scale.decimals"></a> +<b>chart.scale.decimals</b><br /> + The number of decimal places to display for the Y scale.<br /><i>Default: 0</i><br /><br /> + <a name="chart.scale.point"></a> +<b>chart.scale.point</b><br /> + The character used as the decimal point.<br /><i>Default: .</i><br /><br /> + <a name="chart.scale.thousand"></a> +<b>chart.scale.thousand</b><br /> + The character used as the thousand separator<br /><i>Default: ,</i><br /><br /> + + <a name="chart.scale.round"></a> + <b>chart.scale.round</b><br /> + Whether to round the maximum scale value up or not. This will produce slightly better scales in some instances.<br /> + <i>Default: null</i><br /><br /> + + <a name="chart.units.pre"></a> +<b>chart.units.pre</b><br /> + The units (if any) that the Y axis is measured in (these are preppended to the number).<br /><i>Default: none</i><br /><br /> + <a name="chart.units.post"></a> +<b>chart.units.post</b><br /> + The units (if any) that the Y axis is measured in (these are appended to the number).<br /><i>Default: none</i><br /><br /> + +<a name="interactive features"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Interactive features</h3> + + <p style="background-color: #ffe; padding: 3px; border: 1px black solid; border-radius: 5px"> + <b>Note:</b> Unlike other charts, the Scatter chart tooltips are specified as part of the data array. See <a href="#top">above</a>. + </p> + + <a name="chart.tooltips.effect"></a> + <b>chart.tooltips.effect</b><br /> + The animated effect used for showing tooltips.<br /> + <i>Default: fade</i><br /><br /> + + <a name="chart.tooltips.hotspot"></a> + <b>chart.tooltips.hotspot</b><br /> + This controls the size of the hotspot on the chart for tooltips.<br /><i>Default: 3</i><br /><br /> + <a name="chart.tooltips.css.class"></a> + + <a name="chart.tooltips.highlight"></a> + <b>chart.tooltips.highlight</b><br /> + This controls whether points are highlighted when a tooltip is shown. If you're combining the Scatter with another chart + you may need to set this to <i>false</i>.<br /> + <i>Default: true</i><br /><br /> + + <a name="chart.tooltips.css.class"></a> + <b>chart.tooltips.css.class</b><br /> + This is the name of the CSS class the chart uses.<br /><i>Default: RGraph_tooltip</i><br /><br /> + + <a name="chart.tooltips.override"></a> + <b>chart.tooltips.override</b><br /> + If you wish to handle showing tooltips yourself, this should be a function object which does just that. There's more + information on the <a href="tooltips.html">tooltips documentation page</a><br /> + <i>Default: null</i><br /><br /> + + <a name="chart.crosshairs"></a> +<b>chart.crosshairs</b><br /> + If true, you will get a crosshair centering on the current mouse position.<br /><i>Default: false</i><br /><br /> + <a name="chart.crosshairs.linewidth"></a> +<b>chart.crosshairs.linewidth</b><br /> + This controls the linewidth of the crosshairs.<br /><i>Default: 1</i><br /><br /> + <a name="chart.crosshairs.color"></a> +<b>chart.crosshairs.color</b><br /> + The color of the crosshairs.<br /><i>Default: #333</i><br /><br /> + + <a name="chart.crosshairs.coords"></a> + <b>chart.crosshairs.coords</b><br /> + If true, this will show the coordinates that the crosshairs are currently over.<br /> + <i>Default: false</i><br /><br /> + + <a name="chart.crosshairs.coords.fixed"></a> + <b>chart.crosshairs.coords.fixed</b><br /> + If true, this makes the coordinates static (attached), instead of following the pointer around.<br /> + <i>Default: false</i><br /><br /> + + <a name="chart.crosshairs.fadeout"></a> +<b>chart.crosshairs.fadeout</b><br /> + If true, when you move your mouse off of the canvas the coordinates will fade out.<br /><i>Default: false</i><br /><br /> + <a name="chart.crosshairs.labels.x"></a> +<b>chart.crosshairs.labels.x</b><br /> + Instead ox X and Y, you can specify more meaningful labels.<br /><i>Default: X</i><br /><br /> + <a name="chart.crosshairs.labels.y"></a> +<b>chart.crosshairs.labels.y</b><br /> + Instead ox X and Y, you can specify more meaningful labels.<br /><i>Default: Y</i><br /><br /> + + <a name="chart.crosshairs.hlines"></a> + <b>chart.crosshairs.hlines</b><br /> + This determines whether the horizontal crosshair is shown.<br /> + <i>Default: true</i><br /><br /> + + <a name="chart.crosshairs.vlines"></a> + <b>chart.crosshairs.vlines</b><br /> + This determines whether the vertical crosshair is shown.<br /> + <i>Default: true</i><br /><br /> + + + <a name="chart.contextmenu"></a> +<b>chart.contextmenu</b><br /> + An array of context menu items. More information on context menus is <a href="context.html">here</a>.<br /><i>Default: null</i><br /><br /> + <a name="chart.annotatable"></a> +<b>chart.annotatable</b><br /> + Whether annotations are enabled for the chart (ie you can draw on the chart interactively.<br /><i>Default: false</i><br /><br /> + <a name="chart.annotate.color"></a> +<b>chart.annotate.color</b><br /> + If you do not allow the use of the palette, then this will be the only colour allowed for annotations.<br /><i>Default: #000</i><br /><br /> + + + <a name="chart.resizable"></a> + <b>chart.resizable</b><br /> + Defaulting to false, this determines whether your chart will be resizable. Because of the numerous event handlers this has to install code on, This feature is unlikely to work with other dynamic features (the context menu is fine however).<br /> + <i>Default: false</i><br /><br /> + + + <a name="chart.resize.handle.background"></a> + <b>chart.resize.handle.background</b><br /> + With this you can specify the background color for the resize handle. If you're adjusting the position of the + handle then you may need this to make the handle stand out more.<br /> + <i>Default: null</i><br /><br /> + +<a name="line properties"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Line properties</h3> + + <a name="chart.line"></a> + <b>chart.line</b><br /> + Whether to show a connecting line (like in the sixth example). <br /> + <i>Default: false</i><br /><br /> + + <a name="chart.line.colors"></a> + <b>chart.line.colors</b><br /> + The colors of the lines connecting the tick marks. <br /> + <i>Default: ['green', 'red']</i><br /><br /> + + <a name="chart.line.shadow.color"></a> + <b>chart.line.shadow.color</b><br /> + The color of the lines shadow (if any). <br /> + <i>Default: rgba(0,0,0,0) (invisible)</i><br /><br /> + + <a name="chart.line.shadow.offsetx"></a> + <b>chart.line.shadow.offsetx</b><br /> + The X offset of the lines shadow. <br /> + <i>Default: 3</i><br /><br /> + + <a name="chart.line.shadow.offsety"></a> + <b>chart.line.shadow.offsety</b><br /> + The Y offset of the lines shadow. <br /> + <i>Default: 3</i><br /><br /> + + <a name="chart.line.shadow.blur"></a> + <b>chart.line.shadow.blur</b><br /> + The severity of the line shadows blurring effect. <br /> + <i>Default: 2</i><br /><br /> + + <a name="chart.line.stepped"></a> + <b>chart.line.stepped</b><br /> + Like the line chart, Scatter chart lines can be stepped by setting this to true <br /> + <i>Default: false</i><br /><br /> + + <a name="chart.line.linewidth"></a> + <b>chart.line.linewidth</b><br /> + This can be either a number or an array of numbers (for multiple lines) and controls the + linewidth that is used for the lines.<br /> + <i>Default: 1</i><br /><br /> + + + + + <a name="key"></a> + <h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Key</h3> + + <a name="chart.key"></a> + <b>chart.key</b><br /> + An array of key information. <br /> + <i>Default: [] (An empty array)</i><br /><br /> + + <a name="chart.key.background"></a> + <b>chart.key.background</b><br /> + The color of the key background. Typically white, you could set this to something like rgba(255,255,255,0.7) to allow people to see things behind it.<br> + <i>Default: white</i><br /><br /> + + <a name="chart.key.halign"></a> + <b>chart.key.halign</b><br /> + Instead of specifying the exact x/y coordinates, you can use this property to simply specify whether the key hould be + aligned <i>left</i> or <i>right</i>.<br /> + <i>Default: right</i><br /><br /> + + <a name="chart.key.position"></a> + <b>chart.key.position</b><br /> + Determines the position of the key.Either <b>graph</b> (default), or <b>gutter</b>.<br /> + <i>Default: graph</i><br /><br /> + + <b>chart.key.position.x</b><br /> + This allows you to specify a specific X coordinate for the key.<br /> + <i>Default: null</i><br /><br /> + + <b>chart.key.position.y</b><br /> + This allows you to specify a specific Y coordinate for the key.<br /> + <i>Default: null</i><br /><br /> + + <b>chart.key.position.gutter.boxed</b><br /> + If you have the key in gutter mode (ie horizontal), this allows you to give a background color.<br /> + <i>Default: true</i><br /><br /> + + <a name="chart.key.shadow"></a> + <b>chart.key.shadow</b><br /> + Whether a small drop shadow is applied to the key.<br /> + <i>Default: false</i><br /><br /> + + <a name="chart.key.shadow.color"></a> + <b>chart.key.shadow.color</b><br /> + The color of the shadow.<br /> + <i>Default: #666</i><br /><br /> + + <a name="chart.key.shadow.blur"></a> + <b>chart.key.shadow.blur</b><br /> + The extent of the blurring effect used on the shadow.<br /> + <i>Default: 3</i><br /><br /> + + <a name="chart.key.shadow.offsetx"></a> + <b>chart.key.shadow.offsetx</b><br /> + The X offset of the shadow.<br /> + <i>Default: 2</i><br /><br /> + + <a name="chart.key.shadow.offsety"></a> + <b>chart.key.shadow.offsety</b><br /> + The Y offset of the shadow.<br /> + <i>Default: 2</i><br /><br /> + + <b>chart.key.rounded</b><br /> + This controls whether the corners of the key (in graph mode) are curved. If the key is gutter mode, this has no effect.<br /> + <i>Default: false</i><br /><br /> + + <b>chart.key.color.shape</b><br /> + This can be <i>square</i>, <i>circle</i> or <i>line</i> and controls how the color indicators in the key appear.<br /> + <i>Default: square</i><br /><br /> + + <b>chart.key.linewidth</b><br /> + The line width of the surrounding border on the key.<br /> + <i>Default: 1</i><br /><br /> + + + + + +<a name="zoom"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Zoom</h3> <a name="chart.zoom.mode"></a> +<b>chart.zoom.mode</b><br /> + Can be used to control whether the zoom is in thumbnail or canvas mode. Possible values are: <i>thumbnail</i> and <i>canvas</i>.<br /><i>Default: canvas</i><br /><br /> + <a name="chart.zoom.factor"></a> +<b>chart.zoom.factor</b><br /> + This is the factor that the chart will be zoomed by (bigger values means more zoom)<br /><i>Default: 1.5</i><br /><br /> + <a name="chart.zoom.fade.in"></a> +<b>chart.zoom.fade.in</b><br /> + Whether the zoomed canvas fades in or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /><i>Default: true</i><br /><br /> + <a name="chart.zoom.fade.out"></a> +<b>chart.zoom.fade.out</b><br /> + Whether the zoomed canvas fades out or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /><i>Default: true</i><br /><br /> + <a name="chart.zoom.hdir"></a> +<b>chart.zoom.hdir</b><br /> + The horizontal direction of the zoom. Possible values are: <i>left</i>, <i>center</i>, <i>right</i><br /><i>Default: right</i><br /><br /> + <a name="chart.zoom.vdir"></a> +<b>chart.zoom.vdir</b><br /> + The vertical direction of the zoom. Possible values are: <i>up</i>, <i>center</i>, <i>down</i><br /><i>Default: down</i><br /><br /> + <a name="chart.zoom.delay"></a> +<b>chart.zoom.delay</b><br /> + The delay (in milliseconds) between frames.<br /><i>Default: 50</i><br /><br /> + <a name="chart.zoom.frames"></a> +<b>chart.zoom.frames</b><br /> + The number of frames in the zoom animation.<br /><i>Default: 10</i><br /><br /> + <a name="chart.zoom.shadow"></a> +<b>chart.zoom.shadow</b><br /> + Whether or not the zoomed canvas has a shadow or not.<br /><i>Default: true</i><br /><br /> + <a name="chart.zoom.thumbnail.width"></a> +<b>chart.zoom.thumbnail.width</b><br /> + When the zoom is in thumbnail mode, this is the width (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br /> + <a name="chart.zoom.thumbnail.height"></a> +<b>chart.zoom.thumbnail.height</b><br /> + When the zoom is in thumbnail mode, this is the height (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br /> + <a name="chart.zoom.background"></a> +<b>chart.zoom.background</b><br /> + Defaulting to true, this determines whether the zoom has a dark, semi-opaque background that covers the entire web page.<br /><i>Default: true</i><br /><br /> + +<a name="miscellaneous"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Miscellaneous</h3> + + <a name="chart.defaultcolor"></a> + <b>chart.defaultcolor</b><br /> + This is the default color of tick marks, which is used if a color isn't given.<br /> + <i>Default: #000</i><br /><br /> + + <a name="chart.boxplot.width"></a> + <b>chart.boxplot.width</b><br /> + This stipulates the default width of boxes. For more on boxplots, see <a href="#boxplots">here</a>.<br /> + <i>Default: 8</i><br /><br /> + + <a name="chart.boxplot.capped"></a> + <b>chart.boxplot.capped</b><br /> + This stipulates whether the boxplot will have caps on the end of whickers. This could be useful if you're + creating a stock chart for example.</a>For more on boxplots, see <a href="#boxplots">here</a>.<br /> + <i>Default: true</i><br /><br /> + +</div><!-- /DOCS --><br /><br /> + + <a name="methods"></a> + <h2>Methods</h2> + + <b>obj.getPoint(e)</b> + + <p> + This method makes it easier to get hold of which point on the Scatter chart has been hovered over. It returns an array of: + </p> + + <ul> + <li>The X coordinate of the point</li> + <li>The Y coordinate of the point</li> + <li>The data set. This corresponds to the appropriate dataset (since mutiple datasets can be given to the constructor)</li> + <li>The index of the appropriate data point in the set</li> + <li>The tooltip (if any) for that particular point</li> + </ul> + + (If the return value is null, then no point is being hovered over.) An example usage is: + + <pre class="code"> +<script src="RGraph.common.core.js"></script> +<script src="RGraph.line.js"></script> + +<canvas id="cvs" width="600" height="250" style="border: 1px gray dashed">[No canvas support]</canvas> + +<script> + scatter = new RGraph.Scatter('cvs', [[5,1, 'red', 'A'],[4,2,, 'B'],[3,9,,'C'],[10,12,,'D'],[300,2,,'E']], + [[5,6, 'red', 'F'],[2,9,,'G'],[13,19,,'H'],[18,17,,'I'],[340,12,,'J']]); + scatter.Set('chart.xmax', 365); + scatter.Set('chart.line', true); + scatter.Set('chart.labels', ['Q1', 'Q2', 'Q3', 'Q4']); + scatter.Draw(); + + scatter.canvas.onmousemove = function (e) + { + var canvas = e.target; + var context = canvas.getContext('2d'); + var obj = canvas.__object__; + var point = obj.getPoint(e); + + if (point) { + p('\r\nX Coordinate: ' + point[0] + '\r\n' + + 'Y Coordinate: ' + point[1] + '\r\n' + + 'Dataset: ' + point[2] + '\r\n' + + 'Datapoint: ' + point[3] + '\r\n' + + 'Tooltip: ' + point[4] + '\r\n'); + } + } +</script> +</pre> + + <a name="boxplots"></a> + <h2>Box plots</h2> + + <p> + Instead of a single Y value, you have the ability to specify an array of 5, 6, 7 or 8 values, which will be used to make a box plot. + The <a href="../examples/scatter.html#boxplots">example page shows a box plot</a>. These values are (in order): + + <ul> + <li>Lower whisker</li> + <li>Bottom of box</li> + <li>Middle value (which isn't necessarily in the center of the box - this depends on your data)</li> + <li>Top of box</li> + <li>Upper whisker</li> + <li>Upper color (optional)</li> + <li>Lower color (optional)</li> + <li>Width (optional)</li> + </ul> + + <pre class="code"> +<script> + scatter8 = new RGraph.Scatter('scatter8', [ + [10,<span style="color: green">[1,1,16,24,24, 'red', 'green']</span>], + [105,<span style="color: green">[5,10,15,25,25, 'red', 'green']</span>], + [125,<span style="color: green">[10,15,25,35,45, 'red', 'green']</span>], + [325,<span style="color: green">[10,15,25,35,45, 'red', 'green', 30]</span>] + ]); + scatter8.Set('chart.title', 'An example of a boxplot'); + scatter8.Set('chart.labels', ['Q1', 'Q2', 'Q3', 'Q4']); + scatter8.Set('chart.xmax', 365); + scatter8.Set('chart.ymax', 50); + scatter8.Set('chart.boxplot.width', 12); // The default width + scatter8.Draw(); +</script> +</pre> + </p> + + <h4>Capped ends</h4> + <p> + For better compatibility with stock charts, you can now specify that the horizontal lines at the ends of the box plot + are not shown with <i>chart.boxplot.capped</i>. + </p> + + + <a name="labelpoints"></a> + <h2>Specific points for labels on the X axis</h2> + + <p> + Instead of a simple string which is used as the label, each entry of the chart.labels array can be a two element array + consisting of the label, and the X value that the label should be placed at. For example: + </p> + + <pre class="code"> +scatter.Set('chart.labels', [ + ['Quarter 1', 0], + ['Quarter 2', 90], + ['Quarter 3', 181], + ['Quarter 4', 273] + ]); +</pre> + + + + <a name="custom.tickmarks"></a> + <h2>Custom tickmarks</h2> + + <p> + If none of the available tickmark styles are suitable, you can instead specify a function object that draws the tickmark, + enabling you to draw the tickmark yourself. For example: + </p> + + <pre class="code"> +<script> + line.Set('chart.tickmarks', myTick); + + /** + * The function that is called once per tickmark, to draw it + * + * @param object obj The chart object + * @param object data The chart data + * @param number x The X coordinate + * @param number y The Y coordinate + * @param number xVal The X value + * @param number yVal The Y value + * @param number xMax The maximum X scale value + * @param number xMax The maximum Y scale value + * @param string color The color of the tickmark + */ + function myTick (obj, data, x, y, xVal, yVal, xMax, yMax, color) + { + // Draw your custom tick here + } +</script> +</pre> + + <a name="colors"></a> + <h2>Note about colors and the key</h2> + <p> + If you're using a key you may need to set <i>chart.line.colors</i> to allow it to use the correct colors. For example: + </p> + + <pre class="code">myObj.Set('chart.line.colors', ['red','green','blue']);</pre> + + <a name="oncrosshairs"></a> + <h2>Note about the oncrosshairs event</h2> + <p> + With the Scatter chart you can use the <i>oncrosshairs</i> custom event to pull out the crosshair coordinates, like this: + The coordinates are only available if you have them displayed. + </p> + + <pre class="code"> +function myFunc (obj) +{ + var xCoord = obj.canvas.__crosshairs_x__; + var yCoord = obj.canvas.__crosshairs_y__; +} +RGraph.AddCustomEventListener(myScatter, 'oncrosshairs', myFunc); +</pre> +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/docs/setconfig.html b/schall/static/RGraph/docs/setconfig.html new file mode 100644 index 0000000..14ebfb0 --- /dev/null +++ b/schall/static/RGraph/docs/setconfig.html @@ -0,0 +1,155 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - The RGraph.SetConfig() function</title> + + <meta name="keywords" content="rgraph html5 canvas chart docs setconfig" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - The RGraph.SetConfig() function" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.jpg"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js" ></script> + <script src="../libraries/RGraph.bar.js" ></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> + +</head> +<body> + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + <div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="index.html">Documentation</a> + > + The RGraph.SetConfig() function + </div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - The RGraph.SetConfig() function</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + + <div style="text-align: center; float: right; font-family: Verdana"> + <canvas id="cvs" width="600" height="250">[No canvas support]</canvas> + </div> + + <script> + window.onload = function () + { + var grad = document.getElementById("cvs").getContext('2d').createLinearGradient(0, 0, 0, 250); + grad.addColorStop(0, 'red'); + grad.addColorStop(1, 'white'); + + var config = { + 'chart.colors': [grad], + 'chart.labels': ['John','Fred','June','Charles','Lou', 'Olga'], + 'chart.title.yaxis': 'Amount', + 'chart.title.yaxis.pos': 0.2, + 'chart.title.xaxis': 'Person', + 'chart.gutter.left': 45, + 'chart.gutter.bottom': 35, + 'chart.gutter.right': 5, + 'chart.background.grid.autofit': true, + 'chart.strokestyle': 'rgba(0,0,0,0)', + 'chart.title': 'A chart showing RGraph.SetConfig()' + } + var bar = new RGraph.Bar('cvs', [48,56,52,49,43,51]); + RGraph.SetConfig(bar, config); + bar.Draw(); + } + </script> + + <p> + Instead of using a number of .Set() calls, you may find that using the <i>RGraph.SetConfig()</i> method more to your tastes. The + method is an alternative to setting the configuration of your chart. It doesn't offer any speed benefits, but it can facilitate reuse better, so that the + appearance of your websites charts is the same. There's an example of its use below: + </p> + + <br clear="all" /> + + <pre class="code"> +<script> + window.onload = function () + { + /** + * This configuration could be stored in a central configuration file, making its reuse easier. You could also have + * several different configurations that you pick and choose from depending on the requirements. Values in + * subsequent calls to .SetConfig() will overwrite previous ones. + */ + var config = { + 'chart.colors': ['red', 'green'], + 'chart.labels': ['John','Fred','June','Charles','Lou', 'Olga'], + 'chart.title.yaxis': 'Amount', + 'chart.title.yaxis.pos': -0.2, + 'chart.title.xaxis': 'Person', + 'chart.background.grid.autofit': true, + 'chart.title': 'A chart showing RGraph.SetConfig()' + } + var bar = new RGraph.Bar('cvs', [48,56,52,49,43,51]); + RGraph.SetConfig(bar, config); + bar.Draw(); + } +</script> +</pre> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/docs/thermometer.html b/schall/static/RGraph/docs/thermometer.html new file mode 100644 index 0000000..ab33aa2 --- /dev/null +++ b/schall/static/RGraph/docs/thermometer.html @@ -0,0 +1,345 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - thermometer documentation</title> + + <meta name="keywords" content="rgraph html5 canvas chart docs thermometer chart" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Documentation about the Thermometer charts" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> + +</head> +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + <div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="index.html">Documentation</a> + > + Thermometer charts + </div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - Thermometer charts documentation</h1> + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + <p> + Thermometer charts, along with progress bars, are a prime candidate for use in a status panel. Much like the progress bars, + but the design may be better suited to your application/website etc. + </p> + + <p> + The example file is <a href="../examples/thermometer.html">here</a>. + </p> + + <ul> + <li><a href="#available.properties">Properties</a></li> + </ul> + + <pre class="code"> +<script> + window.onload = function () + { + var thermometer = new RGraph.Thermometer('myCanvas', data); + thermometer.Set('chart.gutter.left', 45); + thermometer.Set('chart.gutter.right', 45); + thermometer.Set('chart.colors', ['rgba(255,0,0,1)']); + thermometer.Draw(); + } +</script> +</pre> + + <a name="available.properties"></a> + <h2>Properties</h2> + + <p> + You can use these properties to control how the chart apears. You can set them by using the Set() method. Eg: + </p> + + <p> + <b>myBar.Set('name', 'value');</b> + </p> + + <ul> + <li><a href="#margins">Margins</a></li> + <li><a href="#colors">Colors</a></li> + <li><a href="#titles">Titles</a></li> + <li><a href="#labels">Labels and text</a></li> + <li><a href="#shadow">Shadow</a></li> + <li><a href="#scale">Scale</a></li> + <li><a href="#interactive">Interactive features</a></li> + <li><a href="#zoom">Zoom</a></li> + </ul> + + +<a name="margins"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Margins</h3> + + <a name="chart.gutter.left"></a> + <b>chart.gutter.left</b><br /> + The left gutter of the chart, (the gutter is where the labels and title are)).<br /> + <i>Default: 15</i><br /><br /> + + <a name="chart.gutter.right"></a> + <b>chart.gutter.right</b><br /> + The right gutter of the chart, (the gutter is where the labels and title are).<br /> + <i>Default: 15</i><br /><br /> + + <a name="chart.gutter.top"></a> + <b>chart.gutter.top</b><br /> + The top gutter of the chart, (the gutter is where the labels and title are).<br /> + <i>Default: 15</i><br /><br /> + + <a name="chart.gutter.bottom"></a> + <b>chart.gutter.bottom</b><br /> + The bottom gutter of the chart, (the gutter is where the labels and title are).<br /> + <i>Default: 15</i><br /><br /> + +<a name="colors"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Colors</h3> + + <a name="chart.colors"></a> + <b>chart.colors</b><br /> + An array of the colors of the actual bars. <br /> + <i>Default: An array - ['rgb(0,0,255)', '#0f0', '#00f', '#ff0', '#0ff', '#0f0']</i><br /><br /> + + + +<a name="titles"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Titles</h3> + + <a name="chart.title.side"></a> + <b>chart.title.side</b><br /> + This is the text that is used as the side title on the left hand side of the thermometer.<br /> + <i>Default: '' (An empty string)</i><br /><br /> + + + +<a name="chart.title.side.font"></a> +<b>chart.title.font</b><br /> +The font that the title is rendered in. If not specified the chart.text.font setting is used (usually Verdana)<br /> +<i>Default: null</i><br /><br /> + +<a name="chart.title.side.size"></a> +<b>chart.title.size</b><br /> +The size of the title. If not specified the size is usually 2pt bigger than the chart.text.size setting.<br /> +<i>Default: null</i><br /><br /> + +<a name="chart.title.side.bold"></a> +<b>chart.title.bold</b><br /> +Whather the title is bold or not.<br /> +<i>Default: true</i><br /><br /> + + <a name="chart.title.hpos"></a> + <b>chart.title.hpos</b><br /> + This allows you to completely override the horizontal positioning of the title. It should be a number between 0 and 1, and is multiplied with the whole width of the canvas and then used as the horizontal position.<br /> + <i>Default: 0.5</i><br /><br /> + +<a name="labels"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Labels and text</h3> + + <a name="chart.value.label"></a> + <b>chart.value.label</b><br /> + This controls whether the Thermometers value is shown in text.<br /> + <i>Default: true</i><br /><br /> + + <a name="chart.ylabels.count"></a> + <b>chart.ylabels.count</b><br /> + A value that controls how many Y labels there are. Keep in mind that if you use this it may result in decimals, + and to see the full number you may need to use <i>chart.scale.decimals</i>.<br /> + <i>Default: 10</i><br /><br /> + +<a name="shadow"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Shadow</h3> + + <a name="chart.shadow"></a> + <b>chart.shadow</b><br /> + Whether a drop shadow is applied. <br /><i>Default: true</i><br /><br /> + + <a name="chart.shadow.color"></a> + <b>chart.shadow.color</b><br /> + The color of the shadow. <br /><i>Default: gray</i><br /><br /> + + <a name="chart.shadow.offsetx"></a> + <b>chart.shadow.offsetx</b><br /> + The X offset of the shadow. <br /><i>Default: 0</i><br /><br /> + + <a name="chart.shadow.offsety"></a> + <b>chart.shadow.offsety</b><br /> + The Y offset of the shadow. <br /><i>Default: 0</i><br /><br /> + + <a name="chart.shadow.blur"></a> + <b>chart.shadow.blur</b><br /> + The severity of the shadow blurring effect. <br /><i>Default: 15</i><br /><br /> + +<a name="scale"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Scale</h3> + + <a name="chart.scale.visible"></a> + <b>chart.scale.visible</b><br /> + Defaulting to false, this controls whether the scale is visible.<br /> + <i>Default: false</i><br /><br /> + + <a name="chart.scale.decimals"></a> + <b>chart.scale.decimals</b><br /> + This allows you to control the amount of decimals that the labels have.<br /> + <i>Default: 0</i><br /><br /> + +<a name="interactive"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Interactive features</h3> + + <a name="chart.adjustable"></a> + <b>chart.adjustable</b><br /> + Defaulting to false, this determines whether your bar chart will be adjustable.<br /> + <i>Default: false</i><br /><br /> + + <a name="chart.contextmenu"></a> + <b>chart.contextmenu</b><br /> + An array of context menu items. More information on context menus is <a href="context.html">here</a>.<br /> + <i>Default: [] (An empty array)</i><br /><br /> + + <a name="chart.resizable"></a> + <b>chart.resizable</b><br /> + Defaulting to false, this determines whether your chart will be resizable. Because of the numerous event + handlers this has to install code on, This feature is unlikely to work with other dynamic features (the + context menu is fine however).<br /> + <i>Default: false</i><br /><br /> + + <a name="chart.annotatable"></a> + <b>chart.annotatable</b><br /> + Whether annotations are enabled for the chart (ie you can draw on the chart interactively.<br /> + <i>Default: false</i><br /><br /> + + <a name="chart.annotate.color"></a> + <b>chart.annotate.color</b><br /> + If you do not allow the use of the palette, then this will be the only colour allowed for annotations.<br /> + <i>Default: black</i><br /><br /> + +<a name="zoom"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Zoom</h3> + + <a name="chart.zoom.mode"></a> + <b>chart.zoom.mode</b><br /> + Can be used to control whether the zoom is in thumbnail or canvas mode. Possible values are: <i>thumbnail</i> and <i>canvas</i>.<br /> + <i>Default: canvas</i><br /><br /> + + <a name="chart.zoom.factor"></a> + <b>chart.zoom.factor</b><br /> + This is the factor that the chart will be zoomed by (bigger values means more zoom)<br /> + <i>Default: 1.5</i><br /><br /> + + <a name="chart.zoom.fade.in"></a> + <b>chart.zoom.fade.in</b><br /> + Whether the zoomed canvas fades in or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /> + <i>Default: true</i><br /><br /> + + <a name="chart.zoom.fade.out"></a> + <b>chart.zoom.fade.out</b><br /> + Whether the zoomed canvas fades out or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /> + <i>Default: true</i><br /><br /> + + <a name="chart.zoom.hdir"></a> + <b>chart.zoom.hdir</b><br /> + The horizontal direction of the zoom. Possible values are: <i>left</i>, <i>center</i>, <i>right</i><br /> + <i>Default: right</i><br /><br /> + + <a name="chart.zoom.vdir"></a> + <b>chart.zoom.vdir</b><br /> + The vertical direction of the zoom. Possible values are: <i>up</i>, <i>center</i>, <i>down</i><br /> + <i>Default: down</i><br /><br /> + + <a name="chart.zoom.delay"></a> + <b>chart.zoom.delay</b><br /> + The delay (in milliseconds) between frames.<br /> + <i>Default: 50</i><br /><br /> + + <a name="chart.zoom.frames"></a> + <b>chart.zoom.frames</b><br /> + The number of frames in the zoom animation.<br /> + <i>Default: 10</i><br /><br /> + + <a name="chart.zoom.shadow"></a> + <b>chart.zoom.shadow</b><br /> + Whether or not the zoomed canvas has a shadow or not.<br /> + <i>Default: true</i><br /><br /> + + <a name="chart.zoom.thumbnail.width"></a> + <b>chart.zoom.thumbnail.width</b><br /> + When the zoom is in thumbnail mode, this is the width (in pixels) of the thumbnail.<br /> + <i>Default: 75</i><br /><br /> + + <a name="chart.zoom.thumbnail.height"></a> + <b>chart.zoom.thumbnail.height</b><br /> + When the zoom is in thumbnail mode, this is the height (in pixels) of the thumbnail.<br /> + <i>Default: 75</i><br /><br /> + + <a name="chart.zoom.background"></a> + <b>chart.zoom.background</b><br /> + Defaulting to true, this determines whether the zoom has a dark, semi-opaque background that covers the entire web page.<br /> + <i>Default: true</i><br /><br /> + +</div> + + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/docs/tooltips.html b/schall/static/RGraph/docs/tooltips.html new file mode 100644 index 0000000..198499d --- /dev/null +++ b/schall/static/RGraph/docs/tooltips.html @@ -0,0 +1,532 @@ +<!DOCTYPE html > +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - Tooltips</title> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../favicon.png"> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A chart library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.jpg"/> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js"></script> + <script src="../libraries/RGraph.common.tooltips.js"></script> + <script src="../libraries/RGraph.line.js"></script> + <script src="../libraries/RGraph.bar.js"></script> + <script src="../libraries/RGraph.pie.js"></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + + <style> + .bar_chart_tooltips_css { + background-color: white ! important; + border: 2px solid black ! important; + padding: 3px; + padding-top: 5px ! important; + font-size: 14pt ! important; + text-align: center; + -webkit-box-shadow: 0 0 15px gray ! important; + -moz-box-shadow: 0 0 15px gray ! important; + box-shadow: 0 0 15px gray ! important; + } + </style> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> + +</head> +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + <div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="index.html">Documentation</a> + > + Tooltips + </div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - Tooltips</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + <div style="float: right; text-align: right"> + <canvas width="600" height="250" id="cvs">[No canvas support]</canvas><br /> + Tooltip effect: + <select id="effect" onchange="RGraph.Clear(line.canvas); line.Set('chart.tooltips.effect', this.options[this.selectedIndex].value); line.Draw();"> + <option>none</option> + <option selected>fade</option> + <option>expand</option> + <option>contract</option> + <option>snap</option> + </select> + </div> + + <script> + /** + * This is the function which handles the display of all the tooltips (for the line chart) - it is passed the + * zero-indexed number of the tooltip. Here, that index is just used to get the text from an array, but you + * could do anything with it. You could even perform an AJAX request to get the tooltip. Note that at this + * point, ie when the text is being retrieved, the tooltip DIV doesn't exist yet. + */ + function myTooltipFunc (idx) + { + var tooltips = ['<b>Winner!</b><br />John','Fred','Jane','Lou','Pete','Kev']; + return tooltips[idx]; + } + + + window.onload = function () + { + // Has to be a global variable + line = new RGraph.Line('cvs', [64,34,26,35,51,24]); + + /** + * These lines show you some of the alternative methods of specifying tooltips: + * + * o An array of strings - one per tooltip + * o An array of functions - one per tooltip + * o A single function that handles all of the tooltips + * o An "id:xxx" string (xxx being the ID tag of a div whose contents are used as the tooltip) + * + * Functions are passed a single argument - the zero-indexed number of the tooltip + */ + //line.Set('chart.tooltips', ['John', 'Fred', 'Jane', 'Lou', 'Pete', 'Kev']); + line.Set('chart.tooltips', [myTooltipFunc, myTooltipFunc, myTooltipFunc, myTooltipFunc, myTooltipFunc, myTooltipFunc]); + //line.Set('chart.tooltips', myTooltipFunc); + line.Set('chart.tooltips.effect', 'fade'); + line.Set('chart.hmargin', 10); + line.Set('chart.linewidth', 2); + line.Set('chart.shadow', true); + line.Set('chart.shadow.offsetx', 0); + line.Set('chart.shadow.offsety', 0); + line.Set('chart.shadow.blur', 15); + line.Set('chart.colors', ['green']); + line.Set('chart.tickmarks', 'circle'); + line.Set('chart.labels', ['John', 'Fred', 'Jane', 'Lou', 'Pete', 'Kev']); + line.Draw(); + + + /* -------------------------------------------------------------------------------------------------------- */ + + + /** + * Create and display the bar chart + */ + bar = new RGraph.Bar('cvs2', [41.2,51.3,64.2,42.1,32.2,43.2,45.8,45.1,61.1]); + + var grad = bar.context.createLinearGradient(0,25,0,225); + grad.addColorStop(0, 'blue'); + grad.addColorStop(1, 'white'); + + bar.Set('chart.hmargin', 15); + bar.Set('chart.colors', [grad]); + bar.Set('chart.linewidth', 2); + bar.Set('chart.tickmarks', 'endsquare'); + bar.Set('chart.labels', ['John', 'Pete', 'Glynn', 'Kev', 'Youssef', 'Lou', 'Kiff', 'Liz', 'Fred']); + bar.Set('chart.background.grid.autofit', true); + bar.Set('chart.strokecolor', 'rgba(0,0,0,0)'); + bar.Set('chart.tooltips', getTooltip); // The getTooltip() function (defined below) provides the tooltip text ONLY + bar.Set('chart.tooltips.css.class', 'bar_chart_tooltips_css'); + bar.Set('chart.tooltips.effect', 'fade'); + bar.Draw(); + + /** + * This installs the RGraph ontooltip event handler. The CreateTooltipGraph() function is defined below + */ + RGraph.AddCustomEventListener(bar, 'ontooltip', CreateTooltipGraph); + } + + + /* + * Used by the bar chart to get the tooltip text. + * + * @param idx int The zero indexed number of the tooltip + */ + function getTooltip(idx) + { + return '<b>' + bar.Get('chart.labels')[idx] + 's stats</b><br /><canvas id="__tooltip_canvas__" width="400" height="150" style="background-color: white; margin: 5px">[No canvas support</canvas>'; + } + + + /** + * This is the function that is called (by the ontooltip event) to create the tooltip charts + * + * @param obj object The chart object + */ + function CreateTooltipGraph(obj) + { + // These are the statistics that are shown in the tooltips. This data could quite easily + // come from your server. + var stats = [ + [5,8,7,6,9,5,4,6,3,5,4,4], + [4,6,7,8,6,5,4,4,2,5,8,4], + [3,2,1,3,4,5,1,5,6,7,4,1], + [3,5,1,2,4,8,9,6,7,4,5,1], + [9,6,7,8,7,9,4,5,6,3,5,8], + [4,8,5,6,4,3,5,4,6,5,7,8], + [4,3,4,9,8,7,8,6,4,3,5,1], + [1,2,3,1,2,4,5,1,6,5,3,1], + [2,3,5,4,3,5,1,3,5,2,6,4] + ]; + + var idx = RGraph.Registry.Get('chart.tooltip').__index__; + var data = stats[idx]; + + // This data could be dynamic + var g = new RGraph.Line('__tooltip_canvas__', data); + g.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']); + g.Set('chart.gutter.top', 5); + g.Set('chart.hmargin', 5); + g.Set('chart.tickmarks', 'endcircle'); + g.Set('chart.background.grid.autofit', true); + g.Draw(); + } + + + </script> + + <ul> + <li><a href="#introduction">Introduction</a></li> + <li><a href="#hold">What can they hold?</a></li> + <li><a href="#how">How can I specify them?</a></li> + <li><a href="#what">What can I specify?</a></li> + <li><a href="#charts">Can I show charts in tooltips?</a></li> + <li><a href="#customise">Can I customise the appearance of tooltips?</a></li> + <li><a href="#effects">What tooltip effects are available?</a></li> + <li><a href="#firefox">Tooltips, the clipboard and Firefox</a></li> + <li><a href="#override">Can I override the tooltip function?</a></li> + </ul> + + <a name="introduction"></a> + <h4>Introduction</h4> + + <p> + Tooltips are a very effective and straight forward way to extend your charts and add more information to them, without overloading + the user. + </p> + + <a name="hold"></a> + <h4>What can they hold?</h4> + + <p> + At the base level, tooltips are DIVs, so they can hold a multitude of HTML - images, videos etc. See <a href="#charts">below</a> + for information on showing charts in tooltips. + </p> + + <a name="how"></a> + <h4>How can I specify them?</h4> + + <p> + You can specify them by including the tooltips code and then using the <i>chart.tooltips</i> property. For example: + </p> + + <ol> + <li> + Include the RGraph libraries. + <pre class="code"> +<script src="RGraph.common.core.js"></script> +<script src="RGraph.common.tooltips.js"></script> +<script src="RGraph.line.js"></script> +</pre> + </li> + + <li> + Define your chart and set the tooltips property. + <pre class="code"> +<script> + window.onload = function () + { + var line = new RGraph.Line('cvs', [64,34,26,35,51,24]); + <span style="color: green">line.Set('chart.tooltips', ['<b>Winner!</b><br />John', 'Fred', 'Jane', 'Lou', 'Pete', 'Kev']);</span> + line.Set('chart.tooltips.effect', 'expand'); + line.Set('chart.hmargin', 10); + line.Set('chart.linewidth', 2); + line.Set('chart.shadow', true); + line.Set('chart.shadow.offsetx', 0); + line.Set('chart.shadow.offsety', 0); + line.Set('chart.shadow.color', 'green'); + line.Set('chart.shadow.blur', 25); + line.Set('chart.colors', ['green']); + line.Set('chart.tickmarks', 'circle'); + line.Set('chart.labels', ['John', 'Fred', 'Jane', 'Lou', 'Pete', 'Kev']); + line.Draw(); + } +</script> +</pre> + </li> + </ol> + + <a name="what"></a> + <h4>What can I specify?</h4> + + <p> + The tooltips that you specify are usually strings (which can contain HTML). They can however also be functions which are called when they're about + to be displayed. The function should return the text that is used as the tooltip. You have the option to either specify + one function per data point, or just one function for all of the tooltips. You can mix functions and strings if you wish. + These functions are passed the numerical, zero-indexed tooltip index and the return value is used as the tooltip + text. So to summarise: + </p> + + <ul> + <li> + An array of strings. The string is used as the tooltip. Eg: + <pre class="code">myGraph.Set('chart.tooltips', ['John', 'Fred', 'Lou']);</pre> + </li> + + <li> + An array of function objects. Each function is called and should return the text to be used. Eg: + <pre class="code">myGraph.Set('chart.tooltips', [getJohnTooltip, getFredTooltip, getLouTooltip]);</pre> + </li> + + <li> + A single function object. This is probably the most useful. This function is called whenever a tooltip + is about to be displayed, and passed the numerical, zero-indexed tooltip index of the point on the chart. + The function should return the text to be used as the tooltip. Note that the function you specify is called + <i>before</i> + the tooltip DIV has been created, so you cannot access it. If you wish to customise the appearance + of the tooltip, you can use either the tooltip <a href="css.html">CSS class</a> or a call to <i>setTimeout()</i>. Eg: + <pre class="code">myGraph.Set('chart.tooltips', getTooltip);</pre> + </li> + + <li> + An array of DIV ids. This will make working with large tooltips easier. You basically specify the id of a DIV whose + .innerHTML is then used as the tooltip. Only the contents of the DIV are used, not the DIV itself, so you can hide + the DIV by setting its <i>display</i> CSS value to <i>none</i>. For example: + + <pre class="code">myBar.Set('chart.tooltips', ['id:myDiv', ...])</pre> + </li> + </ul> + + <a name="charts"></a> + <h4>Can I show charts in tooltips?</h4> + + <canvas style="float: right" id="cvs2" width="600" height="250">[No canvas support]</canvas> + + <p> + You can, and with the custom event support that RGraph has, it's reasonably easy. Simply attach your function that + creates the chart to the <i>ontooltip</i> event. This allows the tooltip HTML to be created and added to the page + so that the code that creates the chart can run. The sequence is: + </p> + + <ol> + <li style="margin-top: 0">Specify the HTML for the tooltip as normal (including the <canvas> tag).</li> + <li style="margin-top: 0">Use the <i>ontooltip</i> RGraph event so that a function is called when a tooltip is shown.</li> + <li style="margin-top: 0">This function should subsequently create the chart.</li> + </ol> + + <p> + The tooltip DIV is to be found in the RGraph registry - <i>RGraph.Registry.Get('chart.tooltip')</i>. And if you want it the + numerical zero indexed count of the tooltip is to be found in the <i>__index__</i> property: + <i>RGraph.Registry.Get('chart.tooltip').__index__</i> + </p> + + <pre class="code"> +<script src="RGraph.common.core.js" ></script> +<script src="RGraph.common.tooltips.js" ></script> +<script src="RGraph.bar.js" ></script> +<script src="RGraph.line.js" ></script> + +<style> + .RGraph_tooltip { + background-color: white ! important; + } +</style> + +<canvas id="cvs" width="600" height="250">[No canvas support]</canvas> + +<script> + window.onload = function () + { + labels = ['Gary','Pete','Lou','Ned','Kev','Fred']; + + bar = new RGraph.Bar("cvs", [4.5,28,13,26,35,36]); + bar.Set('chart.tooltips', function (idx) {return labels[idx] + 's stats<br/><canvas id="__tooltip_canvas__" width="400" height="150">[No canvas support]</canvas>';}); + bar.Set('chart.hmargin', 10); + bar.Set('chart.tickmarks', 'endcircle'); + bar.Set('chart.colors', ['blue']); + bar.Set('chart.ymax', 100); + bar.Set('chart.labels', labels); + bar.Draw(); + + <span style="color: green">RGraph.AddCustomEventListener(line, 'ontooltip', CreateTooltipGraph);</span> + } + + + <span style="color: green"> + /** + * This is the function that is called by the ontooltip event to create the tooltip charts + * + * @param obj object The chart object + */ + function CreateTooltipGraph(obj) + { + // This data could be dynamic + var line = new RGraph.Line('__tooltip_canvas__', [5,8,7,6,9,5,4,6,3,5,4,4]); + line.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']); + line.Set('chart.hmargin', 5); + line.Set('chart.tickmarks', 'endcircle'); + line.Set('chart.background.grid.autofit', true); + line.Draw(); + } + </span> +</script> +</pre> + + <p> + If you want to see more source code, simply view the source of this page and look at the code that creates the bar chart. + There's also a basic stripped-down example <a href="basic_tooltips.html">here</a>. + </p> + + <br clear="all" /> + + <a name="customise"></a> + <h4>Can I customise the appearance of tooltips?</h4> + + <p> + Yes. You can either use the default CSS class <i>RGraph_tooltip</i>, or you can specify a specific CSS class that a + charts tooltips should use with the property <i>chart.tooltips.css.class</i>. The two charts on this page have + different looking tooltips by using this method - the line chart uses the default look, whilst the bar chart + overrides the CSS class name and sets it to <i>bar_chart_tooltips_css</i>. For example: + </p> + + <pre class="code">bar.Set('chart.tooltips.css.class', 'bar_chart_tooltips_css');</pre> + + <pre class="code"> +<style> + .bar_chart_tooltips_css { + background-color: white ! important; + border: 2px solid black ! important; + padding: 3px; + } +</style> +</pre> + + <p> + You can read more about RGraph CSS classes <a href="css.html">here</a>. + </p> + + <a name="effects"></a> + <h4>What tooltip effects are available?</h4> + + <p> + These effects are available to you: + </p> + + <ul> + <li>fade</li> + <li>expand</li> + <li>contract</li> + <li>snap</li> + <li>none</li> + </ul> + + <p> + All of them are as their names imply. <i>fade</i> is a straight forward fade in effect, <i>expand</i> is another effect + which expands outward from the center of the tooltip, <i>contract</i> is like the <i>expand</i> effect but in reverse, <i>snap</i> is an effect which can be used in a limited set of circumstances + and "snaps" to the current mouse position and <i>none</i> is simply no effect at all. The default effect used + by all chart types is <i>fade</i>. Note: If you're showing canvases in your tooltips then the <i>expand</i>, <i>contract</i> and <i>snap</i> + effects will not work - you must use <i>fade</i> or <i>none</i>. + </p> + + <p> + <b>Note:</b> The snap effect is only available to chart types where the tooltip is triggered using the onmousemove event. + Currently this means the <i>Line chart</i>, <i>Rscatter chart</i>, <i>Scatter chart</i> and Radar chart. It can also + be negatively effected when using multiple charts on one page. + </p> + + + <a name="firefox"></a> + <h4>Tooltips, the clipboard and Firefox</h4> + + <p> + If you're using Firefox, there's a note about tooltips and the clipboard (ie copying text) on the <a href="issues.html">issues page</a>. + </p> + + <a name="override"></a> + <h4>Can I override the tooltip function?</h4> + + <p> + You can by stipulating <i>chart.tooltips.override</i>. This should be a function object that handles everything with regard + to showing the tooltip. Highlighting the chart is still done for you - the override function is only concerned with showing + the tooltip. The override function is passed these arguments: + </p> + + <ul> + <li>canvas - The HTML canvas element, the same as what you get from document.getElementById()</li> + <li>text - The tooltip text (id:xxx strings are NOT expanded)</li> + <li>x - The X coordinate in relation to the entire page</li> + <li>y - The Y coordinate in relation to the entire page</li> + <li>index - The numerical index of the tooltip in the original tooltip array</li> + </ul> + + <p> + <b>Note:</b> Although "id:xxx" strings are not expanded for you, you can easily do this yourself by using the + <i>RGraph.getTooltipText('id:xxx')</i> function. + </p> + + <pre class="code"> +<script> + function tooltip_override (canvas, text, x, y, idx) + { + alert('In tooltip override function...'); + } + myObj.Set('chart.tooltips.override', tooltip_override); +</script> +</pre> + +<div id="foo">Foo</div> +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/docs/vprogress.html b/schall/static/RGraph/docs/vprogress.html new file mode 100644 index 0000000..fe4cf86 --- /dev/null +++ b/schall/static/RGraph/docs/vprogress.html @@ -0,0 +1,442 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for personal, | + * | charity and educational purposes it is free to use. You can read the full | + * | license here: | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - Vertical progress bar documentation</title> + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="/favicon.png"> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.jpg"/> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> + +</head> +<body> + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + <div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="index.html">Documentation</a> + > + Vertical Progress bar + </div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - Vertical Progress bar documentation</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + <p> + The example file is <a href="../examples/vprogress.html">here</a>. + </p> + + <pre class="code"> +<script> + window.onload = function () + { + var myProgress = new RGraph.VProgress('myProgress', 78, 100); + myProgress.Set('chart.colors', ['red']); + myProgress.Draw(); + } +</script> +</pre> + + <h2>Properties</h2> + + <p> + You can use these properties to control how the progress bar apears. You can set them by using the Set() method. Eg: + </p> + + <p> + <b>myProgress.Set('name', 'value');</b> + </p> + + <ul> + <li><a href="#chart configuration">Chart configuration</a></li> + <li><a href="#margins">Margins</a></li> + <li><a href="#colors">Colors</a></li> + <li><a href="#shadow">Shadow</a></li> + <li><a href="#labels and text">Labels and text</a></li> + <li><a href="#scale">Scale</a></li> + <li><a href="#titles">Titles</a></li> + <li><a href="#interactive features">Interactive features</a></li> + <li><a href="#zoom">Zoom</a></li> + <li><a href="#key">Key</a></li> + <li><a href="#misc">Miscellaneous</a></li> + </ul> + + +<a name="chart configuration"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Chart configuration</h3> + + <a name="chart.labels.count"></a> + <b>chart.labels.count</b><br /> + This controls how many labels there are. + <br /><i>Default: 10</i><br /><br /> + + <a name="chart.tickmarks"></a> + <b>chart.tickmarks</b><br /> + Whether the tickmarks are drawn. <br /> + <i>Default: true</i><br /><br /> + + <a name="chart.tickmarks.color"></a> + <b>chart.tickmarks.color</b><br /> + The color used for tickmarks.<br /> + <i>Default: black</i><br /><br /> + + <a name="chart.tickmarks.inner"></a> + <b>chart.tickmarks.inner</b><br /> + This controls whether the bar has inner tickmarks<br /> + <i>Default: false</i><br /><br /> + + <a name="chart.tickmarks.zerostart"></a> + <b>chart.tickmarks.zerostart</b><br /> + If true, labels and tickmarks will start at and show zero.<br /> + <i>Default: false</i><br /><br /> + + <a name="chart.min"></a> + <b>chart.min</b><br /> + The minimum value. Setting a minimum value allows to show a more detailed progress bar.<BR /> + <i>Default: 0</i><br /><br /> + + <a name="chart.numticks"></a> +<b>chart.numticks</b><br /> + How many tick marks there are. <br /><i>Default: 10</i><br /><br /> + <a name="chart.numticks.inner"></a> +<b>chart.numticks.inner</b><br /> + How many inner tick marks there are. <br /><i>Default: 50</i><br /><br /> + <a name="chart.arrows"></a> +<b>chart.arrows</b><br /> + This stipulates that two indicator arrows are drawn. It works best if you have tickmarks off, and no title.<br><i>Default: false</i><br /><br /> + +<a name="margins"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Margins</h3> + + + + <a name="chart.gutter.left"></a> + <b>chart.gutter.left</b><br /> + The left gutter of the chart, (the gutter is where the labels and title are)).<br /> + <i>Default: 25</i><br /><br /> + + <a name="chart.gutter.right"></a> + <b>chart.gutter.right</b><br /> + The right gutter of the chart, (the gutter is where the labels and title are).<br /> + <i>Default: 25</i><br /><br /> + + <a name="chart.gutter.top"></a> + <b>chart.gutter.top</b><br /> + The top gutter of the chart, (the gutter is where the labels and title are).<br /> + <i>Default: 25</i><br /><br /> + + <a name="chart.gutter.bottom"></a> + <b>chart.gutter.bottom</b><br /> + The bottom gutter of the chart, (the gutter is where the labels and title are).<br /> + <i>Default: 25</i><br /><br /> + + +<a name="colors"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Colors</h3> <a name="chart.color"></a> +<b>chart.color</b><br /> + The color of the bar. This can be a solid color, or a gradient that you create. <br /><i>Default: #0c0</i><br /><br /> + <a name="chart.background.color"></a> +<b>chart.background.color</b><br /> + The background color. <br /><i>Default: #eee</i><br /><br /> +<a name="shadow"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Shadow</h3> <a name="chart.shadow"></a> +<b>chart.shadow</b><br /> + Whether the progress bar has a shadow. This uses the canvas shadow API and therefore is only supported on Chrome 2, Safari 3.1 and Firefox 3.1 (and above).<br /><i>Default: false</i><br /><br /> + <a name="chart.shadow.offsetx"></a> +<b>chart.shadow.offsetx</b><br /> + The X offset of the progress bar shadow.<br /><i>Default: 3</i><br /><br /> + <a name="chart.shadow.offsety"></a> +<b>chart.shadow.offsety</b><br /> + The Y offset of the progress bar shadow.<br /><i>Default: 3</i><br /><br /> + <a name="chart.shadow.color"></a> +<b>chart.shadow.color</b><br /> + The color of the shadow.<br /><i>Default: rgba(0,0,0,0.5)</i><br /><br /> + <a name="chart.shadow.blur"></a> +<b>chart.shadow.blur</b><br /> + The blurring effect that is applied to the shadow.<br /><i>Default: 3</i><br /><br /> +<a name="labels and text"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Labels and text</h3> <a name="chart.text.font"></a> +<b>chart.text.font</b><br /> + The font used to render the text.<br /><i>Default: Verdana</i><br /><br /> + <a name="chart.text.color"></a> +<b>chart.text.color</b><br /> + The color of the labels. <br /><i>Default: black</i><br /><br /> + <a name="chart.text.size"></a> +<b>chart.text.size</b><br /> + The size of the text (in points). <br /><i>Default: 10</i><br /><br /> + + <a name="chart.labels"></a> + <b>chart.labels</b><br /> + Labels that are applied to the chart. <br /><i>Default: An empty array</i><br /><br /> + + <a name="chart.labels.position"></a> + <b>chart.labels.position</b><br /> + Can be <i>left</i> or <i>right</i> and controls which side the labels are positioned on.<br /> + <i>Default: right</i><br /><br /> + + +<a name="scale"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Scale</h3> <a name="chart.units.pre"></a> + <b>chart.units.pre</b><br /> + The units that the Y scale is measured in (these are preppend to the number). <br /><i>Default: none</i><br /><br /> + + <a name="chart.units.post"></a> + <b>chart.units.post</b><br /> + The units that the Y scale is measured in (these are appended to the number). <br /><i>Default: none</i><br /><br /> + + <a name="chart.scale.decimals"></a> + <b>chart.scale.decimals</b><br /> + This stipulates how many decimal places there are. + <br /><i>Default: 0</i><br /><br /> + + +<a name="titles"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Titles</h3> + +<a name="chart.title"></a> +<b>chart.title</b><br /> + The title of the progress bar. <br /><i>Default: An empty string</i><br /><br /> + <a name="chart.title.hpos"></a> + + + +<a name="chart.title.font"></a> +<b>chart.title.font</b><br /> +The font that the title is rendered in. If not specified the chart.text.font setting is used (usually Verdana)<br /> +<i>Default: null</i><br /><br /> + +<a name="chart.title.size"></a> +<b>chart.title.size</b><br /> +The size of the title. If not specified the size is usually 2pt bigger than the chart.text.size setting.<br /> +<i>Default: null</i><br /><br /> + +<a name="chart.title.bold"></a> +<b>chart.title.bold</b><br /> +Whather the title is bold or not.<br /> +<i>Default: true</i><br /><br /> + +<b>chart.title.hpos</b><br /> + This allows you to completely override the horizontal positioning of the title. It should be a number between 0 and 1, and is multiplied with the whole width of the canvas and then used as the horizontal position. <br /><i>Default: null</i><br /><br /> + <a name="chart.title.vpos"></a> +<b>chart.title.vpos</b><br /> + This allows you to completely override the vertical positioning of the title. It should be a number between 0 and 1, and is multiplied with the gutter and then used as the vertical position. It can be useful if you need to have a large gutter.<br /><i>Default: null</i><br /><br /> + <a name="chart.title.color"></a> +<b>chart.title.color</b><br /> + The color of the title.<br /> <i>Default: black</i><br /><br /> +<a name="interactive features"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Interactive features</h3> <a name="chart.tooltips"></a> +<b>chart.tooltips</b><br /> + An array, albeit one element only. This is shown when the progress bar is clicked on. Tooltips can contain HTML.<br /><i>Default: An empty array</i><br /><br /> + <a name="chart.tooltips.effect"></a> +<b>chart.tooltips.effect</b><br /> + The animated effect used for showing the tooltip. Can be either <i>fade</i> or <i>expand</i>.<br /><i>Default: fade</i><br /><br /> + <a name="chart.tooltips.css.class"></a> +<b>chart.tooltips.css.class</b><br /> + This is the name of the CSS class the chart uses.<br /><i>Default: RGraph_tooltip</i><br /><br /> + + <a name="chart.tooltips.override"></a> + <b>chart.tooltips.override</b><br /> + If you wish to handle showing tooltips yourself, this should be a function object which does just that. There's more information on the <a href="tooltips.html">tooltips documentation page</a><br /> + <i>Default: null</i><br /><br /> + <a name="chart.contextmenu"></a> +<b>chart.contextmenu</b><br /> + An array of context menu items. More information on context menus is <a href="context.html">here</a>.<br /><i>Default: [] (An empty array)</i><br /><br /> + <a name="chart.annotatable"></a> +<b>chart.annotatable</b><br /> + Whether annotations are enabled for the chart (ie you can draw on the chart interactively.<br /><i>Default: false</i><br /><br /> + <a name="chart.annotate.color"></a> +<b>chart.annotate.color</b><br /> + If you do not allow the use of the palette, then this will be the only colour allowed for annotations.<br /><i>Default: black</i><br /><br /> + + + <a name="chart.resizable"></a> + <b>chart.resizable</b><br /> + Defaulting to false, this determines whether your chart will be resizable. Because of the numerous event handlers this has to install code on, This feature is unlikely to work with other dynamic features (the context menu is fine however).<br /> + <i>Default: false</i><br /><br /> + + + <a name="chart.resize.handle.background"></a> + <b>chart.resize.handle.background</b><br /> + With this you can specify the background color for the resize handle. If you're adjusting the position of the + handle then you may need this to make the handle stand out more.<br /> + <i>Default: null</i><br /><br /> + + <a name="chart.adjustable"></a> +<b>chart.adjustable</b><br /> + Defaulting to false, this determines whether your progress bar will be adjustable (click the bar and drag it). <br /><i>Default: false</i><br /><br /> +<a name="zoom"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Zoom</h3> <a name="chart.zoom.factor"></a> +<b>chart.zoom.factor</b><br /> + This is the factor that the chart will be zoomed by (bigger values means more zoom)<br /><i>Default: 1.5</i><br /><br /> + <a name="chart.zoom.fade.in"></a> +<b>chart.zoom.fade.in</b><br /> + Whether the zoomed canvas fades in or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /><i>Default: true</i><br /><br /> + <a name="chart.zoom.fade.out"></a> +<b>chart.zoom.fade.out</b><br /> + Whether the zoomed canvas fades out or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /><i>Default: true</i><br /><br /> + <a name="chart.zoom.hdir"></a> +<b>chart.zoom.hdir</b><br /> + The horizontal direction of the zoom. Possible values are: <i>left</i>, <i>center</i>, <i>right</i><br /><i>Default: right</i><br /><br /> + <a name="chart.zoom.vdir"></a> +<b>chart.zoom.vdir</b><br /> + The vertical direction of the zoom. Possible values are: <i>up</i>, <i>center</i>, <i>down</i><br /><i>Default: down</i><br /><br /> + <a name="chart.zoom.delay"></a> +<b>chart.zoom.delay</b><br /> + The delay (in milliseconds) between frames.<br /><i>Default: 50</i><br /><br /> + <a name="chart.zoom.frames"></a> +<b>chart.zoom.frames</b><br /> + The number of frames in the zoom animation.<br /><i>Default: 10</i><br /><br /> + <a name="chart.zoom.shadow"></a> +<b>chart.zoom.shadow</b><br /> + Whether or not the zoomed canvas has a shadow or not.<br /><i>Default: true</i><br /><br /> + <a name="chart.zoom.background"></a> +<b>chart.zoom.background</b><br /> + Defaulting to true, this determines whether the zoom has a dark, semi-opaque background that covers the entire web page.<br /><i>Default: true</i><br /><br /> + + + <a name="key"></a> + <h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Key</h3> + + <a name="chart.key"></a> + <b>chart.key</b><br /> + An array of key information. <br /> + <i>Default: [] (An empty array)</i><br /><br /> + + <a name="chart.key.background"></a> + <b>chart.key.background</b><br /> + The color of the key background. Typically white, you could set this to something like rgba(255,255,255,0.7) to allow people to see things behind it.<br> + <i>Default: white</i><br /><br /> + + <a name="chart.key.halign"></a> + <b>chart.key.halign</b><br /> + Instead of specifying the exact x/y coordinates, you can use this property to simply specify whether the key hould be + aligned <i>left</i> or <i>right</i>.<br /> + <i>Default: right</i><br /><br /> + + <a name="chart.key.position"></a> + <b>chart.key.position</b><br /> + Determines the position of the key.Either <b>graph</b> (default), or <b>gutter</b>.<br /> + <i>Default: graph</i><br /><br /> + + <b>chart.key.position.x</b><br /> + This allows you to specify a specific X coordinate for the key.<br /> + <i>Default: null</i><br /><br /> + + <b>chart.key.position.y</b><br /> + This allows you to specify a specific Y coordinate for the key.<br /> + <i>Default: null</i><br /><br /> + + <b>chart.key.position.gutter.boxed</b><br /> + If you have the key in gutter mode (ie horizontal), this allows you to give a background color.<br /> + <i>Default: true</i><br /><br /> + + <a name="chart.key.shadow"></a> + <b>chart.key.shadow</b><br /> + Whether a small drop shadow is applied to the key.<br /> + <i>Default: false</i><br /><br /> + + <a name="chart.key.shadow.color"></a> + <b>chart.key.shadow.color</b><br /> + The color of the shadow.<br /> + <i>Default: #666</i><br /><br /> + + <a name="chart.key.shadow.blur"></a> + <b>chart.key.shadow.blur</b><br /> + The extent of the blurring effect used on the shadow.<br /> + <i>Default: 3</i><br /><br /> + + <a name="chart.key.shadow.offsetx"></a> + <b>chart.key.shadow.offsetx</b><br /> + The X offset of the shadow.<br /> + <i>Default: 2</i><br /><br /> + + <a name="chart.key.shadow.offsety"></a> + <b>chart.key.shadow.offsety</b><br /> + The Y offset of the shadow.<br /> + <i>Default: 2</i><br /><br /> + + <b>chart.key.rounded</b><br /> + This controls whether the corners of the key (in graph mode) are curved. If the key is gutter mode, this has no effect.<br /> + <i>Default: true</i><br /><br /> + + <b>chart.key.color.shape</b><br /> + This can be <i>square</i>, <i>circle</i> or <i>line</i> and controls how the color indicators in the key appear.<br /> + <i>Default: square</i><br /><br /> + + <b>chart.key.linewidth</b><br /> + The line width of the surrounding border on the key.<br /> + <i>Default: 1</i><br /><br /> + + <a name="misc"></a> + <h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Miscellaneous</h3> + <a name="chart.highlight.stroke"></a> + <b>chart.highlight.stroke</b><br /> + If you use tooltips, this controls the colour of the highlight stroke. + <br /><i>Default: black</i><br /><br /> + + <a name="chart.highlight.fill"></a> + <b>chart.highlight.fill</b><br /> + If you use tooltips, this controls the colour of the highlight fill. + <br /><i>Default: rgba(255,255,255,0.5)</i><br /><br /> +</div> +<br /><br /> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/docs/waterfall.html b/schall/static/RGraph/docs/waterfall.html new file mode 100644 index 0000000..c406ace --- /dev/null +++ b/schall/static/RGraph/docs/waterfall.html @@ -0,0 +1,574 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - waterfall charts documentation</title> + + <meta name="keywords" content="rgraph html5 canvas chart docs waterfall charts" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Documentation about the Waterfall charts" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> + +</head> +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + <div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="index.html">Documentation</a> + > + Waterfall charts + </div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - Waterfall charts documentation</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + <p></p> + + <p> + The example file is <a href="../examples/waterfall.html">here</a>. + </p> + + <ul> + <li><a href="#available.properties">Properties</a></li> + <li><a href="#available.methods">Methods</a></li> + </ul> + + <pre class="code"> +<script> + window.onload = function () + { + var data = [90, -16, -18, -34]; + + var waterfall = new RGraph.Waterfall('cvs', data); + waterfall.Draw(); + } +</script> +</pre> + + <a name="available.properties"></a> + <h2>Properties</h2> + + <p> + You can use these properties to control how the Waterfall chart apears. You can set them by using the Set() method. Eg: + </p> + + <p> + <b>myBar.Set('name', 'value');</b> + </p> + + <ul> + <li><a href="#background">Background</a></li> + <li><a href="#axis">Axis properties</a></li> + <li><a href="#colors">Colors</a></li> + <li><a href="#margins">Margins</a></li> + <li><a href="#labels and text">Labels and text</a></li> + <li><a href="#titles">Titles</a></li> + <li><a href="#shadow">Shadow</a></li> + <li><a href="#scale">Scale</a></li> + <li><a href="#interactive features">Interactive features</a></li> + <li><a href="#zoom">Zoom</a></li> + <li><a href="#miscellaneous">Miscellaneous</a></li> + </ul> + + + +<a name="background"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Background</h3> <a name="chart.background.barcolor1"></a> + + <b>chart.background.barcolor1</b><br /> + The color of the background bars, (1 of 2). <br /><i>Default: white</i><br /><br /> + <a name="chart.background.barcolor2"></a> + + <b>chart.background.barcolor2</b><br /> + The color of the background bars, (2 of 2). <br /><i>Default: white</i><br /><br /> + <a name="chart.background.grid"></a> + + <b>chart.background.grid</b><br /> + Whether to show the background grid or not. <br /><i>Default: true</i><br /><br /> + <a name="chart.background.grid.color"></a> + + <b>chart.background.grid.color</b><br /> + The color of the background grid. <br /><i>Default: #ddd</i><br /><br /> + <a name="chart.background.grid.hsize"></a> + + <b>chart.background.grid.hsize</b><br /> + The horizontal background grid size. <br /><i>Default: 40</i><br /><br /> + <a name="chart.background.grid.vsize"></a> + + <b>chart.background.grid.vsize</b><br /> + The vertical background grid size. <br /><i>Default: 18</i><br /><br /> + <a name="chart.background.grid.width"></a> + + <b>chart.background.grid.width</b><br /> + The width that the background grid lines are. Decimals (eg 0.5) are permitted.<br /><i>Default: 1</i><br /><br /> + <a name="chart.background.grid.border"></a> + + <b>chart.background.grid.border</b><br /> + Determines whether a border line is drawn around the grid.<br /><i>Default: true</i><br /><br /> + <a name="chart.background.grid.hlines"></a> + + <b>chart.background.grid.hlines</b><br /> + Determines whether to draw the horizontal grid lines.<br /><i>Default: true</i><br /><br /> + <a name="chart.background.grid.vlines"></a> + + <b>chart.background.grid.vlines</b><br /> + Determines whether to draw the vertical grid lines.<br /><i>Default: true</i><br /><br /> + <a name="chart.background.grid.autofit"></a> + + <b>chart.background.grid.autofit</b><br /> + Instead of specifying a pixel width/height for the background grid, you can use autofit and specify how many horizontal and vertical lines you want.<br /><i>Default: false</i><br /><br /> + <a name="chart.background.grid.autofit.numhlines"></a> + + <b>chart.background.grid.autofit.numhlines</b><br /> + When using autofit this allows you to specify how many horizontal grid lines you want. <br /><i>Default: 7</i><br /><br /> + <a name="chart.background.grid.autofit.numvlines"></a> + + <b>chart.background.grid.autofit.numvlines</b><br /> + When using autofit this allows you to specify how many vertical grid lines you want. <br /><i>Default: 20</i><br /><br /> + + <a name="chart.background.grid.autofit.align"></a> + <b>chart.background.grid.autofit.align</b><br /> + If you want to have your grid lines line up with the labels (both X and Y axis), you can set this to true and RGraph will + attempt to make the grid lines line up. If you have a <i>chart.hmargin</i> set then the alignment will be thrown out.<br /> + <i>Default: false</i><br /><br /> + + <a name="chart.background.hbars"></a> +<b>chart.background.hbars</b><br /> + An array of information stipulating horizontal coloured bars. You can use these to indicate limits. Eg: <i>myBar.Set('hbars', [[75, 10, 'yellow'], [85, 15, 'red']]);</i> This would give you two bars, one red and a lower yellow bar. The units correspond to your scale, and are the starting point and the height.<br /><i>Default: null</i><br /><br /> + + <a name="chart.background.image"></a> + <b>chart.background.image</b><br /> + If you want to specify a background image to use on your chart, specify it with this property.<br /> + <i>Default: null</i><br /><br /> + +<a name="axis"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Axis properties</h3> + + <a name="chart.noaxes"></a> + <b>chart.noaxes</b><br /> + Whether the axes are drawn<br /> + <i>Default: false (the axes ARE drawn)</i><br /><br /> + + <a name="chart.noxaxis"></a> + <b>chart.noxaxis</b><br /> + Whether the X axis is drawn<br /> + <i>Default: false (the X axis IS drawn)</i><br /><br /> + + <a name="chart.noyaxis"></a> + <b>chart.noyaxis</b><br /> + Whether the Y axis is drawn<br /> + <i>Default: false (the Y axis IS drawn)</i><br /><br /> + + <a name="chart.xaxispos"></a> + <b>chart.xaxispos</b><br /> + This determines where the X axis is positioned. If you wish to show negative values then you should set this + to <i>center</i>.<br /> + <i>Default: bottom</i><br /><br /> + +<a name="colors"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Colors</h3> + +<a name="chart.strokestyle"></a> +<b>chart.strokestyle</b><br /> + The color of the outline of the bars. <br /><i>Default: #666</i><br /><br /> + + <a name="chart.colors"></a> + <b>chart.colors</b><br /> + An array of the colors of the actual bars. <br /> + <i>Default: An array - ['green', 'red', 'blue']</i><br /><br /> + +<a name="margins"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Margins</h3> <a name="chart.hmargin"></a> +<b>chart.hmargin</b><br /> + The horizontal margin (in pixels) of the chart. <br /><i>Default: 5</i><br /><br /> + + + <a name="chart.gutter.left"></a> + <b>chart.gutter.left</b><br /> + The left gutter of the chart, (the gutter is where the labels and title are)).<br /> + <i>Default: 25</i><br /><br /> + + <a name="chart.gutter.right"></a> + <b>chart.gutter.right</b><br /> + The right gutter of the chart, (the gutter is where the labels and title are).<br /> + <i>Default: 25</i><br /><br /> + + <a name="chart.gutter.top"></a> + <b>chart.gutter.top</b><br /> + The top gutter of the chart, (the gutter is where the labels and title are).<br /> + <i>Default: 25</i><br /><br /> + + <a name="chart.gutter.bottom"></a> + <b>chart.gutter.bottom</b><br /> + The bottom gutter of the chart, (the gutter is where the labels and title are).<br /> + <i>Default: 25</i><br /><br /> + +<a name="labels and text"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Labels and text</h3> <a name="chart.text.color"></a> +<b>chart.text.color</b><br /> + The color of the labels. <br /><i>Default: black</i><br /><br /> + <a name="chart.text.size"></a> +<b>chart.text.size</b><br /> + The size (in points) of the labels. <br /><i>Default: 10</i><br /><br /> + <a name="chart.text.angle"></a> +<b>chart.text.angle</b><br /> + The angle of the horizontal text labels (at the bottom of the chart). This can be one of three values - 0, 45 or 90.<br /><i>Default: 0 (Horizontal)</i><br /><br /> + <a name="chart.text.font"></a> +<b>chart.text.font</b><br /> + The font used to render the text.<br /><i>Default: Verdana</i><br /><br /> + <a name="chart.labels"></a> +<b>chart.labels</b><br /> + An array of the labels to be used on the chart. <br /><i>Default: An empty array</i><br /><br /> + +<b>chart.ylabels</b><br /> + Can be <i>true</i> or <i>false</i> and determines whether the chart has Y axis labels.<br /><i>Default: true</i><br /><br /> + + + <a name="chart.numyticks"></a> +<b>chart.numyticks</b><br /> + The number of Y tickmarks. If you have changed the number of Y labels, you may also want to change this to match. <br /><i>Default: 10</i><br /><br /> + + +<a name="titles"></a> + +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Titles</h3> + +<a name="chart.title"></a> +<b>chart.title</b><br /> +The title of the chart, if any. <br /> +<i>Default: null</i><br /><br /> + + + +<a name="chart.title.font"></a> +<b>chart.title.font</b><br /> +The font that the title is rendered in. If not specified the chart.text.font setting is used (usually Verdana)<br /> +<i>Default: null</i><br /><br /> + +<a name="chart.title.size"></a> +<b>chart.title.size</b><br /> +The size of the title. If not specified the size is usually 2pt bigger than the chart.text.size setting.<br /> +<i>Default: null</i><br /><br /> + +<a name="chart.title.bold"></a> +<b>chart.title.bold</b><br /> +Whather the title is bold or not.<br /> +<i>Default: true</i><br /><br /> + +<a name="chart.title.background"></a> +<b>chart.title.background</b><br /> +The background color (if any) for the title.<br /> +<i>Default: null</i><br /><br /> + +<a name="chart.title.color"></a> +<b>chart.title.color</b><br /> + The color of the title.<br /> <i>Default: black</i><br /><br /> + <a name="chart.title.hpos"></a> +<b>chart.title.hpos</b><br /> + This allows you to completely override the horizontal positioning of the title. It should be a number between 0 and 1, and is multiplied with the whole width of the canvas and then used as the horizontal position. <br /><i>Default: null</i><br /><br /> + <a name="chart.title.vpos"></a> +<b>chart.title.vpos</b><br /> + This allows you to completely override the vertical positioning of the title. It should be a number between 0 and 1, and is multiplied with the gutter and then used as the vertical position. It can be useful if you need to have a large gutter.<br /><i>Default: null</i><br /><br /> + + <a name="chart.title.xaxis"></a> + <b>chart.title.xaxis</b><br /> + This allows to specify a title for the X axis.<br /> + <i>Default: none</i><br /><br /> + + + <a name="chart.title.xaxis.size"></a> + <b>chart.title.xaxis.size</b><br /> + This allows you to specify a size for the X axis title.<br /> + <i>Default: null</i><br /><br /> + + <a name="chart.title.xaxis.font"></a> + <b>chart.title.xaxis.font</b><br /> + This allows to specify a font for the X axis title.<br /> + <i>Default: null</i><br /><br /> + + <a name="chart.title.xaxis.bold"></a> + <b>chart.title.xaxis.bold</b><br /> + This controls whether the X axis title is bold or not.<br /> + <i>Default: true</i><br /><br /> + + <a name="chart.title.yaxis"></a> + <b>chart.title.yaxis</b><br /> + This allows to specify a title for the Y axis.<br /> + <i>Default: none</i><br /><br /> + + <a name="chart.title.yaxis.size"></a> + <b>chart.title.yaxis.size</b><br /> + This allows you to specify a size for the Y axis title.<br /> + <i>Default: null</i><br /><br /> + + <a name="chart.title.yaxis.font"></a> + <b>chart.title.yaxis.font</b><br /> + This allows to specify a font for the Y axis title.<br /> + <i>Default: null</i><br /><br /> + + <a name="chart.title.yaxis.bold"></a> + <b>chart.title.yaxis.bold</b><br /> + This controls whether the Y axis title is bold or not.<br /> + <i>Default: true</i><br /><br /> + + <a name="chart.title.xaxis.pos"></a> +<b>chart.title.xaxis.pos</b><br /> + This is multiplied with the gutter to give the position of the X axis title.<br /><i>Default: 0.25</i><br /><br /> + <a name="chart.title.yaxis.pos"></a> +<b>chart.title.yaxis.pos</b><br /> + This is multiplied with the gutter to give the position of the Y axis title.<br /><i>Default: 0.25</i><br /><br /> + + + <a name="chart.title.yaxis.align"></a> + <b>chart.title.yaxis.align</b><br /> + Instead of using the option above you can instead use this option, specifying <i>left</i> or <i>right</i>.<br /> + <i>Default: left</i><br /><br /> + +<a name="shadow"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Shadow</h3> <a name="chart.shadow"></a> +<b>chart.shadow</b><br /> + Whether a drop shadow is applied. <br /><i>Default: false</i><br /><br /> + <a name="chart.shadow.color"></a> +<b>chart.shadow.color</b><br /> + The color of the shadow. <br /><i>Default: #666</i><br /><br /> + <a name="chart.shadow.offsetx"></a> +<b>chart.shadow.offsetx</b><br /> + The X offset of the shadow. <br /><i>Default: 3</i><br /><br /> + <a name="chart.shadow.offsety"></a> +<b>chart.shadow.offsety</b><br /> + The Y offset of the shadow. <br /><i>Default: 3</i><br /><br /> + <a name="chart.shadow.blur"></a> +<b>chart.shadow.blur</b><br /> + The severity of the shadow blurring effect. <br /><i>Default: 3</i><br /><br /> + + <a name="scale"></a> + <h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Scale</h3> + + + + <a name="chart.scale.decimals"></a> + <b>chart.scale.decimals</b><br /> + The number of decimal places to display for the Y scale. + <br /><i>Default: 0</i><br /><br /> + + <a name="chart.scale.point"></a> + <b>chart.scale.point</b><br /> + The character used as the decimal point.<br /><i>Default: .</i><br /><br /> + + <a name="chart.scale.formatter"></a> + <b>chart.scale.formatter</b><br /> + To allow thoroughly custom formats of numbers in the scale, you can use this option to + specify a function that is used by RGraph to format numbers. This function should + handle ALL of the formatting. Eg:<br /><br /> + <pre class="code"> +function myFormatter(obj, num) +{ + return num + 'F'; // An example of formatting +} +myGraph.Set('chart.scale.formatter', myFormatter); +</pre> + <br /><i>Default: null</i><br /><br /> + + + + <a name="chart.units.pre"></a> + <b>chart.units.pre</b><br /> + The units that the Y axis is measured in. This string is displayed BEFORE the actual number, allowing you to specify values such as "$50".<br /><i>Default: none</i><br /><br /> + + <a name="chart.units.post"></a> + <b>chart.units.post</b><br /> + The units that the Y axis is measured in. This string is displayed AFTER the actual number, allowing you to specify values such as "50ms".<br /><i>Default: none</i><br /><br /> + + <a name="chart.ymax"></a> + <b>chart.ymax</b><br /> + The optional maximum Y scale value. If not specified then it will be calculated.<br /><i>Default: null (It's calculated)</i><br /><br /> + + + + +<a name="interactive features"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Interactive features</h3> <a name="chart.contextmenu"></a> +<b>chart.contextmenu</b><br /> + An array of context menu items. More information on context menus is <a href="context.html">here</a>.<br /><i>Default: [] (An empty array)</i><br /><br /> + <a name="chart.tooltips"></a> +<b>chart.tooltips</b><br /> + A numerically indexed array of tooltips that are shown when a bar is clicked. These can contain HTML.<br /><i>Default: null</i><br /><br /> + <a name="chart.tooltips.effect"></a> +<b>chart.tooltips.effect</b><br /> + The animated effect used for showing tooltips. Can be either <i>fade</i> or <i>expand</i>.<br /><i>Default: fade</i><br /><br /> + <a name="chart.tooltips.event"></a> +<b>chart.tooltips.event</b><br /> + This is the event that triggers the tooltips. It can be either <i>onclick</i> or <i>onmousemove</i>.<br /><i>Default: onclick</i><br /><br /> + <a name="chart.tooltips.css.class"></a> +<b>chart.tooltips.css.class</b><br /> + This is the name of the CSS class the chart uses.<br /><i>Default: RGraph_tooltip</i><br /><br /> + <a name="chart.tooltips.override"></a> +<b>chart.tooltips.override</b><br /> + If you wish to handle showing tooltips yourself, this should be a function object which does just that. There's more information on the <a href="tooltips.html">tooltips documentation page</a><br /><i>Default: null</i><br /><br /> + + + <a name="chart.crosshairs"></a> +<b>chart.crosshairs</b><br /> + If true, you will get a crosshair centering on the current mouse position.<br /><i>Default: false</i><br /><br /> + <a name="chart.crosshairs.linewidth"></a> +<b>chart.crosshairs.linewidth</b><br /> + This controls the linewidth of the crosshairs.<br /><i>Default: 1</i><br /><br /> + <a name="chart.crosshairs.color"></a> +<b>chart.crosshairs.color</b><br /> + The color of the crosshairs.<br /><i>Default: #333</i><br /><br /> + + <a name="chart.crosshairs.hlines"></a> + <b>chart.crosshairs.hlines</b><br /> + This determines whether the horizontal crosshair is shown.<br /> + <i>Default: true</i><br /><br /> + + <a name="chart.crosshairs.vlines"></a> + <b>chart.crosshairs.vlines</b><br /> + This determines whether the vertical crosshair is shown.<br /> + <i>Default: true</i><br /><br /> + + + <a name="chart.annotatable"></a> +<b>chart.annotatable</b><br /> + Whether annotations are enabled for the chart (ie you can draw on the chart interactively.<br /><i>Default: false</i><br /><br /> + <a name="chart.annotate.color"></a> +<b>chart.annotate.color</b><br /> + If you do not allow the use of the palette, then this will be the only colour allowed for annotations.<br /><i>Default: black</i><br /><br /> + + <a name="chart.resizable"></a> + <b>chart.resizable</b><br /> + Defaulting to false, this determines whether your chart will be resizable. Because of the numerous event handlers this has to install code on, This feature is unlikely to work with other dynamic features (the context menu is fine however).<br /> + <i>Default: false</i><br /><br /> + + + <a name="chart.resize.handle.background"></a> + <b>chart.resize.handle.background</b><br /> + With this you can specify the background color for the resize handle. If you're adjusting the position of the + handle then you may need this to make the handle stand out more.<br /> + <i>Default: null</i><br /><br /> + +<a name="zoom"></a> +<h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Zoom</h3> +<a name="chart.zoom.mode"></a> +<b>chart.zoom.mode</b><br /> + Can be used to control whether the zoom is in thumbnail or canvas mode. Possible values are: <i>thumbnail</i> and <i>canvas</i>.<br /><i>Default: canvas</i><br /><br /> + <a name="chart.zoom.factor"></a> +<b>chart.zoom.factor</b><br /> + This is the factor that the chart will be zoomed by (bigger values means more zoom)<br /><i>Default: 1.5</i><br /><br /> + <a name="chart.zoom.fade.in"></a> +<b>chart.zoom.fade.in</b><br /> + Whether the zoomed canvas fades in or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /><i>Default: true</i><br /><br /> + <a name="chart.zoom.fade.out"></a> +<b>chart.zoom.fade.out</b><br /> + Whether the zoomed canvas fades out or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /><i>Default: true</i><br /><br /> + <a name="chart.zoom.hdir"></a> +<b>chart.zoom.hdir</b><br /> + The horizontal direction of the zoom. Possible values are: <i>left</i>, <i>center</i>, <i>right</i><br /><i>Default: right</i><br /><br /> + <a name="chart.zoom.vdir"></a> +<b>chart.zoom.vdir</b><br /> + The vertical direction of the zoom. Possible values are: <i>up</i>, <i>center</i>, <i>down</i><br /><i>Default: down</i><br /><br /> + <a name="chart.zoom.delay"></a> +<b>chart.zoom.delay</b><br /> + The delay (in milliseconds) between frames.<br /><i>Default: 50</i><br /><br /> + <a name="chart.zoom.frames"></a> +<b>chart.zoom.frames</b><br /> + The number of frames in the zoom animation.<br /><i>Default: 10</i><br /><br /> + <a name="chart.zoom.shadow"></a> +<b>chart.zoom.shadow</b><br /> + Whether or not the zoomed canvas has a shadow or not.<br /><i>Default: true</i><br /><br /> + <a name="chart.zoom.thumbnail.width"></a> +<b>chart.zoom.thumbnail.width</b><br /> + When the zoom is in thumbnail mode, this is the width (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br /> + <a name="chart.zoom.thumbnail.height"></a> +<b>chart.zoom.thumbnail.height</b><br /> + When the zoom is in thumbnail mode, this is the height (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br /> + <a name="chart.zoom.background"></a> +<b>chart.zoom.background</b><br /> + Defaulting to true, this determines whether the zoom has a dark, semi-opaque background that covers the entire web page.<br /><i>Default: true</i><br /><br /> + + + <a name="miscellaneous"></a> + <h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Miscellaneous</h3> + <a name="chart.highlight.stroke"></a> + <b>chart.highlight.stroke</b><br /> + If you use tooltips, this controls the colour of the highlight stroke. + <br /><i>Default: black</i><br /><br /> + + <a name="chart.highlight.fill"></a> + <b>chart.highlight.fill</b><br /> + If you use tooltips, this controls the colour of the highlight fill. + <br /><i>Default: rgba(255,255,255,0.5)</i><br /><br /> + + + <a name="chart.axis.color"></a> +<b>chart.axis.color</b><br /> + The color of the axis.<br /><i>Default: black</i><br /><br /> +</div> + + + + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/docs/what-is-html5-canvas.html b/schall/static/RGraph/docs/what-is-html5-canvas.html new file mode 100644 index 0000000..bfce4ac --- /dev/null +++ b/schall/static/RGraph/docs/what-is-html5-canvas.html @@ -0,0 +1,207 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: What is HTML5 canvas?</title> + + <meta name="keywords" content="rgraph html5 canvas charts what " /> + <meta name="description" content="RGraph: What is HTML5 canvas?" /> + + <meta property="og:title" content="RGraph: What is HTML5 canvas?" /> + <meta property="og:description" content="A brief description and a few examples of HTML5 canvas " /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js" ></script> + <script src="../libraries/RGraph.common.tooltips.js" ></script> + <script src="../libraries/RGraph.bar.js" ></script> + + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> +</head> + +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + <div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="index.html">Documentation</a> + > + What is HTML5 canvas? + </div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - What is HTML5 canvas?</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + <ul> + <li><a href="#introduction">Introduction</a></li> + <li><a href="#history">History</a></li> + <li><a href="#example">Example</a></li> + <li><a href="#compare">Canvas compared to SVG</a></li> + <li><a href="#support">Browser support for HTML5 canvas</a></li> + </ul> + + <a name="introduction"></a> + <h2>Introduction</h2> + + <p> + HTML5 canvas is a new HTML tag (<i><canvas></i>) which is part of the forthcoming HTML5 standard. It allows bitmap + drawing which is controlled using Javascript, and is what the RGraph libraries use to draw the charts. You could + liken it to a piece of paper which is part of your HTML page, on to which you can draw. Because you use Javascript to + draw on the canvas it becomes part of your page and allows interaction very easily. + </p> + + <p> + Canvas uses a "fire and forget" drawing methodology - there is no DOM that is maintained, so if you want to alter something + you will probably have to redraw the entire canvas. The lack of a DOM means that canvas is fast to draw on and very + responsive - important when you're providing iteractive charts to your users. + </p> + + <a name="history"></a> + <h2>History</h2> + <p> + HTML5 canvas was originally introduced by Apple for use in WebKit (which is used in their Safari browser and Google Chrome). + It is now part of the HTML5 specification and supported by the majority (if not all) of modern web browsers. + </p> + + <a name="example"></a> + <h2>Example</h2> + + <canvas id="cvs" width="350" height="250" style="border: 1px dashed gray; float: right">[No canvas support]</canvas> + <script> + canvas = document.getElementById("cvs"); + context = canvas.getContext('2d'); + + // Draw the red triangle + context.beginPath(); + context.strokeStyle = 'black'; + context.fillStyle = 'red'; + context.moveTo(100, 25); + context.lineTo(150, 100); + context.lineTo(50, 100); + context.lineTo(100, 25); + context.stroke(); + context.fill(); + + // Draw the blue square + context.beginPath(); + context.fillStyle = 'rgba(0,0,255,0.5)'; + context.strokeRect(100, 75, 100,100); + context.fillRect(100, 75, 100,100); + context.stroke(); + context.fill(); + + // Draw the yellow circle + context.beginPath(); + context.globalAlpha = 0.5; + context.fillStyle = 'yellow'; + context.arc(200,175,50,0,2 * Math.PI, 0); + context.stroke(); + context.fill(); + </script> + + <p> + The example to the right is a very simple case of drawing a few primitives on the canvas. The dotted border is + provided by CSS to illustrate the drawing area. + </p> + + <p> + The <canvas> tag itself is defined with just a width/height/id attribute. The one here also has a style attribute + to make it more evident in the page. The HTML used is shown below: + </p> + + <br clear="all" /> + + <pre class="code"> +<canvas id="cvs" width="375" height="250">[No canvas support]<canvas> +</pre> + + The content in between the tags is not shown if the browser supports canvas, and is if the browser doesn't. This provides + for fallback content if the users browser doesn't support canvas. + + <a name="compare"></a> + <h2>HTML5 Canvas compared to SVG</h2> + <p> + HTML5 canvas can be compared (a bit) to SVG - which is a vector based alternative for drawing in HTML pages. SVG is + at a more abstract level than canvas and maintains a record of everything drawn, using a DOM. This is then converted + to a bitmap when shown. In the above example, if the blue squares coordinates are changed (eg in an animation), + then the whole canvas needs to be cleared and redrawn for each frame. + </p> + + <p> + As a result of not having to maintain a DOM <canvas> is fast to draw on and display to the browser. + </p> + + <a name="support"></a> + <h2>Browser support for HTML5 canvas</h2> + <p> + The majority of current browsers support canvas, including IE9. Earlier versions of MSIE have some support through + compatibility layers provided by Google and Mozilla. One such library - ExCanvas - is provided in the RGraph archive + allowing IE8 to display the graphs, albeit without many of the dynamic features. You can read more on this + <a href="msie.html">here</a>. + </p> + + <p align="right"> + <b> + <a href="index.html">Full documentation »</a> + </b> + </p> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/docs/zoom.html b/schall/static/RGraph/docs/zoom.html new file mode 100644 index 0000000..bda5490 --- /dev/null +++ b/schall/static/RGraph/docs/zoom.html @@ -0,0 +1,332 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - Zooming your charts</title> + + <meta name="keywords" content="rgraph html5 canvas chart docs zoom" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Documentation about zooming your charts" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.jpg"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js" ></script> + <script src="../libraries/RGraph.common.annotate.js" ></script> + <script src="../libraries/RGraph.common.context.js" ></script> + <script src="../libraries/RGraph.common.zoom.js" ></script> + <script src="../libraries/RGraph.bar.js" ></script> + <script src="../libraries/RGraph.line.js" ></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + + <style> + .RGraph_zoom_window { + border: 2px solid #ccc ! important; + box-shadow: 0 0 15px #aaa ! important;; + -moz-box-shadow: 0 0 15px #aaa ! important; + -webkit-box-shadow: 0 0 15px #aaa ! important; + } + </style> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> + +</head> + +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + <div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="index.html">Documentation</a> + > + Zooming your charts + </div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - Zooming your charts</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + + <ul> + <li><a href="#canvas">Canvas mode</a></li> + <li><a href="#thumbnail">Thumbnail mode</a></li> + <li><a href="#area">Area mode</a></li> + </ul> + + + <a name="canvas"></a> + <h2>Canvas mode</h2> + + <table border="0" width="100%"> + <tr> + <td> + <p> + As of November 2009 RGraph has had the ability to provide a zoom facility. It's designed to be used in + conjunction with a context menu as in the example to the right. + </p> + + <p> + You can control the zoom using these properties: + </p> + + <ul> + <li>chart.zoom.mode<i>Default: canvas</i></li> + <li>chart.zoom.factor<i>Default: 1.5</i></li> + <li>chart.zoom.fade.in <i>Default: true</i></li> + <li>chart.zoom.fade.out <i>Default: true</i></li> + <li>chart.zoom.hdir <i>Default: right</i></li> + <li>chart.zoom.vdir <i>Default: down</i></li> + <li>chart.zoom.delay <i>Default: 50</i></li> + <li>chart.zoom.frames <i>Default: 10</i></li> + <li>chart.zoom.shadow <i>Default: true</i></li> + <li>chart.zoom.mode <i>Default: canvas</i></li> + <li>chart.zoom.thumbnail.width <i>Default: 75</i></li> + <li>chart.zoom.thumbnail.height <i>Default: 75</i></li> + <li>chart.zoom.background <i>Default: true</i></li> + </ul> + </td> + + <td style="text-align: center"> + <canvas width="600" height="250" id="myc">[No canvas support]</canvas> + </td> + </tr> + + <tr> + <td colspan="2"> + The possible values of <i>chart.zoom.hdir</i> are: <i>left</i>, <i>center</i>, <i>right</i>. + The possible values of <i>chart.zoom.vdir</i> are: <i>up</i>, <i>center</i>, <i>down</i>. <i>chart.zoom.delay</i> + is the delay in between frames (in milliseconds) and <i>chart.zoom.frames</i> is the number of frames in the zoom. <i>chart.zoom.shadow</i> + is whether the zoomed canvas has a shadow or not. The possible values of <i>chart.zoom.mode</i> are <i>canvas</i> (default) + and <i>thumbnail</i>. + </td> + </tr> + </table> + + <script> + window.onload = function () + { + var graph = new RGraph.Bar('myc', [[4,6],[6, 8],[8,6],[7,5],[9,4],[4,7],[3,5],[8,6],[7,6],[4,7],[5,4],[5,6],[6,4]]); + graph.Set('chart.colors', ['#f66', '#66f']); + graph.Set('chart.strokecolor', 'rgba(0,0,0,0)'); + graph.Set('chart.labels', ['Fry','Hav','Jim','Moo','Io','Olga','Tim','Gaz','Jake','Pippa','Lou','Fred','John']); + + if (!RGraph.isIE8()) { + graph.Set('chart.contextmenu', [ + ['Clear annotations', function () {RGraph.Clear(graph.canvas); graph.Draw();}], + ['Zoom in', RGraph.Zoom] + ]); + graph.Set('chart.annotatable', true); + graph.Set('chart.zoom.hdir', 'left'); + graph.Set('chart.zoom.factor', 1.5); + graph.Set('chart.zoom.vdir', 'center'); + graph.Set('chart.zoom.frames', 50); // Number of frames + graph.Set('chart.zoom.delay', 5); // Delay between each frame + graph.Set('chart.zoom.shadow', 'rgba(0,0,0,0.7)'); // Show a shadow on the zoomed chart + graph.Set('chart.zoom.background', true); + } + + graph.Set('chart.title', 'Chart with zoom (context, annotatable)'); + graph.Set('chart.shadow', true); + graph.Set('chart.shadow.color', '#999'); + graph.Draw(); + + var myLine = new RGraph.Line('myc2', [40,48,45,64,34,22,23,56,56,54,84,44], [4,5,6,7,20,21,1,9,9,8,5,4]); + myLine.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']); + myLine.Set('chart.hmargin', 10); + myLine.Set('chart.linewidth', 3); + myLine.Set('chart.title', 'A sample line chart'); + myLine.Set('chart.colors', ['red', 'black']); + myLine.Set('chart.shadow', true); + + if (!RGraph.isIE8()) { + myLine.Set('chart.contextmenu', [['Zoom entire chart', RGraph.Zoom]]); + myLine.Set('chart.zoom.delay', 15); + myLine.Set('chart.zoom.factor', 1.5); + myLine.Set('chart.zoom.mode', 'thumbnail'); + myLine.Set('chart.zoom.vdir', 'center'); + myLine.Set('chart.zoom.thumbnail.width', 100); + myLine.Set('chart.zoom.thumbnail.height', 100); + } + myLine.Draw(); + + myLine2 = new RGraph.Line('myc3', [15,30,62,26,46,86,48,51,51,35,32, 35]); + myLine2.Set('chart.background.grid.width', 0.5); + myLine2.Set('chart.shadow.offsetx', 1); + myLine2.Set('chart.shadow.offsety', 1); + myLine2.Set('chart.shadow.blur', 2); + myLine2.Set('chart.shadow', true); + myLine2.Set('chart.zoom.mode', 'area'); + myLine2.Set('chart.hmargin', 10); + myLine2.Set('chart.linewidth', 2); + myLine2.Set('chart.title', 'A chart with zoom in area mode'); + myLine2.Set('chart.tickmarks', 'endcircle'); + myLine2.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']); + myLine2.Draw(); + } + </script> + + <br clear="all" /> + + <pre class="code"> +<script> + var graph = new RGraph.Line('myc', [4,6,8,7,9,4,3,8,7,4,5,5,5]); + graph.Set('chart.labels', ['Fry','Hav','Jim','Moo','Io','Olga','Tim','Gaz','Jake','Pippa','Lou','Fred','John']); + graph.Set('chart.contextmenu', [ + ['Clear annotations', function () {RGraph.Clear(graph.canvas); graph.Draw();}], + ['Zoom in', RGraph.Zoom] + ]); + graph.Set('chart.title', 'Chart with zoom (context, annotatable)'); + graph.Set('chart.shadow', true); + graph.Set('chart.annotatable', true); + graph.Draw(); +</script> +</pre> + + + <a name="thumbnail"></a> + <h2>Thumbnail mode</h2> + + <canvas id="myc2" width="600" height="250" style="float: left">[No canvas support]</canvas> + + <p> + The zoom has an alternative thumbnail mode, which displays a small thumbnail zoom instead of zooming the entire canvas. + The chart to the left shows an example of this. + </p> + + <p> + It uses some of the same properties as the regular zoom, eg <i>chart.fade.in</i>, <i>chart.fade.out</i>, <i>chart.zoom.shadow</i> + </p> + + <br clear="all" /> + + <pre class="code"> +<script> + var myLine = new RGraph.Line('myc2', [40,48,45,64,34,22,23,56,56,54,84,44], [4,5,6,7,20,21,1,9,9,8,5,4]); + myLine.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']); + myLine.Set('chart.hmargin', 10); + myLine.Set('chart.linewidth', 3); + myLine.Set('chart.title', 'A sample line chart'); + myLine.Set('chart.zoom.mode', 'thumbnail'); + myLine.Set('chart.zoom.vdir', 'center'); + myLine.Set('chart.zoom.thumbnail.width', 100); + myLine.Set('chart.zoom.thumbnail.height', 100); + myLine.Set('chart.colors', ['red', 'black']); + myLine.Set('chart.shadow', true); + myLine.Set('chart.contextmenu', [['Zoom entire chart', RGraph.Zoom]]); +</script> +</pre> + + <p> + <b>Making the zoom circular</b><br /><br /> + <img src="../images/border-radius.png" width="171" height="159" alt="A circular zoom window" style="float: right; border: 1px gray solid" /> + It is possible to make the zoom in area mode circular by utilising the <i>border-radius</i> CSS property. Currently support for + this is limited to FireFox 4b7+ and MSIE9, so it's not part of the main RGraph software. The CSS ncessary to achieve this is + thus: + </p> + + <pre class="code" style="width: 700px" /> +<style> + .RGraph_zoom_window { + border-radius: 50px ! important; + } +</style> +</pre> + + This a chart demonstrating this technique <a href="zoom_thumbnail.html">here</a>. Note that browser support for this technique is limited. + + <br clear="all" /> + + + <a name="area"></a> + <h2>Area mode</h2> + + <canvas id="myc3" width="600" height="250" style="float: right">[No canvas support]</canvas> + + <p> + Another type of zoom available is <i>area</i>. This is somewhat similar to thumbnail, but allows you to draw a rectangle around + the specific area that you want to zoom. + </p> + + <p> + Again, this uses some common zoom properties, such as <i>chart.zoom.factor</i>. + </p> + + <p> + Once visible, you can drag the zoomed area around with the left mouse button (a left drag), and drag the zoomed canvas around + within the zoom by using the right mouse button (a right-drag). And a double click will expand the zoomed area to cover the + whole canvas. + </p> + + <br clear="all" /> + + <pre class="code"> +<script> + var myLine = new RGraph.Line('myc3', [15,30,62,26,46,86,48,51,51,35,32, 35]); + myLine.Set('chart.zoom.mode', 'area'); + myLine.Set('chart.hmargin', 10); + myLine.Set('chart.linewidth', 1); + myLine.Set('chart.title', 'A chart with zoom in area mode'); + myLine.Set('chart.tickmarks', 'endcircle'); + myLine.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']); + myLine.Draw(); +<script> +</pre> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/docs/zoom_thumbnail.html b/schall/static/RGraph/docs/zoom_thumbnail.html new file mode 100644 index 0000000..50b5866 --- /dev/null +++ b/schall/static/RGraph/docs/zoom_thumbnail.html @@ -0,0 +1,135 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - Zooming your charts; a circular thumbnail</title> + + <meta name="keywords" content="rgraph html5 canvas chart docs circular zoom" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Documentation about zooming your charts; a circular thumbnail" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js" ></script> + <script src="../libraries/RGraph.common.zoom.js" ></script> + <script src="../libraries/RGraph.line.js" ></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + + <style> + .RGraph_zoom_window { + box-shadow: 0 0 15px black ! important; + -webkit-box-shadow: 0 0 15px black ! important; + -moz-box-shadow: 0 0 15px black ! important; + border-radius: 50px ! important; + } + </style> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> + +</head> + +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + <div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="index.html">Documentation</a> + > + A circular thumbnail demonstration + </div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - A circular thumbnail demonstration</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + + <canvas id="cvs" width="600" height="250" style="float: right">[No canvas support]</canvas> + <script> + var line = new RGraph.Line('cvs', [5,3,4,6,5,1,3,4,5,5], [4,8,6,7,4,3,5,1,2,3]); + line.Set('chart.colors', ['red', 'black']); + line.Set('chart.hmargin', 5); + line.Set('chart.linewidth', 5); + line.Set('chart.shadow', true); + line.Set('chart.shadow.offsetx', 0); + line.Set('chart.shadow.offsety', 0); + line.Set('chart.shadow.blur', 15); + line.Set('chart.shadow.color', ['red','black']); + line.Set('chart.labels', ['Hoolio','Gina','Jo','Olga','Kev','John','Lou','Pete','June','Fred']); + line.Set('chart.zoom.mode', 'thumbnail'); + line.Set('chart.zoom.thumbnail.width', 100); + line.Set('chart.zoom.thumbnail.height', 100); + line.Draw(); + </script> + + <p> + This is a demonstration of the zoom in thumbnail mode with some custom CSS (the <i>border-radius</i> property) which facilitates + making the thumbnail circular. + </p> + + <p> + Remember that browser support for this is limited - currently (5th September 2011) only Firefox 4+ and IE9+ support it. + </p> + + <p> + <a href="zoom.html#thumbnail">«Back to zoom documentation</a> + </p> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/examples/bar.html b/schall/static/RGraph/examples/bar.html new file mode 100644 index 0000000..ca1355f --- /dev/null +++ b/schall/static/RGraph/examples/bar.html @@ -0,0 +1,204 @@ +<!DOCTYPE html > +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - bar charts</title> + + <meta name="keywords" content="rgraph html5 canvas example bar charts" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Bar charts example" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A javascript charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js" ></script> + <script src="../libraries/RGraph.common.effects.js" ></script> + <script src="../libraries/RGraph.common.tooltips.js" ></script> + <script src="../libraries/RGraph.bar.js" ></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + + <script> + /** + * The onload function creates the graph + */ + window.onload = function () + { + + var bar1 = new RGraph.Bar('bar1', [ + [0.000092, 0.00008], + [0.000034, 0.000057], + [0.000056, 0.000062], + [0.000055, 0.000045], + [0.000036, 0.000012], + [0.000044, 0.000056], + [0.000051, 0.000066], + [0.000068, 0.000088]]); + bar1.Set('chart.background.barcolor1', 'white'); + bar1.Set('chart.background.barcolor2', 'white'); + bar1.Set('chart.labels', ['1st', '2nd', '3rd', '4th', '5th', '6th', '7th', '8th']); + bar1.Set('chart.key', ['John', 'Bob']); + bar1.Set('chart.key.position.y', 35); + bar1.Set('chart.key.position', 'gutter'); + bar1.Set('chart.key.background', 'rgb(255,255,255)'); + bar1.Set('chart.colors', ['#77f', '#7f7']); + bar1.Set('chart.shadow', true); + bar1.Set('chart.shadow.blur', 15); + bar1.Set('chart.shadow.offsetx', 0); + bar1.Set('chart.shadow.offsety', 0); + bar1.Set('chart.shadow.color', '#aaa'); + bar1.Set('chart.yaxispos', 'right'); + bar1.Set('chart.strokestyle', 'rgba(0,0,0,0)'); + bar1.Set('chart.gutter.left', 5); + bar1.Set('chart.gutter.right', 55); + bar1.Draw(); + + var bar2 = new RGraph.Bar('bar2', [[30,20,19,21], [23,25, 27, 30], [30,25,29, 32], [27,28,35,33], [26,18,29,30], [31,20,25,27], [39,28,28,35], [27,29,28,29], [26,23,26,27], [30,20,19,21], [30,20,19,21], [30,20,19,21]]); + bar2.Set('chart.units.pre', '$'); + bar2.Set('chart.title', 'Sales in the last 8 months (tooltips)'); + bar2.Set('chart.title.vpos', 0.5); + bar2.Set('chart.colors', ['red', 'yellow', 'green', 'orange']); + bar2.Set('chart.gutter.left', 40); + bar2.Set('chart.gutter.right', 5); + bar2.Set('chart.gutter.top', 40); + bar2.Set('chart.gutter.bottom', 50); + bar2.Set('chart.shadow', true); + bar2.Set('chart.shadow.color', '#aaa'); + bar2.Set('chart.background.barcolor1', 'white'); + bar2.Set('chart.background.barcolor2', 'white'); + bar2.Set('chart.background.grid.hsize', 5); + bar2.Set('chart.background.grid.vsize', 5); + bar2.Set('chart.grouping', 'stacked'); + bar2.Set('chart.labels', ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September','October','November','December']); + bar2.Set('chart.labels.above', true); + bar2.Set('chart.key', ['Richard', 'Barbara', 'Johnny', 'Frederick']); + bar2.Set('chart.key.background', 'rgba(255,255,255,0.7)'); + bar2.Set('chart.key.position', 'gutter'); + bar2.Set('chart.key.position.gutter.boxed', false); + bar2.Set('chart.key.position.y', bar2.Get('chart.gutter.top') - 15); + bar2.Set('chart.key.border', false); + bar2.Set('chart.background.grid.width', 0.3); // Decimals are permitted + bar2.Set('chart.text.angle', 35); + bar2.Set('chart.strokestyle', 'rgba(0,0,0,0)'); + bar2.Set('chart.tooltips.event', 'onmousemove'); + + if (!RGraph.isIE8()) { + tooltipFunc = function (i) + { + var r = i % 4; + + if (r == 3) return 'John' + else if (r == 2) return 'Rich'; + else if (r == 1) return 'Jane'; + else if (r == 0) return 'Quentin'; + } + bar2.Set('chart.tooltips', tooltipFunc); + } + + if (!RGraph.isIE8()) { + RGraph.Effects.Bar.Grow(bar2); + } else { + bar2.Draw(); + } + } + </script> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> +</head> +<body> + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + <div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="./index.html">Examples</a> + > + Bar charts + </div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - Bar charts</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + <div> + <p> + The bar chart is probably one of the most widely used of charts, and also one of the most versatile. It's defined as a chart with + rectangular bars with lengths proportional to the values they represent. The bar chart can be used to represent two + or more values. With grouped and stacked bar charts, you can visualise two or more sets of data. For example two years + worth of sales figures. Doing this you will be able to easily see differences, for example a better year when it comes + to sales. You can also show negative values by having the X axis in the center, like the examples shown. If you use a + grouped or stacked bar chart, a key may be helpful to your users. + </p> + + <p> + By using the tooltips feature, you can provide more detail about what a particular bar represents. The tooltips in + <b>RGraph</b> can contain wide range of HTML, so you can use them to show photos or movies for example. + </p> + + <div> + <ul> + <li><a href="../docs/bar.html">Bar chart API documentation</a></li> + </ul> + </div> + + <div> + <canvas id="bar1" width="450" height="200">[No canvas support]</canvas> + <canvas id="bar2" width="450" height="200">[No canvas support]</canvas> + </div> + </div> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/examples/basic.html b/schall/static/RGraph/examples/basic.html new file mode 100644 index 0000000..cbc5522 --- /dev/null +++ b/schall/static/RGraph/examples/basic.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + + <title>RGraph: HTML5 Javascript charts library - a basic example</title> + + <meta name="keywords" content="rgraph javascript charts html5 canvas basic example" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - A basic example" /> + + <!-- 1/3. Include the RGraph libraries --> + <script src="../libraries/RGraph.common.core.js" ></script> + <script src="../libraries/RGraph.bar.js" ></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + +</head> + +<body> + + <h1>RGraph: HTML5 Javascript charts library - A basic example</h1> + + <!-- 2/3. This is the canvas that the graph is drawn on --> + <canvas id="myBar" width="1000" height="250">[No canvas support]</canvas> + + <!-- + 3/3. This creates and displays the graph. As it is here, you can call this from the window.onload event, + allowing you to put it in your pages header. + --> + <script> + window.onload = function () + { + var bar = new RGraph.Bar('myBar', [12,13,16,15,16,19,19,12,23,16,13,24]); + bar.Set('chart.gutter.left', 35); + bar.Set('chart.colors', ['red']); + bar.Set('chart.title', 'A basic graph'); + bar.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']); + bar.Draw(); + } + </script> + + <p> + This is a very basic example that does little more than display a chart. If you're trying to understand how RGraph + works, this should help as there is very little happening on this page. To see the source code of this + page simply view the source (Right click > View Source). + </p> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/examples/bipolar.html b/schall/static/RGraph/examples/bipolar.html new file mode 100644 index 0000000..22854c5 --- /dev/null +++ b/schall/static/RGraph/examples/bipolar.html @@ -0,0 +1,152 @@ +<!DOCTYPE html> +<html> +<head> + + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - bi-polar charts</title> + + <meta name="keywords" content="rgraph html5 canvas example bipolar charts" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Bipolar charts example" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js"></script> + <script src="../libraries/RGraph.common.tooltips.js"></script> + <script src="../libraries/RGraph.bipolar.js"></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + + <script> + window.onload = function () + { + var left = [5,6,8,9,12,13,4,9]; + var right = [5,8,4,11,15,26,13,16]; + + var bipolar1 = new RGraph.Bipolar('bipolar1', left, right); + bipolar1.Set('chart.colors', ['red']); + bipolar1.Set('chart.labels', ['Barry', 'John', 'Fred', 'George', 'Rich', 'Larry', 'John', 'Mike']); + bipolar1.Set('chart.title.left', '2007'); + bipolar1.Set('chart.title.right', '2008'); + bipolar1.Set('chart.title', 'Sales'); + + if (!RGraph.isIE8()) { + bipolar1.Set('chart.tooltips', ['Barry', 'John', 'Fred', 'George', 'Rich', 'Larry', 'John', 'Mike', 'Barry', 'John', 'Fred', 'George', 'Rich', 'Larry', 'John', 'Mike']); + bipolar1.Set('chart.tooltips.effect', 'fade'); + } + + bipolar1.Set('chart.units.post', 'k'); + bipolar1.Set('chart.xmax', 35); + bipolar1.Set('chart.shadow', true); + bipolar1.Set('chart.shadow.offsety', 0); + bipolar1.Set('chart.shadow.offsetx', 0); + bipolar1.Set('chart.shadow.color', '#aaa'); + bipolar1.Set('chart.shadow.blur', 25); + bipolar1.Draw(); + + + + var bipolar2 = new RGraph.Bipolar('bipolar2', left, right); + bipolar2.Set('chart.labels', ['Ferrari', 'Porsche', 'Honda', 'Mazda', 'Aston', 'BMW','Ford','Renault']); + bipolar2.Set('chart.title.left', 'July') + bipolar2.Set('chart.title.right', 'August'); + bipolar2.Set('chart.title', 'Vehicle market share'); + bipolar2.Set('chart.units.post', 'k'); + bipolar2.Draw(); + } + </script> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> +</head> +<body> + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + +<div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="./index.html">Examples</a> + > + Bi-polar chart +</div> + + +<h1>RGraph: <span>HTML5 Javascript charts library</span> - Bi-polar charts</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + <div> + <p> + The Bi-polar chart is also known as an age-frequency chart or a population pyramid. It allows you to very straight forwardly + compare two sets of data. For example two years worth of sales figues. Using this type of chart abnormalities will become + apparent. Other charts that would also be comparable, include a grouped bar chart, a stacked bar chart, and a multiple + line chart. + </p> + + <div> + <ul> + <li><a href="../docs/bipolar.html">Bi-polar chart API documentation</a></li> + </ul> + </div> + + <div> + <canvas id="bipolar1" width="475" height="250">[No canvas support]</canvas> + <canvas id="bipolar2" width="475" height="250">[No canvas support]</canvas> + </div> + </div> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/examples/donut.html b/schall/static/RGraph/examples/donut.html new file mode 100644 index 0000000..9f8506f --- /dev/null +++ b/schall/static/RGraph/examples/donut.html @@ -0,0 +1,167 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - donut charts</title> + + <meta name="keywords" content="rgraph html5 canvas example donut charts" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Donut charts examples" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js" ></script> + <script src="../libraries/RGraph.common.context.js" ></script> + <script src="../libraries/RGraph.common.annotate.js" ></script> + <script src="../libraries/RGraph.common.tooltips.js" ></script> + <script src="../libraries/RGraph.common.zoom.js" ></script> + <script src="../libraries/RGraph.pie.js" ></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + + <script> + window.onload = function () + { + var donut = new RGraph.Pie('donut1', [41,37,16,3,3]); + donut.Set('chart.variant', 'donut'); + donut.Set('chart.linewidth', 5); + donut.Set('chart.strokestyle', 'white'); + donut.Set('chart.title', "Browser share"); + donut.Set('chart.key', ['MSIE 7 (41%)', 'MSIE 6 (37%)', 'Firefox (16%)', 'Safari (3%)', 'Other (3%)']); + donut.Set('chart.key.shadow', true); + donut.Set('chart.key.shadow.offsetx', 0); + donut.Set('chart.key.shadow.offsety', 0); + donut.Set('chart.key.shadow.blur', 15); + donut.Set('chart.key.shadow.color', '#ccc'); + donut.Set('chart.key.position', 'graph'); + donut.Set('chart.align', 'left'); + donut.Draw(); + + + function getGradient(obj, color) + { + var gradient = obj.context.createRadialGradient(obj.canvas.width / 2, obj.canvas.height / 2, 0, obj.canvas.width / 2, obj.canvas.height / 2, 200); + gradient.addColorStop(0, 'black'); + gradient.addColorStop(0.5, color); + gradient.addColorStop(1, 'black'); + + return RGraph.isIE8() ? color : gradient; + } + + var donut2 = new RGraph.Pie('donut2', [8,6,5,3,8,9,9,4]); + + // Create the gradients + var gradient = getGradient(donut2, 'red'); + var gradient2 = getGradient(donut2, 'green'); + var gradient3 = getGradient(donut2, 'pink'); + var gradient4 = getGradient(donut2, 'yellow'); + var gradient5 = getGradient(donut2, 'grey'); + var gradient6 = getGradient(donut2, 'cyan'); + var gradient7 = getGradient(donut2, 'red'); + var gradient8 = getGradient(donut2, '#ddd'); + var gradient9 = getGradient(donut2, 'blue'); + + donut2.Set('chart.variant', 'donut'); + donut2.Set('chart.labels', ['Flipper', 'Harry', 'Ben', 'Richard', 'Keith', 'Ben', 'George', 'Barry']); + donut2.Set('chart.title', "Sales figures for week 43"); + donut2.Set('chart.gutter.left', 35); + donut2.Set('chart.gutter.right', 35); + donut2.Set('chart.strokestyle', 'rgba(0,0,0,0)'); + donut2.Set('chart.colors', [gradient, gradient2, gradient3, gradient4, gradient5, gradient6, gradient7, gradient8, gradient9]); + donut2.Draw(); + } + </script> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> +</head> +<body> + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + +<div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="./index.html">Examples</a> + > + Donut charts +</div> + +<h1>RGraph: <span>HTML5 Javascript charts library</span> - Donut charts</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + <div> + + <p> + Formerly the Donut chart was a separate class, though now it's a variant of the Pie chart. This means smaller downloads and + a much simpler implementation. Essentially it's a Pie chart with a big hole in the middle. + </p> + + <div> + <ul> + <li><a href="../docs/pie.html">Pie charts API documentation</a></li> + </ul> + </div> + + <div> + <canvas id="donut1" width="430" height="350">[No canvas support]</canvas> + <canvas id="donut2" width="450" height="350">[No canvas support]</canvas> + </div> + </div> + + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/examples/fuel.html b/schall/static/RGraph/examples/fuel.html new file mode 100644 index 0000000..9a7867c --- /dev/null +++ b/schall/static/RGraph/examples/fuel.html @@ -0,0 +1,132 @@ +<!DOCTYPE html > +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - fuel charts</title> + + <meta name="keywords" content="rgraph html5 canvas example fuel chart" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Fuel chart example" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js" ></script> + <script src="../libraries/RGraph.common.effects.js" ></script> + <script src="../libraries/RGraph.fuel.js" ></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + + <script> + window.onload = function () + { + // MIN, MAX, INDICATED + var fuel1 = new RGraph.Fuel('fuel1',0,100,78); + RGraph.isIE8() ? fuel1.Draw() : RGraph.Effects.Fuel.Grow(fuel1); + + var fuel2 = new RGraph.Fuel('fuel2', 50, 100, 67); + fuel2.Set('chart.needle.color', 'blue'); + fuel2.Set('chart.colors', ['#ddf']); + fuel2.Set('chart.labels.empty', 'Half full\r\n(50l)'); + fuel2.Set('chart.labels.full', 'Full\r\n(100l)'); + fuel2.Set('chart.icon', '/images/water.jpg'); + fuel2.Draw(); + } + </script> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> + +</head> +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + +<div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="./index.html">Examples</a> + > + Fuel Gauge +</div> + +<h1>RGraph: <span>HTML5 Javascript charts library</span> - Fuel Gauge charts</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + <div> + <p> + The Fuel Gauge is a variation on the Meter that could be incorporated into a control panel or similar. The center image, + the colors and the text can all be customised as the two examples below show. The border on the second chart is simply + a CSS border on the canvas. The fuel icon is the default icon for the chart and uses a data: URL - ie there's no + external image necessary. + </p> + + <div> + <ul> + <li><a href="../docs/fuel.html">Fuel Gauge API documentation</a></li> + </ul> + </div> + + <div style="text-align: center"> + <canvas id="fuel1" width="200" height="200">[Please wait...]</canvas> + <canvas id="fuel2" width="200" height="200" style="background-color: white; border: 1px solid #ccc">[No canvas support]</canvas> + </div> + </div> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/examples/funnel.html b/schall/static/RGraph/examples/funnel.html new file mode 100644 index 0000000..943e905 --- /dev/null +++ b/schall/static/RGraph/examples/funnel.html @@ -0,0 +1,175 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - funnel charts</title> + + <meta name="keywords" content="rgraph html5 canvas example funnel chart" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Funnel charts examples" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js" ></script> + <script src="../libraries/RGraph.common.context.js" ></script> + <script src="../libraries/RGraph.common.annotate.js" ></script> + <script src="../libraries/RGraph.common.tooltips.js" ></script> + <script src="../libraries/RGraph.common.zoom.js" ></script> + <script src="../libraries/RGraph.common.resizing.js" ></script> + <script src="../libraries/RGraph.funnel.js" ></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + + <script> + /** + * The onload function creates the graph + */ + window.onload = function () + { + var funnel = new RGraph.Funnel('funnel1', [100,45,45,26,24]); + funnel.Set('chart.gutter.top', 40); + funnel.Set('chart.gutter.left', 150); + funnel.Set('chart.text.boxed', false); + funnel.Set('chart.title', 'Leads progressing to sales'); + + funnel.Set('chart.shadow', true); + funnel.Set('chart.shadow.color', 'gray'); + funnel.Set('chart.shadow.blur', 25); + funnel.Set('chart.shadow.offsetx', 0); + funnel.Set('chart.shadow.offsety', 0); + + + if (!RGraph.isIE8()) { + + /** + * This gradient is for the highlight fill + */ + var grad = funnel.context.createLinearGradient(funnel.Get('chart.gutter.left'),0,funnel.canvas.width - funnel.Get('chart.gutter.right'),0); + grad.addColorStop(1, 'white'); + grad.addColorStop(0, 'rgba(255,255,255,0)'); + + funnel.Set('chart.tooltips', [ + 'id:tooltip_contact', + 'id:tooltip_lead', + 'id:tooltip_call', + 'id:tooltip_visit', + 'id:tooltip_sale' + ]); + + funnel.Set('chart.tooltips.effect', 'fade'); + funnel.Set('chart.highlight.fill', grad); + funnel.Set('chart.zoom.hdir', 'center'); + funnel.Set('chart.zoom.vdir', 'up'); + funnel.Set('chart.contextmenu', [['Zoom in', RGraph.Zoom]]); + } + + funnel.Set('chart.labels', ['Initial contact', 'Established lead', 'Telephone contact', 'Site visit', 'Sale finalised']); + funnel.Set('chart.labels.x', 10); + funnel.Set('chart.text.boxed', false); + funnel.Set('chart.strokestyle', 'rgba(0,0,0,0)'); + funnel.Set('chart.labels.sticks', true); + funnel.Set('chart.taper', false); + funnel.Draw(); + } + </script> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> +</head> +<body> + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + <div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="./index.html">Examples</a> + > + Funnel chart + </div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - Funnel chart</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + <p> + The funnel chart can be used to show stages in a sales or order process, from initial lead/contact through to actual sale. + It works well if you have a diminishing process, like that shown below. It can show potential revenue in each stage, or + like below, it can show actual numbers. It can also highlight potential problems in an organisations sales and/or order fulfillment + processes. + </p> + + <div> + <div> + <ul> + <li><a href="../docs/funnel.html">Funnel charts API documentation</a></li> + </ul> + </div> + + <div style="text-align: center"> + <canvas id="funnel1" width="500" height="400">[No canvas support]</canvas> + </div> + </div> + + <div style="display: none"> + <div id="tooltip_contact"><b>Initial contact</b><br />All potential cutomers were contacted and<br />interest was established.</div> + <div id="tooltip_lead"><b>Established lead</b><br />Customers who were interested had their details<br />recorded and passed to the sales team.</div> + <div id="tooltip_call"><b>Sales Call</b><br />Interested Customers were called by the<br />sales team.</div> + <div id="tooltip_visit"><b>Site visit</b><br />The Customers site was visited by a representative<br />of the sales core.</div> + <div id="tooltip_sale"><b>Sale finalised</b><br />A sale was finalised by the sales core.</div> + </div> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/examples/gantt.html b/schall/static/RGraph/examples/gantt.html new file mode 100644 index 0000000..2e9bbaf --- /dev/null +++ b/schall/static/RGraph/examples/gantt.html @@ -0,0 +1,189 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - gantt charts</title> + + <meta name="keywords" content="rgraph html5 canvas example gantt charts" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Gantt charts examples" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js" ></script> + <script src="../libraries/RGraph.common.tooltips.js" ></script> + <script src="../libraries/RGraph.gantt.js" ></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + + <style> + .RGraph_tooltip { + color: #00a ! important; + } + + .RGraph_tooltip b { + color: black ! important; + } + </style> + + <script> + window.onload = function () + { + var gantt1 = new RGraph.Gantt('gantt1'); + gantt1.Set('chart.xmax', 122); + gantt1.Set('chart.gutter.right', 35); + gantt1.Set('chart.labels', ['January', 'February', 'March', 'April']); + gantt1.Set('chart.title', 'Work schedule for Xyz Ltd'); + gantt1.Set('chart.defaultcolor', '#faa'); + gantt1.Set('chart.background.grid', false); + + if (!RGraph.isIE8()) { + gantt1.Set('chart.tooltips', ["<b>Richard Crenshaw</b><br />Working through adding something<br /> to the website.", + null, + "<b>Rachel Higgenbottom</b><br />Singing sweetly", + "<b>Rachel Higgenbottom(2)</b><br />Still singing very nicely", + "<b>Fred Bloggs</b><br />Building a new drive", + "<b>Barney Rubble</b><br />Not started adding the new garden", + "<b>Gloria Crockford</b><br />Just started dinner", + "<b>Paul Josford</b><br />Nearly finished the front garden", + "<b>Harry Secjom</b><br />Roughly half way through the book reading", + "<b>Shane Ritchford</b><br />Comedian", + "<b>Kyle Jasford</b><br />Gardening", + "<b>Cynthia Frances</b><br />Not entirely sure what she's doing", + "<b>Mabel Mincy</b><br />Making more lunches", + "<b>Paul MacFord</b><br />Putting everyone off their work", + "<b>Kiffen Longbottom</b><br />Farming Maize", + "<b>John Blussford</b><br />A deer"]); + gantt1.Set('chart.tooltips.effect', 'expand'); + } + + gantt1.Set('chart.events', [ + [[31, 28, 67, 'Richard'], [90,15, 50, null, 'blue', 'red']], + [[0, 28, 50, 'Rachel'], [80,25, 74]], + [12, 28, 45, 'Fred'], + [59, 14, 0, 'Barney'], + [59, 21, 5, 'Gloria'], + [46, 31, 92, 'Paul'], + [80, 21, 46, 'Harry'], + [94, 17, 84, 'Shane'], + [34, 14, 32, 'Kyle'], + [64, 14, 28, 'Cynthia'], + [13, 61, 74, 'Mabel'], + [84, 31, 16, 'Paul'], + [100, 22, 45, 'Kiffen'], + [0, 365, 50, 'John'] + ]); + var color = 'rgba(192,255,192,0.5)'; + gantt1.Set('chart.vbars', [ + [0, 10, color], + [20, 10, color], + [40, 10, color], + [60, 10, color], + [80, 10, color], + [100, 10, color] + ]); + gantt1.Set('chart.borders', false); + gantt1.Set('chart.title.vpos', 0.6); + gantt1.Draw(); + } + </script> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> +</head> +<body> + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + +<div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="./index.html">Examples</a> + > + Gantt charts +</div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - Gantt charts</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + <div> + <p> + Gantt charts are used to show scheduling information. It is commonly used in project management but can also be used, + for example, to show holiday schedule information. In this case it would be easy to see when someone is unavailable. + The Gantt chart can have clickable bars that can be used to provide more detail. It can also show vertical bars + that can be used to indicate events, or as in the cases below, can be decorative. + </p> + + <p> + The chart is made of "units", in this case 365. This represents days in a year. The labels are separate, being equally + spaced across the chart. This means you can use more meaningful labels, which are easier to comprehend. As in the + example charts. + </p> + </div> + + <div> + <ul> + <li><a href="../docs/gantt.html">Gantt chart API documentation</a></li> + </ul> + </div> + + <div style="text-align: center"> + <canvas id="gantt1" width="900" height="300">[No canvas support]</canvas> + </div> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/examples/gauge.html b/schall/static/RGraph/examples/gauge.html new file mode 100644 index 0000000..beb8659 --- /dev/null +++ b/schall/static/RGraph/examples/gauge.html @@ -0,0 +1,146 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - Gauge charts</title> + + <meta name="keywords" content="rgraph html5 canvas example gauge charts" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Gauge charts examples" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js" ></script> + <script src="../libraries/RGraph.common.effects.js" ></script> + <script src="../libraries/RGraph.gauge.js" ></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + + <script> + window.onload = function () + { + var gauge1 = new RGraph.Gauge('gauge1', 0, 100, 16); + gauge1.Set('chart.title', 'CPU'); + gauge1.Draw(); + + var gauge2 = new RGraph.Gauge('gauge2', 20, 40, 37); + gauge2.Set('chart.title', 'Bandwidth'); + gauge2.Set('chart.units.post', 'M'); + RGraph.Effects.Gauge.Grow(gauge2); + + function ChangeGauge () + { + gauge1.value = RGraph.random(0,100); + RGraph.Effects.Gauge.Grow(gauge1); + } + setInterval(ChangeGauge, 5000) + + var gauge3 = new RGraph.Gauge('gauge3', 0, 100, 84); + gauge3.Set('chart.title', 'Memory Usage'); + gauge3.Set('chart.units.post', '%'); + gauge3.Set('chart.scale.decimals', 0); + gauge3.Draw(); + } + </script> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> +</head> +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - Gauge charts</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + + <div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="./index.html">Examples</a> + > + Gauge + </div> + + <div> + <p> + Gauges are another meter variant that may be more suited to your websites design. The Gauges below show how you + could hook them up to some AJAX to get constantly updated gauges. The Gauges below are simply on a timer along + with some random numbers. + </p> + + <p></p> + </div> + + <div> + <ul> + <li><a href="../docs/gauge.html">Gauge charts API documentation</a></li> + </ul> + </div> + + <div style="text-align: center"> + <canvas id="gauge1" width="250" height="250"><div class="canvasfallback">[No canvas support]</div></canvas> + + <canvas id="gauge2" width="250" height="250"><div class="canvasfallback">[No canvas support]</div></canvas> + + <canvas id="gauge3" width="250" height="250">[No canvas support]</canvas> + </script> + </div> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/examples/hbar.html b/schall/static/RGraph/examples/hbar.html new file mode 100644 index 0000000..0e5bbaf --- /dev/null +++ b/schall/static/RGraph/examples/hbar.html @@ -0,0 +1,139 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - horizontal bar charts</title> + + <meta name="keywords" content="rgraph html5 canvas example horizontal bar charts" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Horizontal Bar charts example" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js" ></script> + <script src="../libraries/RGraph.common.tooltips.js" ></script> + <script src="../libraries/RGraph.common.effects.js" ></script> + <script src="../libraries/RGraph.hbar.js" ></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + + <script> + /** + * The onload function creates the chart + */ + window.onload = function () + { + + var hbar1 = new RGraph.HBar('hbar1', [55.11, 21.63, 11.94, 7.15, 2.14, 1.11, 0.91]); + + var grad = hbar1.context.createLinearGradient(275,0,900, 0); + grad.addColorStop(0, 'white'); + grad.addColorStop(1, 'blue'); + + hbar1.Set('chart.strokestyle', 'rgba(0,0,0,0)'); + hbar1.Set('chart.gutter.left', 275); + hbar1.Set('chart.gutter.right', 10); + hbar1.Set('chart.background.grid.autofit', true); + hbar1.Set('chart.title', 'Browser usage (NetApps) in May 2011'); + hbar1.Set('chart.labels', ['Microsoft Internet Explorer (55.11%)','Mozilla Firefox (21.63%)', 'Google Chrome (11.94)','Apple Safari (7.15%)','Opera (2.14%)','Opera Mini (1.11)','Other (0.91%)']); + hbar1.Set('chart.shadow', true); + hbar1.Set('chart.shadow.color', 'gray'); + hbar1.Set('chart.shadow.offsetx', 0); + hbar1.Set('chart.shadow.offsety', 0); + hbar1.Set('chart.shadow.blur', 15); + hbar1.Set('chart.colors', [grad]); + + if (RGraph.isIE8()) { + hbar1.Draw(); + } else { + RGraph.Effects.HBar.Grow(hbar1); + } + } + </script> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> +</head> +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + <div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="./index.html">Examples</a> + > + Horizontal Bar charts + </div> + + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - Horizontal bar charts</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + <p> + A horizontal bar chart can be useful when your labels are too big for regular bar charts. + </p> + + <ul> + <li><a href="../docs/hbar.html">The API documentation</a></li> + </ul> + + <a name="gutter-example"></a> + <canvas id="hbar1" width="900" height="400">[No canvas support]</canvas> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/examples/hprogress.html b/schall/static/RGraph/examples/hprogress.html new file mode 100644 index 0000000..ddef02c --- /dev/null +++ b/schall/static/RGraph/examples/hprogress.html @@ -0,0 +1,133 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - horizontal progress bar</title> + + <meta name="keywords" content="rgraph html5 canvas example horizontal progress bar" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Horizontal Progress Bar example" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js"></script> + <script src="../libraries/RGraph.common.tooltips.js" ></script> + <script src="../libraries/RGraph.hprogress.js"></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + + + <script> + window.onload = function () + { + var data = [59.65, 22.96, 7.98, 5.27, 4.09]; + var progress1 = new RGraph.HProgress('progress1',data, 100); + progress1.Set('chart.colors', ['blue', 'red', 'yellow', 'green','black']); + progress1.Set('chart.key', ['Microsoft Internet Explorer (59.65%)', 'Mozilla Firefox (22.96%)', 'Google Chrome (7.98%)', 'Apple Safari (5.27%)','Other (4.09%)']); + progress1.Set('chart.tooltips', ['Microsoft Internet Explorer (59.65%)', 'Mozilla Firefox (22.96%)', 'Google Chrome (7.98%)', 'Apple Safari (5.27%)','Other (4.09%)']); + progress1.Set('chart.units.post', '%'); + progress1.Set('chart.tickmarks.zerostart', true); + progress1.Draw(); + } + </script> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> +</head> +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + +<div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="./index.html">Examples</a> + > + Horizontal Progress bar +</div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - Horizontal Progress bar</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + <p> + This is a Progress Bar for showing state. You can show anything with it - use it to show load on your server, + or percentage space free on your servers disk drive. You could even incorporate it with some AJAX to retrieve status information + from your webserver dynamically, making the Progress Bar realtime. To redraw the progress bar simply call <i>RGraph.Clear()</i> + (which clears the canvas) and then call <i>myProgress.Draw()</i> again. + </p> + + <p> + The colours, title and scale are configurable, allowing you to represent a wide range of values. + </p> + + <div> + <ul> + <li><a href="../docs/hprogress.html">Horizontal Progress bar API documentation</a></li> + <li><a href="vprogress.html">Vertical progress bar</a></li> + </ul> + </div> + + + <div style="text-align: center"> + <b>Browser market share in September (custom highlight)</b> + <canvas id="progress1" width="1000" height="80">[No canvas support]</canvas> + </div> + + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/examples/index.html b/schall/static/RGraph/examples/index.html new file mode 100644 index 0000000..7543a9a --- /dev/null +++ b/schall/static/RGraph/examples/index.html @@ -0,0 +1,182 @@ +<!DOCTYPE html> +<!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ +--> +<html> +<head> + <title>RGraph: HTML5 Javascript charts library - example charts</title> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <meta name="keywords" content="rgraph charts html5 javascript charts canvas" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - examples" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js" ></script> + <script src="../libraries/RGraph.common.effects.js" ></script> + <script src="../libraries/RGraph.rose.js" ></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> + + <script> + window.onload = function () + { + var rose1 = new RGraph.Rose('cvs', [41,37,16,3,3,45,26,25,24,12,34,60,36,24,23,22]); + rose1.Set('chart.colors.alpha', 0.5); + rose1.Set('chart.colors', ['#0c0', 'red']); + rose1.Set('chart.gutter.top', 30); + rose1.Set('chart.margin', 2); + rose1.Set('chart.labels', ['Bev','Ben','Violet','Olga','Wez','Tristan','Hoolio','Nevil','Gary','Pete','Lou','Jim','Rich','Dave','Kevin','Jamie']); + + if (!RGraph.isIE8()) { + rose1.Set('chart.tooltips', ['Bev','Ben','Violet','Olga','Wez','Tristan','Hoolio','Nevil','Gary','Pete','Lou','Jim','Rich','Dave','Kevin','Jamie']); + } + + RGraph.isIE8() ? rose1.Draw() : RGraph.Effects.Rose.Grow(rose1); + } + + </script> +</head> +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + +<div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + Example charts +</div> + +<h1>RGraph: <span>HTML5 Javascript charts library</span> - Example charts</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + <div style="text-align: center"> + <div class="warning" style="display: inline; display: inline-block"> + Need something that RGraph doesn't currently support? RGraph license holders can usually be accomodated - please + <a href="mailto:licensing@rgraph.net"><b>contact support</b></a> to discuss your requirements. + </div> + </div> + +<p> + The following HTML5 examples are available. The charts are made with the HTML5 canvas tag so they're quick to load and interactive. +</p> + +<div style="float: right; text-align: center; width: 430px"> + <b>A Rose chart of sales statistics</b> + <canvas id="cvs" width="430" height="400" style="margin-right: 100px">[No canvas support]</canvas> +</div> +</div> + + <div style="width: 600px"> + <div style="float: left; width: 275px"> + <h4>Bar, Line and Pie charts</h4> + <ul> + <li><a href="bar.html">Bar charts</a></li> + <li><a href="bipolar.html">Bi-polar charts</a></li> + <li><a href="hbar.html">Horizontal Bar charts</a></li> + <li><a href="line.html">Line charts</a></li> + <li><a href="pie.html">Pie charts</a></li> + <li><a href="donut.html">Donut charts</a></li> + </ul> + + <h4>Planning and management charts</h4> + <ul> + <li><a href="gantt.html">Gantt charts</a></li> + <li><a href="funnel.html">Funnel charts</a></li> + <li><a href="waterfall.html">Waterfall charts</a></li> + </ul> + </div> + <div style="float: left; width: 275px"> + <h4>Meters and gauges</h4> + <ul> + <li><a href="fuel.html">Fuel gauges</a></li> + <li><a href="gauge.html">Gauge charts</a></li> + <li><a href="hprogress.html">Horizontal progress bar</a></li> + <li><a href="meter.html">Meter charts</a></li> + <li><a href="odo.html">Odometer charts</a></li> + <li><a href="thermometer.html">Thermometer charts</a></li> + <li><a href="vprogress.html">Vertical progress bar</a></li> + </ul> + + <h4>Other chart types</h4> + <ul> + <li><a href="led.html">LED grid</a></li> + <li><a href="radar.html">Radar charts</a></li> + <li><a href="rscatter.html">Radial scatter charts</a></li> + <li><a href="rose.html">Rose charts</a></li> + <li><a href="scatter.html">Scatter charts</a></li> + </ul> + </div> + </div> + +<h4>Basic examples</h4> + +<ul> + <li><a href="basic.html">A basic example (for implementation help)</a></li> + <li><a href="../docs/basic_tooltips.html">A basic example of charts in tooltips</a></li> + <li><a href="../docs/basic_combined.html">A basic example of a combined Bar & Line chart</a></li> +</ul> + + <h4>More examples</h4> + + <p> + There are more usage examples as well as a few general HTML5 examples in the <a href="../docs/index.html">documentation</a>. + </p> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/examples/led.html b/schall/static/RGraph/examples/led.html new file mode 100644 index 0000000..c7b0311 --- /dev/null +++ b/schall/static/RGraph/examples/led.html @@ -0,0 +1,121 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - LED grid</title> + + <meta name="keywords" content="rgraph html5 canvas example led grid" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - LED grid example" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js" ></script> + <script src="../libraries/RGraph.led.js" ></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + + <script> + window.onload = function () + { + var led1 = new RGraph.LED('led1', 'an led display'); + led1.Set('chart.zoom.hdir', 'center'); + led1.Set('chart.zoom.vdir', 'center'); + led1.Set('chart.light', 'red'); + led1.Draw(); + } + </script> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> +</head> +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + +<div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="./index.html">Examples</a> + > + LED Grid +</div> + +<h1>RGraph: <span>HTML5 Javascript charts library</span> - LED Grid</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + <p> + An LED grid, that could be used to show a multitude of things. Could be used as a website counter for example. + It supports the A-Z, 0-9 and space characters. As you can see the colors are also user-definable. It also + supports the context menu, and therefore the zoom. The first LED grid demonstrates this. + </p> + + <div> + <ul> + <li><a href="../docs/led.html">LED Grid API documentation</a></li> + </ul> + </div> + + <div style="width: 50%; margin-left: 250px; text-align: center"> + <canvas id="led1" width="500" height="60">[No canvas support]</canvas> + </div> + + <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/examples/line.html b/schall/static/RGraph/examples/line.html new file mode 100644 index 0000000..7899448 --- /dev/null +++ b/schall/static/RGraph/examples/line.html @@ -0,0 +1,175 @@ +<!DOCTYPE html > +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - line charts</title> + + <meta name="keywords" content="rgraph html5 canvas example line chart" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Line chart example" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js" ></script> + <script src="../libraries/RGraph.common.context.js" ></script> + <script src="../libraries/RGraph.common.annotate.js" ></script> + <script src="../libraries/RGraph.common.tooltips.js" ></script> + <script src="../libraries/RGraph.common.zoom.js" ></script> + <script src="../libraries/RGraph.common.effects.js" ></script> + <script src="../libraries/RGraph.line.js" ></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" ></script> + + <script> + window.onload = function () + { + var line1 = new RGraph.Line('line1', [56,45,43,52,56,65,21,23,34,15,21,-12,-13,-31,-25], [35,43,41,41,42,46,42,39,46,41,45,65,54,54,41,41]); + line1.Set('chart.background.grid', true); + line1.Set('chart.linewidth', 5); + line1.Set('chart.gutter.left', 35); + line1.Set('chart.hmargin', 5); + if (RGraph.isIE9up()) { + line1.Set('chart.shadow', true); + } + line1.Set('chart.tickmarks', null); + line1.Set('chart.units.post', 'k'); + line1.Set('chart.xticks', 8); + line1.Set('chart.colors', ['red', 'green']); + line1.Set('chart.key', ['Sales (not good)','Costs (reasonably consistent)']); + line1.Set('chart.key.shadow', true); + line1.Set('chart.key.shadow.offsetx', 0); + line1.Set('chart.key.shadow.offsety', 0); + line1.Set('chart.key.shadow.blur', 15); + line1.Set('chart.key.shadow.color', '#ddd'); + line1.Set('chart.key.rounded', true); + line1.Set('chart.key.position', 'graph'); + line1.Set('chart.key.position.x', line1.Get('chart.gutter.left') + 4); + line1.Set('chart.key.position.y', (line1.canvas.height / 2) + 5); + line1.Set('chart.xaxispos', 'center'); + line1.Set('chart.background.grid.autofit', true); + line1.Set('chart.background.grid.autofit.numhlines', 10); + line1.Set('chart.title', 'Sales last year'); + line1.Set('chart.curvy', true); + line1.Set('chart.curvy.factor', 0.25); + line1.Set('chart.animation.unfold.x', true); + line1.Set('chart.animation.unfold.y',true); + line1.Set('chart.animation.unfold.initial',0); // Default is 2 + RGraph.Effects.Line.Unfold(line1); + + var line2 = new RGraph.Line('line2', [6,5,4,5,6,4,1,2,3], [7,8,9,9,8,7,8,7,6]); + line2.Set('chart.labels', ['13th','14th','15th','16th','15th','16th','17th','18th','19th']); + line2.Set('chart.title', 'Range of fuel consumption'); + line2.Set('chart.title.vpos', 0.5); + line2.Set('chart.background.grid.autofit.align', true); + line2.Set('chart.filled', true); + line2.Set('chart.filled.range', true); + line2.Set('chart.fillstyle', 'rgba(128,255,128,0.5)'); + line2.Set('chart.linewidth', 2); + line2.Set('chart.colors', ['green']); + line2.Set('chart.hmargin', 5); + line2.Set('chart.gutter.left', 50); + //line2.Draw(); + RGraph.Effects.Line.jQuery.Trace(line2); + } + </script> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> + +</head> +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + +<div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="./index.html">Examples</a> + > + Line chart +</div> + +<h1>RGraph: <span>HTML5 Javascript charts library</span> - Line charts</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + <div> + <p> + Like Bar charts, Line charts are some of the most versatile chart types. It is similar, but can indicate chronological + data better. Line charts are good if, for example, you want to illustrate sales figures over a year (or any period of + time). You'll then be able to easily see whether sales are going up, down or are stagnant. It will also become apparent + which months are busier than others. By using a multiple line chart you can add multiple sets of data (eg two or more years + of figures) to your chart. You can customise the line chart by stipulating it as being filled, having drop shadows, keys, + having the X axis in the centre, different colors, different tickmark styles and tooltips etc. + </p> + + <div> + <ul> + <li><a href="../docs/line.html">Line charts API documentation</a></li> + </ul> + </div> + + <div> + <canvas id="line1" width="475" height="250">[Please wait...]</canvas> + <canvas id="line2" width="475" height="250">[Please wait...]</canvas> + </div> + </div> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/examples/meter.html b/schall/static/RGraph/examples/meter.html new file mode 100644 index 0000000..9c6f172 --- /dev/null +++ b/schall/static/RGraph/examples/meter.html @@ -0,0 +1,178 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - meter charts</title> + + <meta name="keywords" content="rgraph html5 canvas example meter charts" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Meter charts examples" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js" ></script> + <script src="../libraries/RGraph.common.effects.js" ></script> + <script src="../libraries/RGraph.common.context.js" ></script> + <script src="../libraries/RGraph.common.annotate.js" ></script> + <script src="../libraries/RGraph.common.tooltips.js" ></script> + <script src="../libraries/RGraph.common.zoom.js" ></script> + <script src="../libraries/RGraph.common.resizing.js" ></script> + <script src="../libraries/RGraph.meter.js" ></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + + <script> + window.onload = function () + { + var min = 0; + var max = 100; + + var meter1 = new RGraph.Meter('meter1', min, max, RGraph.random(min, max)); + + var grad1 = meter1.context.createRadialGradient(meter1.canvas.width / 2,meter1.canvas.height - 25,0,meter1.canvas.width / 2,meter1.canvas.height - 25,200); + grad1.addColorStop(0, 'green'); + grad1.addColorStop(1, 'white'); + + var grad2 = meter1.context.createRadialGradient(meter1.canvas.width / 2, meter1.canvas.height - 25,0,meter1.canvas.width / 2, meter1.canvas.height - 25,200); + grad2.addColorStop(0, 'yellow'); + grad2.addColorStop(1, 'white'); + + var grad3 = meter1.context.createRadialGradient(meter1.canvas.width / 2, meter1.canvas.height - 25,0,meter1.canvas.width / 2, meter1.canvas.height - 25,200); + grad3.addColorStop(0, 'red'); + grad3.addColorStop(1, 'white'); + + meter1.Set('chart.labels.position', 'inside'); + meter1.Set('chart.title', 'A sample measurement'); + meter1.Set('chart.title.vpos', 0.5); + meter1.Set('chart.title.color', 'black'); + meter1.Set('chart.green.color', grad1); + meter1.Set('chart.yellow.color', grad2); + meter1.Set('chart.red.color', grad3); + meter1.Set('chart.border', false); + meter1.Set('chart.needle.linewidth', 5); + meter1.Set('chart.needle.tail', true); + meter1.Set('chart.tickmarks.big.num', 0); + meter1.Set('chart.tickmarks.small.num', 0); + meter1.Set('chart.segment.radius.start', 100); + meter1.Set('chart.needle.radius', 80); + meter1.Set('chart.needle.linewidth', 2); + meter1.Set('chart.linewidth.segments', 15); + meter1.Set('chart.strokestyle', 'white'); + meter1.Set('chart.text.size', 14); + RGraph.Effects.Meter.Grow(meter1); + //meter1.Draw(); + setInterval(function () + { + meter1.value = RGraph.random(min,max); + RGraph.Effects.Meter.Grow(meter1); + }, 5000) + + var meter2 = new RGraph.Meter('meter2', 0, 10, 5); + meter2.Set('chart.units.post', 'kg'); + meter2.Set('chart.red.start', 0); + meter2.Set('chart.red.end', 3); + meter2.Set('chart.yellow.start', 3); + meter2.Set('chart.yellow.end', 6); + meter2.Set('chart.green.start', 6); + meter2.Set('chart.green.end', 10); + meter2.Draw(); + } + </script> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> +</head> +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - Meter charts</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + + <div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="./index.html">Examples</a> + > + Meter + </div> + + <div> + <p> + Meter charts are similar to Odometer charts albeit only a semi-circle and not a full circle. It can be better when trying illustrate + a particular level, but only have a limited amount of space. It could also be quite effective as part of a control panel. + </p> + + <p></p> + </div> + + <div> + <ul> + <li><a href="../docs/meter.html">Meter charts API documentation</a></li> + </ul> + </div> + + <div style="text-align: center"> + <canvas id="meter1" width="400" height="250"><div class="canvasfallback">[No canvas support]</div></canvas> + + <canvas id="meter2" width="400" height="250"><div class="canvasfallback">[No canvas support]</div></canvas> + </div> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/examples/odo.html b/schall/static/RGraph/examples/odo.html new file mode 100644 index 0000000..8c582d0 --- /dev/null +++ b/schall/static/RGraph/examples/odo.html @@ -0,0 +1,173 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - odometer charts</title> + + <meta name="keywords" content="rgraph html5 canvas example odometer charts" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Odometer charts example" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js" ></script> + <script src="../libraries/RGraph.odo.js" ></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + + <script> + window.onload = function () + { + // ID, MINIMUM, MAXIMUM, INDICATED VALUE + var odo1 = new RGraph.Odometer('odo1', 0, 12,9.5); + odo1.Set('chart.labels', ['12', '1','2','3','4','5','6','7','8','9','10','11']); + odo1.Set('chart.needle.thickness', 5); + odo1.Set('chart.needle.color', 'black'); + odo1.Set('chart.needle.extra', [[6, 'black', 50]]); + odo1.Set('chart.needle.head', false); + odo1.Set('chart.label.area', 40); + odo1.Set('chart.shadow.outer', true); + odo1.Set('chart.needle.tail', false); + + odo1.Set('chart.green.color', 'gray'); + odo1.Set('chart.yellow.color', 'gray'); + odo1.Set('chart.red.color', 'gray'); + + RGraph.AddCustomEventListener(odo1, 'ondraw', + function (obj) + { + var context = obj.context; + context.strokeStyle = 'black'; + context.fillStyle = 'white'; + context.beginPath(); + context.moveTo(obj.centerx, obj.centery); + context.arc(obj.centerx, obj.centery, 10, 0, 6.28, 0); + context.stroke(); + context.fill(); + } + ); + + odo1.Draw(); + + var odo2 = new RGraph.Odometer('odo2', 0, 360, 56); + odo2.Set('chart.needle.color', 'black'); + odo2.Set('chart.needle.tail', false); + odo2.Set('chart.label.area', 35); + odo2.Set('chart.border', RGraph.isIE8() ? false : true); + odo2.Set('chart.labels', ['N','NE','E','SE','S','SW','W','NW']); + odo2.Set('chart.red.min', 360); + odo2.Set('chart.red.color', 'gray'); + odo2.Set('chart.value.text', true); + odo2.Set('chart.value.units.post', '°'); + odo2.Draw(); + + + var odo3 = new RGraph.Odometer('odo3',0, 200, 160); + odo3.Set('chart.green.max', 150); + odo3.Set('chart.red.min', 175); + odo3.Set('chart.shadow.inner', true); + odo3.Set('chart.value.text', true); + odo3.Set('chart.value.units.post', ' litres'); + odo3.Draw(); + } + </script> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> +</head> +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - Odometer charts</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + + <div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="./index.html">Examples</a> + > + Odometer charts + </div> + + <div> + <p> + Odometer charts can be used to provide an indication of a particular value. For example you could easily use them to + represent values for a control panel that shows information about a server. Odometer charts indicating how much disk + space is used for example, would be more visual than a simple number. + </p> + + <p> + The green, yellow and red areas are configurable, allowing you to add some level of urgency into your figures + (as are the colors). The + figures are also configurable, so it can go from 0-10, or from 0-100. + </p> + </div> + + <div> + <ul> + <li><a href="../docs/odo.html">Odometer charts API documentation</a></li> + </ul> + </div> + + <canvas id="odo1" width="300" height="300">[No canvas support]</canvas> + <canvas id="odo2" width="300" height="300">[No canvas support]</canvas> + <canvas id="odo3" width="300" height="300">[No canvas support]</canvas> +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/examples/pie.html b/schall/static/RGraph/examples/pie.html new file mode 100644 index 0000000..e8bf4bf --- /dev/null +++ b/schall/static/RGraph/examples/pie.html @@ -0,0 +1,170 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - pie charts</title> + + <meta name="keywords" content="rgraph html5 canvas example pie charts" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Pie charts example" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js" ></script> + <script src="../libraries/RGraph.common.tooltips.js" ></script> + <script src="../libraries/RGraph.common.effects.js" ></script> + <script src="../libraries/RGraph.pie.js" ></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + + <script> + window.onload = function () + { + /** + * These are not angles - these are values. The appropriate angles are calculated + */ + var pie1 = new RGraph.Pie('pie1', [41,37,16,6]); // Create the pie object + pie1.Set('chart.labels', ['MSIE 7 (41%)', 'MSIE 6 (37%)', 'Firefox (16%)', 'Safari (3%)']); + //pie1.Set('chart.labels.sticks', true); + pie1.Set('chart.gutter.left', 30); + pie1.Set('chart.gutter.right', 30); + pie1.Set('chart.gutter.top', 35); + pie1.Set('chart.gutter.bottom', 35); + pie1.Set('chart.title', "Browser share"); + pie1.Set('chart.title.vpos', 0.3); + pie1.Set('chart.shadow', false); + pie1.Set('chart.tooltips.effect', 'fade'); + pie1.Set('chart.tooltips.event', 'onmousemove'); + pie1.Set('chart.tooltips', pie1.Get('chart.labels')); + pie1.Set('chart.highlight.style', '2d'); + pie1.Set('chart.linewidth', 2); + pie1.Set('chart.strokestyle', 'white'); + pie1.Set('chart.shadow', true); + pie1.Set('chart.shadow.offsetx', 0); + pie1.Set('chart.shadow.offsety', 0); + pie1.Set('chart.shadow.blur', 15); + pie1.Draw(); + + var pie2 = new RGraph.Pie('pie2', [12,29,45,17,7]); // Create the pie object + pie2.Set('chart.gutter.left', 45); + pie2.Set('chart.colors', ['red', 'pink', '#6f6', 'blue', 'yellow']); + pie2.Set('chart.key', ['John (2%)', 'Richard (29%)', 'Fred (45%)', 'Brian (17%)', 'Peter (7%)']); + pie2.Set('chart.key.background', 'white'); + pie2.Set('chart.strokestyle', 'white'); + pie2.Set('chart.linewidth', 3); + pie2.Set('chart.exploded', [10,10,10,20,20]); + pie2.Set('chart.shadow', true); + pie2.Set('chart.shadow.offsetx', 0); + pie2.Set('chart.shadow.offsety', 0); + pie2.Set('chart.shadow.blur', 25); + + if (RGraph.isIE8()) { + pie2.Draw(); + } else { + RGraph.Effects.Pie.RoundRobin(pie2); + } + } + </script> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> +</head> +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + +<div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="./index.html">Examples</a> + > + Pie chart +</div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - Pie charts</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + <div> + + <p> + Pie charts can be used when you need to represent a value as part of a whole. It is commonly used to represent percentages, + relative magnitudes or relative frequencies. If your intent is to compare a particular value (slice) against the whole of + the Pie chart, then it can be quite effective. If however you want to compare two seperate segments, then it can get + more difficult. If this is the case, you may want to consider a bar chart for example. + </p> + + <p> + The colours can be customised, as can the borders (using the same color as the background and a line width of + about 5 gives the effect of segment separation. The chart can also have a drop shadow if you want one, but this shouldn't + be used in conjunction with segment seperation. + </p> + </div> + + <div> + <ul> + <li><a href="../docs/pie.html">Pie charts API documentation</a></li> + </ul> + </div> + + <div style="text-align: center"> + <canvas id="pie1" width="450" height="300">[No canvas support]</canvas> + <canvas id="pie2" width="450" height="300">[No canvas support]</canvas> + </div> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/examples/radar.html b/schall/static/RGraph/examples/radar.html new file mode 100644 index 0000000..7b0a8a0 --- /dev/null +++ b/schall/static/RGraph/examples/radar.html @@ -0,0 +1,193 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + + <title>RGraph: HTML5 Javascript charts library - Radar charts</title> + + <meta name="keywords" content="rgraph html5 canvas example radar charts" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Radar charts" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js" ></script> + <script src="../libraries/RGraph.common.context.js" ></script> + <script src="../libraries/RGraph.common.annotate.js" ></script> + <script src="../libraries/RGraph.common.tooltips.js" ></script> + <script src="../libraries/RGraph.common.zoom.js" ></script> + <script src="../libraries/RGraph.radar.js" ></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + + <script> + window.onload = function () + { + if (RGraph.isIE8()) { + ShowGraph1(); + ShowGraph2(); + ShowGraph3(); + } + } + + function ShowGraph1 () + { + var radar1 = new RGraph.Radar('radar5', [43,84,54,64,34,21,21], [52,30,51,41,22,23,56]); + radar1.Set('chart.colors', ['rgba(255,0,0,0.3)']); + radar1.Set('chart.labels.axes', 'n'); + radar1.Set('chart.circle', 50); + radar1.Set('chart.circle.fill', 'rgba(0, 0, 255, 0.3)'); + radar1.Set('chart.tooltips', [ + 'Dave (43)', 'John (84)', 'Kiffen (54)', 'Peter (64)', 'Lou (34)', 'Igor (21)', 'John (21)', + 'Dave (52)', 'John (30)', 'Kiffen (51)', 'Peter (41)', 'Lou (22)', 'Igor (23)', 'John (56)', + ]); + radar1.Set('chart.colors', ['green', 'red']); + radar1.Set('chart.colors.alpha', 0.5); + radar1.Set('chart.title', 'The results of the competition'); + radar1.Set('chart.labels', ['Dave (43)', 'John (84)', 'Kiffen (54)', 'Peter (64)', 'Lou (34)', 'Igor (21)', 'John (21)']); + radar1.Set('chart.tooltips.effect', 'fade'); + radar1.Draw(); + } + + function ShowGraph2 () + { + var radar = new RGraph.Radar('radar2', [7,6,6,7,8], [6,7,7,6,6], [4,5,6,10,4]); + radar.Set('chart.strokestyle', 'black'); + radar.Set('chart.colors.alpha', 0.3); + radar.Set('chart.colors', ['red', 'green', 'yellow']); + radar.Set('chart.title', 'Multiple datasets, key'); + radar.Set('chart.tooltips.effect', 'snap'); + radar.Set('chart.tooltips', [ + 'Pete in 2000','Lou in 2000','Jim in 2000','Jack in 2000','Fred in 2000', + 'Pete in 2001','Lou in 2001','Jim in 2001','Jack in 2001','Fred in 2001', + 'Pete in 2002','Lou in 2002','Jim in 2002','Jack in 2002','Fred in 2002' + ]); + radar.Set('chart.key', ['2000','2001','2002']); + radar.Set('chart.key.position', 'graph'); + radar.Set('chart.labels', ['Pete','Lou','Jim','Jack','Fred']); + radar.Set('chart.gutter.top', 35); + radar.Draw(); + } + </script> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> +</head> +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + +<div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="./index.html">Examples</a> + > + Radar charts +</div> + +<h1>RGraph: <span>HTML5 Javascript charts library</span> - Radar charts</h1> + + <div style="background-color: #ffb; border: 2px dashed #000; padding: 3px"> + This chart used to be called the Tradar chart (T standing for "Traditional" - there used to be two Radar charts in RGraph), + however now (July 2011), it has been renamed to the "Radar" chart to make it easier for people to identify. If you use it + you will need to update your code accordingly. Keep in mind that if you use the .type property - this has been updated too + (to <i>radar</i>). + </div> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + <div style="float: right; width: 450px"> + </div> + + <p> + Radar charts, that are similar to Rose charts. Each of the data points is + arranged equally in terms of angle, whilst the magnitude of each point is shown by the distance from the centre. Thus, + data points of a higher magnitude can be seen as they are more distant from the centre. + </p> + + <p> + Suitable for many datasets, but not all. If not, then Rose charts may be more apt. + </p> + + <p> + The circle, as can be seen in the second example, could be used to indicate a threshold of sorts. In the example, + it could be minimum sales required for a particular month. Months that fall below this threshold can be clearly seen. + </p> + + <div> + <ul> + <li><a href="../docs/radar.html">Radar charts API documentation</a></li> + <li><a href="rose.html">Rose charts examples</a></li> + </ul> + </div> + + <div> + <canvas id="radar2" width="450" height="300">[No canvas support]</canvas> + <canvas id="radar5" width="450" height="300">[No canvas support]</canvas> + </div> + + + + <script> + if (!RGraph.isIE8()) { + ShowGraph1(); + ShowGraph2(); + } + </script> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/examples/rose.html b/schall/static/RGraph/examples/rose.html new file mode 100644 index 0000000..3726b19 --- /dev/null +++ b/schall/static/RGraph/examples/rose.html @@ -0,0 +1,145 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - rose charts</title> + + <meta name="keywords" content="rgraph html5 canvas example rose charts" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Rose charts example" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js" ></script> + <script src="../libraries/RGraph.common.tooltips.js" ></script> + <script src="../libraries/RGraph.common.effects.js" ></script> + <script src="../libraries/RGraph.rose.js" ></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + + <script> + window.onload = function () + { + var rose1 = new RGraph.Rose('rose3', [[4,5,2],[3,5,4],[2,9,4],[1,8,5],[3,6,7],[4,8,5],[6,5,8],[6,9,8]]); + + // Rose chart now supports functions as tooltips + rose1.Set('chart.tooltips', + function (index) + { + if (index % 3 == 0) { + return 'Julie'; + } else if (index % 3 == 1) { + return 'Frederick'; + } else if (index % 3 == 2) { + return 'Jobe'; + } + } + ); + rose1.Set('chart.colors.alpha', 0.5); + rose1.Set('chart.labels', ['NE','E','SE','S','SW','W','NW','']); + rose1.Set('chart.labels.position', 'edge'); + rose1.Set('chart.margin', 5); + //rose1.Draw(); + RGraph.Effects.Rose.Grow(rose1); + + var rose2= new RGraph.Rose('rose4', [[45,75],[45,23],[45,26],[78,4],[49,12],[49,21],[40,18],[48,12],[43,23],[45,12]]); + rose2.Set('chart.colors.alpha', 0.5); + rose2.Set('chart.colors.sequential', true); + rose2.Set('chart.labels', ['Fred','Julie','Denise','Cynthia','Peter','Wez','Noddy','James','Jimmy','Craig']); + rose2.Set('chart.labels.position', 'edge'); + rose2.Set('chart.variant', 'non-equi-angular'); + rose2.Set('chart.tooltips', ['Fred','Julie','Denise','Cynthia','Peter','Wez','Noddy','James','Jimmy','Craig']); + rose2.Draw(); + } + </script> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> +</head> +<body> + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + +<div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="./index.html">Examples</a> + > + Rose charts +</div> + +<h1>RGraph: <span>HTML5 Javascript charts library</span> - Rose charts</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + <p> + The Rose chart was formally called the Pseudo-Radar chart. + </p> + + <ul> + <li><a href="../docs/rose.html">Rose charts API documentation</a></li> + </ul> + <div style="display: inline-block; text-align: center; font-family: Verdana"> + <b>A stacked Rose chart</b><br /> + <canvas id="rose3" width="450" height="350">[No canvas support]</canvas> + </div> + + <div style="display: inline-block; text-align: center; font-family: Verdana"> + <b>A "non-equi-angular" Rose chart</b><br /> + <canvas id="rose4" width="450" height="350">[No canvas support]</canvas> + </div> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/examples/rscatter.html b/schall/static/RGraph/examples/rscatter.html new file mode 100644 index 0000000..416e4c1 --- /dev/null +++ b/schall/static/RGraph/examples/rscatter.html @@ -0,0 +1,144 @@ +<!DOCTYPE html > +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + + <title>RGraph: HTML5 Javascript charts library - Radial scatter charts</title> + + <meta name="keywords" content="rgraph html5 canvas example radial scatter chart" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Radial scatter chart example" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js" ></script> + <script src="../libraries/RGraph.common.tooltips.js" ></script> + <script src="../libraries/RGraph.rscatter.js" ></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + + <script> + window.onload = function () + { + // Create the data + var data = []; + for (var i=0; i<75; i++) { + data.push([RGraph.random(0, 360), i * RGraph.random(0, 10), null, String('Index: ' + i)]); + } + + var rscatter1 = new RGraph.Rscatter('cvs', data); + rscatter1.Set('chart.labels.axes', 'n'); + rscatter1.Set('chart.labels.position', 'edge'); + rscatter1.Set('chart.labels', ['NE', 'E', 'SE', 'S', 'SW', 'W', 'NW', '']); + rscatter1.Set('chart.tickmarks', 'plus'); + rscatter1.Set('chart.tooltips.effect', 'contract'); + rscatter1.Set('chart.title', 'Direction and magnitude'); + rscatter1.Set('chart.title.color', 'black'); + rscatter1.Set('chart.title.vpos', 0.3); + rscatter1.Draw(); + + var rscatter2 = new RGraph.Rscatter('cvs2', [ + [30, 120, 'red'], + [350, 100, 'blue'], + [456, 97, 'black'], + [125, 67, 'red'], + [245, 84, 'green'] + ]); + rscatter2.Set('chart.title', 'Another Radial scatter chart'); + rscatter2.Set('chart.title.color', 'black'); + rscatter2.Set('chart.title.vpos', 0.3); + rscatter2.Draw(); + } + </script> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> +</head> +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + +<div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="./index.html">Examples</a> + > + Radial scatter charts +</div> + +<h1>RGraph: <span>HTML5 Javascript charts library</span> - Radial scatter charts</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + <p> + Radial scatter charts are a circular variant of regular Scatter charts, and as the name suggests, circular. They + may be more suited to your dataset than regular scatter charts. + </p> + + <div> + <ul> + <li><a href="../docs/rscatter.html">Radial scatter charts API documentation</a></li> + </ul> + </div> + + <div style="text-align: center"> + <canvas id="cvs" width="350" height="350">[No canvas support]</canvas> + <canvas id="cvs2" width="350" height="350">[No canvas support]</canvas> + </div> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/examples/scatter.html b/schall/static/RGraph/examples/scatter.html new file mode 100644 index 0000000..301837b --- /dev/null +++ b/schall/static/RGraph/examples/scatter.html @@ -0,0 +1,161 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + + <title>RGraph: HTML5 Javascript charts library - scatter charts</title> + + <meta name="keywords" content="rgraph html5 canvas example scatter chart" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Scatter charts example" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js" ></script> + <script src="../libraries/RGraph.common.tooltips.js" ></script> + <script src="../libraries/RGraph.scatter.js" ></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + + <script> + window.onload = function () + { + + var data = [ + [10,15,'red'],[13,16,'red'],[12,11,'red'],[15,16,'red'],[20,19,'red'],[19,16,'red'],[13,15,'red'],[11,12,'red'],[13,16,'red'],[5,19,'red'],[16,15,'red'],[13,15,'red'],[14,14,'red'],[12,12,'red'], + [5,4,'green'],[6,14,'green'],[19,12,'green'],[3,5,'green'],[1,16,'green'],[13,5,'green'],[15,15,'green'],[13,5,'green'],[4,9,'green'],[16,6,'green'],[13,18,'green'],[18,12,'green'],[19,18,'green'],[13,16,'green'],[15,14,'green'], + [12,4,'blue'],[4,23,'blue'],[13,8,'blue'],[12,12,'blue'],[18,4,'blue'],[4,18,'blue'],[11,2,'blue'],[4,3,'blue'],[5,8,'blue'],[1,9,'blue'],[4,6,'blue'],[16,8,'blue'],[17,8,'blue'],[19,9,'blue'],[13,5,'blue'],[16,21,'blue'], + [12,4],[13,12],[11,16],[4,19],[4,3],[5,6],[1,9],[4,12],[6,12],[8,8],[16,6],[13,5],[15,13],[23,23,'red'], [1,1, 'gray'], + [1,4,'gray'], [2,3,'gray'], [1,6,'gray'], [2,3,'gray'], [2,5,'gray'], [3,7,'gray'], [1,4,'gray'], [2,7,'gray'] + ]; + + var scatter1 = new RGraph.Scatter('scatter1', data); + scatter1.Set('chart.ylabels.count', 10); + scatter1.Set('chart.background.hbars', [[0,null,'rgba(0,255,0,0.3)']]); + scatter1.Set('chart.background.grid.autofit.numhlines', 10); + scatter1.Set('chart.background.grid.autofit.numvlines', 28); + scatter1.Set('chart.labels', [['Week 1', 0], ['Week 2', 7], ['Week 3', 14], ['Week 4', 21]]); + scatter1.Set('chart.labels.specific.align', 'center'); + scatter1.Set('chart.xmax', 28); // Necessary + scatter1.Set('chart.defaultcolor', 'black'); // Optional + scatter1.Set('chart.title', 'This months sales'); + scatter1.Set('chart.gutter.left', 40); + scatter1.Set('chart.tickmarks', 'square'); + scatter1.Set('chart.ticksize', 4); + scatter1.Set('chart.ymax', 30); + scatter1.Set('chart.units.pre', '$'); + scatter1.Set('chart.line.colors', ['red','blue','black']); + scatter1.Set('chart.key', ['Bob','Fred','Gaz']); + scatter1.Draw(); + + + + var scatter2 = new RGraph.Scatter('scatter2', [[10,[21,22,26,31,35, 'red', 'green',35], 'red', 'A tooltip'],[250,45, 'red', 'A fourth tooltip']], + [[50,[5,22,26,31,35, '#000', '#000'], '#000', 'A second tooltip'],[150,45, 'blue', 'A third tooltip']] // Dataset 2 + ); + scatter2.Set('chart.title', 'A Scatter chart boxplot'); + scatter2.Set('chart.boxplot.capped', false); + scatter2.Set('chart.labels', ['Q1', 'Q2', 'Q3', 'Q4']); + scatter2.Set('chart.xmax', 365); + scatter2.Set('chart.ymax', 50); + scatter2.Set('chart.boxplot.width', 12); // The default width + //scatter2.Set('chart.background.vbars', [[182.5, 91.125, 'rgba(0,255,0,0.5)']]); +scatter2.Set('chart.ylabels.inside', true); +scatter2.Set('chart.yaxispos', 'left'); + scatter2.Draw(); + } + </script> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> +</head> +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + +<div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="./index.html">Examples</a> + > + Scatter charts +</div> + +<h1>RGraph: <span>HTML5 Javascript charts library</span> - Scatter charts</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + <p> + Scatter charts use two variables to plot points and makes it clear where there are congregations. The data points + make up the X and Y coordinates. The labels on the X axis are separate from the X units, allowing you to "group" them. For + example, like the example, you could set the maxium X value to be 365, but only have four labels. That way you would + have a granularity of a day, but the X axis would only have four labels. Like the example. + </p> + + <div> + <ul> + <li><a href="../docs/scatter.html">Scatter charts API documentation</a></li> + </ul> + </div> + + <canvas id="scatter1" width="450" height="200">[No canvas support]</canvas> + <canvas id="scatter2" width="450" height="200">[No canvas support]</canvas> + + + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/examples/showcase.html b/schall/static/RGraph/examples/showcase.html new file mode 100644 index 0000000..0a9342b --- /dev/null +++ b/schall/static/RGraph/examples/showcase.html @@ -0,0 +1,19 @@ +<!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> +
\ No newline at end of file diff --git a/schall/static/RGraph/examples/text.html b/schall/static/RGraph/examples/text.html new file mode 100644 index 0000000..c334d2f --- /dev/null +++ b/schall/static/RGraph/examples/text.html @@ -0,0 +1,133 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: Javascript charts & HTML5 canvas charts library - Animated rotating text with the RGraph software</title> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <script src="../libraries/RGraph.common.core.js" ></script> + + <script> + __pause = false; // Provide a way to pause the rotation + __RGraph_rotate = 0; // A record of the angle (IN DEGREES) we're at currently + __RGraph_rotate2 = 0; // Ditto, but this is controlled by the buttons + + window.onload = function () + { + + if (!__pause) { + var canvas = document.getElementById("myc"); + var context = canvas.getContext('2d'); + + RGraph.Clear(canvas); // Clears the canvas + + context.beginPath(); + context.fillStyle = 'black'; + + RGraph.Text(context, 'Verdana',10,canvas.width/2,canvas.height/2,'Magic text! (' + __RGraph_rotate + ')','center','center',false, ++__RGraph_rotate); + RGraph.Text(context, 'Verdana', 16, 50, 50, 'This is making me dizzy... (' + (__RGraph_rotate * 5) + ')', 'center', 'left', false, __RGraph_rotate * 2); + RGraph.Text(context, 'Verdana', 20, 50, 200, 'Some user controllable text (' + __RGraph_rotate2 + ')', 'center', 'center', false, __RGraph_rotate2); + + context.stroke(); + context.fill(); + } + + setTimeout(window.onload, 1); + } + </script> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> +</head> +<body> + +<div id="breadcrumb"> + <a href="../index.html">RGraph: Javascript charts & HTML5 canvas charts library</a> + > + <a href="./index.html">Examples</a> + > + Rotating text +</div> + +<h1>RGraph: Javascript charts & HTML5 canvas charts - A text function that does horizontal and vertical alignment (and spins)</h1> + + + +<table border="0" style="float: left; margin-right: 10px"> + <tr> + <td colspan="2"><canvas id="myc" width="300" height="300" style="border: 1px dashed gray">The fallback HTML</canvas></td> + </tr> + + <tr> + <td align="center"> + <button style="width: 100px; margin: 5px" onclick="__RGraph_rotate2 -= 5">« Rotate left</button> + <button style="margin: 5px" onclick="if (this.innerHTML == 'Pause') {__pause = true; this.innerHTML = 'Play'} else {this.innerHTML = 'Pause'; __pause = false; }">Pause</button> + <button style="width: 100px; margin: 5px" onclick="__RGraph_rotate2 += 5">Rotate right»</button> + </td> + </tr> +</table> + +<p> + RGraph.Text() is a text drawing function that allows vertical and horizontal alignment, and allows you to specify the angle of the + text too. The animation is done by a simple gobal variable, setTimeout() and redrawing the entire + canvas every frame. Perhaps not the most efficient of methods, but remember that your Javascript will likely be + running on computers that have more processing power than + some small countries... <a href="javascript: location.href = location.href">Reset the page</a> +</p> + +<p> + In a similar vein you could easily make some text that bounces from one side of the screen to the other, + hurrah - the return of <marquee>! +</p> + + <div> + More examples can be found on the individual <a href="/examples/index.html">example pages</a>, and a more complete + reference to the Text() function can be found in the <a href="../docs/api.html#functions.other">API docs</a>. + </div> + +</body> +</html><!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> +
\ No newline at end of file diff --git a/schall/static/RGraph/examples/thermometer.html b/schall/static/RGraph/examples/thermometer.html new file mode 100644 index 0000000..ee0fe87 --- /dev/null +++ b/schall/static/RGraph/examples/thermometer.html @@ -0,0 +1,143 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + + <title>RGraph: HTML5 Javascript charts library - Thermometer charts</title> + + <meta name="keywords" content="rgraph html5 canvas example thermometer charts" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Thermometer charts" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js" ></script> + <script src="../libraries/RGraph.thermometer.js" ></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> +</head> +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + +<div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="./index.html">Examples</a> + > + Thermometer charts +</div> + +<h1>RGraph: <span>HTML5 Javascript charts library</span> - Thermometer charts</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + + <p> + The thermometer chart/gauge is a variation on the <a href="vprogress.html">Vertical Progress Bar</a>, that may suit your + design better than a regular progress bar. The thermometer is only available in a vertical orientation. + </p> + + <div> + <ul> + <li><a href="../docs/thermometer.html">Thermometer charts API documentation</a></li> + </ul> + </div> + + <div style="text-align: center"> + <canvas id="thermo1" width="100" height="350">[No canvas support]</canvas> + <canvas id="thermo2" width="100" height="350" style="margin-left: 150px; margin-right: 150px">[No canvas support]</canvas> + <canvas id="thermo3" width="100" height="350">[No canvas support]</canvas> + </div> + <script> + window.onload = function () + { + var thermometer = new RGraph.Thermometer('thermo1', 0,1,0.14); + thermometer.Set('chart.colors', ['green']); + thermometer.Set('chart.title.side', 'This servers load'); + thermometer.Draw(); + + var thermometer2 = new RGraph.Thermometer('thermo2', 0,100,16); + thermometer2.Set('chart.colors', ['blue']); + thermometer2.Set('chart.title.side', 'Mould level'); + thermometer2.Draw(); + + + grad = thermometer2.context.createLinearGradient(0,0,100,0); + grad.addColorStop(1, '#a00'); + grad.addColorStop(0.5, '#f00'); + grad.addColorStop(0, '#a00'); + + var thermometer3 = new RGraph.Thermometer('thermo3', 0,100,84); + thermometer3.Set('chart.colors', [grad]); + thermometer3.Set('chart.title.side', 'Temperature'); + thermometer3.Set('chart.shadow', true); + thermometer3.Set('chart.shadow.offsetx', 0); + thermometer3.Set('chart.shadow.offsety', 0); + thermometer3.Set('chart.shadow.blur', 15); + thermometer3.Set('chart.shadow.color', 'green'); + thermometer3.Set('chart.text.color', 'green'); + thermometer3.Set('chart.value.label', false); + thermometer3.Draw(); + } + </script> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/examples/vprogress.html b/schall/static/RGraph/examples/vprogress.html new file mode 100644 index 0000000..9195199 --- /dev/null +++ b/schall/static/RGraph/examples/vprogress.html @@ -0,0 +1,162 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - vertical progress bar</title> + + <meta name="keywords" content="rgraph html5 canvas example vertical progress bar" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Vertical Progress Bar example" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js"></script> + <script src="../libraries/RGraph.common.tooltips.js" ></script> + <script src="../libraries/RGraph.vprogress.js"></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + + <script> + window.onload = function () + { + var progress1 = new RGraph.VProgress('progress1', 63, 100); + progress1.Set('chart.tickmarks', false); + progress1.Set('chart.margin', 3); + progress1.Set('chart.tickmarks.inner', true); + progress1.Set('chart.label.inner', true); + progress1.Set('chart.gutter.left', 30); + progress1.Set('chart.gutter.right', 30); + progress1.Set('chart.units.post', '%'); + + progress1.Draw(); + + var progress2 = new RGraph.VProgress('progress2', [6.5, 1, 2], 10); + progress2.Set('chart.colors', ['red', '#cfc', 'blue']); + //progress2.Set('chart.shadow', true); + //progress2.Set('chart.shadow.color', '#666'); + //progress2.Set('chart.shadow.offsetx', 0); + //progress2.Set('chart.shadow.offsety', 0); + //progress2.Set('chart.shadow.blur', 15); + //progress2.Set('chart.margin', 3); + //progress2.Set('chart.tooltips', ['John', 'Fred', 'Pete']); + //progress2.Set('chart.tooltips.effect', 'contract'); + //progress2.Set('chart.tickmarks', true); + //progress2.Set('chart.tickmarks.inner', true); + //progress2.Set('chart.tickmarks.color', '#333'); + progress2.Draw(); + + var progress3 = new RGraph.VProgress('progress3', [1.455, 13, 42], 100); + progress3.Set('chart.colors', ['red', '#cfc', 'blue']); + progress3.Set('chart.margin', 3); + progress3.Set('chart.tooltips', ['John', 'Fred', 'Pete']); + progress3.Set('chart.tooltips.effect', 'fade'); + progress3.Set('chart.tickmarks', true); + progress3.Set('chart.tickmarks.inner', true); + progress3.Set('chart.tickmarks.color', '#333'); + progress3.Set('chart.key', ['Richard','Fred','Bob']); + progress3.Set('chart.key.position.x', progress3.canvas.width - 90); + progress3.Set('chart.tickmarks.zerostart', true); + progress3.Set('chart.gutter.right', 125); + progress3.Set('chart.scale.decimals', 2); + progress3.Draw(); + } + </script> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> +</head> +<body> + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + +<div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="./index.html">Examples</a> + > + Vertical Progress bar +</div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - Vertical Progress bar</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + <p> + This is a Progress Bar for showing state. You can show anything with it - use it to show load on your server, + or percentage space free on your servers disk drive. You could even incorporate it with some AJAX to retrieve status information + from your webserver dynamically, making the Progress Bar realtime. To redraw the progress bar simply call <i>RGraph.Clear()</i> + (which clears the canvas) and then call <i>myProgress.Draw()</i> again. + </p> + + <p> + The colours, title and scale are configurable, allowing you to represent a wide range of values. + </p> + + <div> + <ul> + <li><a href="../docs/vprogress.html">Vertical Progress bar API documentation</a></li> + <li><a href="hprogress.html">Horizontal Progress bar</a></li> + </ul> + </div> + + <div style="text-align: center"> + <canvas width="125" height="450" id="progress1">[No canvas support]</canvas> + <canvas width="125" height="450" id="progress2" style="margin-left: 100px; margin-right: 100px">[No canvas support]</canvas> + <canvas width="210" height="450" id="progress3">[No canvas support]</canvas> + </div> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/examples/waterfall.html b/schall/static/RGraph/examples/waterfall.html new file mode 100644 index 0000000..3459615 --- /dev/null +++ b/schall/static/RGraph/examples/waterfall.html @@ -0,0 +1,146 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + <title>RGraph: HTML5 Javascript charts library - waterfall charts</title> + + <meta name="keywords" content="rgraph html5 canvas example waterfall charts" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Waterfall chart example" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js"></script> + <script src="../libraries/RGraph.common.tooltips.js" ></script> + <script src="../libraries/RGraph.waterfall.js"></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + + <script> + window.onload = function () + { + var waterfall1 = new RGraph.Waterfall('waterfall1', [50,12,-50,-19, -130, 230]) + waterfall1.Set('chart.background.grid.autofit', true); + waterfall1.Set('chart.background.grid.autofit.numhlines', 10); + waterfall1.Set('chart.background.grid.autofit.numvlines', 25); + waterfall1.Set('chart.title', 'A chart showing income/expenditure'); + waterfall1.Set('chart.colors', ['black','red','blue']); + waterfall1.Set('chart.strokestyle', 'rgba(0,0,0,0)'); + waterfall1.Set('chart.units.pre', '$'); + waterfall1.Set('chart.units.post', 'k'); + waterfall1.Set('chart.total', true); + waterfall1.Set('chart.labels', ['Sales', + 'Misc income', + 'Salaries', + 'Running costs', + 'Snacks', + 'Bake sales', + 'Gross']); + waterfall1.Set('chart.tooltips', ['Traditional sales from the shops', + 'Miscellaneous income from neer-do-wells', + 'Salaries of the henchmen', + 'Running costs including fuel for the cars', + 'Sweets and snacks for the office', + 'Bake sales', + 'Gross before "tax"']); + waterfall1.Set('chart.highlight.stroke', 'rgba(0,0,0,0)'); + waterfall1.Set('chart.shadow', true); + waterfall1.Set('chart.shadow.color', '#aaa'); + waterfall1.Set('chart.shadow.blur', 5); + waterfall1.Set('chart.shadow.offsetx', 0); + waterfall1.Set('chart.shadow.offsety', 0); + waterfall1.Set('chart.gutter.left', 50); + waterfall1.Set('chart.xaxispos', 'center'); + waterfall1.Draw(); + } + </script> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> +</head> +<body> + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + +<div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="./index.html">Examples</a> + > + Waterfall chart +</div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - Waterfall charts</h1> + + <script> + if (RGraph.isIE8()) { + document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>'); + } + </script> + + <p> + Waterfall charts can be used to represent sales and expenditure for an entity. More information can be found here: + <a href="http://en.wikipedia.org/wiki/Waterfall_chart" target="_blank">http://en.wikipedia.org/wiki/Waterfall_chart</a> + </p> + + <div> + <ul> + <li><a href="../docs/waterfall.html">Waterfall charts API documentation</a></li> + </ul> + </div> + + <div> + <canvas width="900" height="300" id="waterfall1">[No canvas support]</canvas> + </div> + +</body> +</html>
\ No newline at end of file diff --git a/schall/static/RGraph/excanvas/EXCANVAS-LICENSE.txt b/schall/static/RGraph/excanvas/EXCANVAS-LICENSE.txt new file mode 100644 index 0000000..6e802f3 --- /dev/null +++ b/schall/static/RGraph/excanvas/EXCANVAS-LICENSE.txt @@ -0,0 +1,214 @@ + Versions + ======== + The excanvas.original.js is the original unminified and uncompressed library. The excanvas.compressed.js has been minified by hand and + Gzip compressed. + + License for excanvas.js + ======================= + + This license is applicable to excanvas.original.js and excanvas.compressed.js ONLY. + + License + ======= + + Apache License + Version 2.0, January 2004 + http://www.apache.org/licenses/ + + TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION + + 1. Definitions. + + "License" shall mean the terms and conditions for use, reproduction, + and distribution as defined by Sections 1 through 9 of this document. + + "Licensor" shall mean the copyright owner or entity authorized by + the copyright owner that is granting the License. + + "Legal Entity" shall mean the union of the acting entity and all + other entities that control, are controlled by, or are under common + control with that entity. For the purposes of this definition, + "control" means (i) the power, direct or indirect, to cause the + direction or management of such entity, whether by contract or + otherwise, or (ii) ownership of fifty percent (50%) or more of the + outstanding shares, or (iii) beneficial ownership of such entity. + + "You" (or "Your") shall mean an individual or Legal Entity + exercising permissions granted by this License. + + "Source" form shall mean the preferred form for making modifications, + including but not limited to software source code, documentation + source, and configuration files. + + "Object" form shall mean any form resulting from mechanical + transformation or translation of a Source form, including but + not limited to compiled object code, generated documentation, + and conversions to other media types. + + "Work" shall mean the work of authorship, whether in Source or + Object form, made available under the License, as indicated by a + copyright notice that is included in or attached to the work + (an example is provided in the Appendix below). + + "Derivative Works" shall mean any work, whether in Source or Object + form, that is based on (or derived from) the Work and for which the + editorial revisions, annotations, elaborations, or other modifications + represent, as a whole, an original work of authorship. For the purposes + of this License, Derivative Works shall not include works that remain + separable from, or merely link (or bind by name) to the interfaces of, + the Work and Derivative Works thereof. + + "Contribution" shall mean any work of authorship, including + the original version of the Work and any modifications or additions + to that Work or Derivative Works thereof, that is intentionally + submitted to Licensor for inclusion in the Work by the copyright owner + or by an individual or Legal Entity authorized to submit on behalf of + the copyright owner. For the purposes of this definition, "submitted" + means any form of electronic, verbal, or written communication sent + to the Licensor or its representatives, including but not limited to + communication on electronic mailing lists, source code control systems, + and issue tracking systems that are managed by, or on behalf of, the + Licensor for the purpose of discussing and improving the Work, but + excluding communication that is conspicuously marked or otherwise + designated in writing by the copyright owner as "Not a Contribution." + + "Contributor" shall mean Licensor and any individual or Legal Entity + on behalf of whom a Contribution has been received by Licensor and + subsequently incorporated within the Work. + + 2. Grant of Copyright License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + copyright license to reproduce, prepare Derivative Works of, + publicly display, publicly perform, sublicense, and distribute the + Work and such Derivative Works in Source or Object form. + + 3. Grant of Patent License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + (except as stated in this section) patent license to make, have made, + use, offer to sell, sell, import, and otherwise transfer the Work, + where such license applies only to those patent claims licensable + by such Contributor that are necessarily infringed by their + Contribution(s) alone or by combination of their Contribution(s) + with the Work to which such Contribution(s) was submitted. If You + institute patent litigation against any entity (including a + cross-claim or counterclaim in a lawsuit) alleging that the Work + or a Contribution incorporated within the Work constitutes direct + or contributory patent infringement, then any patent licenses + granted to You under this License for that Work shall terminate + as of the date such litigation is filed. + + 4. Redistribution. You may reproduce and distribute copies of the + Work or Derivative Works thereof in any medium, with or without + modifications, and in Source or Object form, provided that You + meet the following conditions: + + (a) You must give any other recipients of the Work or + Derivative Works a copy of this License; and + + (b) You must cause any modified files to carry prominent notices + stating that You changed the files; and + + (c) You must retain, in the Source form of any Derivative Works + that You distribute, all copyright, patent, trademark, and + attribution notices from the Source form of the Work, + excluding those notices that do not pertain to any part of + the Derivative Works; and + + (d) If the Work includes a "NOTICE" text file as part of its + distribution, then any Derivative Works that You distribute must + include a readable copy of the attribution notices contained + within such NOTICE file, excluding those notices that do not + pertain to any part of the Derivative Works, in at least one + of the following places: within a NOTICE text file distributed + as part of the Derivative Works; within the Source form or + documentation, if provided along with the Derivative Works; or, + within a display generated by the Derivative Works, if and + wherever such third-party notices normally appear. The contents + of the NOTICE file are for informational purposes only and + do not modify the License. You may add Your own attribution + notices within Derivative Works that You distribute, alongside + or as an addendum to the NOTICE text from the Work, provided + that such additional attribution notices cannot be construed + as modifying the License. + + You may add Your own copyright statement to Your modifications and + may provide additional or different license terms and conditions + for use, reproduction, or distribution of Your modifications, or + for any such Derivative Works as a whole, provided Your use, + reproduction, and distribution of the Work otherwise complies with + the conditions stated in this License. + + 5. Submission of Contributions. Unless You explicitly state otherwise, + any Contribution intentionally submitted for inclusion in the Work + by You to the Licensor shall be under the terms and conditions of + this License, without any additional terms or conditions. + Notwithstanding the above, nothing herein shall supersede or modify + the terms of any separate license agreement you may have executed + with Licensor regarding such Contributions. + + 6. Trademarks. This License does not grant permission to use the trade + names, trademarks, service marks, or product names of the Licensor, + except as required for reasonable and customary use in describing the + origin of the Work and reproducing the content of the NOTICE file. + + 7. Disclaimer of Warranty. Unless required by applicable law or + agreed to in writing, Licensor provides the Work (and each + Contributor provides its Contributions) on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or + implied, including, without limitation, any warranties or conditions + of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A + PARTICULAR PURPOSE. You are solely responsible for determining the + appropriateness of using or redistributing the Work and assume any + risks associated with Your exercise of permissions under this License. + + 8. Limitation of Liability. In no event and under no legal theory, + whether in tort (including negligence), contract, or otherwise, + unless required by applicable law (such as deliberate and grossly + negligent acts) or agreed to in writing, shall any Contributor be + liable to You for damages, including any direct, indirect, special, + incidental, or consequential damages of any character arising as a + result of this License or out of the use or inability to use the + Work (including but not limited to damages for loss of goodwill, + work stoppage, computer failure or malfunction, or any and all + other commercial damages or losses), even if such Contributor + has been advised of the possibility of such damages. + + 9. Accepting Warranty or Additional Liability. While redistributing + the Work or Derivative Works thereof, You may choose to offer, + and charge a fee for, acceptance of support, warranty, indemnity, + or other liability obligations and/or rights consistent with this + License. However, in accepting such obligations, You may act only + on Your own behalf and on Your sole responsibility, not on behalf + of any other Contributor, and only if You agree to indemnify, + defend, and hold each Contributor harmless for any liability + incurred by, or claims asserted against, such Contributor by reason + of your accepting any such warranty or additional liability. + + END OF TERMS AND CONDITIONS + + APPENDIX: How to apply the Apache License to your work. + + To apply the Apache License to your work, attach the following + boilerplate notice, with the fields enclosed by brackets "[]" + replaced with your own identifying information. (Don't include + the brackets!) The text should be enclosed in the appropriate + comment syntax for the file format. We also recommend that a + file or class name and description of purpose be included on the + same "printed page" as the copyright notice for easier + identification within third-party archives. + + Copyright [yyyy] [name of copyright owner] + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License.
\ No newline at end of file diff --git a/schall/static/RGraph/excanvas/HTACCESS-SAMPLE b/schall/static/RGraph/excanvas/HTACCESS-SAMPLE new file mode 100644 index 0000000..e497658 --- /dev/null +++ b/schall/static/RGraph/excanvas/HTACCESS-SAMPLE @@ -0,0 +1,13 @@ +## +## This is an example Apache .htaccess file that can be used to add the required +## Content-Encoding: header to the compressed version of the ExCanvas library. +## This .htaccess file is ONLY required for the compressed version. The +## necessary header is this: +## Content-Encoding: gzip +## +## If you are not using the compressed version, or are doing the compression +## yourself (it could for example, be built into your web server), then you +## do not need this file. +## + +AddEncoding gzip .js
\ No newline at end of file diff --git a/schall/static/RGraph/excanvas/excanvas.compressed.js b/schall/static/RGraph/excanvas/excanvas.compressed.js Binary files differnew file mode 100644 index 0000000..fc3d35c --- /dev/null +++ b/schall/static/RGraph/excanvas/excanvas.compressed.js diff --git a/schall/static/RGraph/excanvas/excanvas.original.js b/schall/static/RGraph/excanvas/excanvas.original.js new file mode 100644 index 0000000..650e3f3 --- /dev/null +++ b/schall/static/RGraph/excanvas/excanvas.original.js @@ -0,0 +1,1421 @@ +// Copyright 2006 Google Inc. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + + +// Known Issues: +// +// * Patterns only support repeat. +// * Radial gradient are not implemented. The VML version of these look very +// different from the canvas one. +// * Clipping paths are not implemented. +// * Coordsize. The width and height attribute have higher priority than the +// width and height style values which isn't correct. +// * Painting mode isn't implemented. +// * Canvas width/height should is using content-box by default. IE in +// Quirks mode will draw the canvas using border-box. Either change your +// doctype to HTML5 +// (http://www.whatwg.org/specs/web-apps/current-work/#the-doctype) +// or use Box Sizing Behavior from WebFX +// (http://webfx.eae.net/dhtml/boxsizing/boxsizing.html) +// * Non uniform scaling does not correctly scale strokes. +// * Optimize. There is always room for speed improvements. + +// Only add this code if we do not already have a canvas implementation +if (!document.createElement('canvas').getContext) { + +(function() { + + // alias some functions to make (compiled) code shorter + var m = Math; + var mr = m.round; + var ms = m.sin; + var mc = m.cos; + var abs = m.abs; + var sqrt = m.sqrt; + + // this is used for sub pixel precision + var Z = 10; + var Z2 = Z / 2; + + var IE_VERSION = +navigator.userAgent.match(/MSIE ([\d.]+)?/)[1]; + + /** + * This funtion is assigned to the <canvas> elements as element.getContext(). + * @this {HTMLElement} + * @return {CanvasRenderingContext2D_} + */ + function getContext() { + return this.context_ || + (this.context_ = new CanvasRenderingContext2D_(this)); + } + + var slice = Array.prototype.slice; + + /** + * Binds a function to an object. The returned function will always use the + * passed in {@code obj} as {@code this}. + * + * Example: + * + * g = bind(f, obj, a, b) + * g(c, d) // will do f.call(obj, a, b, c, d) + * + * @param {Function} f The function to bind the object to + * @param {Object} obj The object that should act as this when the function + * is called + * @param {*} var_args Rest arguments that will be used as the initial + * arguments when the function is called + * @return {Function} A new function that has bound this + */ + function bind(f, obj, var_args) { + var a = slice.call(arguments, 2); + return function() { + return f.apply(obj, a.concat(slice.call(arguments))); + }; + } + + function encodeHtmlAttribute(s) { + return String(s).replace(/&/g, '&').replace(/"/g, '"'); + } + + function addNamespace(doc, prefix, urn) { + if (!doc.namespaces[prefix]) { + if (IE_VERSION >= 7) { + doc.namespaces.add(prefix, urn).doImport('#default#VML'); + } else { + // IE6 cannot handle the third argument. + doc.namespaces.add(prefix, urn); + } + } + } + + function addNamespacesAndStylesheet(doc) { + addNamespace(doc, 'g_vml_', 'urn:schemas-microsoft-com:vml'); + addNamespace(doc, 'g_o_', 'urn:schemas-microsoft-com:office:office'); + + // Setup default CSS. Only add one style sheet per document + if (!doc.styleSheets['ex_canvas_']) { + var ss = doc.createStyleSheet(); + ss.owningElement.id = 'ex_canvas_'; + ss.cssText = 'canvas{display:inline-block;overflow:hidden;' + + // default size is 300x150 in Gecko and Opera + 'text-align:left;width:300px;height:150px}'; + } + } + + // Add namespaces and stylesheet at startup. + addNamespacesAndStylesheet(document); + + var G_vmlCanvasManager_ = { + init: function(opt_doc) { + var doc = opt_doc || document; + // Create a dummy element so that IE will allow canvas elements to be + // recognized. + doc.createElement('canvas'); + doc.attachEvent('onreadystatechange', bind(this.init_, this, doc)); + }, + + init_: function(doc) { + // find all canvas elements + var els = doc.getElementsByTagName('canvas'); + for (var i = 0; i < els.length; i++) { + this.initElement(els[i]); + } + }, + + /** + * Public initializes a canvas element so that it can be used as canvas + * element from now on. This is called automatically before the page is + * loaded but if you are creating elements using createElement you need to + * make sure this is called on the element. + * @param {HTMLElement} el The canvas element to initialize. + * @return {HTMLElement} the element that was created. + */ + initElement: function(el) { + if (!el.getContext) { + el.getContext = getContext; + + // Add namespaces and stylesheet to document of the element. + addNamespacesAndStylesheet(el.ownerDocument); + + // Remove fallback content. There is no way to hide text nodes so we + // just remove all childNodes. We could hide all elements and remove + // text nodes but who really cares about the fallback content. + el.innerHTML = ''; + + // do not use inline function because that will leak memory + el.attachEvent('onpropertychange', onPropertyChange); + el.attachEvent('onresize', onResize); + + var attrs = el.attributes; + if (attrs.width && attrs.width.specified) { + // TODO: use runtimeStyle and coordsize + // el.getContext().setWidth_(attrs.width.nodeValue); + el.style.width = attrs.width.nodeValue + 'px'; + } else { + el.width = el.clientWidth; + } + if (attrs.height && attrs.height.specified) { + // TODO: use runtimeStyle and coordsize + // el.getContext().setHeight_(attrs.height.nodeValue); + el.style.height = attrs.height.nodeValue + 'px'; + } else { + el.height = el.clientHeight; + } + //el.getContext().setCoordsize_() + } + return el; + } + }; + + function onPropertyChange(e) { + var el = e.srcElement; + + switch (e.propertyName) { + case 'width': + el.getContext().clearRect(); + el.style.width = el.attributes.width.nodeValue + 'px'; + // In IE8 this does not trigger onresize. + el.firstChild.style.width = el.clientWidth + 'px'; + break; + case 'height': + el.getContext().clearRect(); + el.style.height = el.attributes.height.nodeValue + 'px'; + el.firstChild.style.height = el.clientHeight + 'px'; + break; + } + } + + function onResize(e) { + var el = e.srcElement; + if (el.firstChild) { + el.firstChild.style.width = el.clientWidth + 'px'; + el.firstChild.style.height = el.clientHeight + 'px'; + } + } + + G_vmlCanvasManager_.init(); + + // precompute "00" to "FF" + var decToHex = []; + for (var i = 0; i < 16; i++) { + for (var j = 0; j < 16; j++) { + decToHex[i * 16 + j] = i.toString(16) + j.toString(16); + } + } + + function createMatrixIdentity() { + return [ + [1, 0, 0], + [0, 1, 0], + [0, 0, 1] + ]; + } + + function matrixMultiply(m1, m2) { + var result = createMatrixIdentity(); + + for (var x = 0; x < 3; x++) { + for (var y = 0; y < 3; y++) { + var sum = 0; + + for (var z = 0; z < 3; z++) { + sum += m1[x][z] * m2[z][y]; + } + + result[x][y] = sum; + } + } + return result; + } + + function copyState(o1, o2) { + o2.fillStyle = o1.fillStyle; + o2.lineCap = o1.lineCap; + o2.lineJoin = o1.lineJoin; + o2.lineWidth = o1.lineWidth; + o2.miterLimit = o1.miterLimit; + o2.shadowBlur = o1.shadowBlur; + o2.shadowColor = o1.shadowColor; + o2.shadowOffsetX = o1.shadowOffsetX; + o2.shadowOffsetY = o1.shadowOffsetY; + o2.strokeStyle = o1.strokeStyle; + o2.globalAlpha = o1.globalAlpha; + o2.font = o1.font; + o2.textAlign = o1.textAlign; + o2.textBaseline = o1.textBaseline; + o2.arcScaleX_ = o1.arcScaleX_; + o2.arcScaleY_ = o1.arcScaleY_; + o2.lineScale_ = o1.lineScale_; + } + + var colorData = { + aliceblue: '#F0F8FF', + antiquewhite: '#FAEBD7', + aquamarine: '#7FFFD4', + azure: '#F0FFFF', + beige: '#F5F5DC', + bisque: '#FFE4C4', + black: '#000000', + blanchedalmond: '#FFEBCD', + blueviolet: '#8A2BE2', + brown: '#A52A2A', + burlywood: '#DEB887', + cadetblue: '#5F9EA0', + chartreuse: '#7FFF00', + chocolate: '#D2691E', + coral: '#FF7F50', + cornflowerblue: '#6495ED', + cornsilk: '#FFF8DC', + crimson: '#DC143C', + cyan: '#00FFFF', + darkblue: '#00008B', + darkcyan: '#008B8B', + darkgoldenrod: '#B8860B', + darkgray: '#A9A9A9', + darkgreen: '#006400', + darkgrey: '#A9A9A9', + darkkhaki: '#BDB76B', + darkmagenta: '#8B008B', + darkolivegreen: '#556B2F', + darkorange: '#FF8C00', + darkorchid: '#9932CC', + darkred: '#8B0000', + darksalmon: '#E9967A', + darkseagreen: '#8FBC8F', + darkslateblue: '#483D8B', + darkslategray: '#2F4F4F', + darkslategrey: '#2F4F4F', + darkturquoise: '#00CED1', + darkviolet: '#9400D3', + deeppink: '#FF1493', + deepskyblue: '#00BFFF', + dimgray: '#696969', + dimgrey: '#696969', + dodgerblue: '#1E90FF', + firebrick: '#B22222', + floralwhite: '#FFFAF0', + forestgreen: '#228B22', + gainsboro: '#DCDCDC', + ghostwhite: '#F8F8FF', + gold: '#FFD700', + goldenrod: '#DAA520', + grey: '#808080', + greenyellow: '#ADFF2F', + honeydew: '#F0FFF0', + hotpink: '#FF69B4', + indianred: '#CD5C5C', + indigo: '#4B0082', + ivory: '#FFFFF0', + khaki: '#F0E68C', + lavender: '#E6E6FA', + lavenderblush: '#FFF0F5', + lawngreen: '#7CFC00', + lemonchiffon: '#FFFACD', + lightblue: '#ADD8E6', + lightcoral: '#F08080', + lightcyan: '#E0FFFF', + lightgoldenrodyellow: '#FAFAD2', + lightgreen: '#90EE90', + lightgrey: '#D3D3D3', + lightpink: '#FFB6C1', + lightsalmon: '#FFA07A', + lightseagreen: '#20B2AA', + lightskyblue: '#87CEFA', + lightslategray: '#778899', + lightslategrey: '#778899', + lightsteelblue: '#B0C4DE', + lightyellow: '#FFFFE0', + limegreen: '#32CD32', + linen: '#FAF0E6', + magenta: '#FF00FF', + mediumaquamarine: '#66CDAA', + mediumblue: '#0000CD', + mediumorchid: '#BA55D3', + mediumpurple: '#9370DB', + mediumseagreen: '#3CB371', + mediumslateblue: '#7B68EE', + mediumspringgreen: '#00FA9A', + mediumturquoise: '#48D1CC', + mediumvioletred: '#C71585', + midnightblue: '#191970', + mintcream: '#F5FFFA', + mistyrose: '#FFE4E1', + moccasin: '#FFE4B5', + navajowhite: '#FFDEAD', + oldlace: '#FDF5E6', + olivedrab: '#6B8E23', + orange: '#FFA500', + orangered: '#FF4500', + orchid: '#DA70D6', + palegoldenrod: '#EEE8AA', + palegreen: '#98FB98', + paleturquoise: '#AFEEEE', + palevioletred: '#DB7093', + papayawhip: '#FFEFD5', + peachpuff: '#FFDAB9', + peru: '#CD853F', + pink: '#FFC0CB', + plum: '#DDA0DD', + powderblue: '#B0E0E6', + rosybrown: '#BC8F8F', + royalblue: '#4169E1', + saddlebrown: '#8B4513', + salmon: '#FA8072', + sandybrown: '#F4A460', + seagreen: '#2E8B57', + seashell: '#FFF5EE', + sienna: '#A0522D', + skyblue: '#87CEEB', + slateblue: '#6A5ACD', + slategray: '#708090', + slategrey: '#708090', + snow: '#FFFAFA', + springgreen: '#00FF7F', + steelblue: '#4682B4', + tan: '#D2B48C', + thistle: '#D8BFD8', + tomato: '#FF6347', + turquoise: '#40E0D0', + violet: '#EE82EE', + wheat: '#F5DEB3', + whitesmoke: '#F5F5F5', + yellowgreen: '#9ACD32' + }; + + + function getRgbHslContent(styleString) { + var start = styleString.indexOf('(', 3); + var end = styleString.indexOf(')', start + 1); + var parts = styleString.substring(start + 1, end).split(','); + // add alpha if needed + if (parts.length != 4 || styleString.charAt(3) != 'a') { + parts[3] = 1; + } + return parts; + } + + function percent(s) { + return parseFloat(s) / 100; + } + + function clamp(v, min, max) { + return Math.min(max, Math.max(min, v)); + } + + function hslToRgb(parts){ + var r, g, b, h, s, l; + h = parseFloat(parts[0]) / 360 % 360; + if (h < 0) + h++; + s = clamp(percent(parts[1]), 0, 1); + l = clamp(percent(parts[2]), 0, 1); + if (s == 0) { + r = g = b = l; // achromatic + } else { + var q = l < 0.5 ? l * (1 + s) : l + s - l * s; + var p = 2 * l - q; + r = hueToRgb(p, q, h + 1 / 3); + g = hueToRgb(p, q, h); + b = hueToRgb(p, q, h - 1 / 3); + } + + return '#' + decToHex[Math.floor(r * 255)] + + decToHex[Math.floor(g * 255)] + + decToHex[Math.floor(b * 255)]; + } + + function hueToRgb(m1, m2, h) { + if (h < 0) + h++; + if (h > 1) + h--; + + if (6 * h < 1) + return m1 + (m2 - m1) * 6 * h; + else if (2 * h < 1) + return m2; + else if (3 * h < 2) + return m1 + (m2 - m1) * (2 / 3 - h) * 6; + else + return m1; + } + + function processStyle(styleString) { + var str, alpha = 1; + + styleString = String(styleString); + if (styleString.charAt(0) == '#') { + str = styleString; + } else if (/^rgb/.test(styleString)) { + var parts = getRgbHslContent(styleString); + var str = '#', n; + for (var i = 0; i < 3; i++) { + if (parts[i].indexOf('%') != -1) { + n = Math.floor(percent(parts[i]) * 255); + } else { + n = +parts[i]; + } + str += decToHex[clamp(n, 0, 255)]; + } + alpha = +parts[3]; + } else if (/^hsl/.test(styleString)) { + var parts = getRgbHslContent(styleString); + str = hslToRgb(parts); + alpha = parts[3]; + } else { + str = colorData[styleString] || styleString; + } + return {color: str, alpha: alpha}; + } + + var DEFAULT_STYLE = { + style: 'normal', + variant: 'normal', + weight: 'normal', + size: 10, + family: 'sans-serif' + }; + + // Internal text style cache + var fontStyleCache = {}; + + function processFontStyle(styleString) { + if (fontStyleCache[styleString]) { + return fontStyleCache[styleString]; + } + + var el = document.createElement('div'); + var style = el.style; + try { + style.font = styleString; + } catch (ex) { + // Ignore failures to set to invalid font. + } + + return fontStyleCache[styleString] = { + style: style.fontStyle || DEFAULT_STYLE.style, + variant: style.fontVariant || DEFAULT_STYLE.variant, + weight: style.fontWeight || DEFAULT_STYLE.weight, + size: style.fontSize || DEFAULT_STYLE.size, + family: style.fontFamily || DEFAULT_STYLE.family + }; + } + + function getComputedStyle(style, element) { + var computedStyle = {}; + + for (var p in style) { + computedStyle[p] = style[p]; + } + + // Compute the size + var canvasFontSize = parseFloat(element.currentStyle.fontSize), + fontSize = parseFloat(style.size); + + if (typeof style.size == 'number') { + computedStyle.size = style.size; + } else if (style.size.indexOf('px') != -1) { + computedStyle.size = fontSize; + } else if (style.size.indexOf('em') != -1) { + computedStyle.size = canvasFontSize * fontSize; + } else if(style.size.indexOf('%') != -1) { + computedStyle.size = (canvasFontSize / 100) * fontSize; + } else if (style.size.indexOf('pt') != -1) { + computedStyle.size = fontSize / .75; + } else { + computedStyle.size = canvasFontSize; + } + + // Different scaling between normal text and VML text. This was found using + // trial and error to get the same size as non VML text. + computedStyle.size *= 0.981; + + return computedStyle; + } + + function buildStyle(style) { + return style.style + ' ' + style.variant + ' ' + style.weight + ' ' + + style.size + 'px ' + style.family; + } + + function processLineCap(lineCap) { + switch (lineCap) { + case 'butt': + return 'flat'; + case 'round': + return 'round'; + case 'square': + default: + return 'square'; + } + } + + /** + * This class implements CanvasRenderingContext2D interface as described by + * the WHATWG. + * @param {HTMLElement} canvasElement The element that the 2D context should + * be associated with + */ + function CanvasRenderingContext2D_(canvasElement) { + this.m_ = createMatrixIdentity(); + + this.mStack_ = []; + this.aStack_ = []; + this.currentPath_ = []; + + // Canvas context properties + this.strokeStyle = '#000'; + this.fillStyle = '#000'; + + this.lineWidth = 1; + this.lineJoin = 'miter'; + this.lineCap = 'butt'; + this.miterLimit = Z * 1; + this.globalAlpha = 1; + this.font = '10px sans-serif'; + this.textAlign = 'left'; + this.textBaseline = 'alphabetic'; + this.canvas = canvasElement; + + var cssText = 'width:' + canvasElement.clientWidth + 'px;height:' + + canvasElement.clientHeight + 'px;overflow:hidden;position:absolute'; + var el = canvasElement.ownerDocument.createElement('div'); + el.style.cssText = cssText; + canvasElement.appendChild(el); + + var overlayEl = el.cloneNode(false); + // Use a non transparent background. + overlayEl.style.backgroundColor = 'red'; + overlayEl.style.filter = 'alpha(opacity=0)'; + canvasElement.appendChild(overlayEl); + + this.element_ = el; + this.arcScaleX_ = 1; + this.arcScaleY_ = 1; + this.lineScale_ = 1; + } + + var contextPrototype = CanvasRenderingContext2D_.prototype; + contextPrototype.clearRect = function() { + if (this.textMeasureEl_) { + this.textMeasureEl_.removeNode(true); + this.textMeasureEl_ = null; + } + this.element_.innerHTML = ''; + }; + + contextPrototype.beginPath = function() { + // TODO: Branch current matrix so that save/restore has no effect + // as per safari docs. + this.currentPath_ = []; + }; + + contextPrototype.moveTo = function(aX, aY) { + var p = this.getCoords_(aX, aY); + this.currentPath_.push({type: 'moveTo', x: p.x, y: p.y}); + this.currentX_ = p.x; + this.currentY_ = p.y; + }; + + contextPrototype.lineTo = function(aX, aY) { + var p = this.getCoords_(aX, aY); + this.currentPath_.push({type: 'lineTo', x: p.x, y: p.y}); + + this.currentX_ = p.x; + this.currentY_ = p.y; + }; + + contextPrototype.bezierCurveTo = function(aCP1x, aCP1y, + aCP2x, aCP2y, + aX, aY) { + var p = this.getCoords_(aX, aY); + var cp1 = this.getCoords_(aCP1x, aCP1y); + var cp2 = this.getCoords_(aCP2x, aCP2y); + bezierCurveTo(this, cp1, cp2, p); + }; + + // Helper function that takes the already fixed cordinates. + function bezierCurveTo(self, cp1, cp2, p) { + self.currentPath_.push({ + type: 'bezierCurveTo', + cp1x: cp1.x, + cp1y: cp1.y, + cp2x: cp2.x, + cp2y: cp2.y, + x: p.x, + y: p.y + }); + self.currentX_ = p.x; + self.currentY_ = p.y; + } + + contextPrototype.quadraticCurveTo = function(aCPx, aCPy, aX, aY) { + // the following is lifted almost directly from + // http://developer.mozilla.org/en/docs/Canvas_tutorial:Drawing_shapes + + var cp = this.getCoords_(aCPx, aCPy); + var p = this.getCoords_(aX, aY); + + var cp1 = { + x: this.currentX_ + 2.0 / 3.0 * (cp.x - this.currentX_), + y: this.currentY_ + 2.0 / 3.0 * (cp.y - this.currentY_) + }; + var cp2 = { + x: cp1.x + (p.x - this.currentX_) / 3.0, + y: cp1.y + (p.y - this.currentY_) / 3.0 + }; + + bezierCurveTo(this, cp1, cp2, p); + }; + + contextPrototype.arc = function(aX, aY, aRadius, + aStartAngle, aEndAngle, aClockwise) { + aRadius *= Z; + var arcType = aClockwise ? 'at' : 'wa'; + + var xStart = aX + mc(aStartAngle) * aRadius - Z2; + var yStart = aY + ms(aStartAngle) * aRadius - Z2; + + var xEnd = aX + mc(aEndAngle) * aRadius - Z2; + var yEnd = aY + ms(aEndAngle) * aRadius - Z2; + + // IE won't render arches drawn counter clockwise if xStart == xEnd. + if (xStart == xEnd && !aClockwise) { + xStart += 0.125; // Offset xStart by 1/80 of a pixel. Use something + // that can be represented in binary + } + + var p = this.getCoords_(aX, aY); + var pStart = this.getCoords_(xStart, yStart); + var pEnd = this.getCoords_(xEnd, yEnd); + + this.currentPath_.push({type: arcType, + x: p.x, + y: p.y, + radius: aRadius, + xStart: pStart.x, + yStart: pStart.y, + xEnd: pEnd.x, + yEnd: pEnd.y}); + + }; + + contextPrototype.rect = function(aX, aY, aWidth, aHeight) { + this.moveTo(aX, aY); + this.lineTo(aX + aWidth, aY); + this.lineTo(aX + aWidth, aY + aHeight); + this.lineTo(aX, aY + aHeight); + this.closePath(); + }; + + contextPrototype.strokeRect = function(aX, aY, aWidth, aHeight) { + var oldPath = this.currentPath_; + this.beginPath(); + + this.moveTo(aX, aY); + this.lineTo(aX + aWidth, aY); + this.lineTo(aX + aWidth, aY + aHeight); + this.lineTo(aX, aY + aHeight); + this.closePath(); + this.stroke(); + + this.currentPath_ = oldPath; + }; + + contextPrototype.fillRect = function(aX, aY, aWidth, aHeight) { + var oldPath = this.currentPath_; + this.beginPath(); + + this.moveTo(aX, aY); + this.lineTo(aX + aWidth, aY); + this.lineTo(aX + aWidth, aY + aHeight); + this.lineTo(aX, aY + aHeight); + this.closePath(); + this.fill(); + + this.currentPath_ = oldPath; + }; + + contextPrototype.createLinearGradient = function(aX0, aY0, aX1, aY1) { + var gradient = new CanvasGradient_('gradient'); + gradient.x0_ = aX0; + gradient.y0_ = aY0; + gradient.x1_ = aX1; + gradient.y1_ = aY1; + return gradient; + }; + + contextPrototype.createRadialGradient = function(aX0, aY0, aR0, + aX1, aY1, aR1) { + var gradient = new CanvasGradient_('gradientradial'); + gradient.x0_ = aX0; + gradient.y0_ = aY0; + gradient.r0_ = aR0; + gradient.x1_ = aX1; + gradient.y1_ = aY1; + gradient.r1_ = aR1; + return gradient; + }; + + contextPrototype.drawImage = function(image, var_args) { + var dx, dy, dw, dh, sx, sy, sw, sh; + + // to find the original width we overide the width and height + var oldRuntimeWidth = image.runtimeStyle.width; + var oldRuntimeHeight = image.runtimeStyle.height; + image.runtimeStyle.width = 'auto'; + image.runtimeStyle.height = 'auto'; + + // get the original size + var w = image.width; + var h = image.height; + + // and remove overides + image.runtimeStyle.width = oldRuntimeWidth; + image.runtimeStyle.height = oldRuntimeHeight; + + if (arguments.length == 3) { + dx = arguments[1]; + dy = arguments[2]; + sx = sy = 0; + sw = dw = w; + sh = dh = h; + } else if (arguments.length == 5) { + dx = arguments[1]; + dy = arguments[2]; + dw = arguments[3]; + dh = arguments[4]; + sx = sy = 0; + sw = w; + sh = h; + } else if (arguments.length == 9) { + sx = arguments[1]; + sy = arguments[2]; + sw = arguments[3]; + sh = arguments[4]; + dx = arguments[5]; + dy = arguments[6]; + dw = arguments[7]; + dh = arguments[8]; + } else { + throw Error('Invalid number of arguments'); + } + + var d = this.getCoords_(dx, dy); + + var w2 = sw / 2; + var h2 = sh / 2; + + var vmlStr = []; + + var W = 10; + var H = 10; + + // For some reason that I've now forgotten, using divs didn't work + vmlStr.push(' <g_vml_:group', + ' coordsize="', Z * W, ',', Z * H, '"', + ' coordorigin="0,0"' , + ' style="width:', W, 'px;height:', H, 'px;position:absolute;'); + + // If filters are necessary (rotation exists), create them + // filters are bog-slow, so only create them if abbsolutely necessary + // The following check doesn't account for skews (which don't exist + // in the canvas spec (yet) anyway. + + if (this.m_[0][0] != 1 || this.m_[0][1] || + this.m_[1][1] != 1 || this.m_[1][0]) { + var filter = []; + + // Note the 12/21 reversal + filter.push('M11=', this.m_[0][0], ',', + 'M12=', this.m_[1][0], ',', + 'M21=', this.m_[0][1], ',', + 'M22=', this.m_[1][1], ',', + 'Dx=', mr(d.x / Z), ',', + 'Dy=', mr(d.y / Z), ''); + + // Bounding box calculation (need to minimize displayed area so that + // filters don't waste time on unused pixels. + var max = d; + var c2 = this.getCoords_(dx + dw, dy); + var c3 = this.getCoords_(dx, dy + dh); + var c4 = this.getCoords_(dx + dw, dy + dh); + + max.x = m.max(max.x, c2.x, c3.x, c4.x); + max.y = m.max(max.y, c2.y, c3.y, c4.y); + + vmlStr.push('padding:0 ', mr(max.x / Z), 'px ', mr(max.y / Z), + 'px 0;filter:progid:DXImageTransform.Microsoft.Matrix(', + filter.join(''), ", sizingmethod='clip');"); + + } else { + vmlStr.push('top:', mr(d.y / Z), 'px;left:', mr(d.x / Z), 'px;'); + } + + vmlStr.push(' ">' , + '<g_vml_:image src="', image.src, '"', + ' style="width:', Z * dw, 'px;', + ' height:', Z * dh, 'px"', + ' cropleft="', sx / w, '"', + ' croptop="', sy / h, '"', + ' cropright="', (w - sx - sw) / w, '"', + ' cropbottom="', (h - sy - sh) / h, '"', + ' />', + '</g_vml_:group>'); + + this.element_.insertAdjacentHTML('BeforeEnd', vmlStr.join('')); + }; + + contextPrototype.stroke = function(aFill) { + var lineStr = []; + var lineOpen = false; + + var W = 10; + var H = 10; + + lineStr.push('<g_vml_:shape', + ' filled="', !!aFill, '"', + ' style="position:absolute;width:', W, 'px;height:', H, 'px;"', + ' coordorigin="0,0"', + ' coordsize="', Z * W, ',', Z * H, '"', + ' stroked="', !aFill, '"', + ' path="'); + + var newSeq = false; + var min = {x: null, y: null}; + var max = {x: null, y: null}; + + for (var i = 0; i < this.currentPath_.length; i++) { + var p = this.currentPath_[i]; + var c; + + switch (p.type) { + case 'moveTo': + c = p; + lineStr.push(' m ', mr(p.x), ',', mr(p.y)); + break; + case 'lineTo': + lineStr.push(' l ', mr(p.x), ',', mr(p.y)); + break; + case 'close': + lineStr.push(' x '); + p = null; + break; + case 'bezierCurveTo': + lineStr.push(' c ', + mr(p.cp1x), ',', mr(p.cp1y), ',', + mr(p.cp2x), ',', mr(p.cp2y), ',', + mr(p.x), ',', mr(p.y)); + break; + case 'at': + case 'wa': + lineStr.push(' ', p.type, ' ', + mr(p.x - this.arcScaleX_ * p.radius), ',', + mr(p.y - this.arcScaleY_ * p.radius), ' ', + mr(p.x + this.arcScaleX_ * p.radius), ',', + mr(p.y + this.arcScaleY_ * p.radius), ' ', + mr(p.xStart), ',', mr(p.yStart), ' ', + mr(p.xEnd), ',', mr(p.yEnd)); + break; + } + + + // TODO: Following is broken for curves due to + // move to proper paths. + + // Figure out dimensions so we can do gradient fills + // properly + if (p) { + if (min.x == null || p.x < min.x) { + min.x = p.x; + } + if (max.x == null || p.x > max.x) { + max.x = p.x; + } + if (min.y == null || p.y < min.y) { + min.y = p.y; + } + if (max.y == null || p.y > max.y) { + max.y = p.y; + } + } + } + lineStr.push(' ">'); + + if (!aFill) { + appendStroke(this, lineStr); + } else { + appendFill(this, lineStr, min, max); + } + + lineStr.push('</g_vml_:shape>'); + + this.element_.insertAdjacentHTML('beforeEnd', lineStr.join('')); + }; + + function appendStroke(ctx, lineStr) { + var a = processStyle(ctx.strokeStyle); + var color = a.color; + var opacity = a.alpha * ctx.globalAlpha; + var lineWidth = ctx.lineScale_ * ctx.lineWidth; + + // VML cannot correctly render a line if the width is less than 1px. + // In that case, we dilute the color to make the line look thinner. + if (lineWidth < 1) { + opacity *= lineWidth; + } + + lineStr.push( + '<g_vml_:stroke', + ' opacity="', opacity, '"', + ' joinstyle="', ctx.lineJoin, '"', + ' miterlimit="', ctx.miterLimit, '"', + ' endcap="', processLineCap(ctx.lineCap), '"', + ' weight="', lineWidth, 'px"', + ' color="', color, '" />' + ); + } + + function appendFill(ctx, lineStr, min, max) { + var fillStyle = ctx.fillStyle; + var arcScaleX = ctx.arcScaleX_; + var arcScaleY = ctx.arcScaleY_; + var width = max.x - min.x; + var height = max.y - min.y; + if (fillStyle instanceof CanvasGradient_) { + // TODO: Gradients transformed with the transformation matrix. + var angle = 0; + var focus = {x: 0, y: 0}; + + // additional offset + var shift = 0; + // scale factor for offset + var expansion = 1; + + if (fillStyle.type_ == 'gradient') { + var x0 = fillStyle.x0_ / arcScaleX; + var y0 = fillStyle.y0_ / arcScaleY; + var x1 = fillStyle.x1_ / arcScaleX; + var y1 = fillStyle.y1_ / arcScaleY; + var p0 = ctx.getCoords_(x0, y0); + var p1 = ctx.getCoords_(x1, y1); + var dx = p1.x - p0.x; + var dy = p1.y - p0.y; + angle = Math.atan2(dx, dy) * 180 / Math.PI; + + // The angle should be a non-negative number. + if (angle < 0) { + angle += 360; + } + + // Very small angles produce an unexpected result because they are + // converted to a scientific notation string. + if (angle < 1e-6) { + angle = 0; + } + } else { + var p0 = ctx.getCoords_(fillStyle.x0_, fillStyle.y0_); + focus = { + x: (p0.x - min.x) / width, + y: (p0.y - min.y) / height + }; + + width /= arcScaleX * Z; + height /= arcScaleY * Z; + var dimension = m.max(width, height); + shift = 2 * fillStyle.r0_ / dimension; + expansion = 2 * fillStyle.r1_ / dimension - shift; + } + + // We need to sort the color stops in ascending order by offset, + // otherwise IE won't interpret it correctly. + var stops = fillStyle.colors_; + stops.sort(function(cs1, cs2) { + return cs1.offset - cs2.offset; + }); + + var length = stops.length; + var color1 = stops[0].color; + var color2 = stops[length - 1].color; + var opacity1 = stops[0].alpha * ctx.globalAlpha; + var opacity2 = stops[length - 1].alpha * ctx.globalAlpha; + + var colors = []; + for (var i = 0; i < length; i++) { + var stop = stops[i]; + colors.push(stop.offset * expansion + shift + ' ' + stop.color); + } + + // When colors attribute is used, the meanings of opacity and o:opacity2 + // are reversed. + lineStr.push('<g_vml_:fill type="', fillStyle.type_, '"', + ' method="none" focus="100%"', + ' color="', color1, '"', + ' color2="', color2, '"', + ' colors="', colors.join(','), '"', + ' opacity="', opacity2, '"', + ' g_o_:opacity2="', opacity1, '"', + ' angle="', angle, '"', + ' focusposition="', focus.x, ',', focus.y, '" />'); + } else if (fillStyle instanceof CanvasPattern_) { + if (width && height) { + var deltaLeft = -min.x; + var deltaTop = -min.y; + lineStr.push('<g_vml_:fill', + ' position="', + deltaLeft / width * arcScaleX * arcScaleX, ',', + deltaTop / height * arcScaleY * arcScaleY, '"', + ' type="tile"', + // TODO: Figure out the correct size to fit the scale. + //' size="', w, 'px ', h, 'px"', + ' src="', fillStyle.src_, '" />'); + } + } else { + var a = processStyle(ctx.fillStyle); + var color = a.color; + var opacity = a.alpha * ctx.globalAlpha; + lineStr.push('<g_vml_:fill color="', color, '" opacity="', opacity, + '" />'); + } + } + + contextPrototype.fill = function() { + this.stroke(true); + }; + + contextPrototype.closePath = function() { + this.currentPath_.push({type: 'close'}); + }; + + /** + * @private + */ + contextPrototype.getCoords_ = function(aX, aY) { + var m = this.m_; + return { + x: Z * (aX * m[0][0] + aY * m[1][0] + m[2][0]) - Z2, + y: Z * (aX * m[0][1] + aY * m[1][1] + m[2][1]) - Z2 + }; + }; + + contextPrototype.save = function() { + var o = {}; + copyState(this, o); + this.aStack_.push(o); + this.mStack_.push(this.m_); + this.m_ = matrixMultiply(createMatrixIdentity(), this.m_); + }; + + contextPrototype.restore = function() { + if (this.aStack_.length) { + copyState(this.aStack_.pop(), this); + this.m_ = this.mStack_.pop(); + } + }; + + function matrixIsFinite(m) { + return isFinite(m[0][0]) && isFinite(m[0][1]) && + isFinite(m[1][0]) && isFinite(m[1][1]) && + isFinite(m[2][0]) && isFinite(m[2][1]); + } + + function setM(ctx, m, updateLineScale) { + if (!matrixIsFinite(m)) { + return; + } + ctx.m_ = m; + + if (updateLineScale) { + // Get the line scale. + // Determinant of this.m_ means how much the area is enlarged by the + // transformation. So its square root can be used as a scale factor + // for width. + var det = m[0][0] * m[1][1] - m[0][1] * m[1][0]; + ctx.lineScale_ = sqrt(abs(det)); + } + } + + contextPrototype.translate = function(aX, aY) { + var m1 = [ + [1, 0, 0], + [0, 1, 0], + [aX, aY, 1] + ]; + + setM(this, matrixMultiply(m1, this.m_), false); + }; + + contextPrototype.rotate = function(aRot) { + var c = mc(aRot); + var s = ms(aRot); + + var m1 = [ + [c, s, 0], + [-s, c, 0], + [0, 0, 1] + ]; + + setM(this, matrixMultiply(m1, this.m_), false); + }; + + contextPrototype.scale = function(aX, aY) { + this.arcScaleX_ *= aX; + this.arcScaleY_ *= aY; + var m1 = [ + [aX, 0, 0], + [0, aY, 0], + [0, 0, 1] + ]; + + setM(this, matrixMultiply(m1, this.m_), true); + }; + + contextPrototype.transform = function(m11, m12, m21, m22, dx, dy) { + var m1 = [ + [m11, m12, 0], + [m21, m22, 0], + [dx, dy, 1] + ]; + + setM(this, matrixMultiply(m1, this.m_), true); + }; + + contextPrototype.setTransform = function(m11, m12, m21, m22, dx, dy) { + var m = [ + [m11, m12, 0], + [m21, m22, 0], + [dx, dy, 1] + ]; + + setM(this, m, true); + }; + + /** + * The text drawing function. + * The maxWidth argument isn't taken in account, since no browser supports + * it yet. + */ + contextPrototype.drawText_ = function(text, x, y, maxWidth, stroke) { + var m = this.m_, + delta = 1000, + left = 0, + right = delta, + offset = {x: 0, y: 0}, + lineStr = []; + + var fontStyle = getComputedStyle(processFontStyle(this.font), + this.element_); + + var fontStyleString = buildStyle(fontStyle); + + var elementStyle = this.element_.currentStyle; + var textAlign = this.textAlign.toLowerCase(); + switch (textAlign) { + case 'left': + case 'center': + case 'right': + break; + case 'end': + textAlign = elementStyle.direction == 'ltr' ? 'right' : 'left'; + break; + case 'start': + textAlign = elementStyle.direction == 'rtl' ? 'right' : 'left'; + break; + default: + textAlign = 'left'; + } + + // 1.75 is an arbitrary number, as there is no info about the text baseline + switch (this.textBaseline) { + case 'hanging': + case 'top': + offset.y = fontStyle.size / 1.75; + break; + case 'middle': + break; + default: + case null: + case 'alphabetic': + case 'ideographic': + case 'bottom': + offset.y = -fontStyle.size / 2.25; + break; + } + + switch(textAlign) { + case 'right': + left = delta; + right = 0.05; + break; + case 'center': + left = right = delta / 2; + break; + } + + var d = this.getCoords_(x + offset.x, y + offset.y); + + lineStr.push('<g_vml_:line from="', -left ,' 0" to="', right ,' 0.05" ', + ' coordsize="100 100" coordorigin="0 0"', + ' filled="', !stroke, '" stroked="', !!stroke, + '" style="position:absolute;width:1px;height:1px;">'); + + if (stroke) { + appendStroke(this, lineStr); + } else { + // TODO: Fix the min and max params. + appendFill(this, lineStr, {x: -left, y: 0}, + {x: right, y: fontStyle.size}); + } + + var skewM = m[0][0].toFixed(3) + ',' + m[1][0].toFixed(3) + ',' + + m[0][1].toFixed(3) + ',' + m[1][1].toFixed(3) + ',0,0'; + + var skewOffset = mr(d.x / Z) + ',' + mr(d.y / Z); + + lineStr.push('<g_vml_:skew on="t" matrix="', skewM ,'" ', + ' offset="', skewOffset, '" origin="', left ,' 0" />', + '<g_vml_:path textpathok="true" />', + '<g_vml_:textpath on="true" string="', + encodeHtmlAttribute(text), + '" style="v-text-align:', textAlign, + ';font:', encodeHtmlAttribute(fontStyleString), + '" /></g_vml_:line>'); + + this.element_.insertAdjacentHTML('beforeEnd', lineStr.join('')); + }; + + contextPrototype.fillText = function(text, x, y, maxWidth) { + this.drawText_(text, x, y, maxWidth, false); + }; + + contextPrototype.strokeText = function(text, x, y, maxWidth) { + this.drawText_(text, x, y, maxWidth, true); + }; + + contextPrototype.measureText = function(text) { + if (!this.textMeasureEl_) { + var s = '<span style="position:absolute;' + + 'top:-20000px;left:0;padding:0;margin:0;border:none;' + + 'white-space:pre;"></span>'; + this.element_.insertAdjacentHTML('beforeEnd', s); + this.textMeasureEl_ = this.element_.lastChild; + } + var doc = this.element_.ownerDocument; + this.textMeasureEl_.innerHTML = ''; + this.textMeasureEl_.style.font = this.font; + // Don't use innerHTML or innerText because they allow markup/whitespace. + this.textMeasureEl_.appendChild(doc.createTextNode(text)); + return {width: this.textMeasureEl_.offsetWidth}; + }; + + /******** STUBS ********/ + contextPrototype.clip = function() { + // TODO: Implement + }; + + contextPrototype.arcTo = function() { + // TODO: Implement + }; + + contextPrototype.createPattern = function(image, repetition) { + return new CanvasPattern_(image, repetition); + }; + + // Gradient / Pattern Stubs + function CanvasGradient_(aType) { + this.type_ = aType; + this.x0_ = 0; + this.y0_ = 0; + this.r0_ = 0; + this.x1_ = 0; + this.y1_ = 0; + this.r1_ = 0; + this.colors_ = []; + } + + CanvasGradient_.prototype.addColorStop = function(aOffset, aColor) { + aColor = processStyle(aColor); + this.colors_.push({offset: aOffset, + color: aColor.color, + alpha: aColor.alpha}); + }; + + function CanvasPattern_(image, repetition) { + assertImageIsValid(image); + switch (repetition) { + case 'repeat': + case null: + case '': + this.repetition_ = 'repeat'; + break + case 'repeat-x': + case 'repeat-y': + case 'no-repeat': + this.repetition_ = repetition; + break; + default: + throwException('SYNTAX_ERR'); + } + + this.src_ = image.src; + this.width_ = image.width; + this.height_ = image.height; + } + + function throwException(s) { + throw new DOMException_(s); + } + + function assertImageIsValid(img) { + if (!img || img.nodeType != 1 || img.tagName != 'IMG') { + throwException('TYPE_MISMATCH_ERR'); + } + if (img.readyState != 'complete') { + throwException('INVALID_STATE_ERR'); + } + } + + function DOMException_(s) { + this.code = this[s]; + this.message = s +': DOM Exception ' + this.code; + } + var p = DOMException_.prototype = new Error; + p.INDEX_SIZE_ERR = 1; + p.DOMSTRING_SIZE_ERR = 2; + p.HIERARCHY_REQUEST_ERR = 3; + p.WRONG_DOCUMENT_ERR = 4; + p.INVALID_CHARACTER_ERR = 5; + p.NO_DATA_ALLOWED_ERR = 6; + p.NO_MODIFICATION_ALLOWED_ERR = 7; + p.NOT_FOUND_ERR = 8; + p.NOT_SUPPORTED_ERR = 9; + p.INUSE_ATTRIBUTE_ERR = 10; + p.INVALID_STATE_ERR = 11; + p.SYNTAX_ERR = 12; + p.INVALID_MODIFICATION_ERR = 13; + p.NAMESPACE_ERR = 14; + p.INVALID_ACCESS_ERR = 15; + p.VALIDATION_ERR = 16; + p.TYPE_MISMATCH_ERR = 17; + + // set up externs + G_vmlCanvasManager = G_vmlCanvasManager_; + CanvasRenderingContext2D = CanvasRenderingContext2D_; + CanvasGradient = CanvasGradient_; + CanvasPattern = CanvasPattern_; + DOMException = DOMException_; +})(); + +} // if diff --git a/schall/static/RGraph/images/alex.png b/schall/static/RGraph/images/alex.png Binary files differnew file mode 100644 index 0000000..b4bce5e --- /dev/null +++ b/schall/static/RGraph/images/alex.png diff --git a/schall/static/RGraph/images/analogo.gif b/schall/static/RGraph/images/analogo.gif Binary files differnew file mode 100644 index 0000000..9fd0aad --- /dev/null +++ b/schall/static/RGraph/images/analogo.gif diff --git a/schall/static/RGraph/images/analogo.png b/schall/static/RGraph/images/analogo.png Binary files differnew file mode 100644 index 0000000..8e92147 --- /dev/null +++ b/schall/static/RGraph/images/analogo.png diff --git a/schall/static/RGraph/images/atom.png b/schall/static/RGraph/images/atom.png Binary files differnew file mode 100644 index 0000000..ac23fd7 --- /dev/null +++ b/schall/static/RGraph/images/atom.png diff --git a/schall/static/RGraph/images/bara1.gif b/schall/static/RGraph/images/bara1.gif Binary files differnew file mode 100644 index 0000000..9cdd5c2 --- /dev/null +++ b/schall/static/RGraph/images/bara1.gif diff --git a/schall/static/RGraph/images/bara1.png b/schall/static/RGraph/images/bara1.png Binary files differnew file mode 100644 index 0000000..5b68024 --- /dev/null +++ b/schall/static/RGraph/images/bara1.png diff --git a/schall/static/RGraph/images/bara16.gif b/schall/static/RGraph/images/bara16.gif Binary files differnew file mode 100644 index 0000000..d3bea17 --- /dev/null +++ b/schall/static/RGraph/images/bara16.gif diff --git a/schall/static/RGraph/images/bara16.png b/schall/static/RGraph/images/bara16.png Binary files differnew file mode 100644 index 0000000..2e085c2 --- /dev/null +++ b/schall/static/RGraph/images/bara16.png diff --git a/schall/static/RGraph/images/bara2.gif b/schall/static/RGraph/images/bara2.gif Binary files differnew file mode 100644 index 0000000..1b97822 --- /dev/null +++ b/schall/static/RGraph/images/bara2.gif diff --git a/schall/static/RGraph/images/bara2.png b/schall/static/RGraph/images/bara2.png Binary files differnew file mode 100644 index 0000000..ec8904d --- /dev/null +++ b/schall/static/RGraph/images/bara2.png diff --git a/schall/static/RGraph/images/bara32.gif b/schall/static/RGraph/images/bara32.gif Binary files differnew file mode 100644 index 0000000..919e455 --- /dev/null +++ b/schall/static/RGraph/images/bara32.gif diff --git a/schall/static/RGraph/images/bara32.png b/schall/static/RGraph/images/bara32.png Binary files differnew file mode 100644 index 0000000..f2f1e60 --- /dev/null +++ b/schall/static/RGraph/images/bara32.png diff --git a/schall/static/RGraph/images/bara4.gif b/schall/static/RGraph/images/bara4.gif Binary files differnew file mode 100644 index 0000000..5f2200b --- /dev/null +++ b/schall/static/RGraph/images/bara4.gif diff --git a/schall/static/RGraph/images/bara4.png b/schall/static/RGraph/images/bara4.png Binary files differnew file mode 100644 index 0000000..77a114b --- /dev/null +++ b/schall/static/RGraph/images/bara4.png diff --git a/schall/static/RGraph/images/bara8.gif b/schall/static/RGraph/images/bara8.gif Binary files differnew file mode 100644 index 0000000..dba4120 --- /dev/null +++ b/schall/static/RGraph/images/bara8.gif diff --git a/schall/static/RGraph/images/bara8.png b/schall/static/RGraph/images/bara8.png Binary files differnew file mode 100644 index 0000000..a318390 --- /dev/null +++ b/schall/static/RGraph/images/bara8.png diff --git a/schall/static/RGraph/images/barb1.gif b/schall/static/RGraph/images/barb1.gif Binary files differnew file mode 100644 index 0000000..49a709a --- /dev/null +++ b/schall/static/RGraph/images/barb1.gif diff --git a/schall/static/RGraph/images/barb1.png b/schall/static/RGraph/images/barb1.png Binary files differnew file mode 100644 index 0000000..5939550 --- /dev/null +++ b/schall/static/RGraph/images/barb1.png diff --git a/schall/static/RGraph/images/barb16.gif b/schall/static/RGraph/images/barb16.gif Binary files differnew file mode 100644 index 0000000..7d327d4 --- /dev/null +++ b/schall/static/RGraph/images/barb16.gif diff --git a/schall/static/RGraph/images/barb16.png b/schall/static/RGraph/images/barb16.png Binary files differnew file mode 100644 index 0000000..2c78916 --- /dev/null +++ b/schall/static/RGraph/images/barb16.png diff --git a/schall/static/RGraph/images/barb2.gif b/schall/static/RGraph/images/barb2.gif Binary files differnew file mode 100644 index 0000000..d8fcec2 --- /dev/null +++ b/schall/static/RGraph/images/barb2.gif diff --git a/schall/static/RGraph/images/barb2.png b/schall/static/RGraph/images/barb2.png Binary files differnew file mode 100644 index 0000000..cd365f5 --- /dev/null +++ b/schall/static/RGraph/images/barb2.png diff --git a/schall/static/RGraph/images/barb32.gif b/schall/static/RGraph/images/barb32.gif Binary files differnew file mode 100644 index 0000000..5579e9d --- /dev/null +++ b/schall/static/RGraph/images/barb32.gif diff --git a/schall/static/RGraph/images/barb32.png b/schall/static/RGraph/images/barb32.png Binary files differnew file mode 100644 index 0000000..fe4049c --- /dev/null +++ b/schall/static/RGraph/images/barb32.png diff --git a/schall/static/RGraph/images/barb4.gif b/schall/static/RGraph/images/barb4.gif Binary files differnew file mode 100644 index 0000000..726cd51 --- /dev/null +++ b/schall/static/RGraph/images/barb4.gif diff --git a/schall/static/RGraph/images/barb4.png b/schall/static/RGraph/images/barb4.png Binary files differnew file mode 100644 index 0000000..13e38e9 --- /dev/null +++ b/schall/static/RGraph/images/barb4.png diff --git a/schall/static/RGraph/images/barb8.gif b/schall/static/RGraph/images/barb8.gif Binary files differnew file mode 100644 index 0000000..eb82f0c --- /dev/null +++ b/schall/static/RGraph/images/barb8.gif diff --git a/schall/static/RGraph/images/barb8.png b/schall/static/RGraph/images/barb8.png Binary files differnew file mode 100644 index 0000000..00db16c --- /dev/null +++ b/schall/static/RGraph/images/barb8.png diff --git a/schall/static/RGraph/images/barc1.gif b/schall/static/RGraph/images/barc1.gif Binary files differnew file mode 100644 index 0000000..ac54bcd --- /dev/null +++ b/schall/static/RGraph/images/barc1.gif diff --git a/schall/static/RGraph/images/barc1.png b/schall/static/RGraph/images/barc1.png Binary files differnew file mode 100644 index 0000000..797123b --- /dev/null +++ b/schall/static/RGraph/images/barc1.png diff --git a/schall/static/RGraph/images/barc16.gif b/schall/static/RGraph/images/barc16.gif Binary files differnew file mode 100644 index 0000000..e81b8b4 --- /dev/null +++ b/schall/static/RGraph/images/barc16.gif diff --git a/schall/static/RGraph/images/barc16.png b/schall/static/RGraph/images/barc16.png Binary files differnew file mode 100644 index 0000000..9309f18 --- /dev/null +++ b/schall/static/RGraph/images/barc16.png diff --git a/schall/static/RGraph/images/barc2.gif b/schall/static/RGraph/images/barc2.gif Binary files differnew file mode 100644 index 0000000..c31c122 --- /dev/null +++ b/schall/static/RGraph/images/barc2.gif diff --git a/schall/static/RGraph/images/barc2.png b/schall/static/RGraph/images/barc2.png Binary files differnew file mode 100644 index 0000000..e9894c6 --- /dev/null +++ b/schall/static/RGraph/images/barc2.png diff --git a/schall/static/RGraph/images/barc32.gif b/schall/static/RGraph/images/barc32.gif Binary files differnew file mode 100644 index 0000000..a2d943b --- /dev/null +++ b/schall/static/RGraph/images/barc32.gif diff --git a/schall/static/RGraph/images/barc32.png b/schall/static/RGraph/images/barc32.png Binary files differnew file mode 100644 index 0000000..25bf53c --- /dev/null +++ b/schall/static/RGraph/images/barc32.png diff --git a/schall/static/RGraph/images/barc4.gif b/schall/static/RGraph/images/barc4.gif Binary files differnew file mode 100644 index 0000000..757f05e --- /dev/null +++ b/schall/static/RGraph/images/barc4.gif diff --git a/schall/static/RGraph/images/barc4.png b/schall/static/RGraph/images/barc4.png Binary files differnew file mode 100644 index 0000000..10f4238 --- /dev/null +++ b/schall/static/RGraph/images/barc4.png diff --git a/schall/static/RGraph/images/barc8.gif b/schall/static/RGraph/images/barc8.gif Binary files differnew file mode 100644 index 0000000..3dea117 --- /dev/null +++ b/schall/static/RGraph/images/barc8.gif diff --git a/schall/static/RGraph/images/barc8.png b/schall/static/RGraph/images/barc8.png Binary files differnew file mode 100644 index 0000000..b9550cd --- /dev/null +++ b/schall/static/RGraph/images/barc8.png diff --git a/schall/static/RGraph/images/bard1.gif b/schall/static/RGraph/images/bard1.gif Binary files differnew file mode 100644 index 0000000..20df12a --- /dev/null +++ b/schall/static/RGraph/images/bard1.gif diff --git a/schall/static/RGraph/images/bard1.png b/schall/static/RGraph/images/bard1.png Binary files differnew file mode 100644 index 0000000..08e8c06 --- /dev/null +++ b/schall/static/RGraph/images/bard1.png diff --git a/schall/static/RGraph/images/bard16.gif b/schall/static/RGraph/images/bard16.gif Binary files differnew file mode 100644 index 0000000..02effec --- /dev/null +++ b/schall/static/RGraph/images/bard16.gif diff --git a/schall/static/RGraph/images/bard16.png b/schall/static/RGraph/images/bard16.png Binary files differnew file mode 100644 index 0000000..c5061e5 --- /dev/null +++ b/schall/static/RGraph/images/bard16.png diff --git a/schall/static/RGraph/images/bard2.gif b/schall/static/RGraph/images/bard2.gif Binary files differnew file mode 100644 index 0000000..5ff157e --- /dev/null +++ b/schall/static/RGraph/images/bard2.gif diff --git a/schall/static/RGraph/images/bard2.png b/schall/static/RGraph/images/bard2.png Binary files differnew file mode 100644 index 0000000..f56db0a --- /dev/null +++ b/schall/static/RGraph/images/bard2.png diff --git a/schall/static/RGraph/images/bard32.gif b/schall/static/RGraph/images/bard32.gif Binary files differnew file mode 100644 index 0000000..da07a92 --- /dev/null +++ b/schall/static/RGraph/images/bard32.gif diff --git a/schall/static/RGraph/images/bard32.png b/schall/static/RGraph/images/bard32.png Binary files differnew file mode 100644 index 0000000..8b507f4 --- /dev/null +++ b/schall/static/RGraph/images/bard32.png diff --git a/schall/static/RGraph/images/bard4.gif b/schall/static/RGraph/images/bard4.gif Binary files differnew file mode 100644 index 0000000..af9bbf4 --- /dev/null +++ b/schall/static/RGraph/images/bard4.gif diff --git a/schall/static/RGraph/images/bard4.png b/schall/static/RGraph/images/bard4.png Binary files differnew file mode 100644 index 0000000..7f6ff82 --- /dev/null +++ b/schall/static/RGraph/images/bard4.png diff --git a/schall/static/RGraph/images/bard8.gif b/schall/static/RGraph/images/bard8.gif Binary files differnew file mode 100644 index 0000000..b9c0fab --- /dev/null +++ b/schall/static/RGraph/images/bard8.gif diff --git a/schall/static/RGraph/images/bard8.png b/schall/static/RGraph/images/bard8.png Binary files differnew file mode 100644 index 0000000..c49f78b --- /dev/null +++ b/schall/static/RGraph/images/bard8.png diff --git a/schall/static/RGraph/images/bare1.gif b/schall/static/RGraph/images/bare1.gif Binary files differnew file mode 100644 index 0000000..12ef53f --- /dev/null +++ b/schall/static/RGraph/images/bare1.gif diff --git a/schall/static/RGraph/images/bare1.png b/schall/static/RGraph/images/bare1.png Binary files differnew file mode 100644 index 0000000..3dbd49a --- /dev/null +++ b/schall/static/RGraph/images/bare1.png diff --git a/schall/static/RGraph/images/bare16.gif b/schall/static/RGraph/images/bare16.gif Binary files differnew file mode 100644 index 0000000..1e06ff5 --- /dev/null +++ b/schall/static/RGraph/images/bare16.gif diff --git a/schall/static/RGraph/images/bare16.png b/schall/static/RGraph/images/bare16.png Binary files differnew file mode 100644 index 0000000..7b540c3 --- /dev/null +++ b/schall/static/RGraph/images/bare16.png diff --git a/schall/static/RGraph/images/bare2.gif b/schall/static/RGraph/images/bare2.gif Binary files differnew file mode 100644 index 0000000..b807ac5 --- /dev/null +++ b/schall/static/RGraph/images/bare2.gif diff --git a/schall/static/RGraph/images/bare2.png b/schall/static/RGraph/images/bare2.png Binary files differnew file mode 100644 index 0000000..f47d362 --- /dev/null +++ b/schall/static/RGraph/images/bare2.png diff --git a/schall/static/RGraph/images/bare32.gif b/schall/static/RGraph/images/bare32.gif Binary files differnew file mode 100644 index 0000000..6b7dae9 --- /dev/null +++ b/schall/static/RGraph/images/bare32.gif diff --git a/schall/static/RGraph/images/bare32.png b/schall/static/RGraph/images/bare32.png Binary files differnew file mode 100644 index 0000000..9497e24 --- /dev/null +++ b/schall/static/RGraph/images/bare32.png diff --git a/schall/static/RGraph/images/bare4.gif b/schall/static/RGraph/images/bare4.gif Binary files differnew file mode 100644 index 0000000..8cad311 --- /dev/null +++ b/schall/static/RGraph/images/bare4.gif diff --git a/schall/static/RGraph/images/bare4.png b/schall/static/RGraph/images/bare4.png Binary files differnew file mode 100644 index 0000000..55e9088 --- /dev/null +++ b/schall/static/RGraph/images/bare4.png diff --git a/schall/static/RGraph/images/bare8.gif b/schall/static/RGraph/images/bare8.gif Binary files differnew file mode 100644 index 0000000..9929573 --- /dev/null +++ b/schall/static/RGraph/images/bare8.gif diff --git a/schall/static/RGraph/images/bare8.png b/schall/static/RGraph/images/bare8.png Binary files differnew file mode 100644 index 0000000..3946294 --- /dev/null +++ b/schall/static/RGraph/images/bare8.png diff --git a/schall/static/RGraph/images/barf1.gif b/schall/static/RGraph/images/barf1.gif Binary files differnew file mode 100644 index 0000000..40ccb7b --- /dev/null +++ b/schall/static/RGraph/images/barf1.gif diff --git a/schall/static/RGraph/images/barf1.png b/schall/static/RGraph/images/barf1.png Binary files differnew file mode 100644 index 0000000..5b68024 --- /dev/null +++ b/schall/static/RGraph/images/barf1.png diff --git a/schall/static/RGraph/images/barf16.gif b/schall/static/RGraph/images/barf16.gif Binary files differnew file mode 100644 index 0000000..06da0a8 --- /dev/null +++ b/schall/static/RGraph/images/barf16.gif diff --git a/schall/static/RGraph/images/barf16.png b/schall/static/RGraph/images/barf16.png Binary files differnew file mode 100644 index 0000000..89e0f68 --- /dev/null +++ b/schall/static/RGraph/images/barf16.png diff --git a/schall/static/RGraph/images/barf2.gif b/schall/static/RGraph/images/barf2.gif Binary files differnew file mode 100644 index 0000000..b1bbdac --- /dev/null +++ b/schall/static/RGraph/images/barf2.gif diff --git a/schall/static/RGraph/images/barf2.png b/schall/static/RGraph/images/barf2.png Binary files differnew file mode 100644 index 0000000..0301e20 --- /dev/null +++ b/schall/static/RGraph/images/barf2.png diff --git a/schall/static/RGraph/images/barf32.gif b/schall/static/RGraph/images/barf32.gif Binary files differnew file mode 100644 index 0000000..7cc2992 --- /dev/null +++ b/schall/static/RGraph/images/barf32.gif diff --git a/schall/static/RGraph/images/barf32.png b/schall/static/RGraph/images/barf32.png Binary files differnew file mode 100644 index 0000000..8c30b58 --- /dev/null +++ b/schall/static/RGraph/images/barf32.png diff --git a/schall/static/RGraph/images/barf4.gif b/schall/static/RGraph/images/barf4.gif Binary files differnew file mode 100644 index 0000000..a321258 --- /dev/null +++ b/schall/static/RGraph/images/barf4.gif diff --git a/schall/static/RGraph/images/barf4.png b/schall/static/RGraph/images/barf4.png Binary files differnew file mode 100644 index 0000000..381e5ee --- /dev/null +++ b/schall/static/RGraph/images/barf4.png diff --git a/schall/static/RGraph/images/barf8.gif b/schall/static/RGraph/images/barf8.gif Binary files differnew file mode 100644 index 0000000..da63a1b --- /dev/null +++ b/schall/static/RGraph/images/barf8.gif diff --git a/schall/static/RGraph/images/barf8.png b/schall/static/RGraph/images/barf8.png Binary files differnew file mode 100644 index 0000000..4ea096a --- /dev/null +++ b/schall/static/RGraph/images/barf8.png diff --git a/schall/static/RGraph/images/barg1.gif b/schall/static/RGraph/images/barg1.gif Binary files differnew file mode 100644 index 0000000..b5a2201 --- /dev/null +++ b/schall/static/RGraph/images/barg1.gif diff --git a/schall/static/RGraph/images/barg1.png b/schall/static/RGraph/images/barg1.png Binary files differnew file mode 100644 index 0000000..4294349 --- /dev/null +++ b/schall/static/RGraph/images/barg1.png diff --git a/schall/static/RGraph/images/barg16.gif b/schall/static/RGraph/images/barg16.gif Binary files differnew file mode 100644 index 0000000..289b0e8 --- /dev/null +++ b/schall/static/RGraph/images/barg16.gif diff --git a/schall/static/RGraph/images/barg16.png b/schall/static/RGraph/images/barg16.png Binary files differnew file mode 100644 index 0000000..21696d5 --- /dev/null +++ b/schall/static/RGraph/images/barg16.png diff --git a/schall/static/RGraph/images/barg2.gif b/schall/static/RGraph/images/barg2.gif Binary files differnew file mode 100644 index 0000000..22dc684 --- /dev/null +++ b/schall/static/RGraph/images/barg2.gif diff --git a/schall/static/RGraph/images/barg2.png b/schall/static/RGraph/images/barg2.png Binary files differnew file mode 100644 index 0000000..c68a70f --- /dev/null +++ b/schall/static/RGraph/images/barg2.png diff --git a/schall/static/RGraph/images/barg32.gif b/schall/static/RGraph/images/barg32.gif Binary files differnew file mode 100644 index 0000000..b57f0a7 --- /dev/null +++ b/schall/static/RGraph/images/barg32.gif diff --git a/schall/static/RGraph/images/barg32.png b/schall/static/RGraph/images/barg32.png Binary files differnew file mode 100644 index 0000000..62f3d48 --- /dev/null +++ b/schall/static/RGraph/images/barg32.png diff --git a/schall/static/RGraph/images/barg4.gif b/schall/static/RGraph/images/barg4.gif Binary files differnew file mode 100644 index 0000000..927951f --- /dev/null +++ b/schall/static/RGraph/images/barg4.gif diff --git a/schall/static/RGraph/images/barg4.png b/schall/static/RGraph/images/barg4.png Binary files differnew file mode 100644 index 0000000..262d862 --- /dev/null +++ b/schall/static/RGraph/images/barg4.png diff --git a/schall/static/RGraph/images/barg8.gif b/schall/static/RGraph/images/barg8.gif Binary files differnew file mode 100644 index 0000000..625b9d6 --- /dev/null +++ b/schall/static/RGraph/images/barg8.gif diff --git a/schall/static/RGraph/images/barg8.png b/schall/static/RGraph/images/barg8.png Binary files differnew file mode 100644 index 0000000..a570403 --- /dev/null +++ b/schall/static/RGraph/images/barg8.png diff --git a/schall/static/RGraph/images/barh1.gif b/schall/static/RGraph/images/barh1.gif Binary files differnew file mode 100644 index 0000000..f09f1cf --- /dev/null +++ b/schall/static/RGraph/images/barh1.gif diff --git a/schall/static/RGraph/images/barh1.png b/schall/static/RGraph/images/barh1.png Binary files differnew file mode 100644 index 0000000..fd4293e --- /dev/null +++ b/schall/static/RGraph/images/barh1.png diff --git a/schall/static/RGraph/images/barh16.gif b/schall/static/RGraph/images/barh16.gif Binary files differnew file mode 100644 index 0000000..cff0ef1 --- /dev/null +++ b/schall/static/RGraph/images/barh16.gif diff --git a/schall/static/RGraph/images/barh16.png b/schall/static/RGraph/images/barh16.png Binary files differnew file mode 100644 index 0000000..02f5330 --- /dev/null +++ b/schall/static/RGraph/images/barh16.png diff --git a/schall/static/RGraph/images/barh2.gif b/schall/static/RGraph/images/barh2.gif Binary files differnew file mode 100644 index 0000000..0ff2a4c --- /dev/null +++ b/schall/static/RGraph/images/barh2.gif diff --git a/schall/static/RGraph/images/barh2.png b/schall/static/RGraph/images/barh2.png Binary files differnew file mode 100644 index 0000000..4aea219 --- /dev/null +++ b/schall/static/RGraph/images/barh2.png diff --git a/schall/static/RGraph/images/barh32.gif b/schall/static/RGraph/images/barh32.gif Binary files differnew file mode 100644 index 0000000..3214fb1 --- /dev/null +++ b/schall/static/RGraph/images/barh32.gif diff --git a/schall/static/RGraph/images/barh32.png b/schall/static/RGraph/images/barh32.png Binary files differnew file mode 100644 index 0000000..265baeb --- /dev/null +++ b/schall/static/RGraph/images/barh32.png diff --git a/schall/static/RGraph/images/barh4.gif b/schall/static/RGraph/images/barh4.gif Binary files differnew file mode 100644 index 0000000..af0b116 --- /dev/null +++ b/schall/static/RGraph/images/barh4.gif diff --git a/schall/static/RGraph/images/barh4.png b/schall/static/RGraph/images/barh4.png Binary files differnew file mode 100644 index 0000000..ff546aa --- /dev/null +++ b/schall/static/RGraph/images/barh4.png diff --git a/schall/static/RGraph/images/barh8.gif b/schall/static/RGraph/images/barh8.gif Binary files differnew file mode 100644 index 0000000..60462be --- /dev/null +++ b/schall/static/RGraph/images/barh8.gif diff --git a/schall/static/RGraph/images/barh8.png b/schall/static/RGraph/images/barh8.png Binary files differnew file mode 100644 index 0000000..bcc8b31 --- /dev/null +++ b/schall/static/RGraph/images/barh8.png diff --git a/schall/static/RGraph/images/bari1.gif b/schall/static/RGraph/images/bari1.gif Binary files differnew file mode 100644 index 0000000..a27f61c --- /dev/null +++ b/schall/static/RGraph/images/bari1.gif diff --git a/schall/static/RGraph/images/bari1.png b/schall/static/RGraph/images/bari1.png Binary files differnew file mode 100644 index 0000000..9b6bc7b --- /dev/null +++ b/schall/static/RGraph/images/bari1.png diff --git a/schall/static/RGraph/images/bari16.gif b/schall/static/RGraph/images/bari16.gif Binary files differnew file mode 100644 index 0000000..71ce8c1 --- /dev/null +++ b/schall/static/RGraph/images/bari16.gif diff --git a/schall/static/RGraph/images/bari16.png b/schall/static/RGraph/images/bari16.png Binary files differnew file mode 100644 index 0000000..1ff4e4c --- /dev/null +++ b/schall/static/RGraph/images/bari16.png diff --git a/schall/static/RGraph/images/bari2.gif b/schall/static/RGraph/images/bari2.gif Binary files differnew file mode 100644 index 0000000..da930d8 --- /dev/null +++ b/schall/static/RGraph/images/bari2.gif diff --git a/schall/static/RGraph/images/bari2.png b/schall/static/RGraph/images/bari2.png Binary files differnew file mode 100644 index 0000000..f519228 --- /dev/null +++ b/schall/static/RGraph/images/bari2.png diff --git a/schall/static/RGraph/images/bari32.gif b/schall/static/RGraph/images/bari32.gif Binary files differnew file mode 100644 index 0000000..3293a99 --- /dev/null +++ b/schall/static/RGraph/images/bari32.gif diff --git a/schall/static/RGraph/images/bari32.png b/schall/static/RGraph/images/bari32.png Binary files differnew file mode 100644 index 0000000..3d0e340 --- /dev/null +++ b/schall/static/RGraph/images/bari32.png diff --git a/schall/static/RGraph/images/bari4.gif b/schall/static/RGraph/images/bari4.gif Binary files differnew file mode 100644 index 0000000..b688bf5 --- /dev/null +++ b/schall/static/RGraph/images/bari4.gif diff --git a/schall/static/RGraph/images/bari4.png b/schall/static/RGraph/images/bari4.png Binary files differnew file mode 100644 index 0000000..e0f3f04 --- /dev/null +++ b/schall/static/RGraph/images/bari4.png diff --git a/schall/static/RGraph/images/bari8.gif b/schall/static/RGraph/images/bari8.gif Binary files differnew file mode 100644 index 0000000..5af4a5f --- /dev/null +++ b/schall/static/RGraph/images/bari8.gif diff --git a/schall/static/RGraph/images/bari8.png b/schall/static/RGraph/images/bari8.png Binary files differnew file mode 100644 index 0000000..75fcce4 --- /dev/null +++ b/schall/static/RGraph/images/bari8.png diff --git a/schall/static/RGraph/images/barj1.gif b/schall/static/RGraph/images/barj1.gif Binary files differnew file mode 100644 index 0000000..12f3be6 --- /dev/null +++ b/schall/static/RGraph/images/barj1.gif diff --git a/schall/static/RGraph/images/barj1.png b/schall/static/RGraph/images/barj1.png Binary files differnew file mode 100644 index 0000000..93b1581 --- /dev/null +++ b/schall/static/RGraph/images/barj1.png diff --git a/schall/static/RGraph/images/barj16.gif b/schall/static/RGraph/images/barj16.gif Binary files differnew file mode 100644 index 0000000..227798d --- /dev/null +++ b/schall/static/RGraph/images/barj16.gif diff --git a/schall/static/RGraph/images/barj16.png b/schall/static/RGraph/images/barj16.png Binary files differnew file mode 100644 index 0000000..b5b57f2 --- /dev/null +++ b/schall/static/RGraph/images/barj16.png diff --git a/schall/static/RGraph/images/barj2.gif b/schall/static/RGraph/images/barj2.gif Binary files differnew file mode 100644 index 0000000..dcbe4f1 --- /dev/null +++ b/schall/static/RGraph/images/barj2.gif diff --git a/schall/static/RGraph/images/barj2.png b/schall/static/RGraph/images/barj2.png Binary files differnew file mode 100644 index 0000000..35c0a9d --- /dev/null +++ b/schall/static/RGraph/images/barj2.png diff --git a/schall/static/RGraph/images/barj32.gif b/schall/static/RGraph/images/barj32.gif Binary files differnew file mode 100644 index 0000000..cc4513b --- /dev/null +++ b/schall/static/RGraph/images/barj32.gif diff --git a/schall/static/RGraph/images/barj32.png b/schall/static/RGraph/images/barj32.png Binary files differnew file mode 100644 index 0000000..75cfb8d --- /dev/null +++ b/schall/static/RGraph/images/barj32.png diff --git a/schall/static/RGraph/images/barj4.gif b/schall/static/RGraph/images/barj4.gif Binary files differnew file mode 100644 index 0000000..beece42 --- /dev/null +++ b/schall/static/RGraph/images/barj4.gif diff --git a/schall/static/RGraph/images/barj4.png b/schall/static/RGraph/images/barj4.png Binary files differnew file mode 100644 index 0000000..da91e06 --- /dev/null +++ b/schall/static/RGraph/images/barj4.png diff --git a/schall/static/RGraph/images/barj8.gif b/schall/static/RGraph/images/barj8.gif Binary files differnew file mode 100644 index 0000000..c680ba3 --- /dev/null +++ b/schall/static/RGraph/images/barj8.gif diff --git a/schall/static/RGraph/images/barj8.png b/schall/static/RGraph/images/barj8.png Binary files differnew file mode 100644 index 0000000..17105d4 --- /dev/null +++ b/schall/static/RGraph/images/barj8.png diff --git a/schall/static/RGraph/images/bg.jpg b/schall/static/RGraph/images/bg.jpg Binary files differnew file mode 100644 index 0000000..91d14d6 --- /dev/null +++ b/schall/static/RGraph/images/bg.jpg diff --git a/schall/static/RGraph/images/bg.png b/schall/static/RGraph/images/bg.png Binary files differnew file mode 100644 index 0000000..9fecc5c --- /dev/null +++ b/schall/static/RGraph/images/bg.png diff --git a/schall/static/RGraph/images/bn.business.png b/schall/static/RGraph/images/bn.business.png Binary files differnew file mode 100644 index 0000000..c37f7c4 --- /dev/null +++ b/schall/static/RGraph/images/bn.business.png diff --git a/schall/static/RGraph/images/bn.personal.png b/schall/static/RGraph/images/bn.personal.png Binary files differnew file mode 100644 index 0000000..0db605e --- /dev/null +++ b/schall/static/RGraph/images/bn.personal.png diff --git a/schall/static/RGraph/images/border-radius.png b/schall/static/RGraph/images/border-radius.png Binary files differnew file mode 100644 index 0000000..9f16386 --- /dev/null +++ b/schall/static/RGraph/images/border-radius.png diff --git a/schall/static/RGraph/images/buy.png b/schall/static/RGraph/images/buy.png Binary files differnew file mode 100644 index 0000000..5edf2dd --- /dev/null +++ b/schall/static/RGraph/images/buy.png diff --git a/schall/static/RGraph/images/buzz.png b/schall/static/RGraph/images/buzz.png Binary files differnew file mode 100644 index 0000000..a5e3e54 --- /dev/null +++ b/schall/static/RGraph/images/buzz.png diff --git a/schall/static/RGraph/images/chrome_logo.png b/schall/static/RGraph/images/chrome_logo.png Binary files differnew file mode 100644 index 0000000..8738a80 --- /dev/null +++ b/schall/static/RGraph/images/chrome_logo.png diff --git a/schall/static/RGraph/images/coins.jpg b/schall/static/RGraph/images/coins.jpg Binary files differnew file mode 100644 index 0000000..e108b71 --- /dev/null +++ b/schall/static/RGraph/images/coins.jpg diff --git a/schall/static/RGraph/images/context.png b/schall/static/RGraph/images/context.png Binary files differnew file mode 100644 index 0000000..573658b --- /dev/null +++ b/schall/static/RGraph/images/context.png diff --git a/schall/static/RGraph/images/delicious.png b/schall/static/RGraph/images/delicious.png Binary files differnew file mode 100644 index 0000000..1bda07e --- /dev/null +++ b/schall/static/RGraph/images/delicious.png diff --git a/schall/static/RGraph/images/download-beta-sml.png b/schall/static/RGraph/images/download-beta-sml.png Binary files differnew file mode 100644 index 0000000..5b876e0 --- /dev/null +++ b/schall/static/RGraph/images/download-beta-sml.png diff --git a/schall/static/RGraph/images/download-beta.png b/schall/static/RGraph/images/download-beta.png Binary files differnew file mode 100644 index 0000000..d0f22d1 --- /dev/null +++ b/schall/static/RGraph/images/download-beta.png diff --git a/schall/static/RGraph/images/download-stable-sml.png b/schall/static/RGraph/images/download-stable-sml.png Binary files differnew file mode 100644 index 0000000..ba52e64 --- /dev/null +++ b/schall/static/RGraph/images/download-stable-sml.png diff --git a/schall/static/RGraph/images/download-stable.png b/schall/static/RGraph/images/download-stable.png Binary files differnew file mode 100644 index 0000000..434304d --- /dev/null +++ b/schall/static/RGraph/images/download-stable.png diff --git a/schall/static/RGraph/images/download.png b/schall/static/RGraph/images/download.png Binary files differnew file mode 100644 index 0000000..722b459 --- /dev/null +++ b/schall/static/RGraph/images/download.png diff --git a/schall/static/RGraph/images/facebook.png b/schall/static/RGraph/images/facebook.png Binary files differnew file mode 100644 index 0000000..40b9d27 --- /dev/null +++ b/schall/static/RGraph/images/facebook.png diff --git a/schall/static/RGraph/images/favicon.ico b/schall/static/RGraph/images/favicon.ico Binary files differnew file mode 100644 index 0000000..421f02d --- /dev/null +++ b/schall/static/RGraph/images/favicon.ico diff --git a/schall/static/RGraph/images/favicon.png b/schall/static/RGraph/images/favicon.png Binary files differnew file mode 100644 index 0000000..d3275e6 --- /dev/null +++ b/schall/static/RGraph/images/favicon.png diff --git a/schall/static/RGraph/images/friendfeed.png b/schall/static/RGraph/images/friendfeed.png Binary files differnew file mode 100644 index 0000000..66f593f --- /dev/null +++ b/schall/static/RGraph/images/friendfeed.png diff --git a/schall/static/RGraph/images/fuel-pump.png b/schall/static/RGraph/images/fuel-pump.png Binary files differnew file mode 100644 index 0000000..ed3e9a1 --- /dev/null +++ b/schall/static/RGraph/images/fuel-pump.png diff --git a/schall/static/RGraph/images/google_+1_button.png b/schall/static/RGraph/images/google_+1_button.png Binary files differnew file mode 100644 index 0000000..40cd4e3 --- /dev/null +++ b/schall/static/RGraph/images/google_+1_button.png diff --git a/schall/static/RGraph/images/googlegroups.png b/schall/static/RGraph/images/googlegroups.png Binary files differnew file mode 100644 index 0000000..3a8dbaa --- /dev/null +++ b/schall/static/RGraph/images/googlegroups.png diff --git a/schall/static/RGraph/images/html2.gif b/schall/static/RGraph/images/html2.gif Binary files differnew file mode 100644 index 0000000..b908c3a --- /dev/null +++ b/schall/static/RGraph/images/html2.gif diff --git a/schall/static/RGraph/images/html2.png b/schall/static/RGraph/images/html2.png Binary files differnew file mode 100644 index 0000000..b9c40cd --- /dev/null +++ b/schall/static/RGraph/images/html2.png diff --git a/schall/static/RGraph/images/icons_combined.png b/schall/static/RGraph/images/icons_combined.png Binary files differnew file mode 100644 index 0000000..7652beb --- /dev/null +++ b/schall/static/RGraph/images/icons_combined.png diff --git a/schall/static/RGraph/images/index.html b/schall/static/RGraph/images/index.html new file mode 100644 index 0000000..de5de71 --- /dev/null +++ b/schall/static/RGraph/images/index.html @@ -0,0 +1,3 @@ +<?php + header('Location: /'); +?>
\ No newline at end of file diff --git a/schall/static/RGraph/images/introspection.png b/schall/static/RGraph/images/introspection.png Binary files differnew file mode 100644 index 0000000..0725852 --- /dev/null +++ b/schall/static/RGraph/images/introspection.png diff --git a/schall/static/RGraph/images/logo.jpg b/schall/static/RGraph/images/logo.jpg Binary files differnew file mode 100644 index 0000000..b7e079d --- /dev/null +++ b/schall/static/RGraph/images/logo.jpg diff --git a/schall/static/RGraph/images/logo.png b/schall/static/RGraph/images/logo.png Binary files differnew file mode 100644 index 0000000..fd2118b --- /dev/null +++ b/schall/static/RGraph/images/logo.png diff --git a/schall/static/RGraph/images/merry-christmas-snowman.png b/schall/static/RGraph/images/merry-christmas-snowman.png Binary files differnew file mode 100644 index 0000000..7e4de64 --- /dev/null +++ b/schall/static/RGraph/images/merry-christmas-snowman.png diff --git a/schall/static/RGraph/images/new.png b/schall/static/RGraph/images/new.png Binary files differnew file mode 100644 index 0000000..f0f2f0d --- /dev/null +++ b/schall/static/RGraph/images/new.png diff --git a/schall/static/RGraph/images/paypal.gif b/schall/static/RGraph/images/paypal.gif Binary files differnew file mode 100644 index 0000000..9268432 --- /dev/null +++ b/schall/static/RGraph/images/paypal.gif diff --git a/schall/static/RGraph/images/png.icon.png b/schall/static/RGraph/images/png.icon.png Binary files differnew file mode 100644 index 0000000..f04b7a3 --- /dev/null +++ b/schall/static/RGraph/images/png.icon.png diff --git a/schall/static/RGraph/images/reddit.png b/schall/static/RGraph/images/reddit.png Binary files differnew file mode 100644 index 0000000..02b1926 --- /dev/null +++ b/schall/static/RGraph/images/reddit.png diff --git a/schall/static/RGraph/images/rgraph.logo.png b/schall/static/RGraph/images/rgraph.logo.png Binary files differnew file mode 100644 index 0000000..fd2118b --- /dev/null +++ b/schall/static/RGraph/images/rgraph.logo.png diff --git a/schall/static/RGraph/images/rss.png b/schall/static/RGraph/images/rss.png Binary files differnew file mode 100644 index 0000000..ef47bcb --- /dev/null +++ b/schall/static/RGraph/images/rss.png diff --git a/schall/static/RGraph/images/rss_big.png b/schall/static/RGraph/images/rss_big.png Binary files differnew file mode 100644 index 0000000..88546f9 --- /dev/null +++ b/schall/static/RGraph/images/rss_big.png diff --git a/schall/static/RGraph/images/search_party.jpg b/schall/static/RGraph/images/search_party.jpg Binary files differnew file mode 100644 index 0000000..90432cd --- /dev/null +++ b/schall/static/RGraph/images/search_party.jpg diff --git a/schall/static/RGraph/images/sq0.png b/schall/static/RGraph/images/sq0.png Binary files differnew file mode 100644 index 0000000..b0f6a42 --- /dev/null +++ b/schall/static/RGraph/images/sq0.png diff --git a/schall/static/RGraph/images/sq1.png b/schall/static/RGraph/images/sq1.png Binary files differnew file mode 100644 index 0000000..4b86ffd --- /dev/null +++ b/schall/static/RGraph/images/sq1.png diff --git a/schall/static/RGraph/images/sq2.png b/schall/static/RGraph/images/sq2.png Binary files differnew file mode 100644 index 0000000..763f5ef --- /dev/null +++ b/schall/static/RGraph/images/sq2.png diff --git a/schall/static/RGraph/images/sq3.png b/schall/static/RGraph/images/sq3.png Binary files differnew file mode 100644 index 0000000..b6e8e43 --- /dev/null +++ b/schall/static/RGraph/images/sq3.png diff --git a/schall/static/RGraph/images/sq4.png b/schall/static/RGraph/images/sq4.png Binary files differnew file mode 100644 index 0000000..7585cc8 --- /dev/null +++ b/schall/static/RGraph/images/sq4.png diff --git a/schall/static/RGraph/images/sq5.png b/schall/static/RGraph/images/sq5.png Binary files differnew file mode 100644 index 0000000..123aa10 --- /dev/null +++ b/schall/static/RGraph/images/sq5.png diff --git a/schall/static/RGraph/images/sq6.png b/schall/static/RGraph/images/sq6.png Binary files differnew file mode 100644 index 0000000..cfd40b0 --- /dev/null +++ b/schall/static/RGraph/images/sq6.png diff --git a/schall/static/RGraph/images/sq7.png b/schall/static/RGraph/images/sq7.png Binary files differnew file mode 100644 index 0000000..0b2f95c --- /dev/null +++ b/schall/static/RGraph/images/sq7.png diff --git a/schall/static/RGraph/images/sq8.png b/schall/static/RGraph/images/sq8.png Binary files differnew file mode 100644 index 0000000..341f8e6 --- /dev/null +++ b/schall/static/RGraph/images/sq8.png diff --git a/schall/static/RGraph/images/sq9.png b/schall/static/RGraph/images/sq9.png Binary files differnew file mode 100644 index 0000000..a8b9786 --- /dev/null +++ b/schall/static/RGraph/images/sq9.png diff --git a/schall/static/RGraph/images/sqg.png b/schall/static/RGraph/images/sqg.png Binary files differnew file mode 100644 index 0000000..edbaf8b --- /dev/null +++ b/schall/static/RGraph/images/sqg.png diff --git a/schall/static/RGraph/images/structure.png b/schall/static/RGraph/images/structure.png Binary files differnew file mode 100644 index 0000000..855d518 --- /dev/null +++ b/schall/static/RGraph/images/structure.png diff --git a/schall/static/RGraph/images/stumble.png b/schall/static/RGraph/images/stumble.png Binary files differnew file mode 100644 index 0000000..80c153e --- /dev/null +++ b/schall/static/RGraph/images/stumble.png diff --git a/schall/static/RGraph/images/twitter.png b/schall/static/RGraph/images/twitter.png Binary files differnew file mode 100644 index 0000000..4bcc4f2 --- /dev/null +++ b/schall/static/RGraph/images/twitter.png diff --git a/schall/static/RGraph/images/unicef.png b/schall/static/RGraph/images/unicef.png Binary files differnew file mode 100644 index 0000000..f9f7fcd --- /dev/null +++ b/schall/static/RGraph/images/unicef.png diff --git a/schall/static/RGraph/images/water.jpg b/schall/static/RGraph/images/water.jpg Binary files differnew file mode 100644 index 0000000..e3e994d --- /dev/null +++ b/schall/static/RGraph/images/water.jpg diff --git a/schall/static/RGraph/index.html b/schall/static/RGraph/index.html new file mode 100644 index 0000000..fa90a86 --- /dev/null +++ b/schall/static/RGraph/index.html @@ -0,0 +1,425 @@ +<!DOCTYPE html> +<html> +<head> + + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + + <title>RGraph: HTML5 Javascript charts library</title> + <link rel="stylesheet" href="css/website.css" type="text/css" media="screen" /> + + <RELEASE_SCRIPT_REMOVE> + <!-- These get replaced by a single combined JS file --> + <script src="libraries/RGraph.common.effects.js" ></script> + <script src="libraries/RGraph.common.core.js" ></script> + <script src="libraries/RGraph.common.tooltips.js" ></script> + <script src="libraries/RGraph.line.js" ></script> + <script src="libraries/RGraph.pie.js" ></script> + </RELEASE_SCRIPT_REMOVE> + + <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" ></script> + <!--[if IE 8]> + <script src="excanvas/excanvas.original.js"></script> + <![endif]--> + + <link rel="icon" type="image/png" href="images/favicon.png"> + + <meta name="verify-v1" content="5y8rHGO/NPFDYU8jBgyT3qI7CSiEoPaeB+4x2TXan+4=" /> + <meta name="keywords" content="html5 charts canvas graph rgraph javascript line chart bar charts" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A javascript charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + <meta property="fb:admins" content="825417645" /> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script> + window.onload = function (e) + { + if (RGraph.isIE8()) { + CreateLineChart(); + CreatePieChart(); + } + } + </script> + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> +</head> +<body> + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + + <div id="title"> + <div id="image"> + <br /> + <img src="images/logo.png" align="absmiddle" alt="RGraph: HTML5 Javascript charts library" width="64" height="64" style="position: relative; top: 15px" /> + </div> + + <div id="text"> + <h1 id="title">RGraph: <span>HTML5 Javascript charts library</span></h1> + <i style="position: relative; top: -20px; left: 5px">Interactive javascript charts using the HTML5 canvas tag</i> + </div> + </div> + + + + + <div style="margin-left: 75px; margin-top: -15px"> + <a href="#download"> + <img src="images/download-stable-sml.png" width="32" height="32" alt="Download the beta version" border="0" align="absmiddle" /> + <b>Download the stable version</b> + </a> + + <a href="#download"> + <img src="images/download-beta-sml.png" width="32" height="32" alt="Download the beta version" border="0" align="absmiddle" /> + <b>Download the beta version</b> + </a> + </div> + + <!-- END HEADER --> + + + + <!-- TESTIMONIAL --> + <?php + if ($_SERVER['SERVER_NAME'] == 'www.rgraph.net' || $_SERVER['SERVER_NAME'] == 'dev.rgraph.net') { + echo chr(60) . 'div id="testimonial"' . chr(62); + require_once('testimonial.html'); + echo ' ' . chr(60) . 'small' . chr(62) . '' . chr(60) . 'a href="http://' . $_SERVER['SERVER_NAME'] .'/write-a-testimonial.html" onclick="window.open(\'http://' . $_SERVER['SERVER_NAME'] .'/write-a-testimonial.html\',\'testimonial\',\'top=25px,left=25px,width=968px,height=400px\'); return false"'.chr(62).'Write a testimonial...'.chr(60).'/a'.chr(62).''.chr(60).'/small'.chr(62); + echo chr(60) . '/div' . chr(62); + } + ?> + <!-- TESTIMONIAL --> + + <canvas id="cvs" width="480" height="250" style="background-color: white; float: right">[IE8+ is required to view the charts.]</canvas> + + <h2>Faster <span>websites with RGraph</span></h2> + <p id="intro"> + RGraph is a Javascript charts library. Using the new HTML5 canvas tag, RGraph charts are created in the web + browser, meaning quicker pages and less web server load. Using RGraph is an easy way of speeding up your website. + + <div> + <p> + RGraph produces a wide variety of chart types - examples and documentation below. + </p> + + <div style="text-align: center"> + <a href="examples/index.html" id="read-more"><b>Examples of charts</b></a> & + <a href="docs/index.html" id="read-more">documentation and HTML5 examples</a> + </div> + </div> + </p> + + <script> + /** + * Create the line graph + */ + function CreateLineChart () + { + var myLine = new RGraph.Line('cvs', [4,6,12,16,8,4,2,8, 18,16,14,16], [2,4,8, 4, 2,6,6,12,8, 10,6, 8]); + myLine.Set('chart.labels', ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']); + myLine.Set('chart.gutter.left', 40); + myLine.Set('chart.gutter.top', 35); + myLine.Set('chart.gutter.right', 5); + myLine.Set('chart.gutter.bottom', 20); + myLine.Set('chart.colors', ['#f00', 'black']); + myLine.Set('chart.units.post', '%'); + myLine.Set('chart.linewidth', 5); + myLine.Set('chart.hmargin', 10); + myLine.Set('chart.xticks', 12); + myLine.Set('chart.title', 'Robert and Daniels stats'); + myLine.Set('chart.title.vpos', 0.5); + myLine.Set('chart.text.color', '#333'); + myLine.Set('chart.text.font', 'Arial'); + myLine.Set('chart.key', ['Robert', 'Daniel']); + myLine.Set('chart.key.rounded', true); + myLine.Set('chart.key.background', 'white'); + myLine.Set('chart.key.position.x', myLine.Get('chart.gutter.left') + 10); + myLine.Set('chart.shadow', true); + myLine.Set('chart.shadow.blur', 15); + myLine.Set('chart.shadow.color', ['#faa','#aaa']); + myLine.Set('chart.background.grid.autofit', true); + myLine.Set('chart.background.grid.autofit.numvlines', 12); + myLine.Set('chart.tooltips', [ + '<b>January</b><br />Started off the year quite averagely', + '<b>February</b><br />Better than January, rising quite nicely', + '<b>March</b><br />March was quite a spike', + '<b>April</b><br />Rising very impressively', + '<b>May</b><br />Dropping after the last two month spike', + '<b>June</b><br />Still dropping', + '<b>July</b><br />The fall is beginning to subside, but still dropping', + '<b>August</b><br />A good rise after the fall', + '<b>September</b><br />A very good peak', + '<b>October</b><br />The peak is now subsiding', + '<b>November</b><br />Still subsiding', + '<b>December</b><br />Rising again after the last fall', + + + '<b>January</b><br />Started off the year quite averagely as with Robert', + '<b>February</b><br />Rising as with Robert', + '<b>March</b><br />Not as good as Robert, but OK', + '<b>April</b><br />Dropping after the peak', + '<b>May</b><br />The low point as with last year', + '<b>June</b><br />Rising higher than Robert', + '<b>July</b><br />Consistent with last month', + '<b>August</b><br />A nice high point', + '<b>September</b><br />A low point', + '<b>October</b><br />A nice rise', + '<b>November</b><br />Falling for fall...', + '<b>December</b><br />Rising again for Christmas' + ]); + + /** + * Use the Trace animation to show the chart + */ + if (RGraph.isIE8()) { + myLine.Draw(); + myLine.Set('chart.shadow.color', '#666'); + } else { + RGraph.Effects.Line.jQuery.Trace(myLine); + } + } + </script> + + <br clear="all" /> + + + <div style="float: right; width: 335px"> + <canvas id="cvs2" width="335" height="250" style="background-color: white">[IE8+ is required to view the charts.]</canvas> + <script> + function CreatePieChart () + { + /** + * Draw the Pie chart + */ + pie = new RGraph.Pie('cvs2', [45,26,23,15,11]); + pie.Set('chart.strokestyle', 'white'); + pie.Set('chart.linewidth', 3); + pie.Set('chart.shadow', true); + pie.Set('chart.shadow.offsetx', 0); + pie.Set('chart.shadow.offsety', 0); + pie.Set('chart.shadow.blur', 15); + pie.Set('chart.key', ['John','Fred','Lucy','Lou','Jenny']); + pie.Set('chart.align', 'left'); + pie.Set('chart.tooltips', [ + '<b>John</b><br />Easily the winner!', + '<b>Fred</b><br />A good second', + '<b>Lucy</b><br />A close third', + '<b>Lou</b><br />A lonely fourth', + '<b>Jenny</b><br />What can I say...?' + ]); + pie.Set('chart.highlight.style', 'explode'); + pie.Set('chart.gutter.top', 35); + pie.Set('chart.gutter.bottom', 35); + pie.Set('chart.centerx', 130); + + if (RGraph.isIE8()) { + pie.Draw(); + } else { + RGraph.Effects.Pie.RoundRobin(pie, {'radius': false}); + } + } + + /** + * These timers allow the initial animation to finish + * first before enabling the buttons. + */ + setTimeout(EnableButtons, 1500); + + function EnableButtons () + { + document.getElementById("butRoundRobin").disabled = false; + document.getElementById("butImplode").disabled = false; + } + + function DisableButtons () + { + document.getElementById("butRoundRobin").disabled = true; + document.getElementById("butImplode").disabled = true; + } + </script> + + <button id="butRoundRobin" onmousedown="DisableButtons(); RGraph.Clear(pie.canvas);RGraph.Effects.Pie.RoundRobin(pie, {'radius': false});setTimeout(EnableButtons, 1500)" disabled style="width: 100%; margin-bottom: 5px">RoundRobin effect</button> + <button id="butImplode" onmousedown="DisableButtons(); RGraph.Clear(pie.canvas);RGraph.Effects.Pie.Implode(pie);RGraph.Effects.Pie.RoundRobin(pie);setTimeout(function () {EnableButtons();}, 1750);" disabled style="width: 100%">Implode & RoundRobin effects</button> + + <script> + if (RGraph.isIE8()) { + document.getElementById("butRoundRobin").disabled = true; + document.getElementById("butImplode").disabled = true; + } + </script> + </div> + + + <h2>Supported <span>charts</span></h2> + <p> + RGraph supports over twenty different types of charts, including: Bar charts, Bi-polar charts, Donut charts, + Fuel gauges, Funnel charts, Gantt charts, Gauge charts Horizontal Bar charts, Horizontal Progress bars, LED grids, Line charts, Meters, + Odometers, Pie charts, Radar charts, Radial Scatter charts, Rose charts, Scatter charts, Thermometers, + Vertical Progress bars and Waterfall charts. In addition there are variants available on many charts. There is also a growing + range of animations and visual effects. + </p> + + + + <h2>RGraph <span>customisations</span></h2> + <p> + Need something that RGraph doesn't currently support? RGraph license holders can usually be accomodated - please + <a href="mailto:licensing@rgraph.net"><b>contact support</b></a> to discuss it. + </p> + + <a name="download"></a> + <h2>Download <span>RGraph</span></h2> + + <?php if($_SERVER['SERVER_NAME'] == 'www.rgraph.net' OR $_SERVER['SERVER_NAME'] == 'www.rgraph.org' OR isset($_GET['showdownloadlinks'])): ?> + <div id="downloadlinks"> + + <?php ShowDownloadLinks() ?> + + <p> + These are the latest full versions - not time-limited or branded trials. Note that the website is based on the latest + release, be it stable or beta. Follow <a href="http://twitter.com/_rgraph" target="_blank"><b>_RGraph</b></a> on Twitter for updates and news. + </p> + </div> + + <?php else: ?> + + <span style="color: red"> + [Only available on <a href="http://www.rgraph.net#download">http://www.rgraph.net</a>] + </span> + <?php endif ?> + + + <script> + /** + * Hide the download links if not online + */ + if (location.host != 'www.rgraph.net' && location.host != 'www.rgraph.org' && location.host != 'dev.rgraph.net') { + var downloadlinks = document.getElementById("downloadlinks"); + + if (downloadlinks) { + document.getElementById("downloadlinks").style.display = 'none'; + } + } + </script> + + <!-- + <a name="license"></a> + <h2>The <span>RGraph license</span></h2> + + <div style="float: right; padding-left: 15px; padding-right: 40px; text-align: center"> + <form action="https://checkout.google.com/api/checkout/v2/checkoutForm/Merchant/456239608328156" id="BB_BuyButtonForm" method="post" name="BB_BuyButtonForm"> + <input name="item_name_1" type="hidden" value="RGraph License" /> + <input name="item_description_1" type="hidden" value="License for RGraph: HTML5 Javascript charts library" /> + <input name="item_quantity_1" type="hidden" value="1" /> + <input name="item_price_1" type="hidden" value="79.0" /> + <input name="item_currency_1" type="hidden" value="GBP" /> + <input name="_charset_" type="hidden" value="utf-8" /> + <input alt="" width="116" height="61" src="images/buy.png" type="image" /> + </form> + + <form action="https://www.paypal.com/cgi-bin/webscr" method="post"> + <input type="hidden" name="cmd" value="_s-xclick"> + <input type="hidden" name="hosted_button_id" value="FDVK4T4GKQ6M8"> + <input type="image" src="images/paypal.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online."> + <img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1"> + </form> + </div> + + <p> + RGraph is covered by the RGraph license. A summary is that for commercial/business use there is a small one-time + licensing fee of 79 GBP (roughly 125 USD). For non-commercial purposes it's freely usable. + + There are some + <a href="docs/licensing.html"><b>licensing FAQs</b></a> that should help to answer any + questions you might have. If you need one, you can <a href="http://www.rgraph.net/invoice.html">get an invoice here</a>. + </p> + + <p> + If you have any questions about RGraph licensing, you can send your question to: <a href="mailto:licensing@rgraph.net">licensing@rgraph.net</a>. + If your question is of a support nature, please send it to: <a href="mailto:support@rgraph.net">support@rgraph.net</a> + </p> + + <p> + You can read the license on the <a href="docs/licensing.html#license.text">licensing FAQs page</a> + </p> + --> + + <!-- <iframe width="100%" height="300" src="LICENSE.txt"></iframe> --> + + <script> + if (!RGraph.isIE8()) { + CreateLineChart(); + CreatePieChart(); + } + </script> + + + <br clear="all" /> + + + + <?php if ($_SERVER['SERVER_NAME'] != 'www.rgraph.net'): ?> + <p style="text-align: left"> + <a href="http://www.rgraph.net" target="_blank"> « Keep up-to-date at www.rgraph.net</a> + </p> + <?php endif ?> + + <div id="rgraph"></div> + + <script> + if (location.host.match(/^dev\.rgraph/)) { + document.getElementById("rgraph").innerHTML = '<div id="devtag">DEVELOPMENT<br /><a href="http://www.rgraph.net">Go to the live version »</a></div>'; + } + </script> + +</script> +</body> +</html><!-- 2011-10-20 --> diff --git a/schall/static/RGraph/libraries/RGraph.bar.js b/schall/static/RGraph/libraries/RGraph.bar.js new file mode 100644 index 0000000..b5946c6 --- /dev/null +++ b/schall/static/RGraph/libraries/RGraph.bar.js @@ -0,0 +1,1840 @@ + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + + if (typeof(RGraph) == 'undefined') RGraph = {}; + + /** + * The bar chart constructor + * + * @param object canvas The canvas object + * @param array data The chart data + */ + RGraph.Bar = function (id, data) + { + // Get the canvas and context objects + this.id = id; + this.canvas = document.getElementById(id); + this.context = this.canvas.getContext ? this.canvas.getContext("2d") : null; + this.canvas.__object__ = this; + this.type = 'bar'; + this.max = 0; + this.stackedOrGrouped = false; + this.isRGraph = true; + + /** + * Compatibility with older browsers + */ + RGraph.OldBrowserCompat(this.context); + + + // Various config type stuff + this.properties = { + 'chart.background.barcolor1': 'rgba(0,0,0,0)', + 'chart.background.barcolor2': 'rgba(0,0,0,0)', + 'chart.background.grid': true, + 'chart.background.grid.color': '#ddd', + 'chart.background.grid.width': 1, + 'chart.background.grid.hsize': 20, + 'chart.background.grid.vsize': 20, + 'chart.background.grid.vlines': true, + 'chart.background.grid.hlines': true, + 'chart.background.grid.border': true, + 'chart.background.grid.autofit':true, + 'chart.background.grid.autofit.numhlines': 5, + 'chart.background.grid.autofit.numvlines': 20, + 'chart.background.image': null, + 'chart.ytickgap': 20, + 'chart.smallyticks': 3, + 'chart.largeyticks': 5, + 'chart.numyticks': 10, + 'chart.hmargin': 5, + 'chart.strokecolor': '#666', + 'chart.axis.color': 'black', + 'chart.gutter.top': 25, + 'chart.gutter.bottom': 25, + 'chart.gutter.left': 25, + 'chart.gutter.right': 25, + 'chart.labels': null, + 'chart.labels.ingraph': null, + 'chart.labels.above': false, + 'chart.labels.above.decimals': 0, + 'chart.labels.above.size': null, + 'chart.labels.above.angle': null, + 'chart.ylabels': true, + 'chart.ylabels.count': 5, + 'chart.ylabels.inside': false, + 'chart.xlabels.offset': 0, + 'chart.xaxispos': 'bottom', + 'chart.yaxispos': 'left', + 'chart.text.color': 'black', + 'chart.text.size': 10, + 'chart.text.angle': 0, + 'chart.text.font': 'Verdana', + 'chart.ymin': 0, + 'chart.ymax': null, + 'chart.title': '', + 'chart.title.font': null, + 'chart.title.background': null, + 'chart.title.hpos': null, + 'chart.title.vpos': null, + 'chart.title.bold': true, + 'chart.title.xaxis': '', + 'chart.title.xaxis.bold': true, + 'chart.title.xaxis.size': null, + 'chart.title.xaxis.font': null, + 'chart.title.yaxis': '', + 'chart.title.yaxis.bold': true, + 'chart.title.yaxis.size': null, + 'chart.title.yaxis.font': null, + 'chart.title.xaxis.pos': null, + 'chart.title.yaxis.pos': null, + 'chart.colors': ['rgb(0,0,255)', '#0f0', '#00f', '#ff0', '#0ff', '#0f0'], + 'chart.colors.sequential': false, + 'chart.colors.reverse': false, + 'chart.grouping': 'grouped', + 'chart.variant': 'bar', + 'chart.shadow': false, + 'chart.shadow.color': '#666', + 'chart.shadow.offsetx': 3, + 'chart.shadow.offsety': 3, + 'chart.shadow.blur': 3, + 'chart.tooltips': null, + 'chart.tooltips.effect': 'fade', + 'chart.tooltips.css.class': 'RGraph_tooltip', + 'chart.tooltips.event': 'onclick', + 'chart.tooltips.highlight': true, + 'chart.highlight.stroke': 'black', + 'chart.highlight.fill': 'rgba(255,255,255,0.5)', + 'chart.background.hbars': null, + 'chart.key': [], + 'chart.key.background': 'white', + 'chart.key.position': 'graph', + 'chart.key.shadow': false, + 'chart.key.shadow.color': '#666', + 'chart.key.shadow.blur': 3, + 'chart.key.shadow.offsetx': 2, + 'chart.key.shadow.offsety': 2, + 'chart.key.position.gutter.boxed': true, + 'chart.key.position.x': null, + 'chart.key.position.y': null, + 'chart.key.halign': 'right', + 'chart.key.color.shape': 'square', + 'chart.key.rounded': true, + 'chart.key.text.size': 10, + 'chart.key.linewidth': 1, + 'chart.contextmenu': null, + 'chart.line': null, + 'chart.units.pre': '', + 'chart.units.post': '', + 'chart.scale.decimals': 0, + 'chart.scale.point': '.', + 'chart.scale.thousand': ',', + 'chart.crosshairs': false, + 'chart.crosshairs.color': '#333', + 'chart.crosshairs.hline': true, + 'chart.crosshairs.vline': true, + 'chart.linewidth': 1, + 'chart.annotatable': false, + 'chart.annotate.color': 'black', + 'chart.zoom.factor': 1.5, + 'chart.zoom.fade.in': true, + 'chart.zoom.fade.out': true, + 'chart.zoom.hdir': 'right', + 'chart.zoom.vdir': 'down', + 'chart.zoom.frames': 25, + 'chart.zoom.delay': 16.666, + 'chart.zoom.shadow': true, + 'chart.zoom.mode': 'canvas', + 'chart.zoom.thumbnail.width': 75, + 'chart.zoom.thumbnail.height': 75, + 'chart.zoom.background': true, + 'chart.resizable': false, + 'chart.resize.handle.adjust': [0,0], + 'chart.resize.handle.background': null, + 'chart.adjustable': false, + 'chart.noaxes': false, + 'chart.noxaxis': false, + 'chart.noyaxis': false + } + + // Check for support + if (!this.canvas) { + alert('[BAR] No canvas support'); + return; + } + + /** + * Determine whether the chart will contain stacked or grouped bars + */ + for (i=0; i<data.length; ++i) { + if (typeof(data[i]) == 'object') { + this.stackedOrGrouped = true; + } + } + + // Store the data + this.data = data; + + // Used to store the coords of the bars + this.coords = []; + + /** + * Set the .getShape commonly named method + */ + this.getShape = this.getBar; + } + + + /** + * A setter + * + * @param name string The name of the property to set + * @param value mixed The value of the property + */ + RGraph.Bar.prototype.Set = function (name, value) + { + name = name.toLowerCase(); + + if (name == 'chart.labels.abovebar') { + name = 'chart.labels.above'; + } + + if (name == 'chart.strokestyle') { + name = 'chart.strokecolor'; + } + + /** + * Check for xaxispos + */ + if (name == 'chart.xaxispos' ) { + if (value != 'bottom' && value != 'center' && value != 'top') { + alert('[BAR] (' + this.id + ') chart.xaxispos should be top, center or bottom. Tried to set it to: ' + value + ' Changing it to center'); + value = 'center'; + } + + if (value == 'top') { + for (var i=0; i<this.data.length; ++i) { + if (typeof(this.data[i]) == 'number' && this.data[i] > 0) { + alert('[BAR] The data element with index ' + i + ' should be negative'); + } + } + } + } + + this.properties[name] = value; + } + + + /** + * A getter + * + * @param name string The name of the property to get + */ + RGraph.Bar.prototype.Get = function (name) + { + if (name == 'chart.labels.abovebar') { + name = 'chart.labels.above'; + } + + var value = this.properties[name]; + + return value; + } + + + /** + * The function you call to draw the bar chart + */ + RGraph.Bar.prototype.Draw = function () + { + // MUST be the first thing done! + if (typeof(this.Get('chart.background.image')) == 'string' && !this.__background_image__) { + RGraph.DrawBackgroundImage(this); + return; + } + + /** + * Fire the onbeforedraw event + */ + RGraph.FireCustomEvent(this, 'onbeforedraw'); + + /** + * Clear all of this canvases event handlers (the ones installed by RGraph) + */ + RGraph.ClearEventListeners(this.id); + + /** + * This is new in May 2011 and facilitates indiviual gutter settings, + * eg chart.gutter.left + */ + this.gutterLeft = this.Get('chart.gutter.left'); + this.gutterRight = this.Get('chart.gutter.right'); + this.gutterTop = this.Get('chart.gutter.top'); + this.gutterBottom = this.Get('chart.gutter.bottom'); + + /** + * Convert any null values to 0. Won't make any difference to the bar (as opposed to the line chart) + */ + for (var i=0; i<this.data.length; ++i) { + if (this.data[i] == null) { + this.data[i] = 0; + } + } + + + // Cache this in a class variable as it's used rather a lot + + /** + * Check for tooltips and alert the user that they're not supported with pyramid charts + */ + if ( (this.Get('chart.variant') == 'pyramid' || this.Get('chart.variant') == 'dot') + && typeof(this.Get('chart.tooltips')) == 'object' + && this.Get('chart.tooltips') + && this.Get('chart.tooltips').length > 0) { + + alert('[BAR] (' + this.id + ') Sorry, tooltips are not supported with dot or pyramid charts'); + } + + /** + * Stop the coords array from growing uncontrollably + */ + this.coords = []; + + /** + * Work out a few things. They need to be here because they depend on things you can change before you + * call Draw() but after you instantiate the object + */ + this.max = 0; + this.grapharea = RGraph.GetHeight(this) - this.gutterTop - this.gutterBottom; + this.halfgrapharea = this.grapharea / 2; + this.halfTextHeight = this.Get('chart.text.size') / 2; + + // Progressively Draw the chart + RGraph.background.Draw(this); + + + //If it's a sketch chart variant, draw the axes first + if (this.Get('chart.variant') == 'sketch') { + this.DrawAxes(); + this.Drawbars(); + } else { + this.Drawbars(); + this.DrawAxes(); + } + + this.DrawLabels(); + + + // Draw the key if necessary + if (this.Get('chart.key').length) { + RGraph.DrawKey(this, this.Get('chart.key'), this.Get('chart.colors')); + } + + + /** + * Setup the context menu if required + */ + if (this.Get('chart.contextmenu')) { + RGraph.ShowContext(this); + } + + + /** + * Is a line is defined, draw it + */ + var line = this.Get('chart.line'); + + if (line) { + + line.__bar__ = this; + + // Check the X axis positions + if (this.Get('chart.xaxispos') != line.Get('chart.xaxispos')) { + alert("[BAR] Using different X axis positions when combining the Bar and Line is not advised"); + } + + line.Set('chart.gutter.left', this.Get('chart.gutter.left')); + line.Set('chart.gutter.right', this.Get('chart.gutter.right')); + line.Set('chart.gutter.top', this.Get('chart.gutter.top')); + line.Set('chart.gutter.bottom', this.Get('chart.gutter.bottom')); + + line.Set('chart.hmargin', (this.canvas.width - this.gutterLeft - this.gutterRight) / (line.original_data[0].length * 2)); + + // If a BAR custom yMax is set, use that + if (this.Get('chart.ymax') && !line.Get('chart.ymax')) { + line.Set('chart.ymax', this.Get('chart.ymax')); + + } else if (line.Get('chart.ymax')) { + line.Set('chart.ymax', line.Get('chart.ymax')); + } + + // The boolean is used to specify that the Line chart .Draw() method is being called by the Bar chart + line.Draw(true); + } + + + /** + * Draw "in graph" labels + */ + if (this.Get('chart.labels.ingraph')) { + RGraph.DrawInGraphLabels(this); + } + + /** + * Draw crosschairs + */ + if (this.Get('chart.crosshairs')) { + RGraph.DrawCrosshairs(this); + } + + /** + * If the canvas is annotatable, do install the event handlers + */ + if (this.Get('chart.annotatable')) { + RGraph.Annotate(this); + } + + /** + * This bit shows the mini zoom window if requested + */ + if (this.Get('chart.zoom.mode') == 'thumbnail' || this.Get('chart.zoom.mode') == 'area') { + RGraph.ShowZoomWindow(this); + } + + + /** + * This function enables resizing + */ + if (this.Get('chart.resizable')) { + RGraph.AllowResizing(this); + } + + + /** + * This function enables adjusting + */ + if (this.Get('chart.adjustable')) { + RGraph.AllowAdjusting(this); + } + + /** + * Fire the RGraph ondraw event + */ + RGraph.FireCustomEvent(this, 'ondraw'); + } + + + /** + * Draws the charts axes + */ + RGraph.Bar.prototype.DrawAxes = function () + { + if (this.Get('chart.noaxes')) { + return; + } + + var xaxispos = this.Get('chart.xaxispos'); + var yaxispos = this.Get('chart.yaxispos'); + + this.context.beginPath(); + this.context.strokeStyle = this.Get('chart.axis.color'); + this.context.lineWidth = 1; + + // Draw the Y axis + if (this.Get('chart.noyaxis') == false) { + if (yaxispos == 'right') { + this.context.moveTo(RGraph.GetWidth(this) - this.gutterRight, this.gutterTop); + this.context.lineTo(RGraph.GetWidth(this) - this.gutterRight, RGraph.GetHeight(this) - this.gutterBottom); + } else { + this.context.moveTo(this.gutterLeft, this.gutterTop); + this.context.lineTo(this.gutterLeft, RGraph.GetHeight(this) - this.gutterBottom); + } + } + + // Draw the X axis + if (this.Get('chart.noxaxis') == false) { + if (xaxispos == 'center') { + this.context.moveTo(this.gutterLeft, ((this.canvas.height - this.gutterTop - this.gutterBottom) / 2) + this.gutterTop); + this.context.lineTo(this.canvas.width - this.gutterRight, ((this.canvas.height - this.gutterTop - this.gutterBottom) / 2) + this.gutterTop); + } else if (xaxispos == 'top') { + this.context.moveTo(this.gutterLeft, this.gutterTop); + this.context.lineTo(this.canvas.width - this.gutterRight, this.gutterTop); + } else { + this.context.moveTo(this.gutterLeft, RGraph.GetHeight(this) - this.gutterBottom); + this.context.lineTo(RGraph.GetWidth(this) - this.gutterRight, RGraph.GetHeight(this) - this.gutterBottom); + } + } + + var numYTicks = this.Get('chart.numyticks'); + + // Draw the Y tickmarks + if (this.Get('chart.noyaxis') == false) { + var yTickGap = (RGraph.GetHeight(this) - this.gutterTop - this.gutterBottom) / numYTicks; + var xpos = yaxispos == 'left' ? this.gutterLeft : RGraph.GetWidth(this) - this.gutterRight; + + for (y=this.gutterTop; + xaxispos == 'center' ? y <= (RGraph.GetHeight(this) - this.gutterBottom) : y < (RGraph.GetHeight(this) - this.gutterBottom + (xaxispos == 'top' ? 1 : 0)); + y += yTickGap) { + + if (xaxispos == 'center' && y == (RGraph.GetHeight(this) / 2)) continue; + + // X axis at the top + if (xaxispos == 'top' && y == this.gutterTop) continue; + + this.context.moveTo(xpos, y); + this.context.lineTo(xpos + (yaxispos == 'left' ? -3 : 3), y); + } + + /** + * If the X axis is not being shown, draw an extra tick + */ + if (this.Get('chart.noxaxis')) { + if (xaxispos == 'center') { + this.context.moveTo(xpos + (yaxispos == 'left' ? -3 : 3), this.canvas.height / 2); + this.context.lineTo(xpos, RGraph.GetHeight(this) / 2); + } else if (xaxispos == 'top') { + this.context.moveTo(xpos + (yaxispos == 'left' ? -3 : 3), this.gutterTop); + this.context.lineTo(xpos, this.gutterTop); + } else { + this.context.moveTo(xpos + (yaxispos == 'left' ? -3 : 3), RGraph.GetHeight(this) - this.gutterBottom); + this.context.lineTo(xpos, RGraph.GetHeight(this) - this.gutterBottom); + } + } + } + + + // Draw the X tickmarks + if (this.Get('chart.noxaxis') == false) { + + xTickGap = (RGraph.GetWidth(this) - this.gutterLeft - this.gutterRight) / this.data.length; + + if (xaxispos == 'bottom') { + yStart = this.canvas.height - this.gutterBottom; + yEnd = (this.canvas.height - this.gutterBottom) + 3; + } else if (xaxispos == 'top') { + yStart = this.gutterTop - 3; + yEnd = this.gutterTop; + } else if (xaxispos == 'center') { + yStart = ((this.canvas.height - this.gutterTop - this.gutterBottom) / 2) + this.gutterTop + 3; + yEnd = ((this.canvas.height - this.gutterTop - this.gutterBottom) / 2) + this.gutterTop - 3; + } + + //////////////// X TICKS //////////////// + var noEndXTick = this.Get('chart.noendxtick'); + + for (x=this.gutterLeft + (yaxispos == 'left' ? xTickGap : 0); x<this.canvas.width - this.gutterRight + (yaxispos == 'left' ? 5 : 0); x+=xTickGap) { + + if (yaxispos == 'left' && !noEndXTick && x > this.gutterLeft) { + this.context.moveTo(x, yStart); + this.context.lineTo(x, yEnd); + + } else if (yaxispos == 'left' && noEndXTick && x > this.gutterLeft && x < (this.canvas.width - this.gutterRight) ) { + this.context.moveTo(x, yStart); + this.context.lineTo(x, yEnd); + + } else if (yaxispos == 'right' && x < (this.canvas.width - this.gutterRight) && !noEndXTick) { + this.context.moveTo(x, yStart); + this.context.lineTo(x, yEnd); + + } else if (yaxispos == 'right' && x < (this.canvas.width - this.gutterRight) && x > (this.gutterLeft) && noEndXTick) { + this.context.moveTo(x, yStart); + this.context.lineTo(x, yEnd); + } + } + + if (this.Get('chart.noyaxis')) { + this.context.moveTo(this.gutterLeft, yStart); + this.context.lineTo(this.gutterLeft, yEnd); + } + + //////////////// X TICKS //////////////// + } + + /** + * If the Y axis is not being shown, draw an extra tick + */ + if (this.Get('chart.noyaxis') && this.Get('chart.noxaxis') == false) { + if (xaxispos == 'center') { + this.context.moveTo(this.gutterLeft, (RGraph.GetHeight(this) / 2) - 3); + this.context.lineTo(this.gutterLeft, (RGraph.GetHeight(this) / 2) + 3); + } else { + this.context.moveTo(this.gutterLeft, this.canvas.height - this.gutterBottom); + this.context.lineTo(this.gutterLeft, this.canvas.height - this.gutterBottom + 3); + } + } + + this.context.stroke(); + } + + + /** + * Draws the bars + */ + RGraph.Bar.prototype.Drawbars = function () + { + this.context.lineWidth = this.Get('chart.linewidth'); + this.context.strokeStyle = this.Get('chart.strokecolor'); + this.context.fillStyle = this.Get('chart.colors')[0]; + var prevX = 0; + var prevY = 0; + var decimals = this.Get('chart.scale.decimals'); + + /** + * Work out the max value + */ + if (this.Get('chart.ymax')) { + + this.max = this.Get('chart.ymax'); + this.min = this.Get('chart.ymin'); + + this.scale = [ + (((this.max - this.min) * (1/5)) + this.min).toFixed(decimals), + (((this.max - this.min) * (2/5)) + this.min).toFixed(decimals), + (((this.max - this.min) * (3/5)) + this.min).toFixed(decimals), + (((this.max - this.min) * (4/5)) + this.min).toFixed(decimals), + (((this.max - this.min) * (5/5) + this.min)).toFixed(decimals) + ]; + } else { + + this.min = this.Get('chart.ymin'); + + for (i=0; i<this.data.length; ++i) { + if (typeof(this.data[i]) == 'object') { + var value = this.Get('chart.grouping') == 'grouped' ? Number(RGraph.array_max(this.data[i], true)) : Number(RGraph.array_sum(this.data[i])) ; + + } else { + var value = Number(this.data[i]); + } + + this.max = Math.max(Math.abs(this.max), Math.abs(value)); + } + + this.scale = RGraph.getScale(this.max, this); + this.max = this.scale[4]; + + if (this.Get('chart.ymin')) { + + var decimals = this.Get('chart.scale.decimals'); + + this.scale[0] = ((Number(this.scale[4] - this.min) * 0.2) + this.min).toFixed(decimals); + this.scale[1] = ((Number(this.scale[4] - this.min) * 0.4) + this.min).toFixed(decimals); + this.scale[2] = ((Number(this.scale[4] - this.min) * 0.6) + this.min).toFixed(decimals); + this.scale[3] = ((Number(this.scale[4] - this.min) * 0.8) + this.min).toFixed(decimals); + this.scale[4] = ((Number(this.scale[4] - this.min) * 1.0) + this.min).toFixed(decimals); + + } else { + if (this.Get('chart.scale.decimals')) { + + var decimals = this.Get('chart.scale.decimals'); + + this.scale[0] = Number(this.scale[0]).toFixed(decimals); + this.scale[1] = Number(this.scale[1]).toFixed(decimals); + this.scale[2] = Number(this.scale[2]).toFixed(decimals); + this.scale[3] = Number(this.scale[3]).toFixed(decimals); + this.scale[4] = Number(this.scale[4]).toFixed(decimals); + } + } + } + + /** + * Draw horizontal bars here + */ + if (this.Get('chart.background.hbars') && this.Get('chart.background.hbars').length > 0) { + RGraph.DrawBars(this); + } + + var variant = this.Get('chart.variant'); + + /** + * Draw the 3D axes is necessary + */ + if (variant == '3d') { + RGraph.Draw3DAxes(this); + } + + /** + * Get the variant once, and draw the bars, be they regular, stacked or grouped + */ + + // Get these variables outside of the loop + var xaxispos = this.Get('chart.xaxispos'); + var width = (this.canvas.width - this.gutterLeft - this.gutterRight ) / this.data.length; + var orig_height = height; + var hmargin = this.Get('chart.hmargin'); + var shadow = this.Get('chart.shadow'); + var shadowColor = this.Get('chart.shadow.color'); + var shadowBlur = this.Get('chart.shadow.blur'); + var shadowOffsetX = this.Get('chart.shadow.offsetx'); + var shadowOffsetY = this.Get('chart.shadow.offsety'); + var strokeStyle = this.Get('chart.strokecolor'); + var colors = this.Get('chart.colors'); + + for (i=0; i<this.data.length; ++i) { + + // Work out the height + //The width is up outside the loop + var height = ((RGraph.array_sum(this.data[i]) < 0 ? RGraph.array_sum(this.data[i]) + this.min : RGraph.array_sum(this.data[i]) - this.min) / (this.max - this.min) ) * (this.canvas.height - this.gutterTop - this.gutterBottom); + + // Half the height if the Y axis is at the center + if (xaxispos == 'center') { + height /= 2; + } + + var x = (i * width) + this.gutterLeft; + var y = xaxispos == 'center' ? ((this.canvas.height - this.gutterTop - this.gutterBottom) / 2) + this.gutterTop - height + : this.canvas.height - height - this.gutterBottom; + + // xaxispos is top + if (xaxispos == 'top') { + y = this.gutterTop + Math.abs(height); + } + + + // Account for negative lengths - Some browsers (eg Chrome) don't like a negative value + if (height < 0) { + y += height; + height = Math.abs(height); + } + + /** + * Turn on the shadow if need be + */ + if (shadow) { + this.context.shadowColor = shadowColor; + this.context.shadowBlur = shadowBlur; + this.context.shadowOffsetX = shadowOffsetX; + this.context.shadowOffsetY = shadowOffsetY; + } + + /** + * Draw the bar + */ + this.context.beginPath(); + if (typeof(this.data[i]) == 'number') { + + var barWidth = width - (2 * hmargin); + + // Set the fill color + this.context.strokeStyle = strokeStyle; + this.context.fillStyle = colors[0]; + + /** + * Sequential colors + */ + if (this.Get('chart.colors.sequential')) { + this.context.fillStyle = colors[i]; + } + + if (variant == 'sketch') { + + this.context.lineCap = 'round'; + + var sketchOffset = 3; + + this.context.beginPath(); + + this.context.strokeStyle = colors[0]; + + /** + * Sequential colors + */ + if (this.Get('chart.colors.sequential')) { + this.context.strokeStyle = colors[i]; + } + + // Left side + this.context.moveTo(x + hmargin + 2, y + height - 2); + this.context.lineTo(x + hmargin , y - 2); + + // The top + this.context.moveTo(x + hmargin - 3, y + -2 + (this.data[i] < 0 ? height : 0)); + this.context.bezierCurveTo(x + ((hmargin + width) * 0.33),y + 5 + (this.data[i] < 0 ? height - 10: 0),x + ((hmargin + width) * 0.66),y + 5 + (this.data[i] < 0 ? height - 10 : 0),x + hmargin + width + -1, y + 0 + (this.data[i] < 0 ? height : 0)); + + + // The right side + this.context.moveTo(x + hmargin + width - 2, y + -2); + this.context.lineTo(x + hmargin + width - 3, y + height - 3); + + for (var r=0.2; r<=0.8; r+=0.2) { + this.context.moveTo(x + hmargin + width + (r > 0.4 ? -1 : 3) - (r * width),y - 1); + this.context.lineTo(x + hmargin + width - (r > 0.4 ? 1 : -1) - (r * width), y + height + (r == 0.2 ? 1 : -2)); + } + + this.context.stroke(); + + // Regular bar + } else if (variant == 'bar' || variant == '3d' || variant == 'glass' || variant == 'bevel') { + + if (RGraph.isIE8() && shadow) { + this.DrawIEShadow([x + hmargin, y, barWidth, height]); + } + + if (variant == 'glass') { + RGraph.filledCurvyRect(this.context, x + hmargin, y, barWidth, height, 3, this.data[i] > 0, this.data[i] > 0, this.data[i] < 0, this.data[i] < 0); + RGraph.strokedCurvyRect(this.context, x + hmargin, y, barWidth, height, 3, this.data[i] > 0, this.data[i] > 0, this.data[i] < 0, this.data[i] < 0); + } else { + this.context.strokeRect(x + hmargin, y, barWidth, height); + this.context.fillRect(x + hmargin, y, barWidth, height); + } + + + // This bit draws the text labels that appear above the bars if requested + if (this.Get('chart.labels.above')) { + + // Turn off any shadow + if (shadow) { + RGraph.NoShadow(this); + } + + var yPos = y - 3; + + // Account for negative bars + if (this.data[i] < 0) { + yPos += height + 6 + (this.Get('chart.text.size') - 4); + } + + // Account for chart.xaxispos=top + if (this.Get('chart.xaxispos') == 'top') { + yPos = this.gutterTop + height + 6 + (typeof(this.Get('chart.labels.above.size')) == 'number' ? this.Get('chart.labels.above.size') : this.Get('chart.text.size') - 4); + } + + this.context.fillStyle = this.Get('chart.text.color'); + + RGraph.Text(this.context, + this.Get('chart.text.font'), + typeof(this.Get('chart.labels.above.size')) == 'number' ? this.Get('chart.labels.above.size') : this.Get('chart.text.size') - 3, + x + hmargin + (barWidth / 2), + yPos, + RGraph.number_format(this, Number(this.data[i]).toFixed(this.Get('chart.labels.above.decimals')),this.Get('chart.units.pre'),this.Get('chart.units.post')), + this.Get('chart.labels.above.angle') ? 'bottom' : null, + this.Get('chart.labels.above.angle') ? (this.Get('chart.labels.above.angle') > 0 && (this.Get('chart.xaxispos') != 'top') ? 'right' : 'left') : 'center', + null, + this.Get('chart.labels.above.angle') + ); + } + + // 3D effect + if (variant == '3d') { + + var prevStrokeStyle = this.context.strokeStyle; + var prevFillStyle = this.context.fillStyle; + + // Draw the top + this.context.beginPath(); + this.context.moveTo(x + hmargin, y); + this.context.lineTo(x + hmargin + 10, y - 5); + this.context.lineTo(x + hmargin + 10 + barWidth, y - 5); + this.context.lineTo(x + hmargin + barWidth, y); + this.context.closePath(); + + this.context.stroke(); + this.context.fill(); + + // Draw the right hand side + this.context.beginPath(); + this.context.moveTo(x + hmargin + barWidth, y); + this.context.lineTo(x + hmargin + barWidth + 10, y - 5); + this.context.lineTo(x + hmargin + barWidth + 10, y + height - 5); + this.context.lineTo(x + hmargin + barWidth, y + height); + this.context.closePath(); + + this.context.stroke(); + this.context.fill(); + + // Draw the darker top section + this.context.beginPath(); + this.context.fillStyle = 'rgba(255,255,255,0.3)'; + this.context.moveTo(x + hmargin, y); + this.context.lineTo(x + hmargin + 10, y - 5); + this.context.lineTo(x + hmargin + 10 + barWidth, y - 5); + this.context.lineTo(x + hmargin + barWidth, y); + this.context.lineTo(x + hmargin, y); + this.context.closePath(); + + this.context.stroke(); + this.context.fill(); + + // Draw the darker right side section + this.context.beginPath(); + this.context.fillStyle = 'rgba(0,0,0,0.4)'; + this.context.moveTo(x + hmargin + barWidth, y); + this.context.lineTo(x + hmargin + barWidth + 10, y - 5); + this.context.lineTo(x + hmargin + barWidth + 10, y - 5 + height); + this.context.lineTo(x + hmargin + barWidth, y + height); + this.context.lineTo(x + hmargin + barWidth, y); + this.context.closePath(); + + this.context.stroke(); + this.context.fill(); + + this.context.strokeStyle = prevStrokeStyle; + this.context.fillStyle = prevFillStyle; + + // Glass variant + } else if (variant == 'glass') { + + var grad = this.context.createLinearGradient( + x + hmargin, + y, + x + hmargin + (barWidth / 2), + y + ); + grad.addColorStop(0, 'rgba(255,255,255,0.9)'); + grad.addColorStop(1, 'rgba(255,255,255,0.5)'); + + this.context.beginPath(); + this.context.fillStyle = grad; + this.context.fillRect(x + hmargin + 2,y + (this.data[i] > 0 ? 2 : 0),(barWidth / 2) - 2,height - 2); + this.context.fill(); + } + + // Dot chart + } else if (variant == 'dot') { + + this.context.beginPath(); + this.context.moveTo(x + (width / 2), y); + this.context.lineTo(x + (width / 2), y + height); + this.context.stroke(); + + this.context.beginPath(); + this.context.fillStyle = this.Get('chart.colors')[i]; + this.context.arc(x + (width / 2), y + (this.data[i] > 0 ? 0 : height), 2, 0, 6.28, 0); + + // Set the colour for the dots + this.context.fillStyle = this.Get('chart.colors')[0]; + + /** + * Sequential colors + */ + if (this.Get('chart.colors.sequential')) { + this.context.fillStyle = colors[i]; + } + + this.context.stroke(); + this.context.fill(); + + // Pyramid chart + } else if (variant == 'pyramid') { + + this.context.beginPath(); + var startY = (this.Get('chart.xaxispos') == 'center' ? (RGraph.GetHeight(this) / 2) : (RGraph.GetHeight(this) - this.gutterBottom)); + + this.context.moveTo(x + hmargin, startY); + this.context.lineTo( + x + hmargin + (barWidth / 2), + y + (this.Get('chart.xaxispos') == 'center' && (this.data[i] < 0) ? height : 0) + ); + this.context.lineTo(x + hmargin + barWidth, startY); + + this.context.closePath(); + + this.context.stroke(); + this.context.fill(); + + // Arrow chart + } else if (variant == 'arrow') { + + var startY = (this.Get('chart.xaxispos') == 'center' ? (RGraph.GetHeight(this) / 2) : (RGraph.GetHeight(this) - this.gutterBottom)); + + this.context.lineWidth = this.Get('chart.linewidth') ? this.Get('chart.linewidth') : 1; + this.context.lineCap = 'round'; + + this.context.beginPath(); + + this.context.moveTo(x + hmargin + (barWidth / 2), startY); + this.context.lineTo(x + hmargin + (barWidth / 2), y + (this.Get('chart.xaxispos') == 'center' && (this.data[i] < 0) ? height : 0)); + this.context.arc(x + hmargin + (barWidth / 2), + y + (this.Get('chart.xaxispos') == 'center' && (this.data[i] < 0) ? height : 0), + 5, + this.data[i] > 0 ? 0.78 : 5.6, + this.data[i] > 0 ? 0.79 : 5.48, + this.data[i] < 0); + + this.context.moveTo(x + hmargin + (barWidth / 2), y + (this.Get('chart.xaxispos') == 'center' && (this.data[i] < 0) ? height : 0)); + this.context.arc(x + hmargin + (barWidth / 2), + y + (this.Get('chart.xaxispos') == 'center' && (this.data[i] < 0) ? height : 0), + 5, + this.data[i] > 0 ? 2.355 : 4, + this.data[i] > 0 ? 2.4 : 3.925, + this.data[i] < 0); + + this.context.stroke(); + + this.context.lineWidth = 1; + + // Unknown variant type + } else { + alert('[BAR] Warning! Unknown chart.variant: ' + variant); + } + + this.coords.push([x + hmargin, y, width - (2 * hmargin), height]); + + + /** + * Stacked bar + */ + } else if (typeof(this.data[i]) == 'object' && this.Get('chart.grouping') == 'stacked') { + + if (this.min) { + alert("[ERROR] Stacked Bar charts with a Y min are not supported"); + } + + var barWidth = width - (2 * hmargin); + var redrawCoords = [];// Necessary to draw if the shadow is enabled + var startY = 0; + var dataset = this.data[i]; + + for (j=0; j<dataset.length; ++j) { + + // Stacked bar chart and X axis pos in the middle - poitless since negative values are not permitted + if (xaxispos == 'center') { + alert("[BAR] It's pointless having the X axis position at the center on a stacked bar chart."); + return; + } + + // Negative values not permitted for the stacked chart + if (this.data[i][j] < 0) { + alert('[BAR] Negative values are not permitted with a stacked bar chart. Try a grouped one instead.'); + return; + } + + /** + * Set the fill and stroke colors + */ + this.context.strokeStyle = strokeStyle + this.context.fillStyle = colors[j]; + + if (this.Get('chart.colors.reverse')) { + this.context.fillStyle = colors[this.data[i].length - j - 1]; + } + + var height = (dataset[j] / this.max) * (this.canvas.height - this.gutterTop - this.gutterBottom ); + + // If the X axis pos is in the center, we need to half the height + if (xaxispos == 'center') { + height /= 2; + } + + var totalHeight = (RGraph.array_sum(dataset) / this.max) * (this.canvas.height - hmargin - this.gutterTop - this.gutterBottom); + + /** + * Store the coords for tooltips + */ + this.coords.push([x + hmargin, y, width - (2 * hmargin), height]); + + // MSIE shadow + if (RGraph.isIE8() && shadow) { + this.DrawIEShadow([x + hmargin, y, width - (2 * hmargin), height + 1]); + } + + this.context.strokeRect(x + hmargin, y, width - (2 * hmargin), height); + this.context.fillRect(x + hmargin, y, width - (2 * hmargin), height); + + + if (j == 0) { + var startY = y; + var startX = x; + } + + /** + * Store the redraw coords if the shadow is enabled + */ + if (shadow) { + redrawCoords.push([x + hmargin, y, width - (2 * hmargin), height, colors[j]]); + } + + /** + * Stacked 3D effect + */ + if (variant == '3d') { + + var prevFillStyle = this.context.fillStyle; + var prevStrokeStyle = this.context.strokeStyle; + + + // Draw the top side + if (j == 0) { + this.context.beginPath(); + this.context.moveTo(startX + hmargin, y); + this.context.lineTo(startX + 10 + hmargin, y - 5); + this.context.lineTo(startX + 10 + barWidth + hmargin, y - 5); + this.context.lineTo(startX + barWidth + hmargin, y); + this.context.closePath(); + + this.context.fill(); + this.context.stroke(); + } + + // Draw the side section + this.context.beginPath(); + this.context.moveTo(startX + barWidth + hmargin, y); + this.context.lineTo(startX + barWidth + hmargin + 10, y - 5); + this.context.lineTo(startX + barWidth + + hmargin + 10, y - 5 + height); + this.context.lineTo(startX + barWidth + hmargin , y + height); + this.context.closePath(); + + this.context.fill(); + this.context.stroke(); + + // Draw the darker top side + if (j == 0) { + this.context.fillStyle = 'rgba(255,255,255,0.3)'; + this.context.beginPath(); + this.context.moveTo(startX + hmargin, y); + this.context.lineTo(startX + 10 + hmargin, y - 5); + this.context.lineTo(startX + 10 + barWidth + hmargin, y - 5); + this.context.lineTo(startX + barWidth + hmargin, y); + this.context.closePath(); + + this.context.fill(); + this.context.stroke(); + } + + // Draw the darker side section + this.context.fillStyle = 'rgba(0,0,0,0.4)'; + this.context.beginPath(); + this.context.moveTo(startX + barWidth + hmargin, y); + this.context.lineTo(startX + barWidth + hmargin + 10, y - 5); + this.context.lineTo(startX + barWidth + + hmargin + 10, y - 5 + height); + this.context.lineTo(startX + barWidth + hmargin , y + height); + this.context.closePath(); + + this.context.fill(); + this.context.stroke(); + + this.context.strokeStyle = prevStrokeStyle; + this.context.fillStyle = prevFillStyle; + } + + y += height; + } + + // This bit draws the text labels that appear above the bars if requested + if (this.Get('chart.labels.above')) { + + // Turn off any shadow + RGraph.NoShadow(this); + + this.context.fillStyle = this.Get('chart.text.color'); + RGraph.Text(this.context,this.Get('chart.text.font'),typeof(this.Get('chart.labels.above.size')) == 'number' ? this.Get('chart.labels.above.size') : this.Get('chart.text.size') - 3,startX + (barWidth / 2) + this.Get('chart.hmargin'),startY - (this.Get('chart.shadow') && this.Get('chart.shadow.offsety') < 0 ? 7 : 4),String(this.Get('chart.units.pre') + RGraph.array_sum(this.data[i]).toFixed(this.Get('chart.labels.above.decimals')) + this.Get('chart.units.post')),this.Get('chart.labels.above.angle') ? 'bottom' : null,this.Get('chart.labels.above.angle') ? (this.Get('chart.labels.above.angle') > 0 ? 'right' : 'left') : 'center',null,this.Get('chart.labels.above.angle')); + + // Turn any shadow back on + if (shadow) { + this.context.shadowColor = shadowColor; + this.context.shadowBlur = shadowBlur; + this.context.shadowOffsetX = shadowOffsetX; + this.context.shadowOffsetY = shadowOffsetY; + } + } + + + /** + * Redraw the bars if the shadow is enabled due to hem being drawn from the bottom up, and the + * shadow spilling over to higher up bars + */ + if (shadow) { + + RGraph.NoShadow(this); + + for (k=0; k<redrawCoords.length; ++k) { + this.context.strokeStyle = strokeStyle; + this.context.fillStyle = redrawCoords[k][4]; + this.context.strokeRect(redrawCoords[k][0], redrawCoords[k][1], redrawCoords[k][2], redrawCoords[k][3]); + this.context.fillRect(redrawCoords[k][0], redrawCoords[k][1], redrawCoords[k][2], redrawCoords[k][3]); + + this.context.stroke(); + this.context.fill(); + } + + // Reset the redraw coords to be empty + redrawCoords = []; + } + /** + * Grouped bar + */ + } else if (typeof(this.data[i]) == 'object' && this.Get('chart.grouping') == 'grouped') { + + var redrawCoords = []; + this.context.lineWidth = this.Get('chart.linewidth'); + + for (j=0; j<this.data[i].length; ++j) { + // Set the fill and stroke colors + this.context.strokeStyle = strokeStyle; + this.context.fillStyle = colors[j]; + + var individualBarWidth = (width - (2 * hmargin)) / this.data[i].length; + var height = ((this.data[i][j] + (this.data[i][j] < 0 ? this.min : (-1 * this.min) )) / (this.max - this.min) ) * (this.canvas.height - this.gutterTop - this.gutterBottom ); + + // If the X axis pos is in the center, we need to half the height + if (xaxispos == 'center') { + height /= 2; + } + + var startX = x + hmargin + (j * individualBarWidth); + + /** + * Determine the start positioning for the bar + */ + if (xaxispos == 'top') { + var startY = this.Get('chart.gutter.top'); + var height = Math.abs(height); + + } else if (xaxispos == 'center') { + var startY = this.gutterTop + (this.grapharea / 2) - height; + + } else { + var startY = this.canvas.height - this.gutterBottom - height; + var height = Math.abs(height); + } + + /** + * Draw MSIE shadow + */ + if (RGraph.isIE8() && shadow) { + this.DrawIEShadow([startX, startY, individualBarWidth, height]); + } + + this.context.strokeRect(startX, startY, individualBarWidth, height); + this.context.fillRect(startX, startY, individualBarWidth, height); + y += height; + + // This bit draws the text labels that appear above the bars if requested + if (this.Get('chart.labels.above')) { + + this.context.strokeStyle = 'rgba(0,0,0,0)'; + + // Turn off any shadow + if (shadow) { + RGraph.NoShadow(this); + } + + var yPos = y - 3; + + // Account for negative bars + if (this.data[i][j] < 0) { + yPos += height + 6 + (this.Get('chart.text.size') - 4); + } + + this.context.fillStyle = this.Get('chart.text.color'); + RGraph.Text(this.context,this.Get('chart.text.font'),typeof(this.Get('chart.labels.above.size')) == 'number' ? this.Get('chart.labels.above.size') : this.Get('chart.text.size') - 3,startX + (individualBarWidth / 2),startY - 2,RGraph.number_format(this, this.data[i][j].toFixed(this.Get('chart.labels.above.decimals'))),null,this.Get('chart.labels.above.angle') ? (this.Get('chart.labels.above.angle') > 0 ? 'right' : 'left') : 'center', null, this.Get('chart.labels.above.angle')); + + // Turn any shadow back on + if (shadow) { + this.context.shadowColor = shadowColor; + this.context.shadowBlur = shadowBlur; + this.context.shadowOffsetX = shadowOffsetX; + this.context.shadowOffsetY = shadowOffsetY; + } + } + + /** + * Grouped 3D effect + */ + if (variant == '3d') { + var prevFillStyle = this.context.fillStyle; + var prevStrokeStyle = this.context.strokeStyle; + + // Draw the top side + this.context.beginPath(); + this.context.moveTo(startX, startY); + this.context.lineTo(startX + 10, startY - 5); + this.context.lineTo(startX + 10 + individualBarWidth, startY - 5); + this.context.lineTo(startX + individualBarWidth, startY); + this.context.closePath(); + + this.context.fill(); + this.context.stroke(); + + // Draw the side section + this.context.beginPath(); + this.context.moveTo(startX + individualBarWidth, startY); + this.context.lineTo(startX + individualBarWidth + 10, startY - 5); + this.context.lineTo(startX + individualBarWidth + 10, startY - 5 + height); + this.context.lineTo(startX + individualBarWidth , startY + height); + this.context.closePath(); + + this.context.fill(); + this.context.stroke(); + + + // Draw the darker top side + this.context.fillStyle = 'rgba(255,255,255,0.3)'; + this.context.beginPath(); + this.context.moveTo(startX, startY); + this.context.lineTo(startX + 10, startY - 5); + this.context.lineTo(startX + 10 + individualBarWidth, startY - 5); + this.context.lineTo(startX + individualBarWidth, startY); + this.context.closePath(); + + this.context.fill(); + this.context.stroke(); + + // Draw the darker side section + this.context.fillStyle = 'rgba(0,0,0,0.4)'; + this.context.beginPath(); + this.context.moveTo(startX + individualBarWidth, startY); + this.context.lineTo(startX + individualBarWidth + 10, startY - 5); + this.context.lineTo(startX + individualBarWidth + 10, startY - 5 + height); + this.context.lineTo(startX + individualBarWidth , startY + height); + this.context.closePath(); + + this.context.fill(); + this.context.stroke(); + + this.context.strokeStyle = prevStrokeStyle; + this.context.fillStyle = prevFillStyle; + } + + this.coords.push([startX, startY, individualBarWidth, height]); + + // Facilitate shadows going to the left + if (this.Get('chart.shadow')) { + redrawCoords.push([startX, startY, individualBarWidth, height]); + } + } + + /** + * Redraw the bar if shadows are going to the left + */ + if (redrawCoords.length) { + + RGraph.NoShadow(this); + + this.context.lineWidth = this.Get('chart.linewidth'); + + this.context.beginPath(); + for (var j=0; j<redrawCoords.length; ++j) { + + this.context.fillStyle = this.Get('chart.colors')[j]; + this.context.strokeStyle = this.Get('chart.strokecolor'); + + this.context.fillRect(redrawCoords[j][0], redrawCoords[j][1], redrawCoords[j][2], redrawCoords[j][3]); + this.context.strokeRect(redrawCoords[j][0], redrawCoords[j][1], redrawCoords[j][2], redrawCoords[j][3]); + } + this.context.fill(); + this.context.stroke(); + + redrawCoords = []; + } + } + + this.context.closePath(); + } + + /** + * Turn off any shadow + */ + RGraph.NoShadow(this); + + + /** + * Install the onclick event handler + */ + if (this.Get('chart.tooltips')) { + + // Need to register this object for redrawing + RGraph.Register(this); + + RGraph.InstallBarTooltipEventListeners(this); + } + } + + /** + * Draws the labels for the graph + */ + RGraph.Bar.prototype.DrawLabels = function () + { + var context = this.context; + var text_angle = this.Get('chart.text.angle'); + var text_size = this.Get('chart.text.size'); + var labels = this.Get('chart.labels'); + + + // Draw the Y axis labels: + if (this.Get('chart.ylabels')) { + this.Drawlabels_top(); + this.Drawlabels_center(); + this.Drawlabels_bottom(); + } + + /** + * The X axis labels + */ + if (typeof(labels) == 'object' && labels) { + + var yOffset = 13 + Number(this.Get('chart.xlabels.offset')); + + /** + * Text angle + */ + var angle = 0; + var halign = 'center'; + + if (text_angle > 0) { + angle = -1 * text_angle; + halign = 'right'; + yOffset -= 5; + + if (this.Get('chart.xaxispos') == 'top') { + halign = 'left'; + yOffset += 5; + } + } + + // Draw the X axis labels + context.fillStyle = this.Get('chart.text.color'); + + // How wide is each bar + var barWidth = (RGraph.GetWidth(this) - this.gutterRight - this.gutterLeft) / labels.length; + + // Reset the xTickGap + xTickGap = (RGraph.GetWidth(this) - this.gutterRight - this.gutterLeft) / labels.length + + // Draw the X tickmarks + var i=0; + var font = this.Get('chart.text.font'); + + for (x=this.gutterLeft + (xTickGap / 2); x<=RGraph.GetWidth(this) - this.gutterRight; x+=xTickGap) { + RGraph.Text(context, font, + text_size, + x + (this.Get('chart.text.angle') == 90 ? 0 : 0), + this.Get('chart.xaxispos') == 'top' ? this.gutterTop - yOffset + text_size - 1: (RGraph.GetHeight(this) - this.gutterBottom) + yOffset, + String(labels[i++]), + (this.Get('chart.text.angle') == 90 ? 'center' : null), + halign, + null, + angle); + } + } + } + + /** + * Draws the X axis at the top + */ + RGraph.Bar.prototype.Drawlabels_top = function () + { + this.context.beginPath(); + this.context.fillStyle = this.Get('chart.text.color'); + this.context.strokeStyle = 'black'; + + if (this.Get('chart.xaxispos') == 'top') { + + var context = this.context; + var interval = (this.grapharea * (1/5) ); + var text_size = this.Get('chart.text.size'); + var units_pre = this.Get('chart.units.pre'); + var units_post = this.Get('chart.units.post'); + var align = this.Get('chart.yaxispos') == 'left' ? 'right' : 'left'; + var font = this.Get('chart.text.font'); + var numYLabels = this.Get('chart.ylabels.count'); + + if (this.Get('chart.ylabels.inside') == true) { + var xpos = this.Get('chart.yaxispos') == 'left' ? this.gutterLeft + 5 : RGraph.GetWidth(this) - this.gutterRight - 5; + var align = this.Get('chart.yaxispos') == 'left' ? 'left' : 'right'; + var boxed = true; + } else { + var xpos = this.Get('chart.yaxispos') == 'left' ? this.gutterLeft - 5 : this.canvas.width - this.gutterRight + 5; + var boxed = false; + } + + /** + * Draw specific Y labels here so that the local variables can be reused + */ + if (typeof(this.Get('chart.ylabels.specific')) == 'object' && this.Get('chart.ylabels.specific')) { + + var labels = RGraph.array_reverse(this.Get('chart.ylabels.specific')); + var grapharea = RGraph.GetHeight(this) - this.gutterTop - this.gutterBottom; + + for (var i=0; i<labels.length; ++i) { + + var y = this.gutterTop + (grapharea * (i / labels.length)) + (grapharea / labels.length); + + RGraph.Text(context, font, text_size, xpos, y, labels[i], 'center', align, boxed); + } + + return; + } + + // 1(ish) label + if (numYLabels == 3 || numYLabels == 5) { + RGraph.Text(context, font, text_size, xpos, this.gutterTop + this.halfTextHeight + interval, '-' + RGraph.number_format(this, this.scale[0], units_pre, units_post), null, align, boxed); + + // 5 labels + if (numYLabels == 5) { + RGraph.Text(context, font, text_size, xpos, (1*interval) + this.gutterTop + this.halfTextHeight + interval, '-' + RGraph.number_format(this, this.scale[1], units_pre, units_post), null, align, boxed); + RGraph.Text(context, font, text_size, xpos, (3*interval) + this.gutterTop + this.halfTextHeight + interval, '-' + RGraph.number_format(this, this.scale[3], units_pre, units_post), null, align, boxed); + } + + // 3 labels + if (numYLabels == 3 || numYLabels == 5) { + RGraph.Text(context, font, text_size, xpos, (2*interval) + this.gutterTop + this.halfTextHeight + interval, '-' + RGraph.number_format(this, this.scale[2], units_pre, units_post), null, align, boxed); + RGraph.Text(context, font, text_size, xpos, (4*interval) + this.gutterTop + this.halfTextHeight + interval, '-' + RGraph.number_format(this, this.scale[4], units_pre, units_post), null, align, boxed); + } + } + + // 10 Y labels + if (numYLabels == 10) { + + interval = (this.grapharea / numYLabels ); + + for (var i=10; i>0; --i) { + RGraph.Text(context, font, text_size, xpos,this.gutterTop + ((this.grapharea / numYLabels) * i),'-' + RGraph.number_format(this,((this.scale[4] / numYLabels) * i).toFixed((this.Get('chart.scale.decimals'))), units_pre, units_post), 'center', align, boxed); + } + } + + /** + * Show the minimum value if its not zero + */ + if (this.Get('chart.ymin') != 0) { + RGraph.Text(context, + font, + text_size, + xpos, + this.gutterTop, + '-' + RGraph.number_format(this,(this.min.toFixed((this.Get('chart.scale.decimals')))), units_pre, units_post), + 'center', + align, + boxed); + } + + } + + this.context.fill(); + this.context.stroke(); + } + + /** + * Draws the X axis in the middle + */ + RGraph.Bar.prototype.Drawlabels_center = function () + { + var font = this.Get('chart.text.font'); + var numYLabels = this.Get('chart.ylabels.count'); + + this.context.fillStyle = this.Get('chart.text.color'); + + if (this.Get('chart.xaxispos') == 'center') { + + /** + * Draw the top labels + */ + var interval = (this.grapharea * (1/10) ); + var text_size = this.Get('chart.text.size'); + var units_pre = this.Get('chart.units.pre'); + var units_post = this.Get('chart.units.post'); + var context = this.context; + var align = ''; + var xpos = 0; + var boxed = false; + + this.context.fillStyle = this.Get('chart.text.color'); + this.context.strokeStyle = 'black'; + + if (this.Get('chart.ylabels.inside') == true) { + var xpos = this.Get('chart.yaxispos') == 'left' ? this.gutterLeft + 5 : RGraph.GetWidth(this) - this.gutterRight - 5; + var align = this.Get('chart.yaxispos') == 'left' ? 'left' : 'right'; + var boxed = true; + } else { + var xpos = this.Get('chart.yaxispos') == 'left' ? this.gutterLeft - 5 : RGraph.GetWidth(this) - this.gutterRight + 5; + var align = this.Get('chart.yaxispos') == 'left' ? 'right' : 'left'; + var boxed = false; + } + + + + + + + + + + + + + /** + * Draw specific Y labels here so that the local variables can be reused + */ + if (typeof(this.Get('chart.ylabels.specific')) == 'object' && this.Get('chart.ylabels.specific')) { + + var labels = this.Get('chart.ylabels.specific'); + var grapharea = this.canvas.height - this.gutterTop - this.gutterBottom; + + // Draw the top halves labels + for (var i=0; i<labels.length; ++i) { + + var y = this.gutterTop + ((grapharea / 2) / labels.length) * i; + + RGraph.Text(context, font, text_size, xpos, y, String(labels[i]), 'center', align, boxed); + } + + // Draw the bottom halves labels + for (var i=labels.length-1; i>=0; --i) { + var y = this.gutterTop + (grapharea * ( (i+1) / (labels.length * 2) )) + (grapharea / 2); + + RGraph.Text(context, font, text_size, xpos, y, labels[labels.length - i - 1], 'center', align, boxed); + } + + return; + } + + + + + + + + + + + + + if (numYLabels == 3 || numYLabels == 5) { + RGraph.Text(context, font, text_size, xpos, this.gutterTop + this.halfTextHeight, RGraph.number_format(this, this.scale[4], units_pre, units_post), null, align, boxed); + + if (numYLabels == 5) { + RGraph.Text(context, font, text_size, xpos, (1*interval) + this.gutterTop + this.halfTextHeight, RGraph.number_format(this, this.scale[3], units_pre, units_post), null, align, boxed); + RGraph.Text(context, font, text_size, xpos, (3*interval) + this.gutterTop + this.halfTextHeight, RGraph.number_format(this, this.scale[1], units_pre, units_post), null, align, boxed); + } + + if (numYLabels == 3 || numYLabels == 5) { + RGraph.Text(context, font, text_size, xpos, (4*interval) + this.gutterTop + this.halfTextHeight, RGraph.number_format(this, this.scale[0], units_pre, units_post), null, align, boxed); + RGraph.Text(context, font, text_size, xpos, (2*interval) + this.gutterTop + this.halfTextHeight, RGraph.number_format(this, this.scale[2], units_pre, units_post), null, align, boxed); + } + } else if (numYLabels == 10) { + // 10Y labels + interval = (this.grapharea / numYLabels) / 2; + + for (var i=0; i<numYLabels; ++i) { + RGraph.Text(context, font, text_size, xpos,this.gutterTop + ((this.grapharea / (numYLabels * 2)) * i),RGraph.number_format(this, ((this.scale[4] / numYLabels) * (numYLabels - i)).toFixed((this.Get('chart.scale.decimals'))), units_pre, units_post), 'center', align, boxed); + } + } + /////////////////////////////////////////////////////////////////////////////////// + + /** + * Draw the bottom (X axis) labels + */ + var interval = (this.grapharea) / 10; + + if (numYLabels == 3 || numYLabels == 5) { + if (numYLabels == 3 || numYLabels == 5) { + RGraph.Text(context, font, text_size, xpos, (this.grapharea + this.gutterTop + this.halfTextHeight) - (4 * interval), '-' + RGraph.number_format(this, this.scale[0], units_pre, units_post), null, align, boxed); + RGraph.Text(context, font, text_size, xpos, (this.grapharea + this.gutterTop + this.halfTextHeight) - (2 * interval), '-' + RGraph.number_format(this, this.scale[2], units_pre, units_post), null, align, boxed); + } + + if (numYLabels == 5) { + RGraph.Text(context, font, text_size, xpos, (this.grapharea + this.gutterTop + this.halfTextHeight) - (3 * interval), '-' + RGraph.number_format(this, this.scale[1], units_pre, units_post), null, align, boxed); + RGraph.Text(context, font, text_size, xpos, (this.grapharea + this.gutterTop + this.halfTextHeight) - interval, '-' + RGraph.number_format(this, this.scale[3], units_pre, units_post), null, align, boxed); + } + + RGraph.Text(context, font, text_size, xpos, this.grapharea + this.gutterTop + this.halfTextHeight, '-' + RGraph.number_format(this, this.scale[4], units_pre, units_post), null, align, boxed); + + } else if (numYLabels == 10) { + + // Arbitrary number of Y labels + interval = (this.grapharea / numYLabels) / 2; + + for (var i=0; i<numYLabels; ++i) { + RGraph.Text(context, font, text_size, xpos,this.gutterTop + (this.grapharea / 2) + ((this.grapharea / (numYLabels * 2)) * i) + (this.grapharea / (numYLabels * 2)),RGraph.number_format(this, ((this.scale[4] / numYLabels) * (i+1)).toFixed((this.Get('chart.scale.decimals'))), '-' + units_pre, units_post),'center', align, boxed); + } + } + + + + /** + * Show the minimum value if its not zero + */ + if (this.Get('chart.ymin') != 0) { + RGraph.Text(context, + font, + text_size, + xpos, + this.gutterTop + (this.grapharea / 2), + RGraph.number_format(this,(this.min.toFixed((this.Get('chart.scale.decimals')))), units_pre, units_post), + 'center', + align, + boxed); + } + } + } + + /** + * Draws the X axdis at the bottom (the default) + */ + RGraph.Bar.prototype.Drawlabels_bottom = function () + { + + this.context.beginPath(); + this.context.fillStyle = this.Get('chart.text.color'); + this.context.strokeStyle = 'black'; + + if (this.Get('chart.xaxispos') != 'center' && this.Get('chart.xaxispos') != 'top') { + + var interval = (this.grapharea * (1/5) ); + var text_size = this.Get('chart.text.size'); + var units_pre = this.Get('chart.units.pre'); + var units_post = this.Get('chart.units.post'); + var context = this.context; + var align = this.Get('chart.yaxispos') == 'left' ? 'right' : 'left'; + var font = this.Get('chart.text.font'); + var numYLabels = this.Get('chart.ylabels.count'); + + if (this.Get('chart.ylabels.inside') == true) { + var xpos = this.Get('chart.yaxispos') == 'left' ? this.gutterLeft + 5 : RGraph.GetWidth(this) - this.gutterRight - 5; + var align = this.Get('chart.yaxispos') == 'left' ? 'left' : 'right'; + var boxed = true; + } else { + var xpos = this.Get('chart.yaxispos') == 'left' ? this.gutterLeft - 5 : RGraph.GetWidth(this) - this.gutterRight + 5; + var boxed = false; + } + + /** + * Draw specific Y labels here so that the local variables can be reused + */ + if (this.Get('chart.ylabels.specific') && typeof(this.Get('chart.ylabels.specific')) == 'object') { + + var labels = this.Get('chart.ylabels.specific'); + var grapharea = this.canvas.height - this.gutterTop - this.gutterBottom; + + for (var i=0; i<labels.length; ++i) { + var y = this.gutterTop + (grapharea * (i / labels.length)); + + RGraph.Text(context, font, text_size, xpos, y, labels[i], 'center', align, boxed); + } + + return; + } + + // 1 label + if (numYLabels == 3 || numYLabels == 5) { + + RGraph.Text(context, font, text_size, xpos, this.gutterTop + this.halfTextHeight, RGraph.number_format(this, this.scale[4], units_pre, units_post), null, align, boxed); + + // 5 labels + if (numYLabels == 5) { + RGraph.Text(context, font, text_size, xpos, (1*interval) + this.gutterTop + this.halfTextHeight, RGraph.number_format(this, this.scale[3], units_pre, units_post), null, align, boxed); + RGraph.Text(context, font, text_size, xpos, (3*interval) + this.gutterTop + this.halfTextHeight, RGraph.number_format(this, this.scale[1], units_pre, units_post), null, align, boxed); + } + + // 3 labels + if (numYLabels == 3 || numYLabels == 5) { + RGraph.Text(context, font, text_size, xpos, (2*interval) + this.gutterTop + this.halfTextHeight, RGraph.number_format(this, this.scale[2], units_pre, units_post), null, align, boxed); + RGraph.Text(context, font, text_size, xpos, (4*interval) + this.gutterTop + this.halfTextHeight, RGraph.number_format(this, this.scale[0], units_pre, units_post), null, align, boxed); + } + } + + // 10 Y labels + if (numYLabels == 10) { + + interval = (this.grapharea / numYLabels ); + + for (var i=0; i<numYLabels; ++i) { + RGraph.Text(context, font, text_size, xpos, this.gutterTop + ((this.grapharea / numYLabels) * i), RGraph.number_format(this,((this.scale[4] / numYLabels) * (numYLabels - i)).toFixed((this.Get('chart.scale.decimals'))), units_pre, units_post), 'center', align, boxed); + } + } + + /** + * Show the minimum value if its not zero + */ + if (this.Get('chart.ymin') != 0) { + RGraph.Text(context, + font, + text_size, + xpos, + this.canvas.height - this.gutterBottom, + RGraph.number_format(this,(this.min.toFixed((this.Get('chart.scale.decimals')))), units_pre, units_post), + 'center', + align, + boxed); + } + } + + this.context.fill(); + this.context.stroke(); + } + + + /** + * This function is used by MSIE only to manually draw the shadow + * + * @param array coords The coords for the bar + */ + RGraph.Bar.prototype.DrawIEShadow = function (coords) + { + var prevFillStyle = this.context.fillStyle; + var offsetx = this.Get('chart.shadow.offsetx'); + var offsety = this.Get('chart.shadow.offsety'); + + this.context.lineWidth = this.Get('chart.linewidth'); + this.context.fillStyle = this.Get('chart.shadow.color'); + this.context.beginPath(); + + // Draw shadow here + this.context.fillRect(coords[0] + offsetx, coords[1] + offsety, coords[2], coords[3]); + + this.context.fill(); + + // Change the fillstyle back to what it was + this.context.fillStyle = prevFillStyle; + } + + + /** + * Not used by the class during creating the graph, but is used by event handlers + * to get the coordinates (if any) of the selected bar + * + * @param object e The event object + * @param object OPTIONAL You can pass in the bar object instead of the + * function getting it from the canvas + */ + RGraph.Bar.prototype.getBar = function (e) + { + var canvas = e.target; + var obj = e.target.__object__; + + if (obj.__bar__) { + obj = obj.__bar__; + } + + var mouseCoords = RGraph.getMouseXY(e); + + // This facilitates you being able to pass in the bar object as a parameter instead of + // the function getting it from the object + if (arguments[1]) { + obj = arguments[1]; + } + + /** + * Loop through the bars determining if the mouse is over a bar + */ + for (var i=0; i<obj.coords.length; i++) { + + var mouseX = mouseCoords[0]; + var mouseY = mouseCoords[1]; + + var left = obj.coords[i][0]; + var top = obj.coords[i][1]; + var width = obj.coords[i][2]; + var height = obj.coords[i][3]; + + if ( mouseX >= left + && mouseX <= left + width + && mouseY >= top + && mouseY <= top + height) { + + return [obj, left, top, width, height, i]; + } + } + + return null; + }
\ No newline at end of file diff --git a/schall/static/RGraph/libraries/RGraph.bipolar.js b/schall/static/RGraph/libraries/RGraph.bipolar.js new file mode 100644 index 0000000..1d6883b --- /dev/null +++ b/schall/static/RGraph/libraries/RGraph.bipolar.js @@ -0,0 +1,787 @@ + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + + if (typeof(RGraph) == 'undefined') RGraph = {}; + + /** + * The bi-polar/age frequency constructor. + * + * @param string id The id of the canvas + * @param array left The left set of data points + * @param array right The right set of data points + */ + RGraph.Bipolar = function (id, left, right) + { + // Get the canvas and context objects + this.id = id; + this.canvas = document.getElementById(id); + this.context = this.canvas.getContext('2d'); + this.canvas.__object__ = this; + this.type = 'bipolar'; + this.coords = []; + this.max = 0; + this.isRGraph = true; + + + /** + * Compatibility with older browsers + */ + RGraph.OldBrowserCompat(this.context); + + + // The left and right data respectively + this.left = left; + this.right = right; + this.data = [left, right]; + + this.properties = { + 'chart.margin': 2, + 'chart.xtickinterval': null, + 'chart.labels': [], + 'chart.text.size': 10, + 'chart.text.color': 'black', + 'chart.text.font': 'Verdana', + 'chart.title.left': '', + 'chart.title.right': '', + 'chart.gutter.center': 60, + 'chart.gutter.left': 25, + 'chart.gutter.right': 25, + 'chart.gutter.top': 25, + 'chart.gutter.bottom': 25, + 'chart.title': '', + 'chart.title.background': null, + 'chart.title.hpos': null, + 'chart.title.vpos': null, + 'chart.title.bold': true, + 'chart.title.font': null, + 'chart.colors': ['#0f0'], + 'chart.contextmenu': null, + 'chart.tooltips': null, + 'chart.tooltips.effect': 'fade', + 'chart.tooltips.css.class': 'RGraph_tooltip', + 'chart.tooltips.highlight': true, + 'chart.highlight.stroke': 'black', + 'chart.highlight.fill': 'rgba(255,255,255,0.5)', + 'chart.units.pre': '', + 'chart.units.post': '', + 'chart.shadow': false, + 'chart.shadow.color': '#666', + 'chart.shadow.offsetx': 3, + 'chart.shadow.offsety': 3, + 'chart.shadow.blur': 3, + 'chart.annotatable': false, + 'chart.annotate.color': 'black', + 'chart.xmax': null, + 'chart.scale.decimals': null, + 'chart.scale.point': '.', + 'chart.scale.thousand': ',', + 'chart.axis.color': 'black', + 'chart.zoom.factor': 1.5, + 'chart.zoom.fade.in': true, + 'chart.zoom.fade.out': true, + 'chart.zoom.hdir': 'right', + 'chart.zoom.vdir': 'down', + 'chart.zoom.frames': 25, + 'chart.zoom.delay': 16.666, + 'chart.zoom.shadow': true, + 'chart.zoom.mode': 'canvas', + 'chart.zoom.thumbnail.width': 75, + 'chart.zoom.thumbnail.height': 75, + 'chart.zoom.background': true, + 'chart.zoom.action': 'zoom', + 'chart.resizable': false, + 'chart.resize.handle.adjust': [0,0], + 'chart.resize.handle.background': null, + 'chart.strokestyle': '#333' + } + + // Pad the arrays so they're the same size + while (this.left.length < this.right.length) this.left.push(0); + while (this.left.length > this.right.length) this.right.push(0); + } + + + /** + * The setter + * + * @param name string The name of the parameter to set + * @param value mixed The value of the paraneter + */ + RGraph.Bipolar.prototype.Set = function (name, value) + { + this.properties[name.toLowerCase()] = value; + } + + + /** + * The getter + * + * @param name string The name of the parameter to get + */ + RGraph.Bipolar.prototype.Get = function (name) + { + return this.properties[name.toLowerCase()]; + } + + + /** + * Draws the graph + */ + RGraph.Bipolar.prototype.Draw = function () + { + /** + * Fire the onbeforedraw event + */ + RGraph.FireCustomEvent(this, 'onbeforedraw'); + + + /** + * Clear all of this canvases event handlers (the ones installed by RGraph) + */ + RGraph.ClearEventListeners(this.id); + + /** + * This is new in May 2011 and facilitates indiviual gutter settings, + * eg chart.gutter.left + */ + this.gutterLeft = this.Get('chart.gutter.left'); + this.gutterRight = this.Get('chart.gutter.right'); + this.gutterTop = this.Get('chart.gutter.top'); + this.gutterBottom = this.Get('chart.gutter.bottom'); + + + + // Reset the data to what was initially supplied + this.left = this.data[0]; + this.right = this.data[1]; + + + /** + * Reset the coords array + */ + this.coords = []; + + this.GetMax(); + this.DrawAxes(); + this.DrawTicks(); + this.DrawLeftBars(); + this.DrawRightBars(); + + if (this.Get('chart.axis.color') != 'black') { + this.DrawAxes(); // Draw the axes again (if the axes color is not black) + } + + this.DrawLabels(); + this.DrawTitles(); + + /** + * Setup the context menu if required + */ + if (this.Get('chart.contextmenu')) { + RGraph.ShowContext(this); + } + + + /** + * Install the on* event handlers + */ + if (this.Get('chart.tooltips')) { + + + // Register the object so that it gets redrawn + RGraph.Register(this); + + + /** + * Install the window onclick handler + */ + + /** + * Install the window event handler + */ + var eventHandler_window_click = function () + { + RGraph.Redraw(); + } + window.addEventListener('click', eventHandler_window_click, false); + RGraph.AddEventListener('window_' + this.id, 'click', eventHandler_window_click); + + + + /** + * If the cursor is over a hotspot, change the cursor to a hand + */ + var eventHandler_canvas_mousemove = function (e) + { + e = RGraph.FixEventObject(e); + + var canvas = document.getElementById(this.id); + var obj = canvas.__object__; + + /** + * Get the mouse X/Y coordinates + */ + var mouseCoords = RGraph.getMouseXY(e); + var bar = obj.getBar(e); + + /** + * Loop through the bars determining if the mouse is over a bar + */ + for (var i=0; i<obj.coords.length; i++) { + + var mouseX = mouseCoords[0]; // In relation to the canvas + var mouseY = mouseCoords[1]; // In relation to the canvas + var left = obj.coords[i][0]; + var top = obj.coords[i][1]; + var width = obj.coords[i][2]; + var height = obj.coords[i][3]; + + if (mouseX >= left && mouseX <= (left + width ) && mouseY >= top && mouseY <= (top + height) ) { + /** + * Get the tooltip text + */ + if (typeof(obj.Get('chart.tooltips')) == 'function') { + var text = obj.Get('chart.tooltips')(i); + + } else if (typeof(obj.Get('chart.tooltips')) == 'object' && typeof(obj.Get('chart.tooltips')[i]) == 'function') { + var text = obj.Get('chart.tooltips')[i](i); + + } else if (typeof(obj.Get('chart.tooltips')) == 'object') { + var text = obj.Get('chart.tooltips')[i]; + + } else { + var text = ''; + } + + if (text) { + canvas.style.cursor = 'pointer'; + } + return; + } + } + + canvas.style.cursor = 'default'; + } + this.canvas.addEventListener('mousemove', eventHandler_canvas_mousemove, false); + RGraph.AddEventListener(this.id, 'mouseover', eventHandler_canvas_mousemove); + + + /** + * Install the onclick event handler for the tooltips + */ + var eventHandler_canvas_click = function (e) + { + e = RGraph.FixEventObject(e); + + var canvas = document.getElementById(this.id) + var obj = canvas.__object__; + + /** + * Redraw the graph first, in effect resetting the graph to as it was when it was first drawn + * This "deselects" any already selected bar + */ + RGraph.Clear(canvas); + obj.Draw(); + + /** + * Get the mouse X/Y coordinates + */ + var mouseCoords = RGraph.getMouseXY(e); + var bar = obj.getBar(e); + + /** + * This bit shows the tooltip (if required) + */ + if (bar) { + + var mouseX = mouseCoords[0]; // In relation to the canvas + var mouseY = mouseCoords[1]; // In relation to the canvas + var left = bar[0]; + var top = bar[1]; + var width = bar[2]; + var height = bar[3]; + var index = bar[4]; + + /** + * Show a tooltip if it's defined + */ + if (obj.Get('chart.tooltips')) { + + /** + * Get the tooltip text + */ + if (typeof(obj.Get('chart.tooltips')) == 'function') { + var text = obj.Get('chart.tooltips')(index); + + } else if (typeof(obj.Get('chart.tooltips')) == 'object' && typeof(obj.Get('chart.tooltips')[index]) == 'function') { + var text = obj.Get('chart.tooltips')[index](index); + + } else if (typeof(obj.Get('chart.tooltips')) == 'object') { + var text = obj.Get('chart.tooltips')[index]; + + } else { + var text = ''; + } + + // Only now show a tooltip if one has been set + if (text) { + obj.context.beginPath(); + obj.context.strokeStyle = obj.Get('chart.highlight.stroke'); + obj.context.fillStyle = obj.Get('chart.highlight.fill'); + obj.context.strokeRect(left, top, width, height); + obj.context.fillRect(left, top, width, height); + obj.context.stroke(); + obj.context.fill(); + + RGraph.Tooltip(canvas, text, e.pageX, e.pageY, index); + } + } + } + + /** + * Stop the event bubbling + */ + e.stopPropagation(); + + return false; + } + this.canvas.addEventListener('click', eventHandler_canvas_click, false); + RGraph.AddEventListener(this.id, 'click', eventHandler_canvas_click); + + // This resets the bipolar graph + if (RGraph.Registry.Get('chart.tooltip')) { + RGraph.Registry.Get('chart.tooltip').style.display = 'none'; + RGraph.Registry.Set('chart.tooltip', null) + } + } + + /** + * If the canvas is annotatable, do install the event handlers + */ + if (this.Get('chart.annotatable')) { + RGraph.Annotate(this); + } + + /** + * This bit shows the mini zoom window if requested + */ + if (this.Get('chart.zoom.mode') == 'thumbnail' || this.Get('chart.zoom.mode') == 'area') { + RGraph.ShowZoomWindow(this); + } + + + /** + * This function enables resizing + */ + if (this.Get('chart.resizable')) { + RGraph.AllowResizing(this); + } + + /** + * Add the common .getShape() method + */ + this.getShape = this.getBar; + + /** + * Fire the RGraph ondraw event + */ + RGraph.FireCustomEvent(this, 'ondraw'); + } + + + /** + * Draws the axes + */ + RGraph.Bipolar.prototype.DrawAxes = function () + { + // Draw the left set of axes + this.context.beginPath(); + this.context.strokeStyle = this.Get('chart.axis.color'); + + this.axisWidth = (RGraph.GetWidth(this) - this.Get('chart.gutter.center') - this.gutterLeft - this.gutterRight) / 2; + this.axisHeight = RGraph.GetHeight(this) - this.gutterTop - this.gutterBottom; + + this.context.moveTo(this.gutterLeft, RGraph.GetHeight(this) - this.gutterBottom); + this.context.lineTo(this.gutterLeft + this.axisWidth, RGraph.GetHeight(this) - this.gutterBottom); + this.context.lineTo(this.gutterLeft + this.axisWidth, this.gutterTop); + + this.context.stroke(); + + // Draw the right set of axes + this.context.beginPath(); + + var x = this.gutterLeft + this.axisWidth + this.Get('chart.gutter.center'); + + this.context.moveTo(x, this.gutterTop); + this.context.lineTo(x, RGraph.GetHeight(this) - this.gutterBottom); + this.context.lineTo(RGraph.GetWidth(this) - this.gutterRight, RGraph.GetHeight(this) - this.gutterBottom); + + this.context.stroke(); + } + + + /** + * Draws the tick marks on the axes + */ + RGraph.Bipolar.prototype.DrawTicks = function () + { + var numDataPoints = this.left.length; + var barHeight = ( (RGraph.GetHeight(this) - this.gutterTop - this.gutterBottom)- (this.left.length * (this.Get('chart.margin') * 2) )) / numDataPoints; + + // Draw the left Y tick marks + for (var i = RGraph.GetHeight(this) - this.gutterBottom; i >= this.gutterTop; i -= (barHeight + ( this.Get('chart.margin') * 2)) ) { + if (i < (RGraph.GetHeight(this) - this.gutterBottom) ) { + this.context.beginPath(); + this.context.moveTo(this.gutterLeft + this.axisWidth, i); + this.context.lineTo(this.gutterLeft + this.axisWidth + 3, i); + this.context.stroke(); + } + } + + //Draw the right axis Y tick marks + for (var i = RGraph.GetHeight(this) - this.gutterBottom; i >= this.gutterTop; i -= (barHeight + ( this.Get('chart.margin') * 2)) ) { + if (i < (RGraph.GetHeight(this) - this.gutterBottom) ) { + this.context.beginPath(); + this.context.moveTo(this.gutterLeft + this.axisWidth + this.Get('chart.gutter.center'), i); + this.context.lineTo(this.gutterLeft + this.axisWidth + this.Get('chart.gutter.center') - 3, i); + this.context.stroke(); + } + } + + var xInterval = this.axisWidth / 10; + + // Is chart.xtickinterval specified ? If so, use that. + if (typeof(this.Get('chart.xtickinterval')) == 'number') { + xInterval = this.Get('chart.xtickinterval'); + } + + + // Draw the left sides X tick marks + for (i=this.gutterLeft; i<(this.gutterLeft + this.axisWidth); i+=xInterval) { + this.context.beginPath(); + this.context.moveTo(i, RGraph.GetHeight(this) - this.gutterBottom); + this.context.lineTo(i, (RGraph.GetHeight(this) - this.gutterBottom) + 4); + this.context.closePath(); + + this.context.stroke(); + } + + // Draw the right sides X tick marks + var stoppingPoint = RGraph.GetWidth(this) - this.gutterRight; + + for (i=(this.gutterLeft + this.axisWidth + this.Get('chart.gutter.center') + xInterval); i<=stoppingPoint; i+=xInterval) { + this.context.beginPath(); + this.context.moveTo(i, RGraph.GetHeight(this) - this.gutterBottom); + this.context.lineTo(i, (RGraph.GetHeight(this) - this.gutterBottom) + 4); + this.context.closePath(); + + this.context.stroke(); + } + + // Store this for later + this.barHeight = barHeight; + } + + + /** + * Figures out the maximum value, or if defined, uses xmax + */ + RGraph.Bipolar.prototype.GetMax = function() + { + var max = 0; + var dec = this.Get('chart.scale.decimals'); + + // chart.xmax defined + if (this.Get('chart.xmax')) { + + max = this.Get('chart.xmax'); + + this.scale = []; + this.scale[0] = Number((max / 5) * 1).toFixed(dec); + this.scale[1] = Number((max / 5) * 2).toFixed(dec); + this.scale[2] = Number((max / 5) * 3).toFixed(dec); + this.scale[3] = Number((max / 5) * 4).toFixed(dec); + this.scale[4] = Number(max).toFixed(dec); + + this.max = max; + + + // Generate the scale ourselves + } else { + this.leftmax = RGraph.array_max(this.left); + this.rightmax = RGraph.array_max(this.right); + max = Math.max(this.leftmax, this.rightmax); + + this.scale = RGraph.getScale(max, this); + this.scale[0] = Number(this.scale[0]).toFixed(dec); + this.scale[1] = Number(this.scale[1]).toFixed(dec); + this.scale[2] = Number(this.scale[2]).toFixed(dec); + this.scale[3] = Number(this.scale[3]).toFixed(dec); + this.scale[4] = Number(this.scale[4]).toFixed(dec); + + this.max = this.scale[4]; + } + + // Don't need to return it as it is stored in this.max + } + + + /** + * Function to draw the left hand bars + */ + RGraph.Bipolar.prototype.DrawLeftBars = function () + { + // Set the stroke colour + this.context.strokeStyle = this.Get('chart.strokestyle'); + + for (i=0; i<this.left.length; ++i) { + + /** + * Turn on a shadow if requested + */ + if (this.Get('chart.shadow')) { + this.context.shadowColor = this.Get('chart.shadow.color'); + this.context.shadowBlur = this.Get('chart.shadow.blur'); + this.context.shadowOffsetX = this.Get('chart.shadow.offsetx'); + this.context.shadowOffsetY = this.Get('chart.shadow.offsety'); + } + + this.context.beginPath(); + + // Set the colour + if (this.Get('chart.colors')[i]) { + this.context.fillStyle = this.Get('chart.colors')[i]; + } + + /** + * Work out the coordinates + */ + var width = ( (this.left[i] / this.max) * this.axisWidth); + var coords = [ + this.gutterLeft + this.axisWidth - width, + this.gutterTop + (i * ( this.axisHeight / this.left.length)) + this.Get('chart.margin'), + width, + this.barHeight + ]; + + // Draw the IE shadow if necessary + if (RGraph.isIE8() && this.Get('chart.shadow')) { + this.DrawIEShadow(coords); + } + + + this.context.strokeRect(coords[0], coords[1], coords[2], coords[3]); + this.context.fillRect(coords[0], coords[1], coords[2], coords[3]); + + this.context.stroke(); + this.context.fill(); + + /** + * Add the coordinates to the coords array + */ + this.coords.push([ + coords[0], + coords[1], + coords[2], + coords[3] + ]); + } + + /** + * Turn off any shadow + */ + RGraph.NoShadow(this); + } + + + /** + * Function to draw the right hand bars + */ + RGraph.Bipolar.prototype.DrawRightBars = function () + { + // Set the stroke colour + this.context.strokeStyle = this.Get('chart.strokestyle'); + + /** + * Turn on a shadow if requested + */ + if (this.Get('chart.shadow')) { + this.context.shadowColor = this.Get('chart.shadow.color'); + this.context.shadowBlur = this.Get('chart.shadow.blur'); + this.context.shadowOffsetX = this.Get('chart.shadow.offsetx'); + this.context.shadowOffsetY = this.Get('chart.shadow.offsety'); + } + + for (var i=0; i<this.right.length; ++i) { + this.context.beginPath(); + + // Set the colour + if (this.Get('chart.colors')[i]) { + this.context.fillStyle = this.Get('chart.colors')[i]; + } + + + var width = ( (this.right[i] / this.max) * this.axisWidth); + var coords = [ + this.gutterLeft + this.axisWidth + this.Get('chart.gutter.center'), + this.Get('chart.margin') + (i * (this.axisHeight / this.right.length)) + this.gutterTop, + width, + this.barHeight + ]; + + // Draw the IE shadow if necessary + if (RGraph.isIE8() && this.Get('chart.shadow')) { + this.DrawIEShadow(coords); + } + this.context.strokeRect(coords[0], coords[1], coords[2], coords[3]); + this.context.fillRect(coords[0], coords[1], coords[2], coords[3]); + + this.context.closePath(); + + /** + * Add the coordinates to the coords array + */ + this.coords.push([ + coords[0], + coords[1], + coords[2], + coords[3] + ]); + } + + this.context.stroke(); + + /** + * Turn off any shadow + */ + RGraph.NoShadow(this); + } + + + /** + * Draws the titles + */ + RGraph.Bipolar.prototype.DrawLabels = function () + { + this.context.fillStyle = this.Get('chart.text.color'); + + var labelPoints = new Array(); + var font = this.Get('chart.text.font'); + var size = this.Get('chart.text.size'); + + var max = Math.max(this.left.length, this.right.length); + + for (i=0; i<max; ++i) { + var barAreaHeight = RGraph.GetHeight(this) - this.gutterTop - this.gutterBottom; + var barHeight = barAreaHeight / this.left.length; + var yPos = (i * barAreaHeight) + this.gutterTop; + + labelPoints.push(this.gutterTop + (i * barHeight) + (barHeight / 2) + 5); + } + + for (i=0; i<labelPoints.length; ++i) { + RGraph.Text(this.context, + this.Get('chart.text.font'), + this.Get('chart.text.size'), + this.gutterLeft + this.axisWidth + (this.Get('chart.gutter.center') / 2), + labelPoints[i], + String(this.Get('chart.labels')[i] ? this.Get('chart.labels')[i] : ''), + null, + 'center'); + } + + // Now draw the X labels for the left hand side + RGraph.Text(this.context,font,size,this.gutterLeft,RGraph.GetHeight(this) - this.gutterBottom + 14,RGraph.number_format(this, this.scale[4], this.Get('chart.units.pre'), this.Get('chart.units.post')),null,'center'); + RGraph.Text(this.context, font, size, this.gutterLeft + ((RGraph.GetWidth(this) - this.Get('chart.gutter.center') - this.gutterLeft - this.gutterRight) / 2) * (1/5), RGraph.GetHeight(this) - this.gutterBottom + 14, RGraph.number_format(this, this.scale[3], this.Get('chart.units.pre'), this.Get('chart.units.post')), null, 'center'); + RGraph.Text(this.context, font, size, this.gutterLeft + ((RGraph.GetWidth(this) - this.Get('chart.gutter.center') - this.gutterLeft - this.gutterRight) / 2) * (2/5), RGraph.GetHeight(this) - this.gutterBottom + 14, RGraph.number_format(this, this.scale[2], this.Get('chart.units.pre'), this.Get('chart.units.post')), null, 'center'); + RGraph.Text(this.context, font, size, this.gutterLeft + ((RGraph.GetWidth(this) - this.Get('chart.gutter.center') - this.gutterLeft - this.gutterRight) / 2) * (3/5), RGraph.GetHeight(this) - this.gutterBottom + 14, RGraph.number_format(this, this.scale[1], this.Get('chart.units.pre'), this.Get('chart.units.post')), null, 'center'); + RGraph.Text(this.context, font, size, this.gutterLeft + ((RGraph.GetWidth(this) - this.Get('chart.gutter.center') - this.gutterLeft - this.gutterRight) / 2) * (4/5), RGraph.GetHeight(this) - this.gutterBottom + 14, RGraph.number_format(this, this.scale[0], this.Get('chart.units.pre'), this.Get('chart.units.post')), null, 'center'); + + // Now draw the X labels for the right hand side + RGraph.Text(this.context, font, size, RGraph.GetWidth(this) - this.gutterRight, RGraph.GetHeight(this) - this.gutterBottom + 14, RGraph.number_format(this, this.scale[4], this.Get('chart.units.pre'), this.Get('chart.units.post')), null, 'center'); + RGraph.Text(this.context, font, size, RGraph.GetWidth(this) - this.gutterRight - (this.axisWidth * 0.2), RGraph.GetHeight(this) - this.gutterBottom + 14,RGraph.number_format(this, this.scale[3], this.Get('chart.units.pre'), this.Get('chart.units.post')), null, 'center'); + RGraph.Text(this.context, font, size, RGraph.GetWidth(this) - this.gutterRight - (this.axisWidth * 0.4), RGraph.GetHeight(this) - this.gutterBottom + 14,RGraph.number_format(this, this.scale[2], this.Get('chart.units.pre'), this.Get('chart.units.post')), null, 'center'); + RGraph.Text(this.context, font, size, RGraph.GetWidth(this) - this.gutterRight - (this.axisWidth * 0.6), RGraph.GetHeight(this) - this.gutterBottom + 14,RGraph.number_format(this, this.scale[1], this.Get('chart.units.pre'), this.Get('chart.units.post')), null, 'center'); + RGraph.Text(this.context, font, size, RGraph.GetWidth(this) - this.gutterRight - (this.axisWidth * 0.8), RGraph.GetHeight(this) - this.gutterBottom + 14,RGraph.number_format(this, this.scale[0], this.Get('chart.units.pre'), this.Get('chart.units.post')), null, 'center'); + } + + /** + * Draws the titles + */ + RGraph.Bipolar.prototype.DrawTitles = function () + { + RGraph.Text(this.context, this.Get('chart.text.font'), this.Get('chart.text.size'), this.gutterLeft + 5, (this.gutterTop / 2) + 5, String(this.Get('chart.title.left')), 'center'); + RGraph.Text(this.context,this.Get('chart.text.font'), this.Get('chart.text.size'), RGraph.GetWidth(this) - this.gutterRight - 5, (this.gutterTop / 2) + 5, String(this.Get('chart.title.right')), 'center', 'right'); + + // Draw the main title for the whole chart + RGraph.DrawTitle(this.canvas, this.Get('chart.title'), this.gutterTop, null, this.Get('chart.title.size') ? this.Get('chart.title.size') : null); + } + + + /** + * This function is used by MSIE only to manually draw the shadow + * + * @param array coords The coords for the bar + */ + RGraph.Bipolar.prototype.DrawIEShadow = function (coords) + { + var prevFillStyle = this.context.fillStyle; + var offsetx = this.Get('chart.shadow.offsetx'); + var offsety = this.Get('chart.shadow.offsety'); + + this.context.lineWidth = this.Get('chart.linewidth'); + this.context.fillStyle = this.Get('chart.shadow.color'); + this.context.beginPath(); + + // Draw shadow here + this.context.fillRect(coords[0] + offsetx, coords[1] + offsety, coords[2],coords[3]); + + this.context.fill(); + + // Change the fillstyle back to what it was + this.context.fillStyle = prevFillStyle; + } + + + /** + * Returns the appropriate focussed bar coordinates + * + * @param e object The event object + */ + RGraph.Bipolar.prototype.getBar = function (e) + { + var obj = e.target.__object__; + var canvas = obj.canvas; + var context = obj.context; + var mouseCoords = RGraph.getMouseXY(e); + + /** + * Loop through the bars determining if the mouse is over a bar + */ + for (var i=0; i<obj.coords.length; i++) { + + var mouseX = mouseCoords[0]; + var mouseY = mouseCoords[1]; + var left = obj.coords[i][0]; + var top = obj.coords[i][1]; + var width = obj.coords[i][2]; + var height = obj.coords[i][3]; + + if (mouseX >= left && mouseX <= (left + width) && mouseY >= top && mouseY <= (top + height) ) { + return [left,top,width,height,i]; + } + } + + return null; + }
\ No newline at end of file diff --git a/schall/static/RGraph/libraries/RGraph.common.adjusting.js b/schall/static/RGraph/libraries/RGraph.common.adjusting.js new file mode 100644 index 0000000..6935b0e --- /dev/null +++ b/schall/static/RGraph/libraries/RGraph.common.adjusting.js @@ -0,0 +1,1167 @@ + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + + if (typeof(RGraph) == 'undefined') RGraph = {isRGraph:true,type:'common'}; + + RGraph.AllowAdjusting = function (obj) + { + var canvas = obj.canvas; + var context = obj.context; + + RGraph.Register(obj); + + if (obj.type == 'thermometer') { + var canvas_onmousedown = function (e) + { + e = RGraph.FixEventObject(e); + + var obj = e.target.__object__; + var id = obj.id; + var canvas = obj.canvas; + var context = obj.context; + var coords = obj.coords; + + var mouseCoords = RGraph.getMouseXY(e); + var mouseX = mouseCoords[0]; + var mouseY = mouseCoords[1]; + + if ( mouseX > obj.coords[0] + && mouseX < (obj.coords[0] + obj.coords[2]) + ) { + + RGraph.Registry.Set('chart.thermometer.' + id + '.resizing', true); + obj.canvas.style.cursor = 'ns-resize'; + + /** + * Fire the RGraph event + */ + RGraph.FireCustomEvent(e.target.__object__, 'onadjustbegin'); + + // Fire the onmousemove handler + canvas_onmousemove(e); + } + } + canvas.addEventListener('mousedown', canvas_onmousedown, false); + RGraph.AddEventListener(canvas.id, 'mousedown', canvas_onmousedown); + + + + var canvas_onmousemove = function (e) + { + e = RGraph.FixEventObject(e); + + var obj = e.target.__object__; + var id = obj.id; + var canvas = obj.canvas; + var context = obj.context; + var coords = obj.coords; + + var mouseCoords = RGraph.getMouseXY(e); + var mouseX = mouseCoords[0]; + var mouseY = mouseCoords[1]; + + if (RGraph.Registry.Get('chart.thermometer.' + id + '.resizing')) { + + var capRadius = (RGraph.GetWidth(obj) - obj.gutterLeft - obj.gutterRight) / 2; + var top = obj.gutterTop + capRadius; + var bottom = coords[1] + coords[3]; + var newvalue = obj.max - ((mouseY - top) / (bottom - obj.gutterTop - capRadius)) * (obj.max - obj.min); + + obj.value = Math.round(newvalue); + + /** + * Bounds checking + */ + if (obj.value > obj.max) { + obj.value = obj.max; + } else if (obj.value < obj.min) { + obj.value = obj.min; + } + + RGraph.Clear(canvas); + obj.Draw(); + + /** + * Fire the RGraph event + */ + RGraph.FireCustomEvent(e.target.__object__, 'onadjust'); + } + } + canvas.addEventListener('mousemove', canvas_onmousemove, false); + RGraph.AddEventListener(canvas.id, 'mousemove', canvas_onmousemove); + + + + var canvas_onmouseup = function (e) + { + e = RGraph.FixEventObject(e); + + var obj = e.target.__object__; + var id = obj.id; + var canvas = obj.canvas; + var context = obj.context; + var coords = obj.coords; + + var mouseCoords = RGraph.getMouseXY(e); + var mouseX = mouseCoords[0]; + var mouseY = mouseCoords[1]; + + RGraph.Registry.Set('chart.thermometer.' + id + '.resizing', false); + obj.canvas.style.cursor = 'default'; + + /** + * Fire the RGraph event + */ + RGraph.FireCustomEvent(e.target.__object__, 'onadjustend'); + } + canvas.addEventListener('mouseup', canvas_onmouseup, false); + RGraph.AddEventListener(canvas.id, 'mouseup', canvas_onmouseup); + + + + + + + + + + + + + + + + + + } else if (obj.type == 'line') { + var canvas_onmousedown = function (e) + { + e = RGraph.FixEventObject(e); + + var obj = e.target.__object__; + var id = obj.id; + var canvas = obj.canvas; + var context = obj.context; + var coords = obj.coords; + var mouseCoords = RGraph.getMouseXY(e); + + RGraph.Redraw(); + + for (var i=0; i<coords.length; ++i) { + + if ( mouseCoords[0] > coords[i][0] - 5 + && mouseCoords[1] > coords[i][1] - 5 + && mouseCoords[0] < coords[i][0] + 5 + && mouseCoords[1] < coords[i][1] + 5 + ) { + + var numDataSeries = obj.original_data.length; + var numDataPoints = obj.original_data[0].length; + var data_series = i / numDataPoints; + data_series = Math.floor(data_series); + + + + canvas.style.cursor = 'ns-resize'; + RGraph.FireCustomEvent(obj, 'onadjustbegin'); + RGraph.Registry.Set('chart.adjusting.line.' + id, [obj, i, [coords[i][0], coords[i][1]], data_series]); + + return; + } + } + } + canvas.addEventListener('mousedown', canvas_onmousedown, false); + RGraph.AddEventListener(canvas.id, 'mousedown', canvas_onmousedown); + + + var canvas_onmousemove = function (e) + { + e = RGraph.FixEventObject(e); + var id = e.target.__object__.id; + + var state = RGraph.Registry.Get('chart.adjusting.line.' + id); + + if (state) { + var obj = state[0]; + var idx = state[1]; + var canvas = obj.canvas; + var context = obj.context; + var data_series = state[3]; + var points = obj.original_data[data_series]; + var mouseCoords = RGraph.getMouseXY(e); + var x = mouseCoords[0]; + var y = mouseCoords[1]; + var h = RGraph.GetHeight(obj); + + + // Don't allow adjusting to the gutter if out-of-bounds is NOT specified + if (!obj.Get('chart.outofbounds')) { + if (y >= (h - obj.gutterBottom)) { + y = h - obj.gutterBottom; + } else if (y <= obj.gutterTop) { + y = obj.gutterTop; + } + } + + // This accounts for a center X axis + if (obj.Get('chart.xaxispos') == 'center') { + y *= 2; + y -= (obj.gutterTop / 2); + } else if (obj.Get('chart.xaxispos') == 'top') { + y = RGraph.GetHeight(obj) - y; + } + + var pos = h - obj.gutterTop - obj.gutterBottom; + pos = pos - (y - obj.gutterTop); + var value = (obj.max / (h - obj.gutterTop - obj.gutterBottom)) * pos; + + if (obj.Get('chart.ylabels.invert')) { + value = obj.max - value; + } + + + + // Adjust the index so that it's applicable to the correct data series + for (var i=0; i<data_series; ++i) { + idx -= obj.original_data[0].length; + } + + obj.original_data[data_series][idx] = value; + + obj.Set('chart.ymax', obj.max); + canvas.style.cursor = 'ns-resize'; + RGraph.Redraw(); + + /** + * Fire the onadjust event + */ + RGraph.FireCustomEvent(obj, 'onadjust'); + + return; + + } else { + + var canvas = e.target; + var context = canvas.__object__.context; + var obj = canvas.__object__; + var mouseCoords = RGraph.getMouseXY(e); + var x = mouseCoords[0]; + var y = mouseCoords[1]; + + for (var i=0; i<obj.coords.length; ++i) { + + if ( x > obj.coords[i][0] - 5 + && y > obj.coords[i][1] - 5 + && x < obj.coords[i][0] + 5 + && y < obj.coords[i][1] + 5 + ) { + + canvas.style.cursor = 'ns-resize'; + return; + } + } + } + + e.target.style.cursor = null; + } + canvas.addEventListener('mousemove', canvas_onmousemove, false); + RGraph.AddEventListener(canvas.id, 'mousemove', canvas_onmousemove); + + + var canvas_onmouseup = function (e) + { + var id = e.target.__object__.id; + + if (RGraph.Registry.Get('chart.adjusting.line.' + id)) { + RGraph.FireCustomEvent(e.target.__object__, 'onadjustend'); + } + + RGraph.Registry.Set('chart.adjusting.line.' + id, null); + e.target.style.cursor = null; + } + canvas.addEventListener('mouseup', canvas_onmouseup, false); + RGraph.AddEventListener(canvas.id, 'mouseup', canvas_onmouseup); + + + var canvas_onmouseout = function (e) + { + canvas_onmouseup(e); + } + canvas.addEventListener('mouseout', canvas_onmouseout, false); + RGraph.AddEventListener(canvas.id, 'mouseout', canvas_onmouseout); + + /** + * HProgress bar + */ + } else if (obj.type == 'hprogress') { + + + var canvas_onmousedown = function (e) + { + var id = e.target.__object__.id; + + RGraph.Registry.Set('chart.adjusting.hprogress.' + id, [true]); + + RGraph.FireCustomEvent(e.target.__object__, 'onadjustbegin'); + + canvas_onmousemove(e); + } + canvas.addEventListener('mousedown', canvas_onmousedown, false); + RGraph.AddEventListener(canvas.id, 'mousedown', canvas_onmousedown); + + + var canvas_onmousemove = function (e) + { + var id = e.target.__object__.id; + var state = RGraph.Registry.Get('chart.adjusting.hprogress.' + id); + + if (state && state.length) { + var obj = e.target.__object__; + var canvas = obj.canvas; + var context = obj.context; + + if (obj.type == 'hprogress') { + + var coords = RGraph.getMouseXY(e); + coords[0] = Math.max(0, coords[0] - obj.gutterLeft); + var barWidth = canvas.width - obj.gutterLeft - obj.gutterRight; + + // Work out the new value + var value = (coords[0] / barWidth) * (obj.max - obj.Get('chart.min')); + value += obj.Get('chart.min'); + + obj.value = Math.max(0, value.toFixed()); + RGraph.Clear(obj.canvas); + obj.Draw(); + +/* + } else if (obj.type == 'vprogress') { + + var coords = RGraph.getMouseXY(e); + coords[1] = Math.max(0, coords[1] - obj.Get('chart.gutter')); + var barHeight = canvas.height - (2 * obj.Get('chart.gutter')); + + // Work out the new value + var value = ( (barHeight - coords[1]) / barHeight) * obj.max; + + obj.value = Math.max(0, value.toFixed()); + RGraph.Clear(obj.canvas); + obj.Draw(); +*/ + } + + /** + * Fire the onadjust event + */ + RGraph.FireCustomEvent(obj, 'onadjust'); + } + } + canvas.addEventListener('mousemove', canvas_onmousemove, false); + RGraph.AddEventListener(canvas.id, 'mousemove', canvas_onmousemove); + + + var canvas_onmouseup = function (e) + { + var id = e.target.__object__.id; + + if (RGraph.Registry.Get('chart.adjusting.hprogress.' + id)) { + RGraph.FireCustomEvent(e.target.__object__, 'onadjustend'); + } + + RGraph.Registry.Set('chart.adjusting.hprogress.' + id, null); + } + canvas.addEventListener('mouseup', canvas_onmouseup, false); + RGraph.AddEventListener(canvas.id, 'mouseup', canvas_onmouseup); + + + var canvas_onmouseout = function (e) + { + canvas_onmouseup(e); + } + canvas.addEventListener('mouseout', canvas_onmouseout, false); + RGraph.AddEventListener(canvas.id, 'mouseout', canvas_onmouseout); + + /** + * VProgress bar + */ + } else if (obj.type == 'vprogress') { + + + var canvas_onmousedown = function (e) + { + var id = e.target.__object__.id; + + RGraph.Registry.Set('chart.adjusting.vprogress.' + id, [true]); + + RGraph.FireCustomEvent(e.target.__object__, 'onadjustbegin'); + + canvas_onmousemove(e); + } + canvas.addEventListener('mousedown', canvas_onmousedown, false); + RGraph.AddEventListener(canvas.id, 'mousedown', canvas_onmousedown); + + + var canvas_onmousemove = function (e) + { + var id = e.target.__object__.id; + var state = RGraph.Registry.Get('chart.adjusting.vprogress.' + id); + + if (state && state.length) { + + var obj = e.target.__object__; + var canvas = obj.canvas; + var context = obj.context; + + if (obj.type == 'hprogress') { + + var coords = RGraph.getMouseXY(e); + coords[0] = Math.max(0, coords[0] - obj.gutterLeft); + var barWidth = canvas.width - obj.gutterLeft - obj.gutterRight; + + // Work out the new value + var value = (coords[0] / barWidth) * (obj.max - obj.Get('chart.min')); + value += obj.Get('chart.min'); + + obj.value = Math.max(0, value.toFixed(obj.Get('chart.scale.decimals'))); + + RGraph.Clear(obj.canvas); + obj.Draw(); + + } else if (obj.type == 'vprogress') { + + var coords = RGraph.getMouseXY(e); + coords[1] = Math.max(0, coords[1] - obj.gutterTop); + var barHeight = canvas.height - obj.gutterTop - obj.gutterBottom; + + // Work out the new value + var value = ( (barHeight - coords[1]) / barHeight) * obj.max; + + obj.value = Math.max(0, value.toFixed(obj.Get('chart.scale.decimals'))); + + RGraph.Clear(obj.canvas); + obj.Draw(); + } + + /** + * Fire the onadjust event + */ + RGraph.FireCustomEvent(obj, 'onadjust'); + } + } + canvas.addEventListener('mousemove', canvas_onmousemove, false); + RGraph.AddEventListener(canvas.id, 'mousemove', canvas_onmousemove); + + + var canvas_onmouseup = function (e) + { + var id = e.target.__object__.id; + + if (RGraph.Registry.Get('chart.adjusting.vprogress.' + id)) { + RGraph.FireCustomEvent(e.target.__object__, 'onadjustend'); + } + + RGraph.Registry.Set('chart.adjusting.vprogress.' + id, null); + } + canvas.addEventListener('mouseup', canvas_onmouseup, false); + RGraph.AddEventListener(canvas.id, 'mouseup', canvas_onmouseup); + + + var canvas_onmouseout = function (e) + { + canvas_onmouseup(e); + } + canvas.addEventListener('mouseout', canvas_onmouseout, false); + RGraph.AddEventListener(canvas.id, 'mouseout', canvas_onmouseout); + + /** + * Rose chart + */ + } else if (obj.type == 'rose') { + + + obj.Set('chart.ymax', obj.max); + + + var canvas_onmousemove = function (e) + { + var obj = e.target.__object__; + var id = obj.id; + var canvas = obj.canvas; + var context = obj.context; + var coords = RGraph.getMouseXY(e); + var segment = RGraph.Registry.Get('chart.adjusting.rose.' + id); + var x = Math.abs(coords[0] - obj.centerx); + var y = Math.abs(coords[1] - obj.centery); + var theta = Math.atan(y / x) * (180 / Math.PI); // theta is now in DEGREES + + + // Account for the correct quadrant + if (coords[0] >= obj.centerx && coords[1] < obj.centery) { + theta = 90 - theta; + } else if (coords[0] >= obj.centerx && coords[1] >= obj.centery) { + theta += 90; + } else if (coords[0] < obj.centerx && coords[1] >= obj.centery) { + theta = 90 - theta; + theta = 180 + theta; + + } else if (coords[0] < obj.centerx && coords[1] < obj.centery) { + theta = theta + 270; + } + + var Opp = y; + var Adj = x; + var Hyp = Math.abs(Adj / Math.sin(theta / (180 / Math.PI))); + + for (var i=0; i<obj.angles.length; ++i) { + if ( + theta > obj.angles[i][0] + && theta < obj.angles[i][1]) { + + if (RGraph.Registry.Get('chart.adjusting.rose.' + id) && i == segment[6]) { + var newvalue = (Hyp / (obj.radius - 25) ) * obj.max; + obj.data[i] = Math.min(newvalue, obj.max); + + RGraph.Clear(obj.canvas); + obj.Draw(); + + /** + * Fire the onadjust event + */ + RGraph.FireCustomEvent(obj, 'onadjust'); + } + + if (Hyp <= (obj.angles[i][2] + 5) && Hyp >= (obj.angles[i][2] - 5) ) { + canvas.style.cursor = 'move'; + return false; + + } else if (obj.Get('chart.tooltips') && Hyp <= (obj.angles[i][2] - 5) ) { + canvas.style.cursor = 'pointer'; + return false; + } + + } + } + + canvas.style.cursor = 'default'; + + return; + } + canvas.addEventListener('mousemove', canvas_onmousemove, false); + RGraph.AddEventListener(canvas.id, 'mousemove', canvas_onmousemove); + + + var canvas_onmousedown = function (e) + { + var obj = e.target.__object__; + var id = obj.id; + var canvas = obj.canvas; + var context = obj.context; + var coords = RGraph.getMouseXY(e); + var segment = obj.getSegment(e, 5); + + if (segment && segment.length && !RGraph.Registry.Get('chart.adjusting.rose.' + id)) { + var x = Math.abs(coords[0] - obj.centerx); + var y = Math.abs(coords[1] - obj.centery); + var a = Math.atan(y / x) * (180 / Math.PI); // a is now in DEGREES + + // Account for the correct quadrant + if (coords[0] >= obj.centerx && coords[1] < obj.centery) { + a = 90 - a; + a += 270; + } else if (coords[0] >= obj.centerx && coords[1] >= obj.centery) { + // Nada + } else if (coords[0] < obj.centerx && coords[1] >= obj.centery) { + a = 90 - a; + a += 90; + } else if (coords[0] < obj.centerx && coords[1] < obj.centery) { + a += 180; + } + + var hyp = Math.abs(y / Math.sin(a / 57.3)); + + if (hyp >= (segment[2] - 10) ) { + + /** + * Hide any currently shown tooltip + */ + if (RGraph.Registry.Get('chart.tooltip')) { + RGraph.Registry.Get('chart.tooltip').style.display = 'none'; + RGraph.Registry.Set('chart.tooltip', null); + } + + RGraph.Registry.Set('chart.adjusting.rose.' + id, segment); + + RGraph.FireCustomEvent(e.target.__object__, 'onadjustbegin'); + + e.stopPropagation(); + } + } + } + canvas.addEventListener('mousedown', canvas_onmousedown, false); + RGraph.AddEventListener(canvas.id, 'mousedown', canvas_onmousedown); + + + var canvas_onmouseup = function (e) + { + var obj = e.target.__object__; + var id = obj.id; + + if (RGraph.Registry.Get('chart.adjusting.rose.' + id)) { + + + RGraph.FireCustomEvent(e.target.__object__, 'onadjustend'); + RGraph.Registry.Set('chart.adjusting.rose.' + id, null); + e.stopPropagation(); + + return false; + } + } + canvas.addEventListener('mouseup', canvas_onmouseup, false); + RGraph.AddEventListener(canvas.id, 'mouseup', canvas_onmouseup); + + + var canvas_onmouseout = function (e) + { + canvas_onmouseup(e); + } + canvas.addEventListener('mouseout', canvas_onmouseout, false); + RGraph.AddEventListener(canvas.id, 'mouseout', canvas_onmouseout); + + + + + + + + + + + + + + + + + + + + /** + * Bar chart + */ + } else if (obj.type == 'bar') { + + // Stacked bar charts not supported + if (obj.Get('chart.grouping') == 'stacked') { + alert('[BAR] Adjusting stacked bar charts is not supported'); + return; + } + + + var canvas = obj.canvas; + var context = obj.context; + + + var canvas_onmousemove = function (e) + { + var obj = e.target.__object__; + var id = obj.id; + var canvas = obj.canvas; + var context = obj.context; + var mouse = RGraph.getMouseXY(e); + var mousex = mouse[0]; + var mousey = mouse[1]; // mousey, mousey... + + + // Loop through the coords to see if the mouse position is at the top of a bar + for (var i=0; i<obj.coords.length; ++i) { + + var barX = obj.coords[i][0]; + var barY = obj.coords[i][1]; + var barW = obj.coords[i][2]; + var barH = obj.coords[i][3]; + + if (mousex > barX && mousex < (barX + barW)) { + + /** + * Change the mouse pointer + */ + //if ( (obj.Get('chart.xaxispos') == 'bottom' && (mousey > (barY - 5) && mousey < (barY + 5))) + // || (((obj.Get('chart.xaxispos') == 'center' || obj.Get('chart.xaxispos') == 'top') && mousey > (barY + barH - 5) && mousey < (barY + barH + 5))) + // || ((obj.Get('chart.xaxispos') == 'center' && barX < (obj.canvas.height / 2) && mousey < (barY + 5) && mousey > barY)) + // ) { + // canvas.style.cursor = 'ns-resize'; + + //} else { + // canvas.style.cursor = 'default'; + //} + + + + var idx = RGraph.Registry.Get('chart.adjusting.bar.' + id) + + if (typeof(idx) == 'number') { + + // This accounts for a center X axis + if (obj.Get('chart.xaxispos') == 'center') { + obj.grapharea /= 2; + } + + var newheight = obj.grapharea - (mousey - obj.gutterTop); + var newvalue = (newheight / obj.grapharea) * obj.max; + + // Account for X axis at the top + if (obj.Get('chart.xaxispos') == 'top') { + newvalue = obj.max - newvalue; + } + + // Top and bottom boundaries + if (newvalue > obj.max) newvalue = obj.max; + + if (obj.Get('chart.xaxispos') == 'center') { + if (newvalue < (-1 * obj.max)) newvalue = (-1 * obj.max); + + } else { + if (newvalue < 0) newvalue = 0; + } + + ///////////////// This was fun to work out... ///////////////// + + var j, index; + + for (var j=0, index=0; j<obj.data.length; ++j,++index) { + + if (typeof(obj.data[j]) == 'object') { + + for (var k=0; k<obj.data[j].length && index <= idx; ++k, ++index) { + if (index == idx) { + + + if (obj.Get('chart.xaxispos') == 'top') { + newvalue *= -1; + } + + obj.data[j][k] = newvalue; + var b = true; + break; + } + } + + --index; + } else if (typeof(obj.data[j]) == 'number') { + + if (index == idx) { + + if (obj.Get('chart.xaxispos') == 'top') { + newvalue *= -1; + } + + obj.data[j] = newvalue; + + // No need to set b + break; + } + } + + if (b) { + break; + } + } + /////////////////////////////////////////////////////////////// + + RGraph.Clear(canvas); + obj.Draw(); + + /** + * Fire the onadjust event + */ + RGraph.FireCustomEvent(obj, 'onadjust'); + } + + return; + } + } + + canvas.style.cursor = 'default'; + } + canvas.addEventListener('mousemove', canvas_onmousemove, false); + RGraph.AddEventListener(canvas.id, 'mousemove', canvas_onmousemove); + + + + var canvas_onmousedown = function (e) + { + var obj = e.target.__object__; + var id = obj.id; + var canvas = obj.canvas; + var context = obj.context; + var mouse = RGraph.getMouseXY(e); + var mousex = mouse[0]; + var mousey = mouse[1]; + + // Loop through the coords to see if the mouse position is at the top of a bar + for (var i=0; i<obj.coords.length; ++i) { + if (mousex > obj.coords[i][0] && mousex < (obj.coords[i][0] + obj.coords[i][2])) { + + RGraph.FireCustomEvent(obj, 'onadjustbegin'); + + obj.Set('chart.ymax', obj.max); + RGraph.Registry.Set('chart.adjusting.bar.' + id, i); + + canvas_onmousemove(e); + } + } + } + canvas.addEventListener('mousedown', canvas_onmousedown, false); + RGraph.AddEventListener(canvas.id, 'mousedown', canvas_onmousedown); + + + + var canvas_onmouseup = function (e) + { + var id = e.target.__object__.id; + + if (typeof(RGraph.Registry.Get('chart.adjusting.bar.' + id)) == 'number') { + RGraph.FireCustomEvent(e.target.__object__, 'onadjustend'); + } + + RGraph.Registry.Set('chart.adjusting.bar.' + id, null); + } + canvas.addEventListener('mouseup', canvas_onmouseup, false); + RGraph.AddEventListener(canvas.id, 'mouseup', canvas_onmouseup); + + + var canvas_onmouseout = function (e) + { + canvas_onmouseup(e); + } + canvas.addEventListener('mouseout', canvas_onmouseout, false); + RGraph.AddEventListener(canvas.id, 'mouseout', canvas_onmouseout); + + + + + + + + + + + + + + + /** + * The Radar chart + */ + } else if (obj.type == 'radar') { + + + var canvas = obj.canvas; + var context = obj.context; + + + var canvas_onmousemove = function (e) + { + var id = e.target.id; + var obj = e.target.__object__; + var canvas = obj.canvas; + var context = obj.context; + var mouseDown = RGraph.Registry.Get('chart.adjusting.radar.' + id); + var mouseCoords = RGraph.getMouseXY(e); + + if (mouseDown) { + + canvas.style.cursor = 'move'; + + var dataset = mouseDown[0]; + var index = mouseDown[1]; + var dx = mouseCoords[0] - obj.centerx; + var dy = mouseCoords[1] - obj.centery; + var hyp = Math.sqrt((dx * dx) + (dy * dy)); + var newvalue = (hyp / (obj.size / 2)) * obj.max; + + newvalue = Math.min(obj.max, newvalue); + newvalue = Math.max(0, newvalue); + + obj.data[mouseDown[0]][mouseDown[1]] = newvalue; + RGraph.Clear(canvas); + obj.Draw(); + + /** + * Fire the onadjust event + */ + RGraph.FireCustomEvent(obj, 'onadjust'); + + } else { + + // Determine if the mouse is near a point, and if so, change the pointer + for (var ds = 0; ds<obj.coords.length; ds++) { + for (var i=0; i<obj.coords[ds].length; ++i) { + + var dx = Math.abs(mouseCoords[0] - obj.coords[ds][i][0]); + var dy = Math.abs(mouseCoords[1] - obj.coords[ds][i][1]); + var a = Math.atan(dy / dx); + + + var hyp = Math.sqrt((dx * dx) + (dy * dy)); + + if (hyp <= 5) { + canvas.style.cursor = 'move'; + return; + } + } + } + + canvas.style.cursor = 'default'; + } + } + canvas.addEventListener('mousemove', canvas_onmousemove, false); + RGraph.AddEventListener(canvas.id, 'mousemove', canvas_onmousemove); + + + var canvas_onmousedown = function (e) + { + e = RGraph.FixEventObject(e); + + var obj = e.target.__object__; + var id = obj.id; + var canvas = obj.canvas; + var context = obj.context; + var mouseCoords = RGraph.getMouseXY(e); + + + // Determine if the mouse is near a point + for (var j=0; j<obj.coords.length; ++j) { + for (var i=0; i<obj.coords[j].length; ++i) { + + var dx = Math.abs(mouseCoords[0] - obj.coords[j][i][0]); + var dy = Math.abs(mouseCoords[1] - obj.coords[j][i][1]); + var a = Math.atan(dy / dx); + + + var hyp = Math.sqrt((dx * dx) + (dy * dy)); + + if (hyp <= 5) { + canvas.style.cursor = 'pointer'; + RGraph.FireCustomEvent(obj, 'onadjustbegin'); + + RGraph.Registry.Set('chart.adjusting.radar.' + id, [j, i, obj.coords[j][i][0] > obj.centerx, obj.coords[j][i][1] > obj.centery]); + return; + } + } + } + + canvas.style.cursor = 'default'; + } + canvas.addEventListener('mousedown', canvas_onmousedown, false); + RGraph.AddEventListener(canvas.id, 'mousedown', canvas_onmousedown); + + + var canvas_onmouseup = function (e) + { + var id = e.target.id; + + if (RGraph.Registry.Get('chart.adjusting.radar.' + id)) { + RGraph.FireCustomEvent(e.target.__object__, 'onadjustend'); + } + + RGraph.Registry.Set('chart.adjusting.radar.' + id, null); + canvas.style.cursor = 'default'; + } + canvas.addEventListener('mouseup', canvas_onmouseup, false); + RGraph.AddEventListener(canvas.id, 'mouseup', canvas_onmouseup); + + + var canvas_onmouseout = function (e) + { + canvas_onmouseup(e); + } + canvas.addEventListener('mouseout', canvas_onmouseout, false); + RGraph.AddEventListener(canvas.id, 'mouseout', canvas_onmouseout); + + /** + * Gantt chart + */ + } else if (obj.type == 'gantt') { + + + /** + * The onmousedown event handler + */ + var canvas_onmousedown = function (e) + { + var canvas = e.target; + var id = canvas.id; + var obj = canvas.__object__; + var mouseCoords = RGraph.getMouseXY(e); + var mouseX = mouseCoords[0]; + var mouseY = mouseCoords[1]; + + for (var i=0; i<obj.coords.length; ++i) { + + var coordX = obj.coords[i][0]; + var coordY = obj.coords[i][1]; + var coordW = obj.coords[i][2]; + var coordH = obj.coords[i][3]; + + if (mouseX > coordX + && mouseX < (coordX + coordW) + && mouseY > coordY + && mouseY < (coordY + coordH) + ) { + + var mode = (mouseX >= (coordX + coordW - 5) ? 'resize' : 'move'); + + RGraph.Registry.Set('chart.adjusting.gantt', {'index': i,'object': obj,'mousex': mouseX,'mousey': mouseY,'event_start': obj.Get('chart.events')[i][0],'event_duration': obj.Get('chart.events')[i][1],'mode': mode}); + + RGraph.FireCustomEvent(obj, 'onadjustbegin'); + return; + } + } + } + canvas.addEventListener('mousedown', canvas_onmousedown, false); + RGraph.AddEventListener(canvas.id, 'mousedown', canvas_onmousedown); + + + /** + * Change the pointer + */ + var canvas_onmousemove = function (e) + { + var canvas = e.target; + var id = canvas.id; + var obj = canvas.__object__; + var mouseCoords = RGraph.getMouseXY(e); + var mouseX = mouseCoords[0]; + var mouseY = mouseCoords[1]; + + for (var i=0; i<obj.coords.length; ++i) { + + var coordX = obj.coords[i][0]; + var coordY = obj.coords[i][1]; + var coordW = obj.coords[i][2]; + var coordH = obj.coords[i][3]; + + if (mouseX > coordX + && mouseX < (coordX + coordW) + && mouseY > coordY + && mouseY < (coordY + coordH) + ) { + + canvas.style.cursor = 'ew-resize'; + return; + } + } + + canvas.style.cursor = 'default'; + } + canvas.addEventListener('mousemove', canvas_onmousemove, false); + RGraph.AddEventListener(canvas.id, 'mousemove', canvas_onmousemove); + + + + + + + + + var window_onmousemove = function (e) + { + var conf = RGraph.Registry.Get('chart.adjusting.gantt'); + + if (conf) { + + var obj = conf['object']; + var id = obj.id; + var index = conf['index']; + var startX = conf['mousex']; + var startY = conf['mousey']; + var eventStart = conf['event_start']; + var duration = conf['event_duration']; + var mode = conf['mode']; + var mouseCoords = RGraph.getMouseXY(e); + var mouseX = mouseCoords[0]; + var mouseY = mouseCoords[1]; + + RGraph.FireCustomEvent(obj, 'onadjust'); + + if (mode == 'resize') { + + /** + * Account for the right hand gutter. Appears to be a FF bug + */ + if (mouseX > (RGraph.GetWidth(obj) - obj.gutterRight)) { + mouseX = RGraph.GetWidth(obj) - obj.gutterRight; + } + + + var diff = ((mouseX - startX) / (RGraph.GetWidth(obj) - obj.gutterLeft - obj.gutterRight)) * obj.Get('chart.xmax'); + diff = Math.round(diff); + + obj.Get('chart.events')[index][1] = duration + diff; + + if (obj.Get('chart.events')[index][1] < 0) { + obj.Get('chart.events')[index][1] = 1; + } + + } else { + + var diff = ((mouseX - startX) / (RGraph.GetWidth(obj) - obj.gutterLeft - obj.gutterRight)) * obj.Get('chart.xmax'); + diff = Math.round(diff); + + if ( eventStart + diff > 0 + && (eventStart + diff + obj.Get('chart.events')[index][1]) < obj.Get('chart.xmax')) { + + obj.Get('chart.events')[index][0] = eventStart + diff; + + } else if (eventStart + diff < 0) { + obj.Get('chart.events')[index][0] = 0; + + } else if ((eventStart + diff + obj.Get('chart.events')[index][1]) > obj.Get('chart.xmax')) { + obj.Get('chart.events')[index][0] = obj.Get('chart.xmax') - obj.Get('chart.events')[index][1]; + } + } + + RGraph.Redraw(); + RGraph.FireCustomEvent(obj, 'onadjust'); + } + } + window.addEventListener('mousemove', window_onmousemove, false); + RGraph.AddEventListener('window_' + canvas.id, 'mousemove', window_onmousemove); + + + + + + + + + + + var window_onmouseup = function (e) + { + if (RGraph.Registry.Get('chart.adjusting.gantt')) { + + var conf = RGraph.Registry.Get('chart.adjusting.gantt'); + var obj = conf['object']; + var id = obj.id; + + RGraph.FireCustomEvent(obj, 'onadjustend'); + RGraph.Registry.Set('chart.adjusting.gantt', null); + } + } + window.addEventListener('mouseup', window_onmouseup, false); + RGraph.AddEventListener('window_' + canvas.id, 'mouseup', window_onmouseup); + } + }
\ No newline at end of file diff --git a/schall/static/RGraph/libraries/RGraph.common.annotate.js b/schall/static/RGraph/libraries/RGraph.common.annotate.js new file mode 100644 index 0000000..450cf06 --- /dev/null +++ b/schall/static/RGraph/libraries/RGraph.common.annotate.js @@ -0,0 +1,340 @@ + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + + if (typeof(RGraph) == 'undefined') RGraph = {isRGraph:true,type:'common'}; + + + /** + * The function which controls the annotate feature + * + * @param object obj The graph object + */ + RGraph.Annotate = function (obj) + { + /** + * This installs some event handlers + */ + if (obj.Get('chart.annotatable')) { + + var canvas = obj.canvas; + var context = obj.context; + + /** + * Capture the mouse events so we can set whther the mouse is down or not + */ + var canvas_onmousedown = function (e) + { + if (e.button == 0) { + + e.target.__object__.Set('chart.mousedown', true); + + // Get the context + var obj = e.target.__object__; + var context = obj.context; + + // Don't want any "joining" lines or colour "bleeding" + context.beginPath(); + + // Accommodate Chrome + var coords = RGraph.getMouseXY(e); + var x = coords[0]; + var y = coords[1]; + + // Clear the annotation recording + RGraph.Registry.Set('annotate.actions', [obj.Get('chart.annotate.color')]); + + context.strokeStyle = obj.Get('chart.annotate.color'); + + context.moveTo(x, y); + + // Set the lineWidth + context.lineWidth = 1; + + RGraph.Registry.Set('started.annotating', false); + RGraph.Registry.Set('chart.annotating', obj); + + /** + * Fire the onannotatebegin event. It also fires an event called ononnotatestart for BC purposes + */ + RGraph.FireCustomEvent(obj, 'onannotatestart'); + RGraph.FireCustomEvent(obj, 'onannotatebegin'); + } + + return false; + } + canvas.addEventListener('mousedown', canvas_onmousedown, false); + RGraph.AddEventListener(canvas.id, 'mousedown', canvas_onmousedown); + + /** + * This cancels annotating for ALL canvases + */ + var window_onmouseup = function (e) + { + var obj = RGraph.Registry.Get('chart.annotating'); + var tags = document.getElementsByTagName('canvas'); + + for (var i=0; i<tags.length; ++i) { + if (tags[i].__object__) { + tags[i].__object__.Set('chart.mousedown', false); + } + } + + if (e.button != 0 || !obj) { + return; + } + + // Store the annotations in browser storage if it's available + if (RGraph.Registry.Get('annotate.actions') && RGraph.Registry.Get('annotate.actions').length > 0 && window.localStorage) { + + var id = '__rgraph_annotations_' + e.target.id + '__'; + var annotations = window.localStorage[id] ? window.localStorage[id] + '|' : ''; + annotations += RGraph.Registry.Get('annotate.actions'); + + // Store the annotations information in HTML5 browser storage here + window.localStorage[id] = annotations; + } + + // Clear the recorded annotations + RGraph.Registry.Set('annotate.actions', []); + + /** + * Fire the annotate event + */ + + RGraph.FireCustomEvent(obj, 'onannotateend'); + } + window.addEventListener('mouseup', window_onmouseup, false); + RGraph.AddEventListener(canvas.id, 'window_mouseup', window_onmouseup); + + /** + * Canvas onmouseup event + */ + var canvas_onmouseup = function (e) + { + var obj = e.target.__object__; + + RGraph.Registry.Set('chart.mousedown', false); + } + canvas.addEventListener('mouseup', canvas_onmouseup, false); + RGraph.AddEventListener(canvas.id, 'mouseup', canvas_onmouseup); + + /** + * The canvas onmousemove function + */ + var canvas_onmousemove = function (e) + { + var e = RGraph.FixEventObject(e); + var obj = e.target.__object__; + var coords = RGraph.getMouseXY(e); + var x = coords[0]; + var y = coords[1]; + var width = canvas.width; + var height = canvas.height; + + obj.context.lineWidth = 1; + + // Don't allow annotating in the gutter + // + // CHANGED 20TH DECEMBER 2010 TO ALLOW ANNOTATING IN THE GUTTER + if (true) { + + canvas.style.cursor = 'crosshair'; + + if (obj.Get('chart.mousedown')) { + + // Special case for HBars and Gantts with their extra wide left gutter + if ( (obj.type != 'hbar' && obj.type != 'gantt') || x > obj.gutterLeft) { + + /** + * This is here to stop annotating in the gutter + */ + if (RGraph.Registry.Get('started.annotating') == false) { + context.moveTo(x, y); + RGraph.Registry.Set('started.annotating', true) + } + + context.lineTo(x, y); + + RGraph.Registry.Set('annotate.actions', RGraph.Registry.Get('annotate.actions') + '|' + x + ',' + y); + + context.stroke(); + + /** + * Fire the annotate event + */ + RGraph.FireCustomEvent(obj, 'onannotate'); + } + } + + } else { + canvas.style.cursor = 'default'; + } + } + canvas.addEventListener('mousemove', canvas_onmousemove, false); + RGraph.AddEventListener(canvas.id, 'mousemove', canvas_onmousemove); + + RGraph.ReplayAnnotations(obj); + } + } + + + /** + * Shows the mini palette used for annotations + * + * @param object e The event object + */ + RGraph.Showpalette = function (e) + { + var isSafari = navigator.userAgent.indexOf('Safari') ? true : false; + + e = RGraph.FixEventObject(e); + + var canvas = e.target.parentNode.__canvas__; + var context = canvas.getContext('2d'); + var obj = canvas.__object__; + var div = document.createElement('DIV'); + var coords = RGraph.getMouseXY(e); + + div.__object__ = obj; // The graph object + div.className = 'RGraph_palette'; + div.style.position = 'absolute'; + div.style.backgroundColor = 'white'; + div.style.border = '1px solid black'; + div.style.left = 0; + div.style.top = 0; + div.style.padding = '3px'; + div.style.paddingBottom = 0; + div.style.paddingRight = 0; + div.style.opacity = 0; + div.style.boxShadow = 'rgba(96,96,96,0.5) 3px 3px 3px'; + div.style.WebkitBoxShadow = 'rgba(96,96,96,0.5) 3px 3px 3px'; + div.style.MozBoxShadow = 'rgba(96,96,96,0.5) 3px 3px 3px'; + div.style.filter = 'progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=135)'; + + var common_css = 'padding: 1px; display: inline; display: inline-block; width: 15px; height: 15px; margin-right: 3px; cursor: pointer;' + (isSafari ? 'margin-bottom: 3px' : ''); + var common_mouseover = ' onmouseover="this.style.border = \'1px black solid\'; this.style.padding = 0"'; + var common_mouseout = ' onmouseout="this.style.border = 0; this.style.padding = \'1px\'" '; + + var str = ''; + + var colors = ['red', 'blue', 'green', 'black', 'yellow', 'magenta', 'pink', 'cyan', 'purple', '#ddf', 'gray', '#36905c']; + + for (i=0; i<colors.length; ++i) { + str = str + '<span ' + common_mouseover + common_mouseout + ' style="background-color: ' + colors[i] + '; ' + common_css + '" onclick="this.parentNode.__object__.Set(\'chart.annotate.color\', this.style.backgroundColor); this.parentNode.style.display = \'none\'; RGraph.FireCustomEvent(this.parentNode.__object__, \'onannotatecolor\')"> </span>'; + + // This makes the colours go across two levels + if (i == 5) { + str += '<br />'; + } + } + + div.innerHTML = str; + document.body.appendChild(div); + + /** + * Now the div has been added to the document, move it up and left and set the width and height + */ + div.style.width = (div.offsetWidth) + 'px'; + div.style.height = (div.offsetHeight - (RGraph.isIE9up() ? 5 : 5)) + 'px'; + div.style.left = Math.max(0, e.pageX - div.offsetWidth - 2) + 'px'; + div.style.top = (e.pageY - div.offsetHeight - 2) + 'px'; + + /** + * Store the palette div in the registry + */ + RGraph.Registry.Set('palette', div); + + setTimeout("RGraph.Registry.Get('palette').style.opacity = 0.2", 50); + setTimeout("RGraph.Registry.Get('palette').style.opacity = 0.4", 100); + setTimeout("RGraph.Registry.Get('palette').style.opacity = 0.6", 150); + setTimeout("RGraph.Registry.Get('palette').style.opacity = 0.8", 200); + setTimeout("RGraph.Registry.Get('palette').style.opacity = 1", 250); + + RGraph.HideContext(); + + window.onclick = function () + { + RGraph.HidePalette(); + } + + // Should this be here? Yes. This function is being used as an event handler. + e.stopPropagation(); + return false; + } + + + /** + * Clears any annotation data from global storage + * + * @param string id The ID of the canvas + */ + RGraph.ClearAnnotations = function (id) + { + var canvas = document.getElementById(id); + var obj = canvas.__object__; + + if (window.localStorage && window.localStorage['__rgraph_annotations_' + id + '__'] && window.localStorage['__rgraph_annotations_' + id + '__'].length) { + window.localStorage['__rgraph_annotations_' + id + '__'] = []; + + RGraph.FireCustomEvent(obj, 'onannotateclear'); + } + } + + + /** + * Replays stored annotations + * + * @param object obj The graph object + */ + RGraph.ReplayAnnotations = function (obj) + { + // Check for support + if (!window.localStorage) { + return; + } + + var context = obj.context; + var annotations = window.localStorage['__rgraph_annotations_' + obj.id + '__']; + var i, len, move, coords; + + context.beginPath(); + context.lineWidth = 2; + + if (annotations && annotations.length) { + annotations = annotations.split('|'); + } else { + return; + } + + for (i=0, len=annotations.length; i<len; ++i) { + if (!annotations[i].match(/^[0-9]+,[0-9]+$/)) { + context.stroke(); + context.beginPath(); + context.strokeStyle = annotations[i]; + move = true; + continue; + } + + coords = annotations[i].split(','); + + if (move) { + context.moveTo(coords[0], coords[1]); + move = false; + } else { + context.lineTo(coords[0], coords[1]); + } + } + + context.stroke(); + }
\ No newline at end of file diff --git a/schall/static/RGraph/libraries/RGraph.common.context.js b/schall/static/RGraph/libraries/RGraph.common.context.js new file mode 100644 index 0000000..ee6c6ae --- /dev/null +++ b/schall/static/RGraph/libraries/RGraph.common.context.js @@ -0,0 +1,579 @@ + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + + if (typeof(RGraph) == 'undefined') RGraph = {isRGraph:true,type:'common'}; + + + /** + * This gunction shows a context menu containing the parameters + * provided to it + * + * @param object canvas The canvas object + * @param array menuitems The context menu menuitems + * @param object e The event object + */ + RGraph.Contextmenu = function (canvas, menuitems, e) + { + e = RGraph.FixEventObject(e); + + /** + * Fire the custom RGraph event onbeforecontextmenu + */ + RGraph.FireCustomEvent(canvas.__object__, 'onbeforecontextmenu'); + + /** + * Hide any existing menu + */ + if (RGraph.Registry.Get('chart.contextmenu')) { + RGraph.HideContext(); + } + + // Hide any zoomed canvas + RGraph.HideZoomedCanvas(); + + /** + * Hide the palette if necessary + */ + RGraph.HidePalette(); + + /** + * This is here to ensure annotating is OFF + */ + canvas.__object__.Set('chart.mousedown', false); + + var x = e.pageX; + var y = e.pageY; + var div = document.createElement('div'); + var bg = document.createElement('div'); + + div.className = 'RGraph_contextmenu'; + div.__canvas__ = canvas; /* Store a reference to the canvas on the contextmenu object */ + div.style.position = 'absolute'; + div.style.left = 0; + div.style.top = 0; + div.style.border = '1px solid black'; + div.style.backgroundColor = 'white'; + div.style.boxShadow = '3px 3px 3px rgba(96,96,96,0.5)'; + div.style.MozBoxShadow = '3px 3px 3px rgba(96,96,96,0.5)'; + div.style.WebkitBoxShadow = '3px 3px 3px rgba(96,96,96,0.5)'; + div.style.filter = 'progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=135)'; + div.style.opacity = 0; + + bg.className = 'RGraph_contextmenu_background'; + bg.style.position = 'absolute'; + bg.style.backgroundColor = '#ccc'; + bg.style.borderRight = '1px solid #aaa'; + bg.style.top = 0; + bg.style.left = 0; + bg.style.width = '18px'; + bg.style.height = '100%'; + bg.style.opacity = 0; + + + div = document.body.appendChild(div); + bg = div.appendChild(bg); + + + /** + * Now add the context menu items + */ + for (i=0; i<menuitems.length; ++i) { + + var menuitem = document.createElement('div'); + + menuitem.__canvas__ = canvas; + menuitem.__contextmenu__ = div; + menuitem.className = 'RGraph_contextmenu_item'; + + if (menuitems[i]) { + menuitem.style.padding = '2px 5px 2px 23px'; + menuitem.style.fontFamily = 'Arial'; + menuitem.style.fontSize = '10pt'; + menuitem.style.fontWeight = 'normal'; + menuitem.innerHTML = menuitems[i][0]; + + if (RGraph.is_array(menuitems[i][1])) { + menuitem.style.backgroundImage = 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAQUlEQVQImY3NoQ2AMABE0ZewABMyGQ6mqWODzlAclBSFO8HZl8uf0FFxCHtwYkt4Y6ChYE44cGH9/fyae2p2LAleW9oVTQuVf6gAAAAASUVORK5CYII=)'; + menuitem.style.backgroundRepeat = 'no-repeat'; + menuitem.style.backgroundPosition = '97% center'; + } + + // Add the mouseover event + if (menuitems[i][1]) { + if (menuitem.addEventListener) { + menuitem.addEventListener("mouseover", function (e) {RGraph.HideContextSubmenu(); e.target.style.backgroundColor = 'rgba(0,0,0,0.2)'; e.target.style.cursor = 'pointer';}, false); + menuitem.addEventListener("mouseout", function (e) {e.target.style.backgroundColor = 'inherit'; e.target.style.cursor = 'default';}, false); + } else { + menuitem.attachEvent("onmouseover", function () {RGraph.HideContextSubmenu();event.srcElement.style.backgroundColor = '#eee';event.srcElement.style.cursor = 'pointer';} + , false); + menuitem.attachEvent("onmouseout", function () {event.srcElement.style.backgroundColor = 'inherit'; event.srcElement.style.cursor = 'default';}, false); + } + } else { + if (menuitem.addEventListener) { + menuitem.addEventListener("mouseover", function (e) {e.target.style.cursor = 'default';}, false); + menuitem.addEventListener("mouseout", function (e) {e.target.style.cursor = 'default';}, false); + } else { + menuitem.attachEvent("onmouseover", function () {event.srcElement.style.cursor = 'default'}, false); + menuitem.attachEvent("onmouseout", function () {event.srcElement.style.cursor = 'default';}, false); + } + } + + } else { + menuitem.style.borderBottom = '1px solid #ddd'; + menuitem.style.marginLeft = '25px'; + } + + div.appendChild(menuitem); + + /** + * Install the event handler that calls the menuitem + */ + if (menuitems[i] && menuitems[i][1] && typeof(menuitems[i][1]) == 'function') { + if (document.all && 0) { // MSIE bit no longer necessary + menuitem.attachEvent('onclick', menuitems[i][1]); + menuitem.attachEvent('onclick', function () {RGraph.HideContext();}); + } else { + menuitem.addEventListener('click', menuitems[i][1], false); + } + + // Submenu + } else if (menuitems[i] && menuitems[i][1] && RGraph.is_array(menuitems[i][1])) { + (function () + { + var tmp = menuitems[i][1]; // This is here because of "references vs primitives" and how they're passed around in Javascript + menuitem.addEventListener('mouseover', function (e) {RGraph.Contextmenu_submenu(canvas.__object__, tmp, e.target);}, false); + })(); + } + } + + /** + * Now all the menu items have been added, set the shadow width + * Shadow now handled by CSS3? + */ + div.style.width = (div.offsetWidth + 10) + 'px'; + div.style.height = (div.offsetHeight - 2) + 'px'; + + /** + * Set the background (the left bar) width if it's MSIE + */ + //if (document.all) { + // bg.style.height = (div.offsetHeight - 2) + 'px'; + //} + + // Show the menu to the left or the right (normal) of the cursor? + if (x + div.offsetWidth > document.body.offsetWidth) { + x -= div.offsetWidth; + } + + // Reposition the menu (now we have the real offsetWidth) + div.style.left = x + 'px'; + div.style.top = y + 'px'; + + /** + * Do a little fade in effect + */ + setTimeout("if (obj = RGraph.Registry.Get('chart.contextmenu')) obj.style.opacity = 0.2", 50); + setTimeout("if (obj = RGraph.Registry.Get('chart.contextmenu')) obj.style.opacity = 0.4", 100); + setTimeout("if (obj = RGraph.Registry.Get('chart.contextmenu')) obj.style.opacity = 0.6", 150); + setTimeout("if (obj = RGraph.Registry.Get('chart.contextmenu')) obj.style.opacity = 0.8", 200); + setTimeout("if (obj = RGraph.Registry.Get('chart.contextmenu')) obj.style.opacity = 1", 250); + + // The fade in effect on the left gray bar + setTimeout("if (obj = RGraph.Registry.Get('chart.contextmenu.bg')) obj.style.opacity = 0.2", 50); + setTimeout("if (obj = RGraph.Registry.Get('chart.contextmenu.bg')) obj.style.opacity = 0.4", 100); + setTimeout("if (obj = RGraph.Registry.Get('chart.contextmenu.bg')) obj.style.opacity = 0.6", 150); + setTimeout("if (obj = RGraph.Registry.Get('chart.contextmenu.bg')) obj.style.opacity = 0.8", 200); + setTimeout("if (obj = RGraph.Registry.Get('chart.contextmenu.bg')) obj.style.opacity = 1", 250); + + // Store the context menu in the registry + RGraph.Registry.Set('chart.contextmenu', div); + RGraph.Registry.Set('chart.contextmenu.bg', bg); + RGraph.Registry.Get('chart.contextmenu').oncontextmenu = function () {return false;}; + RGraph.Registry.Get('chart.contextmenu.bg').oncontextmenu = function () {return false;}; + + /** + * Install the event handlers that hide the context menu + */ + canvas.addEventListener('click', function () {RGraph.HideContext();}, false); + + window.onclick = function (e) + { + RGraph.HideContext(); + + // Removed on 3/7/10 - stops a bug in conjunction with annotating which presents itself on the Rscatter + //RGraph.Redraw(); + + // Fire the onclick event again + if (e.target.onclick && e.button == 0) { + e.target.onclick(e); + } + } + + window.onresize = function () {RGraph.HideContext();} + + /** + * Add the __shape__ object to the context menu + */ + + /** + * Set the shape coords from the .getShape() method + */ + if (typeof(canvas.__object__.getShape) == 'function') { + RGraph.Registry.Get('chart.contextmenu').__shape__ = canvas.__object__.getShape(e); + } + + + e.stopPropagation(); + + /** + * Fire the (RGraph) oncontextmenu event + */ + RGraph.FireCustomEvent(canvas.__object__, 'oncontextmenu'); + + return false; + } + + + /** + * Hides the context menu if it's currently visible + */ + RGraph.HideContext = function () + { + var cm = RGraph.Registry.Get('chart.contextmenu'); + var cmbg = RGraph.Registry.Get('chart.contextmenu.bg'); + + //Hide any submenu currently being displayed + RGraph.HideContextSubmenu(); + + if (cm) { + cm.parentNode.removeChild(cm); + cmbg.parentNode.removeChild(cmbg); + + cm.style.visibility = 'hidden'; + cm.style.display = 'none'; + RGraph.Registry.Set('chart.contextmenu', null); + + cmbg.style.visibility = 'hidden'; + cmbg.style.display = 'none'; + RGraph.Registry.Set('chart.contextmenu.bg', null); + } + } + + + /** + * Hides the context menus SUBMENU if it's currently visible + */ + RGraph.HideContextSubmenu = function () + { + var sub = RGraph.Registry.Get('chart.contextmenu.submenu'); + + if (sub) { + sub.style.visibility = 'none'; + sub.style.display = 'none'; + RGraph.Registry.Set('chart.contextmenu.submenu', null); + } + } + + + /** + * Shows the context menu after making a few checks - not opera (doesn't support oncontextmenu, + * not safari (tempermentality), not chrome (hmmm) + */ + RGraph.ShowContext = function (obj) + { + RGraph.HidePalette(); + + if (obj.Get('chart.contextmenu') && obj.Get('chart.contextmenu').length) { + + var isOpera = navigator.userAgent.indexOf('Opera') >= 0; + var isSafari = navigator.userAgent.indexOf('Safari') >= 0; + var isChrome = navigator.userAgent.indexOf('Chrome') >= 0; + var isMacFirefox = navigator.userAgent.indexOf('Firefox') > 0 && navigator.userAgent.indexOf('Mac') > 0; + var isIE9 = navigator.userAgent.indexOf('MSIE 9') >= 0; + + if (((!isOpera && !isSafari) || isChrome) && !isMacFirefox) { + + obj.canvas.oncontextmenu = function (e) + { + e = RGraph.FixEventObject(e); + + if (e.ctrlKey) return true; + + RGraph.Contextmenu(obj.canvas, obj.Get('chart.contextmenu'), e); + + return false; + } + + // Accomodate Opera and Safari - use double click event + } else { + + obj.canvas.addEventListener('dblclick', function (e) + { + if (e.ctrlKey) return true; + + if (!RGraph.Registry.Get('chart.contextmenu')) { + RGraph.Contextmenu(obj.canvas, obj.Get('chart.contextmenu'), e); + } + }, false); + } + } + } + + + /** + * This draws a submenu should it be necessary + * + * @param object obj The graph object + * @param object menu The context menu + */ + RGraph.Contextmenu_submenu = function (obj, menuitems, parentMenuItem) + { + RGraph.HideContextSubmenu(); + + var canvas = obj.canvas; + var context = obj.context; + var menu = parentMenuItem.parentNode; + + var subMenu = document.createElement('DIV'); + subMenu.style.position = 'absolute'; + subMenu.style.width = '100px'; + subMenu.style.top = menu.offsetTop + parentMenuItem.offsetTop + 'px'; + subMenu.style.left = (menu.offsetLeft + menu.offsetWidth - (RGraph.isIE8() ? 9 : 0)) + 'px'; + subMenu.style.backgroundColor = 'white'; + subMenu.style.border = '1px solid black'; + subMenu.className = 'RGraph_contextmenu'; + subMenu.__contextmenu__ = menu; + subMenu.style.boxShadow = '3px 3px 3px rgba(96,96,96,0.5)'; + subMenu.style.MozBoxShadow = '3px 3px 3px rgba(96,96,96,0.5)'; + subMenu.style.WebkitBoxShadow = '3px 3px 3px rgba(96,96,96,0.5)'; + subMenu.style.filter = 'progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=135)'; + document.body.appendChild(subMenu); + + for (var i=0; i<menuitems.length; ++i) { + + var menuitem = document.createElement('DIV'); + + menuitem.__canvas__ = canvas; + menuitem.__contextmenu__ = menu; + menuitem.className = 'RGraph_contextmenu_item'; + + if (menuitems[i]) { + menuitem.style.padding = '2px 5px 2px 23px'; + menuitem.style.fontFamily = 'Arial'; + menuitem.style.fontSize = '10pt'; + menuitem.style.fontWeight = 'normal'; + menuitem.innerHTML = menuitems[i][0]; + + if (menuitems[i][1]) { + if (menuitem.addEventListener) { + menuitem.addEventListener("mouseover", function (e) {e.target.style.backgroundColor = 'rgba(0,0,0,0.2)'; e.target.style.cursor = 'pointer';}, false); + menuitem.addEventListener("mouseout", function (e) {e.target.style.backgroundColor = 'inherit'; e.target.style.cursor = 'default';}, false); + } else { + menuitem.attachEvent("onmouseover", function () {event.srcElement.style.backgroundColor = 'rgba(0,0,0,0.2)'; event.srcElement.style.cursor = 'pointer'}, false); + menuitem.attachEvent("onmouseout", function () {event.srcElement.style.backgroundColor = 'inherit'; event.srcElement.style.cursor = 'default';}, false); + } + } else { + if (menuitem.addEventListener) { + menuitem.addEventListener("mouseover", function (e) {e.target.style.cursor = 'default';}, false); + menuitem.addEventListener("mouseout", function (e) {e.target.style.cursor = 'default';}, false); + } else { + menuitem.attachEvent("onmouseover", function () {event.srcElement.style.cursor = 'default'}, false); + menuitem.attachEvent("onmouseout", function () {event.srcElement.style.cursor = 'default';}, false); + } + } + } else { + menuitem.style.borderBottom = '1px solid #ddd'; + menuitem.style.marginLeft = '25px'; + } + + subMenu.appendChild(menuitem); + + if (menuitems[i] && menuitems[i][1]) { + if (document.all) { + menuitem.attachEvent('onclick', menuitems[i][1]); + } else { + menuitem.addEventListener('click', menuitems[i][1], false); + } + } + } + + + var bg = document.createElement('DIV'); + bg.className = 'RGraph_contextmenu_background'; + bg.style.position = 'absolute'; + bg.style.backgroundColor = '#ccc'; + bg.style.borderRight = '1px solid #aaa'; + bg.style.top = 0; + bg.style.left = 0; + bg.style.width = '18px'; + bg.style.height = '100%'; + + bg = subMenu.appendChild(bg); + + RGraph.Registry.Set('chart.contextmenu.submenu', subMenu); + } + + + /** + * A function designed to be used in conjunction with thed context menu + * to allow people to get image versions of canvases. + * + * @param canvas Optionally you can pass in the canvas, which will be used + */ + RGraph.showPNG = function () + { + if (RGraph.isIE8()) { + alert('[RGRAPH PNG] Sorry, showing a PNG is not supported on MSIE8.'); + return; + } + + if (arguments[0] && arguments[0].id) { + var canvas = arguments[0]; + var event = arguments[1]; + + } else if (RGraph.Registry.Get('chart.contextmenu')) { + var canvas = RGraph.Registry.Get('chart.contextmenu').__canvas__; + + } else { + alert('[RGRAPH SHOWPNG] Could not find canvas!'); + } + + var obj = canvas.__object__; + + /** + * Create the gray background DIV to cover the page + */ + var bg = document.createElement('DIV'); + bg.id = '__rgraph_image_bg__'; + bg.style.position = 'fixed'; + bg.style.top = '-10px'; + bg.style.left = '-10px'; + bg.style.width = '5000px'; + bg.style.height = '5000px'; + bg.style.backgroundColor = 'rgb(204,204,204)'; + bg.style.opacity = 0; + document.body.appendChild(bg); + + + /** + * Create the div that the graph sits in + */ + var div = document.createElement('DIV'); + div.style.backgroundColor = 'white'; + div.style.opacity = 0; + div.style.border = '1px solid black'; + div.style.position = 'fixed'; + div.style.top = '20%'; + div.style.width = canvas.width + 'px'; + div.style.height = canvas.height + 35 + 'px'; + div.style.left = (document.body.clientWidth / 2) - (canvas.width / 2) + 'px'; + div.style.padding = '5px'; + + div.style.borderRadius = '10px'; + div.style.MozBorderRadius = '10px'; + div.style.WebkitBorderRadius = '10px'; + + div.style.boxShadow = '0 0 15px rgba(96,96,96,0.5)'; + div.style.MozBoxShadow = '0 0 15px rgba(96,96,96,0.5)'; + div.style.WebkitBoxShadow = 'rgba(96,96,96,0.5) 0 0 15px'; + + div.__canvas__ = canvas; + div.__object__ = obj; + div.id = '__rgraph_image_div__'; + document.body.appendChild(div); + + + /** + * Add the HTML text inputs + */ + div.innerHTML += '<div style="position: absolute; margin-left: 10px; top: ' + canvas.height + 'px; width: ' + (canvas.width - 50) + 'px; height: 25px"><span style="display: inline; display: inline-block; width: 65px; text-align: right">URL:</span><textarea style="float: right; overflow: hidden; height: 15px; width: ' + (canvas.width - obj.gutterLeft - obj.gutterRight - 80) + 'px" onclick="this.select()" readonly="readonly" id="__rgraph_dataurl__">' + canvas.toDataURL() + '</textarea></div>'; + div.innerHTML += '<div style="position: absolute; top: ' + (canvas.height + 25) + 'px; left: ' + (obj.gutterLeft - 65 + (canvas.width / 2)) + 'px; width: ' + (canvas.width - obj.gutterRight) + 'px; font-size: 65%">A link using the URL: <a href="' + canvas.toDataURL() + '">View</a></div>' + + + + /** + * Create the image rendition of the graph + */ + var img = document.createElement('IMG'); + RGraph.Registry.Set('chart.png', img); + img.__canvas__ = canvas; + img.__object__ = obj; + img.id = '__rgraph_image_img__'; + img.className = 'RGraph_png'; + + img.src = canvas.toDataURL(); + + div.appendChild(img); + + setTimeout(function () {document.getElementById("__rgraph_dataurl__").select();}, 50); + + window.addEventListener('resize', function (e){var img = RGraph.Registry.Get('chart.png');img.style.left = (document.body.clientWidth / 2) - (img.width / 2) + 'px';}, false); + + bg.onclick = function (e) + { + var div = document.getElementById("__rgraph_image_div__"); + var bg = document.getElementById("__rgraph_image_bg__"); + + if (div) { + div.style.opacity = 0; + + div.parentNode.removeChild(div); + + div.id = ''; + div.style.display = 'none'; + div = null; + } + + if (bg) { + bg.style.opacity = 0; + + bg.id = ''; + bg.style.display = 'none'; + bg = null; + } + } + + window.addEventListener('resize', function (e) {bg.onclick(e);}, false) + + /** + * This sets the image as a global variable, circumventing repeated calls to document.getElementById() + */ + __rgraph_image_bg__ = bg; + __rgraph_image_div__ = div; + + + setTimeout('__rgraph_image_div__.style.opacity = 0.2', 50); + setTimeout('__rgraph_image_div__.style.opacity = 0.4', 100); + setTimeout('__rgraph_image_div__.style.opacity = 0.6', 150); + setTimeout('__rgraph_image_div__.style.opacity = 0.8', 200); + setTimeout('__rgraph_image_div__.style.opacity = 1', 250); + + setTimeout('__rgraph_image_bg__.style.opacity = 0.1', 50); + setTimeout('__rgraph_image_bg__.style.opacity = 0.2', 100); + setTimeout('__rgraph_image_bg__.style.opacity = 0.3', 150); + setTimeout('__rgraph_image_bg__.style.opacity = 0.4', 200); + setTimeout('__rgraph_image_bg__.style.opacity = 0.5', 250); + + + + img.onclick = function (e) + { + if (e.stopPropagation) e.stopPropagation(); + else event.cancelBubble = true; + } + + if (event && event.stopPropagation) { + event.stopPropagation(); + } + }
\ No newline at end of file diff --git a/schall/static/RGraph/libraries/RGraph.common.core.js b/schall/static/RGraph/libraries/RGraph.common.core.js new file mode 100644 index 0000000..990f0ca --- /dev/null +++ b/schall/static/RGraph/libraries/RGraph.common.core.js @@ -0,0 +1,2991 @@ + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + + /** + * Initialise the various objects + */ + if (typeof(RGraph) == 'undefined') RGraph = {isRGraph:true,type:'common'}; + + + RGraph.Registry = {}; + RGraph.Registry.store = []; + RGraph.Registry.store['chart.event.handlers'] = []; + RGraph.background = {}; + RGraph.objects = []; + RGraph.Resizing = {}; + RGraph.events = []; + + + + /** + * Returns five values which are used as a nice scale + * + * @param max int The maximum value of the graph + * @param obj object The graph object + * @return array An appropriate scale + */ + RGraph.getScale = function (max, obj) + { + /** + * Special case for 0 + */ + if (max == 0) { + return ['0.2', '0.4', '0.6', '0.8', '1.0']; + } + + var original_max = max; + + /** + * Manually do decimals + */ + if (max <= 1) { + if (max > 0.5) { + return [0.2,0.4,0.6,0.8, Number(1).toFixed(1)]; + + } else if (max >= 0.1) { + return obj.Get('chart.scale.round') ? [0.2,0.4,0.6,0.8,1] : [0.1,0.2,0.3,0.4,0.5]; + + } else { + + var tmp = max; + var exp = 0; + + while (tmp < 1.01) { + exp += 1; + tmp *= 10; + } + + var ret = ['2e-' + exp, '4e-' + exp, '6e-' + exp, '8e-' + exp, '10e-' + exp]; + + + if (max <= ('5e-' + exp)) { + ret = ['1e-' + exp, '2e-' + exp, '3e-' + exp, '4e-' + exp, '5e-' + exp]; + } + + return ret; + } + } + + // Take off any decimals + if (String(max).indexOf('.') > 0) { + max = String(max).replace(/\.\d+$/, ''); + } + + var interval = Math.pow(10, Number(String(Number(max)).length - 1)); + var topValue = interval; + + while (topValue < max) { + topValue += (interval / 2); + } + + // Handles cases where the max is (for example) 50.5 + if (Number(original_max) > Number(topValue)) { + topValue += (interval / 2); + } + + // Custom if the max is greater than 5 and less than 10 + if (max < 10) { + topValue = (Number(original_max) <= 5 ? 5 : 10); + } + + /** + * Added 02/11/2010 to create "nicer" scales + */ + if (obj && typeof(obj.Get('chart.scale.round')) == 'boolean' && obj.Get('chart.scale.round')) { + topValue = 10 * interval; + } + + return [topValue * 0.2, topValue * 0.4, topValue * 0.6, topValue * 0.8, topValue]; + } + + + /** + * Returns the maximum numeric value which is in an array + * + * @param array arr The array (can also be a number, in which case it's returned as-is) + * @param int Whether to ignore signs (ie negative/positive) + * @return int The maximum value in the array + */ + RGraph.array_max = function (arr) + { + var max = null; + + if (typeof(arr) == 'number') { + return arr; + } + + for (var i=0; i<arr.length; ++i) { + if (typeof(arr[i]) == 'number') { + + var val = arguments[1] ? Math.abs(arr[i]) : arr[i]; + + if (typeof(max) == 'number') { + max = Math.max(max, val); + } else { + max = val; + } + } + } + + return max; + } + + + /** + * Returns the maximum value which is in an array + * + * @param array arr The array + * @param int len The length to pad the array to + * @param mixed The value to use to pad the array (optional) + */ + RGraph.array_pad = function (arr, len) + { + if (arr.length < len) { + var val = arguments[2] ? arguments[2] : null; + + for (var i=arr.length; i<len; ++i) { + arr[i] = val; + } + } + + return arr; + } + + + /** + * An array sum function + * + * @param array arr The array to calculate the total of + * @return int The summed total of the arrays elements + */ + RGraph.array_sum = function (arr) + { + // Allow integers + if (typeof(arr) == 'number') { + return arr; + } + + var i, sum; + var len = arr.length; + + for(i=0,sum=0;i<len;sum+=arr[i++]); + return sum; + } + + + + /** + * A simple is_array() function + * + * @param mixed obj The object you want to check + * @return bool Whether the object is an array or not + */ + RGraph.is_array = function (obj) + { + return obj != null && obj.constructor.toString().indexOf('Array') != -1; + } + + + /** + * Converts degrees to radians + * + * @param int degrees The number of degrees + * @return float The number of radians + */ + RGraph.degrees2Radians = function (degrees) + { + return degrees * (Math.PI / 180); + } + + + /** + * This function draws an angled line. The angle is cosidered to be clockwise + * + * @param obj ctxt The context object + * @param int x The X position + * @param int y The Y position + * @param int angle The angle in RADIANS + * @param int length The length of the line + */ + RGraph.lineByAngle = function (context, x, y, angle, length) + { + context.arc(x, y, length, angle, angle, false); + context.lineTo(x, y); + context.arc(x, y, length, angle, angle, false); + } + + + /** + * This is a useful function which is basically a shortcut for drawing left, right, top and bottom alligned text. + * + * @param object context The context + * @param string font The font + * @param int size The size of the text + * @param int x The X coordinate + * @param int y The Y coordinate + * @param string text The text to draw + * @parm string The vertical alignment. Can be null. "center" gives center aligned text, "top" gives top aligned text. + * Anything else produces bottom aligned text. Default is bottom. + * @param string The horizontal alignment. Can be null. "center" gives center aligned text, "right" gives right aligned text. + * Anything else produces left aligned text. Default is left. + * @param bool Whether to show a bounding box around the text. Defaults not to + * @param int The angle that the text should be rotate at (IN DEGREES) + * @param string Background color for the text + * @param bool Whether the text is bold or not + * @param bool Whether the bounding box has a placement indicator + */ + RGraph.Text = function (context, font, size, x, y, text) + { + /** + * This calls the text function recursively to accommodate multi-line text + */ + if (typeof(text) == 'string' && text.match(/\r\n/)) { + + var arr = text.split('\r\n'); + + text = arr[0]; + arr = RGraph.array_shift(arr); + + var nextline = arr.join('\r\n') + + RGraph.Text(context, font, size, arguments[9] == -90 ? (x + (size * 1.5)) : x, y + (size * 1.5), nextline, arguments[6] ? arguments[6] : null, 'center', arguments[8], arguments[9], arguments[10], arguments[11], arguments[12]); + } + + + // Accommodate MSIE + if (RGraph.isIE8()) { + y += 2; + } + + + context.font = (arguments[11] ? 'Bold ': '') + size + 'pt ' + font; + + var i; + var origX = x; + var origY = y; + var originalFillStyle = context.fillStyle; + var originalLineWidth = context.lineWidth; + + // Need these now the angle can be specified, ie defaults for the former two args + if (typeof(arguments[6]) == null) arguments[6] = 'bottom'; // Vertical alignment. Default to bottom/baseline + if (typeof(arguments[7]) == null) arguments[7] = 'left'; // Horizontal alignment. Default to left + if (typeof(arguments[8]) == null) arguments[8] = null; // Show a bounding box. Useful for positioning during development. Defaults to false + if (typeof(arguments[9]) == null) arguments[9] = 0; // Angle (IN DEGREES) that the text should be drawn at. 0 is middle right, and it goes clockwise + if (typeof(arguments[12]) == null) arguments[12] = true; // Whether the bounding box has the placement indicator + + // The alignment is recorded here for purposes of Opera compatibility + if (navigator.userAgent.indexOf('Opera') != -1) { + context.canvas.__rgraph_valign__ = arguments[6]; + context.canvas.__rgraph_halign__ = arguments[7]; + } + + // First, translate to x/y coords + context.save(); + + context.canvas.__rgraph_originalx__ = x; + context.canvas.__rgraph_originaly__ = y; + + context.translate(x, y); + x = 0; + y = 0; + + // Rotate the canvas if need be + if (arguments[9]) { + context.rotate(arguments[9] / 57.3); + } + + // Vertical alignment - defaults to bottom + if (arguments[6]) { + var vAlign = arguments[6]; + + if (vAlign == 'center') { + context.translate(0, size / 2); + } else if (vAlign == 'top') { + context.translate(0, size); + } + } + + + // Hoeizontal alignment - defaults to left + if (arguments[7]) { + var hAlign = arguments[7]; + var width = context.measureText(text).width; + + if (hAlign) { + if (hAlign == 'center') { + context.translate(-1 * (width / 2), 0) + } else if (hAlign == 'right') { + context.translate(-1 * width, 0) + } + } + } + + + context.fillStyle = originalFillStyle; + + /** + * Draw a bounding box if requested + */ + context.save(); + context.fillText(text,0,0); + context.lineWidth = 0.5; + + if (arguments[8]) { + + var width = context.measureText(text).width; + var ieOffset = RGraph.isIE8() ? 2 : 0; + + context.translate(x, y); + context.strokeRect(0 - 3, 0 - 3 - size - ieOffset, width + 6, 0 + size + 6); + + /** + * If requested, draw a background for the text + */ + if (arguments[10]) { + + var offset = 3; + var ieOffset = RGraph.isIE8() ? 2 : 0; + var width = context.measureText(text).width + + //context.strokeStyle = 'gray'; + context.fillStyle = arguments[10]; + context.fillRect(x - offset, y - size - offset - ieOffset, width + (2 * offset), size + (2 * offset)); + //context.strokeRect(x - offset, y - size - offset - ieOffset, width + (2 * offset), size + (2 * offset)); + } + + /** + * Do the actual drawing of the text + */ + context.fillStyle = originalFillStyle; + context.fillText(text,0,0); + + if (arguments[12]) { + context.fillRect( + arguments[7] == 'left' ? 0 : (arguments[7] == 'center' ? width / 2 : width ) - 2, + arguments[6] == 'bottom' ? 0 : (arguments[6] == 'center' ? (0 - size) / 2 : 0 - size) - 2, + 4, + 4 + ); + } + } + context.restore(); + + // Reset the lineWidth + context.lineWidth = originalLineWidth; + + context.restore(); + } + + + /** + * Clears the canvas by setting the width. You can specify a colour if you wish. + * + * @param object canvas The canvas to clear + */ + RGraph.Clear = function (canvas) + { + var context = canvas.getContext('2d'); + var color = arguments[1]; + + if (RGraph.isIE8() && !color) { + color = 'white'; + } + + /** + * Can now clear the canvas back to fully transparent + */ + if (!color || (color && color == 'transparent')) { + + context.clearRect(0,0,canvas.width, canvas.height); + // context.fillStyle = 'rgba(0,0,0,0)'; + // context.globalCompositeOperation = 'source-in'; + // context = canvas.getContext('2d'); + //context.beginPath(); + //context.fillRect(-1000,-1000,canvas.width + 2000,canvas.height + 2000); + //context.fill(); + + // Reset the globalCompositeOperation + context.globalCompositeOperation = 'source-over'; + + } else { + + context.fillStyle = color; + context = canvas.getContext('2d'); + context.beginPath(); + + if (RGraph.isIE8()) { + context.fillRect(0,0,canvas.width,canvas.height); + } else { + context.fillRect(-10,-10,canvas.width + 20,canvas.height + 20); + } + + context.fill(); + } + + // Don't do this as it also clears any translation that may have occurred + //canvas.width = canvas.width; + + if (RGraph.ClearAnnotations) { + RGraph.ClearAnnotations(canvas.id); + } + + RGraph.FireCustomEvent(canvas.__object__, 'onclear'); + } + + + /** + * Draws the title of the graph + * + * @param object canvas The canvas object + * @param string text The title to write + * @param integer gutter The size of the gutter + * @param integer The center X point (optional - if not given it will be generated from the canvas width) + * @param integer Size of the text. If not given it will be 14 + */ + RGraph.DrawTitle = function (canvas, text, gutterTop) + { + var obj = canvas.__object__; + var context = canvas.getContext('2d'); + var gutterLeft = obj.Get('chart.gutter.left'); + var gutterRight = obj.Get('chart.gutter.right'); + var gutterBottom = obj.Get('chart.gutter.bottom'); + var size = arguments[4] ? arguments[4] : 12; + var bold = obj.Get('chart.title.bold'); + var centerx = (arguments[3] ? arguments[3] : ((obj.canvas.width - gutterLeft - gutterRight) / 2) + gutterLeft); + var keypos = obj.Get('chart.key.position'); + var vpos = obj.Get('chart.title.vpos'); + var hpos = obj.Get('chart.title.hpos'); + var bgcolor = obj.Get('chart.title.background'); + + // Account for 3D effect by faking the key position + if (obj.type == 'bar' && obj.Get('chart.variant') == '3d') { + keypos = 'gutter'; + } + + context.beginPath(); + context.fillStyle = obj.Get('chart.text.color') ? obj.Get('chart.text.color') : 'black'; + + /** + * Vertically center the text if the key is not present + */ + if (keypos && keypos != 'gutter') { + var vCenter = 'center'; + + } else if (!keypos) { + var vCenter = 'center'; + + } else { + var vCenter = 'bottom'; + } + + // if chart.title.vpos does not equal 0.5, use that + if (typeof(obj.Get('chart.title.vpos')) == 'number') { + vpos = obj.Get('chart.title.vpos') * gutterTop; + + if (obj.Get('chart.xaxispos') == 'top') { + vpos = obj.Get('chart.title.vpos') * gutterBottom + gutterTop + (obj.canvas.height - gutterTop - gutterBottom); + } + } else { + vpos = gutterTop - size - 5; + + if (obj.Get('chart.xaxispos') == 'top') { + vpos = obj.canvas.height - gutterBottom + size + 5; + } + } + + // if chart.title.hpos is a number, use that. It's multiplied with the (entire) canvas width + if (typeof(hpos) == 'number') { + centerx = hpos * canvas.width; + } + + // Set the colour + if (typeof(obj.Get('chart.title.color') != null)) { + var oldColor = context.fillStyle + var newColor = obj.Get('chart.title.color') + context.fillStyle = newColor ? newColor : 'black'; + } + + /** + * Default font is Verdana + */ + var font = obj.Get('chart.text.font'); + + /** + * Override the default font with chart.title.font + */ + if (typeof(obj.Get('chart.title.font')) == 'string') { + font = obj.Get('chart.title.font'); + } + + /** + * Draw the title itself + */ + RGraph.Text(context, font, size, centerx, vpos, text, vCenter, 'center', bgcolor != null, null, bgcolor, bold); + + // Reset the fill colour + context.fillStyle = oldColor; + } + + + /** + * This function returns the mouse position in relation to the canvas + * + * @param object e The event object. + */ + RGraph.getMouseXY = function (e) + { + var obj = (RGraph.isIE8() ? event.srcElement : e.target); + var x; + var y; + + if (RGraph.isIE8()) e = event; + + // Browser with offsetX and offsetY + if (typeof(e.offsetX) == 'number' && typeof(e.offsetY) == 'number') { + x = e.offsetX; + y = e.offsetY; + + // FF and other + } else { + x = 0; + y = 0; + + while (obj != document.body && obj) { + x += obj.offsetLeft; + y += obj.offsetTop; + + obj = obj.offsetParent; + } + + x = e.pageX - x; + y = e.pageY - y; + } + + return [x, y]; + } + + + /** + * This function returns a two element array of the canvas x/y position in + * relation to the page + * + * @param object canvas + */ + RGraph.getCanvasXY = function (canvas) + { + var x = 0; + var y = 0; + var obj = canvas; + + do { + + x += obj.offsetLeft; + y += obj.offsetTop; + + obj = obj.offsetParent; + + } while (obj && obj.tagName.toLowerCase() != 'body'); + + return [x, y]; + } + + + /** + * Registers a graph object (used when the canvas is redrawn) + * + * @param object obj The object to be registered + */ + RGraph.Register = function (obj) + { + var key = obj.id + '_' + obj.type; + + RGraph.objects[key] = obj; + } + + + /** + * Causes all registered objects to be redrawn + * + * @param string An optional string indicating which canvas is not to be redrawn + * @param string An optional color to use to clear the canvas + */ + RGraph.Redraw = function () + { + for (i in RGraph.objects) { + // TODO FIXME Maybe include more intense checking for whether the object is an RGraph object, eg obj.isRGraph == true ...? + if ( + typeof(i) == 'string' + && typeof(RGraph.objects[i]) == 'object' + && typeof(RGraph.objects[i].type) == 'string' + && RGraph.objects[i].isRGraph) { + + if (!arguments[0] || arguments[0] != RGraph.objects[i].id) { + RGraph.Clear(RGraph.objects[i].canvas, arguments[1] ? arguments[1] : null); + RGraph.objects[i].Draw(); + } + } + } + } + + + /** + * Loosly mimicks the PHP function print_r(); + */ + RGraph.pr = function (obj) + { + var str = ''; + var indent = (arguments[2] ? arguments[2] : ''); + + switch (typeof(obj)) { + case 'number': + if (indent == '') { + str+= 'Number: ' + } + str += String(obj); + break; + + case 'string': + if (indent == '') { + str+= 'String (' + obj.length + '):' + } + str += '"' + String(obj) + '"'; + break; + + case 'object': + // In case of null + if (obj == null) { + str += 'null'; + break; + } + + str += 'Object\n' + indent + '(\n'; + for (var i in obj) { + if (typeof(i) == 'string' || typeof(i) == 'number') { + str += indent + ' ' + i + ' => ' + RGraph.pr(obj[i], true, indent + ' ') + '\n'; + } + } + + var str = str + indent + ')'; + break; + + case 'function': + str += obj; + break; + + case 'boolean': + str += 'Boolean: ' + (obj ? 'true' : 'false'); + break; + } + + /** + * Finished, now either return if we're in a recursed call, or alert() + * if we're not. + */ + if (arguments[1]) { + return str; + } else { + alert(str); + } + } + + + /** + * The RGraph registry Set() function + * + * @param string name The name of the key + * @param mixed value The value to set + * @return mixed Returns the same value as you pass it + */ + RGraph.Registry.Set = function (name, value) + { + // Store the setting + RGraph.Registry.store[name] = value; + + // Don't really need to do this, but ho-hum + return value; + } + + + /** + * The RGraph registry Get() function + * + * @param string name The name of the particular setting to fetch + * @return mixed The value if exists, null otherwise + */ + RGraph.Registry.Get = function (name) + { + //return RGraph.Registry.store[name] == null ? null : RGraph.Registry.store[name]; + return RGraph.Registry.store[name]; + } + + + /** + * This function draws the background for the bar chart, line chart and scatter chart. + * + * @param object obj The graph object + */ + RGraph.background.Draw = function (obj) + { + var canvas = obj.canvas; + var context = obj.context; + var height = 0; + var gutterLeft = obj.Get('chart.gutter.left'); + var gutterRight = obj.Get('chart.gutter.right'); + var gutterTop = obj.Get('chart.gutter.top'); + var gutterBottom = obj.Get('chart.gutter.bottom'); + var variant = obj.Get('chart.variant'); + + context.fillStyle = obj.Get('chart.text.color'); + + // If it's a bar and 3D variant, translate + if (variant == '3d') { + context.save(); + context.translate(10, -5); + } + + // X axis title + if (typeof(obj.Get('chart.title.xaxis')) == 'string' && obj.Get('chart.title.xaxis').length) { + + var size = obj.Get('chart.text.size') + 2; + var font = obj.Get('chart.text.font'); + var bold = obj.Get('chart.title.xaxis.bold'); + + if (typeof(obj.Get('chart.title.xaxis.size')) == 'number') { + size = obj.Get('chart.title.xaxis.size'); + } + + if (typeof(obj.Get('chart.title.xaxis.font')) == 'string') { + font = obj.Get('chart.title.xaxis.font'); + } + + var hpos = ((obj.canvas.width - obj.gutterLeft - obj.gutterRight) / 2) + obj.gutterLeft; + var vpos = obj.canvas.height - obj.Get('chart.gutter.bottom') + 25; + + if (typeof(obj.Get('chart.title.xaxis.pos')) == 'number') { + vpos = obj.canvas.height - (gutterBottom * obj.Get('chart.title.xaxis.pos')); + } + + context.beginPath(); + RGraph.Text(context, + font, + size, + hpos, + vpos, + obj.Get('chart.title.xaxis'), + 'center', + 'center', + false, + false, + false, + bold); + context.fill(); + } + + // Y axis title + if (typeof(obj.Get('chart.title.yaxis')) == 'string' && obj.Get('chart.title.yaxis').length) { + + var size = obj.Get('chart.text.size') + 2; + var font = obj.Get('chart.text.font'); + var angle = 270; + var bold = obj.Get('chart.title.yaxis.bold'); + + if (typeof(obj.Get('chart.title.yaxis.pos')) == 'number') { + var yaxis_title_pos = obj.Get('chart.title.yaxis.pos') * obj.Get('chart.gutter.left'); + } else { + var yaxis_title_pos = ((obj.Get('chart.gutter.left') - 25) / obj.Get('chart.gutter.left')) * obj.Get('chart.gutter.left'); + } + + if (typeof(obj.Get('chart.title.yaxis.size')) == 'number') { + size = obj.Get('chart.title.yaxis.size'); + } + + if (typeof(obj.Get('chart.title.yaxis.font')) == 'string') { + font = obj.Get('chart.title.yaxis.font'); + } + + if (obj.Get('chart.title.yaxis.align') == 'right' || obj.Get('chart.title.yaxis.position') == 'right') { + angle = 90; + yaxis_title_pos = obj.canvas.width - yaxis_title_pos; + } else { + yaxis_title_pos = yaxis_title_pos; + } + + + context.beginPath(); + RGraph.Text(context, + font, + size, + yaxis_title_pos, + ((obj.canvas.height - obj.gutterTop - obj.gutterBottom) / 2) + obj.gutterTop, + obj.Get('chart.title.yaxis'), + 'center', + 'center', + false, + angle, + false, + bold); + context.fill(); + } + + obj.context.beginPath(); + + // Draw the horizontal bars + context.fillStyle = obj.Get('chart.background.barcolor1'); + height = (RGraph.GetHeight(obj) - gutterBottom); + + for (var i=gutterTop; i < height ; i+=80) { + obj.context.fillRect(gutterLeft, i, RGraph.GetWidth(obj) - gutterLeft - gutterRight, Math.min(40, RGraph.GetHeight(obj) - gutterBottom - i) ); + } + + context.fillStyle = obj.Get('chart.background.barcolor2'); + height = (RGraph.GetHeight(obj) - gutterBottom); + + for (var i= (40 + gutterTop); i < height; i+=80) { + obj.context.fillRect(gutterLeft, i, RGraph.GetWidth(obj) - gutterLeft - gutterRight, i + 40 > (RGraph.GetHeight(obj) - gutterBottom) ? RGraph.GetHeight(obj) - (gutterBottom + i) : 40); + } + + context.stroke(); + + + // Draw the background grid + if (obj.Get('chart.background.grid')) { + + // If autofit is specified, use the .numhlines and .numvlines along with the width to work + // out the hsize and vsize + if (obj.Get('chart.background.grid.autofit')) { + + /** + * Align the grid to the tickmarks + */ + if (obj.Get('chart.background.grid.autofit.align')) { + // Align the horizontal lines + obj.Set('chart.background.grid.autofit.numhlines', obj.Get('chart.ylabels.count')); + + // Align the vertical lines for the line + if (obj.type == 'line') { + if (obj.Get('chart.labels') && obj.Get('chart.labels').length) { + obj.Set('chart.background.grid.autofit.numvlines', obj.Get('chart.labels').length - 1); + } else { + obj.Set('chart.background.grid.autofit.numvlines', obj.data[0].length - 1); + } + + // Align the vertical lines for the bar + } else if (obj.type == 'bar' && obj.Get('chart.labels') && obj.Get('chart.labels').length) { + obj.Set('chart.background.grid.autofit.numvlines', obj.Get('chart.labels').length); + } + } + + var vsize = ((RGraph.GetWidth(obj) - gutterLeft - gutterRight)) / obj.Get('chart.background.grid.autofit.numvlines'); + var hsize = (RGraph.GetHeight(obj) - gutterTop - gutterBottom) / obj.Get('chart.background.grid.autofit.numhlines'); + + obj.Set('chart.background.grid.vsize', vsize); + obj.Set('chart.background.grid.hsize', hsize); + } + + context.beginPath(); + context.lineWidth = obj.Get('chart.background.grid.width') ? obj.Get('chart.background.grid.width') : 1; + context.strokeStyle = obj.Get('chart.background.grid.color'); + + // Draw the horizontal lines + if (obj.Get('chart.background.grid.hlines')) { + height = (RGraph.GetHeight(obj) - gutterBottom) + for (y=gutterTop; y<height; y+=obj.Get('chart.background.grid.hsize')) { + context.moveTo(gutterLeft, y); + context.lineTo(RGraph.GetWidth(obj) - gutterRight, y); + } + } + + if (obj.Get('chart.background.grid.vlines')) { + // Draw the vertical lines + var width = (RGraph.GetWidth(obj) - gutterRight) + for (x=gutterLeft; x<=width; x+=obj.Get('chart.background.grid.vsize')) { + context.moveTo(x, gutterTop); + context.lineTo(x, RGraph.GetHeight(obj) - gutterBottom); + } + } + + if (obj.Get('chart.background.grid.border')) { + // Make sure a rectangle, the same colour as the grid goes around the graph + context.strokeStyle = obj.Get('chart.background.grid.color'); + context.strokeRect(gutterLeft, gutterTop, RGraph.GetWidth(obj) - gutterLeft - gutterRight, RGraph.GetHeight(obj) - gutterTop - gutterBottom); + } + } + + context.stroke(); + + // If it's a bar and 3D variant, translate + if (variant == '3d') { + context.restore(); + } + + // Draw the title if one is set + if ( typeof(obj.Get('chart.title')) == 'string') { + + if (obj.type == 'gantt') { + gutterTop -= 10; + } + + RGraph.DrawTitle(canvas, + obj.Get('chart.title'), + gutterTop, + null, + obj.Get('chart.title.size') ? obj.Get('chart.title.size') : obj.Get('chart.text.size') + 2); + } + + context.stroke(); + } + + + /** + * Returns the day number for a particular date. Eg 1st February would be 32 + * + * @param object obj A date object + * @return int The day number of the given date + */ + RGraph.GetDays = function (obj) + { + var year = obj.getFullYear(); + var days = obj.getDate(); + var month = obj.getMonth(); + + if (month == 0) return days; + if (month >= 1) days += 31; + if (month >= 2) days += 28; + + // Leap years. Crude, but if this code is still being used + // when it stops working, then you have my permission to shoot + // me. Oh, you won't be able to - I'll be dead... + if (year >= 2008 && year % 4 == 0) days += 1; + + if (month >= 3) days += 31; + if (month >= 4) days += 30; + if (month >= 5) days += 31; + if (month >= 6) days += 30; + if (month >= 7) days += 31; + if (month >= 8) days += 31; + if (month >= 9) days += 30; + if (month >= 10) days += 31; + if (month >= 11) days += 30; + + return days; + } + + + + + + + + + + + + + + + + /** + * Draws the graph key (used by various graphs) + * + * @param object obj The graph object + * @param array key An array of the texts to be listed in the key + * @param colors An array of the colors to be used + */ + RGraph.DrawKey = function (obj, key, colors) + { + var canvas = obj.canvas; + var context = obj.context; + context.lineWidth = 1; + + context.beginPath(); + + /** + * Key positioned in the gutter + */ + var keypos = obj.Get('chart.key.position'); + var textsize = obj.Get('chart.text.size'); + + /** + * Change the older chart.key.vpos to chart.key.position.y + */ + if (typeof(obj.Get('chart.key.vpos')) == 'number') { + obj.Set('chart.key.position.y', obj.Get('chart.key.vpos') * this.Get('chart.gutter.top') ); + } + + /** + * Account for null values in the key + */ + var key_non_null = []; + var colors_non_null = []; + for (var i=0; i<key.length; ++i) { + if (key[i] != null) { + colors_non_null.push(colors[i]); + key_non_null.push(key[i]); + } + } + + key = key_non_null; + colors = colors_non_null; + + + + if (keypos && keypos == 'gutter') { + + RGraph.DrawKey_gutter(obj, key, colors); + + + /** + * In-graph style key + */ + } else if (keypos && keypos == 'graph') { + + RGraph.DrawKey_graph(obj, key, colors); + + } else { + alert('[COMMON] (' + obj.id + ') Unknown key position: ' + keypos); + } + } + + + + + + /** + * This does the actual drawing of the key when it's in the graph + * + * @param object obj The graph object + * @param array key The key items to draw + * @param array colors An aray of colors that the key will use + */ + RGraph.DrawKey_graph = function (obj, key, colors) + { + var canvas = obj.canvas; + var context = obj.context; + var text_size = typeof(obj.Get('chart.key.text.size')) == 'number' ? obj.Get('chart.key.text.size') : obj.Get('chart.text.size'); + var text_font = obj.Get('chart.text.font'); + + var gutterLeft = obj.Get('chart.gutter.left'); + var gutterRight = obj.Get('chart.gutter.right'); + var gutterTop = obj.Get('chart.gutter.top'); + var gutterBottom = obj.Get('chart.gutter.bottom'); + + var hpos = obj.Get('chart.yaxispos') == 'right' ? gutterLeft + 10 : RGraph.GetWidth(obj) - gutterRight - 10; + var vpos = gutterTop + 10; + var title = obj.Get('chart.title'); + var blob_size = text_size; // The blob of color + var hmargin = 8; // This is the size of the gaps between the blob of color and the text + var vmargin = 4; // This is the vertical margin of the key + var fillstyle = obj.Get('chart.key.background'); + var strokestyle = '#333'; + var height = 0; + var width = 0; + + + obj.coordsKey = []; + + + // Need to set this so that measuring the text works out OK + context.font = text_size + 'pt ' + obj.Get('chart.text.font'); + + // Work out the longest bit of text + for (i=0; i<key.length; ++i) { + width = Math.max(width, context.measureText(key[i]).width); + } + + width += 5; + width += blob_size; + width += 5; + width += 5; + width += 5; + + /** + * Now we know the width, we can move the key left more accurately + */ + if ( obj.Get('chart.yaxispos') == 'left' + || (obj.type == 'pie' && !obj.Get('chart.yaxispos')) + || (obj.type == 'hbar' && !obj.Get('chart.yaxispos')) + || (obj.type == 'hbar' && obj.Get('chart.yaxispos') == 'center') + || (obj.type == 'rscatter' && !obj.Get('chart.yaxispos')) + || (obj.type == 'radar' && !obj.Get('chart.yaxispos')) + || (obj.type == 'rose' && !obj.Get('chart.yaxispos')) + || (obj.type == 'funnel' && !obj.Get('chart.yaxispos')) + || (obj.type == 'vprogress' && !obj.Get('chart.yaxispos')) + || (obj.type == 'hprogress' && !obj.Get('chart.yaxispos')) + ) { + + hpos -= width; + } + + /** + * Horizontal alignment + */ + if (typeof(obj.Get('chart.key.halign')) == 'string') { + if (obj.Get('chart.key.halign') == 'left') { + hpos = gutterLeft + 10; + } else if (obj.Get('chart.key.halign') == 'right') { + hpos = RGraph.GetWidth(obj) - gutterRight - width; + } + } + + /** + * Specific location coordinates + */ + if (typeof(obj.Get('chart.key.position.x')) == 'number') { + hpos = obj.Get('chart.key.position.x'); + } + + if (typeof(obj.Get('chart.key.position.y')) == 'number') { + vpos = obj.Get('chart.key.position.y'); + } + + + // Stipulate the shadow for the key box + if (obj.Get('chart.key.shadow')) { + context.shadowColor = obj.Get('chart.key.shadow.color'); + context.shadowBlur = obj.Get('chart.key.shadow.blur'); + context.shadowOffsetX = obj.Get('chart.key.shadow.offsetx'); + context.shadowOffsetY = obj.Get('chart.key.shadow.offsety'); + } + + + + + // Draw the box that the key resides in + context.beginPath(); + context.fillStyle = obj.Get('chart.key.background'); + context.strokeStyle = 'black'; + + + if (arguments[3] != false) { + + context.lineWidth = obj.Get('chart.key.linewidth') ? obj.Get('chart.key.linewidth') : 1; + + // The older square rectangled key + if (obj.Get('chart.key.rounded') == true) { + context.beginPath(); + context.strokeStyle = strokestyle; + RGraph.strokedCurvyRect(context, hpos, vpos, width - 5, 5 + ( (text_size + 5) * RGraph.getKeyLength(key)),4); + + context.stroke(); + context.fill(); + + RGraph.NoShadow(obj); + + } else { + context.strokeRect(hpos, vpos, width - 5, 5 + ( (text_size + 5) * RGraph.getKeyLength(key))); + context.fillRect(hpos, vpos, width - 5, 5 + ( (text_size + 5) * RGraph.getKeyLength(key))); + } + } + + RGraph.NoShadow(obj); + + context.beginPath(); + + // Draw the labels given + for (var i=key.length - 1; i>=0; i--) { + + var j = Number(i) + 1; + + // Draw the blob of color + if (obj.Get('chart.key.color.shape') == 'circle') { + context.beginPath(); + context.strokeStyle = 'rgba(0,0,0,0)'; + context.fillStyle = colors[i]; + context.arc(hpos + 5 + (blob_size / 2), vpos + (5 * j) + (text_size * j) - text_size + (blob_size / 2), blob_size / 2, 0, 6.26, 0); + context.fill(); + + } else if (obj.Get('chart.key.color.shape') == 'line') { + context.beginPath(); + context.strokeStyle = colors[i]; + context.moveTo(hpos + 5, vpos + (5 * j) + (text_size * j) - text_size + (blob_size / 2)); + context.lineTo(hpos + blob_size + 5, vpos + (5 * j) + (text_size * j) - text_size + (blob_size / 2)); + context.stroke(); + + } else { + context.fillStyle = colors[i]; + context.fillRect(hpos + 5, vpos + (5 * j) + (text_size * j) - text_size, text_size, text_size + 1); + } + + context.beginPath(); + + context.fillStyle = 'black'; + + RGraph.Text(context, + text_font, + text_size, + hpos + blob_size + 5 + 5, + vpos + (5 * j) + (text_size * j), + key[i]); + + if (obj.Get('chart.key.interactive')) { + + var px = hpos + 5; + var py = vpos + (5 * j) + (text_size * j) - text_size; + var pw = width - 5 - 5 - 5; + var ph = text_size; + + + obj.coordsKey.push([px, py, pw, ph]); + } + + } + context.fill(); + + /** + * Install the interactivity event handler + */ + if (obj.Get('chart.key.interactive')) { + + RGraph.Register(obj); + + var key_mousemove = function (e) + { + var obj = e.target.__object__; + var canvas = obj.canvas; + var context = obj.context; + var mouseCoords = RGraph.getMouseXY(e); + var mouseX = mouseCoords[0]; + var mouseY = mouseCoords[1]; + + for (var i=0; i<obj.coordsKey.length; ++i) { + + var px = obj.coordsKey[i][0]; + var py = obj.coordsKey[i][1]; + var pw = obj.coordsKey[i][2]; + var ph = obj.coordsKey[i][3]; + + if ( mouseX > (px-2) && mouseX < (px + pw + 2) && mouseY > (py - 2) && mouseY < (py + ph + 2) ) { + + // Necessary? + //var index = obj.coordsKey.length - i - 1; + + canvas.style.cursor = 'pointer'; + + + + return; + } + + canvas.style.cursor = 'default'; + + if (typeof(obj.Get('chart.tooltips')) == 'object' && typeof(canvas_onmousemove_func) == 'function') { + canvas_onmousemove_func(e); + } + } + } + canvas.addEventListener('mousemove', key_mousemove, false); + RGraph.AddEventListener(canvas.id, 'mousemove', key_mousemove); + + + var key_click = function (e) + { + RGraph.Redraw(); + + var obj = e.target.__object__; + var canvas = obj.canvas; + var context = obj.context; + var mouseCoords = RGraph.getMouseXY(e); + var mouseX = mouseCoords[0]; + var mouseY = mouseCoords[1]; + + /** + * Hand over highlighting the pie chart key to another function + */ + if (obj.type == 'pie') { + return key_onclick_pie(e); + } + + RGraph.DrawKey(obj, obj.Get('chart.key'), obj.Get('chart.colors')); + + for (var i=0; i<obj.coordsKey.length; ++i) { + + var px = obj.coordsKey[i][0]; + var py = obj.coordsKey[i][1]; + var pw = obj.coordsKey[i][2]; + var ph = obj.coordsKey[i][3]; + + if ( mouseX > px && mouseX < (px + pw) && mouseY > py && mouseY < (py + ph) ) { + + /** + * Loop thru all objects. If they're objects with + * chart.key.interactive enabled, redraw them + */ + for (j in RGraph.objects) { + if (RGraph.objects[j] && RGraph.objects[j].Get && RGraph.objects[j].Get('chart.key.interactive')) { + + if (RGraph.objects[j].Get('chart.exploded')) { + RGraph.objects[j].Set('chart.exploded', []); + } + + RGraph.Clear(RGraph.objects[j].canvas); + RGraph.objects[j].Draw(); + } + } + var index = obj.coordsKey.length - i - 1; + + // HIGHLIGHT THE LINE HERE + context.beginPath(); + context.fillStyle = 'rgba(255,255,255,0.9)'; + context.fillRect(obj.Get('chart.gutter.left'),obj.Get('chart.gutter.top'),canvas.width - obj.Get('chart.gutter.left') - obj.Get('chart.gutter.right'),canvas.height - obj.Get('chart.gutter.top') - obj.Get('chart.gutter.bottom')); + context.fill(); + + context.beginPath(); + context.strokeStyle = obj.Get('chart.colors')[index]; + context.lineWidth = obj.Get('chart.linewidth'); + if (obj.coords2 &&obj.coords2[index] &&obj.coords2[index].length) { + for (var j=0; j<obj.coords2[index].length; ++j) { + + var x = obj.coords2[index][j][0]; + var y = obj.coords2[index][j][1]; + + if (j == 0) { + context.moveTo(x, y); + } else { + context.lineTo(x, y); + } + } + } + context.stroke(); + + + context.lineWidth = 1; + context.beginPath(); + context.strokeStyle = 'black'; + context.fillStyle = 'white'; + + RGraph.SetShadow(obj, 'rgba(0,0,0,0.5)', 0,0,10); + + context.strokeRect(px - 2, py - 2, pw + 4, ph + 4); + context.fillRect(px - 2, py - 2, pw + 4, ph + 4); + + context.stroke(); + context.fill(); + + + RGraph.NoShadow(obj); + + + context.beginPath(); + context.fillStyle = obj.Get('chart.colors')[index]; + context.fillRect(px, py, blob_size, blob_size); + context.fill(); + + context.beginPath(); + context.fillStyle = obj.Get('chart.text.color'); + + RGraph.Text(context, + obj.Get('chart.text.font'), + obj.Get('chart.text.size'), + px + 5 + blob_size, + py + ph, + obj.Get('chart.key')[obj.Get('chart.key').length - i - 1] + ); + context.fill(); + + + canvas.style.cursor = 'pointer'; + + e.cancelBubble = true; + if (e.stopPropagation) e.stopPropagation(); + } + + canvas.style.cursor = 'default'; + } + } + canvas.addEventListener('click', key_click, false); + RGraph.AddEventListener(canvas.id, 'click', key_click); + + /** + * This function handles the Pie chart interactive key (the click event) + * + * @param object e The event object + */ + var key_onclick_pie = function (e) + { + var canvas = e.target; + var context = canvas.getContext('2d'); + var obj = e.target.__object__; + var mouseCoords = RGraph.getMouseXY(e); + var mouseX = mouseCoords[0]; + var mouseY = mouseCoords[1]; + + //RGraph.DrawKey(obj, obj.Get('chart.key'), obj.Get('chart.colors')); + + for (var i=0; i<obj.coordsKey.length; ++i) { + + var px = obj.coordsKey[i][0]; + var py = obj.coordsKey[i][1]; + var pw = obj.coordsKey[i][2]; + var ph = obj.coordsKey[i][3]; + + if ( mouseX > (px - 2) && mouseX < (px + pw + 2) && mouseY > (py - 2) && mouseY < (py + ph + 2) ) { + + var index = obj.coordsKey.length - i - 1; + + + e.cancelBubble = true; + if (e.stopPropagation) e.stopPropagation(); + + + + // ========================================================================== + var highlight_key = function () + { + context.lineWidth = 1; + context.beginPath(); + context.strokeStyle = 'black'; + context.fillStyle = 'white'; + + RGraph.SetShadow(obj, 'rgba(0,0,0,0.5)', 0,0,10); + + context.strokeRect(px - 2, py - 2, pw + 4, ph + 4); + context.fillRect(px - 2, py - 2, pw + 4, ph + 4); + + context.stroke(); + context.fill(); + + + RGraph.NoShadow(obj); + + + context.beginPath(); + context.fillStyle = obj.Get('chart.colors')[index]; + context.fillRect(px, py, blob_size, blob_size); + context.fill(); + + context.beginPath(); + context.fillStyle = obj.Get('chart.text.color'); + + RGraph.Text(context, + obj.Get('chart.text.font'), + obj.Get('chart.text.size'), + px + 5 + blob_size, + py + ph, + obj.Get('chart.key')[obj.Get('chart.key').length - i - 1] + ); + context.fill(); + } + // ========================================================================== + + setTimeout(function (){obj.Get('chart.exploded')[index] = 2;RGraph.Clear(obj.canvas);obj.Draw();highlight_key();}, 20); + setTimeout(function (){obj.Get('chart.exploded')[index] = 4;RGraph.Clear(obj.canvas);obj.Draw();highlight_key();}, 40); + setTimeout(function (){obj.Get('chart.exploded')[index] = 6;RGraph.Clear(obj.canvas);obj.Draw();highlight_key();}, 60); + setTimeout(function (){obj.Get('chart.exploded')[index] = 8;RGraph.Clear(obj.canvas);obj.Draw();highlight_key();}, 80); + setTimeout(function (){obj.Get('chart.exploded')[index] = 10;RGraph.Clear(obj.canvas);obj.Draw();highlight_key();}, 100); + setTimeout(function (){obj.Get('chart.exploded')[index] = 12;RGraph.Clear(obj.canvas);obj.Draw();highlight_key();}, 120); + setTimeout(function (){obj.Get('chart.exploded')[index] = 14;RGraph.Clear(obj.canvas);obj.Draw();highlight_key();}, 140); + setTimeout(function (){obj.Get('chart.exploded')[index] = 16;RGraph.Clear(obj.canvas);obj.Draw();highlight_key();}, 160); + setTimeout(function (){obj.Get('chart.exploded')[index] = 18;RGraph.Clear(obj.canvas);obj.Draw();highlight_key();}, 180); + setTimeout(function (){obj.Get('chart.exploded')[index] = 20;RGraph.Clear(obj.canvas);obj.Draw();highlight_key();}, 200); + + /** + * This is here so that when calling the Redraw function the Pie chart + * is drawn unexploded + */ + setTimeout(function (){obj.Get('chart.exploded')[index] = 0;}, 250); + + return; + } else { + e.cancelBubble = true; + if (e.stopPropagation) e.stopPropagation(); + } + } + + //obj.Set('chart.exploded', []); + RGraph.Clear(obj.canvas); + obj.Draw(); + } + + /** + * The window onclick for the pie chart + */ + var key_interactive_click = function (e) + { + if (obj && obj.type == 'pie') { + obj.Set('chart.exploded', []); + } + RGraph.Clear(obj.canvas); + obj.Draw(); + } + window.addEventListener('click', key_interactive_click, false); + RGraph.AddEventListener('window_' + canvas.id, 'click', key_interactive_click); + } + } + + + + + + + /** + * This does the actual drawing of the key when it's in the gutter + * + * @param object obj The graph object + * @param array key The key items to draw + * @param array colors An aray of colors that the key will use + */ + RGraph.DrawKey_gutter = function (obj, key, colors) + { + var canvas = obj.canvas; + var context = obj.context; + var text_size = typeof(obj.Get('chart.key.text.size')) == 'number' ? obj.Get('chart.key.text.size') : obj.Get('chart.text.size'); + var text_font = obj.Get('chart.text.font'); + + var gutterLeft = obj.Get('chart.gutter.left'); + var gutterRight = obj.Get('chart.gutter.right'); + var gutterTop = obj.Get('chart.gutter.top'); + var gutterBottom = obj.Get('chart.gutter.bottom'); + + var hpos = RGraph.GetWidth(obj) / 2; + var vpos = (gutterTop / 2) - 5; + var title = obj.Get('chart.title'); + var blob_size = text_size; // The blob of color + var hmargin = 8; // This is the size of the gaps between the blob of color and the text + var vmargin = 4; // This is the vertical margin of the key + var fillstyle = obj.Get('chart.key.background'); + var strokestyle = 'black'; + var length = 0; + + + + // Need to work out the length of the key first + context.font = text_size + 'pt ' + text_font; + for (i=0; i<key.length; ++i) { + length += hmargin; + length += blob_size; + length += hmargin; + length += context.measureText(key[i]).width; + } + length += hmargin; + + + + + /** + * Work out hpos since in the Pie it isn't necessarily dead center + */ + if (obj.type == 'pie') { + if (obj.Get('chart.align') == 'left') { + var hpos = obj.radius + gutterLeft; + + } else if (obj.Get('chart.align') == 'right') { + var hpos = obj.canvas.width - obj.radius - gutterRight; + + } else { + hpos = canvas.width / 2; + } + } + + + + + + /** + * This makes the key centered + */ + hpos -= (length / 2); + + + /** + * Override the horizontal/vertical positioning + */ + if (typeof(obj.Get('chart.key.position.x')) == 'number') { + hpos = obj.Get('chart.key.position.x'); + } + if (typeof(obj.Get('chart.key.position.y')) == 'number') { + vpos = obj.Get('chart.key.position.y'); + } + + + + /** + * Draw the box that the key sits in + */ + if (obj.Get('chart.key.position.gutter.boxed')) { + + if (obj.Get('chart.key.shadow')) { + context.shadowColor = obj.Get('chart.key.shadow.color'); + context.shadowBlur = obj.Get('chart.key.shadow.blur'); + context.shadowOffsetX = obj.Get('chart.key.shadow.offsetx'); + context.shadowOffsetY = obj.Get('chart.key.shadow.offsety'); + } + + + context.beginPath(); + context.fillStyle = fillstyle; + context.strokeStyle = strokestyle; + + if (obj.Get('chart.key.rounded')) { + RGraph.strokedCurvyRect(context, hpos, vpos - vmargin, length, text_size + vmargin + vmargin) + // Odd... RGraph.filledCurvyRect(context, hpos, vpos - vmargin, length, text_size + vmargin + vmargin); + } else { + context.strokeRect(hpos, vpos - vmargin, length, text_size + vmargin + vmargin); + context.fillRect(hpos, vpos - vmargin, length, text_size + vmargin + vmargin); + } + + context.stroke(); + context.fill(); + + + RGraph.NoShadow(obj); + } + + + /** + * Draw the blobs of color and the text + */ + for (var i=0, pos=hpos; i<key.length; ++i) { + pos += hmargin; + + // Draw the blob of color - line + if (obj.Get('chart.key.color.shape') =='line') { + + context.beginPath(); + context.strokeStyle = colors[i]; + context.moveTo(pos, vpos + (blob_size / 2)); + context.lineTo(pos + blob_size, vpos + (blob_size / 2)); + context.stroke(); + + // Circle + } else if (obj.Get('chart.key.color.shape') == 'circle') { + + context.beginPath(); + context.fillStyle = colors[i]; + context.moveTo(pos, vpos + (blob_size / 2)); + context.arc(pos + (blob_size / 2), vpos + (blob_size / 2), (blob_size / 2), 0, 6.28, 0); + context.fill(); + + + } else { + + context.beginPath(); + context.fillStyle = colors[i]; + context.fillRect(pos, vpos, blob_size, blob_size); + context.fill(); + } + + pos += blob_size; + + pos += hmargin; + + context.beginPath(); + context.fillStyle = 'black'; + RGraph.Text(context, text_font, text_size, pos, vpos + text_size - 1, key[i]); + context.fill(); + pos += context.measureText(key[i]).width; + } + } + + + /** + * Returns the key length, but accounts for null values + * + * @param array key The key elements + */ + RGraph.getKeyLength = function (key) + { + var len = 0; + + for (var i=0; i<key.length; ++i) { + if (key[i] != null) { + ++len; + } + } + + return len; + } + + + + + + + /** + * A shortcut for RGraph.pr() + */ + function pd(variable) + { + RGraph.pr(variable); + } + + function p(variable) + { + RGraph.pr(variable); + } + + /** + * A shortcut for console.log - as used by Firebug and Chromes console + */ + function cl (variable) + { + return console.log(variable); + } + + + /** + * Makes a clone of an object + * + * @param obj val The object to clone + */ + RGraph.array_clone = function (obj) + { + if(obj == null || typeof(obj) != 'object') { + return obj; + } + + var temp = []; + + for (var i=0;i<obj.length; ++i) { + + if (typeof(obj[i]) == 'number') { + temp[i] = (function (arg) {return Number(arg);})(obj[i]); + } else if (typeof(obj[i]) == 'string') { + temp[i] = (function (arg) {return String(arg);})(obj[i]); + } else { + temp[i] = RGraph.array_clone(obj[i]); + } + } + + return temp; + } + + + /** + * This function reverses an array + */ + RGraph.array_reverse = function (arr) + { + var newarr = []; + + for (var i=arr.length - 1; i>=0; i--) { + newarr.push(arr[i]); + } + + return newarr; + } + + + /** + * Formats a number with thousand seperators so it's easier to read + * + * @param integer num The number to format + * @param string The (optional) string to prepend to the string + * @param string The (optional) string to ap + * pend to the string + * @return string The formatted number + */ + RGraph.number_format = function (obj, num) + { + var i; + var prepend = arguments[2] ? String(arguments[2]) : ''; + var append = arguments[3] ? String(arguments[3]) : ''; + var output = ''; + var decimal = ''; + var decimal_seperator = obj.Get('chart.scale.point') ? obj.Get('chart.scale.point') : '.'; + var thousand_seperator = obj.Get('chart.scale.thousand') ? obj.Get('chart.scale.thousand') : ','; + RegExp.$1 = ''; + var i,j; + +if (typeof(obj.Get('chart.scale.formatter')) == 'function') { + return obj.Get('chart.scale.formatter')(obj, num); +} + + // Ignore the preformatted version of "1e-2" + if (String(num).indexOf('e') > 0) { + return String(prepend + String(num) + append); + } + + // We need then number as a string + num = String(num); + + // Take off the decimal part - we re-append it later + if (num.indexOf('.') > 0) { + num = num.replace(/\.(.*)/, ''); + decimal = RegExp.$1; + } + + // Thousand seperator + //var seperator = arguments[1] ? String(arguments[1]) : ','; + var seperator = thousand_seperator; + + /** + * Work backwards adding the thousand seperators + */ + var foundPoint; + for (i=(num.length - 1),j=0; i>=0; j++,i--) { + var character = num.charAt(i); + + if ( j % 3 == 0 && j != 0) { + output += seperator; + } + + /** + * Build the output + */ + output += character; + } + + /** + * Now need to reverse the string + */ + var rev = output; + output = ''; + for (i=(rev.length - 1); i>=0; i--) { + output += rev.charAt(i); + } + + // Tidy up + output = output.replace(/^-,/, '-'); + + // Reappend the decimal + if (decimal.length) { + output = output + decimal_seperator + decimal; + decimal = ''; + RegExp.$1 = ''; + } + + // Minor bugette + if (output.charAt(0) == '-') { + output = output.replace(/-/, ''); + prepend = '-' + prepend; + } + + return prepend + output + append; + } + + + /** + * Draws horizontal coloured bars on something like the bar, line or scatter + */ + RGraph.DrawBars = function (obj) + { + var hbars = obj.Get('chart.background.hbars'); + + /** + * Draws a horizontal bar + */ + obj.context.beginPath(); + + for (i=0; i<hbars.length; ++i) { + + // If null is specified as the "height", set it to the upper max value + if (hbars[i][1] == null) { + hbars[i][1] = obj.max; + + // If the first index plus the second index is greater than the max value, adjust accordingly + } else if (hbars[i][0] + hbars[i][1] > obj.max) { + hbars[i][1] = obj.max - hbars[i][0]; + } + + + // If height is negative, and the abs() value is greater than .max, use a negative max instead + if (Math.abs(hbars[i][1]) > obj.max) { + hbars[i][1] = -1 * obj.max; + } + + + // If start point is greater than max, change it to max + if (Math.abs(hbars[i][0]) > obj.max) { + hbars[i][0] = obj.max; + } + + // If start point plus height is less than negative max, use the negative max plus the start point + if (hbars[i][0] + hbars[i][1] < (-1 * obj.max) ) { + hbars[i][1] = -1 * (obj.max + hbars[i][0]); + } + + // If the X axis is at the bottom, and a negative max is given, warn the user + if (obj.Get('chart.xaxispos') == 'bottom' && (hbars[i][0] < 0 || (hbars[i][1] + hbars[i][1] < 0)) ) { + alert('[' + obj.type.toUpperCase() + ' (ID: ' + obj.id + ') BACKGROUND HBARS] You have a negative value in one of your background hbars values, whilst the X axis is in the center'); + } + + var ystart = (obj.grapharea - ((hbars[i][0] / obj.max) * obj.grapharea)); + var height = (Math.min(hbars[i][1], obj.max - hbars[i][0]) / obj.max) * obj.grapharea; + + // Account for the X axis being in the center + if (obj.Get('chart.xaxispos') == 'center') { + ystart /= 2; + height /= 2; + } + + ystart += obj.Get('chart.gutter.top') + + var x = obj.Get('chart.gutter.left'); + var y = ystart - height; + var w = obj.canvas.width - obj.Get('chart.gutter.left') - obj.Get('chart.gutter.right'); + var h = height; + + // Accommodate Opera :-/ + if (navigator.userAgent.indexOf('Opera') != -1 && obj.Get('chart.xaxispos') == 'center' && h < 0) { + h *= -1; + y = y - h; + } + + /** + * Account for X axis at the top + */ + if (obj.Get('chart.xaxispos') == 'top') { + y = obj.canvas.height - y; + h *= -1; + } + + obj.context.fillStyle = hbars[i][2]; + obj.context.fillRect(x, y, w, h); + } + + obj.context.fill(); + } + + + /** + * Draws in-graph labels. + * + * @param object obj The graph object + */ + RGraph.DrawInGraphLabels = function (obj) + { + var canvas = obj.canvas; + var context = obj.context; + var labels = obj.Get('chart.labels.ingraph'); + var labels_processed = []; + + // Defaults + var fgcolor = 'black'; + var bgcolor = 'white'; + var direction = 1; + + if (!labels) { + return; + } + + /** + * Preprocess the labels array. Numbers are expanded + */ + for (var i=0; i<labels.length; ++i) { + if (typeof(labels[i]) == 'number') { + for (var j=0; j<labels[i]; ++j) { + labels_processed.push(null); + } + } else if (typeof(labels[i]) == 'string' || typeof(labels[i]) == 'object') { + labels_processed.push(labels[i]); + + } else { + labels_processed.push(''); + } + } + + /** + * Turn off any shadow + */ + RGraph.NoShadow(obj); + + if (labels_processed && labels_processed.length > 0) { + + for (var i=0; i<labels_processed.length; ++i) { + if (labels_processed[i]) { + var coords = obj.coords[i]; + + if (coords && coords.length > 0) { + var x = (obj.type == 'bar' ? coords[0] + (coords[2] / 2) : coords[0]); + var y = (obj.type == 'bar' ? coords[1] + (coords[3] / 2) : coords[1]); + var length = typeof(labels_processed[i][4]) == 'number' ? labels_processed[i][4] : 25; + + + context.beginPath(); + context.fillStyle = 'black'; + context.strokeStyle = 'black'; + + + if (obj.type == 'bar') { + + /** + * X axis at the top + */ + if (obj.Get('chart.xaxispos') == 'top') { + length *= -1; + } + + if (obj.Get('chart.variant') == 'dot') { + context.moveTo(x, obj.coords[i][1] - 5); + context.lineTo(x, obj.coords[i][1] - 5 - length); + + var text_x = x; + var text_y = obj.coords[i][1] - 5 - length; + + } else if (obj.Get('chart.variant') == 'arrow') { + context.moveTo(x, obj.coords[i][1] - 5); + context.lineTo(x, obj.coords[i][1] - 5 - length); + + var text_x = x; + var text_y = obj.coords[i][1] - 5 - length; + + } else { + + context.arc(x, y, 2.5, 0, 6.28, 0); + context.moveTo(x, y); + context.lineTo(x, y - length); + + var text_x = x; + var text_y = y - length; + } + + context.stroke(); + context.fill(); + + + } else if (obj.type == 'line') { + + if ( + typeof(labels_processed[i]) == 'object' && + typeof(labels_processed[i][3]) == 'number' && + labels_processed[i][3] == -1 + ) { + + context.moveTo(x, y + 5); + context.lineTo(x, y + 5 + length); + + context.stroke(); + context.beginPath(); + + // This draws the arrow + context.moveTo(x, y + 5); + context.lineTo(x - 3, y + 10); + context.lineTo(x + 3, y + 10); + context.closePath(); + + var text_x = x; + var text_y = y + 5 + length; + + } else { + + var text_x = x; + var text_y = y - 5 - length; + + context.moveTo(x, y - 5); + context.lineTo(x, y - 5 - length); + + context.stroke(); + context.beginPath(); + + // This draws the arrow + context.moveTo(x, y - 5); + context.lineTo(x - 3, y - 10); + context.lineTo(x + 3, y - 10); + context.closePath(); + } + + context.fill(); + } + + // Taken out on the 10th Nov 2010 - unnecessary + //var width = context.measureText(labels[i]).width; + + context.beginPath(); + + // Fore ground color + context.fillStyle = (typeof(labels_processed[i]) == 'object' && typeof(labels_processed[i][1]) == 'string') ? labels_processed[i][1] : 'black'; + + RGraph.Text(context, + obj.Get('chart.text.font'), + obj.Get('chart.text.size'), + text_x, + text_y, + (typeof(labels_processed[i]) == 'object' && typeof(labels_processed[i][0]) == 'string') ? labels_processed[i][0] : labels_processed[i], + 'bottom', + 'center', + true, + null, + (typeof(labels_processed[i]) == 'object' && typeof(labels_processed[i][2]) == 'string') ? labels_processed[i][2] : 'white'); + context.fill(); + } + } + } + } + } + + + /** + * This function "fills in" key missing properties that various implementations lack + * + * @param object e The event object + */ + RGraph.FixEventObject = function (e) + { + if (RGraph.isIE8()) { + + var e = event; + + e.pageX = (event.clientX + document.body.scrollLeft); + e.pageY = (event.clientY + document.body.scrollTop); + e.target = event.srcElement; + + if (!document.body.scrollTop && document.documentElement.scrollTop) { + e.pageX += parseInt(document.documentElement.scrollLeft); + e.pageY += parseInt(document.documentElement.scrollTop); + } + } + + // This is mainly for FF which doesn't provide offsetX + if (typeof(e.offsetX) == 'undefined' && typeof(e.offsetY) == 'undefined') { + var coords = RGraph.getMouseXY(e); + e.offsetX = coords[0]; + e.offsetY = coords[1]; + } + + // Any browser that doesn't implement stopPropagation() (MSIE) + if (!e.stopPropagation) { + e.stopPropagation = function () {window.event.cancelBubble = true;} + } + + return e; + } + + + /** + * Draw crosshairs if enabled + * + * @param object obj The graph object (from which we can get the context and canvas as required) + */ + RGraph.DrawCrosshairs = function (obj) + { + if (obj.Get('chart.crosshairs')) { + var canvas = obj.canvas; + var context = obj.context; + + // 5th November 2010 - removed now that tooltips are DOM2 based. + //if (obj.Get('chart.tooltips') && obj.Get('chart.tooltips').length > 0) { + //alert('[' + obj.type.toUpperCase() + '] Sorry - you cannot have crosshairs enabled with tooltips! Turning off crosshairs...'); + //obj.Set('chart.crosshairs', false); + //return; + //} + + //canvas.onmousemove = function (e) + var crosshairs_mousemove = function (e) + { + var e = RGraph.FixEventObject(e); + var canvas = obj.canvas; + var context = obj.context; + var width = canvas.width; + var height = canvas.height; + var adjustments = obj.Get('chart.tooltips.coords.adjust'); + + + var gutterLeft = obj.Get('chart.gutter.left'); + var gutterRight = obj.Get('chart.gutter.right'); + var gutterTop = obj.Get('chart.gutter.top'); + var gutterBottom = obj.Get('chart.gutter.bottom'); + + var mouseCoords = RGraph.getMouseXY(e); + var x = mouseCoords[0]; + var y = mouseCoords[1]; + + if (typeof(adjustments) == 'object' && adjustments[0] && adjustments[1]) { + x = x - adjustments[0]; + y = y - adjustments[1]; + } + + RGraph.Clear(canvas); + obj.Draw(); + + if ( x >= gutterLeft + && y >= gutterTop + && x <= (width - gutterRight) + && y <= (height - gutterBottom) + ) { + + var linewidth = obj.Get('chart.crosshairs.linewidth'); + context.lineWidth = linewidth ? linewidth : 1; + + context.beginPath(); + context.strokeStyle = obj.Get('chart.crosshairs.color'); + + // Draw a top vertical line + if (obj.Get('chart.crosshairs.vline')) { + context.moveTo(x, gutterTop); + context.lineTo(x, height - gutterBottom); + } + + // Draw a horizontal line + if (obj.Get('chart.crosshairs.hline')) { + context.moveTo(gutterLeft, y); + context.lineTo(width - gutterRight, y); + } + + context.stroke(); + + + /** + * Need to show the coords? + */ + if (obj.Get('chart.crosshairs.coords')) { + if (obj.type == 'scatter') { + + var xCoord = (((x - obj.Get('chart.gutter.left')) / (obj.canvas.width - gutterLeft - gutterRight)) * (obj.Get('chart.xmax') - obj.Get('chart.xmin'))) + obj.Get('chart.xmin'); + xCoord = xCoord.toFixed(obj.Get('chart.scale.decimals')); + var yCoord = obj.max - (((y - obj.Get('chart.gutter.top')) / (obj.canvas.height - gutterTop - gutterBottom)) * obj.max); + + if (obj.type == 'scatter' && obj.Get('chart.xaxispos') == 'center') { + yCoord = (yCoord - (obj.max / 2)) * 2; + } + + yCoord = yCoord.toFixed(obj.Get('chart.scale.decimals')); + + var div = RGraph.Registry.Get('chart.coordinates.coords.div'); + var mouseCoords = RGraph.getMouseXY(e); + var canvasXY = RGraph.getCanvasXY(canvas); + + if (!div) { + + div = document.createElement('DIV'); + div.__object__ = obj; + div.style.position = 'absolute'; + div.style.backgroundColor = 'white'; + div.style.border = '1px solid black'; + div.style.fontFamily = 'Arial, Verdana, sans-serif'; + div.style.fontSize = '10pt' + div.style.padding = '2px'; + div.style.opacity = 1; + div.style.WebkitBorderRadius = '3px'; + div.style.borderRadius = '3px'; + div.style.MozBorderRadius = '3px'; + document.body.appendChild(div); + + RGraph.Registry.Set('chart.coordinates.coords.div', div); + } + + // Convert the X/Y pixel coords to correspond to the scale + + div.style.opacity = 1; + div.style.display = 'inline'; + + if (!obj.Get('chart.crosshairs.coords.fixed')) { + div.style.left = Math.max(2, (e.pageX - div.offsetWidth - 3)) + 'px'; + div.style.top = Math.max(2, (e.pageY - div.offsetHeight - 3)) + 'px'; + } else { + div.style.left = canvasXY[0] + gutterLeft + 3 + 'px'; + div.style.top = canvasXY[1] + gutterTop + 3 + 'px'; + } + + div.innerHTML = '<span style="color: #666">' + obj.Get('chart.crosshairs.coords.labels.x') + ':</span> ' + xCoord + '<br><span style="color: #666">' + obj.Get('chart.crosshairs.coords.labels.y') + ':</span> ' + yCoord; + + canvas.addEventListener('mouseout', RGraph.HideCrosshairCoords, false); + + obj.canvas.__crosshairs_labels__ = div; + obj.canvas.__crosshairs_x__ = xCoord; + obj.canvas.__crosshairs_y__ = yCoord; + + } else { + alert('[RGRAPH] Showing crosshair coordinates is only supported on the Scatter chart'); + } + } + + /** + * Fire the oncrosshairs custom event + */ + RGraph.FireCustomEvent(obj, 'oncrosshairs'); + + } else { + RGraph.HideCrosshairCoords(); + } + } + canvas.addEventListener('mousemove', crosshairs_mousemove, false); + RGraph.AddEventListener(obj.id, 'mousemove', crosshairs_mousemove); + } + } + + /** + * Thisz function hides the crosshairs coordinates + */ + RGraph.HideCrosshairCoords = function () + { + var div = RGraph.Registry.Get('chart.coordinates.coords.div'); + + if ( div + && div.style.opacity == 1 + && div.__object__.Get('chart.crosshairs.coords.fadeout') + ) { + setTimeout(function() {RGraph.Registry.Get('chart.coordinates.coords.div').style.opacity = 0.9;}, 50); + setTimeout(function() {RGraph.Registry.Get('chart.coordinates.coords.div').style.opacity = 0.8;}, 100); + setTimeout(function() {RGraph.Registry.Get('chart.coordinates.coords.div').style.opacity = 0.7;}, 150); + setTimeout(function() {RGraph.Registry.Get('chart.coordinates.coords.div').style.opacity = 0.6;}, 200); + setTimeout(function() {RGraph.Registry.Get('chart.coordinates.coords.div').style.opacity = 0.5;}, 250); + setTimeout(function() {RGraph.Registry.Get('chart.coordinates.coords.div').style.opacity = 0.4;}, 300); + setTimeout(function() {RGraph.Registry.Get('chart.coordinates.coords.div').style.opacity = 0.3;}, 350); + setTimeout(function() {RGraph.Registry.Get('chart.coordinates.coords.div').style.opacity = 0.2;}, 400); + setTimeout(function() {RGraph.Registry.Get('chart.coordinates.coords.div').style.opacity = 0.1;}, 450); + setTimeout(function() {RGraph.Registry.Get('chart.coordinates.coords.div').style.opacity = 0;}, 500); + setTimeout(function() {RGraph.Registry.Get('chart.coordinates.coords.div').style.display = 'none';}, 550); + } + } + + + /** + * Trims the right hand side of a string. Removes SPACE, TAB + * CR and LF. + * + * @param string str The string to trim + */ + RGraph.rtrim = function (str) + { + return str.replace(/( |\n|\r|\t)+$/, ''); + } + + + /** + * Draws the3D axes/background + */ + RGraph.Draw3DAxes = function (obj) + { + var gutterLeft = obj.Get('chart.gutter.left'); + var gutterRight = obj.Get('chart.gutter.right'); + var gutterTop = obj.Get('chart.gutter.top'); + var gutterBottom = obj.Get('chart.gutter.bottom'); + + var context = obj.context; + var canvas = obj.canvas; + + context.strokeStyle = '#aaa'; + context.fillStyle = '#ddd'; + + // Draw the vertical left side + context.beginPath(); + context.moveTo(gutterLeft, gutterTop); + context.lineTo(gutterLeft + 10, gutterTop - 5); + context.lineTo(gutterLeft + 10, canvas.height - gutterBottom - 5); + context.lineTo(gutterLeft, canvas.height - gutterBottom); + context.closePath(); + + context.stroke(); + context.fill(); + + // Draw the bottom floor + context.beginPath(); + context.moveTo(gutterLeft, canvas.height - gutterBottom); + context.lineTo(gutterLeft + 10, canvas.height - gutterBottom - 5); + context.lineTo(canvas.width - gutterRight + 10, canvas.height - gutterBottom - 5); + context.lineTo(canvas.width - gutterRight, canvas.height - gutterBottom); + context.closePath(); + + context.stroke(); + context.fill(); + } + + /** + * Turns off any shadow + * + * @param object obj The graph object + */ + RGraph.NoShadow = function (obj) + { + obj.context.shadowColor = 'rgba(0,0,0,0)'; + obj.context.shadowBlur = 0; + obj.context.shadowOffsetX = 0; + obj.context.shadowOffsetY = 0; + } + + + /** + * Sets the four shadow properties - a shortcut function + * + * @param object obj Your graph object + * @param string color The shadow color + * @param number offsetx The shadows X offset + * @param number offsety The shadows Y offset + * @param number blur The blurring effect applied to the shadow + */ + RGraph.SetShadow = function (obj, color, offsetx, offsety, blur) + { + obj.context.shadowColor = color; + obj.context.shadowOffsetX = offsetx; + obj.context.shadowOffsetY = offsety; + obj.context.shadowBlur = blur; + } + + + /** + * This function attempts to "fill in" missing functions from the canvas + * context object. Only two at the moment - measureText() nd fillText(). + * + * @param object context The canvas 2D context + */ + RGraph.OldBrowserCompat = function (context) + { + if (!context.measureText) { + + // This emulates the measureText() function + context.measureText = function (text) + { + var textObj = document.createElement('DIV'); + textObj.innerHTML = text; + textObj.style.backgroundColor = 'white'; + textObj.style.position = 'absolute'; + textObj.style.top = -100 + textObj.style.left = 0; + document.body.appendChild(textObj); + + var width = {width: textObj.offsetWidth}; + + textObj.style.display = 'none'; + + return width; + } + } + + if (!context.fillText) { + // This emulates the fillText() method + context.fillText = function (text, targetX, targetY) + { + return false; + } + } + + // If IE8, add addEventListener() + if (!context.canvas.addEventListener) { + window.addEventListener = function (ev, func, bubble) + { + return this.attachEvent('on' + ev, func); + } + + context.canvas.addEventListener = function (ev, func, bubble) + { + return this.attachEvent('on' + ev, func); + } + } + } + + + + /** + * This is a function that can be used to run code asynchronously, which can + * be used to speed up the loading of you pages. + * + * @param string func This is the code to run. It can also be a function pointer. + * The front page graphs show this function in action. Basically + * each graphs code is made in a function, and that function is + * passed to this function to run asychronously. + */ + RGraph.Async = function (func) + { + return setTimeout(func, arguments[1] ? arguments[1] : 1); + } + + + /** + * A custom random number function + * + * @param number min The minimum that the number should be + * @param number max The maximum that the number should be + * @param number How many decimal places there should be. Default for this is 0 + */ + RGraph.random = function (min, max) + { + var dp = arguments[2] ? arguments[2] : 0; + var r = Math.random(); + + return Number((((max - min) * r) + min).toFixed(dp)); + } + + + /** + * Draws a rectangle with curvy corners + * + * @param context object The context + * @param x number The X coordinate (top left of the square) + * @param y number The Y coordinate (top left of the square) + * @param w number The width of the rectangle + * @param h number The height of the rectangle + * @param number The radius of the curved corners + * @param boolean Whether the top left corner is curvy + * @param boolean Whether the top right corner is curvy + * @param boolean Whether the bottom right corner is curvy + * @param boolean Whether the bottom left corner is curvy + */ + RGraph.strokedCurvyRect = function (context, x, y, w, h) + { + // The corner radius + var r = arguments[5] ? arguments[5] : 3; + + // The corners + var corner_tl = (arguments[6] || arguments[6] == null) ? true : false; + var corner_tr = (arguments[7] || arguments[7] == null) ? true : false; + var corner_br = (arguments[8] || arguments[8] == null) ? true : false; + var corner_bl = (arguments[9] || arguments[9] == null) ? true : false; + + context.beginPath(); + + // Top left side + context.moveTo(x + (corner_tl ? r : 0), y); + context.lineTo(x + w - (corner_tr ? r : 0), y); + + // Top right corner + if (corner_tr) { + context.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2, false); + } + + // Top right side + context.lineTo(x + w, y + h - (corner_br ? r : 0) ); + + // Bottom right corner + if (corner_br) { + context.arc(x + w - r, y - r + h, r, Math.PI * 2, Math.PI * 0.5, false); + } + + // Bottom right side + context.lineTo(x + (corner_bl ? r : 0), y + h); + + // Bottom left corner + if (corner_bl) { + context.arc(x + r, y - r + h, r, Math.PI * 0.5, Math.PI, false); + } + + // Bottom left side + context.lineTo(x, y + (corner_tl ? r : 0) ); + + // Top left corner + if (corner_tl) { + context.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5, false); + } + + context.stroke(); + } + + + /** + * Draws a filled rectangle with curvy corners + * + * @param context object The context + * @param x number The X coordinate (top left of the square) + * @param y number The Y coordinate (top left of the square) + * @param w number The width of the rectangle + * @param h number The height of the rectangle + * @param number The radius of the curved corners + * @param boolean Whether the top left corner is curvy + * @param boolean Whether the top right corner is curvy + * @param boolean Whether the bottom right corner is curvy + * @param boolean Whether the bottom left corner is curvy + */ + RGraph.filledCurvyRect = function (context, x, y, w, h) + { + // The corner radius + var r = arguments[5] ? arguments[5] : 3; + + // The corners + var corner_tl = (arguments[6] || arguments[6] == null) ? true : false; + var corner_tr = (arguments[7] || arguments[7] == null) ? true : false; + var corner_br = (arguments[8] || arguments[8] == null) ? true : false; + var corner_bl = (arguments[9] || arguments[9] == null) ? true : false; + + context.beginPath(); + + // First draw the corners + + // Top left corner + if (corner_tl) { + context.moveTo(x + r, y + r); + context.arc(x + r, y + r, r, Math.PI, 1.5 * Math.PI, false); + } else { + context.fillRect(x, y, r, r); + } + + // Top right corner + if (corner_tr) { + context.moveTo(x + w - r, y + r); + context.arc(x + w - r, y + r, r, 1.5 * Math.PI, 0, false); + } else { + context.moveTo(x + w - r, y); + context.fillRect(x + w - r, y, r, r); + } + + + // Bottom right corner + if (corner_br) { + context.moveTo(x + w - r, y + h - r); + context.arc(x + w - r, y - r + h, r, 0, Math.PI / 2, false); + } else { + context.moveTo(x + w - r, y + h - r); + context.fillRect(x + w - r, y + h - r, r, r); + } + + // Bottom left corner + if (corner_bl) { + context.moveTo(x + r, y + h - r); + context.arc(x + r, y - r + h, r, Math.PI / 2, Math.PI, false); + } else { + context.moveTo(x, y + h - r); + context.fillRect(x, y + h - r, r, r); + } + + // Now fill it in + context.fillRect(x + r, y, w - r - r, h); + context.fillRect(x, y + r, r + 1, h - r - r); + context.fillRect(x + w - r - 1, y + r, r + 1, h - r - r); + + context.fill(); + } + + + /** + * A crude timing function + * + * @param string label The label to use for the time + */ + RGraph.Timer = function (label) + { + var d = new Date(); + + // This uses the Firebug console + console.log(label + ': ' + d.getSeconds() + '.' + d.getMilliseconds()); + } + + + /** + * Hides the palette if it's visible + */ + RGraph.HidePalette = function () + { + var div = RGraph.Registry.Get('palette'); + + if (typeof(div) == 'object' && div) { + div.style.visibility = 'hidden'; + div.style.display = 'none'; + RGraph.Registry.Set('palette', null); + } + } + + + /** + * Hides the zoomed canvas + */ + RGraph.HideZoomedCanvas = function () + { + var interval = 15; + var frames = 10; + + if (typeof(__zoomedimage__) == 'object') { + obj = __zoomedimage__.obj; + } else { + return; + } + + if (obj.Get('chart.zoom.fade.out')) { + for (var i=frames,j=1; i>=0; --i, ++j) { + if (typeof(__zoomedimage__) == 'object') { + setTimeout("__zoomedimage__.style.opacity = " + String(i / 10), j * interval); + } + } + + if (typeof(__zoomedbackground__) == 'object') { + setTimeout("__zoomedbackground__.style.opacity = " + String(i / frames), j * interval); + } + } + + if (typeof(__zoomedimage__) == 'object') { + setTimeout("__zoomedimage__.style.display = 'none'", obj.Get('chart.zoom.fade.out') ? (frames * interval) + 10 : 0); + } + + if (typeof(__zoomedbackground__) == 'object') { + setTimeout("__zoomedbackground__.style.display = 'none'", obj.Get('chart.zoom.fade.out') ? (frames * interval) + 10 : 0); + } + } + + + /** + * Adds an event handler + * + * @param object obj The graph object + * @param string event The name of the event, eg ontooltip + * @param object func The callback function + */ + RGraph.AddCustomEventListener = function (obj, name, func) + { + if (typeof(RGraph.events[obj.id]) == 'undefined') { + RGraph.events[obj.id] = []; + } + + RGraph.events[obj.id].push([obj, name, func]); + + return RGraph.events[obj.id].length - 1; + } + + + /** + * Used to fire one of the RGraph custom events + * + * @param object obj The graph object that fires the event + * @param string event The name of the event to fire + */ + RGraph.FireCustomEvent = function (obj, name) + { + if (obj && obj.isRGraph) { + var id = obj.id; + + if ( typeof(id) == 'string' + && typeof(RGraph.events) == 'object' + && typeof(RGraph.events[id]) == 'object' + && RGraph.events[id].length > 0) { + + for(var j=0; j<RGraph.events[id].length; ++j) { + if (RGraph.events[id][j] && RGraph.events[id][j][1] == name) { + RGraph.events[id][j][2](obj); + } + } + } + } + } + + + /** + * Checks the browser for traces of MSIE8 + */ + RGraph.isIE8 = function () + { + return navigator.userAgent.indexOf('MSIE 8') > 0; + } + + + /** + * Checks the browser for traces of MSIE9 + */ + RGraph.isIE9 = function () + { + return navigator.userAgent.indexOf('MSIE 9') > 0; + } + + + /** + * Checks the browser for traces of MSIE9 + */ + RGraph.isIE9up = function () + { + navigator.userAgent.match(/MSIE (\d+)/); + + return Number(RegExp.$1) >= 9; + } + + + /** + * This clears a canvases event handlers. Used at the start of each graphs .Draw() method. + * + * @param string id The ID of the canvas whose event handlers will be cleared + */ + RGraph.ClearEventListeners = function (id) + { + for (var i=0; i<RGraph.Registry.Get('chart.event.handlers').length; ++i) { + + var el = RGraph.Registry.Get('chart.event.handlers')[i]; + + if (el && (el[0] == id || el[0] == ('window_' + id))) { + if (el[0].substring(0, 7) == 'window_') { + window.removeEventListener(el[1], el[2], false); + } else { + if (document.getElementById(id)) { + document.getElementById(id).removeEventListener(el[1], el[2], false); + } + } + + RGraph.Registry.Get('chart.event.handlers')[i] = null; + } + } + } + + + /** + * + */ + RGraph.AddEventListener = function (id, e, func) + { + var type = arguments[3] ? arguments[3] : 'unknown'; + + RGraph.Registry.Get('chart.event.handlers').push([id, e, func, type]); + } + + + /** + * This function suggests a gutter size based on the widest left label. Given that the bottom + * labels may be longer, this may be a little out. + * + * @param object obj The graph object + * @param array data An array of graph data + * @return int A suggested gutter setting + */ + RGraph.getGutterSuggest = function (obj, data) + { + var str = RGraph.number_format(obj, RGraph.array_max(RGraph.getScale(RGraph.array_max(data), obj)), obj.Get('chart.units.pre'), obj.Get('chart.units.post')); + + // Take into account the HBar + if (obj.type == 'hbar') { + + var str = ''; + var len = 0; + + for (var i=0; i<obj.Get('chart.labels').length; ++i) { + str = (obj.Get('chart.labels').length > str.length ? obj.Get('chart.labels')[i] : str); + } + } + + obj.context.font = obj.Get('chart.text.size') + 'pt ' + obj.Get('chart.text.font'); + + len = obj.context.measureText(str).width + 5; + + return (obj.type == 'hbar' ? len / 3 : len); + } + + + /** + * A basic Array shift gunction + * + * @param object The numerical array to work on + * @return The new array + */ + RGraph.array_shift = function (arr) + { + var ret = []; + + for (var i=1; i<arr.length; ++i) ret.push(arr[i]); + + return ret; + } + + + /** + * If you prefer, you can use the SetConfig() method to set the configuration information + * for your chart. You may find that setting the configuration this way eases reuse. + * + * @param object obj The graph object + * @param object config The graph configuration information + */ + RGraph.SetConfig = function (obj, c) + { + for (i in c) { + if (typeof(i) == 'string') { + obj.Set(i, c[i]); + } + } + + return obj; + } + + + /** + * This function gets the canvas height. Defaults to the actual + * height but this can be changed by setting chart.height. + * + * @param object obj The graph object + */ + RGraph.GetHeight = function (obj) + { + return obj.canvas.height; + } + + + /** + * This function gets the canvas width. Defaults to the actual + * width but this can be changed by setting chart.width. + * + * @param object obj The graph object + */ + RGraph.GetWidth = function (obj) + { + return obj.canvas.width; + } + + + /** + * Clears all the custom event listeners that have been registered + * + * @param string Limits the clearing to this object ID + */ + RGraph.RemoveAllCustomEventListeners = function () + { + var id = arguments[0]; + + if (id && RGraph.events[id]) { + RGraph.events[id] = []; + } else { + RGraph.events = []; + } + } + + + /** + * Clears a particular custom event listener + * + * @param object obj The graph object + * @param number i This is the index that is return by .AddCustomEventListener() + */ + RGraph.RemoveCustomEventListener = function (obj, i) + { + if ( typeof(RGraph.events) == 'object' + && typeof(RGraph.events[obj.id]) == 'object' + && typeof(RGraph.events[obj.id][i]) == 'object') { + + RGraph.events[obj.id][i] = null; + } + } + + + /** + * This draws the background + * + * @param object obj The graph object + */ + RGraph.DrawBackgroundImage = function (obj) + { + var img = new Image(); + img.__object__ = obj; + img.__canvas__ = obj.canvas; + img.__context__ = obj.context; + img.src = obj.Get('chart.background.image'); + + obj.__background_image__ = img; + + img.onload = function () + { + var obj = this.__object__; + + var gutterLeft = obj.Get('chart.gutter.left'); + var gutterRight = obj.Get('chart.gutter.right'); + var gutterTop = obj.Get('chart.gutter.top'); + var gutterBottom = obj.Get('chart.gutter.bottom'); + + RGraph.Clear(obj.canvas); + + obj.context.drawImage(this,gutterLeft,gutterTop, RGraph.GetWidth(obj) - gutterLeft - gutterRight, RGraph.GetHeight(obj) - gutterTop - gutterBottom); + + // Draw the graph + obj.Draw(); + } + + img.onerror = function () + { + var obj = this.__canvas__.__object__; + + // Show an error alert + alert('[ERROR] There was an error with the background image that you specified: ' + img.src); + + // Draw the graph, because the onload doesn't fire, and thus that won't draw the chart + obj.Draw(); + } + } + + + /** + * This resets the canvas. Keep in mind that any translate() that has been performed will also be reset. + * + * @param object canvas The canvas + */ + RGraph.Reset = function (canvas) + { + canvas.width = canvas.width; + }
\ No newline at end of file diff --git a/schall/static/RGraph/libraries/RGraph.common.effects.js b/schall/static/RGraph/libraries/RGraph.common.effects.js new file mode 100644 index 0000000..cb63371 --- /dev/null +++ b/schall/static/RGraph/libraries/RGraph.common.effects.js @@ -0,0 +1,1516 @@ + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + + /** + * This is a library of a few functions that make it easier to do + * effects like fade-ins or eaxpansion. + */ + + /** + * Initialise the various objects + */ + if (typeof(RGraph) == 'undefined') RGraph = {isRGraph:true,type:'common'}; + RGraph.Effects = {} + RGraph.Effects.Fade = {} + RGraph.Effects.jQuery = {} + RGraph.Effects.jQuery.HBlinds = {} + RGraph.Effects.jQuery.VBlinds = {} + RGraph.Effects.jQuery.Slide = {} + RGraph.Effects.Pie = {} + RGraph.Effects.Bar = {} + RGraph.Effects.Line = {} + RGraph.Effects.Line.jQuery = {} + RGraph.Effects.Fuel = {} + RGraph.Effects.Rose = {} + RGraph.Effects.Odo = {} + RGraph.Effects.Gauge = {} + RGraph.Effects.Meter = {} + RGraph.Effects.HBar = {} + RGraph.Effects.Radar = {} + RGraph.Effects.Waterfall = {} + + + /** + * Fadein + * + * This function simply uses the CSS opacity property - initially set to zero and + * increasing to 1 over the period of 0.5 second + * + * @param object obj The graph object + */ + RGraph.Effects.Fade.In = function (obj) + { + var canvas = obj.canvas; + + // Initially the opacity should be zero + canvas.style.opacity = 0; + + // Draw the chart + RGraph.Clear(obj.canvas); + obj.Draw(); + + // Now fade the chart in + for (var i=1; i<=10; ++i) { + setTimeout('document.getElementById("' + canvas.id + '").style.opacity = ' + (i * 0.1), i * 50); + } + + /** + * Callback + */ + if (typeof(arguments[2]) == 'function') { + setTimeout(arguments[2], 500); + } + } + + + /** + * Fadeout + * + * This function is a reversal of the above function - fading out instead of in + * + * @param object obj The graph object + */ + RGraph.Effects.Fade.Out = function (obj) + { + var canvas = obj.canvas; + + // Draw the chart + RGraph.Clear(obj.canvas); + obj.Draw(); + + // Now fade the chart in + for (var i=10; i>=0; --i) { + setTimeout('document.getElementById("' + canvas.id + '").style.opacity = ' + (i * 0.1), (10 - i) * 50); + } + + /** + * Callback + */ + if (typeof(arguments[2]) == 'function') { + setTimeout(arguments[2], 500); + } + } + + + /** + * Expand + * + * This effect is like the tooltip effect of the same name. I starts in the middle + * and expands out to full size. + * + * @param object obj The graph object + */ + RGraph.Effects.jQuery.Expand = function (obj) + { + // Check for jQuery + if (typeof(jQuery) == 'undefined') { + alert('[ERROR] Could not find jQuery object - have you included the jQuery file?'); + } + + var canvas = obj.canvas; + + if (!canvas.__rgraph_div_placeholder__) { + var div = RGraph.Effects.ReplaceCanvasWithDIV(canvas); + canvas.__rgraph_div_placeholder__ = div; + } else { + div = canvas.__rgraph_div_placeholder__; + } + + canvas.style.position = 'relative'; + canvas.style.top = (canvas.height / 2) + 'px'; + canvas.style.left = (canvas.width / 2) + 'px'; + + + canvas.style.width = 0; + canvas.style.height = 0; + + + canvas.style.opacity = 0; + + RGraph.Clear(obj.canvas); + obj.Draw(); + + $('#' + obj.id).animate({ + opacity: 1, + width: parseInt(div.style.width) + 'px', + height: parseInt(div.style.height) + 'px', + left: '-=' + (obj.canvas.width / 2) + 'px', + top: '-=' + (obj.canvas.height / 2) + 'px' + }, 1000); + + /** + * Callback + */ + if (typeof(arguments[2]) == 'function') { + setTimeout(arguments[2], 1000); + } + } + + + /** + * A function used to replace the canvas witha Div, which inturn holds the canvas. This way the page + * layout doesn't shift in the canvas is resized. + * + * @param object canvas The canvas to replace. + */ + RGraph.Effects.ReplaceCanvasWithDIV = function (canvas) + { + if (!canvas.replacementDIV) { + // Create the place holder DIV + var div = document.createElement('DIV'); + div.style.width = canvas.width + 'px'; + div.style.height = canvas.height + 'px'; + div.style.cssFloat = canvas.style.cssFloat; + div.style.left = canvas.style.left; + div.style.top = canvas.style.top; + //div.style.position = canvas.style.position; + div.style.display = 'inline-block'; + canvas.parentNode.insertBefore(div, canvas); + + + // Remove the canvas from the document + canvas.parentNode.removeChild(canvas); + + // Add it back in as a child of the place holder + div.appendChild(canvas); + + // Reset the positioning information on the canvas + canvas.style.position = 'relative'; + canvas.style.left = (div.offsetWidth / 2) + 'px'; + canvas.style.top = (div.offsetHeight / 2) + 'px'; + canvas.style.cssFloat = ''; + + // Add a reference to the canvas to the DIV so that repeated plays of the anumation + // don't keep replacing the canvas with a new DIV + canvas.replacementDIV = div; + + } else { + var div = canvas.replacementDIV; + } + + return div; + } + + + /** + * Snap + * + * Similar to the tooltip effect of the same name, this moves the canvas in from the top left corner + * + * @param object obj The graph object + */ + RGraph.Effects.jQuery.Snap = function (obj) + { + var delay = 500; + + var div = RGraph.Effects.ReplaceCanvasWithDIV(obj.canvas); + + obj.canvas.style.position = 'absolute'; + obj.canvas.style.top = 0; + obj.canvas.style.left = 0; + obj.canvas.style.width = 0; + obj.canvas.style.height = 0; + obj.canvas.style.opacity = 0; + + var targetLeft = div.offsetLeft; + var targetTop = div.offsetTop; + var targetWidth = div.offsetWidth; + var targetHeight = div.offsetHeight; + + RGraph.Clear(obj.canvas); + obj.Draw(); + + $('#' + obj.id).animate({ + opacity: 1, + width: targetWidth + 'px', + height: targetHeight + 'px', + left: targetLeft + 'px', + top: targetTop + 'px' + }, delay); + + /** + * Callback + */ + if (typeof(arguments[2]) == 'function') { + setTimeout(arguments[2], delay + 50); + } + } + + + /** + * Reveal + * + * This effect issmilat to the Expand effect - the canvas is slowly revealed from + * the centre outwards + * + * @param object obj The chart object + */ + RGraph.Effects.jQuery.Reveal = function (obj) + { + var opts = arguments[1] ? arguments[1] : null; + var delay = 1000; + var canvas = obj.canvas; + var xy = RGraph.getCanvasXY(obj.canvas); + + var divs = [ + ['reveal_left', xy[0], xy[1], obj.canvas.width / 2, obj.canvas.height], + ['reveal_right',(xy[0] + (obj.canvas.width / 2)),xy[1],(obj.canvas.width / 2),obj.canvas.height], + ['reveal_top',xy[0],xy[1],obj.canvas.width,(obj.canvas.height / 2)], + ['reveal_bottom',xy[0],(xy[1] + (obj.canvas.height / 2)),obj.canvas.width,(obj.canvas.height / 2)] + ]; + + for (var i=0; i<divs.length; ++i) { + var div = document.createElement('DIV'); + div.id = divs[i][0]; + div.style.width = divs[i][3]+ 'px'; + div.style.height = divs[i][4] + 'px'; + div.style.left = divs[i][1] + 'px'; + div.style.top = divs[i][2] + 'px'; + div.style.position = 'absolute'; + div.style.backgroundColor = opts && typeof(opts['color']) == 'string' ? opts['color'] : 'white'; + document.body.appendChild(div); + } + + RGraph.Clear(obj.canvas); + obj.Draw(); + + $('#reveal_left').animate({width: 0}, delay); + $('#reveal_right').animate({left: '+=' + (obj.canvas.width / 2),width: 0}, delay); + $('#reveal_top').animate({height: 0}, delay); + $('#reveal_bottom').animate({top: '+=' + (obj.canvas.height / 2),height: 0}, delay); + + // Remove the DIVs from the DOM 100ms after the animation ends + setTimeout( + function () + { + document.body.removeChild(document.getElementById("reveal_top")) + document.body.removeChild(document.getElementById("reveal_bottom")) + document.body.removeChild(document.getElementById("reveal_left")) + document.body.removeChild(document.getElementById("reveal_right")) + } + , delay); + + /** + * Callback + */ + if (typeof(arguments[2]) == 'function') { + setTimeout(arguments[2], delay); + } + } + + + /** + * Horizontal Blinds (open) + * + * @params object obj The graph object + */ + RGraph.Effects.jQuery.HBlinds.Open = function (obj) + { + var canvas = obj.canvas; + var opts = arguments[1] ? arguments[1] : []; + var delay = 1000; + var color = opts['color'] ? opts['color'] : 'white'; + var xy = RGraph.getCanvasXY(canvas); + var height = canvas.height / 5; + + /** + * First draw the chart + */ + RGraph.Clear(obj.canvas); + obj.Draw(); + + for (var i=0; i<5; ++i) { + var div = document.createElement('DIV'); + div.id = 'blinds_' + i; + div.style.width = canvas.width + 'px'; + div.style.height = height + 'px'; + div.style.left = xy[0] + 'px'; + div.style.top = (xy[1] + (canvas.height * (i / 5))) + 'px'; + div.style.position = 'absolute'; + div.style.backgroundColor = color; + document.body.appendChild(div); + + $('#blinds_' + i).animate({height: 0}, delay); + } + + setTimeout(function () {document.body.removeChild(document.getElementById('blinds_0'));}, delay); + setTimeout(function () {document.body.removeChild(document.getElementById('blinds_1'));}, delay); + setTimeout(function () {document.body.removeChild(document.getElementById('blinds_2'));}, delay); + setTimeout(function () {document.body.removeChild(document.getElementById('blinds_3'));}, delay); + setTimeout(function () {document.body.removeChild(document.getElementById('blinds_4'));}, delay); + + /** + * Callback + */ + if (typeof(arguments[2]) == 'function') { + setTimeout(arguments[2], delay); + } + } + + + /** + * Horizontal Blinds (close) + * + * @params object obj The graph object + */ + RGraph.Effects.jQuery.HBlinds.Close = function (obj) + { + var canvas = obj.canvas; + var opts = arguments[1] ? arguments[1] : []; + var delay = 1000; + var color = opts['color'] ? opts['color'] : 'white'; + var xy = RGraph.getCanvasXY(canvas); + var height = canvas.height / 5; + + for (var i=0; i<5; ++i) { + var div = document.createElement('DIV'); + div.id = 'blinds_' + i; + div.style.width = canvas.width + 'px'; + div.style.height = 0; + div.style.left = xy[0] + 'px'; + div.style.top = (xy[1] + (canvas.height * (i / 5))) + 'px'; + div.style.position = 'absolute'; + div.style.backgroundColor = color; + document.body.appendChild(div); + + $('#blinds_' + i).animate({height: height + 'px'}, delay); + } + + setTimeout(function () {RGraph.Clear(obj.canvas);}, delay + 100); + setTimeout(function () {document.body.removeChild(document.getElementById('blinds_0'));}, delay + 100); + setTimeout(function () {document.body.removeChild(document.getElementById('blinds_1'));}, delay + 100); + setTimeout(function () {document.body.removeChild(document.getElementById('blinds_2'));}, delay + 100); + setTimeout(function () {document.body.removeChild(document.getElementById('blinds_3'));}, delay + 100); + setTimeout(function () {document.body.removeChild(document.getElementById('blinds_4'));}, delay + 100); + + /** + * Callback + */ + if (typeof(arguments[2]) == 'function') { + setTimeout(arguments[2], delay); + } + } + + + /** + * Vertical Blinds (open) + * + * @params object obj The graph object + */ + RGraph.Effects.jQuery.VBlinds.Open = function (obj) + { + var canvas = obj.canvas; + var opts = arguments[1] ? arguments[1] : []; + var delay = 1000; + var color = opts['color'] ? opts['color'] : 'white'; + var xy = RGraph.getCanvasXY(canvas); + var width = canvas.width / 10; + + /** + * First draw the chart + */ + RGraph.Clear(obj.canvas); + obj.Draw(); + + for (var i=0; i<10; ++i) { + var div = document.createElement('DIV'); + div.id = 'blinds_' + i; + div.style.width = width + 'px'; + div.style.height = canvas.height + 'px'; + div.style.left = (xy[0] + (canvas.width * (i / 10))) + 'px'; + div.style.top = (xy[1]) + 'px'; + div.style.position = 'absolute'; + div.style.backgroundColor = color; + document.body.appendChild(div); + + $('#blinds_' + i).animate({width: 0}, delay); + } + + setTimeout(function () {document.body.removeChild(document.getElementById('blinds_0'));}, delay + 100); + setTimeout(function () {document.body.removeChild(document.getElementById('blinds_1'));}, delay + 100); + setTimeout(function () {document.body.removeChild(document.getElementById('blinds_2'));}, delay + 100); + setTimeout(function () {document.body.removeChild(document.getElementById('blinds_3'));}, delay + 100); + setTimeout(function () {document.body.removeChild(document.getElementById('blinds_4'));}, delay + 100); + setTimeout(function () {document.body.removeChild(document.getElementById('blinds_5'));}, delay + 100); + setTimeout(function () {document.body.removeChild(document.getElementById('blinds_6'));}, delay + 100); + setTimeout(function () {document.body.removeChild(document.getElementById('blinds_7'));}, delay + 100); + setTimeout(function () {document.body.removeChild(document.getElementById('blinds_8'));}, delay + 100); + setTimeout(function () {document.body.removeChild(document.getElementById('blinds_9'));}, delay + 100); + + /** + * Callback + */ + if (typeof(arguments[2]) == 'function') { + setTimeout(arguments[2], delay); + } + } + + + /** + * Vertical Blinds (close) + * + * @params object obj The graph object + */ + RGraph.Effects.jQuery.VBlinds.Close = function (obj) + { + var canvas = obj.canvas; + var opts = arguments[1] ? arguments[1] : []; + var delay = 1000; + var color = opts['color'] ? opts['color'] : 'white'; + var xy = RGraph.getCanvasXY(canvas); + var width = canvas.width / 10; + + // Don't draw the chart + + for (var i=0; i<10; ++i) { + var div = document.createElement('DIV'); + div.id = 'blinds_' + i; + div.style.width = 0; + div.style.height = canvas.height + 'px'; + div.style.left = (xy[0] + (canvas.width * (i / 10))) + 'px'; + div.style.top = (xy[1]) + 'px'; + div.style.position = 'absolute'; + div.style.backgroundColor = color; + document.body.appendChild(div); + + $('#blinds_' + i).animate({width: width}, delay); + } + + setTimeout(function () {RGraph.Clear(obj.canvas, color);}, delay + 100); + + if (opts['remove']) { + setTimeout(function () {document.body.removeChild(document.getElementById('blinds_0'));}, delay + 100); + setTimeout(function () {document.body.removeChild(document.getElementById('blinds_1'));}, delay + 100); + setTimeout(function () {document.body.removeChild(document.getElementById('blinds_2'));}, delay + 100); + setTimeout(function () {document.body.removeChild(document.getElementById('blinds_3'));}, delay + 100); + setTimeout(function () {document.body.removeChild(document.getElementById('blinds_4'));}, delay + 100); + setTimeout(function () {document.body.removeChild(document.getElementById('blinds_5'));}, delay + 100); + setTimeout(function () {document.body.removeChild(document.getElementById('blinds_6'));}, delay + 100); + setTimeout(function () {document.body.removeChild(document.getElementById('blinds_7'));}, delay + 100); + setTimeout(function () {document.body.removeChild(document.getElementById('blinds_8'));}, delay + 100); + setTimeout(function () {document.body.removeChild(document.getElementById('blinds_9'));}, delay + 100); + } + + /** + * Callback + */ + if (typeof(arguments[2]) == 'function') { + setTimeout(arguments[2], delay); + } + } + + + /** + * Pie chart grow + * + * Gradually increases the pie chart radius + * + * @params object obj The graph object + */ + RGraph.Effects.Pie.Grow = function (obj) + { + var canvas = obj.canvas; + var opts = arguments[1] ? arguments[1] : []; + var color = opts['color'] ? opts['color'] : 'white'; + var xy = RGraph.getCanvasXY(canvas); + + canvas.style.visibility = 'hidden'; + obj.Draw(); + var radius = obj.getRadius(); + RGraph.Clear(obj.canvas); + canvas.style.visibility = 'visible'; + + obj.Set('chart.radius', 0); + + RGraph.Effects.Animate(obj, {'chart.radius': radius}, arguments[2]); + } + + + /** + * Grow + * + * The Bar chart Grow effect gradually increases the values of the bars + * + * @param object obj The graph object + */ + RGraph.Effects.Bar.Grow = function (obj) + { + // Save the data + obj.original_data = RGraph.array_clone(obj.data); + + // Zero the data + obj.__animation_frame__ = 0; + + // Stop the scale from changing by setting chart.ymax (if it's not already set) + if (obj.Get('chart.ymax') == null) { + + var ymax = 0; + + for (var i=0; i<obj.data.length; ++i) { + if (RGraph.is_array(obj.data[i]) && obj.Get('chart.grouping') == 'stacked') { + ymax = Math.max(ymax, RGraph.array_sum(obj.data[i])); + } else { + ymax = Math.max(ymax, obj.data[i]); + } + } + + ymax = RGraph.getScale(ymax)[4]; + + obj.Set('chart.ymax', ymax); + } + + function Grow () + { + var numFrames = 30; + + if (!obj.__animation_frame__) { + obj.__animation_frame__ = 0; + obj.__original_hmargin__ = obj.Get('chart.hmargin'); + obj.__hmargin__ = ((obj.canvas.width - obj.Get('chart.gutter.left') - obj.Get('chart.gutter.right')) / obj.data.length) / 2; + obj.Set('chart.hmargin', obj.__hmargin__); + } + + // Alter the Bar chart data depending on the frame + for (var j=0; j<obj.original_data.length; ++j) { + if (typeof(obj.data[j]) == 'object') { + for (var k=0; k<obj.data[j].length; ++k) { + obj.data[j][k] = (obj.__animation_frame__ / numFrames) * obj.original_data[j][k]; + } + } else { + obj.data[j] = (obj.__animation_frame__ / numFrames) * obj.original_data[j]; + } + } + + /** + * Increment the hmargin to the target + */ + obj.Set('chart.hmargin', ((1 - (obj.__animation_frame__ / numFrames)) * (obj.__hmargin__ - obj.__original_hmargin__)) + obj.__original_hmargin__); + + + RGraph.Clear(obj.canvas); + obj.Draw(); + + if (obj.__animation_frame__ < numFrames) { + obj.__animation_frame__ += 1; + + if (location.href.indexOf('?settimeout') > 0) { + setTimeout(Grow, 40); + } else { + RGraph.Effects.UpdateCanvas(Grow); + } + } + } + + RGraph.Effects.UpdateCanvas(Grow); + } + + + /** + * A wrapper function that encapsulate requestAnimationFrame + * + * @param function func The animation function + */ + RGraph.Effects.UpdateCanvas = function (func) + { + // Standard + if (typeof(window.requestAnimationFrame) == 'function') { + window.requestAnimationFrame(func); + // IE 10+ + } else if (typeof(window.msRequestAnimationFrame) == 'function') { + window.msRequestAnimationFrame(func); + // Chrome + } else if (typeof(window.webkitRequestAnimationFrame) == 'function') { + window.webkitRequestAnimationFrame(func); + // Firefox + } else if (window.mozRequestAnimationFrame && 0) { // Seems rather slow in FF6 - so disabled + window.mozRequestAnimationFrame(func); + // Default fallback to setTimeout + } else { + setTimeout(func, 16.666); + } + } + + + /** + * Grow + * + * The Fuel chart Grow effect gradually increases the values of the Fuel chart + * + * @param object obj The graph object + */ + RGraph.Effects.Fuel.Grow = function (fuelObj) + { + function Grow () + { + var numFrames = 35; + + if (!fuelObj.__animation_frame__) { + fuelObj.__animation_frame__ = 0; + fuelObj.__min__ = fuelObj.min; + fuelObj.__value__ = fuelObj.value; + } + + + fuelObj.value = fuelObj.__min__ + (((fuelObj.__value__ - fuelObj.__min__) / numFrames) * fuelObj.__animation_frame__); + + RGraph.Clear(fuelObj.canvas); + fuelObj.Draw(); + + if (fuelObj.__animation_frame__ < numFrames) { + fuelObj.__animation_frame__ += 1; + RGraph.Effects.UpdateCanvas(Grow); + } + } + + RGraph.Effects.UpdateCanvas(Grow); + } + + + /** + * The Animate function. Similar to the jQuery Animate() function - simply pass it a + * map of the properties and their target values, and this function will animate + * them to get to those values. + * + * @param object obj The chart object + * @param object map A map (an associative array) of the properties and their target values. + * @param An optional function which will be called when the animation is complete + */ + RGraph.Effects.Animate = function (obj, map) + { + obj.Draw(); + + RGraph.Effects.__total_frames__ = (map && map['frames']) ? map['frames'] : 30; + + function Animate_Iterator (func) + { + var id = [obj.id + '_' + obj.type]; + + // Very first time in - initialise the arrays + if (typeof(RGraph.Effects.__current_frame__ ) == 'undefined') { + RGraph.Effects.__current_frame__ = new Array(); + RGraph.Effects.__original_values__ = new Array(); + RGraph.Effects.__diffs__ = new Array(); + RGraph.Effects.__steps__ = new Array(); + RGraph.Effects.__callback__ = new Array(); + } + + // Initialise the arrays for THIS animation (not necessrily the first in the page) + if (!RGraph.Effects.__current_frame__[id]) { + RGraph.Effects.__current_frame__[id] = RGraph.Effects.__total_frames__; + RGraph.Effects.__original_values__[id] = {}; + RGraph.Effects.__diffs__[id] = {}; + RGraph.Effects.__steps__[id] = {}; + RGraph.Effects.__callback__[id] = func; + } + + for (var i in map) { + if (typeof(map[i]) == 'string' || typeof(map[i]) == 'number') { + + // If this the first frame, record the proginal value + if (RGraph.Effects.__current_frame__[id] == RGraph.Effects.__total_frames__) { + RGraph.Effects.__original_values__[id][i] = obj.Get(i); + RGraph.Effects.__diffs__[id][i] = map[i] - RGraph.Effects.__original_values__[id][i]; + RGraph.Effects.__steps__[id][i] = RGraph.Effects.__diffs__[id][i] / RGraph.Effects.__total_frames__; + } + + obj.Set(i, obj.Get(i) + RGraph.Effects.__steps__[id][i]); + + RGraph.Clear(obj.canvas); + obj.Draw(); + } + } + + // If the current frame number is above zero, run the animation iterator again + if (--RGraph.Effects.__current_frame__[id] > 0) { + //setTimeout(Animate_Iterator, 100) + RGraph.Effects.UpdateCanvas(Animate_Iterator); + + // Optional callback + } else { + + if (typeof(RGraph.Effects.__callback__[id]) == 'function') { + (RGraph.Effects.__callback__[id])(obj); + } + + // Get rid of the arrays + RGraph.Effects.__current_frame__[id] = null; + RGraph.Effects.__original_values__[id] = null; + RGraph.Effects.__diffs__[id] = null; + RGraph.Effects.__steps__[id] = null; + RGraph.Effects.__callback__[id] = null; + + } + } + + Animate_Iterator(arguments[2]); + } + + + /** + * Slide in + * + * This function is a wipe that can be used when switching the canvas to a new graph + * + * @param object obj The graph object + */ + RGraph.Effects.jQuery.Slide.In = function (obj) + { + RGraph.Clear(obj.canvas); + obj.Draw(); + + var canvas = obj.canvas; + var div = RGraph.Effects.ReplaceCanvasWithDIV(obj.canvas); + var delay = 1000; + div.style.overflow= 'hidden'; + var direction = typeof(arguments[1]) == 'object' && typeof(arguments[1]['direction']) == 'string' ? arguments[1]['direction'] : 'left'; + + canvas.style.position = 'relative'; + + if (direction == 'left') { + canvas.style.left = (0 - div.offsetWidth) + 'px'; + canvas.style.top = 0; + } else if (direction == 'top') { + canvas.style.left = 0; + canvas.style.top = (0 - div.offsetHeight) + 'px'; + } else if (direction == 'bottom') { + canvas.style.left = 0; + canvas.style.top = div.offsetHeight + 'px'; + } else { + canvas.style.left = div.offsetWidth + 'px'; + canvas.style.top = 0; + } + + $('#' + obj.id).animate({left:0,top:0}, delay); + + /** + * Callback + */ + if (typeof(arguments[2]) == 'function') { + setTimeout(arguments[2], delay); + } + } + + + /** + * Slide out + * + * This function is a wipe that can be used when switching the canvas to a new graph + * + * @param object obj The graph object + */ + RGraph.Effects.jQuery.Slide.Out = function (obj) + { + var canvas = obj.canvas; + var div = RGraph.Effects.ReplaceCanvasWithDIV(obj.canvas); + var delay = 1000; + div.style.overflow= 'hidden'; + var direction = typeof(arguments[1]) == 'object' && typeof(arguments[1]['direction']) == 'string' ? arguments[1]['direction'] : 'left'; + + canvas.style.position = 'relative'; + canvas.style.left = 0; + canvas.style.top = 0; + + if (direction == 'left') { + $('#' + obj.id).animate({left: (0 - canvas.width) + 'px'}, delay); + } else if (direction == 'top') { + $('#' + obj.id).animate({left: 0, top: (0 - div.offsetHeight) + 'px'}, delay); + } else if (direction == 'bottom') { + $('#' + obj.id).animate({top: (0 + div.offsetHeight) + 'px'}, delay); + } else { + $('#' + obj.id).animate({left: (0 + canvas.width) + 'px'}, delay); + } + + /** + * Callback + */ + if (typeof(arguments[2]) == 'function') { + setTimeout(arguments[2], delay); + } + } + + + /** + * Unfold + * + * This effect gradually increases the X/Y coordinatesfrom 0 + * + * @param object obj The chart object + */ + RGraph.Effects.Line.Unfold = function (obj) + { + obj.Set('chart.animation.factor', obj.Get('chart.animation.unfold.initial')); + RGraph.Effects.Animate(obj, {'chart.animation.factor': 1}, arguments[2]); + } + + + /** + * Unfold + * + * This effect gradually increases the radiuss and decrease the margin of the Rose chart + * + * @param object obj The chart object + * @param Not used - pass null + * @param function An optional callback function + */ + RGraph.Effects.Rose.Grow = function (obj) + { + var original_margin = obj.Get('chart.margin'); + var margin = (360 / obj.data.length) / 2; + + obj.Set('chart.margin', margin); + obj.Set('chart.animation.grow.factor', 0); + + RGraph.Effects.Animate(obj, {'chart.margin': original_margin, 'chart.animation.grow.factor': 1, 'frames': 45}, arguments[2]); + } + + + /** + * UnfoldFromCenter + * + * Line chart unfold from center + */ + RGraph.Effects.Line.UnfoldFromCenter = function (obj) + { + var numFrames = 30; + + var original_opacity = obj.canvas.style.opacity; + obj.canvas.style.opacity = 0; + obj.Draw(); + var center_value = obj.scale[4] / 2; + obj.Set('chart.ymax', Number(obj.scale[4])); + RGraph.Clear(obj.canvas); + obj.canvas.style.opacity = original_opacity; + var original_data = RGraph.array_clone(obj.original_data); + var original_blur = obj.Get('chart.shadow.blur'); + obj.Set('chart.shadow.blur', 0); + var callback = arguments[2]; + + if (!obj.__increments__) { + + obj.__increments__ = new Array(); + + for (var dataset=0; dataset<original_data.length; ++dataset) { + + obj.__increments__[dataset] = new Array(); + + for (var i=0; i<original_data[dataset].length; ++i) { + obj.__increments__[dataset][i] = (original_data[dataset][i] - center_value) / numFrames; + + obj.original_data[dataset][i] = center_value; + } + } + } + + function UnfoldFromCenter () + { + RGraph.Clear(obj.canvas); + obj.Draw(); + + for (var dataset=0; dataset<original_data.length; ++dataset) { + for (var i=0; i<original_data[dataset].length; ++i) { + obj.original_data[dataset][i] += obj.__increments__[dataset][i]; + } + } + + if (--numFrames > 0) { + RGraph.Effects.UpdateCanvas(UnfoldFromCenter); + } else { + obj.original_data = RGraph.array_clone(original_data); + obj.__increments__ = null; + obj.Set('chart.shadow.blur', original_blur); + RGraph.Clear(obj.canvas); + obj.Draw(); + + if (typeof(callback) == 'function') { + callback(obj); + } + } + } + + UnfoldFromCenter(); + } + + + /** + * FoldToCenter + * + * Line chart FoldTocenter + */ + RGraph.Effects.Line.FoldToCenter = function (obj) + { + var totalFrames = 30; + var numFrame = totalFrames; + obj.Draw(); + var center_value = obj.scale[4] / 2; + obj.Set('chart.ymax', Number(obj.scale[4])); + RGraph.Clear(obj.canvas); + var original_data = RGraph.array_clone(obj.original_data); + obj.Set('chart.shadow.blur', 0); + var callback = arguments[2]; + + function FoldToCenter () + { + for (var i=0; i<obj.data.length; ++i) { + if (obj.data[i].length) { + for (var j=0; j<obj.data[i].length; ++j) { + if (obj.original_data[i][j] > center_value) { + obj.original_data[i][j] = ((original_data[i][j] - center_value) * (numFrame/totalFrames)) + center_value; + } else { + obj.original_data[i][j] = center_value - ((center_value - original_data[i][j]) * (numFrame/totalFrames)); + } + } + } + } + + RGraph.Clear(obj.canvas); + obj.Draw(); + + if (numFrame-- > 0) { + RGraph.Effects.UpdateCanvas(FoldToCenter); + } else if (typeof(callback) == 'function') { + callback(obj); + } + } + + RGraph.Effects.UpdateCanvas(FoldToCenter); + } + + + /** + * Odo Grow + * + * This effect gradually increases the represented value + * + * @param object obj The chart object + * @param Not used - pass null + * @param function An optional callback function + */ + RGraph.Effects.Odo.Grow = function (obj) + { + var numFrames = 30; + var origValue = Number(obj.currentValue); + var newValue = obj.value; + var diff = newValue - origValue; + var step = (diff / numFrames); + var callback = arguments[2]; + + function Grow () + { + if (obj.currentValue != newValue) { + obj.value = Number(obj.currentValue) + step; + } + + + RGraph.Clear(obj.canvas); + obj.Draw(); + + if (numFrames-- > 0) { + //setTimeout(Grow, 100); + RGraph.Effects.UpdateCanvas(Grow); + } else if (callback) { + callback(obj) + } + } + + //setTimeout(Grow, 100); + RGraph.Effects.UpdateCanvas(Grow); + } + + + /** + * Meter Grow + * + * This effect gradually increases the represented value + * + * @param object obj The chart object + * @param Not used - pass null + * @param function An optional callback function + */ + RGraph.Effects.Meter.Grow = function (obj) + { + if (!obj.currentValue) { + obj.currentValue = obj.min; + } + + var totalFrames = 60; + var numFrame = 0; + var diff = obj.value - obj.currentValue; + var step = diff / totalFrames + var callback = arguments[2]; + + function Grow_meter_inner () + { + obj.value = obj.currentValue + step; + + RGraph.Clear(obj.canvas); + obj.Draw(); + + if (numFrame++ < totalFrames) { + RGraph.Effects.UpdateCanvas(Grow_meter_inner); + } else if (typeof(callback) == 'function') { + callback(obj); + } + } + + RGraph.Effects.UpdateCanvas(Grow_meter_inner); + } + + + /** + * Grow + * + * The HBar chart Grow effect gradually increases the values of the bars + * + * @param object obj The graph object + */ + RGraph.Effects.HBar.Grow = function (obj) + { + // Save the data + obj.original_data = RGraph.array_clone(obj.data); + + // Zero the data + obj.__animation_frame__ = 0; + + // Stop the scale from changing by setting chart.ymax (if it's not already set) + if (obj.Get('chart.xmax') == 0) { + + var xmax = 0; + + for (var i=0; i<obj.data.length; ++i) { + if (RGraph.is_array(obj.data[i]) && obj.Get('chart.grouping') == 'stacked') { + xmax = Math.max(xmax, RGraph.array_sum(obj.data[i])); + } else if (RGraph.is_array(obj.data[i]) && obj.Get('chart.grouping') == 'grouped') { + xmax = Math.max(xmax, RGraph.array_max(obj.data[i])); + } else { + xmax = Math.max(xmax, RGraph.array_max(obj.data[i])); + } + } + + xmax = RGraph.getScale(xmax)[4]; + + obj.Set('chart.xmax', xmax); + } + + /** + * Turn off shadow blur for the duration of the animation + */ + if (obj.Get('chart.shadow.blur') > 0) { + var __original_shadow_blur__ = obj.Get('chart.shadow.blur'); + obj.Set('chart.shadow.blur', 0); + } + + function Grow () + { + var numFrames = 30; + + if (!obj.__animation_frame__) { + obj.__animation_frame__ = 0; + obj.__original_vmargin__ = obj.Get('chart.vmargin'); + obj.__vmargin__ = ((obj.canvas.height - obj.Get('chart.gutter.top') - obj.Get('chart.gutter.bottom')) / obj.data.length) / 2; + obj.Set('chart.vmargin', obj.__vmargin__); + } + + // Alter the Bar chart data depending on the frame + for (var j=0; j<obj.original_data.length; ++j) { + + // This stops the animatioon from being completely linear + var easing = Math.pow(Math.sin((obj.__animation_frame__ * (90 / numFrames)) / (180 / Math.PI)), 4); + + if (typeof(obj.data[j]) == 'object') { + for (var k=0; k<obj.data[j].length; ++k) { + obj.data[j][k] = (obj.__animation_frame__ / numFrames) * obj.original_data[j][k] * easing; + } + } else { + obj.data[j] = (obj.__animation_frame__ / numFrames) * obj.original_data[j] * easing; + } + } + + /** + * Increment the vmargin to the target + */ + obj.Set('chart.vmargin', ((1 - (obj.__animation_frame__ / numFrames)) * (obj.__vmargin__ - obj.__original_vmargin__)) + obj.__original_vmargin__); + + + RGraph.Clear(obj.canvas); + obj.Draw(); + + if (obj.__animation_frame__ < numFrames) { + obj.__animation_frame__ += 1; + + RGraph.Effects.UpdateCanvas(Grow); + + // Turn any shadow blur back on + } else { + if (typeof(__original_shadow_blur__) == 'number' && __original_shadow_blur__ > 0) { + obj.Set('chart.shadow.blur', __original_shadow_blur__); + RGraph.Clear(obj.canvas); + obj.Draw(); + } + } + } + + RGraph.Effects.UpdateCanvas(Grow); + } + + + /** + * Trace + * + * This effect is for the Line chart, uses the jQuery library and slowly + * uncovers the Line , but you can see the background of the chart. This effect + * is quite new (1/10/2011) and as such should be used with caution. + * + * @param object obj The graph object + * @param object Not used + * @param int A number denoting how long (in millseconds) the animation should last for. Defauld + * is 1500 + */ + RGraph.Effects.Line.jQuery.Trace = function (obj) + { + RGraph.Clear(obj.canvas); + obj.Draw(); + + /** + * Create the DIV that the second canvas will sit in + */ + var div = document.createElement('DIV'); + var xy = RGraph.getCanvasXY(obj.canvas); + div.id = '__rgraph_trace_animation_' + RGraph.random(0, 4351623) + '__'; + div.style.left = xy[0] + 'px'; + div.style.top = xy[1] + 'px'; + div.style.width = obj.Get('chart.gutter.left'); + div.style.height = obj.canvas.height + 'px'; + div.style.position = 'absolute'; + div.style.overflow = 'hidden'; + document.body.appendChild(div); + + /** + * Make the second canvas + */ + var id = '__rgraph_line_reveal_animation_' + RGraph.random(0, 99999999) + '__'; + var canvas2 = document.createElement('CANVAS'); + canvas2.width = obj.canvas.width; + canvas2.height = obj.canvas.height; + canvas2.style.position = 'absolute'; + canvas2.style.left = 0; + canvas2.style.top = 0; + + canvas2.id = id; + div.appendChild(canvas2); + + var reposition_canvas2 = function (e) + { + var xy = RGraph.getCanvasXY(obj.canvas); + + div.style.left = xy[0] + 'px'; + div.style.top = xy[1] + 'px'; + } + window.addEventListener('resize', reposition_canvas2, false) + + /** + * Make a copy of the original Line object + */ + var obj2 = new RGraph.Line(id, RGraph.array_clone(obj.original_data)); + + for (i in obj.properties) { + if (typeof(i) == 'string' && obj.properties[i]) { + obj2.Set(i, obj.properties[i]); + } + } + + obj2.Set('chart.labels', []); + obj2.Set('chart.background.grid', false); + obj2.Set('chart.ylabels', false); + obj2.Set('chart.noaxes', true); + obj2.Set('chart.title', ''); + obj2.Set('chart.title.xaxis', ''); + obj2.Set('chart.title.yaxis', ''); + obj2.Draw(); + + /** + * This effectively hides the line + */ + obj.Set('chart.line.visible', false); + obj.Set('chart.colors', ['rgba(0,0,0,0)']); + if (obj.Get('chart.filled')) { + obj.Set('chart.fillstyle', 'rgba(0,0,0,0)'); + } + + RGraph.Clear(obj.canvas); + obj.Draw(); + + + /** + * Get rid of the second canvas and turn the line back on + * on the original. + */ + RGraph.Effects.Line.Trace_callback = function () + { + // Remove the window resize listener + window.removeEventListener('resize', reposition_canvas2, false); + + div.parentNode.removeChild(div); + div.removeChild(canvas2); + obj.Set('chart.line.visible', true); + + // Revert the filled status back to as it was + obj.Set('chart.filled', RGraph.array_clone(obj2.Get('chart.filled'))); + obj.Set('chart.fillstyle', RGraph.array_clone(obj2.Get('chart.fillstyle'))); + obj.Set('chart.colors', RGraph.array_clone(obj2.Get('chart.colors'))); + + RGraph.Clear(obj.canvas); + obj.Draw(); + } + + + $('#' + div.id).animate({ + width: obj.canvas.width + 'px' + }, arguments[2] ? arguments[2] : 1500, RGraph.Effects.Line.Trace_callback); + } + + + + /** + * RoundRobin + * + * This effect does two things: + * 1. Gradually increases the size of each segment + * 2. Gradually increases the size of the radius from 0 + * + * @param object obj The graph object + */ + RGraph.Effects.Pie.RoundRobin = function (obj) + { + var callback = arguments[2] ? arguments[2] : null; + var opt = arguments[1]; + obj.canvas.style.visibility = 'hidden'; + obj.Draw(); + obj.__animation_frame__ = 0; + + var targetRadius = typeof(obj.Get('chart.radius')) == 'number' ? obj.Get('chart.radius') : obj.getRadius(); + RGraph.Clear(obj.canvas); + + obj.canvas.style.visibility = 'visible'; + + function RoundRobin_inner () + { + // Increase this for a longer animation, decrease it for a shorter animation + var numFrames = 90; + + obj.Set('chart.effect.roundrobin.multiplier', Math.pow(Math.sin((obj.__animation_frame__ * (90 / numFrames)) / (180 / Math.PI)), 2) * (obj.__animation_frame__ / numFrames) ); + + if (!opt || opt['radius']) { + obj.Set('chart.radius', targetRadius * obj.Get('chart.effect.roundrobin.multiplier')); + } + + RGraph.Clear(obj.canvas) + obj.Draw(); + + if (obj.__animation_frame__ < numFrames) { + obj.__animation_frame__ += 1; + RGraph.Effects.UpdateCanvas(RoundRobin_inner); + + } else if (callback) { + callback(obj); + } + } + + RGraph.Effects.UpdateCanvas(RoundRobin_inner); + } + + + /** + * Implode (pie chart) + * + * Here the segments are initially exploded - and gradually + * contract inwards to create the Pie chart + * + * @param object obj The Pie chart object + */ + RGraph.Effects.Pie.Implode = function (obj) + { + var numFrames = 90; + var distance = Math.min(obj.canvas.width, obj.canvas.height); + + function Implode_inner () + { + obj.Set('chart.exploded', Math.sin(numFrames / 57.3) * distance); + RGraph.Clear(obj.canvas) + obj.Draw(); + + if (numFrames > 0) { + numFrames--; + RGraph.Effects.UpdateCanvas(Implode_inner); + } else { + // Finish off the animation + obj.Set('chart.exploded', 0); + RGraph.Clear(obj.canvas); + obj.Draw(); + } + } + + RGraph.Effects.UpdateCanvas(Implode_inner); + } + + + /** + * Gauge Grow + * + * This effect gradually increases the represented value + * + * @param object obj The chart object + * @param Not used - pass null + * @param function An optional callback function + */ + RGraph.Effects.Gauge.Grow = function (obj) + { + var numFrames = 30; + var origValue = Number(obj.currentValue); + + if (obj.currentValue == null) { + obj.currentValue = obj.min; + origValue = obj.min; + } + + var newValue = obj.value; + var diff = newValue - origValue; + var step = (diff / numFrames); + + + function Grow () + { + if (obj.currentValue != newValue) { + obj.value = Number(obj.currentValue) + step; + } + + if (obj.value > obj.max) { + obj.value = obj.max; + } + + if (obj.value < obj.min) { + obj.value = obj.min; + } + + RGraph.Clear(obj.canvas); + obj.Draw(); + + if (numFrames-- > 0) { + //setTimeout(Grow, 100); + RGraph.Effects.UpdateCanvas(Grow); + } + } + + //setTimeout(Grow, 100); + RGraph.Effects.UpdateCanvas(Grow); + } + + + /** + * Radar chart grow + * + * This effect gradually increases the magnitude of the points on the radar chart + * + * @param object obj The chart object + * @param null Not used + * @param function An optional callback that is run when the effect is finished + */ + RGraph.Effects.Radar.Grow = function (obj) + { + var totalframes = 30; + var framenum = totalframes; + var data = obj.data; + var callback = arguments[2]; + obj.data = []; + + function Grow_inner () + { + for (var i=0; i<data.length; ++i) { + + if (obj.data[i] == null) { + obj.data[i] = []; + } + + for (var j=0; j<data[i].length; ++j) { + obj.data[i][j] = ((totalframes - framenum)/totalframes) * data[i][j]; + } + } + + RGraph.Clear(obj.canvas); + obj.Draw(); + + if (framenum > 0) { + framenum--; + RGraph.Effects.UpdateCanvas(Grow_inner); + } else if (typeof(callback) == 'function') { + callback(obj); + } + } + + RGraph.Effects.UpdateCanvas(Grow_inner); + } + + + /** + * Waterfall Grow + * + * @param object obj The chart object + * @param null Not used + * @param function An optional function which is called when the animation is finished + */ + RGraph.Effects.Waterfall.Grow = function (obj) + { + var totalFrames = 45; + var numFrame = 0; + var data = RGraph.array_clone(obj.data); + var callback = arguments[2]; + + //Reset The data to zeros + for (var i=0; i<obj.data.length; ++i) { + obj.data[i] /= totalFrames; + + } + + /** + * Fix the scale + */ + if (obj.Get('chart.ymax') == null) { + var max = RGraph.getScale(obj.getMax(data))[4] + obj.Set('chart.ymax', max); + } + + obj.Set('chart.multiplier.x', 0); + obj.Set('chart.multiplier.w', 0); + + function Grow_inner () + { + for (var i=0; i<obj.data.length; ++i) { + obj.data[i] = data[i] * (numFrame/totalFrames); + } + + var multiplier = Math.pow(Math.sin(((numFrame / totalFrames) * 90) / 57.3), 20); + obj.Set('chart.multiplier.x', (numFrame / totalFrames) * multiplier); + obj.Set('chart.multiplier.w', (numFrame / totalFrames) * multiplier); + + RGraph.Clear(obj.canvas); + obj.Draw(); + + if (numFrame++ < totalFrames) { + RGraph.Effects.UpdateCanvas(Grow_inner); + } else if (typeof(callback) == 'function') { + callback(obj); + } + } + + RGraph.Effects.UpdateCanvas(Grow_inner) + }
\ No newline at end of file diff --git a/schall/static/RGraph/libraries/RGraph.common.resizing.js b/schall/static/RGraph/libraries/RGraph.common.resizing.js new file mode 100644 index 0000000..ee96747 --- /dev/null +++ b/schall/static/RGraph/libraries/RGraph.common.resizing.js @@ -0,0 +1,471 @@ + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + + if (typeof(RGraph) == 'undefined') RGraph = {isRGraph:true,type:'common'}; + + + /** + * This is an array of CSS properties that should be preserved when adding theplaceholder DIV + */ + __rgraph_resizing_preserve_css_properties__ = []; + + /** + * This function can be used to allow resizing + * + * @param object obj Your graph object + */ + RGraph.AllowResizing = function (obj) + { + if (obj.Get('chart.resizable')) { + var canvas = obj.canvas; + var context = obj.context; + var resizeHandle = 15; + RGraph.Resizing.canvas = canvas; + RGraph.Resizing.placeHolders = []; + + /** + * Add the original width and height to the canvas + */ + if (!canvas.__original_width__ && !canvas.__original_height__) { + canvas.__original_width__ = canvas.width; + canvas.__original_height__ = canvas.height; + } + + + var adjustX = (typeof(obj.Get('chart.resize.handle.adjust')) == 'object' && typeof(obj.Get('chart.resize.handle.adjust')[0]) == 'number' ? obj.Get('chart.resize.handle.adjust')[0] : 0); + var adjustY = (typeof(obj.Get('chart.resize.handle.adjust')) == 'object' && typeof(obj.Get('chart.resize.handle.adjust')[1]) == 'number' ? obj.Get('chart.resize.handle.adjust')[1] : 0); + + + /** + * Draw the resize handle + */ + var textWidth = context.measureText('Reset').width + 2; + + + // Draw the white background for the resize handle - OPTIONAL default is rgba(0,0,0,0); + var bgcolor = obj.Get('chart.resize.handle.background'); + + if (!bgcolor) { + bgcolor = 'rgba(0,0,0,0)'; + } + + context.beginPath(); + context.fillStyle = bgcolor; + context.moveTo(canvas.width - resizeHandle - resizeHandle + adjustX, canvas.height - resizeHandle); + context.fillRect(canvas.width - resizeHandle - resizeHandle + adjustX, canvas.height - resizeHandle + adjustY, 2 * resizeHandle, resizeHandle); + context.fill(); + + + obj.context.beginPath(); + obj.context.strokeStyle = 'gray'; + obj.context.fillStyle = 'rgba(0,0,0,0)'; + obj.context.lineWidth = 1; + obj.context.fillRect(obj.canvas.width - resizeHandle + adjustX, obj.canvas.height - resizeHandle - 2 + adjustY, resizeHandle, resizeHandle + 2); + obj.context.fillRect(obj.canvas.width - resizeHandle - textWidth + adjustX, obj.canvas.height - resizeHandle + adjustY, resizeHandle + textWidth, resizeHandle + 2); + + + // Draw the arrows + + // Vertical line + obj.context.moveTo(obj.canvas.width - (resizeHandle / 2) + adjustX, obj.canvas.height - resizeHandle + adjustY); + obj.context.lineTo(obj.canvas.width - (resizeHandle / 2) + adjustX, obj.canvas.height + adjustY); + + + // Horizontal line + obj.context.moveTo(obj.canvas.width + adjustX, obj.canvas.height - (resizeHandle / 2) + adjustY); + obj.context.lineTo(obj.canvas.width - resizeHandle + adjustX, obj.canvas.height - (resizeHandle / 2) + adjustY); + + context.fill(); + context.stroke(); + + + // Top arrow head + context.fillStyle = 'gray'; + context.beginPath(); + context.moveTo(canvas.width - (resizeHandle / 2) + adjustX, canvas.height - resizeHandle + adjustY); + context.lineTo(canvas.width - (resizeHandle / 2) + 3 + adjustX, canvas.height - resizeHandle + 3 + adjustY); + context.lineTo(canvas.width - (resizeHandle / 2) - 3 + adjustX, canvas.height - resizeHandle + 3 + adjustY); + context.closePath(); + context.fill(); + + // Bottom arrow head + context.beginPath(); + context.moveTo(canvas.width - (resizeHandle / 2) + adjustX, canvas.height + adjustY); + context.lineTo(canvas.width - (resizeHandle / 2) + 3 + adjustX, canvas.height - 3 + adjustY); + context.lineTo(canvas.width - (resizeHandle / 2) - 3 + adjustX, canvas.height - 3 + adjustY); + context.closePath(); + context.fill(); + + // Left arrow head + context.beginPath(); + context.moveTo(canvas.width - resizeHandle + adjustX, canvas.height - (resizeHandle / 2) + adjustY); + context.lineTo(canvas.width - resizeHandle + 3 + adjustX, canvas.height - (resizeHandle / 2) + 3 + adjustY); + context.lineTo(canvas.width - resizeHandle + 3 + adjustX, canvas.height - (resizeHandle / 2) - 3 + adjustY); + context.closePath(); + context.fill(); + + // Right arrow head + context.beginPath(); + context.moveTo(canvas.width + adjustX, canvas.height - (resizeHandle / 2) + adjustY); + context.lineTo(canvas.width - 3 + adjustX, canvas.height - (resizeHandle / 2) + 3 + adjustY); + context.lineTo(canvas.width - 3 + adjustX, canvas.height - (resizeHandle / 2) - 3 + adjustY); + context.closePath(); + context.fill(); + + // Square at the centre of the arrows + context.beginPath(); + context.fillStyle = 'white'; + context.moveTo(canvas.width + adjustX, canvas.height - (resizeHandle / 2) + adjustY); + context.strokeRect(canvas.width - (resizeHandle / 2) - 2 + adjustX, canvas.height - (resizeHandle / 2) - 2 + adjustY, 4, 4); + context.fillRect(canvas.width - (resizeHandle / 2) - 2 + adjustX, canvas.height - (resizeHandle / 2) - 2 + adjustY, 4, 4); + context.fill(); + context.stroke(); + + + // Draw the "Reset" button + context.beginPath(); + context.fillStyle = 'gray'; + context.moveTo(canvas.width - resizeHandle - 3 + adjustX, canvas.height - resizeHandle / 2 + adjustY); + context.lineTo(canvas.width - resizeHandle - resizeHandle + adjustX, canvas.height - (resizeHandle / 2) + adjustY); + context.lineTo(canvas.width - resizeHandle - resizeHandle + 2 + adjustX, canvas.height - (resizeHandle / 2) - 2 + adjustY); + context.lineTo(canvas.width - resizeHandle - resizeHandle + 2 + adjustX, canvas.height - (resizeHandle / 2) + 2 + adjustY); + context.lineTo(canvas.width - resizeHandle - resizeHandle + adjustX, canvas.height - (resizeHandle / 2) + adjustY); + context.stroke(); + context.fill(); + + context.beginPath(); + context.moveTo(canvas.width - resizeHandle - resizeHandle - 1 + adjustX, canvas.height - (resizeHandle / 2) - 3 + adjustY); + context.lineTo(canvas.width - resizeHandle - resizeHandle - 1 + adjustX, canvas.height - (resizeHandle / 2) + 3 + adjustY); + context.stroke(); + context.fill(); + + + + var window_onmousemove = function (e) + { + e = RGraph.FixEventObject(e); + + var canvas = RGraph.Resizing.canvas; + var newWidth = RGraph.Resizing.originalw - (RGraph.Resizing.originalx - e.pageX);// - 5 + var newHeight = RGraph.Resizing.originalh - (RGraph.Resizing.originaly - e.pageY);// - 5 + + if (RGraph.Resizing.mousedown) { + if (newWidth > (canvas.__original_width__ / 2)) RGraph.Resizing.div.style.width = newWidth + 'px'; + if (newHeight > (canvas.__original_height__ / 2)) RGraph.Resizing.div.style.height = newHeight + 'px'; + + RGraph.FireCustomEvent(canvas.__object__, 'onresize'); + } + } + window.addEventListener('mousemove', window_onmousemove, false); + RGraph.AddEventListener(canvas.id, 'window_mousemove', window_onmousemove); + + /** + * The window onmouseup function + */ + var MouseupFunc = function (e) + { + if (!RGraph.Resizing || !RGraph.Resizing.div || !RGraph.Resizing.mousedown) { + return; + } + + if (RGraph.Resizing.div) { + + var div = RGraph.Resizing.div; + var canvas = div.__canvas__; + var coords = RGraph.getCanvasXY(div.__canvas__); + + var parentNode = canvas.parentNode; + + if (canvas.style.position != 'absolute') { + // Create a DIV to go in the canvases place + var placeHolderDIV = document.createElement('DIV'); + placeHolderDIV.style.width = RGraph.Resizing.originalw + 'px'; + placeHolderDIV.style.height = RGraph.Resizing.originalh + 'px'; + //placeHolderDIV.style.backgroundColor = 'red'; + placeHolderDIV.style.display = 'inline-block'; // Added 5th Nov 2010 + placeHolderDIV.style.position = canvas.style.position; + placeHolderDIV.style.left = canvas.style.left; + placeHolderDIV.style.top = canvas.style.top; + placeHolderDIV.style.cssFloat = canvas.style.cssFloat; + + parentNode.insertBefore(placeHolderDIV, canvas); + } + + + // Now set the canvas to be positioned absolutely + canvas.style.backgroundColor = 'white'; + canvas.style.position = 'absolute'; + canvas.style.border = '1px dashed gray'; + canvas.style.left = (RGraph.Resizing.originalCanvasX - 1) + 'px'; + canvas.style.top = (RGraph.Resizing.originalCanvasY - 1) + 'px'; + + canvas.width = parseInt(div.style.width); + canvas.height = parseInt(div.style.height); + + + + /** + * Fire the onresize event + */ + RGraph.FireCustomEvent(canvas.__object__, 'onresizebeforedraw'); + + canvas.__object__.Draw(); + + // Get rid of transparent semi-opaque DIV + RGraph.Resizing.mousedown = false; + div.style.display = 'none'; + document.body.removeChild(div); + } + + /** + * If there is zoom enabled in thumbnail mode, lose the zoom image + */ + if (RGraph.Registry.Get('chart.zoomed.div') || RGraph.Registry.Get('chart.zoomed.img')) { + RGraph.Registry.Set('chart.zoomed.div', null); + RGraph.Registry.Set('chart.zoomed.img', null); + } + + /** + * Fire the onresize event + */ + RGraph.FireCustomEvent(canvas.__object__, 'onresizeend'); + } + + + var window_onmouseup = MouseupFunc; + window.addEventListener('onmouseup', window_onmouseup, false); + RGraph.AddEventListener(canvas.id, 'window_mouseup', window_onmouseup); + + + var canvas_onmousemove = function (e) + { + e = RGraph.FixEventObject(e); + + var coords = RGraph.getMouseXY(e); + var canvas = e.target; + var context = canvas.getContext('2d'); + //var orig_cursor = canvas.style.cursor; // Used for playing well with tooltips + + RGraph.Resizing.title = canvas.title; + + if ( (coords[0] > (canvas.width - resizeHandle) + && coords[0] < canvas.width + && coords[1] > (canvas.height - resizeHandle) + && coords[1] < canvas.height)) { + + canvas.style.cursor = 'move'; + + if (navigator.userAgent.indexOf('Chrome') > 0 || document.all) { + canvas.title = 'Resize the graph'; + } + + } else if ( coords[0] > (canvas.width - resizeHandle - resizeHandle) + && coords[0] < canvas.width - resizeHandle + && coords[1] > (canvas.height - resizeHandle) + && coords[1] < canvas.height) { + + canvas.style.cursor = 'pointer'; + + if (navigator.userAgent.indexOf('Chrome') > 0 || document.all) { + canvas.title = 'Reset graph to original size'; + } + + } else { + + // orig_cursor + canvas.style.cursor = 'default'; + canvas.title = ''; + } + } + canvas.addEventListener('mousemove', canvas_onmousemove, false); + RGraph.AddEventListener(canvas.id, 'mousemove', canvas_onmousemove); + + + + var canvas_onmouseout = function (e) + { + e.target.style.cursor = 'default'; + e.target.title = ''; + } + canvas.addEventListener('mouseout', canvas_onmouseout, false); + RGraph.AddEventListener(canvas.id, 'mouseout', canvas_onmouseout); + + + + var canvas_onmousedown = function (e) + { + e = RGraph.FixEventObject(e); + + var coords = RGraph.getMouseXY(e); + var canvasCoords = RGraph.getCanvasXY(e.target); + var canvas = e.target; + + if ( coords[0] > (obj.canvas.width - resizeHandle) + && coords[0] < obj.canvas.width + && coords[1] > (obj.canvas.height - resizeHandle) + && coords[1] < obj.canvas.height) { + + RGraph.FireCustomEvent(obj, 'onresizebegin'); + + // Save the existing border + if (canvas.__original_css_border__ == null) { + canvas.__original_css_border__ = canvas.style.border; + } + + RGraph.Resizing.mousedown = true; + + + /** + * Create the semi-opaque DIV + */ + + var div = document.createElement('DIV'); + div.style.position = 'absolute'; + div.style.left = canvasCoords[0] + 'px'; + div.style.top = canvasCoords[1] + 'px'; + div.style.width = canvas.width + 'px'; + div.style.height = canvas.height + 'px'; + div.style.border = '1px dotted black'; + div.style.backgroundColor = 'gray'; + div.style.opacity = 0.5; + div.__canvas__ = e.target; + + document.body.appendChild(div); + RGraph.Resizing.div = div; + RGraph.Resizing.placeHolders.push(div); + + // Hide the previous resize indicator layers. This is only necessary it seems for the Meter chart + for (var i=0; i<(RGraph.Resizing.placeHolders.length - 1); ++i) { + RGraph.Resizing.placeHolders[i].style.display = 'none'; + } + + // This is a repetition of the window.onmouseup function (No need to use DOM2 here) + div.onmouseup = function (e) + { + MouseupFunc(e); + } + + + // No need to use DOM2 here + RGraph.Resizing.div.onmouseover = function (e) + { + e = RGraph.FixEventObject(e); + e.stopPropagation(); + } + + // The mouse + RGraph.Resizing.originalx = e.pageX; + RGraph.Resizing.originaly = e.pageY; + + RGraph.Resizing.originalw = obj.canvas.width; + RGraph.Resizing.originalh = obj.canvas.height; + + RGraph.Resizing.originalCanvasX = RGraph.getCanvasXY(obj.canvas)[0]; + RGraph.Resizing.originalCanvasY = RGraph.getCanvasXY(obj.canvas)[1]; + } + + + /** + * This facilitates the reset button + */ + if ( coords[0] > (canvas.width - resizeHandle - resizeHandle) + && coords[0] < canvas.width - resizeHandle + && coords[1] > (canvas.height - resizeHandle) + && coords[1] < canvas.height) { + + /** + * Fire the onresizebegin event + */ + RGraph.FireCustomEvent(canvas.__object__, 'onresizebegin'); + + // Restore the original width and height + canvas.width = canvas.__original_width__; + canvas.height = canvas.__original_height__; + + // Lose the border + canvas.style.border = canvas.__original_css_border__; + //canvas.__original_css_border__ = null; + + // Add 1 pixel to the top/left because the border is going + canvas.style.left = (parseInt(canvas.style.left)) + 'px'; + canvas.style.top = (parseInt(canvas.style.top)) + 'px'; + + + RGraph.FireCustomEvent(canvas.__object__, 'onresizebeforedraw'); + + // Redraw the canvas + canvas.__object__.Draw(); + + // Set the width and height on the DIV + if (RGraph.Resizing.div) { + RGraph.Resizing.div.style.width = canvas.__original_width__ + 'px'; + RGraph.Resizing.div.style.height = canvas.__original_height__ + 'px'; + } + + /** + * Fire the resize event + */ + RGraph.FireCustomEvent(canvas.__object__, 'onresize'); + RGraph.FireCustomEvent(canvas.__object__, 'onresizeend'); + } + } + canvas.addEventListener('mousedown', canvas_onmousedown, false); + RGraph.AddEventListener(canvas.id, 'mousedown', canvas_onmousedown); + + + /** + * This function facilitates the reset button + * + * NOTE: 31st December 2010 - doesn't appear to be being used any more + */ + + /* + canvas.onclick = function (e) + { + var coords = RGraph.getMouseXY(e); + var canvas = e.target; + + if ( coords[0] > (canvas.width - resizeHandle - resizeHandle) + && coords[0] < canvas.width - resizeHandle + && coords[1] > (canvas.height - resizeHandle) + && coords[1] < canvas.height) { + + // Restore the original width and height + canvas.width = canvas.__original_width__; + canvas.height = canvas.__original_height__; + + // Lose the border + canvas.style.border = ''; + + // Add 1 pixel to the top/left because the border is going + canvas.style.left = (parseInt(canvas.style.left) + 1) + 'px'; + canvas.style.top = (parseInt(canvas.style.top) + 1) + 'px'; + + // Fire the onresizebeforedraw event + RGraph.FireCustomEvent(canvas.__object__, 'onresizebeforedraw'); + + // Redraw the canvas + canvas.__object__.Draw(); + + // Set the width and height on the DIV + RGraph.Resizing.div.style.width = canvas.__original_width__ + 'px'; + RGraph.Resizing.div.style.height = canvas.__original_height__ + 'px'; + + // Fire the resize event + RGraph.FireCustomEvent(canvas.__object__, 'onresize'); + } + } + */ + } + }
\ No newline at end of file diff --git a/schall/static/RGraph/libraries/RGraph.common.tooltips.js b/schall/static/RGraph/libraries/RGraph.common.tooltips.js new file mode 100644 index 0000000..3df3ded --- /dev/null +++ b/schall/static/RGraph/libraries/RGraph.common.tooltips.js @@ -0,0 +1,847 @@ + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + + if (typeof(RGraph) == 'undefined') RGraph = {isRGraph:true,type:'common'}; + + /** + * This is used in two functions, hence it's here + */ + RGraph.tooltips = {}; + RGraph.tooltips.padding = '3px'; + RGraph.tooltips.font_face = 'Tahoma'; + RGraph.tooltips.font_size = '10pt'; + + + /** + * Shows a tooltip next to the mouse pointer + * + * @param canvas object The canvas element object + * @param text string The tooltip text + * @param int x The X position that the tooltip should appear at. Combined with the canvases offsetLeft + * gives the absolute X position + * @param int y The Y position the tooltip should appear at. Combined with the canvases offsetTop + * gives the absolute Y position + * @param int idx The index of the tooltip in the graph objects tooltip array + */ + RGraph.Tooltip = function (canvas, text, x, y, idx) + { + /** + * chart.tooltip.override allows you to totally take control of rendering the tooltip yourself + */ + if (typeof(canvas.__object__.Get('chart.tooltips.override')) == 'function') { + return canvas.__object__.Get('chart.tooltips.override')(canvas, text, x, y, idx); + } + + /** + * This facilitates the "id:xxx" format + */ + text = RGraph.getTooltipTextFromDIV(text); + + /** + * First clear any exising timers + */ + var timers = RGraph.Registry.Get('chart.tooltip.timers'); + + if (timers && timers.length) { + for (i=0; i<timers.length; ++i) { + clearTimeout(timers[i]); + } + } + RGraph.Registry.Set('chart.tooltip.timers', []); + + /** + * Hide the context menu if it's currently shown + */ + if (canvas.__object__.Get('chart.contextmenu')) { + RGraph.HideContext(); + } + + // Redraw the canvas? + if (canvas.__object__.Get('chart.tooltips.highlight')) { + RGraph.Redraw(canvas.id); + } + + var effect = canvas.__object__.Get('chart.tooltips.effect').toLowerCase(); + + if (effect == 'snap' && RGraph.Registry.Get('chart.tooltip') && RGraph.Registry.Get('chart.tooltip').__canvas__.id == canvas.id) { + + if ( canvas.__object__.type == 'line' + || canvas.__object__.type == 'radar' + || canvas.__object__.type == 'scatter' + || canvas.__object__.type == 'rscatter' + ) { + + var tooltipObj = RGraph.Registry.Get('chart.tooltip'); + + + tooltipObj.style.width = null; + tooltipObj.style.height = null; + + tooltipObj.innerHTML = text; + tooltipObj.__text__ = text; + + /** + * Now that the new content has been set, re-set the width & height + */ + RGraph.Registry.Get('chart.tooltip').style.width = RGraph.getTooltipWidth(text, canvas.__object__) + 'px'; + RGraph.Registry.Get('chart.tooltip').style.height = RGraph.Registry.Get('chart.tooltip').offsetHeight + 'px'; + + /** + * Now (25th September 2011) use jQuery if it's available + */ + if (typeof(jQuery) == 'function' && typeof($) == 'function') { + $('#' + tooltipObj.id).animate({ + opacity: 1, + width: tooltipObj.offsetWidth + 'px', + height: tooltipObj.offsetHeight + 'px', + left: x + 'px', + top: (y - tooltipObj.offsetHeight) + 'px' + }, 150); + } else { + var currentx = parseInt(RGraph.Registry.Get('chart.tooltip').style.left); + var currenty = parseInt(RGraph.Registry.Get('chart.tooltip').style.top); + + var diffx = x - currentx - ((x + RGraph.Registry.Get('chart.tooltip').offsetWidth) > document.body.offsetWidth ? RGraph.Registry.Get('chart.tooltip').offsetWidth : 0); + var diffy = y - currenty - RGraph.Registry.Get('chart.tooltip').offsetHeight; + + // Position the tooltip + setTimeout('RGraph.Registry.Get("chart.tooltip").style.left = "' + (currentx + (diffx * 0.2)) + 'px"', 25); + setTimeout('RGraph.Registry.Get("chart.tooltip").style.left = "' + (currentx + (diffx * 0.4)) + 'px"', 50); + setTimeout('RGraph.Registry.Get("chart.tooltip").style.left = "' + (currentx + (diffx * 0.6)) + 'px"', 75); + setTimeout('RGraph.Registry.Get("chart.tooltip").style.left = "' + (currentx + (diffx * 0.8)) + 'px"', 100); + setTimeout('RGraph.Registry.Get("chart.tooltip").style.left = "' + (currentx + (diffx * 1.0)) + 'px"', 125); + + setTimeout('RGraph.Registry.Get("chart.tooltip").style.top = "' + (currenty + (diffy * 0.2)) + 'px"', 25); + setTimeout('RGraph.Registry.Get("chart.tooltip").style.top = "' + (currenty + (diffy * 0.4)) + 'px"', 50); + setTimeout('RGraph.Registry.Get("chart.tooltip").style.top = "' + (currenty + (diffy * 0.6)) + 'px"', 75); + setTimeout('RGraph.Registry.Get("chart.tooltip").style.top = "' + (currenty + (diffy * 0.8)) + 'px"', 100); + setTimeout('RGraph.Registry.Get("chart.tooltip").style.top = "' + (currenty + (diffy * 1.0)) + 'px"', 125); + } + + } else { + + alert('[TOOLTIPS] The "snap" effect is only supported on the Line, Rscatter, Scatter and Radar charts (tried to use it with type: ' + canvas.__object__.type); + } + + /** + * Fire the tooltip event + */ + RGraph.FireCustomEvent(canvas.__object__, 'ontooltip'); + + return; + } + + /** + * Hide any currently shown tooltip + */ + RGraph.HideTooltip(); + + + /** + * Show a tool tip + */ + var tooltipObj = document.createElement('DIV'); + tooltipObj.className = canvas.__object__.Get('chart.tooltips.css.class'); + tooltipObj.style.display = 'none'; + tooltipObj.style.position = 'absolute'; + tooltipObj.style.left = 0; + tooltipObj.style.top = 0; + tooltipObj.style.backgroundColor = 'rgba(255,255,239,0.9)'; + tooltipObj.style.color = 'black'; + if (!document.all) tooltipObj.style.border = ''; + tooltipObj.style.visibility = 'visible'; + tooltipObj.style.paddingLeft = RGraph.tooltips.padding; + tooltipObj.style.paddingRight = RGraph.tooltips.padding; + tooltipObj.style.fontFamily = RGraph.tooltips.font_face; + tooltipObj.style.fontSize = RGraph.tooltips.font_size; + tooltipObj.style.zIndex = 3; + tooltipObj.style.borderRadius = '5px'; + tooltipObj.style.MozBorderRadius = '5px'; + tooltipObj.style.WebkitBorderRadius = '5px'; + tooltipObj.style.WebkitBoxShadow = 'rgba(96,96,96,0.5) 0 0 15px'; + tooltipObj.style.MozBoxShadow = 'rgba(96,96,96,0.5) 0 0 15px'; + tooltipObj.style.boxShadow = 'rgba(96,96,96,0.5) 0 0 15px'; + tooltipObj.style.filter = 'progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=135)'; + tooltipObj.style.opacity = 0; + tooltipObj.style.overflow = 'hidden'; + tooltipObj.innerHTML = text; + tooltipObj.__text__ = text; // This is set because the innerHTML can change when it's set + tooltipObj.__canvas__ = canvas; + tooltipObj.style.display = 'inline'; + tooltipObj.id = '__rgraph_tooltip_' + canvas.id + '_' + idx; + + if (typeof(idx) == 'number') { + tooltipObj.__index__ = idx; + + /** + * Just for the line chart + */ + if (canvas.__object__.type == 'line') { + var index2 = idx; + + while (index2 >= canvas.__object__.data[0].length) { + index2 -= canvas.__object__.data[0].length; + } + + tooltipObj.__index2__ = index2; + } + } + + document.body.appendChild(tooltipObj); + + var width = tooltipObj.offsetWidth; + var height = tooltipObj.offsetHeight; + + if ((y - height - 2) > 0) { + y = y - height - 2; + } else { + y = y + 2; + } + + /** + * Set the width on the tooltip so it doesn't resize if the window is resized + */ + tooltipObj.style.width = width + 'px'; + //tooltipObj.style.height = 0; // Initially set the tooltip height to nothing + + /** + * If the mouse is towards the right of the browser window and the tooltip would go outside of the window, + * move it left + */ + if ( (x + width) > document.body.offsetWidth ) { + x = x - width - 7; + var placementLeft = true; + + if (canvas.__object__.Get('chart.tooltips.effect') == 'none') { + x = x - 3; + } + + tooltipObj.style.left = x + 'px'; + tooltipObj.style.top = y + 'px'; + + } else { + x += 5; + + tooltipObj.style.left = x + 'px'; + tooltipObj.style.top = y + 'px'; + } + + + if (effect == 'expand') { + + tooltipObj.style.left = (x + (width / 2)) + 'px'; + tooltipObj.style.top = (y + (height / 2)) + 'px'; + leftDelta = (width / 2) / 10; + topDelta = (height / 2) / 10; + + tooltipObj.style.width = 0; + tooltipObj.style.height = 0; + //tooltipObj.style.boxShadow = ''; + //tooltipObj.style.MozBoxShadow = ''; + //tooltipObj.style.WebkitBoxShadow = ''; + //tooltipObj.style.borderRadius = 0; + //tooltipObj.style.MozBorderRadius = 0; + //tooltipObj.style.WebkitBorderRadius = 0; + tooltipObj.style.opacity = 1; + + // Progressively move the tooltip to where it should be (the x position) + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.left = (parseInt(RGraph.Registry.Get('chart.tooltip').style.left) - leftDelta) + 'px' }", 25)); + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.left = (parseInt(RGraph.Registry.Get('chart.tooltip').style.left) - leftDelta) + 'px' }", 50)); + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.left = (parseInt(RGraph.Registry.Get('chart.tooltip').style.left) - leftDelta) + 'px' }", 75)); + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.left = (parseInt(RGraph.Registry.Get('chart.tooltip').style.left) - leftDelta) + 'px' }", 100)); + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.left = (parseInt(RGraph.Registry.Get('chart.tooltip').style.left) - leftDelta) + 'px' }", 125)); + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.left = (parseInt(RGraph.Registry.Get('chart.tooltip').style.left) - leftDelta) + 'px' }", 150)); + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.left = (parseInt(RGraph.Registry.Get('chart.tooltip').style.left) - leftDelta) + 'px' }", 175)); + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.left = (parseInt(RGraph.Registry.Get('chart.tooltip').style.left) - leftDelta) + 'px' }", 200)); + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.left = (parseInt(RGraph.Registry.Get('chart.tooltip').style.left) - leftDelta) + 'px' }", 225)); + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.left = (parseInt(RGraph.Registry.Get('chart.tooltip').style.left) - leftDelta) + 'px' }", 250)); + + // Progressively move the tooltip to where it should be (the Y position) + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.top = (parseInt(RGraph.Registry.Get('chart.tooltip').style.top) - topDelta) + 'px' }", 25)); + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.top = (parseInt(RGraph.Registry.Get('chart.tooltip').style.top) - topDelta) + 'px' }", 50)); + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.top = (parseInt(RGraph.Registry.Get('chart.tooltip').style.top) - topDelta) + 'px' }", 75)); + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.top = (parseInt(RGraph.Registry.Get('chart.tooltip').style.top) - topDelta) + 'px' }", 100)); + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.top = (parseInt(RGraph.Registry.Get('chart.tooltip').style.top) - topDelta) + 'px' }", 125)); + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.top = (parseInt(RGraph.Registry.Get('chart.tooltip').style.top) - topDelta) + 'px' }", 150)); + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.top = (parseInt(RGraph.Registry.Get('chart.tooltip').style.top) - topDelta) + 'px' }", 175)); + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.top = (parseInt(RGraph.Registry.Get('chart.tooltip').style.top) - topDelta) + 'px' }", 200)); + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.top = (parseInt(RGraph.Registry.Get('chart.tooltip').style.top) - topDelta) + 'px' }", 225)); + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.top = (parseInt(RGraph.Registry.Get('chart.tooltip').style.top) - topDelta) + 'px' }", 250)); + + // Progressively grow the tooltip width + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.width = '" + (width * 0.1) + "px'; }", 25)); + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.width = '" + (width * 0.2) + "px'; }", 50)); + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.width = '" + (width * 0.3) + "px'; }", 75)); + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.width = '" + (width * 0.4) + "px'; }", 100)); + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.width = '" + (width * 0.5) + "px'; }", 125)); + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.width = '" + (width * 0.6) + "px'; }", 150)); + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.width = '" + (width * 0.7) + "px'; }", 175)); + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.width = '" + (width * 0.8) + "px'; }", 200)); + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.width = '" + (width * 0.9) + "px'; }", 225)); + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.width = '" + width + "px'; }", 250)); + + // Progressively grow the tooltip height + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.height = '" + (height * 0.1) + "px'; }", 25)); + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.height = '" + (height * 0.2) + "px'; }", 50)); + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.height = '" + (height * 0.3) + "px'; }", 75)); + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.height = '" + (height * 0.4) + "px'; }", 100)); + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.height = '" + (height * 0.5) + "px'; }", 125)); + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.height = '" + (height * 0.6) + "px'; }", 150)); + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.height = '" + (height * 0.7) + "px'; }", 175)); + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.height = '" + (height * 0.8) + "px'; }", 200)); + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.height = '" + (height * 0.9) + "px'; }", 225)); + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.height = '" + height + "px'; }", 250)); + + // When the animation is finished, set the tooltip HTML + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').innerHTML = RGraph.Registry.Get('chart.tooltip').__text__; }", 250)); + + } else if (effect == 'contract') { + + tooltipObj.style.left = (x - width) + 'px'; + tooltipObj.style.top = (y - (height * 2)) + 'px'; + tooltipObj.style.cursor = 'pointer'; + + leftDelta = width / 10; + topDelta = height / 10; + + tooltipObj.style.width = (width * 5) + 'px'; + tooltipObj.style.height = (height * 5) + 'px'; + + tooltipObj.style.opacity = 0.2; + + // Progressively move the tooltip to where it should be (the x position) + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.left = (parseInt(RGraph.Registry.Get('chart.tooltip').style.left) + leftDelta) + 'px' }", 25)); + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.left = (parseInt(RGraph.Registry.Get('chart.tooltip').style.left) + leftDelta) + 'px' }", 50)); + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.left = (parseInt(RGraph.Registry.Get('chart.tooltip').style.left) + leftDelta) + 'px' }", 75)); + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.left = (parseInt(RGraph.Registry.Get('chart.tooltip').style.left) + leftDelta) + 'px' }", 100)); + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.left = (parseInt(RGraph.Registry.Get('chart.tooltip').style.left) + leftDelta) + 'px' }", 125)); + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.left = (parseInt(RGraph.Registry.Get('chart.tooltip').style.left) + leftDelta) + 'px' }", 150)); + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.left = (parseInt(RGraph.Registry.Get('chart.tooltip').style.left) + leftDelta) + 'px' }", 175)); + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.left = (parseInt(RGraph.Registry.Get('chart.tooltip').style.left) + leftDelta) + 'px' }", 200)); + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.left = (parseInt(RGraph.Registry.Get('chart.tooltip').style.left) + leftDelta) + 'px' }", 225)); + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.left = (parseInt(RGraph.Registry.Get('chart.tooltip').style.left) + leftDelta) + 'px' }", 250)); + + // Progressively move the tooltip to where it should be (the Y position) + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.top = (parseInt(RGraph.Registry.Get('chart.tooltip').style.top) + (topDelta*2)) + 'px' }", 25)); + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.top = (parseInt(RGraph.Registry.Get('chart.tooltip').style.top) + (topDelta*2)) + 'px' }", 50)); + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.top = (parseInt(RGraph.Registry.Get('chart.tooltip').style.top) + (topDelta*2)) + 'px' }", 75)); + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.top = (parseInt(RGraph.Registry.Get('chart.tooltip').style.top) + (topDelta*2)) + 'px' }", 100)); + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.top = (parseInt(RGraph.Registry.Get('chart.tooltip').style.top) + (topDelta*2)) + 'px' }", 125)); + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.top = (parseInt(RGraph.Registry.Get('chart.tooltip').style.top) + (topDelta*2)) + 'px' }", 150)); + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.top = (parseInt(RGraph.Registry.Get('chart.tooltip').style.top) + (topDelta*2)) + 'px' }", 175)); + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.top = (parseInt(RGraph.Registry.Get('chart.tooltip').style.top) + (topDelta*2)) + 'px' }", 200)); + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.top = (parseInt(RGraph.Registry.Get('chart.tooltip').style.top) + (topDelta*2)) + 'px' }", 225)); + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.top = (parseInt(RGraph.Registry.Get('chart.tooltip').style.top) + (topDelta*2)) + 'px' }", 250)); + + // Progressively shrink the tooltip width + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.width = '" + (width * 5.5) + "px'; }", 25)); + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.width = '" + (width * 5.0) + "px'; }", 50)); + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.width = '" + (width * 4.5) + "px'; }", 75)); + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.width = '" + (width * 4.0) + "px'; }", 100)); + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.width = '" + (width * 3.5) + "px'; }", 125)); + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.width = '" + (width * 3.0) + "px'; }", 150)); + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.width = '" + (width * 2.5) + "px'; }", 175)); + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.width = '" + (width * 2.0) + "px'; }", 200)); + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.width = '" + (width * 1.5) + "px'; }", 225)); + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.width = '" + width + "px'; }", 250)); + + // Progressively shrink the tooltip height + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.height = '" + (height * 5.5) + "px'; }", 25)); + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.height = '" + (height * 5.0) + "px'; }", 50)); + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.height = '" + (height * 4.5) + "px'; }", 75)); + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.height = '" + (height * 4.0) + "px'; }", 100)); + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.height = '" + (height * 3.5) + "px'; }", 125)); + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.height = '" + (height * 3.0) + "px'; }", 150)); + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.height = '" + (height * 2.5) + "px'; }", 175)); + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.height = '" + (height * 2.0) + "px'; }", 200)); + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.height = '" + (height * 1.5) + "px'; }", 225)); + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.height = '" + height + "px'; }", 250)); + + // When the animation is finished, set the tooltip HTML + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').innerHTML = RGraph.Registry.Get('chart.tooltip').__text__; }", 250)); + + /** + * This resets the pointer + */ + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.cursor = 'default'; }", 275)); + + } else if (effect == 'snap') { + + /******************************************************* + * Move the tooltip + *******************************************************/ + for (var i=1; i<=10; ++i) { + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.left = '" + (x * 0.1 * i) + "px'; }", 15 * i)); + RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.top = '" + (y * 0.1 * i) + "px'; }", 15 * i)); + } + + tooltipObj.style.left = 0 - tooltipObj.offsetWidth + 'px'; + tooltipObj.style.top = 0 - tooltipObj.offsetHeight + 'px'; + + } else if (effect != 'fade' && effect != 'expand' && effect != 'none' && effect != 'snap' && effect != 'contract') { + alert('[COMMON] Unknown tooltip effect: ' + effect); + } + + if (effect != 'none') { + setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.opacity = 0.1; }", 25); + setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.opacity = 0.2; }", 50); + setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.opacity = 0.3; }", 75); + setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.opacity = 0.4; }", 100); + setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.opacity = 0.5; }", 125); + setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.opacity = 0.6; }", 150); + setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.opacity = 0.7; }", 175); + setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.opacity = 0.8; }", 200); + setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.opacity = 0.9; }", 225); + } + + setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.opacity = 1;}", effect == 'none' ? 50 : 250); + + /** + * If the tooltip it self is clicked, cancel it + */ + tooltipObj.onmousedown = function (e) + { + e = RGraph.FixEventObject(e) + e.stopPropagation(); + } + + tooltipObj.onclick = function (e) + { + if (e.button == 0) { + e = RGraph.FixEventObject(e); + e.stopPropagation(); + } + } + + /** + * Install the function for hiding the tooltip. + */ + document.body.onmousedown = function (event) + { + var tooltip = RGraph.Registry.Get('chart.tooltip'); + + if (tooltip) { + RGraph.HideTooltip(); + + // Redraw if highlighting is enabled + if (tooltip.__canvas__.__object__.Get('chart.tooltips.highlight')) { + RGraph.Redraw(); + } + } + } + + /** + * If the window is resized, hide the tooltip + */ + window.onresize = function () + { + var tooltip = RGraph.Registry.Get('chart.tooltip'); + + if (tooltip) { + tooltip.parentNode.removeChild(tooltip); + tooltip.style.display = 'none'; + tooltip.style.visibility = 'hidden'; + RGraph.Registry.Set('chart.tooltip', null); + + // Redraw the graph if necessary + if (canvas.__object__.Get('chart.tooltips.highlight')) { + RGraph.Clear(canvas); + canvas.__object__.Draw(); + } + } + } + + /** + * Keep a reference to the tooltip + */ + RGraph.Registry.Set('chart.tooltip', tooltipObj); + + /** + * Fire the tooltip event + */ + RGraph.FireCustomEvent(canvas.__object__, 'ontooltip'); + } + + + /** + * + */ + RGraph.getTooltipTextFromDIV = function (text) + { + var result = /^id:(.*)/.exec(text); + + if (result && result[1] && document.getElementById(result[1])) { + text = document.getElementById(result[1]).innerHTML; + } + + return text; + } + + + /** + * This function handles the tooltip text being a string, function, or an array of functions. + */ + RGraph.parseTooltipText = function (tooltips, idx) + { + // Get the tooltip text + if (typeof(tooltips) == 'function') { + var text = tooltips(idx); + + } else if (typeof(tooltips) == 'object' && tooltips && typeof(tooltips[idx]) == 'function') { + var text = tooltips[idx](idx); + + } else if (typeof(tooltips) == 'object' && tooltips) { + var text = String(tooltips[idx]); + + } else { + var text = ''; + } + + if (text == 'undefined') { + text = ''; + } + + return text; + } + + + /** + * + */ + RGraph.getTooltipWidth = function (text, obj) + { + var div = document.createElement('DIV'); + div.className = obj.Get('chart.tooltips.css.class'); + div.style.paddingLeft = RGraph.tooltips.padding; + div.style.paddingRight = RGraph.tooltips.padding; + div.style.fontFamily = RGraph.tooltips.font_face; + div.style.fontSize = RGraph.tooltips.font_size; + div.style.visibility = 'hidden'; + div.style.position = 'absolute'; + div.style.top = '300px'; + div.style.left = 0; + div.style.display = 'inline'; + div.innerHTML = RGraph.getTooltipTextFromDIV(text); + document.body.appendChild(div); + + return div.offsetWidth; + } + + + /** + * Hides the currently shown tooltip + */ + RGraph.HideTooltip = function () + { + var tooltip = RGraph.Registry.Get('chart.tooltip'); + + if (tooltip) { + tooltip.parentNode.removeChild(tooltip); + tooltip.style.display = 'none'; + tooltip.style.visibility = 'hidden'; + RGraph.Registry.Set('chart.tooltip', null); + } + } + + + + + + + /** + * The BAR chart onmousemove event Bar chart tooltips can now + * be based around the onmousemove event + */ + RGraph.InstallBarTooltipEventListeners = function (obj) + { + /** + * Install the window onclick handler + */ + var window_onclick_func = function (){RGraph.Redraw();}; + window.addEventListener('click', window_onclick_func, false); + RGraph.AddEventListener('window_' + obj.id, 'click', window_onclick_func); + + + var canvas_onmousemove = function (e) + { + e = RGraph.FixEventObject(e); + + var canvas = document.getElementById(e.target.id); + var obj = canvas.__object__; + + if (obj.__bar__) { + var lineObj = obj; + obj = obj.__bar__; + obj.__line__ = lineObj; + } + + var barCoords = obj.getBar(e); + + /** + * If there are bar coords AND the bar has height + */ + + if (barCoords && barCoords[4] > 0) { + + /** + * Get the tooltip text + */ + var text = RGraph.parseTooltipText(obj.Get('chart.tooltips'), barCoords[5]); + + + if (text) { + canvas.style.cursor = 'pointer'; + } else { + canvas.style.cursor = 'default'; + } + + /** + * Hide the currently displayed tooltip if the index is the same + */ + if ( RGraph.Registry.Get('chart.tooltip') + && RGraph.Registry.Get('chart.tooltip').__canvas__.id != obj.id + && obj.Get('chart.tooltips.event') == 'onmousemove') { + + RGraph.Redraw(); + RGraph.HideTooltip(); + } + + /** + * This facilitates the tooltips using the onmousemove event + */ + + if ( obj.Get('chart.tooltips.event') == 'onmousemove' + && ( + (RGraph.Registry.Get('chart.tooltip') && RGraph.Registry.Get('chart.tooltip').__index__ != barCoords[5]) + || !RGraph.Registry.Get('chart.tooltip') + ) + && text) { + /** + * Show a tooltip if it's defined + */ + RGraph.Redraw(obj); + + if (obj.Get('chart.tooltips.highlight')) { + obj.context.beginPath(); + obj.context.strokeStyle = obj.Get('chart.highlight.stroke'); + obj.context.fillStyle = obj.Get('chart.highlight.fill'); + obj.context.strokeRect(barCoords[1], barCoords[2], barCoords[3], barCoords[4]); + obj.context.fillRect(barCoords[1], barCoords[2], barCoords[3], barCoords[4]); + + obj.context.stroke(); + obj.context.fill(); + } + + RGraph.Tooltip(canvas, text, e.pageX, e.pageY, barCoords[5]); + } + } else if (obj.__line__ && obj.__line__.getPoint && obj.__line__.getPoint(e)) { + canvas.style.cursor = 'pointer'; + } else { + canvas.style.cursor = 'default'; + } + } + RGraph.AddEventListener(obj.id, 'mousemove', canvas_onmousemove); + obj.canvas.addEventListener('mousemove', canvas_onmousemove, false); + + + + /** + * Install the onclick event handler for the tooltips + */ + if (obj.Get('chart.tooltips.event') == 'onclick') { + + var canvas_onclick = function (e) + { + var e = RGraph.FixEventObject(e); + + // If the button pressed isn't the left, we're not interested + if (e.button != 0) return; + + e = RGraph.FixEventObject(e); + + var canvas = document.getElementById(this.id); + var obj = canvas.__object__; + + if (obj.__bar__) { + obj = obj.__bar__; + } + + var barCoords = obj.getBar(e); + + /** + * Redraw the graph first, in effect resetting the graph to as it was when it was first drawn + * This "deselects" any already selected bar + */ + RGraph.Redraw(); + + /** + * Loop through the bars determining if the mouse is over a bar + */ + if (barCoords) { + + /** + * Get the tooltip text + */ + var text = RGraph.parseTooltipText(obj.Get('chart.tooltips'), barCoords[5]); + + /** + * Show a tooltip if it's defined + */ + if (text && text != 'undefined') { + if (obj.Get('chart.tooltips.highlight')) { + + obj.context.beginPath(); + obj.context.strokeStyle = obj.Get('chart.highlight.stroke'); + obj.context.fillStyle = obj.Get('chart.highlight.fill'); + obj.context.strokeRect(barCoords[1], barCoords[2], barCoords[3], barCoords[4]); + obj.context.fillRect(barCoords[1], barCoords[2], barCoords[3], barCoords[4]); + obj.context.stroke(); + obj.context.fill(); + } + + RGraph.Tooltip(canvas, text, e.pageX, e.pageY, barCoords[5]); + } + } + + /** + * Stop the event bubbling + */ + e.stopPropagation(); + } + RGraph.AddEventListener(obj.id, 'click', canvas_onclick); + obj.canvas.addEventListener('click', canvas_onclick, false); + } + } + + + + /** + * The LINE chart tooltips event handlers + * + * @param object obj The graph object + */ + RGraph.InstallLineTooltipEventListeners = function (obj) + { + var canvas_onmousemove_func = function (e) + { + e = RGraph.FixEventObject(e); + + var canvas = e.target; + var context = canvas.getContext('2d'); + var obj = canvas.__object__; + var point = obj.getPoint(e); + + if (obj.Get('chart.tooltips.highlight')) { + RGraph.Register(obj); + } + + if ( point + && typeof(point[0]) == 'object' + && typeof(point[1]) == 'number' + && typeof(point[2]) == 'number' + && typeof(point[3]) == 'number' + ) { + + // point[0] is the graph object + var xCoord = point[1]; + var yCoord = point[2]; + var idx = point[3]; + + if ((obj.Get('chart.tooltips')[idx] || typeof(obj.Get('chart.tooltips')) == 'function')) { + + var text = RGraph.parseTooltipText(obj.Get('chart.tooltips'), idx); + + + // No tooltip text - do nada + if (text.match(/^id:(.*)$/) && RGraph.getTooltipTextFromDIV(text).substring(0,3) == 'id:') { + return; + } + + // Chnage the pointer to a hand + canvas.style.cursor = 'pointer'; + + /** + * If the tooltip is the same one as is currently visible (going by the array index), don't do squat and return. + */ + + if ( RGraph.Registry.Get('chart.tooltip') + && RGraph.Registry.Get('chart.tooltip').__index__ == idx + && RGraph.Registry.Get('chart.tooltip').__canvas__.id == canvas.id + && RGraph.Registry.Get('chart.tooltip').__event__ + && RGraph.Registry.Get('chart.tooltip').__event__ == 'mousemove') { + + return; + } + + /** + * Redraw the graph + */ + if (obj.Get('chart.tooltips.highlight') || obj.__bar__) { + + RGraph.Redraw(); + + if (obj.__bar__) { + RGraph.Clear(obj.canvas); + obj.__bar__.Draw(); + } + } + + // SHOW THE CORRECT TOOLTIP + RGraph.Tooltip(canvas, text, e.pageX, obj.Get('chart.tooltips.hotspot.xonly') ? (point[2] + RGraph.getCanvasXY(canvas)[1]) : e.pageY, idx); + + // Store the tooltip index on the tooltip object + RGraph.Registry.Get('chart.tooltip').__index__ = Number(idx); + + /** + * This converts idx into the index that is not greater than the + * number of items in the data array + */ + while (idx >= obj.data[0].length) { + idx -= obj.data[0].length + } + + RGraph.Registry.Get('chart.tooltip').__index2__ = idx; + + /** + * Set the source event + */ + RGraph.Registry.Get('chart.tooltip').__event__ = 'mousemove'; + + /** + * Highlight the graph + */ + if (obj.Get('chart.tooltips.highlight')) { + + context.beginPath(); + context.moveTo(xCoord, yCoord); + context.arc(xCoord, yCoord, 2, 0, 6.28, 0); + context.strokeStyle = obj.Get('chart.highlight.stroke'); + context.fillStyle = obj.Get('chart.highlight.fill'); + context.stroke(); + context.fill(); + } + + e.stopPropagation(); + return; + } + } + + /** + * Not over a hotspot? + */ + canvas.style.cursor = 'default'; + } + obj.canvas.addEventListener('mousemove', canvas_onmousemove_func, false); + RGraph.AddEventListener(obj.id, 'mousemove', canvas_onmousemove_func); + }
\ No newline at end of file diff --git a/schall/static/RGraph/libraries/RGraph.common.zoom.js b/schall/static/RGraph/libraries/RGraph.common.zoom.js new file mode 100644 index 0000000..2f797b9 --- /dev/null +++ b/schall/static/RGraph/libraries/RGraph.common.zoom.js @@ -0,0 +1,886 @@ + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + + if (typeof(RGraph) == 'undefined') RGraph = {isRGraph:true,type:'common'}; + + + /** + * Installs the event handlers for zooming an area of the graph + * + * @param object obj Your graph object + */ + RGraph.ZoomArea = function (obj) + { + if (obj.Get('chart.zoom.mode') == 'area') { + + var canvas = obj.canvas; + var context = obj.context; + + obj.canvas.style.cursor = 'crosshair'; + + RGraph.Register(obj); + + + canvas.onmousedown = function(e) + { + var canvas = e.target; + var coords = RGraph.getMouseXY(e); + var obj = canvas.__object__; + + if (RGraph.Registry.Get('chart.zoomed.area.div')) { + RGraph.Registry.Get('chart.zoomed.area.div').style.display = 'none'; + } + + if (typeof(RGraph.Registry.Get('chart.zoomed.area.divs')) == null) { + RGraph.Registry.Set('chart.zoomed.area.divs', []); + + } else { + + var divs = RGraph.Registry.Get('chart.zoomed.area.divs'); + + if (divs && divs.length) { + for (var i=0; i<divs.length; ++i) { + if (divs[i]) { + divs[i].style.display = 'none'; + divs[i] = null; + } + } + } + } + + /** + * Create the indicator DIV + */ + var canvasXY = RGraph.getCanvasXY(canvas); + var areaDiv = document.createElement('DIV'); + areaDiv.__canvas__ = canvas; + areaDiv.style.position = 'absolute'; + areaDiv.style.left = canvasXY[0] + coords[0] + 'px' + areaDiv.style.top = canvasXY[1] + coords[1] + 'px' + areaDiv.style.width = 0; + areaDiv.style.height = 0; + areaDiv.style.border = '1px solid black'; + areaDiv.style.backgroundColor = 'rgba(220,220,220,0.3)'; + areaDiv.style.display = 'none'; + + areaDiv.onmouseover = function (e) + { + setTimeout(function () {e.target.style.opacity = 0.8;}, 50); + setTimeout(function () {e.target.style.opacity = 0.6;}, 100); + setTimeout(function () {e.target.style.opacity = 0.4;}, 150); + setTimeout(function () {e.target.style.opacity = 0.2;}, 200); + setTimeout(function () {e.target.style.opacity = 0;}, 250); + setTimeout(function () {e.target.style.display = 'none';}, 300); + setTimeout(function () {e.target = null;}, 350); + } + + document.body.appendChild(areaDiv); + + + RGraph.Registry.Set('chart.zoomed.area.div', null); + RGraph.Registry.Set('chart.zoomed.area.mousedown', coords); + RGraph.Registry.Set('chart.zoomed.area.areadiv', areaDiv); + } + + + var window_onmousemove = function (e) + { + var startCoords = RGraph.Registry.Get('chart.zoomed.area.mousedown'); + + if (startCoords && startCoords.length) { + + var coords = RGraph.getMouseXY(e); + var canvasXY = RGraph.getCanvasXY(e.target); + var obj = e.target.__object__; + var context = obj.context; + var canvas = obj.canvas; + var startx = startCoords[0]; + var starty = startCoords[1]; + var endx = coords[0]; + var endy = coords[1]; + var width = endx - startx; + var height = endy - starty; + var areaDiv = RGraph.Registry.Get('chart.zoomed.area.areadiv'); + + if (width >= 0 && height >= 0) { + + if (width > 5 && height > 5) { + areaDiv.style.width = (width - 15) + 'px'; + areaDiv.style.height = (height - 15) + 'px'; + areaDiv.style.display = 'inline'; + } else { + areaDiv.style.display = 'none'; + } + + } else if (width < -5 || height < -5) { + + var canvasCoords = RGraph.getCanvasXY(canvas); + var noticeDiv = document.createElement('DIV'); + + noticeDiv.style.position = 'absolute'; + noticeDiv.style.top = 0; + noticeDiv.style.left = 0; + noticeDiv.style.zIndex = 99; + noticeDiv.style.border = '1px dashed black'; + noticeDiv.style.backgroundColor = '#ffc1c1'; + noticeDiv.style.MozBoxShadow = '0 0 5px #999'; + noticeDiv.style.WebkitBoxShadow = '0 0 5px #999'; + noticeDiv.style.boxShadow = '0 0 5px #999'; + noticeDiv.style.padding = '2px'; + noticeDiv.innerHTML = 'Zoom goes right and down'; + document.body.appendChild(noticeDiv); + + // Reposition the warning + noticeDiv.style.top = canvasCoords[1] + startCoords[1] - noticeDiv.offsetHeight + 'px'; + noticeDiv.style.left = canvasCoords[0] + startCoords[0] - (noticeDiv.offsetWidth / 2) + 'px'; + noticeDiv.style.width = noticeDiv.offsetWidth + 'px'; + + setTimeout(function () {noticeDiv.style.opacity = 0.8;}, 2100); + setTimeout(function () {noticeDiv.style.opacity = 0.6;}, 2200); + setTimeout(function () {noticeDiv.style.opacity = 0.4;}, 2300); + setTimeout(function () {noticeDiv.style.opacity = 0.2;}, 2400); + setTimeout(function () {noticeDiv.style.display = 'none';}, 2500); + setTimeout(function () {noticeDiv = null;}, 2600); + } + } + } + window.addEventListener('mousemove', window_onmousemove, false); + RGraph.AddEventListener(canvas.id, 'window_mousemove', window_onmousemove); + + + canvas.onmouseup = function (e) + { + RGraph.FixEventObject(e); + + var startCoords = RGraph.Registry.Get('chart.zoomed.area.mousedown'); + var coords = RGraph.getMouseXY(e); + + // Do the zooming here + if (RGraph.Registry.Get('chart.zoomed.area.mousedown')) { + + //RGraph.Redraw(); + + RGraph.Registry.Get('chart.zoomed.area.areadiv').style.display = 'none'; + RGraph.Registry.Get('chart.zoomed.area.areadiv').style.left = '-1000px'; + RGraph.Registry.Get('chart.zoomed.area.areadiv').style.top = '-1000px'; + RGraph.Registry.Set('chart.zoomed.area.areadiv', null); + + if (coords[0] < startCoords[0] || coords[1] < startCoords[1]) { + RGraph.Registry.Set('chart.zoomed.area.mousedown', false); + return; + } + + var canvas = e.target; + var obj = canvas.__object__; + var context = obj.context; + var canvasCoords = RGraph.getCanvasXY(e.target); + var coords = RGraph.getMouseXY(e); + var startCoords = RGraph.Registry.Get('chart.zoomed.area.mousedown'); + var startx = startCoords[0]; + var starty = startCoords[1]; + var endx = coords[0] - 15; + var endy = coords[1] - 15; + var width = Math.abs(endx - startx); + var height = Math.abs(endy - starty); + var factor = obj.Get('chart.zoom.factor') - 1; + + var img = document.createElement('IMG'); + img.src = canvas.toDataURL(); + img.style.position = 'relative'; + img.style.left = (factor + 1) * -1 * startx + 'px'; + img.style.top = (factor + 1) * -1 * starty + 'px'; + img.width = (factor + 1) * canvas.width; + img.height = (factor + 1) * canvas.height; + + var div = document.createElement('DIV'); + div.__object__ = obj; + div.className = 'RGraph_zoomed_area'; + div.style.position = 'absolute'; + div.style.backgroundColor = 'white'; + div.style.cursor = 'move'; + + div.style.top = e.pageY + 'px'; + div.style.left = e.pageX + 'px'; + div.origWidth = width; + div.origHeight = height; + div.style.width = width + 'px'; + div.style.height = height + 'px'; + div.style.border = '1px solid black'; + div.style.boxShadow = '0 0 15px black'; + div.style.MozBoxShadow = '0 0 15px black'; + div.style.WebkitBoxShadow = '0 0 15px black'; + div.style.overflow = 'hidden'; + div.style.opacity = 0; + div.style.zIndex = 99; + + document.body.appendChild(div); + div.appendChild(img); + + + /** + * This facilitates expanding the zoomed area once visible (the double click) + */ + div.ondblclick = function (event) + { + var event = RGraph.FixEventObject(event); + var img = event.target; + var div = event.target.parentNode; + + var current_width = div.offsetWidth + var current_height = div.offsetHeight + var target_width = img.offsetWidth; + var target_height = img.offsetHeight; + var diff_width = target_width - current_width; + var diff_height = target_height - current_height; + + var img_offset_left = parseInt(img.offsetLeft); + var img_offset_top = parseInt(img.offsetTop); + + // Global vars on purpose so the timers can access them + __zoomed_div_style__ = div.style; + __zoomed_img_style__ = img.style; + + setTimeout("__zoomed_div_style__.left = parseInt(__zoomed_div_style__.left) - " + (diff_width * 0.1) + " + 'px'", 50); + setTimeout("__zoomed_div_style__.left = parseInt(__zoomed_div_style__.left) - " + (diff_width * 0.1) + " + 'px'", 100); + setTimeout("__zoomed_div_style__.left = parseInt(__zoomed_div_style__.left) - " + (diff_width * 0.1) + " + 'px'", 150); + setTimeout("__zoomed_div_style__.left = parseInt(__zoomed_div_style__.left) - " + (diff_width * 0.1) + " + 'px'", 200); + setTimeout("__zoomed_div_style__.left = parseInt(__zoomed_div_style__.left) - " + (diff_width * 0.1) + " + 'px'", 250); + + setTimeout("__zoomed_div_style__.top = parseInt(__zoomed_div_style__.top) - " + (diff_height * 0.1) + " + 'px'", 50); + setTimeout("__zoomed_div_style__.top = parseInt(__zoomed_div_style__.top) - " + (diff_height * 0.1) + " + 'px'", 100); + setTimeout("__zoomed_div_style__.top = parseInt(__zoomed_div_style__.top) - " + (diff_height * 0.1) + " + 'px'", 150); + setTimeout("__zoomed_div_style__.top = parseInt(__zoomed_div_style__.top) - " + (diff_height * 0.1) + " + 'px'", 200); + setTimeout("__zoomed_div_style__.top = parseInt(__zoomed_div_style__.top) - " + (diff_height * 0.1) + " + 'px'", 250); + + setTimeout("__zoomed_div_style__.width = parseInt(__zoomed_div_style__.width) + " + (diff_width * 0.2) + " + 'px'", 50); + setTimeout("__zoomed_div_style__.width = parseInt(__zoomed_div_style__.width) + " + (diff_width * 0.2) + " + 'px'", 100); + setTimeout("__zoomed_div_style__.width = parseInt(__zoomed_div_style__.width) + " + (diff_width * 0.2) + " + 'px'", 150); + setTimeout("__zoomed_div_style__.width = parseInt(__zoomed_div_style__.width) + " + (diff_width * 0.2) + " + 'px'", 200); + setTimeout("__zoomed_div_style__.width = parseInt(__zoomed_div_style__.width) + " + (diff_width * 0.2) + " + 'px'", 250); + + setTimeout("__zoomed_div_style__.height = parseInt(__zoomed_div_style__.height) + " + (diff_height * 0.2) + " + 'px'", 50); + setTimeout("__zoomed_div_style__.height = parseInt(__zoomed_div_style__.height) + " + (diff_height * 0.2) + " + 'px'", 100); + setTimeout("__zoomed_div_style__.height = parseInt(__zoomed_div_style__.height) + " + (diff_height * 0.2) + " + 'px'", 150); + setTimeout("__zoomed_div_style__.height = parseInt(__zoomed_div_style__.height) + " + (diff_height * 0.2) + " + 'px'", 200); + setTimeout("__zoomed_div_style__.height = parseInt(__zoomed_div_style__.height) + " + (diff_height * 0.2) + " + 'px'", 250); + + // Move the image within the div + setTimeout("__zoomed_img_style__.left = " + (img_offset_left * 0.8) + " + 'px'", 50); + setTimeout("__zoomed_img_style__.left = " + (img_offset_left * 0.6) + " + 'px'", 100); + setTimeout("__zoomed_img_style__.left = " + (img_offset_left * 0.4) + " + 'px'", 150); + setTimeout("__zoomed_img_style__.left = " + (img_offset_left * 0.2) + " + 'px'", 200); + setTimeout("__zoomed_img_style__.left = 0", 250); + + setTimeout("__zoomed_img_style__.top = " + (img_offset_top * 0.8) + " + 'px'", 50); + setTimeout("__zoomed_img_style__.top = " + (img_offset_top * 0.6) + " + 'px'", 100); + setTimeout("__zoomed_img_style__.top = " + (img_offset_top * 0.4) + " + 'px'", 150); + setTimeout("__zoomed_img_style__.top = " + (img_offset_top * 0.2) + " + 'px'", 200); + setTimeout("__zoomed_img_style__.top = 0", 250); + + div.ondblclick = null; + } + /** + * Make the zoomed bit draggable + */ + div.onmousedown = function (e) + { + e = RGraph.FixEventObject(e); + + var div = e.target.parentNode; + var img = div.childNodes[0]; + + if (e.button == 0 || e.button == 1 ) { + + div.__offsetx__ = e.offsetX + img.offsetLeft; + div.__offsety__ = e.offsetY + img.offsetTop; + + RGraph.Registry.Set('chart.mousedown', div); + RGraph.Registry.Set('chart.button', 0); + + } else { + + img.__startx__ = e.pageX; + img.__starty__ = e.pageY; + + img.__originalx__ = img.offsetLeft; + img.__originaly__ = img.offsetTop; + + RGraph.Registry.Set('chart.mousedown', img); + RGraph.Registry.Set('chart.button', 2); + + /** + * Don't show a context menu when the zoomed area is right-clicked on + */ + window.oncontextmenu = function (e) + { + e = RGraph.FixEventObject(e); + + e.stopPropagation(); + + // [18th July 2010] Is this reallly necessary? + window.oncontextmenu = function (e) + { + return true; + } + + + return false; + } + } + + e.stopPropagation(); + + return false; + } + + window.onmouseup = function (e) + { + RGraph.Registry.Set('chart.mousedown', false); + } + + window.onmousemove = function (e) + { + if (RGraph.Registry.Get('chart.mousedown') && RGraph.Registry.Get('chart.button') == 0) { + + var div = RGraph.Registry.Get('chart.mousedown'); + + var x = e.pageX - div.__offsetx__; + var y = e.pageY - div.__offsety__; + + div.style.left = x + 'px'; + div.style.top = y + 'px'; + + } else if (RGraph.Registry.Get('chart.mousedown') && RGraph.Registry.Get('chart.button') == 2) { + + var img = RGraph.Registry.Get('chart.mousedown'); + + var x = img.__originalx__ + e.pageX - img.__startx__; + var y = img.__originaly__ + e.pageY - img.__starty__; + + img.style.left = x + 'px'; + img.style.top = y + 'px'; + } + } + // End dragging code + + + var divs = RGraph.Registry.Get('chart.zoomed.area.divs'); + if (typeof(divs) == 'object') { + divs.push(div); + } else { + RGraph.Registry.Set('chart.zoomed.area.divs', [div]) + } + + // Create the background + var bg = document.createElement('DIV'); + bg.style.position = 'fixed' + bg.style.zIndex = 98; + bg.style.top = 0; + bg.style.left = 0; + bg.style.backgroundColor = '#999'; + bg.style.opacity = 0; + bg.style.width = (screen.width + 100) + 'px'; + bg.style.height = (screen.height + 100) + 'px'; + document.body.appendChild(bg); + + bg.onclick = function (e) + { + div.style.display = 'none'; + bg.style.display = 'none'; + div = null; + bg = null; + } + + + setTimeout(function (){div.style.opacity = 0.2;}, 50); + setTimeout(function (){div.style.opacity = 0.4;}, 100); + setTimeout(function (){div.style.opacity = 0.6;}, 150); + setTimeout(function (){div.style.opacity = 0.8;}, 200); + setTimeout(function (){div.style.opacity = 1.0;}, 250); + + setTimeout(function () {div.style.left = canvasCoords[0] + startx - (width * factor * 0.1) + 'px'}, 50); + setTimeout(function () {div.style.left = canvasCoords[0] + startx - (width * factor * 0.2) + 'px'}, 100); + setTimeout(function () {div.style.left = canvasCoords[0] + startx - (width * factor * 0.3) + 'px'}, 150); + setTimeout(function () {div.style.left = canvasCoords[0] + startx - (width * factor * 0.4) + 'px'}, 200); + setTimeout(function () {div.style.left = canvasCoords[0] + startx - (width * factor * 0.5) + 'px'}, 250); + + setTimeout(function () {div.style.top = canvasCoords[1] + starty - (height * factor * 0.1) + 'px'}, 50); + setTimeout(function () {div.style.top = canvasCoords[1] + starty - (height * factor * 0.2) + 'px'}, 100); + setTimeout(function () {div.style.top = canvasCoords[1] + starty - (height * factor * 0.3) + 'px'}, 150); + setTimeout(function () {div.style.top = canvasCoords[1] + starty - (height * factor * 0.4) + 'px'}, 200); + setTimeout(function () {div.style.top = canvasCoords[1] + starty - (height * factor * 0.5) + 'px'}, 250); + + setTimeout(function () {div.style.width = width + (width * factor * 0.2) + 'px'}, 50); + setTimeout(function () {div.style.width = width + (width * factor * 0.4) + 'px'}, 100); + setTimeout(function () {div.style.width = width + (width * factor * 0.6) + 'px'}, 150); + setTimeout(function () {div.style.width = width + (width * factor * 0.8) + 'px'}, 200); + setTimeout(function () {div.style.width = width + (width * factor * 1.0) + 'px'}, 250); + + setTimeout(function () {div.style.height = height + (height * factor * 0.2) + 'px'}, 50); + setTimeout(function () {div.style.height = height + (height * factor * 0.4) + 'px'}, 100); + setTimeout(function () {div.style.height = height + (height * factor * 0.6) + 'px'}, 150); + setTimeout(function () {div.style.height = height + (height * factor * 0.8) + 'px'}, 200); + setTimeout(function () {div.style.height = height + (height * factor * 1.0) + 'px'}, 250); + + setTimeout(function (){bg.style.opacity = 0.1;}, 50); + setTimeout(function (){bg.style.opacity = 0.2;}, 100); + setTimeout(function (){bg.style.opacity = 0.3;}, 150); + setTimeout(function (){bg.style.opacity = 0.4;}, 200); + setTimeout(function (){bg.style.opacity = 0.5;}, 250); + + RGraph.Registry.Set('chart.zoomed.area.bg', bg); + RGraph.Registry.Set('chart.zoomed.area.img', img); + RGraph.Registry.Set('chart.zoomed.area.div', div); + RGraph.Registry.Set('chart.zoomed.area.mousedown', null); + } + + /** + * Fire the zoom event + */ + RGraph.FireCustomEvent(obj, 'onzoom'); + } + + canvas.onmouseout = function (e) + { + RGraph.Registry.Set('chart.zoomed.area.areadiv', null); + RGraph.Registry.Set('chart.zoomed.area.mousedown', null); + RGraph.Registry.Set('chart.zoomed.area.div', null); + } + } + } + + + /** + * This function sets up the zoom window if requested + * + * @param obj object The graph object + */ + RGraph.ShowZoomWindow = function (obj) + { + if (obj.Get('chart.zoom.mode') == 'thumbnail') { + RGraph.ZoomWindow(obj.canvas); + } + + if (obj.Get('chart.zoom.mode') == 'area') { + RGraph.ZoomArea(obj); + } + } + + + /** + * Installs the evnt handler for the zoom window/THUMBNAIL + */ + RGraph.ZoomWindow = function (canvas) + { + canvas.onmousemove = function (e) + { + e = RGraph.FixEventObject(e); + + var obj = e.target.__object__; + var canvas = obj.canvas; + var context = obj.context; + var coords = RGraph.getMouseXY(e); + + /** + * Create the DIV + */ + if (!RGraph.Registry.Get('chart.zoomed.div')) { + + var div = document.createElement('div'); + div.className = 'RGraph_zoom_window'; + div.style.width = obj.Get('chart.zoom.thumbnail.width') + 'px'; + div.style.height = obj.Get('chart.zoom.thumbnail.height') + 'px'; + + // Added back in on the 17th December + div.style.border = '2px dashed gray'; + + div.style.position = 'absolute'; + div.style.overflow = 'hidden'; + div.style.backgroundColor = 'white'; + + // Initially the zoomed layer should be off-screen + div.style.left = '-1000px'; + div.style.top = '-1000px'; + + // Should these be 0? No. + div.style.borderRadius = '5px'; + div.style.MozBorderRadius = '5px'; + div.style.WebkitBorderRadius = '5px'; + + if (obj.Get('chart.zoom.shadow')) { + div.style.boxShadow = 'rgba(0,0,0,0.5) 3px 3px 3px'; + div.style.MozBoxShadow = 'rgba(0,0,0,0.5) 3px 3px 3px'; + div.style.WebkitBoxShadow = 'rgba(0,0,0,0.5) 3px 3px 3px'; + } + + //div.style.opacity = 0.2; + div.__object__ = obj; + document.body.appendChild(div); + + /** + * Get the canvas as an image + */ + var img = document.createElement('img'); + img.width = obj.canvas.width * obj.Get('chart.zoom.factor'); + img.height = obj.canvas.height * obj.Get('chart.zoom.factor'); + img.style.position = 'relative'; + img.style.backgroundColor = 'white'; + img.__object__ = obj; + + div.appendChild(img); + + RGraph.Registry.Set('chart.zoomed.div', div); + RGraph.Registry.Set('chart.zoomed.img', img); + + // Fade the zoom in + setTimeout("RGraph.Registry.Get('chart.zoomed.div').__object__.canvas.onmouseover()", 5); + + } else { + + div = RGraph.Registry.Get('chart.zoomed.div'); + img = RGraph.Registry.Get('chart.zoomed.img'); + } + + // Make sure the image is up-to-date + img.src = canvas.toDataURL(); + + /** + * Ensure the div is visible + */ + if (div && div.style.opacity < 1) { + setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 1", 400); + } + + /** + * Get the canvas x/y coords + */ + var c = RGraph.getCanvasXY(obj.canvas); + var x = c[0]; + var y = c[1]; + + /** + * Position the div and img + */ + var offset = 7; + + div.style.left = (e.pageX - obj.Get('chart.zoom.thumbnail.width') - offset) + 'px'; + div.style.top = (e.pageY - obj.Get('chart.zoom.thumbnail.height') - offset) + 'px'; + + var l = (obj.Get('chart.zoom.thumbnail.width') / 2) - (coords[0] * obj.Get('chart.zoom.factor')); + var t = (obj.Get('chart.zoom.thumbnail.height') / 2) - (coords[1] * obj.Get('chart.zoom.factor')); + + // More positioning + img.style.left = (l + ((obj.Get('chart.zoom.thumbnail.width') / 2) * obj.Get('chart.zoom.factor'))) + 'px'; + img.style.top = (t + ((obj.Get('chart.zoom.thumbnail.height') / 2) * obj.Get('chart.zoom.factor'))) + 'px'; + + /** + * Fire the onzoom event + */ + RGraph.FireCustomEvent(obj, 'onzoom'); + } + + /** + * The onmouseover event. Evidently. Fades the zoom window in + */ + canvas.onmouseover = function (e) + { + var div = RGraph.Registry.Get('chart.zoomed.div'); + + // ??? + if (!div) return; + + var obj = div.__object__; + + // Used for the enlargement animation + var targetWidth = obj.Get('chart.zoom.thumbnail.width'); + var targetHeight = obj.Get('chart.zoom.thumbnail.height'); + + div.style.width = 0; + div.style.height = 0; + + if (obj.Get('chart.zoom.fade.in')) { + + RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.2; + setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.4", 100); + setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.6", 200); + setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.8", 300); + setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 1", 400); + + } else { + + setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 1", 1); + } + + // The enlargement animation frames + setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.width = '" + (targetWidth * (1/5) ) + "px'", 75); + setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.width = '" + (targetWidth * (2/5) ) + "px'", 150); + setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.width = '" + (targetWidth * (3/5) ) + "px'", 225); + setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.width = '" + (targetWidth * (4/5) ) + "px'", 300); + setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.width = '" + (targetWidth * (5/5) ) + "px'", 325); + + setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.height = '" + (targetHeight * (1/5) ) + "px'", 75); + setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.height = '" + (targetHeight * (2/5) ) + "px'", 150); + setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.height = '" + (targetHeight * (3/5) ) + "px'", 225); + setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.height = '" + (targetHeight * (4/5) ) + "px'", 300); + setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.height = '" + (targetHeight * (5/5) ) + "px'", 375); + } + + canvas.onmouseout = function (e) + { + if (RGraph.Registry.Get('chart.zoomed.div') && RGraph.Registry.Get('chart.zoomed.div').__object__.Get('chart.zoom.fade.out')) { + + RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.8; + setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.6", 100); + setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.4", 200); + setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.2", 300); + setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0", 400); + + // Get rid of the zoom window + setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.left = '-400px'", 400); + setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.top = '-400px'", 400); + + } else { + // Get rid of the zoom window + if (RGraph.Registry.Get('chart.zoomed.div')) { + setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.left = '-400px'", 1); + setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.top = '-400px'", 41); + } } + } + } + + + /** + * A zoom in function + * + * @param e object The event object + */ + RGraph.Zoom = function (e) + { + e = RGraph.FixEventObject(e); + + /** + * Show the zoom window + */ + //if ((e.target.__canvas__ && e.target.__canvas__.__object__.Get('chart.zoom.mode') == 'thumbnail') || (e.target.parentNode.__canvas__ && e.target.parentNode.__canvas__.__object__.Get('chart.zoom.mode') == 'thumbnail') ) { + // return RGraph.ZoomWindow(e); + //} + if (e && e.target && e.target.__canvas__) { + var canvas = e.target.__canvas__; + + /******************************************************* + * This is here to facilitate zooming by just a single left click + *******************************************************/ + } else if (e && e.target && e.target.__object__) { + var canvas = e.target.__object__.canvas; + e.stopPropagation(); // Hmmmm + } + + // Fallback for MSIE9 + if (!canvas) { + var registry_canvas = RGraph.Registry.Get('chart.contextmenu').__canvas__; + if (registry_canvas) { + var canvas = registry_canvas; + } + } + + var context = canvas.getContext('2d'); + var obj = canvas.__object__; + var dataurl = canvas.toDataURL(); + var tmp = canvas; + var coords = RGraph.getCanvasXY(canvas); + var factor = obj.Get('chart.zoom.factor') - 1; + + var x = coords[0]; + var y = coords[1]; + + var img = document.createElement('img'); + img.className = 'RGraph_zoomed_canvas'; + img.style.border = '3px solid gray'; + img.style.width = canvas.width + 'px'; + img.style.height = canvas.height + 'px'; + img.style.position = 'absolute'; + img.style.left = x + 'px'; + img.style.top = y + 'px'; + img.style.backgroundColor = 'white'; + img.style.opacity = obj.Get('chart.zoom.fade.in') ? 0 : 1; + img.style.zIndex = 99; + img.src = dataurl; + document.body.appendChild(img); + + //RGraph.Registry.Set('chart.zoomedimage', img); + // Store the zoomed image in a global var - NOT the registry + __zoomedimage__ = img; + __zoomedimage__.obj = obj; + + // Image onclick should not hide the image + img.onclick = function (e) + { + e = RGraph.FixEventObject(e); + e.stopPropagation(); + return false; + } + + setTimeout(function (){window.onclick = RGraph.HideZoomedCanvas;}, 1); + + var width = parseInt(canvas.width); + var height = parseInt(canvas.height); + var frames = obj.Get('chart.zoom.frames'); + var delay = obj.Get('chart.zoom.delay'); + + // Increase the width over 10 frames - center + if (obj.Get('chart.zoom.hdir') == 'center') { + + for (var i=1; i<=frames; ++i) { + var newWidth = width * factor * (i/frames) + width; + var rightHandEdge = x + canvas.width; + var newLeft = (x + (canvas.width / 2)) - (newWidth / 2); + + setTimeout("__zoomedimage__.style.width = '" + String(newWidth) + "px'; __zoomedimage__.style.left = '" + newLeft + "px'", i * delay); + } + + // Left + } else if (obj.Get('chart.zoom.hdir') == 'left') { + for (var i=1; i<=frames; ++i) { + var newWidth = width * factor * (i/frames) + width; + var rightHandEdge = x + canvas.width; + var newLeft = rightHandEdge - newWidth; + + setTimeout("__zoomedimage__.style.width = '" + String(newWidth) + "px'; __zoomedimage__.style.left = '" + newLeft + "px'", i * delay); + } + + // Right (default) + } else { + for (var i=1; i<=frames; ++i) { + var newWidth = width * factor * (i/frames) + width; + setTimeout("__zoomedimage__.style.width = '" + String(newWidth) + "px'", i * delay); + } + } + + // Increase the height over 10 frames - up + if (obj.Get('chart.zoom.vdir') == 'up') { + for (var i=1; i<=frames; ++i) { + var newHeight = (height * factor * (i/frames)) + height; + var bottomEdge = y + canvas.height; + var newTop = bottomEdge - newHeight; + + setTimeout("__zoomedimage__.style.height = '" + String(newHeight) + "px'; __zoomedimage__.style.top = '" + newTop + "px'", i * delay); + } + + // center + } else if (obj.Get('chart.zoom.vdir') == 'center') { + for (var i=1; i<=frames; ++i) { + var newHeight = (height * factor * (i/frames)) + height; + var bottomEdge = (y + (canvas.height / 2)) + (newHeight / 2); + var newTop = bottomEdge - newHeight; + + setTimeout("__zoomedimage__.style.height = '" + String(newHeight) + "px'; __zoomedimage__.style.top = '" + newTop + "px'", i * delay); + } + + // Down (default + } else { + for (var i=1; i<=frames; ++i) { + setTimeout("__zoomedimage__.style.height = '" + String(height * factor * (i/frames) + height) + "px'", i * delay); + } + } + + // If enabled, increase the opactity over the requested number of frames + if (obj.Get('chart.zoom.fade.in')) { + for (var i=1; i<=frames; ++i) { + setTimeout("__zoomedimage__.style.opacity = " + Number(i / frames), i * (delay / 2)); + } + } + + // If stipulated, produce a shadow + if (obj.Get('chart.zoom.shadow')) { + for (var i=1; i<=frames; ++i) { + setTimeout("__zoomedimage__.style.boxShadow = 'rgba(128,128,128," + Number(i / frames) / 2 + ") 0 0 15px'", i * delay); + setTimeout("__zoomedimage__.style.MozBoxShadow = 'rgba(128,128,128," + Number(i / frames) / 2 + ") 0 0 15px'", i * delay); + setTimeout("__zoomedimage__.style.WebkitBoxShadow = 'rgba(128,128,128," + Number(i / frames) / 2 + ") 0 0 15px'", i * delay); + } + } + + /** + * The onmouseout event. Hides the zoom window. Fades the zoom out + * + canvas.onmouseout = function (e) + { + if (RGraph.Registry.Get('chart.zoomed.div') && RGraph.Registry.Get('chart.zoomed.div').__object__.Get('chart.zoom.fade.out')) { + + RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.8; + setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.6", 100); + setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.4", 200); + setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.2", 300); + setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0", 400); + + // Get rid of the zoom window + setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.left = '-400px'", 400); + setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.top = '-400px'", 400); + + } else { + + // Get rid of the zoom window + if (RGraph.Registry.Get('chart.zoomed.div')) { + setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.left = '-400px'", 1); + setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.top = '-400px'", 1); + } + } + } + */ + + // The background + if (obj.Get('chart.zoom.background')) { + + var div = document.createElement('DIV'); + div.style.backgroundColor = '#999'; + div.style.opacity = 0; + div.style.position = 'fixed'; + div.style.top = 0; + div.style.left = 0; + div.style.width = (screen.width + 100) + 'px'; + div.style.height = (screen.height + 100) + 'px'; + div.style.zIndex = 98; + + // Hides the zoomed caboodle + div.oncontextmenu = function (e) + { + return RGraph.HideZoomedCanvas(e); + } + + // 30th July 2010 - Is this necessary? + //for (var i=1; i<=frames; ++i) { + // setTimeout('__zoomedbackground__.style.opacity = ' + Number(0.04 * i), i * delay); + // + // // MSIE doesn't support zoom + // //setTimeout('__zoomedbackground__.style.filter = "progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=135); Alpha(opacity=10)"', 50); + //} + + div.origHeight = div.style.height; + + document.body.appendChild(div); + + __zoomedbackground__ = div; + + // If the window is resized, hide the zoom + //window.onresize = RGraph.HideZoomedCanvas; + + for (var i=1; i<=frames; ++i) { + setTimeout("__zoomedbackground__.style.opacity = " + (Number(i / frames) * 0.5), i * (delay / 2)); + } + } + + /** + * Fire the onzoom event + */ + RGraph.FireCustomEvent(obj, 'onzoom'); + }
\ No newline at end of file diff --git a/schall/static/RGraph/libraries/RGraph.fuel.js b/schall/static/RGraph/libraries/RGraph.fuel.js new file mode 100644 index 0000000..2bdef0f --- /dev/null +++ b/schall/static/RGraph/libraries/RGraph.fuel.js @@ -0,0 +1,364 @@ + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + + if (typeof(RGraph) == 'undefined') RGraph = {}; + + /** + * The Fuel widget constructor + * + * @param object canvas The canvas object + * @param int min The minimum value + * @param int max The maximum value + * @param int value The indicated value + */ + RGraph.Fuel = function (id, min, max, value) + { + // Get the canvas and context objects + this.id = id; + this.canvas = document.getElementById(id); + this.context = this.canvas.getContext ? this.canvas.getContext("2d") : null; + this.canvas.__object__ = this; + this.type = 'fuel'; + this.isRGraph = true; + this.min = min; + this.max = max; + this.value = value; + this.angles = {}; + this.currentValue = null; + + + /** + * Compatibility with older browsers + */ + RGraph.OldBrowserCompat(this.context); + + + // Check for support + if (!this.canvas) { + alert('[FUEL] No canvas support'); + return; + } + + /** + * The funnel charts properties + */ + this.properties = + { + 'chart.colors': ['red'], + 'chart.needle.color': 'red', + 'chart.gutter.left': 5, + 'chart.gutter.right': 5, + 'chart.gutter.top': 5, + 'chart.gutter.bottom': 5, + 'chart.text.size': 10, + 'chart.text.color': 'black', + 'chart.text.font': 'Verdana', + 'chart.contextmenu': null, + 'chart.annotatable': false, + 'chart.annotate.color': 'black', + 'chart.zoom.factor': 1.5, + 'chart.zoom.fade.in': true, + 'chart.zoom.fade.out': true, + 'chart.zoom.factor': 1.5, + 'chart.zoom.fade.in': true, + 'chart.zoom.fade.out': true, + 'chart.zoom.hdir': 'right', + 'chart.zoom.vdir': 'down', + 'chart.zoom.frames': 25, + 'chart.zoom.delay': 16.666, + 'chart.zoom.shadow': true, + 'chart.zoom.mode': 'canvas', + 'chart.zoom.thumbnail.width': 75, + 'chart.zoom.thumbnail.height': 75, + 'chart.zoom.background': true, + 'chart.zoom.action': 'zoom', + 'chart.resizable': false, + 'chart.resize.handle.background': null, + 'chart.icon': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAfCAYAAAD0ma06AAAEGElEQVRIS7VXSyhtYRT+jnfe5FEMjAwUBiQGHikzRWIkkgy8YyDK+xnJK5JCeZSUGKBMiAyYkMxMJAMpSfJ+2/d8695/33NunSPnHqt2Z5+91/9/' + '/' + '/et9a/1b8Pn56dmMBhg/IWDgwNoNzc38PHxkXtN0+Tiexp9eH18fIDj1Bj63N/fw8vLS/wsmcHoqKmXT09PuL29RVFREU5OTvTJ6UIAgioQ+vLe09MTb29v8PX1RWBgICYnJ+XXIqDRWXN0dJT3nIDsWlpadP+lpSWZlD4KmL/8/' + '/7+Ls/S09N1/7y8PISHh+sK/QssDJWcHEyGCnB1dRUDAwPIzMzUx5GpAnZ1dcXy8jK2trbM5j06OsLc3JzISx8q4OzsLOOsAq6treHg4AAeHh4WJbq7u0Nzc7P+PiYmBnt7ezg9PcXExAQCAgLg5OSEx8dHuLu7Wwfc3t7G/v6+yEcjO8rIROGKaWdnZ+jr6zMDjI6OxvT0tDzr6uqS2KtksspwZ2cHjY2NuqSUhnHmilUCraysmElaWloKJpQCjI2NRX5+Pl5eXr6WlCv08/MTEMVOZDH+Zzw4CdlfX1/rDHt7ezE1NQXGkcYEKi4ulkVKYlpLGouBs/JiaGgIZL25uSlecXFxohAz/ccAz8/P4e/vj7q6Ojw8PMje5DNRy94MQ0JCUFtbK2wqKipE+sHBQbi4uPwMQ86ak5ODxMREVFdXIywsDCUlJRJDXnZlmJqaip6eHuTm5kqikGlycjIyMjL+ZrY9JSUgMzQiIgINDQ2ypaqqqkCZWXHsnjQEHB8fR0pKigAxabq7uyWOlJNxtLukTJDs7GxUVlZKDNl5oqKi8Pr6+jOAIyMjiI+Pl5JGQG4F1Qy+LN7f3fiUdGZmBsHBwRgbG8Pw8LD01ba2NmlX0rTtnTQLCwvSjEdHR3FxcSExLCwsRGRkpBR9vePzeMDyw3bT1NT0XXLiT4a7u7s4Pj4GGzd7K8GCgoKEsRR8I4Cm6hwHXV5eiv62GAE5npMTmFuBTCkzmzT7qs5Q9TlW/o6ODlvwhCHPM5SVPZIxYzNeXFxEa2srvL29YTC2GI3aMm3Zeq6urv4LMC0tDRsbG1K8k5KS9DgS0IwhKVFjSsJA22r9/f0oKCgQdvPz83JEmZ2dlcpD9maSshow0KZnlO8Csx9yK3BLKCMJPpf2xGMigdi9WXooaWdn53dxdP+amhrZh4eHh1hfX5cTW319vZyBnp+ffzNkBWBmhYaGysB/j322oCckJCArK0uGMlsJ5ubmBoPxRiMzFlomjr2MGdne3i5ANILRJEtJt6ysTG8h9gDl4am8vFwSUWron1O9LulXIOqk9pWftfdSS40yyj5Uh101wPRryuR7R1ZMX/U1pfy5IF40xcgUnGAc9wsGYxsFhy87kwAAAABJRU5ErkJggg==', + 'chart.labels.full': 'F', + 'chart.labels.empty': 'E' + } + } + + + /** + * A setter + * + * @param name string The name of the property to set + * @param value mixed The value of the property + */ + RGraph.Fuel.prototype.Set = function (name, value) + { + this.properties[name.toLowerCase()] = value; + } + + + /** + * A getter + * + * @param name string The name of the property to get + */ + RGraph.Fuel.prototype.Get = function (name) + { + return this.properties[name.toLowerCase()]; + } + + + /** + * The function you call to draw the bar chart + */ + RGraph.Fuel.prototype.Draw = function () + { + /** + * Fire the onbeforedraw event + */ + RGraph.FireCustomEvent(this, 'onbeforedraw'); + + /** + * Clear all of this canvases event handlers (the ones installed by RGraph) + */ + RGraph.ClearEventListeners(this.id); + + /** + * Set the current value + */ + this.currentValue = this.value; + + /** + * This is new in May 2011 and facilitates indiviual gutter settings, + * eg chart.gutter.left + */ + this.gutterLeft = this.Get('chart.gutter.left'); + this.gutterRight = this.Get('chart.gutter.right'); + this.gutterTop = this.Get('chart.gutter.top'); + this.gutterBottom = this.Get('chart.gutter.bottom'); + + /** + * Get the center X and Y of the chart. This is the center of the needle bulb + */ + this.centerx = ((this.canvas.width - this.gutterLeft - this.gutterRight) / 2) + this.gutterLeft; + this.centery = this.canvas.height - 20 - this.gutterBottom + + /** + * Work out the radius of the chart + */ + this.radius = this.canvas.height - this.gutterTop - this.gutterBottom - 20; + + /** + * The start and end angles of the chart + */ + this.angles.start = 4.71 - 0.5; + this.angles.end = 4.71 + 0.5; + this.angles.needle = (((this.value - this.min) / (this.max - this.min)) * (this.angles.end - this.angles.start)) + this.angles.start; + + /** + * Draw the fuel guage + */ + this.DrawChart(); + + + /** + * Draw the labels on the chart + */ + this.DrawLabels(); + + + /** + * Setup the context menu if required + */ + if (this.Get('chart.contextmenu')) { + RGraph.ShowContext(this); + } + + /** + * If the canvas is annotatable, do install the event handlers + */ + if (this.Get('chart.annotatable')) { + RGraph.Annotate(this); + } + + /** + * This bit shows the mini zoom window if requested + */ + if (this.Get('chart.zoom.mode') == 'thumbnail'|| this.Get('chart.zoom.mode') == 'area') { + RGraph.ShowZoomWindow(this); + } + + + /** + * This function enables resizing + */ + if (this.Get('chart.resizable')) { + RGraph.AllowResizing(this); + } + + /** + * Fire the RGraph ondraw event + */ + RGraph.FireCustomEvent(this, 'ondraw'); + } + + + /** + * This function actually draws the chart + */ + RGraph.Fuel.prototype.DrawChart = function () + { + var context = this.context; + var canvas = this.canvas; + + /** + * Draw the "Scale" + */ + this.DrawScale(); + + /** + * Place the icon on the canvas + */ + if (!RGraph.isIE8()) { + this.DrawIcon(); + } + + /** + * Draw the needle on to the chart + */ + if (!this.Get('chart.icon') || RGraph.isIE8()) { + this.DrawNeedle(); + } + } + + + /** + * Draws the labels + */ + RGraph.Fuel.prototype.DrawLabels = function () + { + var radius = (this.radius - 20); + this.context.fillStyle = this.Get('chart.text.color'); + + // Draw the left label + var y = this.centery - Math.sin(this.angles.start - 3.14) * (this.radius - 25); + var x = this.centerx - Math.cos(this.angles.start - 3.14) * (this.radius - 25); + RGraph.Text(this.context, this.Get('chart.text.font'), this.Get('chart.text.size'), x, y, this.Get('chart.labels.empty'), 'center', 'center'); + + // Draw the right label + var y = this.centery - Math.sin(this.angles.start - 3.14) * (this.radius - 25); + var x = this.centerx + Math.cos(this.angles.start - 3.14) * (this.radius - 25); + RGraph.Text(this.context, this.Get('chart.text.font'), this.Get('chart.text.size'), x, y, this.Get('chart.labels.full'), 'center', 'center'); + } + + + /** + * Draws the needle + */ + RGraph.Fuel.prototype.DrawNeedle = function () + { + // Draw the actual needle + this.context.beginPath(); + this.context.lineWidth = 5; + this.context.lineCap = 'round'; + this.context.strokeStyle = this.Get('chart.needle.color'); + + /** + * The angle for the needle + */ + var angle = this.angles.needle; + + this.context.arc(this.centerx, this.centery, this.radius - 30, angle, angle + 0.0001, false); + this.context.lineTo(this.centerx, this.centery); + this.context.stroke(); + + this.context.lineWidth = 1; + + // Create the gradient for the bulb + var cx = this.centerx + 10; + var cy = this.centery - 10 + + var grad = this.context.createRadialGradient(cx, cy, 35, cx, cy, 0); + grad.addColorStop(0, 'black'); + grad.addColorStop(1, '#eee'); + + if (navigator.userAgent.indexOf('Firefox/6.0') > 0) { + grad = this.context.createLinearGradient(cx + 10, cy - 10, cx - 10, cy + 10); + grad.addColorStop(1, '#666'); + grad.addColorStop(0.5, '#ccc'); + } + + // Draw the bulb + this.context.beginPath(); + this.context.fillStyle = grad; + this.context.moveTo(this.centerx, this.centery); + this.context.arc(this.centerx, this.centery, 20, 0, 6.28, 0); + this.context.fill(); + } + + + /** + * Draws the "scale" + */ + RGraph.Fuel.prototype.DrawScale = function () + { + //First draw the fill background + this.context.beginPath(); + this.context.strokeStyle = 'black'; + this.context.fillStyle = 'white'; + this.context.arc(this.centerx, this.centery, this.radius, this.angles.start, this.angles.end, false); + this.context.arc(this.centerx, this.centery, this.radius - 10, this.angles.end, this.angles.start, true); + this.context.closePath(); + this.context.stroke(); + this.context.fill(); + + //First draw the fill itself + var start = this.angles.start; + var end = this.angles.needle; + + this.context.beginPath(); + this.context.fillStyle = this.Get('chart.colors')[0]; + this.context.arc(this.centerx, this.centery, this.radius, start, end, false); + this.context.arc(this.centerx, this.centery, this.radius - 10, end, start, true); + this.context.closePath(); + //this.context.stroke(); + this.context.fill(); + + // This draws the tickmarks + for (var a = this.angles.start; a<=this.angles.end+0.01; a+=((this.angles.end - this.angles.start) / 5)) { + this.context.beginPath(); + this.context.arc(this.centerx, this.centery, this.radius - 10, a, a + 0.0001, false); + this.context.arc(this.centerx, this.centery, this.radius - 15, a + 0.0001, a, true); + this.context.stroke(); + } + } + + + /** + * Draws the icon + */ + RGraph.Fuel.prototype.DrawIcon = function () + { + var img = new Image(); + img.src = this.Get('chart.icon'); + img.__object__ = this; + + + img.onload = function (e) + { + var img = e.target; + var obj = img.__object__; + var context = obj.context; + + context.drawImage(this,obj.centerx - (this.width / 2),obj.gutterTop + 30); + + obj.DrawNeedle(); + } + }
\ No newline at end of file diff --git a/schall/static/RGraph/libraries/RGraph.funnel.js b/schall/static/RGraph/libraries/RGraph.funnel.js new file mode 100644 index 0000000..78a8b4e --- /dev/null +++ b/schall/static/RGraph/libraries/RGraph.funnel.js @@ -0,0 +1,679 @@ + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + + if (typeof(RGraph) == 'undefined') RGraph = {}; + + /** + * The bar chart constructor + * + * @param object canvas The canvas object + * @param array data The chart data + */ + RGraph.Funnel = function (id, data) + { + // Get the canvas and context objects + this.id = id; + this.canvas = document.getElementById(id); + this.context = this.canvas.getContext ? this.canvas.getContext("2d") : null; + this.canvas.__object__ = this; + this.type = 'funnel'; + this.coords = []; + this.isRGraph = true; + + + /** + * Compatibility with older browsers + */ + RGraph.OldBrowserCompat(this.context); + + + // Check for support + if (!this.canvas) { + alert('[FUNNEL] No canvas support'); + return; + } + + /** + * The funnel charts properties + */ + this.properties = { + 'chart.strokestyle': 'black', + 'chart.gutter.left': 25, + 'chart.gutter.right': 25, + 'chart.gutter.top': 25, + 'chart.gutter.bottom': 25, + 'chart.labels': null, + 'chart.labels.sticks': false, + 'chart.title': '', + 'chart.title.background': null, + 'chart.title.hpos': null, + 'chart.title.vpos': null, + 'chart.title.bold': true, + 'chart.title.font': null, + 'chart.colors': ['red', 'green', 'gray', 'blue', 'black', 'gray'], + 'chart.text.size': 10, + 'chart.text.boxed': true, + 'chart.text.halign': 'left', + 'chart.text.color': 'black', + 'chart.text.font': 'Verdana', + 'chart.contextmenu': null, + 'chart.shadow': false, + 'chart.shadow.color': '#666', + 'chart.shadow.blur': 3, + 'chart.shadow.offsetx': 3, + 'chart.shadow.offsety': 3, + 'chart.key': [], + 'chart.key.background': 'white', + 'chart.key.position': 'graph', + 'chart.key.halign': 'right', + 'chart.key.shadow': false, + 'chart.key.shadow.color': '#666', + 'chart.key.shadow.blur': 3, + 'chart.key.shadow.offsetx': 2, + 'chart.key.shadow.offsety': 2, + 'chart.key.position.gutter.boxed': true, + 'chart.key.position.x': null, + 'chart.key.position.y': null, + 'chart.key.color.shape': 'square', + 'chart.key.rounded': true, + 'chart.key.linewidth': 1, + 'chart.tooltips': null, + 'chart.tooltips.effect': 'fade', + 'chart.tooltips.css.class': 'RGraph_tooltip', + 'chart.highlight.stroke': 'black', + 'chart.highlight.fill': 'rgba(255,255,255,0.5)', + 'chart.tooltips.highlight': true, + 'chart.annotatable': false, + 'chart.annotate.color': 'black', + 'chart.zoom.factor': 1.5, + 'chart.zoom.fade.in': true, + 'chart.zoom.fade.out': true, + 'chart.zoom.factor': 1.5, + 'chart.zoom.fade.in': true, + 'chart.zoom.fade.out': true, + 'chart.zoom.hdir': 'right', + 'chart.zoom.vdir': 'down', + 'chart.zoom.frames': 25, + 'chart.zoom.delay': 16.666, + 'chart.zoom.shadow': true, + 'chart.zoom.mode': 'canvas', + 'chart.zoom.thumbnail.width': 75, + 'chart.zoom.thumbnail.height': 75, + 'chart.zoom.background': true, + 'chart.zoom.action': 'zoom', + 'chart.resizable': false, + 'chart.taper': true} + + // Store the data + this.data = data; + + /** + * Set the .getShape commonly named method + */ + this.getShape = this.getSegment; + } + + + /** + * A setter + * + * @param name string The name of the property to set + * @param value mixed The value of the property + */ + RGraph.Funnel.prototype.Set = function (name, value) + { + this.properties[name.toLowerCase()] = value; + } + + + /** + * A getter + * + * @param name string The name of the property to get + */ + RGraph.Funnel.prototype.Get = function (name) + { + return this.properties[name.toLowerCase()]; + } + + + /** + * The function you call to draw the bar chart + */ + RGraph.Funnel.prototype.Draw = function () + { + /** + * Fire the onbeforedraw event + */ + RGraph.FireCustomEvent(this, 'onbeforedraw'); + + /** + * Clear all of this canvases event handlers (the ones installed by RGraph) + */ + RGraph.ClearEventListeners(this.id); + + /** + * This is new in May 2011 and facilitates indiviual gutter settings, + * eg chart.gutter.left + */ + this.gutterLeft = this.Get('chart.gutter.left'); + this.gutterRight = this.Get('chart.gutter.right'); + this.gutterTop = this.Get('chart.gutter.top'); + this.gutterBottom = this.Get('chart.gutter.bottom'); + + // This stops the coords array from growing + this.coords = []; + + RGraph.DrawTitle(this.canvas, this.Get('chart.title'), this.gutterTop, null, this.Get('chart.title.size') ? this.Get('chart.title.size') : this.Get('chart.text.size') + 2); + this.DrawFunnel(); + + + /** + * Setup the context menu if required + */ + if (this.Get('chart.contextmenu')) { + RGraph.ShowContext(this); + } + + /** + * The tooltip handler + */ + if (this.Get('chart.tooltips')) { + + RGraph.Register(this); + + var canvas_onclick_func = function (e) + { + RGraph.Redraw(); + + var e = RGraph.FixEventObject(e); + var canvas = e.target; + var context = canvas.getContext('2d'); + var obj = canvas.__object__; + + var mouseCoords = RGraph.getMouseXY(e); + var coords = obj.coords; + var x = mouseCoords[0]; + var y = mouseCoords[1]; + var segment = obj.getSegment(e); + + if (segment) { + + var idx = segment[2]; + + // Is there a tooltip defined? + if (!obj.Get('chart.tooltips')[idx] && typeof(obj.Get('chart.tooltips')) != 'function') { + return; + } + + context.beginPath(); + + RGraph.NoShadow(obj); + + context.strokeStyle = obj.Get('chart.highlight.stroke'); + context.fillStyle = obj.Get('chart.highlight.fill'); + + context.moveTo(coords[idx][0], coords[idx][1]); + context.lineTo(coords[idx][2], coords[idx][3]); + context.lineTo(coords[idx][4], coords[idx][5]); + context.lineTo(coords[idx][6], coords[idx][7]); + context.closePath(); + + context.stroke(); + context.fill(); + + /** + * Draw the key again for in-graph keys so they don't appear "under" the highlight + */ + if (obj.Get('chart.key').length && obj.Get('chart.key.position') == 'graph') { + RGraph.DrawKey(obj, obj.Get('chart.key'), obj.Get('chart.colors')); + } + + /** + * Redraw the labels if necessary + */ + if (obj.Get('chart.labels')) { + obj.DrawLabels(); + } + + /** + * Get the tooltip text + */ + if (typeof(obj.Get('chart.tooltips')) == 'function') { + var text = obj.Get('chart.tooltips')(idx); + + } else if (typeof(obj.Get('chart.tooltips')) == 'object' && typeof(obj.Get('chart.tooltips')[idx]) == 'function') { + var text = obj.Get('chart.tooltips')[idx](idx); + + } else if (typeof(obj.Get('chart.tooltips')) == 'object') { + var text = obj.Get('chart.tooltips')[idx]; + + } else { + var text = ''; + } + + // Show the tooltip + RGraph.Tooltip(canvas, text, e.pageX, e.pageY, idx); + + // Stop the event propagating + e.stopPropagation(); + } + } + this.canvas.addEventListener('click', canvas_onclick_func, false); + RGraph.AddEventListener(this.id, 'click', canvas_onclick_func); + + /** + * Onmousemove event handler + */ + var canvas_onmousemove_func = function (e) + { + var e = RGraph.FixEventObject(e); + + var canvas = e.target; + var context = canvas.getContext('2d'); + var obj = canvas.__object__; + var overFunnel = false; + var coords = obj.coords; + + var mouseCoords = RGraph.getMouseXY(e); + var x = mouseCoords[0]; + var y = mouseCoords[1]; + var segment = obj.getSegment(e); + + if (segment) { + + var idx = segment[2]; + + // Is there a tooltip defined? + if (obj.Get('chart.tooltips')[idx] || typeof(obj.Get('chart.tooltips')) == 'function') { + + overFunnel = true; + canvas.style.cursor = 'pointer'; + + // Stop the event propagating + e.stopPropagation(); + + } + } + + if (!overFunnel) { + canvas.style.cursor = 'default'; + canvas.style.cursor = 'default'; + } + } + this.canvas.addEventListener('mousemove', canvas_onmousemove_func, false); + RGraph.AddEventListener(this.id, 'mousemove', canvas_onmousemove_func); + } + + + /** + * Draw the labels on the chart + */ + this.DrawLabels(); + + /** + * If the canvas is annotatable, do install the event handlers + */ + if (this.Get('chart.annotatable')) { + RGraph.Annotate(this); + } + + /** + * This bit shows the mini zoom window if requested + */ + if (this.Get('chart.zoom.mode') == 'thumbnail'|| this.Get('chart.zoom.mode') == 'area') { + RGraph.ShowZoomWindow(this); + } + + + /** + * This function enables resizing + */ + if (this.Get('chart.resizable')) { + RGraph.AllowResizing(this); + } + + /** + * Fire the RGraph ondraw event + */ + RGraph.FireCustomEvent(this, 'ondraw'); + } + + + /** + * This function actually draws the chart + */ + RGraph.Funnel.prototype.DrawFunnel = function () + { + var context = this.context; + var canvas = this.canvas; + var width = this.canvas.width - this.gutterLeft - this.gutterRight; + var height = this.canvas.height - this.gutterTop - this.gutterBottom; + var total = RGraph.array_max(this.data); + var accheight = this.gutterTop; + + + /** + * Loop through each segment to draw + */ + + // Set a shadow if it's been requested + if (this.Get('chart.shadow')) { + context.shadowColor = this.Get('chart.shadow.color'); + context.shadowBlur = this.Get('chart.shadow.blur'); + context.shadowOffsetX = this.Get('chart.shadow.offsetx'); + context.shadowOffsetY = this.Get('chart.shadow.offsety'); + } + + for (i=0; i<this.data.length; ++i) { + + i = Number(i); + + var firstvalue = this.data[0]; + var firstwidth = (firstvalue / total) * width; + var curvalue = this.data[i]; + var curwidth = (curvalue / total) * width; + var curheight = height / this.data.length; + var halfCurWidth = (curwidth / 2); + var nextvalue = this.data[i + 1] ? this.data[i + 1] : 0; + var nextwidth = this.data[i + 1] ? (nextvalue / total) * width : 0; + var halfNextWidth = (nextwidth / 2); + var center = this.gutterLeft + (firstwidth / 2); + + /** + * First segment + */ + if (i == 0) { + var x1 = center - halfCurWidth; + var y1 = this.gutterTop; + var x2 = center + halfCurWidth; + var y2 = this.gutterTop; + var x3 = center + halfNextWidth; + var y3 = accheight + curheight; + var x4 = center - halfNextWidth; + var y4 = accheight + curheight; + + /** + * Subsequent segments + */ + } else { + var x1 = center - halfCurWidth; + var y1 = accheight; + var x2 = center + halfCurWidth; + var y2 = accheight; + var x3 = center + halfNextWidth; + var y3 = accheight + curheight; + var x4 = center - halfNextWidth; + var y4 = accheight + curheight; + } + + /** + * Set the fill colour. If i is over 0 then don't use an offset + */ + if (document.all && this.Get('chart.shadow')) { + this.DrawIEShadow([x1, y1, x2, y2, x3, y3, x4, y4], i > 0 && this.Get('chart.shadow.offsety') < 0); + } + + context.strokeStyle = this.Get('chart.strokestyle'); + context.fillStyle = this.Get('chart.colors')[i]; + + if (halfNextWidth > 0 || this.Get('chart.taper')) { + context.beginPath(); + context.moveTo(x1, y1); + context.lineTo(x2, y2); + context.lineTo(x3, y3); + context.lineTo(x4, y4); + context.closePath(); + + /** + * Store the coordinates + */ + this.coords.push([x1, y1, x2, y2, x3, y3, x4, y4]); + } + + // The redrawing if the shadow is on will do the stroke + if (!this.Get('chart.shadow')) { + context.stroke(); + } + + context.fill(); + + accheight += curheight; + } + + /** + * If the shadow is enabled, redraw every segment, in order to allow for shadows going upwards + */ + if (this.Get('chart.shadow')) { + + RGraph.NoShadow(this); + + for (i=0; i<this.coords.length; ++i) { + + context.strokeStyle = this.Get('chart.strokestyle'); + context.fillStyle = this.Get('chart.colors')[i]; + + context.beginPath(); + context.moveTo(this.coords[i][0], this.coords[i][1]); + context.lineTo(this.coords[i][2], this.coords[i][3]); + context.lineTo(this.coords[i][4], this.coords[i][5]); + context.lineTo(this.coords[i][6], this.coords[i][7]); + context.closePath(); + + context.stroke(); + context.fill(); + } + } + + /** + * Lastly, draw the key if necessary + */ + if (this.Get('chart.key') && this.Get('chart.key').length) { + RGraph.DrawKey(this, this.Get('chart.key'), this.Get('chart.colors')); + } + } + + /** + * Draws the labels + */ + RGraph.Funnel.prototype.DrawLabels = function () + { + /** + * Draws the labels + */ + if (this.Get('chart.labels') && this.Get('chart.labels').length > 0) { + + var context = this.context; + var font = this.Get('chart.text.font'); + var size = this.Get('chart.text.size'); + var color = this.Get('chart.text.color'); + var labels = this.Get('chart.labels'); + var halign = this.Get('chart.text.halign') == 'left' ? 'left' : 'center'; + var bgcolor = this.Get('chart.text.boxed') ? 'white' : null; + + if (typeof(this.Get('chart.labels.x')) == 'number') { + var x = this.Get('chart.labels.x'); + } else { + var x = halign == 'left' ? (this.gutterLeft - 15) : ((this.canvas.width - this.gutterLeft - this.gutterRight) / 2) + this.gutterLeft; + } + + for (var j=0; j<this.coords.length; ++j) { // MUST be "j" + + context.beginPath(); + + // Set the color back to black + context.strokeStyle = 'black'; + context.fillStyle = color; + + // Turn off any shadow + RGraph.NoShadow(this); + + var label = labels[j]; + + RGraph.Text(context, + font, + size, + x, + this.coords[j][1], + label, + 'center', + halign, + this.Get('chart.text.boxed'), + null, + bgcolor); + + if (this.Get('chart.labels.sticks')) { + /** + * Measure the text + */ + this.context.font = size + 'pt ' + font; + var labelWidth = this.context.measureText(label).width; + + /** + * Draw the horizontal indicator line + */ + this.context.beginPath(); + this.context.strokeStyle = 'gray'; + + this.context.moveTo(x + labelWidth + 10, this.coords[j][1]); + this.context.lineTo(this.coords[j][0] - 10, this.coords[j][1]); + this.context.stroke(); + } + } + + + + /** + * This draws the last labels if defined + */ + var lastLabel = labels[j]; + + if (lastLabel) { + + RGraph.Text(context, font, size,x,this.coords[j - 1][5],lastLabel,'center',halign,this.Get('chart.text.boxed'),null,bgcolor); + + if (this.Get('chart.labels.sticks')) { + /** + * Measure the text + */ + this.context.font = size + 'pt ' + font; + var labelWidth = this.context.measureText(lastLabel).width; + + /** + * Draw the horizontal indicator line + */ + this.context.beginPath(); + this.context.strokeStyle = 'gray'; + this.context.moveTo(x + labelWidth + 10, this.coords[j - 1][7]); + this.context.lineTo(this.coords[j - 1][0] - 10, this.coords[j - 1][7]); + this.context.stroke(); + } + } + } + } + + + /** + * This function is used by MSIE only to manually draw the shadow + * + * @param array coords The coords for the bar + */ + RGraph.Funnel.prototype.DrawIEShadow = function (coords, noOffset) + { + var prevFillStyle = this.context.fillStyle; + var offsetx = this.Get('chart.shadow.offsetx'); + var offsety = this.Get('chart.shadow.offsety'); + var context = this.context; + + context.lineWidth = 1; + context.fillStyle = this.Get('chart.shadow.color'); + + // Draw the shadow + context.beginPath(); + context.moveTo(coords[0] + (noOffset ? 0 : offsetx), coords[1] + (noOffset ? 0 : offsety)); + context.lineTo(coords[2] + (noOffset ? 0 : offsetx), coords[3] + (noOffset ? 0 : offsety)); + context.lineTo(coords[4] + (noOffset ? 0 : offsetx), coords[5] + (noOffset ? 0 : offsety)); + context.lineTo(coords[6] + (noOffset ? 0 : offsetx), coords[7] + (noOffset ? 0 : offsety)); + context.closePath(); + + context.fill(); + + + + // Change the fillstyle back to what it was + this.context.fillStyle = prevFillStyle; + } + + + /** + * Gets the appropriate segment that has been highlighted + */ + RGraph.Funnel.prototype.getSegment = function (e) + { + var canvas = e.target; + var obj = canvas.__object__; + var mouseCoords = RGraph.getMouseXY(e); + var coords = obj.coords; + var x = mouseCoords[0]; + var y = mouseCoords[1]; + + + + for (i=0; i<coords.length; ++i) { + if ( + x > coords[i][0] + && x < coords[i][2] + && y > coords[i][1] + && y < coords[i][5] + ) { + + /** + * Handle the right corner + */ + if (x > coords[i][4]) { + var w1 = coords[i][2] - coords[i][4]; + var h1 = coords[i][5] - coords[i][3];; + var a1 = Math.atan(h1 / w1) * 57.3; // DEGREES + + var w2 = coords[i][2] - mouseCoords[0]; + var h2 = mouseCoords[1] - coords[i][1]; + var a2 = Math.atan(h2 / w2) * 57.3; // DEGREES + + if (a2 > a1) { + continue; + } + + /** + * Handle the left corner + */ + } else if (x < coords[i][6]) { + var w1 = coords[i][6] - coords[i][0]; + var h1 = coords[i][7] - coords[i][1];; + var a1 = Math.atan(h1 / w1) * 57.3; // DEGREES + + var w2 = mouseCoords[0] - coords[i][0]; + var h2 = mouseCoords[1] - coords[i][1]; + var a2 = Math.atan(h2 / w2) * 57.3; // DEGREES + + if (a2 > a1) { + continue; + } + } + + return [obj, coords[i], i]; + } + } + + return null; + }
\ No newline at end of file diff --git a/schall/static/RGraph/libraries/RGraph.gantt.js b/schall/static/RGraph/libraries/RGraph.gantt.js new file mode 100644 index 0000000..1e0ae49 --- /dev/null +++ b/schall/static/RGraph/libraries/RGraph.gantt.js @@ -0,0 +1,514 @@ +7 /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + + if (typeof(RGraph) == 'undefined') RGraph = {}; + + /** + * The gantt chart constructor + * + * @param object canvas The cxanvas object + * @param array data The chart data + */ + RGraph.Gantt = function (id) + { + // Get the canvas and context objects + this.id = id; + this.canvas = document.getElementById(id); + this.context = this.canvas.getContext("2d"); + this.canvas.__object__ = this; + this.type = 'gantt'; + this.isRGraph = true; + + + /** + * Compatibility with older browsers + */ + RGraph.OldBrowserCompat(this.context); + + + // Set some defaults + this.properties = { + 'chart.background.barcolor1': 'white', + 'chart.background.barcolor2': 'white', + 'chart.background.grid': true, + 'chart.background.grid.width': 1, + 'chart.background.grid.color': '#ddd', + 'chart.background.grid.hsize': 20, + 'chart.background.grid.vsize': 20, + 'chart.background.grid.hlines': true, + 'chart.background.grid.vlines': true, + 'chart.background.grid.border': true, + 'chart.background.grid.autofit':false, + 'chart.background.grid.autofit.numhlines': 7, + 'chart.background.grid.autofit.numvlines': 20, + 'chart.background.vbars': [], + 'chart.text.size': 10, + 'chart.text.font': 'Verdana', + 'chart.text.color': 'black', + 'chart.gutter.left': 75, + 'chart.gutter.right': 25, + 'chart.gutter.top': 35, + 'chart.gutter.bottom': 25, + 'chart.labels': [], + 'chart.margin': 2, + 'chart.title': '', + 'chart.title.background': null, + 'chart.title.hpos': null, + 'chart.title.vpos': null, + 'chart.title.bold': true, + 'chart.title.font': null, + 'chart.title.yaxis': '', + 'chart.title.yaxis.pos': null, + 'chart.title.yaxis.position': 'right', + 'chart.events': [], + 'chart.borders': true, + 'chart.defaultcolor': 'white', + 'chart.coords': [], + 'chart.tooltips': [], + 'chart.tooltips.effect': 'fade', + 'chart.tooltips.css.class': 'RGraph_tooltip', + 'chart.tooltips.highlight': true, + 'chart.highlight.stroke': 'black', + 'chart.highlight.fill': 'rgba(255,255,255,0.5)', + 'chart.xmin': 0, + 'chart.xmax': 0, + 'chart.contextmenu': null, + 'chart.annotatable': false, + 'chart.annotate.color': 'black', + 'chart.zoom.factor': 1.5, + 'chart.zoom.fade.in': true, + 'chart.zoom.fade.out': true, + 'chart.zoom.hdir': 'right', + 'chart.zoom.vdir': 'down', + 'chart.zoom.frames': 25, + 'chart.zoom.delay': 16.666, + 'chart.zoom.shadow': true, + 'chart.zoom.mode': 'canvas', + 'chart.zoom.thumbnail.width': 75, + 'chart.zoom.thumbnail.height': 75, + 'chart.zoom.background': true, + 'chart.zoom.action': 'zoom', + 'chart.resizable': false, + 'chart.resize.handle.adjust': [0,0], + 'chart.resize.handle.background': null, + 'chart.adjustable': false + } + + + /** + * Set the .getShape commonly named method + */ + this.getShape = this.getBar; + } + + + /** + * A peudo setter + * + * @param name string The name of the property to set + * @param value mixed The value of the property + */ + RGraph.Gantt.prototype.Set = function (name, value) + { + this.properties[name.toLowerCase()] = value; + } + + + /** + * A peudo getter + * + * @param name string The name of the property to get + */ + RGraph.Gantt.prototype.Get = function (name) + { + return this.properties[name.toLowerCase()]; + } + + + /** + * Draws the chart + */ + RGraph.Gantt.prototype.Draw = function () + { + /** + * Fire the onbeforedraw event + */ + RGraph.FireCustomEvent(this, 'onbeforedraw'); + + /** + * Clear all of this canvases event handlers (the ones installed by RGraph) + */ + RGraph.ClearEventListeners(this.id); + + /** + * This is new in May 2011 and facilitates indiviual gutter settings, + * eg chart.gutter.left + */ + this.gutterLeft = this.Get('chart.gutter.left'); + this.gutterRight = this.Get('chart.gutter.right'); + this.gutterTop = this.Get('chart.gutter.top'); + this.gutterBottom = this.Get('chart.gutter.bottom'); + + /** + * Work out the graphArea + */ + this.graphArea = this.canvas.width - this.gutterLeft - this.gutterRight; + this.graphHeight = this.canvas.height - this.gutterTop - this.gutterBottom; + this.numEvents = this.Get('chart.events').length + this.barHeight = this.graphHeight / this.numEvents; + this.halfBarHeight = this.barHeight / 2; + + /** + * Draw the background + */ + RGraph.background.Draw(this); + + /** + * Draw a space for the left hand labels + */ + //this.context.beginPath(); + //this.context.lineWidth = 1; + //this.context.strokeStyle = this.Get('chart.background.grid.color'); + //this.context.fillStyle = 'white'; + //this.context.fillRect(0,gutter - 5,gutter * 3, RGraph.GetHeight(this) - (2 * gutter) + 10); + //this.context.moveTo(gutter * 3, gutter); + //this.context.lineTo(gutter * 3, RGraph.GetHeight(this) - gutter); + //this.context.stroke(); + //this.context.fill(); + + /** + * Draw the labels at the top + */ + this.DrawLabels(); + + /** + * Draw the events + */ + this.DrawEvents(); + + + /** + * Setup the context menu if required + */ + if (this.Get('chart.contextmenu')) { + RGraph.ShowContext(this); + } + + /** + * If the canvas is annotatable, do install the event handlers + */ + if (this.Get('chart.annotatable')) { + RGraph.Annotate(this); + } + + /** + * This bit shows the mini zoom window if requested + */ + if (this.Get('chart.zoom.mode') == 'thumbnail' || this.Get('chart.zoom.mode') == 'area') { + RGraph.ShowZoomWindow(this); + } + + + /** + * This function enables resizing + */ + if (this.Get('chart.resizable')) { + RGraph.AllowResizing(this); + } + + + /** + * This function enables adjusting + */ + if (this.Get('chart.adjustable')) { + RGraph.AllowAdjusting(this); + } + + + /** + * Fire the RGraph ondraw event + */ + RGraph.FireCustomEvent(this, 'ondraw'); + } + + + /** + * Draws the labels at the top and the left of the chart + */ + RGraph.Gantt.prototype.DrawLabels = function () + { + this.context.beginPath(); + this.context.fillStyle = this.Get('chart.text.color'); + + /** + * Draw the X labels at the top of the chart. + */ + var labelSpace = (this.graphArea) / this.Get('chart.labels').length; + var xPos = this.gutterLeft + (labelSpace / 2); + this.context.strokeStyle = 'black' + + for (i=0; i<this.Get('chart.labels').length; ++i) { + RGraph.Text(this.context,this.Get('chart.text.font'),this.Get('chart.text.size'),xPos + (i * labelSpace),this.gutterTop - (this.Get('chart.text.size') / 2) - 5,String(this.Get('chart.labels')[i]),'center','center'); + } + + // Draw the vertical labels + for (var i=0; i<this.Get('chart.events').length; ++i) { + var ev = this.Get('chart.events')[i]; + var x = this.gutterLeft; + var y = this.gutterTop + this.halfBarHeight + (i * this.barHeight); + + RGraph.Text(this.context, + this.Get('chart.text.font'), + this.Get('chart.text.size'), + x - 5, y, + RGraph.is_array(ev[0]) ? String(ev[0][3]) : String(ev[3]), + 'center', + 'right'); + } + } + + /** + * Draws the events to the canvas + */ + RGraph.Gantt.prototype.DrawEvents = function () + { + var canvas = this.canvas; + var context = this.context; + var events = this.Get('chart.events'); + + /** + * Reset the coords array to prevent it growing + */ + this.coords = []; + + /** + * First draw the vertical bars that have been added + */ + if (this.Get('chart.vbars')) { + for (i=0; i<this.Get('chart.vbars').length; ++i) { + // Boundary checking + if (this.Get('chart.vbars')[i][0] + this.Get('chart.vbars')[i][1] > this.Get('chart.xmax')) { + this.Get('chart.vbars')[i][1] = 364 - this.Get('chart.vbars')[i][0]; + } + + var barX = this.gutterLeft + (( (this.Get('chart.vbars')[i][0] - this.Get('chart.xmin')) / (this.Get('chart.xmax') - this.Get('chart.xmin')) ) * this.graphArea); + + var barY = this.gutterTop; + var width = (this.graphArea / (this.Get('chart.xmax') - this.Get('chart.xmin')) ) * this.Get('chart.vbars')[i][1]; + var height = RGraph.GetHeight(this) - this.gutterTop - this.gutterBottom; + + // Right hand bounds checking + if ( (barX + width) > (RGraph.GetWidth(this) - this.gutterRight) ) { + width = RGraph.GetWidth(this) - this.gutterRight - barX; + } + + context.fillStyle = this.Get('chart.vbars')[i][2]; + context.fillRect(barX, barY, width, height); + } + } + + + /** + * Draw the events + */ + for (i=0; i<events.length; ++i) { + if (typeof(events[i][0]) == 'number') { + this.DrawSingleEvent(events[i]); + } else { + for (var j=0; j<events[i].length; ++j) { + this.DrawSingleEvent(events[i][j]); + } + } + + } + + + /** + * If tooltips are defined, handle them + */ + if (this.Get('chart.tooltips')) { + + // Register the object for redrawing + RGraph.Register(this); + + /** + * If the cursor is over a hotspot, change the cursor to a hand + */ + var canvas_onmousemove_func = function (eventObj) + { + eventObj = RGraph.FixEventObject(eventObj); + var canvas = eventObj.target; + var obj = canvas.__object__; + var len = obj.coords.length; + var mouseCoords = RGraph.getMouseXY(eventObj); + var bar = obj.getBar(eventObj); + + /** + * Loop through the bars determining if the mouse is over a bar + */ + if (bar) { + canvas.style.cursor = 'pointer'; + return; + } + + canvas.style.cursor = 'default'; + } + this.canvas.addEventListener('mousemove', canvas_onmousemove_func, false); + RGraph.AddEventListener(this.id, 'mousemove', canvas_onmousemove_func); + + + var canvas_onclick_func = function (eventObj) + { + eventObj = RGraph.FixEventObject(eventObj); + + var canvas = eventObj.target; + var context = canvas.getContext('2d'); + var obj = canvas.__object__; + var mouseCoords = RGraph.getMouseXY(eventObj); + var mouseX = mouseCoords[0]; + var mouseY = mouseCoords[1]; + var bar = obj.getBar(eventObj); + + if (bar) { + + var idx = bar[5]; + + // Redraw the graph + RGraph.Redraw(); + + // Get the tooltip text + var text = RGraph.parseTooltipText(obj.Get('chart.tooltips'), idx); + + if (String(text).length && text != '') { + + // SHOW THE CORRECT TOOLTIP + RGraph.Tooltip(canvas, text, eventObj.pageX, eventObj.pageY, idx); + + /** + * Draw a rectangle around the correct bar, in effect highlighting it + */ + + context.lineWidth = 1; + context.strokeStyle = obj.Get('chart.highlight.stroke'); + context.fillStyle = obj.Get('chart.highlight.fill'); + context.strokeRect(bar[1], bar[2], bar[3], bar[4]); + context.fillRect(bar[1], bar[2], bar[3], bar[4]); + + eventObj.stopPropagation(); + } + + return; + } + } + this.canvas.addEventListener('click', canvas_onclick_func, false); + RGraph.AddEventListener(this.id, 'click', canvas_onclick_func); + } + } + + + /** + * Retrieves the bar (if any) that has been click on or is hovered over + * + * @param object e The event object + */ + RGraph.Gantt.prototype.getBar = function (e) + { + e = RGraph.FixEventObject(e); + + var canvas = e.target; + var context = canvas.getContext('2d'); + var obj = canvas.__object__; + var mouseCoords = RGraph.getMouseXY(e); + var mouseX = mouseCoords[0]; + var mouseY = mouseCoords[1]; + var coords = obj.coords; + + /** + * Loop through the bars determining if the mouse is over a bar + */ + for (var i=0; i<coords.length; i++) { + + var left = coords[i][0]; + var top = coords[i][1]; + var width = coords[i][2]; + var height = coords[i][3]; + + if ( mouseX >= left + && mouseX <= (left + width) + && mouseY >= top + && mouseY <= (top + height) + && (typeof(obj.Get('chart.tooltips')) == 'function' || obj.Get('chart.tooltips')[i]) ) { + + return [obj, left, top, width, height, i]; + } + } + } + + + /** + * Draws a single event + */ + RGraph.Gantt.prototype.DrawSingleEvent = function () + { + var min = this.Get('chart.xmin'); + var context = this.context; + var ev = RGraph.array_clone(arguments[0]); + + context.beginPath(); + context.strokeStyle = 'black'; + context.fillStyle = ev[4] ? ev[4] : this.Get('chart.defaultcolor'); + + var barStartX = this.gutterLeft + (((ev[0] - min) / (this.Get('chart.xmax') - min)) * this.graphArea); + //barStartX += this.margin; + var barStartY = this.gutterTop + (i * this.barHeight); + var barWidth = (ev[1] / (this.Get('chart.xmax') - min) ) * this.graphArea; + + /** + * If the width is greater than the graph atrea, curtail it + */ + if ( (barStartX + barWidth) > (RGraph.GetWidth(this) - this.gutterRight) ) { + barWidth = RGraph.GetWidth(this) - this.gutterRight - barStartX; + } + + /** + * Draw the actual bar storing store the coordinates + */ + this.coords.push([barStartX, barStartY + this.Get('chart.margin'), barWidth, this.barHeight - (2 * this.Get('chart.margin'))]); + context.fillRect(barStartX, barStartY + this.Get('chart.margin'), barWidth, this.barHeight - (2 * this.Get('chart.margin')) ); + + // Work out the completeage indicator + var complete = (ev[2] / 100) * barWidth; + + // Draw the % complete indicator. If it's greater than 0 + if (typeof(ev[2]) == 'number') { + context.beginPath(); + context.fillStyle = ev[5] ? ev[5] : '#0c0'; + context.fillRect(barStartX, + barStartY + this.Get('chart.margin'), + (ev[2] / 100) * barWidth, + this.barHeight - (2 * this.Get('chart.margin')) ); + + context.beginPath(); + context.fillStyle = this.Get('chart.text.color'); + RGraph.Text(context, this.Get('chart.text.font'), this.Get('chart.text.size'), barStartX + barWidth + 5, barStartY + this.halfBarHeight, String(ev[2]) + '%', 'center'); + } + + // draw the border around the bar + if (this.Get('chart.borders') || ev[6]) { + context.strokeStyle = typeof(ev[6]) == 'string' ? ev[6] : 'black'; + context.lineWidth = (typeof(ev[7]) == 'number' ? ev[7] : 1); + context.beginPath(); + context.strokeRect(barStartX, barStartY + this.Get('chart.margin'), barWidth, this.barHeight - (2 * this.Get('chart.margin')) ); + } + }
\ No newline at end of file diff --git a/schall/static/RGraph/libraries/RGraph.gauge.js b/schall/static/RGraph/libraries/RGraph.gauge.js new file mode 100644 index 0000000..80a445e --- /dev/null +++ b/schall/static/RGraph/libraries/RGraph.gauge.js @@ -0,0 +1,464 @@ + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + + if (typeof(RGraph) == 'undefined') RGraph = {}; + + /** + * The line chart constructor + * + * @param object canvas The cxanvas object + * @param array data The chart data + * @param array ... Other lines to plot + */ + RGraph.Gauge = function (id, min, max, value) + { + // Get the canvas and context objects + this.id = id; + this.canvas = document.getElementById(id); + this.context = this.canvas.getContext ? this.canvas.getContext("2d") : null; + this.canvas.__object__ = this; + this.type = 'gauge'; + this.min = min; + this.max = max; + this.value = value; + this.isRGraph = true; + this.currentValue = null; + + /** + * Range checking + */ + if (this.value > this.max) { + this.value = max; + } + + if (this.value < this.min) { + this.value = min; + } + + + + /** + * Compatibility with older browsers + */ + RGraph.OldBrowserCompat(this.context); + + + // Various config type stuff + this.properties = { + 'chart.gutter.left': 5, + 'chart.gutter.right': 5, + 'chart.gutter.top': 5, + 'chart.gutter.bottom': 5, + 'chart.border.width': 10, + 'chart.title': '', + 'chart.title.font': 'Verdana', + 'chart.title.size': 14, + 'chart.title.color': '#333', + 'chart.title.bold': false, + 'chart.text.font': 'Verdana', + 'chart.text.color': '#666', + 'chart.text.size': 10, + 'chart.scale.decimals': 0, + 'chart.units.pre': '', + 'chart.units.post': '', + 'chart.red.start': 0.9 * this.max, + 'chart.red.color': '#DC3912', + 'chart.yellow.color': '#FF9900', + 'chart.green.end': 0.7 * this.max, + 'chart.green.color': 'rgba(0,0,0,0)', + 'chart.needle.tail': false + } + } + + + + /** + * An all encompassing accessor + * + * @param string name The name of the property + * @param mixed value The value of the property + */ + RGraph.Gauge.prototype.Set = function (name, value) + { + this.properties[name] = value; + } + + + /** + * An all encompassing accessor + * + * @param string name The name of the property + */ + RGraph.Gauge.prototype.Get = function (name) + { + return this.properties[name]; + } + + + /** + * The function you call to draw the line chart + * + * @param bool An optional bool used internally to ditinguish whether the + * line chart is being called by the bar chart + */ + RGraph.Gauge.prototype.Draw = function () + { + /** + * Fire the onbeforedraw event + */ + RGraph.FireCustomEvent(this, 'onbeforedraw'); + + + /** + * Clear all of this canvases event handlers (the ones installed by RGraph) + */ + RGraph.ClearEventListeners(this.id); + + + /** + * Store the value (for animation primarily + */ + this.currentValue = this.value; + + + /** + * This is new in May 2011 and facilitates indiviual gutter settings, + * eg chart.gutter.left + */ + this.gutterLeft = this.Get('chart.gutter.left'); + this.gutterRight = this.Get('chart.gutter.right'); + this.gutterTop = this.Get('chart.gutter.top'); + this.gutterBottom = this.Get('chart.gutter.bottom'); + + this.centerx = ((this.canvas.width - this.gutterLeft - this.gutterRight) / 2) + this.gutterLeft; + this.centery = ((this.canvas.height - this.gutterTop - this.gutterBottom) / 2) + this.gutterTop; + this.radius = Math.min( + ((this.canvas.width - this.gutterLeft - this.gutterRight) / 2), + ((this.canvas.height - this.gutterTop - this.gutterBottom) / 2) + ); + this.startAngle = (1.57 / 3) + 1.57; + this.endAngle = 6.28 + 1.57 - (1.57 / 3); + + // This has to be in the constructor + this.centerpinRadius = (15/125) * this.radius; + + + /** + * Setup the context menu if required + */ + if (this.Get('chart.contextmenu')) { + RGraph.ShowContext(this); + } + + + + // DRAW THE CHART HERE + this.DrawBackGround(); + this.DrawColorBands(); + this.DrawSmallTickmarks(); + this.DrawBigTickmarks(); + this.DrawLabels(); + this.DrawTitle(); + this.DrawNeedle(); + this.DrawCenterpin(); + + + + + /** + * If the canvas is annotatable, do install the event handlers + */ + if (this.Get('chart.annotatable')) { + RGraph.Annotate(this); + } + + + + /** + * This bit shows the mini zoom window if requested + */ + if (this.Get('chart.zoom.mode') == 'thumbnail') { + RGraph.ShowZoomWindow(this); + } + + /** + * This function enables the zoom in area mode + */ + if (this.Get('chart.zoom.mode') == 'area') { + RGraph.ZoomArea(this); + } + + /** + * This function enables resizing + */ + if (this.Get('chart.resizable')) { + RGraph.AllowResizing(this); + } + + + /** + * Fire the RGraph ondraw event + */ + RGraph.FireCustomEvent(this, 'ondraw'); + } + + + /** + * Draw the background + */ + RGraph.Gauge.prototype.DrawBackGround = function () + { + var borderWidth = this.Get('chart.border.width'); + + this.context.beginPath(); + this.context.fillStyle = 'white'; + + this.context.arc(this.centerx, this.centery, this.radius, 0, 6.28, 0); + this.context.fill(); + + /** + * Draw the gray circle + */ + this.context.beginPath(); + this.context.fillStyle = '#ccc';; + this.context.arc(this.centerx, this.centery, this.radius, 0, 6.28, 0); + this.context.fill(); + + /** + * Draw the light gray inner border + */ + this.context.beginPath(); + this.context.fillStyle = '#f1f1f1'; + this.context.arc(this.centerx, this.centery, this.radius - borderWidth, 0, 6.28, 0); + this.context.fill(); + + // Draw the white circle inner border + this.context.beginPath(); + this.context.fillStyle = 'white'; + this.context.arc(this.centerx, this.centery, this.radius - borderWidth - 4, 0, 6.28, 0); + this.context.fill(); + + this.context.beginPath(); + this.context.strokeStyle = 'black'; + //this.context.moveTo(this.centerx, this.centery) + this.context.arc(this.centerx, this.centery, this.radius, 0, 6.28, 0); + this.context.stroke(); + } + + + /** + * This function draws the smaller tickmarks + */ + RGraph.Gauge.prototype.DrawSmallTickmarks = function () + { + var numTicks = 25; + + for (var i=0; i<=numTicks; ++i) { + this.context.beginPath(); + this.context.strokeStyle = 'black'; + var a = (((this.endAngle - this.startAngle) / numTicks) * i) + this.startAngle; + this.context.arc(this.centerx, this.centery, this.radius - this.Get('chart.border.width') - 10, a, a + 0.00001, 0); + this.context.arc(this.centerx, this.centery, this.radius - this.Get('chart.border.width') - 10 - 5, a, a + 0.00001, 0); + this.context.stroke(); + } + } + + + /** + * This function draws the large, bold tickmarks + */ + RGraph.Gauge.prototype.DrawBigTickmarks = function () + { + var numTicks = 5; + this.context.lineWidth = 3; + this.context.lineCap = 'round'; + + for (var i=0; i<=numTicks; ++i) { + this.context.beginPath(); + this.context.strokeStyle = 'black'; + var a = (((this.endAngle - this.startAngle) / numTicks) * i) + this.startAngle; + this.context.arc(this.centerx, this.centery, this.radius - this.Get('chart.border.width') - 10, a, a + 0.00001, 0); + this.context.arc(this.centerx, this.centery, this.radius - this.Get('chart.border.width') - 10 - 10, a, a + 0.00001, 0); + this.context.stroke(); + } + } + + + /** + * This function draws the centerpin + */ + RGraph.Gauge.prototype.DrawCenterpin = function () + { + var offset = 6; + + var grad = this.context.createRadialGradient(this.centerx + offset, this.centery - offset, 0, this.centerx + offset, this.centery - offset, 25); + grad.addColorStop(0, '#ddf'); + grad.addColorStop(1, 'blue'); + + this.context.beginPath(); + this.context.fillStyle = grad; + this.context.arc(this.centerx, this.centery, this.centerpinRadius, 0, 6.28, 0); + this.context.fill(); + } + + + /** + * This function draws the labels + */ + RGraph.Gauge.prototype.DrawLabels = function () + { + this.context.fillStyle = this.Get('chart.text.color'); + + this.context.beginPath(); + // First label + RGraph.Text(this.context, this.Get('chart.text.font'), this.Get('chart.text.size'), this.centerx - Math.sin(0.52) * (this.radius - 25 - this.Get('chart.border.width')),this.centery + Math.cos(0.52) * (this.radius - 25 - this.Get('chart.border.width')), this.Get('chart.units.pre') + String(this.min.toFixed(this.Get('chart.scale.decimals'))) + this.Get('chart.units.post'),'bottom', 'left'); + + // Second label + RGraph.Text(this.context, this.Get('chart.text.font'), this.Get('chart.text.size'), this.centerx - this.radius + 25 + this.Get('chart.border.width'), this.centery,this.Get('chart.units.pre') + String((((this.max - this.min) * 0.2) + this.min).toFixed(this.Get('chart.scale.decimals')) + this.Get('chart.units.post')),'center', 'left'); + + // Third label + RGraph.Text(this.context, this.Get('chart.text.font'), this.Get('chart.text.size'), this.centerx - Math.sin(0.52) * (this.radius - 25 - this.Get('chart.border.width')),this.centery - Math.cos(0.52) * (this.radius - 25 - this.Get('chart.border.width')),this.Get('chart.units.pre') + String((((this.max - this.min) * 0.4) + this.min).toFixed(this.Get('chart.scale.decimals'))) + this.Get('chart.units.post'),'top', 'center'); + + // Fourth label + RGraph.Text(this.context, this.Get('chart.text.font'), this.Get('chart.text.size'), this.centerx + Math.sin(0.52) * (this.radius - 25 - this.Get('chart.border.width')),this.centery - Math.cos(0.52) * (this.radius - 25 - this.Get('chart.border.width')),this.Get('chart.units.pre') + String((((this.max - this.min) * 0.6) + this.min).toFixed(this.Get('chart.scale.decimals'))) + this.Get('chart.units.post'),'top', 'center'); + + // Fifth label + RGraph.Text(this.context, this.Get('chart.text.font'), this.Get('chart.text.size'), this.centerx + this.radius - 25 - this.Get('chart.border.width'), this.centery, this.Get('chart.units.pre') + String((((this.max - this.min) * 0.8) + this.min).toFixed(this.Get('chart.scale.decimals'))) + this.Get('chart.units.post'),'center', 'right'); + + // Sixth (last) label + RGraph.Text(this.context,this.Get('chart.text.font'), this.Get('chart.text.size'), this.centerx + Math.sin(0.52) * (this.radius - 25 - this.Get('chart.border.width')),this.centery + Math.cos(0.52) * (this.radius - 25 - this.Get('chart.border.width')),this.Get('chart.units.pre') + String(this.max.toFixed(this.Get('chart.scale.decimals'))) + this.Get('chart.units.post'),'bottom', 'right'); + this.context.fill(); + } + + + /** + * This function draws the title + */ + RGraph.Gauge.prototype.DrawTitle = function () + { + var title = this.Get('chart.title'); + + if (title) { + + this.context.fillStyle = this.Get('chart.title.color'); + + this.context.beginPath(); + RGraph.Text(this.context, + this.Get('chart.title.font'), + this.Get('chart.title.size'), + this.centerx, + this.centery - 30, + String(this.Get('chart.title')), + 'center', + 'center', + null, + null, + null, + this.Get('chart.title.bold')); + this.context.fill(); + } + } + + + /** + * This function draws the Needle + */ + RGraph.Gauge.prototype.DrawNeedle = function () + { + this.context.lineWidth = 0.5; + this.context.strokeStyle = '#983724'; + this.context.fillStyle = '#D5604D'; + + var angle = (this.endAngle - this.startAngle) * ((this.value - this.min) / (this.max - this.min)); + angle += this.startAngle; + + + this.context.beginPath(); + this.context.arc(this.centerx, this.centery, this.radius - 25 - this.Get('chart.border.width'), angle, angle + 0.00001, false); + this.context.arc(this.centerx, this.centery, this.centerpinRadius * 0.5, angle + 1.57, angle + 0.00001 + 1.57, false); + + if (this.Get('chart.needle.tail')) { + this.context.arc(this.centerx, this.centery, this.radius * 0.2 , angle + 3.14, angle + 0.00001 + 3.14, false); + } + + this.context.arc(this.centerx, this.centery, this.centerpinRadius * 0.5, angle - 1.57, angle - 0.00001 - 1.57, false); + this.context.stroke(); + this.context.fill(); + + + //this.context.strokeStyle = '#D5604D'; + + //this.context.beginPath(); + // this.context.lineWidth = 5; + // this.context.arc(this.centerx, this.centery, 25, angle + 3.14, angle + 0.00001 + 3.14, false); + // this.context.lineTo(this.centerx, this.centery); + //this.context.stroke(); + //this.context.fill(); + + /** + * Store the angle in an object variable + */ + this.angle = angle; + } + + + /** + * This draws the green background to the tickmarks + */ + RGraph.Gauge.prototype.DrawColorBands = function () + { + /** + * Draw the GREEN region + */ + this.context.strokeStyle = this.Get('chart.green.color'); + this.context.fillStyle = this.Get('chart.green.color'); + + var greenStart = this.startAngle; + var greenEnd = this.startAngle + (this.endAngle - this.startAngle) * ((this.Get('chart.green.end') - this.min) / (this.max - this.min)) + + this.context.beginPath(); + this.context.arc(this.centerx, this.centery, this.radius - 10 - this.Get('chart.border.width'), greenStart, greenEnd, false); + this.context.arc(this.centerx, this.centery, this.radius - 20 - this.Get('chart.border.width'), greenEnd, greenStart, true); + this.context.fill(); + + + /** + * Draw the YELLOW region + */ + this.context.strokeStyle = this.Get('chart.yellow.color'); + this.context.fillStyle = this.Get('chart.yellow.color'); + + var yellowStart = greenEnd; + var yellowEnd = this.startAngle + (this.endAngle - this.startAngle) * ((this.Get('chart.red.start') - this.min) / (this.max - this.min)) + + this.context.beginPath(); + this.context.arc(this.centerx, this.centery, this.radius - 10 - this.Get('chart.border.width'), yellowStart, yellowEnd, false); + this.context.arc(this.centerx, this.centery, this.radius - 20 - this.Get('chart.border.width'), yellowEnd, yellowStart, true); + this.context.fill(); + + + /** + * Draw the RED region + */ + this.context.strokeStyle = this.Get('chart.red.color'); + this.context.fillStyle = this.Get('chart.red.color'); + + var redStart = yellowEnd; + var redEnd = this.startAngle + (this.endAngle - this.startAngle) * ((this.max - this.min) / (this.max - this.min)) + + this.context.beginPath(); + this.context.arc(this.centerx, this.centery, this.radius - 10 - this.Get('chart.border.width'), redStart, redEnd, false); + this.context.arc(this.centerx, this.centery, this.radius - 20 - this.Get('chart.border.width'), redEnd, redStart, true); + this.context.fill(); + }
\ No newline at end of file diff --git a/schall/static/RGraph/libraries/RGraph.hbar.js b/schall/static/RGraph/libraries/RGraph.hbar.js new file mode 100644 index 0000000..a8f39d6 --- /dev/null +++ b/schall/static/RGraph/libraries/RGraph.hbar.js @@ -0,0 +1,966 @@ + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + + if (typeof(RGraph) == 'undefined') RGraph = {}; + + /** + * The horizontal bar chart constructor. The horizontal bar is a minor variant + * on the bar chart. If you have big labels, this may be useful as there is usually + * more space available for them. + * + * @param object canvas The canvas object + * @param array data The chart data + */ + RGraph.HBar = function (id, data) + { + // Get the canvas and context objects + this.id = id; + this.canvas = document.getElementById(id); + this.context = this.canvas.getContext ? this.canvas.getContext("2d") : null; + this.canvas.__object__ = this; + this.data = data; + this.type = 'hbar'; + this.coords = []; + this.isRGraph = true; + + + /** + * Compatibility with older browsers + */ + RGraph.OldBrowserCompat(this.context); + + + this.max = 0; + this.stackedOrGrouped = false; + + // Default properties + this.properties = { + 'chart.gutter.left': 75, + 'chart.gutter.right': 25, + 'chart.gutter.top': 35, + 'chart.gutter.bottom': 25, + 'chart.background.grid': true, + 'chart.background.grid.color': '#ddd', + 'chart.background.grid.width': 1, + 'chart.background.grid.hsize': 25, + 'chart.background.grid.vsize': 25, + 'chart.background.barcolor1': 'white', + 'chart.background.barcolor2': 'white', + 'chart.background.grid.hlines': true, + 'chart.background.grid.vlines': true, + 'chart.background.grid.border': true, + 'chart.background.grid.autofit':true, + 'chart.background.grid.autofit.numhlines': 14, + 'chart.background.grid.autofit.numvlines': 20, + 'chart.title': '', + 'chart.title.background': null, + 'chart.title.xaxis': '', + 'chart.title.xaxis.bold': true, + 'chart.title.xaxis.size': null, + 'chart.title.xaxis.font': null, + 'chart.title.yaxis': '', + 'chart.title.yaxis.bold': true, + 'chart.title.yaxis.size': null, + 'chart.title.yaxis.font': null, + 'chart.title.xaxis.pos': null, + 'chart.title.yaxis.pos': 10, + 'chart.title.hpos': null, + 'chart.title.vpos': null, + 'chart.title.bold': true, + 'chart.title.font': null, + 'chart.text.size': 10, + 'chart.text.color': 'black', + 'chart.text.font': 'Verdana', + 'chart.colors': ['red', 'blue', 'green', 'pink', 'yellow', 'cyan', 'navy', 'gray', 'black'], + 'chart.labels': [], + 'chart.labels.above': false, + 'chart.labels.above.decimals': 0, + 'chart.xlabels': true, + 'chart.contextmenu': null, + 'chart.key': [], + 'chart.key.background': 'white', + 'chart.key.position': 'graph', + 'chart.key.halign': 'right', + 'chart.key.shadow': false, + 'chart.key.shadow.color': '#666', + 'chart.key.shadow.blur': 3, + 'chart.key.shadow.offsetx': 2, + 'chart.key.shadow.offsety': 2, + 'chart.key.position.gutter.boxed': true, + 'chart.key.position.x': null, + 'chart.key.position.y': null, + 'chart.key.color.shape': 'square', + 'chart.key.rounded': true, + 'chart.key.linewidth': 1, + 'chart.units.pre': '', + 'chart.units.post': '', + 'chart.units.ingraph': false, + 'chart.strokestyle': 'black', + 'chart.xmin': 0, + 'chart.xmax': 0, + 'chart.axis.color': 'black', + 'chart.shadow': false, + 'chart.shadow.color': '#666', + 'chart.shadow.blur': 3, + 'chart.shadow.offsetx': 3, + 'chart.shadow.offsety': 3, + 'chart.vmargin': 3, + 'chart.grouping': 'grouped', + 'chart.tooltips': null, + 'chart.tooltips.event': 'onclick', + 'chart.tooltips.effect': 'fade', + 'chart.tooltips.css.class': 'RGraph_tooltip', + 'chart.tooltips.highlight': true, + 'chart.highlight.fill': 'rgba(255,255,255,0.5)', + 'chart.highlight.stroke': 'black', + 'chart.annotatable': false, + 'chart.annotate.color': 'black', + 'chart.zoom.factor': 1.5, + 'chart.zoom.fade.in': true, + 'chart.zoom.fade.out': true, + 'chart.zoom.hdir': 'right', + 'chart.zoom.vdir': 'down', + 'chart.zoom.frames': 25, + 'chart.zoom.delay': 16.666, + 'chart.zoom.shadow': true, + 'chart.zoom.mode': 'canvas', + 'chart.zoom.thumbnail.width': 75, + 'chart.zoom.thumbnail.height': 75, + 'chart.zoom.background': true, + 'chart.zoom.action': 'zoom', + 'chart.resizable': false, + 'chart.resize.handle.adjust': [0,0], + 'chart.resize.handle.background': null, + 'chart.scale.point': '.', + 'chart.scale.thousand': ',', + 'chart.scale.decimals': null, + 'chart.noredraw': false + } + + // Check for support + if (!this.canvas) { + alert('[HBAR] No canvas support'); + return; + } + + for (i=0; i<this.data.length; ++i) { + if (typeof(this.data[i]) == 'object') { + this.stackedOrGrouped = true; + } + } + + + /** + * Set the .getShape commonly named method + */ + this.getShape = this.getBar; + } + + + /** + * A setter + * + * @param name string The name of the property to set + * @param value mixed The value of the property + */ + RGraph.HBar.prototype.Set = function (name, value) + { + if (name == 'chart.labels.abovebar') { + name = 'chart.labels.above'; + } + + this.properties[name.toLowerCase()] = value; + } + + + /** + * A getter + * + * @param name string The name of the property to get + */ + RGraph.HBar.prototype.Get = function (name) + { + if (name == 'chart.labels.abovebar') { + name = 'chart.labels.above'; + } + + return this.properties[name]; + } + + + /** + * The function you call to draw the bar chart + */ + RGraph.HBar.prototype.Draw = function () + { + /** + * Fire the onbeforedraw event + */ + RGraph.FireCustomEvent(this, 'onbeforedraw'); + + + /** + * Clear all of this canvases event handlers (the ones installed by RGraph) + */ + RGraph.ClearEventListeners(this.id); + + /** + * This is new in May 2011 and facilitates indiviual gutter settings, + * eg chart.gutter.left + */ + this.gutterLeft = this.Get('chart.gutter.left'); + this.gutterRight = this.Get('chart.gutter.right'); + this.gutterTop = this.Get('chart.gutter.top'); + this.gutterBottom = this.Get('chart.gutter.bottom'); + + /** + * Stop the coords array from growing uncontrollably + */ + this.coords = []; + this.max = 0; + + /** + * Check for chart.xmin in stacked charts + */ + if (this.Get('chart.xmin') > 0 && this.Get('chart.grouping') == 'stacked') { + alert('[HBAR] Using chart.xmin is not supported with stacked charts, resetting chart.xmin to zero'); + this.Set('chart.xmin', 0); + } + + /** + * Work out a few things. They need to be here because they depend on things you can change before you + * call Draw() but after you instantiate the object + */ + this.graphwidth = this.canvas.width - this.gutterLeft - this.gutterRight; + this.graphheight = this.canvas.height - this.gutterTop - this.gutterBottom; + this.halfgrapharea = this.grapharea / 2; + this.halfTextHeight = this.Get('chart.text.size') / 2; + + + // Progressively Draw the chart + RGraph.background.Draw(this); + + this.Drawbars(); + this.DrawAxes(); + this.DrawLabels(); + + + // Draw the key if necessary + if (this.Get('chart.key').length) { + RGraph.DrawKey(this, this.Get('chart.key'), this.Get('chart.colors')); + } + + /** + * Install the event handlers for tooltips + */ + if (this.Get('chart.tooltips')) { + + // Need to register this object for redrawing + RGraph.Register(this); + + /** + * Install the window onclick handler + */ + window.onclick = function () + { + RGraph.Redraw(); + } + + + + /** + * If the cursor is over a hotspot, change the cursor to a hand + */ + //this.canvas.onmousemove = function (e) + var canvas_onmousemove_func = function (e) + { + e = RGraph.FixEventObject(e); + + var canvas = document.getElementById(this.id); + var obj = canvas.__object__; + var bar = obj.getBar(e); + + /** + * Get the mouse X/Y coordinates + */ + var mouseCoords = RGraph.getMouseXY(e); + + if (bar && (typeof(obj.Get('chart.tooltips')) == 'function' || obj.Get('chart.tooltips')[bar[4]]) ) { + + canvas.style.cursor = 'pointer'; + + var left = bar[0]; + var top = bar[1]; + var width = bar[2]; + var height = bar[3]; + var idx = bar[4]; + + /** + * Show the tooltip if the event is onmousemove + */ + if (obj.Get('chart.tooltips.event') == 'onmousemove') { + + var tooltipObj = RGraph.Registry.Get('chart.tooltip'); + + /** + * Get the tooltip text + */ + if (typeof(obj.Get('chart.tooltips')) == 'function') { + var text = obj.Get('chart.tooltips')(idx); + + } else if (typeof(obj.Get('chart.tooltips')) == 'object' && typeof(obj.Get('chart.tooltips')[idx]) == 'function') { + var text = obj.Get('chart.tooltips')[idx](idx); + + } else if (typeof(obj.Get('chart.tooltips')) == 'object') { + var text = obj.Get('chart.tooltips')[idx]; + + } else { + var text = null; + } + + if (text) { + if (!tooltipObj || tooltipObj.__index__ != idx) { + + RGraph.HideTooltip(); + RGraph.Redraw(); + + obj.context.beginPath(); + obj.context.strokeStyle = obj.Get('chart.highlight.stroke'); + obj.context.fillStyle = obj.Get('chart.highlight.fill'); + obj.context.strokeRect(left, top, width, height); + obj.context.fillRect(left, top, width, height); + + RGraph.Tooltip(canvas, text, e.pageX, e.pageY, idx); + } + return; + } + } + } + + if (!bar) { + canvas.style.cursor = 'default'; + } + } + this.canvas.addEventListener('mousemove', canvas_onmousemove_func, false); + RGraph.AddEventListener(this.id, 'mousemove', canvas_onmousemove_func); + + + /** + * Install the onclick event handler for the tooltips + */ + //this.canvas.onclick = function (e) + var canvas_onclick_func = function (e) + { + e = RGraph.FixEventObject(e); + + //var canvas = document.getElementById(this.id); + var canvas = e.target; + var obj = canvas.__object__; + var bar = obj.getBar(e); + + /** + * Redraw the graph first, in effect resetting the graph to as it was when it was first drawn + * This "deselects" any already selected bar + */ + RGraph.Redraw(); + + /** + * Get the mouse X/Y coordinates + */ + var mouseCoords = RGraph.getMouseXY(e); + + /******************************************************* + * Only do this if a bar is being hovered over + *******************************************************/ + if (bar) { + + var left = bar[0]; + var top = bar[1]; + var width = bar[2]; + var height = bar[3]; + var idx = bar[4]; + + /** + * Get the tooltip text + */ + if (typeof(obj.Get('chart.tooltips')) == 'function') { + var text = obj.Get('chart.tooltips')(idx); + + } else if (typeof(obj.Get('chart.tooltips')) == 'object' && typeof(obj.Get('chart.tooltips')[idx]) == 'function') { + var text = obj.Get('chart.tooltips')[idx](idx); + + } else if (typeof(obj.Get('chart.tooltips')) == 'object') { + var text = obj.Get('chart.tooltips')[idx]; + + } else { + var text = null; + } + + /** + * Show a tooltip if it's defined + */ + if (String(text).length && text != null) { + + obj.context.beginPath(); + obj.context.strokeStyle = obj.Get('chart.highlight.stroke'); + obj.context.fillStyle = obj.Get('chart.highlight.fill'); + obj.context.strokeRect(left, top, width, height); + obj.context.fillRect(left, top, width, height); + + obj.context.stroke(); + obj.context.fill(); + + RGraph.Tooltip(canvas, text, e.pageX, e.pageY, idx); + } + } + + /** + * Stop the event bubbling + */ + e.stopPropagation(); + } + this.canvas.addEventListener('click', canvas_onclick_func, false); + RGraph.AddEventListener(this.id,'click', canvas_onclick_func); + + // This resets the bar graph + if (RGraph.Registry.Get('chart.tooltip')) { + RGraph.Registry.Get('chart.tooltip').style.display = 'none'; + RGraph.Registry.Set('chart.tooltip', null) + } + } + + /** + * Setup the context menu if required + */ + if (this.Get('chart.contextmenu')) { + RGraph.ShowContext(this); + } + + + /** + * Draw "in graph" labels + */ + RGraph.DrawInGraphLabels(this); + + /** + * If the canvas is annotatable, do install the event handlers + */ + if (this.Get('chart.annotatable')) { + RGraph.Annotate(this); + } + + /** + * This bit shows the mini zoom window if requested + */ + if (this.Get('chart.zoom.mode') == 'thumbnail' || this.Get('chart.zoom.mode') == 'area') { + RGraph.ShowZoomWindow(this); + } + + + /** + * This function enables resizing + */ + if (this.Get('chart.resizable')) { + RGraph.AllowResizing(this); + } + + + /** + * Fire the RGraph ondraw event + */ + RGraph.FireCustomEvent(this, 'ondraw'); + } + + /** + * This draws the axes + */ + RGraph.HBar.prototype.DrawAxes = function () + { + var halfway = (this.graphwidth / 2) + this.gutterLeft; + + this.context.beginPath(); + this.context.lineWidth = 1; + this.context.strokeStyle = this.Get('chart.axis.color'); + + // Draw the Y axis + if (this.Get('chart.yaxispos') == 'center') { + this.context.moveTo(halfway, this.gutterTop); + this.context.lineTo(halfway, this.canvas.height - this.gutterBottom); + } else { + this.context.moveTo(this.gutterLeft, this.gutterTop); + this.context.lineTo(this.gutterLeft, this.canvas.height - this.gutterBottom); + } + + // Draw the X axis + this.context.moveTo(this.gutterLeft, RGraph.GetHeight(this) - this.gutterBottom); + this.context.lineTo(this.canvas.width - this.gutterRight, this.canvas.height - this.gutterBottom); + + // Draw the Y tickmarks + var yTickGap = (this.canvas.height - this.gutterTop - this.gutterBottom) / this.data.length; + + for (y=this.gutterTop; y<(this.canvas.height - this.gutterBottom - 1); y+=yTickGap) { + if (this.Get('chart.yaxispos') == 'center') { + this.context.moveTo(halfway + 3, y); + this.context.lineTo(halfway - 3, y); + } else { + this.context.moveTo(this.gutterLeft, y); + this.context.lineTo( this.gutterLeft - 3, y); + } + } + + + // Draw the X tickmarks + xTickGap = (RGraph.GetWidth(this) - this.gutterLeft - this.gutterRight ) / 10; + yStart = RGraph.GetHeight(this) - this.gutterBottom; + yEnd = (RGraph.GetHeight(this) - this.gutterBottom) + 3; + + for (x=(RGraph.GetWidth(this) - this.gutterRight), i=0; this.Get('chart.yaxispos') == 'center' ? x>=this.gutterLeft : x>this.gutterLeft; x-=xTickGap) { + + if (this.Get('chart.yaxispos') != 'center' || i != 5) { + this.context.moveTo(x, yStart); + this.context.lineTo(x, yEnd); + } + i++; + } + + this.context.stroke(); + } + + + /** + * This draws the labels for the graph + */ + RGraph.HBar.prototype.DrawLabels = function () + { + var context = this.context; + var canvas = this.canvas; + var units_pre = this.Get('chart.units.pre'); + var units_post = this.Get('chart.units.post'); + var text_size = this.Get('chart.text.size'); + var font = this.Get('chart.text.font'); + + + /** + * Set the units to blank if they're to be used for ingraph labels only + */ + if (this.Get('chart.units.ingraph')) { + units_pre = ''; + units_post = ''; + } + + + /** + * Draw the X axis labels + */ + if (this.Get('chart.xlabels')) { + this.context.beginPath(); + this.context.fillStyle = this.Get('chart.text.color'); + + if (this.Get('chart.yaxispos') == 'center') { + RGraph.Text(context, font, text_size, this.gutterLeft + (this.graphwidth * (10/10)), this.gutterTop + this.halfTextHeight + this.graphheight + 2, RGraph.number_format(this, Number(this.scale[4]).toFixed(this.Get('chart.scale.decimals')), units_pre, units_post), 'center', 'center'); + RGraph.Text(context, font, text_size, this.gutterLeft + (this.graphwidth * (9/10)), this.gutterTop + this.halfTextHeight + this.graphheight + 2, RGraph.number_format(this, Number(this.scale[3]).toFixed(this.Get('chart.scale.decimals')), units_pre, units_post), 'center', 'center'); + RGraph.Text(context, font, text_size, this.gutterLeft + (this.graphwidth * (8/10)), this.gutterTop + this.halfTextHeight + this.graphheight + 2, RGraph.number_format(this, Number(this.scale[2]).toFixed(this.Get('chart.scale.decimals')), units_pre, units_post), 'center', 'center'); + RGraph.Text(context, font, text_size, this.gutterLeft + (this.graphwidth * (7/10)), this.gutterTop + this.halfTextHeight + this.graphheight + 2, RGraph.number_format(this, Number(this.scale[1]).toFixed(this.Get('chart.scale.decimals')), units_pre, units_post), 'center', 'center'); + RGraph.Text(context, font, text_size, this.gutterLeft + (this.graphwidth * (6/10)), this.gutterTop + this.halfTextHeight + this.graphheight + 2, RGraph.number_format(this, Number(this.scale[0]).toFixed(this.Get('chart.scale.decimals')), units_pre, units_post), 'center', 'center'); + + RGraph.Text(context, font, text_size, this.gutterLeft + (this.graphwidth * (4/10)), this.gutterTop + this.halfTextHeight + this.graphheight + 2, '-' + RGraph.number_format(this, Number(this.scale[0]).toFixed(this.Get('chart.scale.decimals')), units_pre, units_post), 'center', 'center'); + RGraph.Text(context, font, text_size, this.gutterLeft + (this.graphwidth * (3/10)), this.gutterTop + this.halfTextHeight + this.graphheight + 2, '-' + RGraph.number_format(this, Number(this.scale[1]).toFixed(this.Get('chart.scale.decimals')), units_pre, units_post), 'center', 'center'); + RGraph.Text(context, font, text_size, this.gutterLeft + (this.graphwidth * (2/10)), this.gutterTop + this.halfTextHeight + this.graphheight + 2, '-' + RGraph.number_format(this, Number(this.scale[2]).toFixed(this.Get('chart.scale.decimals')), units_pre, units_post), 'center', 'center'); + RGraph.Text(context, font, text_size, this.gutterLeft + (this.graphwidth * (1/10)), this.gutterTop + this.halfTextHeight + this.graphheight + 2, '-' + RGraph.number_format(this, Number(this.scale[3]).toFixed(this.Get('chart.scale.decimals')), units_pre, units_post), 'center', 'center'); + RGraph.Text(context, font, text_size, this.gutterLeft + (this.graphwidth * (0)), this.gutterTop + this.halfTextHeight + this.graphheight + 2, '-' + RGraph.number_format(this, Number(this.scale[4]).toFixed(this.Get('chart.scale.decimals')), units_pre, units_post), 'center', 'center'); + + } else { + + RGraph.Text(context, font, text_size, this.gutterLeft + (this.graphwidth * (5/5)), this.gutterTop + this.halfTextHeight + this.graphheight + 2, RGraph.number_format(this, Number(this.scale[4]).toFixed(this.Get('chart.scale.decimals')), units_pre, units_post), 'center', 'center'); + RGraph.Text(context, font, text_size, this.gutterLeft + (this.graphwidth * (4/5)), this.gutterTop + this.halfTextHeight + this.graphheight + 2, RGraph.number_format(this, Number(this.scale[3]).toFixed(this.Get('chart.scale.decimals')), units_pre, units_post), 'center', 'center'); + RGraph.Text(context, font, text_size, this.gutterLeft + (this.graphwidth * (3/5)), this.gutterTop + this.halfTextHeight + this.graphheight + 2, RGraph.number_format(this, Number(this.scale[2]).toFixed(this.Get('chart.scale.decimals')), units_pre, units_post), 'center', 'center'); + RGraph.Text(context, font, text_size, this.gutterLeft + (this.graphwidth * (2/5)), this.gutterTop + this.halfTextHeight + this.graphheight + 2, RGraph.number_format(this, Number(this.scale[1]).toFixed(this.Get('chart.scale.decimals')), units_pre, units_post), 'center', 'center'); + RGraph.Text(context, font, text_size, this.gutterLeft + (this.graphwidth * (1/5)), this.gutterTop + this.halfTextHeight + this.graphheight + 2, RGraph.number_format(this, Number(this.scale[0]).toFixed(this.Get('chart.scale.decimals')), units_pre, units_post), 'center', 'center'); + + if (this.Get('chart.xmin') > 0) { + RGraph.Text(context,font,text_size,this.gutterLeft,this.gutterTop + this.halfTextHeight + this.graphheight + 2,RGraph.number_format(this, this.Get('chart.xmin'), units_pre, units_post),'center','center'); + } + } + + this.context.fill(); + this.context.stroke(); + } + + /** + * The Y axis labels + */ + if (typeof(this.Get('chart.labels')) == 'object') { + + var xOffset = 5; + var font = this.Get('chart.text.font'); + + // Draw the X axis labels + this.context.fillStyle = this.Get('chart.text.color'); + + // How wide is each bar + var barHeight = (RGraph.GetHeight(this) - this.gutterTop - this.gutterBottom ) / this.Get('chart.labels').length; + + // Reset the xTickGap + yTickGap = (RGraph.GetHeight(this) - this.gutterTop - this.gutterBottom) / this.Get('chart.labels').length + + // Draw the X tickmarks + var i=0; + for (y=this.gutterTop + (yTickGap / 2); y<=RGraph.GetHeight(this) - this.gutterBottom; y+=yTickGap) { + RGraph.Text(this.context, font,this.Get('chart.text.size'),this.gutterLeft - xOffset,y,String(this.Get('chart.labels')[i++]),'center','right'); + } + } + } + + + /** + * This function draws the actual bars + */ + RGraph.HBar.prototype.Drawbars = function () + { + this.context.lineWidth = 1; + this.context.strokeStyle = this.Get('chart.strokestyle'); + this.context.fillStyle = this.Get('chart.colors')[0]; + var prevX = 0; + var prevY = 0; + + /** + * Work out the max value + */ + if (this.Get('chart.xmax')) { + this.scale = [ + (((this.Get('chart.xmax') - this.Get('chart.xmin')) * 0.2) + this.Get('chart.xmin')).toFixed(this.Get('chart.scale.decimals')), + (((this.Get('chart.xmax') - this.Get('chart.xmin')) * 0.4) + this.Get('chart.xmin')).toFixed(this.Get('chart.scale.decimals')), + (((this.Get('chart.xmax') - this.Get('chart.xmin')) * 0.6) + this.Get('chart.xmin')).toFixed(this.Get('chart.scale.decimals')), + (((this.Get('chart.xmax') - this.Get('chart.xmin')) * 0.8) + this.Get('chart.xmin')).toFixed(this.Get('chart.scale.decimals')), + (((this.Get('chart.xmax') - this.Get('chart.xmin')) + this.Get('chart.xmin'))).toFixed(this.Get('chart.scale.decimals')) + ]; + this.max = this.scale[4]; + + } else { + + var grouping = this.Get('chart.grouping'); + + for (i=0; i<this.data.length; ++i) { + if (typeof(this.data[i]) == 'object') { + var value = grouping == 'grouped' ? Number(RGraph.array_max(this.data[i], true)) : Number(RGraph.array_sum(this.data[i])) ; + } else { + var value = Number(Math.abs(this.data[i])); + } + + this.max = Math.max(Math.abs(this.max), Math.abs(value)); + } + + this.scale = RGraph.getScale(this.max, this); + + /** + * Account for chart.xmin + */ + if (this.Get('chart.xmin') > 0) { + this.scale[0] = Number((((this.scale[4] - this.Get('chart.xmin')) * 0.2) + this.Get('chart.xmin')).toFixed(this.Get('chart.scale.decimals'))); + this.scale[1] = Number((((this.scale[4] - this.Get('chart.xmin')) * 0.4) + this.Get('chart.xmin')).toFixed(this.Get('chart.scale.decimals'))); + this.scale[2] = Number((((this.scale[4] - this.Get('chart.xmin')) * 0.6) + this.Get('chart.xmin')).toFixed(this.Get('chart.scale.decimals'))); + this.scale[3] = Number((((this.scale[4] - this.Get('chart.xmin')) * 0.8) + this.Get('chart.xmin')).toFixed(this.Get('chart.scale.decimals'))); + this.scale[4] = Number((((this.scale[4] - this.Get('chart.xmin')) * 1.0) + this.Get('chart.xmin')).toFixed(this.Get('chart.scale.decimals'))); + } + + this.max = this.scale[4]; + } + + if (this.Get('chart.scale.decimals') == null && Number(this.max) == 1) { + this.Set('chart.scale.decimals', 1); + } + + /******************************************************* + * This is here to facilitate sequential colors + *******************************************************/ + var colorIdx = 0; + + /** + * The bars are drawn HERE + */ + var graphwidth = (this.canvas.width - this.gutterLeft - this.gutterRight); + var halfwidth = graphwidth / 2; + + for (i=0; i<this.data.length; ++i) { + + // Work out the width and height + var width = (this.data[i] / this.max) * graphwidth; + var height = this.graphheight / this.data.length; + + var orig_height = height; + + var x = this.gutterLeft; + var y = this.gutterTop + (i * height); + var vmargin = this.Get('chart.vmargin'); + + // Account for negative lengths - Some browsers (eg Chrome) don't like a negative value + if (width < 0) { + x -= width; + width = Math.abs(width); + } + + /** + * Turn on the shadow if need be + */ + if (this.Get('chart.shadow')) { + this.context.shadowColor = this.Get('chart.shadow.color'); + this.context.shadowBlur = this.Get('chart.shadow.blur'); + this.context.shadowOffsetX = this.Get('chart.shadow.offsetx'); + this.context.shadowOffsetY = this.Get('chart.shadow.offsety'); + } + + /** + * Draw the bar + */ + this.context.beginPath(); + if (typeof(this.data[i]) == 'number') { + + var barHeight = height - (2 * vmargin); + var barWidth = ((this.data[i] - this.Get('chart.xmin')) / (this.max - this.Get('chart.xmin'))) * this.graphwidth; + var barX = this.gutterLeft; + + // Account for Y axis pos + if (this.Get('chart.yaxispos') == 'center') { + barWidth /= 2; + barX += halfwidth; + } + + // Set the fill color + this.context.strokeStyle = this.Get('chart.strokestyle'); + this.context.fillStyle = this.Get('chart.colors')[0]; + + // Sequential colors + if (this.Get('chart.colors.sequential')) { + this.context.fillStyle = this.Get('chart.colors')[colorIdx++]; + } + + this.context.strokeRect(barX, this.gutterTop + (i * height) + this.Get('chart.vmargin'), barWidth, barHeight); + this.context.fillRect(barX, this.gutterTop + (i * height) + this.Get('chart.vmargin'), barWidth, barHeight); + + this.coords.push([barX, + y + vmargin, + barWidth, + height - (2 * vmargin), + this.context.fillStyle, + this.data[i], + true]); + + /** + * Stacked bar chart + */ + } else if (typeof(this.data[i]) == 'object' && this.Get('chart.grouping') == 'stacked') { + + if (this.Get('chart.yaxispos') == 'center') { + alert('[HBAR] You can\'t have a stacked chart with the Y axis in the center, change it to grouped'); + } + + var barHeight = height - (2 * vmargin); + + for (j=0; j<this.data[i].length; ++j) { + + + // Set the fill/stroke colors + this.context.strokeStyle = this.Get('chart.strokestyle'); + this.context.fillStyle = this.Get('chart.colors')[j]; + + + // Sequential colors + if (this.Get('chart.colors.sequential')) { + this.context.fillStyle = this.Get('chart.colors')[colorIdx++]; + } + + + var width = (((this.data[i][j]) / (this.max))) * this.graphwidth; + var totalWidth = (RGraph.array_sum(this.data[i]) / this.max) * this.graphwidth; + + this.context.strokeRect(x, this.gutterTop + this.Get('chart.vmargin') + (this.graphheight / this.data.length) * i, width, height - (2 * vmargin) ); + this.context.fillRect(x, this.gutterTop + this.Get('chart.vmargin') + (this.graphheight / this.data.length) * i, width, height - (2 * vmargin) ); + + /** + * Store the coords for tooltips + */ + + // The last property of this array is a boolean which tells you whether the value is the last or not + this.coords.push([x, + y + vmargin, + width, + height - (2 * vmargin), + this.context.fillStyle, + RGraph.array_sum(this.data[i]), + j == (this.data[i].length - 1) + ]); + + x += width; + } + + /** + * A grouped bar chart + */ + } else if (typeof(this.data[i]) == 'object' && this.Get('chart.grouping') == 'grouped') { + + for (j=0; j<this.data[i].length; ++j) { + + /** + * Turn on the shadow if need be + */ + if (this.Get('chart.shadow')) { + RGraph.SetShadow(this, this.Get('chart.shadow.color'), this.Get('chart.shadow.offsetx'), this.Get('chart.shadow.offsety'), this.Get('chart.shadow.blur')); + } + + // Set the fill/stroke colors + this.context.strokeStyle = this.Get('chart.strokestyle'); + this.context.fillStyle = this.Get('chart.colors')[j]; + + + // Sequential colors + if (this.Get('chart.colors.sequential')) { + this.context.fillStyle = this.Get('chart.colors')[colorIdx++]; + } + + var width = ((this.data[i][j] - this.Get('chart.xmin')) / (this.max - this.Get('chart.xmin'))) * (RGraph.GetWidth(this) - this.gutterLeft - this.gutterRight ); + var individualBarHeight = (height - (2 * vmargin)) / this.data[i].length; + + var startX = this.gutterLeft; + var startY = y + vmargin + (j * individualBarHeight); + + // Account for the Y axis being in the middle + if (this.Get('chart.yaxispos') == 'center') { + width /= 2; + startX += halfwidth; + } + + if (width < 0) { + startX += width; + width *= -1; + } + + this.context.strokeRect(startX, startY, width, individualBarHeight); + this.context.fillRect(startX, startY, width, individualBarHeight); + + this.coords.push([startX, + startY, + width, + individualBarHeight, + this.context.fillStyle, + this.data[i][j], + true]); + } + } + + this.context.closePath(); + } + + this.context.fill(); + this.context.stroke(); + + + + /** + * Now the bars are stroke()ed, turn off the shadow + */ + RGraph.NoShadow(this); + + this.RedrawBars(); + } + + + /** + * This function goes over the bars after they been drawn, so that upwards shadows are underneath the bars + */ + RGraph.HBar.prototype.RedrawBars = function () + { + if (this.Get('chart.noredraw')) { + return; + } + + var coords = this.coords; + + var font = this.Get('chart.text.font'); + var size = this.Get('chart.text.size'); + var color = this.Get('chart.text.color'); + + RGraph.NoShadow(this); + this.context.strokeStyle = this.Get('chart.strokestyle'); + + for (var i=0; i<coords.length; ++i) { + + if (this.Get('chart.shadow')) { + this.context.beginPath(); + this.context.strokeStyle = this.Get('chart.strokestyle'); + this.context.fillStyle = coords[i][4]; + this.context.lineWidth = 1; + this.context.strokeRect(coords[i][0], coords[i][1], coords[i][2], coords[i][3]); + this.context.fillRect(coords[i][0], coords[i][1], coords[i][2], coords[i][3]); + this.context.fill(); + this.context.stroke(); + } + + /** + * Draw labels "above" the bar + */ + if (this.Get('chart.labels.above') && coords[i][6]) { + + this.context.fillStyle = color; + this.context.strokeStyle = 'black'; + RGraph.NoShadow(this); + + var border = (coords[i][0] + coords[i][2] + 7 + this.context.measureText(this.Get('chart.units.pre') + this.coords[i][5] + this.Get('chart.units.post')).width) > RGraph.GetWidth(this) ? true : false; + + RGraph.Text(this.context, + font, + size, + coords[i][0] + coords[i][2] + (border ? -5 : 5), + coords[i][1] + (coords[i][3] / 2), + RGraph.number_format(this, (this.coords[i][5]).toFixed(this.Get('chart.labels.above.decimals')), this.Get('chart.units.pre'), this.Get('chart.units.post')), + 'center', + border ? 'right' : 'left', + border, + null, + border ? 'rgba(255,255,255,0.9)' : null); + } + } + } + + + /******************************************************* + * This function can be used to get the appropriate bar information (if any) + * + * @param e Event object + * @return Appriate bar information (if any) + *******************************************************/ + RGraph.HBar.prototype.getBar = function (e) + { + var obj = e.target.__object__; + var canvas = obj.canvas; + var context = obj.context; + var mouseCoords = RGraph.getMouseXY(e); + + /** + * Loop through the bars determining if the mouse is over a bar + */ + for (var i=0,len=obj.coords.length; i<len; i++) { + + var mouseX = mouseCoords[0]; // In relation to the canvas + var mouseY = mouseCoords[1]; // In relation to the canvas + var left = obj.coords[i][0]; + var top = obj.coords[i][1]; + var width = obj.coords[i][2]; + var height = obj.coords[i][3]; + var idx = i; + + if (mouseX >= left && mouseX <= (left + width) && mouseY >= top && mouseY <= (top + height) ) { + return [left, top, width, height, idx]; + } + } + } diff --git a/schall/static/RGraph/libraries/RGraph.hprogress.js b/schall/static/RGraph/libraries/RGraph.hprogress.js new file mode 100644 index 0000000..4e8fd59 --- /dev/null +++ b/schall/static/RGraph/libraries/RGraph.hprogress.js @@ -0,0 +1,589 @@ + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + + if (typeof(RGraph) == 'undefined') RGraph = {}; + + /** + * The progress bar constructor + * + * @param int id The ID of the canvas tag + * @param int value The indicated value of the meter. + * @param int max The end value (the upper most) of the meter + */ + RGraph.HProgress = function (id, value, max) + { + this.id = id; + this.max = max; + this.value = value; + this.canvas = document.getElementById(id); + this.context = this.canvas.getContext('2d'); + this.canvas.__object__ = this; + this.type = 'hprogress'; + this.coords = []; + this.isRGraph = true; + this.currentValue = null; + + + /** + * Compatibility with older browsers + */ + RGraph.OldBrowserCompat(this.context); + + this.properties = { + 'chart.min': 0, + 'chart.colors': ['#0c0'], + 'chart.strokestyle': '#999', + 'chart.tickmarks': true, + 'chart.tickmarks.color': 'black', + 'chart.tickmarks.inner': false, + 'chart.gutter.left': 25, + 'chart.gutter.right': 25, + 'chart.gutter.top': 25, + 'chart.gutter.bottom': 25, + 'chart.numticks': 10, + 'chart.numticks.inner': 50, + 'chart.background.color': '#eee', + 'chart.shadow': false, + 'chart.shadow.color': 'rgba(0,0,0,0.5)', + 'chart.shadow.blur': 3, + 'chart.shadow.offsetx': 3, + 'chart.shadow.offsety': 3, + 'chart.title': '', + 'chart.title.background': null, + 'chart.title.hpos': null, + 'chart.title.vpos': null, + 'chart.title.bold': true, + 'chart.title.font': null, + 'chart.text.size': 10, + 'chart.text.color': 'black', + 'chart.text.font': 'Verdana', + 'chart.contextmenu': null, + 'chart.units.pre': '', + 'chart.units.post': '', + 'chart.tooltips': [], + 'chart.tooltips.effect': 'fade', + 'chart.tooltips.css.class': 'RGraph_tooltip', + 'chart.tooltips.highlight': true, + 'chart.highlight.stroke': 'black', + 'chart.highlight.fill': 'rgba(255,255,255,0.5)', + 'chart.annotatable': false, + 'chart.annotate.color': 'black', + 'chart.zoom.mode': 'canvas', + 'chart.zoom.factor': 1.5, + 'chart.zoom.fade.in': true, + 'chart.zoom.fade.out': true, + 'chart.zoom.hdir': 'right', + 'chart.zoom.vdir': 'down', + 'chart.zoom.frames': 25, + 'chart.zoom.delay': 16.666, + 'chart.zoom.shadow': true, + 'chart.zoom.background': true, + 'chart.zoom.thumbnail.width': 100, + 'chart.zoom.thumbnail.height': 100, + 'chart.arrows': false, + 'chart.margin': 0, + 'chart.resizable': false, + 'chart.resize.handle.adjust': [0,0], + 'chart.resize.handle.background': null, + 'chart.label.inner': false, + 'chart.adjustable': false, + 'chart.scale.decimals': 0, + 'chart.key': [], + 'chart.key.background': 'white', + 'chart.key.position': 'gutter', + 'chart.key.halign': 'right', + 'chart.key.shadow': false, + 'chart.key.shadow.color': '#666', + 'chart.key.shadow.blur': 3, + 'chart.key.shadow.offsetx': 2, + 'chart.key.shadow.offsety': 2, + 'chart.key.position.gutter.boxed': false, + 'chart.key.position.x': null, + 'chart.key.position.y': null, + 'chart.key.color.shape': 'square', + 'chart.key.rounded': true, + 'chart.key.linewidth': 1, + 'chart.key.color.shape': 'square', + 'chart.labels.position': 'bottom' + } + + // Check for support + if (!this.canvas) { + alert('[PROGRESS] No canvas support'); + return; + } + + + /** + * Set the .getShape commonly named method + */ + this.getShape = this.getBar; + } + + + /** + * A generic setter + * + * @param string name The name of the property to set + * @param string value The value of the poperty + */ + RGraph.HProgress.prototype.Set = function (name, value) + { + this.properties[name.toLowerCase()] = value; + } + + + /** + * A generic getter + * + * @param string name The name of the property to get + */ + RGraph.HProgress.prototype.Get = function (name) + { + return this.properties[name.toLowerCase()]; + } + + + /** + * Draws the progress bar + */ + RGraph.HProgress.prototype.Draw = function () + { + /** + * Fire the onbeforedraw event + */ + RGraph.FireCustomEvent(this, 'onbeforedraw'); + + /** + * Clear all of this canvases event handlers (the ones installed by RGraph) + */ + RGraph.ClearEventListeners(this.id); + + /** + * Set the current value + */ + this.currentValue = this.value; + + /** + * This is new in May 2011 and facilitates individual gutter settings, + * eg chart.gutter.left + */ + this.gutterLeft = this.Get('chart.gutter.left'); + this.gutterRight = this.Get('chart.gutter.right'); + this.gutterTop = this.Get('chart.gutter.top'); + this.gutterBottom = this.Get('chart.gutter.bottom'); + + // Figure out the width and height + this.width = this.canvas.width - this.gutterLeft - this.gutterRight; + this.height = this.canvas.height - this.gutterTop - this.gutterBottom; + this.coords = []; + + this.Drawbar(); + this.DrawTickMarks(); + this.DrawLabels(); + + this.context.stroke(); + this.context.fill(); + + /** + * Setup the context menu if required + */ + if (this.Get('chart.contextmenu')) { + RGraph.ShowContext(this); + } + + /** + * Alternatively, show the tooltip if requested + */ + if (typeof(this.Get('chart.tooltips')) == 'function' || this.Get('chart.tooltips').length) { + + // Need to register this object for redrawing + RGraph.Register(this); + + /** + * Install the window onclick handler + */ + var window_onclick = function () {RGraph.Redraw();} + window.addEventListener('click', window_onclick, false); + RGraph.AddEventListener('window_' + this.id, 'click', window_onclick); + + + /** + * Install the onclick event handler for the tooltips + */ + var canvas_onclick_func = function (e) + { + e = RGraph.FixEventObject(e); + + var canvas = document.getElementById(this.id); + var obj = canvas.__object__; + var bar = obj.getBar(e); + + /** + * Redraw the graph first, in effect resetting the graph to as it was when it was first drawn + * This "deselects" any already selected bar + */ + RGraph.Redraw(); + + /** + * Was the mouse over the bar + */ + if (bar) { + + var text = RGraph.parseTooltipText(obj.Get('chart.tooltips'), bar[5]); + + /** + * Show a tooltip if it's defined + */ + if (text) { + + obj.context.beginPath(); + obj.context.strokeStyle = obj.Get('chart.highlight.stroke'); + obj.context.fillStyle = obj.Get('chart.highlight.fill'); + + obj.context.strokeRect(bar[1], bar[2], bar[3], bar[4]); + obj.context.fillRect(bar[1], bar[2], bar[3], bar[4]); + + obj.context.stroke(); + obj.context.fill(); + + RGraph.Tooltip(canvas, text, e.pageX, e.pageY, bar[5]); + } + } + + /** + * Stop the event bubbling + */ + e.stopPropagation(); + } + this.canvas.addEventListener('click', canvas_onclick_func, false); + RGraph.AddEventListener(this.id, 'click', canvas_onclick_func); + + /** + * If the cursor is over a hotspot, change the cursor to a hand + */ + var canvas_onmousemove_func = function (e) + { + e = RGraph.FixEventObject(e); + + var canvas = document.getElementById(this.id); + var obj = canvas.__object__; + var bar = obj.getBar(e); + + // Is there a focused bar + if (bar){ + var text = RGraph.parseTooltipText(obj.Get('chart.tooltips'), bar[5]); + + if (text) { + canvas.style.cursor = 'pointer'; + return; + } + } + + canvas.style.cursor = 'default'; + } + this.canvas.addEventListener('mousemove', canvas_onmousemove_func, false); + RGraph.AddEventListener(this.id, 'mousemove', canvas_onmousemove_func); + } + + /** + * If the canvas is annotatable, do install the event handlers + */ + if (this.Get('chart.annotatable')) { + RGraph.Annotate(this); + } + + + // Draw the key if necessary + if (this.Get('chart.key').length) { + RGraph.DrawKey(this, this.Get('chart.key'), this.Get('chart.colors')); + } + + /** + * This bit shows the mini zoom window if requested + */ + if (this.Get('chart.zoom.mode') == 'thumbnail' || this.Get('chart.zoom.mode') == 'area') { + RGraph.ShowZoomWindow(this); + } + + + /** + * This function enables resizing + */ + if (this.Get('chart.resizable')) { + RGraph.AllowResizing(this); + } + + /** + * Instead of using RGraph.common.adjusting.js, handle them here + */ + if (this.Get('chart.adjustable')) { + RGraph.AllowAdjusting(this); + } + + /** + * Fire the RGraph ondraw event + */ + RGraph.FireCustomEvent(this, 'ondraw'); + } + + /** + * Draws the bar + */ + RGraph.HProgress.prototype.Drawbar = function () + { + // Set a shadow if requested + if (this.Get('chart.shadow')) { + RGraph.SetShadow(this, this.Get('chart.shadow.color'), this.Get('chart.shadow.offsetx'), this.Get('chart.shadow.offsety'), this.Get('chart.shadow.blur')); + } + + // Draw the shadow for MSIE + if (RGraph.isIE8() && this.Get('chart.shadow')) { + this.context.fillStyle = this.Get('chart.shadow.color'); + this.context.fillRect(this.gutterLeft + this.Get('chart.shadow.offsetx'), this.gutterTop + this.Get('chart.shadow.offsety'), this.width, this.height); + } + + // Draw the outline + this.context.fillStyle = this.Get('chart.background.color'); + this.context.strokeStyle = this.Get('chart.strokestyle'); + this.context.strokeRect(this.gutterLeft, this.gutterTop, this.width, this.height); + this.context.fillRect(this.gutterLeft, this.gutterTop, this.width, this.height); + + // Turn off any shadow + RGraph.NoShadow(this); + + this.context.fillStyle = this.Get('chart.color'); + this.context.strokeStyle = this.Get('chart.strokestyle'); + + var margin = this.Get('chart.margin'); + + // Draw the actual bar itself + var barWidth = Math.min(this.width, ((RGraph.array_sum(this.value) - this.Get('chart.min')) / (this.max - this.Get('chart.min')) ) * this.width); + + if (this.Get('chart.tickmarks.inner')) { + + var spacing = (RGraph.GetWidth(this) - this.gutterLeft - this.gutterRight) / this.Get('chart.numticks.inner'); + + this.context.lineWidth = 1; + this.context.strokeStyle = this.Get('chart.strokestyle'); + + this.context.beginPath(); + for (var x = this.gutterLeft; x<RGraph.GetWidth(this) - this.gutterRight; x+=spacing) { + this.context.moveTo(x, this.gutterTop); + this.context.lineTo(x, this.gutterTop + 2); + + this.context.moveTo(x, RGraph.GetHeight(this) - this.gutterBottom); + this.context.lineTo(x, RGraph.GetHeight(this) - this.gutterBottom - 2); + } + this.context.stroke(); + } + + /** + * This bit draws the actual progress bar + */ + if (typeof(this.value) == 'number') { + this.context.beginPath(); + this.context.strokeStyle = this.Get('chart.strokestyle'); + this.context.fillStyle = this.Get('chart.colors')[0]; + this.context.strokeRect(this.gutterLeft, this.gutterTop + margin, barWidth, this.height - margin - margin); + this.context.fillRect(this.gutterLeft, this.gutterTop + margin, barWidth, this.height - margin - margin); + + // Store the coords + this.coords.push([this.gutterLeft, + this.gutterTop + margin, + barWidth, + this.height - margin - margin]); + + } else if (typeof(this.value) == 'object') { + + this.context.beginPath(); + this.context.strokeStyle = this.Get('chart.strokestyle'); + + var startPoint = this.gutterLeft; + + for (var i=0; i<this.value.length; ++i) { + + var segmentLength = (this.value[i] / RGraph.array_sum(this.value)) * barWidth; + this.context.fillStyle = this.Get('chart.colors')[i]; + + this.context.strokeRect(startPoint, this.gutterTop + margin, segmentLength, this.height - margin - margin); + this.context.fillRect(startPoint, this.gutterTop + margin, segmentLength, this.height - margin - margin); + + + // Store the coords + this.coords.push([startPoint, + this.gutterTop + margin, + segmentLength, + this.height - margin - margin]); + + startPoint += segmentLength; + } + } + + /** + * Draw the arrows indicating the level if requested + */ + if (this.Get('chart.arrows')) { + var x = this.gutterLeft + barWidth; + var y = this.gutterTop; + + this.context.lineWidth = 1; + this.context.fillStyle = 'black'; + this.context.strokeStyle = 'black'; + + this.context.beginPath(); + this.context.moveTo(x, y - 3); + this.context.lineTo(x + 2, y - 7); + this.context.lineTo(x - 2, y - 7); + this.context.closePath(); + + this.context.stroke(); + this.context.fill(); + + this.context.beginPath(); + this.context.moveTo(x, y + this.height + 4); + this.context.lineTo(x + 2, y + this.height + 9); + this.context.lineTo(x - 2, y + this.height + 9); + this.context.closePath(); + + this.context.stroke(); + this.context.fill() + + + /** + * Draw the "in-bar" label + */ + if (this.Get('chart.label.inner')) { + this.context.beginPath(); + this.context.fillStyle = 'black'; + RGraph.Text(this.context, this.Get('chart.text.font'), this.Get('chart.text.size') + 2, this.gutterLeft + barWidth + 5, RGraph.GetHeight(this) / 2, String(this.Get('chart.units.pre') + this.value + this.Get('chart.units.post')), 'center', 'left'); + this.context.fill(); + } + } + + } + + /** + * The function that draws the tick marks. Apt name... + */ + RGraph.HProgress.prototype.DrawTickMarks = function () + { + var context = this.context; + + context.strokeStyle = this.Get('chart.tickmarks.color'); + + if (this.Get('chart.tickmarks')) { + + this.context.beginPath(); + + // This is used by the label function below + this.tickInterval = this.width / this.Get('chart.numticks'); + + var start = this.Get('chart.tickmarks.zerostart') ? 0 : this.tickInterval; + + if (this.Get('chart.labels.position') == 'top') { + for (var i=this.gutterLeft + start; i<=(this.width + this.gutterLeft + 0.1); i+=this.tickInterval) { + context.moveTo(i, this.gutterTop); + context.lineTo(i, this.gutterTop - 4); + } + + } else { + + for (var i=this.gutterLeft + start; i<=(this.width + this.gutterLeft + 0.1); i+=this.tickInterval) { + context.moveTo(i, this.gutterTop + this.height); + context.lineTo(i, this.gutterTop + this.height + 4); + } + } + + this.context.stroke(); + } + } + + + /** + * The function that draws the labels + */ + RGraph.HProgress.prototype.DrawLabels = function () + { + var context = this.context; + this.context.fillStyle = this.Get('chart.text.color'); + + var xPoints = []; + var yPoints = []; + + for (i=0; i<this.Get('chart.numticks'); i++) { + + var font = this.Get('chart.text.font'); + var size = this.Get('chart.text.size'); + + if (this.Get('chart.labels.position') == 'top') { + var x = this.width * (i/this.Get('chart.numticks')) + this.gutterLeft + (this.width / this.Get('chart.numticks')); + var y = this.gutterTop - 6; + var valign = 'bottom'; + } else { + var x = this.width * (i/this.Get('chart.numticks')) + this.gutterLeft + (this.width / this.Get('chart.numticks')); + var y = this.height + this.gutterTop + 4; + var valign = 'top'; + } + + RGraph.Text(this.context,font,size,x,y,this.Get('chart.units.pre') + String((((this.max - this.Get('chart.min')) / this.Get('chart.numticks') ) * (i + 1) + this.Get('chart.min')).toFixed(this.Get('chart.scale.decimals'))) + this.Get('chart.units.post'),valign,'center'); + } + + if (this.Get('chart.tickmarks.zerostart')) { + if (this.Get('chart.labels.position') == 'top') { + RGraph.Text(this.context,font,size,this.gutterLeft,this.gutterTop - 6,this.Get('chart.units.pre') + Number(this.Get('chart.min')).toFixed(this.Get('chart.scale.decimals')) + this.Get('chart.units.post'),'bottom','center'); + } else { + RGraph.Text(this.context,font,size,this.gutterLeft,this.canvas.height - this.gutterBottom + 5,this.Get('chart.units.pre') + Number(this.Get('chart.min')).toFixed(this.Get('chart.scale.decimals')) + this.Get('chart.units.post'),'top','center'); + } + } + + + + // Draw the title text + if (this.Get('chart.title')) { + RGraph.DrawTitle(this.canvas, + this.Get('chart.title'), + this.gutterTop + this.Get('chart.text.size'), + 0, + this.Get('chart.title.size') ? this.Get('chart.title.size') : this.Get('chart.text.size') + 2); + } + } + + + /** + * Returns the focused bar + * + * @param event e The event object + */ + RGraph.HProgress.prototype.getBar = function (e) + { + var obj = e.target.__object__; + var mouseCoords = RGraph.getMouseXY(e) + + for (var i=0; i<obj.coords.length; i++) { + + var mouseCoords = RGraph.getMouseXY(e); + var mouseX = mouseCoords[0]; + var mouseY = mouseCoords[1]; + var left = obj.coords[i][0]; + var top = obj.coords[i][1]; + var width = obj.coords[i][2]; + var height = obj.coords[i][3]; + var idx = i; + + if (mouseX >= left && mouseX <= (left + width) && mouseY >= top && mouseY <= (top + height) ) { + return [obj, left, top, width, height, idx]; + } + } + }
\ No newline at end of file diff --git a/schall/static/RGraph/libraries/RGraph.led.js b/schall/static/RGraph/libraries/RGraph.led.js new file mode 100644 index 0000000..8e7d2b7 --- /dev/null +++ b/schall/static/RGraph/libraries/RGraph.led.js @@ -0,0 +1,232 @@ + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + + if (typeof(RGraph) == 'undefined') RGraph = {}; + + /** + * The LED lights constructor + * + * @param object canvas The canvas object + * @param array data The chart data + */ + RGraph.LED = function (id, text) + { + // Get the canvas and context objects + this.id = id; + this.canvas = document.getElementById(id); + this.context = this.canvas.getContext ? this.canvas.getContext("2d") : null; + this.canvas.__object__ = this; + this.type = 'led'; + this.isRGraph = true; + + + /** + * Compatibility with older browsers + */ + RGraph.OldBrowserCompat(this.context); + + + /** + * Set the string that is to be displayed + */ + this.text = text; + + /** + * The letters and numbers + */ + this.lights = { + 'a': [[0,1,1,0],[1,0,0,1],[1,0,0,1],[1,1,1,1],[1,0,0,1],[1,0,0,1],[1,0,0,1]], + 'b': [[1,1,1,0],[1,0,0,1],[1,0,0,1],[1,1,1,0],[1,0,0,1],[1,0,0,1],[1,1,1,0]], + 'c': [[0,1,1,0],[1,0,0,1],[1,0,0,0],[1,0,0,0],[1,0,0,0],[1,0,0,1],[0,1,1,0]], + 'd': [[1,1,1,0],[1,0,0,1],[1,0,0,1],[1,0,0,1],[1,0,0,1],[1,0,0,1],[1,1,1,0]], + 'e': [[1,1,1,1],[1,0,0,0],[1,0,0,0],[1,1,1,0],[1,0,0,0],[1,0,0,0],[1,1,1,1]], + 'f': [[1,1,1,1],[1,0,0,0],[1,0,0,0],[1,1,1,0],[1,0,0,0],[1,0,0,0],[1,0,0,0]], + 'g': [[0,1,1,0],[1,0,0,1],[1,0,0,0],[1,0,1,1],[1,0,0,1],[1,0,0,1],[0,1,1,0]], + 'h': [[1,0,0,1],[1,0,0,1],[1,0,0,1],[1,1,1,1],[1,0,0,1],[1,0,0,1],[1,0,0,1]], + 'i': [[0,1,1,1],[0,0,1,0],[0,0,1,0],[0,0,1,0],[0,0,1,0],[0,0,1,0],[0,1,1,1]], + 'j': [[0,1,1,1],[0,0,1,0],[0,0,1,0],[0,0,1,0],[0,0,1,0],[0,0,1,0],[0,1,0,0]], + 'k': [[1,0,0,1],[1,0,0,1],[1,0,1,0],[1,1,0,0],[1,0,1,0],[1,0,0,1],[1,0,0,1]], + 'l': [[1,0,0,0],[1,0,0,0],[1,0,0,0],[1,0,0,0],[1,0,0,0],[1,0,0,0],[1,1,1,1]], + 'm': [[1,0,0,1],[1,1,1,1],[1,0,0,1],[1,0,0,1],[1,0,0,1],[1,0,0,1],[1,0,0,1]], + 'n': [[1,0,0,1],[1,1,0,1],[1,0,1,1],[1,0,0,1],[1,0,0,1],[1,0,0,1],[1,0,0,1]], + 'o': [[0,1,1,0],[1,0,0,1],[1,0,0,1],[1,0,0,1],[1,0,0,1],[1,0,0,1],[0,1,1,0]], + 'p': [[1,1,1,0],[1,0,0,1],[1,0,0,1],[1,1,1,0],[1,0,0,0],[1,0,0,0],[1,0,0,0]], + 'q': [[0,1,1,0],[1,0,0,1],[1,0,0,1],[1,0,0,1],[1,0,0,1],[1,0,1,1],[0,1,1,1]], + 'r': [[1,1,1,0],[1,0,0,1],[1,0,0,1],[1,1,1,0],[1,0,1,0],[1,0,0,1],[1,0,0,1]], + 's': [[0,1,1,0],[1,0,0,1],[1,0,0,0],[0,1,1,0],[0,0,0,1],[1,0,0,1],[0,1,1,0]], + 't': [[1,1,1,0],[0,1,0,0],[0,1,0,0],[0,1,0,0],[0,1,0,0],[0,1,0,0],[0,1,0,0]], + 'u': [[1,0,0,1],[1,0,0,1],[1,0,0,1],[1,0,0,1],[1,0,0,1],[1,0,0,1],[0,1,1,0]], + 'v': [[1,0,1],[1,0,1],[1,0,1],[1,0,1],[1,0,1],[0,1,0],[0,1,0]], + 'w': [[1,0,0,1],[1,0,0,1],[1,0,0,1],[1,0,0,1],[1,0,0,1],[1,1,1,1],[0,1,1,0]], + 'x': [[0,1,0,1],[0,1,0,1],[0,1,0,1],[0,0,1,0],[0,1,0,1],[0,1,0,1],[0,1,0,1]], + 'y': [[0,1,0,1],[0,1,0,1],[0,0,1,0],[0,0,1,0],[0,0,1,0],[0,0,1,0],[0,0,1,0]], + 'z': [[1,1,1,1],[0,0,0,1],[0,0,1,0],[0,0,1,0],[0,1,0,0],[1,0,0,0],[1,1,1,1]], + ' ': [[],[],[],[],[], [], []], + '0': [[0,1,1,0],[1,0,0,1],[1,0,0,1],[1,0,0,1],[1,0,0,1],[1,0,0,1],[0,1,1,0]], + '1': [[0,0,1,0],[0,1,1,0],[0,0,1,0],[0,0,1,0],[0,0,1,0],[0,0,1,0],[0,1,1,1]], + '2': [[0,1,1,0],[1,0,0,1],[0,0,0,1],[0,0,1,0],[0,1,,0],[1,0,0,0],[1,1,1,1]], + '3': [[0,1,1,0],[1,0,0,1],[0,0,0,1],[0,1,1,0],[0,0,0,1],[1,0,0,1],[0,1,1,0]], + '4': [[1,0,0,0],[1,0,0,0],[1,0,1,0],[1,0,1,0],[1,1,1,1],[0,0,1,0],[0,0,1,0]], + '5': [[1,1,1,1],[1,0,0,0],[1,0,0,0],[1,1,1,0],[0,0,0,1],[1,0,0,1],[0,1,1,0]], + '6': [[0,1,1,0],[1,0,0,1],[1,0,0,0],[1,1,1,0],[1,0,0,1],[1,0,0,1],[0,1,1,0]], + '7': [[1,1,1,1],[0,0,0,1],[0,0,0,1],[0,0,1,0],[0,1,0,0],[0,1,0,0],[0,1,0,0]], + '8': [[0,1,1,0],[1,0,0,1],[1,0,0,1],[0,1,1,0],[1,0,0,1],[1,0,0,1],[0,1,1,0]], + '9': [[0,1,1,1],[1,0,0,1],[1,0,0,1],[0,1,1,1],[0,0,0,1],[0,0,0,1],[0,0,0,1]] + } + + // Various config type stuff + this.properties = { + 'chart.background': 'white', + 'chart.dark': '#eee', + 'chart.light': '#f66', + 'chart.zoom.factor': 1.5, + 'chart.zoom.fade.in': true, + 'chart.zoom.fade.out': true, + 'chart.zoom.hdir': 'right', + 'chart.zoom.vdir': 'down', + 'chart.zoom.frames': 25, + 'chart.zoom.delay': 16.666, + 'chart.zoom.shadow': true, + 'chart.zoom.background': true, + 'chart.zoom.action': 'zoom', + 'chart.resizable': false, + 'chart.resize.handle.adjust': [0,0], + 'chart.resize.handle.background': null, + 'chart.width': null, + 'chart.height': null + } + + // Check for support + if (!this.canvas) { + alert('[LED] No canvas support'); + return; + } + } + + + /** + * A setter + * + * @param name string The name of the property to set + * @param value mixed The value of the property + */ + RGraph.LED.prototype.Set = function (name, value) + { + this.properties[name.toLowerCase()] = value; + } + + + /** + * A getter + * + * @param name string The name of the property to get + */ + RGraph.LED.prototype.Get = function (name) + { + return this.properties[name.toLowerCase()]; + } + + + /** + * This draws the LEDs + */ + RGraph.LED.prototype.Draw = function () + { + /** + * Fire the onbeforedraw event + */ + RGraph.FireCustomEvent(this, 'onbeforedraw'); + + + // First clear the canvas, using the background colour + RGraph.Clear(this.canvas, this.Get('chart.background')); + + for (var l=0; l<this.text.length; l++) { + this.DrawLetter(this.text.charAt(l), l); + } + + /** + * Set the title attribute on the canvas + */ + this.canvas.title = RGraph.rtrim(this.text); + + /** + * Setup the context menu if required + */ + if (this.Get('chart.contextmenu')) { + RGraph.ShowContext(this); + } + + /** + * This bit shows the mini zoom window if requested + */ + if (this.Get('chart.zoom.mode') == 'thumbnail' || this.Get('chart.zoom.mode') == 'area') { + RGraph.ShowZoomWindow(this); + } + + + /** + * This function enables resizing + */ + if (this.Get('chart.resizable')) { + RGraph.AllowResizing(this); + } + + /** + * Fire the RGraph ondraw event + */ + RGraph.FireCustomEvent(this, 'ondraw'); + } + + + /** + * Draws a single letter + * + * @param string lights The lights to draw to draw + * @param int index The position of the letter + */ + RGraph.LED.prototype.DrawLetter = function (letter, index) + { + var light = this.Get('chart.light'); + var dark = this.Get('chart.dark'); + var lights = (this.lights[letter] ? this.lights[letter] : [[0,0,0,0,0],[0,0,0,0,0],[0,0,0,0,0],[0,0,0,0,0],[0,0,0,0,0],[0,0,0,0,0],[0,0,0,0,0]]); + var lwidth = RGraph.GetWidth(this) / this.text.length; + var diameter = lwidth / 5; + var radius = diameter / 2; + + var lheight = diameter * 7; + if (lheight > RGraph.GetHeight(this)) { + lheight = RGraph.GetHeight(this); + diameter = (lheight / 7); + radius = (diameter / 2); + lwidth = diameter * 5; + } + + for (var i=0; i<7; i++) { + for (var j=0; j<5; j++) { + + var x = (j * diameter) + (index * lwidth) + radius; + var y = ((i * diameter)) + radius; + + // Draw a circle + this.context.fillStyle = (lights[i][j] ? light : dark); + this.context.strokeStyle = (lights[i][j] ? '#ccc' : 'rgba(0,0,0,0)'); + this.context.beginPath(); + this.context.arc(x, y, radius, 0, 6.28, 0); + + this.context.stroke(); + this.context.fill(); + } + } + }
\ No newline at end of file diff --git a/schall/static/RGraph/libraries/RGraph.line.js b/schall/static/RGraph/libraries/RGraph.line.js new file mode 100644 index 0000000..e641f87 --- /dev/null +++ b/schall/static/RGraph/libraries/RGraph.line.js @@ -0,0 +1,2217 @@ + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + + if (typeof(RGraph) == 'undefined') RGraph = {}; + + /** + * The line chart constructor + * + * @param object canvas The cxanvas object + * @param array data The chart data + * @param array ... Other lines to plot + */ + RGraph.Line = function (id) + { + // Get the canvas and context objects + this.id = id; + this.canvas = document.getElementById(id); + this.context = this.canvas.getContext ? this.canvas.getContext("2d") : null; + this.canvas.__object__ = this; + this.type = 'line'; + this.max = 0; + this.coords = []; + this.coords2 = []; + this.coordsKey = []; + this.hasnegativevalues = false; + this.isRGraph = true; + + + + /** + * Compatibility with older browsers + */ + RGraph.OldBrowserCompat(this.context); + + + // Various config type stuff + this.properties = { + 'chart.background.barcolor1': 'rgba(0,0,0,0)', + 'chart.background.barcolor2': 'rgba(0,0,0,0)', + 'chart.background.grid': 1, + 'chart.background.grid.width': 1, + 'chart.background.grid.hsize': 25, + 'chart.background.grid.vsize': 25, + 'chart.background.grid.color': '#ddd', + 'chart.background.grid.vlines': true, + 'chart.background.grid.hlines': true, + 'chart.background.grid.border': true, + 'chart.background.grid.autofit': true, + 'chart.background.grid.autofit.align': false, + 'chart.background.grid.autofit.numhlines': 5, + 'chart.background.grid.autofit.numvlines': 20, + 'chart.background.hbars': null, + 'chart.background.image': null, + 'chart.labels': null, + 'chart.labels.ingraph': null, + 'chart.labels.above': false, + 'chart.labels.above.size': 8, + 'chart.xtickgap': 20, + 'chart.smallxticks': 3, + 'chart.largexticks': 5, + 'chart.ytickgap': 20, + 'chart.smallyticks': 3, + 'chart.largeyticks': 5, + 'chart.numyticks': 10, + 'chart.linewidth': 1.01, + 'chart.colors': ['red', '#0f0', '#00f', '#f0f', '#ff0', '#0ff'], + 'chart.hmargin': 0, + 'chart.tickmarks.dot.color': 'white', + 'chart.tickmarks': null, + 'chart.tickmarks.linewidth': null, + 'chart.ticksize': 3, + 'chart.gutter.left': 25, + 'chart.gutter.right': 25, + 'chart.gutter.top': 25, + 'chart.gutter.bottom': 25, + 'chart.tickdirection': -1, + 'chart.yaxispoints': 5, + 'chart.fillstyle': null, + 'chart.xaxispos': 'bottom', + 'chart.yaxispos': 'left', + 'chart.xticks': null, + 'chart.text.size': 10, + 'chart.text.angle': 0, + 'chart.text.color': 'black', + 'chart.text.font': 'Verdana', + 'chart.ymin': null, + 'chart.ymax': null, + 'chart.title': '', + 'chart.title.background': null, + 'chart.title.hpos': null, + 'chart.title.vpos': 0.5, + 'chart.title.bold': true, + 'chart.title.font': null, + 'chart.title.xaxis': '', + 'chart.title.xaxis.bold': true, + 'chart.title.xaxis.size': null, + 'chart.title.xaxis.font': null, + 'chart.title.yaxis': '', + 'chart.title.yaxis.bold': true, + 'chart.title.yaxis.size': null, + 'chart.title.yaxis.font': null, + 'chart.title.xaxis.pos': null, + 'chart.title.yaxis.pos': null, + 'chart.shadow': false, + 'chart.shadow.offsetx': 2, + 'chart.shadow.offsety': 2, + 'chart.shadow.blur': 3, + 'chart.shadow.color': 'rgba(0,0,0,0.5)', + 'chart.tooltips': null, + 'chart.tooltips.hotspot.xonly': false, + 'chart.tooltips.effect': 'fade', + 'chart.tooltips.css.class': 'RGraph_tooltip', + 'chart.tooltips.highlight': true, + 'chart.highlight.stroke': '#999', + 'chart.highlight.fill': 'white', + 'chart.stepped': false, + 'chart.key': [], + 'chart.key.background': 'white', + 'chart.key.position': 'graph', + 'chart.key.halign': null, + 'chart.key.shadow': false, + 'chart.key.shadow.color': '#666', + 'chart.key.shadow.blur': 3, + 'chart.key.shadow.offsetx': 2, + 'chart.key.shadow.offsety': 2, + 'chart.key.position.gutter.boxed': true, + 'chart.key.position.x': null, + 'chart.key.position.y': null, + 'chart.key.color.shape': 'square', + 'chart.key.rounded': true, + 'chart.key.linewidth': 1, + 'chart.key.interactive': false, + 'chart.contextmenu': null, + 'chart.ylabels': true, + 'chart.ylabels.count': 5, + 'chart.ylabels.inside': false, + 'chart.ylabels.invert': false, + 'chart.xlabels.inside': false, + 'chart.xlabels.inside.color': 'rgba(255,255,255,0.5)', + 'chart.noaxes': false, + 'chart.noyaxis': false, + 'chart.noxaxis': false, + 'chart.noendxtick': false, + 'chart.units.post': '', + 'chart.units.pre': '', + 'chart.scale.decimals': null, + 'chart.scale.point': '.', + 'chart.scale.thousand': ',', + 'chart.crosshairs': false, + 'chart.crosshairs.color': '#333', + 'chart.crosshairs.hline': true, + 'chart.crosshairs.vline': true, + 'chart.annotatable': false, + 'chart.annotate.color': 'black', + 'chart.axesontop': false, + 'chart.filled': false, + 'chart.filled.range': false, + 'chart.filled.accumulative': true, + 'chart.variant': null, + 'chart.axis.color': 'black', + 'chart.zoom.factor': 1.5, + 'chart.zoom.fade.in': true, + 'chart.zoom.fade.out': true, + 'chart.zoom.hdir': 'right', + 'chart.zoom.vdir': 'down', + 'chart.zoom.frames': 25, + 'chart.zoom.delay': 16.666, + 'chart.zoom.shadow': true, + 'chart.zoom.mode': 'canvas', + 'chart.zoom.thumbnail.width': 75, + 'chart.zoom.thumbnail.height': 75, + 'chart.zoom.background': true, + 'chart.zoom.action': 'zoom', + 'chart.backdrop': false, + 'chart.backdrop.size': 30, + 'chart.backdrop.alpha': 0.2, + 'chart.resizable': false, + 'chart.resize.handle.adjust': [0,0], + 'chart.resize.handle.background': null, + 'chart.adjustable': false, + 'chart.noredraw': false, + 'chart.outofbounds': false, + 'chart.chromefix': true, + 'chart.animation.factor': 1, + 'chart.animation.unfold.x': false, + 'chart.animation.unfold.y': true, + 'chart.animation.unfold.initial': 2, + 'chart.curvy': false, + 'chart.curvy.factor': 0.25, + 'chart.line.visible': true + } + + /** + * Change null arguments to empty arrays + */ + for (var i=1; i<arguments.length; ++i) { + if (typeof(arguments[i]) == 'null' || !arguments[i]) { + arguments[i] = []; + } + } + + + /** + * Store the original data. Thiss also allows for giving arguments as one big array. + */ + this.original_data = []; + + for (var i=1; i<arguments.length; ++i) { + if (arguments[1] && typeof(arguments[1]) == 'object' && arguments[1][0] && typeof(arguments[1][0]) == 'object' && arguments[1][0].length) { + + var tmp = []; + + for (var i=0; i<arguments[1].length; ++i) { + tmp[i] = RGraph.array_clone(arguments[1][i]); + } + + for (var j=0; j<tmp.length; ++j) { + this.original_data[j] = RGraph.array_clone(tmp[j]); + } + + } else { + this.original_data[i - 1] = RGraph.array_clone(arguments[i]); + } + } + + // Check for support + if (!this.canvas) { + alert('[LINE] Fatal error: no canvas support'); + return; + } + + /** + * Store the data here as one big array + */ + this.data_arr = []; + + for (var i=1; i<arguments.length; ++i) { + for (var j=0; j<arguments[i].length; ++j) { + this.data_arr.push(arguments[i][j]); + } + } + + + /** + * Set the .getShape commonly named method + */ + this.getShape = this.getPoint; + } + + + /** + * An all encompassing accessor + * + * @param string name The name of the property + * @param mixed value The value of the property + */ + RGraph.Line.prototype.Set = function (name, value) + { + // Consolidate the tooltips + if (name == 'chart.tooltips') { + + var tooltips = []; + + for (var i=1; i<arguments.length; i++) { + if (typeof(arguments[i]) == 'object' && arguments[i][0]) { + for (var j=0; j<arguments[i].length; j++) { + tooltips.push(arguments[i][j]); + } + + } else if (typeof(arguments[i]) == 'function') { + tooltips = arguments[i]; + + } else { + tooltips.push(arguments[i]); + } + } + + // Because "value" is used further down at the end of this function, set it to the expanded array os tooltips + value = tooltips; + } + + /** + * Reverse the tickmarks to make them correspond to the right line + */ + if (name == 'chart.tickmarks' && typeof(value) == 'object' && value) { + value = RGraph.array_reverse(value); + } + + /** + * Inverted Y axis should show the bottom end of the scale + */ + if (name == 'chart.ylabels.invert' && value && this.Get('chart.ymin') == null) { + this.Set('chart.ymin', 0); + } + + /** + * If (buggy) Chrome and the linewidth is 1, change it to 1.01 + */ + if (name == 'chart.linewidth' && navigator.userAgent.match(/Chrome/)) { + if (value == 1) { + value = 1.01; + + } else if (RGraph.is_array(value)) { + for (var i=0; i<value.length; ++i) { + if (typeof(value[i]) == 'number' && value[i] == 1) { + value[i] = 1.01; + } + } + } + } + + /** + * Check for xaxispos + */ + if (name == 'chart.xaxispos' ) { + if (value != 'bottom' && value != 'center' && value != 'top') { + alert('[LINE] (' + this.id + ') chart.xaxispos should be top, center or bottom. Tried to set it to: ' + value + ' Changing it to center'); + value = 'center'; + } + } + + /** + * Check chart.curvy.factor - should be 0 - 0.5 + */ + if (name == 'chart.curvy.factor' && (value < 0 || value > 0.5)) { + alert('[LINE] chart.curvy.factor should be between 0 and 0.5 - setting it to 0.25'); + value = 0.25; + } + + this.properties[name] = value; + } + + + /** + * An all encompassing accessor + * + * @param string name The name of the property + */ + RGraph.Line.prototype.Get = function (name) + { + return this.properties[name]; + } + + + /** + * The function you call to draw the line chart + * + * @param bool An optional bool used internally to ditinguish whether the + * line chart is being called by the bar chart + */ + RGraph.Line.prototype.Draw = function () + { + // MUST be the FIRST thing done - Hand over drawing to the bar chart if it's a combo back to the Bar chart + if (this.__bar__ && !arguments[0]) { + this.__bar__.Draw(); + return; + } + + // MUST be the SECOND thing done! + if (typeof(this.Get('chart.background.image')) == 'string' && !this.__background_image__) { + RGraph.DrawBackgroundImage(this); + return; + } + + if (this.__bar__ && this.Get('chart.tooltips.highlight')) { + //this.Set('chart.tooltips.highlight', false); + } + + /** + * Fire the onbeforedraw event + */ + RGraph.FireCustomEvent(this, 'onbeforedraw'); + + /** + * Clear all of this canvases event handlers (the ones installed by RGraph) + */ + RGraph.ClearEventListeners(this.id); + + /** + * This is new in May 2011 and facilitates indiviual gutter settings, + * eg chart.gutter.left + */ + this.gutterLeft = this.Get('chart.gutter.left'); + this.gutterRight = this.Get('chart.gutter.right'); + this.gutterTop = this.Get('chart.gutter.top'); + this.gutterBottom = this.Get('chart.gutter.bottom'); + + + /** + * Check for Chrome 6 and shadow + * + * TODO Remove once it's been fixed (for a while) + * SEARCH TAGS: CHROME FIX SHADOW BUG + */ + if ( this.Get('chart.shadow') + && navigator.userAgent.match(/Chrome/) + && this.Get('chart.linewidth') <= 1 + && this.Get('chart.chromefix') + && this.Get('chart.shadow.blur') > 0) { + alert('[RGRAPH WARNING] Chrome has a shadow bug, meaning you should increase the linewidth to at least 1.01'); + } + + + // Reset the data back to that which was initially supplied + this.data = RGraph.array_clone(this.original_data); + + + // Reset the max value + this.max = 0; + + /** + * Reverse the datasets so that the data and the labels tally + * COMMENTED OUT 15TH AUGUST 2011 + */ + //this.data = RGraph.array_reverse(this.data); + + if (this.Get('chart.filled') && !this.Get('chart.filled.range') && this.data.length > 1 && this.Get('chart.filled.accumulative')) { + + var accumulation = []; + + for (var set=0; set<this.data.length; ++set) { + for (var point=0; point<this.data[set].length; ++point) { + this.data[set][point] = Number(accumulation[point] ? accumulation[point] : 0) + this.data[set][point]; + accumulation[point] = this.data[set][point]; + } + } + } + + /** + * Get the maximum Y scale value + */ + if (this.Get('chart.ymax')) { + + this.max = this.Get('chart.ymax'); + this.min = this.Get('chart.ymin') ? this.Get('chart.ymin') : 0; + + this.scale = [ + ( ((this.max - this.min) * (1/5)) + this.min).toFixed(this.Get('chart.scale.decimals')), + ( ((this.max - this.min) * (2/5)) + this.min).toFixed(this.Get('chart.scale.decimals')), + ( ((this.max - this.min) * (3/5)) + this.min).toFixed(this.Get('chart.scale.decimals')), + ( ((this.max - this.min) * (4/5)) + this.min).toFixed(this.Get('chart.scale.decimals')), + this.max.toFixed(this.Get('chart.scale.decimals')) + ]; + + // Check for negative values + if (!this.Get('chart.outofbounds')) { + for (dataset=0; dataset<this.data.length; ++dataset) { + for (var datapoint=0; datapoint<this.data[dataset].length; datapoint++) { + + // Check for negative values + this.hasnegativevalues = (this.data[dataset][datapoint] < 0) || this.hasnegativevalues; + } + } + } + + } else { + + this.min = this.Get('chart.ymin') ? this.Get('chart.ymin') : 0; + + // Work out the max Y value + for (dataset=0; dataset<this.data.length; ++dataset) { + for (var datapoint=0; datapoint<this.data[dataset].length; datapoint++) { + + this.max = Math.max(this.max, this.data[dataset][datapoint] ? Math.abs(parseFloat(this.data[dataset][datapoint])) : 0); + + // Check for negative values + if (!this.Get('chart.outofbounds')) { + this.hasnegativevalues = (this.data[dataset][datapoint] < 0) || this.hasnegativevalues; + } + } + } + + // 20th April 2009 - moved out of the above loop + this.scale = RGraph.getScale(Math.abs(parseFloat(this.max)), this); + this.max = this.scale[4] ? this.scale[4] : 0; + + if (this.Get('chart.ymin')) { + this.scale[0] = ((this.max - this.Get('chart.ymin')) * (1/5)) + this.Get('chart.ymin'); + this.scale[1] = ((this.max - this.Get('chart.ymin')) * (2/5)) + this.Get('chart.ymin'); + this.scale[2] = ((this.max - this.Get('chart.ymin')) * (3/5)) + this.Get('chart.ymin'); + this.scale[3] = ((this.max - this.Get('chart.ymin')) * (4/5)) + this.Get('chart.ymin'); + this.scale[4] = ((this.max - this.Get('chart.ymin')) * (5/5)) + this.Get('chart.ymin'); + } + + if (typeof(this.Get('chart.scale.decimals')) == 'number') { + this.scale[0] = Number(this.scale[0]).toFixed(this.Get('chart.scale.decimals')); + this.scale[1] = Number(this.scale[1]).toFixed(this.Get('chart.scale.decimals')); + this.scale[2] = Number(this.scale[2]).toFixed(this.Get('chart.scale.decimals')); + this.scale[3] = Number(this.scale[3]).toFixed(this.Get('chart.scale.decimals')); + this.scale[4] = Number(this.scale[4]).toFixed(this.Get('chart.scale.decimals')); + } + } + + /** + * Setup the context menu if required + */ + if (this.Get('chart.contextmenu')) { + RGraph.ShowContext(this); + } + + /** + * Reset the coords array otherwise it will keep growing + */ + this.coords = []; + + /** + * Work out a few things. They need to be here because they depend on things you can change before you + * call Draw() but after you instantiate the object + */ + this.grapharea = this.canvas.height - this.gutterTop - this.gutterBottom; + this.halfgrapharea = this.grapharea / 2; + this.halfTextHeight = this.Get('chart.text.size') / 2; + + // Check the combination of the X axis position and if there any negative values + // + // 19th Dec 2010 - removed for Opera since it can be reported incorrectly whn there + // are multiple graphs on the page + if (this.Get('chart.xaxispos') == 'bottom' && this.hasnegativevalues && navigator.userAgent.indexOf('Opera') == -1) { + alert('[LINE] You have negative values and the X axis is at the bottom. This is not good...'); + } + + if (this.Get('chart.variant') == '3d') { + RGraph.Draw3DAxes(this); + } + + // Progressively Draw the chart + RGraph.background.Draw(this); + + /** + * Draw any horizontal bars that have been defined + */ + if (this.Get('chart.background.hbars') && this.Get('chart.background.hbars').length > 0) { + RGraph.DrawBars(this); + } + + if (this.Get('chart.axesontop') == false) { + this.DrawAxes(); + } + + /** + * Handle the appropriate shadow color. This now facilitates an array of differing + * shadow colors + */ + var shadowColor = this.Get('chart.shadow.color'); + + //if (typeof(shadowColor) == 'object') { + // shadowColor = RGraph.array_reverse(RGraph.array_clone(this.Get('chart.shadow.color'))); + //} + + + for (var i=0, j=0; i<this.data.length; i++, j++) { + + this.context.beginPath(); + + /** + * Turn on the shadow if required + */ + if (this.Get('chart.shadow') && !this.Get('chart.filled')) { + + /** + * Accommodate an array of shadow colors as well as a single string + */ + if (typeof(shadowColor) == 'object' && shadowColor[i - 1]) { + this.context.shadowColor = shadowColor[i]; + } else if (typeof(shadowColor) == 'object') { + this.context.shadowColor = shadowColor[0]; + } else if (typeof(shadowColor) == 'string') { + this.context.shadowColor = shadowColor; + } + + this.context.shadowBlur = this.Get('chart.shadow.blur'); + this.context.shadowOffsetX = this.Get('chart.shadow.offsetx'); + this.context.shadowOffsetY = this.Get('chart.shadow.offsety'); + + } else if (this.Get('chart.filled') && this.Get('chart.shadow')) { + alert('[LINE] Shadows are not permitted when the line is filled'); + } + + /** + * Draw the line + */ + + if (this.Get('chart.fillstyle')) { + if (typeof(this.Get('chart.fillstyle')) == 'object' && this.Get('chart.fillstyle')[j]) { + var fill = this.Get('chart.fillstyle')[j]; + + } else if (typeof(this.Get('chart.fillstyle')) == 'string') { + var fill = this.Get('chart.fillstyle'); + + } else { + alert('[LINE] Warning: chart.fillstyle must be either a string or an array with the same number of elements as you have sets of data'); + } + } else if (this.Get('chart.filled')) { + var fill = this.Get('chart.colors')[j]; + + } else { + var fill = null; + } + + /** + * Figure out the tickmark to use + */ + if (this.Get('chart.tickmarks') && typeof(this.Get('chart.tickmarks')) == 'object') { + var tickmarks = this.Get('chart.tickmarks')[i]; + } else if (this.Get('chart.tickmarks') && typeof(this.Get('chart.tickmarks')) == 'string') { + var tickmarks = this.Get('chart.tickmarks'); + } else if (this.Get('chart.tickmarks') && typeof(this.Get('chart.tickmarks')) == 'function') { + var tickmarks = this.Get('chart.tickmarks'); + } else { + var tickmarks = null; + } + + + this.DrawLine(this.data[i], + this.Get('chart.colors')[j], + fill, + this.GetLineWidth(j), + tickmarks, + i); + + this.context.stroke(); + } + + + + + + + + + + + + + + /** + * If tooltips are defined, handle them + */ + if (this.Get('chart.tooltips') && (this.Get('chart.tooltips').length || typeof(this.Get('chart.tooltips')) == 'function')) { + + // Need to register this object for redrawing + if (this.Get('chart.tooltips.highlight')) { + RGraph.Register(this); + } + + RGraph.InstallLineTooltipEventListeners(this); + + /** + * If there's a bar, install the event listeners + */ + if (this.__bar__) { + RGraph.InstallBarTooltipEventListeners(this.__bar__); + } + } + + + + + + + + + + + + + + + /** + * If the axes have been requested to be on top, do that + */ + if (this.Get('chart.axesontop')) { + this.DrawAxes(); + } + + /** + * Draw the labels + */ + this.DrawLabels(); + + /** + * Draw the range if necessary + */ + this.DrawRange(); + + // Draw a key if necessary + if (this.Get('chart.key').length) { + RGraph.DrawKey(this, this.Get('chart.key'), this.Get('chart.colors')); + } + + /** + * Draw " above" labels if enabled + */ + if (this.Get('chart.labels.above')) { + this.DrawAboveLabels(); + } + + /** + * Draw the "in graph" labels + */ + RGraph.DrawInGraphLabels(this); + + /** + * Draw crosschairs + */ + RGraph.DrawCrosshairs(this); + + /** + * If the canvas is annotatable, do install the event handlers + */ + if (this.Get('chart.annotatable')) { + RGraph.Annotate(this); + } + + /** + * Redraw the lines if a filled range is on the cards + */ + if (this.Get('chart.filled') && this.Get('chart.filled.range') && this.data.length == 2) { + + this.context.beginPath(); + var len = this.coords.length / 2; + this.context.lineWidth = this.Get('chart.linewidth'); + this.context.strokeStyle = this.Get('chart.colors')[0]; + + for (var i=0; i<len; ++i) { + if (i == 0) { + this.context.moveTo(this.coords[i][0], this.coords[i][1]); + } else { + this.context.lineTo(this.coords[i][0], this.coords[i][1]); + } + } + + this.context.stroke(); + + + this.context.beginPath(); + + if (this.Get('chart.colors')[1]) { + this.context.strokeStyle = this.Get('chart.colors')[1]; + } + + for (var i=this.coords.length - 1; i>=len; --i) { + if (i == (this.coords.length - 1) ) { + this.context.moveTo(this.coords[i][0], this.coords[i][1]); + } else { + this.context.lineTo(this.coords[i][0], this.coords[i][1]); + } + } + + this.context.stroke(); + } else if (this.Get('chart.filled') && this.Get('chart.filled.range')) { + alert('[LINE] You must have only two sets of data for a filled range chart'); + } + + /** + * This bit shows the mini zoom window if requested + */ + if (this.Get('chart.zoom.mode') == 'thumbnail') { + RGraph.ShowZoomWindow(this); + } + + /** + * This function enables the zoom in area mode + */ + if (this.Get('chart.zoom.mode') == 'area') { + RGraph.ZoomArea(this); + } + + /** + * This function enables resizing + */ + if (this.Get('chart.resizable')) { + RGraph.AllowResizing(this); + } + + /** + * This function enables adjustments + */ + if (this.Get('chart.adjustable')) { + RGraph.AllowAdjusting(this); + } + + /** + * Fire the RGraph ondraw event + */ + RGraph.FireCustomEvent(this, 'ondraw'); + } + + + /** + * Draws the axes + */ + RGraph.Line.prototype.DrawAxes = function () + { + // Don't draw the axes? + if (this.Get('chart.noaxes')) { + return; + } + + // Turn any shadow off + RGraph.NoShadow(this); + + this.context.lineWidth = 1; + this.context.strokeStyle = this.Get('chart.axis.color'); + this.context.beginPath(); + + // Draw the X axis + if (this.Get('chart.noxaxis') == false) { + if (this.Get('chart.xaxispos') == 'center') { + this.context.moveTo(this.gutterLeft, (this.grapharea / 2) + this.gutterTop); + this.context.lineTo(RGraph.GetWidth(this) - this.gutterRight, (this.grapharea / 2) + this.gutterTop); + } else if (this.Get('chart.xaxispos') == 'top') { + this.context.moveTo(this.gutterLeft, this.gutterTop); + this.context.lineTo(RGraph.GetWidth(this) - this.gutterRight, this.gutterTop); + } else { + this.context.moveTo(this.gutterLeft, RGraph.GetHeight(this) - this.gutterBottom); + this.context.lineTo(RGraph.GetWidth(this) - this.gutterRight, RGraph.GetHeight(this) - this.gutterBottom); + } + } + + // Draw the Y axis + if (this.Get('chart.noyaxis') == false) { + if (this.Get('chart.yaxispos') == 'left') { + this.context.moveTo(this.gutterLeft, this.gutterTop); + this.context.lineTo(this.gutterLeft, RGraph.GetHeight(this) - this.gutterBottom ); + } else { + this.context.moveTo(RGraph.GetWidth(this) - this.gutterRight, this.gutterTop); + this.context.lineTo(RGraph.GetWidth(this) - this.gutterRight, RGraph.GetHeight(this) - this.gutterBottom); + } + } + + /** + * Draw the X tickmarks + */ + if (this.Get('chart.noxaxis') == false) { + + if (this.data[0].length > 0) { + var xTickInterval = (this.canvas.width - this.gutterLeft - this.gutterRight) / (this.Get('chart.xticks') ? this.Get('chart.xticks') : (this.data[0].length - 1)); + } + + if (!xTickInterval || xTickInterval <= 0) { + xTickInterval = (this.canvas.width - this.gutterLeft - this.gutterRight) / (this.Get('chart.labels') && this.Get('chart.labels').length ? this.Get('chart.labels').length - 1 : 10); + } + + for (x=this.gutterLeft + (this.Get('chart.yaxispos') == 'left' ? xTickInterval : 0); x<=(this.canvas.width - this.gutterRight + 1 ); x+=xTickInterval) { + + if (this.Get('chart.yaxispos') == 'right' && x >= (this.canvas.width - this.gutterRight - 1) ) { + break; + } + + // If the last tick is not desired... + if (this.Get('chart.noendxtick')) { + if (this.Get('chart.yaxispos') == 'left' && x >= (this.canvas.width - this.gutterRight)) { + break; + } else if (this.Get('chart.yaxispos') == 'right' && x == this.gutterLeft) { + continue; + } + } + + var yStart = this.Get('chart.xaxispos') == 'center' ? (this.gutterTop + (this.grapharea / 2)) - 3 : RGraph.GetHeight(this) - this.gutterBottom; + var yEnd = this.Get('chart.xaxispos') == 'center' ? yStart + 6 : RGraph.GetHeight(this) - this.gutterBottom - (x % 60 == 0 ? this.Get('chart.largexticks') * this.Get('chart.tickdirection') : this.Get('chart.smallxticks') * this.Get('chart.tickdirection')); + + if (this.Get('chart.xaxispos') == 'top') { + yStart = this.gutterTop - 3; + yEnd = this.gutterTop; + } + + this.context.moveTo(x, yStart); + this.context.lineTo(x, yEnd); + } + + // Draw an extra tickmark if there is no X axis, but there IS a Y axis + } else if (this.Get('chart.noyaxis') == false) { + if (this.Get('chart.yaxispos') == 'left') { + this.context.moveTo(this.gutterLeft, RGraph.GetHeight(this) - this.gutterBottom); + this.context.lineTo(this.gutterLeft - this.Get('chart.smallyticks'), RGraph.GetHeight(this) - this.gutterBottom); + } else { + this.context.moveTo(RGraph.GetWidth(this) - this.gutterRight, RGraph.GetHeight(this) - this.gutterBottom); + this.context.lineTo(RGraph.GetWidth(this) - this.gutterRight + this.Get('chart.smallyticks'), RGraph.GetHeight(this) - this.gutterBottom); + } + } + + /** + * Draw the Y tickmarks + */ + var numyticks = this.Get('chart.numyticks'); + + if (this.Get('chart.noyaxis') == false) { + var counter = 0; + var adjustment = 0; + + if (this.Get('chart.yaxispos') == 'right') { + adjustment = (RGraph.GetWidth(this) - this.gutterLeft - this.gutterRight); + } + + // X axis at the center + if (this.Get('chart.xaxispos') == 'center') { + var interval = (this.grapharea / numyticks); + var lineto = (this.Get('chart.yaxispos') == 'left' ? this.gutterLeft : RGraph.GetWidth(this) - this.gutterRight + this.Get('chart.smallyticks')); + + // Draw the upper halves Y tick marks + for (y=this.gutterTop; y < (this.grapharea / 2) + this.gutterTop; y+=interval) { + this.context.moveTo((this.Get('chart.yaxispos') == 'left' ? this.gutterLeft - this.Get('chart.smallyticks') : RGraph.GetWidth(this) - this.gutterRight), y); + this.context.lineTo(lineto, y); + } + + // Draw the lower halves Y tick marks + for (y=this.gutterTop + (this.halfgrapharea) + interval; y <= this.grapharea + this.gutterTop; y+=interval) { + this.context.moveTo((this.Get('chart.yaxispos') == 'left' ? this.gutterLeft - this.Get('chart.smallyticks') : RGraph.GetWidth(this) - this.gutterRight), y); + this.context.lineTo(lineto, y); + } + + // X axis at the top + } else if (this.Get('chart.xaxispos') == 'top') { + var interval = (this.grapharea / numyticks); + var lineto = (this.Get('chart.yaxispos') == 'left' ? this.gutterLeft : RGraph.GetWidth(this) - this.gutterRight + this.Get('chart.smallyticks')); + + // Draw the Y tick marks + for (y=this.gutterTop + interval; y <=this.grapharea + this.gutterTop; y+=interval) { + this.context.moveTo((this.Get('chart.yaxispos') == 'left' ? this.gutterLeft - this.Get('chart.smallyticks') : RGraph.GetWidth(this) - this.gutterRight), y); + this.context.lineTo(lineto, y); + } + + // If there's no X axis draw an extra tick + if (this.Get('chart.noxaxis')) { + this.context.moveTo((this.Get('chart.yaxispos') == 'left' ? this.gutterLeft - this.Get('chart.smallyticks') : RGraph.GetWidth(this) - this.gutterRight), this.gutterTop); + this.context.lineTo(lineto, this.gutterTop); + } + + // X axis at the bottom + } else { + var lineto = (this.Get('chart.yaxispos') == 'left' ? this.gutterLeft - this.Get('chart.smallyticks') : this.canvas.width - this.gutterRight + this.Get('chart.smallyticks')); + + for (y=this.gutterTop; y < (this.canvas.height - this.gutterBottom) && counter < numyticks; y+=( (this.canvas.height - this.gutterTop - this.gutterBottom) / numyticks) ) { + + this.context.moveTo(this.gutterLeft + adjustment, y); + this.context.lineTo(lineto, y); + + var counter = counter +1; + } + } + + // Draw an extra X tickmark + } else if (this.Get('chart.noxaxis') == false) { + + if (this.Get('chart.yaxispos') == 'left') { + this.context.moveTo(this.gutterLeft, this.Get('chart.xaxispos') == 'top' ? this.gutterTop : RGraph.GetHeight(this) - this.gutterBottom); + this.context.lineTo(this.gutterLeft, this.Get('chart.xaxispos') == 'top' ? this.gutterTop - this.Get('chart.smallxticks') : RGraph.GetHeight(this) - this.gutterBottom + this.Get('chart.smallxticks')); + } else { + this.context.moveTo(RGraph.GetWidth(this) - this.gutterRight, RGraph.GetHeight(this) - this.gutterBottom); + this.context.lineTo(RGraph.GetWidth(this) - this.gutterRight, RGraph.GetHeight(this) - this.gutterBottom + this.Get('chart.smallxticks')); + } + } + + this.context.stroke(); + } + + + /** + * Draw the text labels for the axes + */ + RGraph.Line.prototype.DrawLabels = function () + { + this.context.strokeStyle = 'black'; + this.context.fillStyle = this.Get('chart.text.color'); + this.context.lineWidth = 1; + + // Turn off any shadow + RGraph.NoShadow(this); + + // This needs to be here + var font = this.Get('chart.text.font'); + var text_size = this.Get('chart.text.size'); + var context = this.context; + var canvas = this.canvas; + + // Draw the Y axis labels + if (this.Get('chart.ylabels') && this.Get('chart.ylabels.specific') == null) { + + var units_pre = this.Get('chart.units.pre'); + var units_post = this.Get('chart.units.post'); + var xpos = this.Get('chart.yaxispos') == 'left' ? this.gutterLeft - 5 : RGraph.GetWidth(this) - this.gutterRight + 5; + var align = this.Get('chart.yaxispos') == 'left' ? 'right' : 'left'; + + var numYLabels = this.Get('chart.ylabels.count'); + var bounding = false; + var bgcolor = this.Get('chart.ylabels.inside') ? this.Get('chart.ylabels.inside.color') : null; + + + /** + * If the Y labels are inside the Y axis, invert the alignment + */ + if (this.Get('chart.ylabels.inside') == true && align == 'left') { + xpos -= 10; + align = 'right'; + bounding = true; + + + } else if (this.Get('chart.ylabels.inside') == true && align == 'right') { + xpos += 10; + align = 'left'; + bounding = true; + } + + + + if (this.Get('chart.xaxispos') == 'center') { + var half = this.grapharea / 2; + + if (numYLabels == 1 || numYLabels == 3 || numYLabels == 5) { + // Draw the upper halves labels + RGraph.Text(context, font, text_size, xpos, this.gutterTop + ( (0/5) * half ) + this.halfTextHeight, RGraph.number_format(this, this.scale[4], units_pre, units_post), null, align, bounding, null, bgcolor); + + if (numYLabels == 5) { + RGraph.Text(context, font, text_size, xpos, this.gutterTop + ( (1/5) * half ) + this.halfTextHeight, RGraph.number_format(this, this.scale[3], units_pre, units_post), null, align, bounding, null, bgcolor); + RGraph.Text(context, font, text_size, xpos, this.gutterTop + ( (3/5) * half ) + this.halfTextHeight, RGraph.number_format(this, this.scale[1], units_pre, units_post), null, align, bounding, null, bgcolor); + } + + if (numYLabels >= 3) { + RGraph.Text(context, font, text_size, xpos, this.gutterTop + ( (2/5) * half ) + this.halfTextHeight, RGraph.number_format(this, this.scale[2], units_pre, units_post), null, align, bounding, null, bgcolor); + RGraph.Text(context, font, text_size, xpos, this.gutterTop + ( (4/5) * half ) + this.halfTextHeight, RGraph.number_format(this, this.scale[0], units_pre, units_post), null, align, bounding, null, bgcolor); + } + + // Draw the lower halves labels + if (numYLabels >= 3) { + RGraph.Text(context, font, text_size, xpos, this.gutterTop + ( (6/5) * half ) + this.halfTextHeight, '-' + RGraph.number_format(this, this.scale[0], units_pre, units_post), null, align, bounding, null, bgcolor); + RGraph.Text(context, font, text_size, xpos, this.gutterTop + ( (8/5) * half ) + this.halfTextHeight, '-' + RGraph.number_format(this, this.scale[2], units_pre, units_post), null, align, bounding, null, bgcolor); + } + + if (numYLabels == 5) { + RGraph.Text(context, font, text_size, xpos, this.gutterTop + ( (7/5) * half ) + this.halfTextHeight, '-' + RGraph.number_format(this, this.scale[1], units_pre, units_post), null, align, bounding, null, bgcolor); + RGraph.Text(context, font, text_size, xpos, this.gutterTop + ( (9/5) * half ) + this.halfTextHeight, '-' + RGraph.number_format(this, this.scale[3], units_pre, units_post), null, align, bounding, null, bgcolor); + } + + RGraph.Text(context, font, text_size, xpos, this.gutterTop + ( (10/5) * half ) + this.halfTextHeight, '-' + RGraph.number_format(this, (this.scale[4] == '1.0' ? '1.0' : this.scale[4]), units_pre, units_post), null, align, bounding, null, bgcolor); + + } else if (numYLabels == 10) { + + // 10 Y labels + var interval = (this.grapharea / numYLabels) / 2; + + for (var i=0; i<numYLabels; ++i) { + // This draws the upper halves labels + RGraph.Text(context,font, text_size, xpos, this.gutterTop + this.halfTextHeight + ((i/20) * (this.grapharea) ), RGraph.number_format(this, ((this.scale[4] / numYLabels) * (numYLabels - i)).toFixed((this.Get('chart.scale.decimals'))),units_pre, units_post), null, align, bounding, null, bgcolor); + + // And this draws the lower halves labels + RGraph.Text(context, font, text_size, xpos, + + this.gutterTop + this.halfTextHeight + ((i/20) * this.grapharea) + (this.grapharea / 2) + (this.grapharea / 20), + + '-' + RGraph.number_format(this, (this.scale[4] - ((this.scale[4] / numYLabels) * (numYLabels - i - 1))).toFixed((this.Get('chart.scale.decimals'))),units_pre, units_post), null, align, bounding, null, bgcolor); + } + + } else { + alert('[LINE SCALE] The number of Y labels must be 1/3/5/10'); + } + + // Draw the lower limit if chart.ymin is specified + if (typeof(this.Get('chart.ymin')) == 'number') { + RGraph.Text(context, font, text_size, xpos, RGraph.GetHeight(this) / 2, RGraph.number_format(this, this.Get('chart.ymin').toFixed(this.Get('chart.scale.decimals')), units_pre, units_post), 'center', align, bounding, null, bgcolor); + } + + // No X axis - so draw 0 + if (this.Get('chart.noxaxis') == true) { + RGraph.Text(context,font,text_size,xpos,this.gutterTop + ( (5/5) * half ) + this.halfTextHeight,this.Get('chart.units.pre') + '0' + this.Get('chart.units.post'),null, align, bounding, null, bgcolor); + } + + // X axis at the top + } else if (this.Get('chart.xaxispos') == 'top') { + + var scale = RGraph.array_reverse(this.scale); + + /** + * Accommodate reversing the Y labels + */ + if (this.Get('chart.ylabels.invert')) { + + scale = RGraph.array_reverse(scale); + + this.context.translate(0, this.grapharea * -0.2); + if (typeof(this.Get('chart.ymin')) == null) { + this.Set('chart.ymin', 0); + } + } + + if (numYLabels == 1 || numYLabels == 3 || numYLabels == 5) { + RGraph.Text(context, font, text_size, xpos, this.gutterTop + this.halfTextHeight + ((1/5) * (this.grapharea ) ), '-' + RGraph.number_format(this, scale[4], units_pre, units_post), null, align, bounding, null, bgcolor); + + if (numYLabels == 5) { + RGraph.Text(context, font, text_size, xpos, this.gutterTop + this.halfTextHeight + ((4/5) * (this.grapharea) ), '-' + RGraph.number_format(this, scale[1], units_pre, units_post), null, align, bounding, null, bgcolor); + RGraph.Text(context, font, text_size, xpos, this.gutterTop + this.halfTextHeight + ((2/5) * (this.grapharea) ), '-' + RGraph.number_format(this, scale[3], units_pre, units_post), null, align, bounding, null, bgcolor); + } + + if (numYLabels >= 3) { + RGraph.Text(context, font, text_size, xpos, this.gutterTop + this.halfTextHeight + ((3/5) * (this.grapharea ) ), '-' + RGraph.number_format(this, scale[2], units_pre, units_post), null, align, bounding, null, bgcolor); + RGraph.Text(context, font, text_size, xpos, this.gutterTop + this.halfTextHeight + ((5/5) * (this.grapharea) ), '-' + RGraph.number_format(this, scale[0], units_pre, units_post), null, align, bounding, null, bgcolor); + } + + } else if (numYLabels == 10) { + + // 10 Y labels + var interval = (this.grapharea / numYLabels) / 2; + + for (var i=0; i<numYLabels; ++i) { + + RGraph.Text(context,font,text_size,xpos,(2 * interval) + this.gutterTop + this.halfTextHeight + ((i/10) * (this.grapharea) ),'-' + RGraph.number_format(this,(scale[0] - (((scale[0] - this.min) / numYLabels) * (numYLabels - i - 1))).toFixed((this.Get('chart.scale.decimals'))),units_pre,units_post),null,align,bounding,null,bgcolor); + } + + } else { + alert('[LINE SCALE] The number of Y labels must be 1/3/5/10'); + } + + + /** + * Accommodate translating back after reversing the labels + */ + if (this.Get('chart.ylabels.invert')) { + this.context.translate(0, 0 - (this.grapharea * -0.2)); + } + + // Draw the lower limit if chart.ymin is specified + if (typeof(this.Get('chart.ymin')) == 'number') { + RGraph.Text(context,font,text_size,xpos,this.Get('chart.ylabels.invert') ? this.canvas.height - this.gutterBottom : this.gutterTop,'-' + RGraph.number_format(this, this.Get('chart.ymin').toFixed(this.Get('chart.scale.decimals')), units_pre, units_post),'center',align,bounding,null,bgcolor); + } + + } else { + + /** + * Accommodate reversing the Y labels + */ + if (this.Get('chart.ylabels.invert')) { + this.scale = RGraph.array_reverse(this.scale); + this.context.translate(0, this.grapharea * 0.2); + if (typeof(this.Get('chart.ymin')) == null) { + this.Set('chart.ymin', 0); + } + } + + if (numYLabels == 1 || numYLabels == 3 || numYLabels == 5) { + RGraph.Text(context, font, text_size, xpos, this.gutterTop + this.halfTextHeight + ((0/5) * (this.grapharea ) ), RGraph.number_format(this, this.scale[4], units_pre, units_post), null, align, bounding, null, bgcolor); + + if (numYLabels == 5) { + RGraph.Text(context, font, text_size, xpos, this.gutterTop + this.halfTextHeight + ((3/5) * (this.grapharea) ), RGraph.number_format(this, this.scale[1], units_pre, units_post), null, align, bounding, null, bgcolor); + RGraph.Text(context, font, text_size, xpos, this.gutterTop + this.halfTextHeight + ((1/5) * (this.grapharea) ), RGraph.number_format(this, this.scale[3], units_pre, units_post), null, align, bounding, null, bgcolor); + } + + if (numYLabels >= 3) { + RGraph.Text(context, font, text_size, xpos, this.gutterTop + this.halfTextHeight + ((2/5) * (this.grapharea ) ), RGraph.number_format(this, this.scale[2], units_pre, units_post), null, align, bounding, null, bgcolor); + RGraph.Text(context, font, text_size, xpos, this.gutterTop + this.halfTextHeight + ((4/5) * (this.grapharea) ), RGraph.number_format(this, this.scale[0], units_pre, units_post), null, align, bounding, null, bgcolor); + } + + } else if (numYLabels == 10) { + + // 10 Y labels + var interval = (this.grapharea / numYLabels) / 2; + + for (var i=0; i<numYLabels; ++i) { + RGraph.Text(context,font,text_size,xpos,this.gutterTop + this.halfTextHeight + ((i/10) * (this.grapharea) ),RGraph.number_format(this,((((this.scale[4] - this.min) / numYLabels) * (numYLabels - i)) + this.min).toFixed((this.Get('chart.scale.decimals'))),units_pre,units_post),null,align,bounding,null,bgcolor); + } + + } else { + alert('[LINE SCALE] The number of Y labels must be 1/3/5/10'); + } + + + /** + * Accommodate translating back after reversing the labels + */ + if (this.Get('chart.ylabels.invert')) { + this.context.translate(0, 0 - (this.grapharea * 0.2)); + } + + // Draw the lower limit if chart.ymin is specified + if (typeof(this.Get('chart.ymin')) == 'number') { + RGraph.Text(context,font,text_size,xpos,this.Get('chart.ylabels.invert') ? this.gutterTop : RGraph.GetHeight(this) - this.gutterBottom,RGraph.number_format(this, this.Get('chart.ymin').toFixed(this.Get('chart.scale.decimals')), units_pre, units_post),'center',align,bounding,null,bgcolor); + } + } + + // No X axis - so draw 0 - but not if the X axis is in the center + if ( this.Get('chart.noxaxis') == true + && this.Get('chart.ymin') == null + && this.Get('chart.xaxispos') != 'center' + ) { + + RGraph.Text(context,font,text_size,xpos,this.Get('chart.xaxispos') == 'top' ? this.gutterTop + this.halfTextHeight: (this.canvas.height - this.gutterBottom + this.halfTextHeight),this.Get('chart.units.pre') + '0' + this.Get('chart.units.post'),null, align, bounding, null, bgcolor); + } + + } else if (this.Get('chart.ylabels') && typeof(this.Get('chart.ylabels.specific')) == 'object') { + + // A few things + var gap = this.grapharea / this.Get('chart.ylabels.specific').length; + var halign = this.Get('chart.yaxispos') == 'left' ? 'right' : 'left'; + var bounding = false; + var bgcolor = null; + var ymin = this.Get('chart.ymin') != null && this.Get('chart.ymin'); + + // Figure out the X coord based on the position of the axis + if (this.Get('chart.yaxispos') == 'left') { + var x = this.gutterLeft - 5; + + if (this.Get('chart.ylabels.inside')) { + x += 10; + halign = 'left'; + bounding = true; + bgcolor = 'rgba(255,255,255,0.5)'; + } + + } else if (this.Get('chart.yaxispos') == 'right') { + var x = this.canvas.width - this.gutterRight + 5; + + if (this.Get('chart.ylabels.inside')) { + x -= 10; + halign = 'right'; + bounding = true; + bgcolor = 'rgba(255,255,255,0.5)'; + } + } + + + // Draw the labels + if (this.Get('chart.xaxispos') == 'center') { + + // Draw the top halfs labels + for (var i=0; i<this.Get('chart.ylabels.specific').length; ++i) { + var y = this.gutterTop + (this.grapharea / ((this.Get('chart.ylabels.specific').length ) * 2) * i); + + if (ymin && ymin > 0) { + var y = ((this.grapharea / 2) / (this.Get('chart.ylabels.specific').length - (ymin ? 1 : 0)) ) * i; + y += this.gutterTop; + } + + RGraph.Text(context, font, text_size,x,y,String(this.Get('chart.ylabels.specific')[i]), 'center', halign, bounding, 0, bgcolor); + } + + // Now reverse the labels and draw the bottom half + var reversed_labels = RGraph.array_reverse(this.Get('chart.ylabels.specific')); + + // Draw the bottom halfs labels + for (var i=0; i<reversed_labels.length; ++i) { + var y = (this.grapharea / 2) + this.gutterTop + ((this.grapharea / (reversed_labels.length * 2) ) * (i + 1)); + + if (ymin && ymin > 0) { + var y = ((this.grapharea / 2) / (reversed_labels.length - (ymin ? 1 : 0)) ) * i; + y += this.gutterTop; + y += (this.grapharea / 2); + } + + RGraph.Text(context, font, text_size,x,y,String(reversed_labels[i]), 'center', halign, bounding, 0, bgcolor); + } + + } else if (this.Get('chart.xaxispos') == 'top') { + + // Reverse the labels and draw + var reversed_labels = RGraph.array_reverse(this.Get('chart.ylabels.specific')); + + // Draw the bottom halfs labels + for (var i=0; i<reversed_labels.length; ++i) { + + var y = ((this.grapharea / (reversed_labels.length - (ymin ? 1 : 0)) ) * (i + (ymin ? 0 : 1))); + y = y + this.gutterTop; + + RGraph.Text(context, font, text_size,x,y,String(reversed_labels[i]), 'center', halign, bounding, 0, bgcolor); + } + + } else { + for (var i=0; i<this.Get('chart.ylabels.specific').length; ++i) { + var y = this.gutterTop + ((this.grapharea / (this.Get('chart.ylabels.specific').length - (ymin ? 1 : 0) )) * i); + RGraph.Text(context, font, text_size,x,y,String(this.Get('chart.ylabels.specific')[i]), 'center', halign, bounding, 0, bgcolor); + } + } + } + + // Draw the X axis labels + if (this.Get('chart.labels') && this.Get('chart.labels').length > 0) { + + + var yOffset = 13; + var bordered = false; + var bgcolor = null; + + if (this.Get('chart.xlabels.inside')) { + yOffset = -5; + bordered = true; + bgcolor = this.Get('chart.xlabels.inside.color'); + } + + /** + * Text angle + */ + var angle = 0; + var valign = null; + var halign = 'center'; + + if (typeof(this.Get('chart.text.angle')) == 'number' && this.Get('chart.text.angle') > 0) { + angle = -1 * this.Get('chart.text.angle'); + valign = 'center'; + halign = 'right'; + yOffset = 10; + + if (this.Get('chart.xaxispos') == 'top') { + yOffset = 10; + } + } + + this.context.fillStyle = this.Get('chart.text.color'); + var numLabels = this.Get('chart.labels').length; + + for (i=0; i<numLabels; ++i) { + + // Changed 8th Nov 2010 to be not reliant on the coords + //if (this.Get('chart.labels')[i] && this.coords && this.coords[i] && this.coords[i][0]) { + if (this.Get('chart.labels')[i]) { + + var labelX = ((RGraph.GetWidth(this) - this.gutterLeft - this.gutterRight - (2 * this.Get('chart.hmargin'))) / (numLabels - 1) ) * i; + labelX += this.gutterLeft + this.Get('chart.hmargin'); + + /** + * Account for an unrelated number of labels + */ + if (this.Get('chart.labels').length != this.data[0].length) { + labelX = this.gutterLeft + this.Get('chart.hmargin') + ((RGraph.GetWidth(this) - this.gutterLeft - this.gutterRight - (2 * this.Get('chart.hmargin'))) * (i / (this.Get('chart.labels').length - 1))); + } + + // This accounts for there only being one point on the chart + if (!labelX) { + labelX = this.gutterLeft + this.Get('chart.hmargin'); + } + + if (this.Get('chart.xaxispos') == 'top' && this.Get('chart.text.angle') > 0) { + halign = 'left'; + } + + RGraph.Text(context, + font, + text_size, + labelX, + (this.Get('chart.xaxispos') == 'top') ? this.gutterTop - yOffset - (this.Get('chart.xlabels.inside') ? -22 : 0) : (RGraph.GetHeight(this) - this.gutterBottom) + yOffset, + String(this.Get('chart.labels')[i]), + valign, + halign, + bordered, + angle, + bgcolor); + } + } + + } + + this.context.stroke(); + this.context.fill(); + } + + + /** + * Draws the line + */ + RGraph.Line.prototype.DrawLine = function (lineData, color, fill, linewidth, tickmarks, index) + { + // This facilitates the Rise animation (the Y value only) + if (this.Get('chart.animation.unfold.y') && this.Get('chart.animation.factor') != 1) { + for (var i=0; i<lineData.length; ++i) { + lineData[i] *= this.Get('chart.animation.factor'); + } + } + + var penUp = false; + var yPos = null; + var xPos = 0; + this.context.lineWidth = 1; + var lineCoords = []; + + /** + * Get the previous line data + */ + if (index > 0) { + var prevLineCoords = this.coords2[index - 1]; + } + + // Work out the X interval + var xInterval = (this.canvas.width - (2 * this.Get('chart.hmargin')) - this.gutterLeft - this.gutterRight) / (lineData.length - 1); + + // Loop thru each value given, plotting the line + // (FORMERLY FIRST) + for (i=0; i<lineData.length; i++) { + + var data_point = lineData[i]; + + yPos = this.canvas.height - (((data_point - (data_point > 0 ? this.Get('chart.ymin') : (-1 * this.Get('chart.ymin')))) / (this.max - this.min) ) * this.grapharea); + yPos = (this.grapharea / (this.max - this.min)) * (data_point - this.min); + yPos = this.canvas.height - yPos; + + /** + * This skirts an annoying JS rounding error + * SEARCH TAGS: JS ROUNDING ERROR DECIMALS + */ + if (data_point == this.max) { + yPos = Math.round(yPos); + } + + if (this.Get('chart.ylabels.invert')) { + yPos -= this.gutterBottom; + yPos -= this.gutterTop; + yPos = this.canvas.height - yPos; + } + + // Make adjustments depending on the X axis position + if (this.Get('chart.xaxispos') == 'center') { + yPos = (yPos - this.gutterBottom - this.gutterTop) / 2; + yPos = yPos + this.gutterTop; + + // TODO Check this + } else if (this.Get('chart.xaxispos') == 'top') { + + yPos = (this.grapharea / (this.max - this.min)) * (Math.abs(data_point) - this.min); + yPos += this.gutterTop; + + if (this.Get('chart.ylabels.invert')) { + yPos -= this.gutterTop; + yPos = this.grapharea - yPos; + yPos += this.gutterTop; + } + + } else if (this.Get('chart.xaxispos') == 'bottom') { + // TODO + yPos -= this.gutterBottom; // Without this the line is out of place due to the gutter + } + + + + // Null data points, and a special case for this bug:http://dev.rgraph.net/tests/ymin.html + if ( lineData[i] == null + || (this.Get('chart.xaxispos') == 'bottom' && lineData[i] < this.min && !this.Get('chart.outofbounds')) + || (this.Get('chart.xaxispos') == 'center' && lineData[i] < (-1 * this.max) && !this.Get('chart.outofbounds'))) { + + yPos = null; + } + + // Not always very noticeable, but it does have an effect + // with thick lines + this.context.lineCap = 'round'; + this.context.lineJoin = 'round'; + + // Plot the line if we're at least on the second iteration + if (i > 0) { + xPos = xPos + xInterval; + } else { + xPos = this.Get('chart.hmargin') + this.gutterLeft; + } + + if (this.Get('chart.animation.unfold.x')) { + xPos *= this.Get('chart.animation.factor'); + + if (xPos < this.Get('chart.gutter.left')) { + xPos = this.Get('chart.gutter.left'); + } + } + + /** + * Add the coords to an array + */ + this.coords.push([xPos, yPos]); + lineCoords.push([xPos, yPos]); + } + + this.context.stroke(); + + // Store the coords in another format, indexed by line number + this.coords2[index] = lineCoords; + + /** + * For IE only: Draw the shadow ourselves as ExCanvas doesn't produce shadows + */ + if (RGraph.isIE8() && this.Get('chart.shadow')) { + this.DrawIEShadow(lineCoords, this.context.shadowColor); + } + + /** + * Now draw the actual line [FORMERLY SECOND] + */ + this.context.beginPath(); + // Transparent now as of 11/19/2011 + this.context.strokeStyle = 'rgba(0,0,0,0)'; + //this.context.strokeStyle = fill; + if (fill) { + this.context.fillStyle = fill; + } + + var isStepped = this.Get('chart.stepped'); + var isFilled = this.Get('chart.filled'); + + + for (var i=0; i<lineCoords.length; ++i) { + + xPos = lineCoords[i][0]; + yPos = lineCoords[i][1]; + var set = index; + + var prevY = (lineCoords[i - 1] ? lineCoords[i - 1][1] : null); + var isLast = (i + 1) == lineCoords.length; + + /** + * This nullifys values which are out-of-range + */ + if (prevY < this.gutterTop || prevY > (RGraph.GetHeight(this) - this.gutterBottom) ) { + penUp = true; + } + + if (i == 0 || penUp || !yPos || !prevY || prevY < this.gutterTop) { + + if (this.Get('chart.filled') && !this.Get('chart.filled.range')) { + + this.context.moveTo(xPos + 1, this.canvas.height - this.gutterBottom - (this.Get('chart.xaxispos') == 'center' ? (this.canvas.height - this.gutterTop - this.gutterBottom) / 2 : 0) -1); + + // This facilitates the X axis being at the top + // NOTE: Also done below + if (this.Get('chart.xaxispos') == 'top') { + this.context.moveTo(xPos + 1, this.Get('chart.gutter.top')); + } + + this.context.lineTo(xPos + 1, yPos); + + } else { + + if (RGraph.isIE8() && yPos == null) { + // Nada + } else { + this.context.moveTo(xPos, yPos); + } + } + + if (yPos == null) { + penUp = true; + + } else { + penUp = false; + } + + } else { + + // Draw the stepped part of stepped lines + if (isStepped) { + this.context.lineTo(xPos, lineCoords[i - 1][1]); + } + + if ((yPos >= this.gutterTop && yPos <= (this.canvas.height - this.gutterBottom)) || this.Get('chart.outofbounds') ) { + + if (isLast && this.Get('chart.filled') && !this.Get('chart.filled.range') && this.Get('chart.yaxispos') == 'right') { + xPos -= 1; + } + + + // Added 8th September 2009 + if (!isStepped || !isLast) { + this.context.lineTo(xPos, yPos); + + if (isFilled && lineCoords[i+1] && lineCoords[i+1][1] == null) { + this.context.lineTo(xPos, RGraph.GetHeight(this) - this.gutterBottom); + } + + // Added August 2010 + } else if (isStepped && isLast) { + this.context.lineTo(xPos,yPos); + } + + + penUp = false; + } else { + penUp = true; + } + } + } + + if (this.Get('chart.filled') && !this.Get('chart.filled.range')) { + + // Is this needed ?? + var fillStyle = this.Get('chart.fillstyle'); + + /** + * Draw the bottom edge of the filled bit using either the X axis or the prevlinedata, + * depending on the index of the line. The first line uses the X axis, and subsequent + * lines use the prevLineCoords array + */ + if (index > 0 && this.Get('chart.filled.accumulative')) { + this.context.lineTo(xPos, prevLineCoords ? prevLineCoords[i - 1][1] : (this.canvas.height - this.gutterBottom - 1 + (this.Get('chart.xaxispos') == 'center' ? (this.canvas.height - this.gutterTop - this.gutterBottom) / 2 : 0))); + + for (var k=(i - 1); k>=0; --k) { + this.context.lineTo(prevLineCoords[k][0], prevLineCoords[k][1]); + } + } else { + // Draw a line down to the X axis + if (this.Get('chart.xaxispos') == 'top') { + this.context.lineTo(xPos, this.Get('chart.gutter.top') + 1); + this.context.lineTo(lineCoords[0][0],this.Get('chart.gutter.top') + 1); + } else { + this.context.lineTo(xPos,this.canvas.height - this.gutterBottom - 1 - + (this.Get('chart.xaxispos') == 'center' ? (this.canvas.height - this.gutterTop - this.gutterBottom) / 2 : 0)); + this.context.lineTo(lineCoords[0][0],this.canvas.height - this.Get('chart.gutter.bottom') - (this.Get('chart.xaxispos') == 'center' ? (this.canvas.height - this.gutterTop - this.gutterBottom) / 2 : 0)); + } + } + + this.context.fillStyle = fill; + + this.context.fill(); + this.context.beginPath(); + } + + /** + * FIXME this may need removing when Chrome is fixed + * SEARCH TAGS: CHROME SHADOW BUG + */ + if (navigator.userAgent.match(/Chrome/) && this.Get('chart.shadow') && this.Get('chart.chromefix') && this.Get('chart.shadow.blur') > 0) { + + for (var i=lineCoords.length - 1; i>=0; --i) { + if ( + typeof(lineCoords[i][1]) != 'number' + || (typeof(lineCoords[i+1]) == 'object' && typeof(lineCoords[i+1][1]) != 'number') + ) { + this.context.moveTo(lineCoords[i][0],lineCoords[i][1]); + } else { + this.context.lineTo(lineCoords[i][0],lineCoords[i][1]); + } + } + } + + this.context.stroke(); + + + if (this.Get('chart.backdrop')) { + this.DrawBackdrop(lineCoords, color); + } + + // Now redraw the lines with the correct line width + this.RedrawLine(lineCoords, color, linewidth); + + this.context.stroke(); + + // Draw the tickmarks + for (var i=0; i<lineCoords.length; ++i) { + + i = Number(i); + + if (isStepped && i == (lineCoords.length - 1)) { + this.context.beginPath(); + //continue; + } + + if ( + ( + tickmarks != 'endcircle' + && tickmarks != 'endsquare' + && tickmarks != 'filledendsquare' + && tickmarks != 'endtick' + && tickmarks != 'endtriangle' + && tickmarks != 'arrow' + && tickmarks != 'filledarrow' + ) + || (i == 0 && tickmarks != 'arrow' && tickmarks != 'filledarrow') + || i == (lineCoords.length - 1) + ) { + + var prevX = (i <= 0 ? null : lineCoords[i - 1][0]); + var prevY = (i <= 0 ? null : lineCoords[i - 1][1]); + + this.DrawTick(lineData, lineCoords[i][0], lineCoords[i][1], color, false, prevX, prevY, tickmarks, i); + + // Draws tickmarks on the stepped bits of stepped charts. Takend out 14th July 2010 + // + //if (this.Get('chart.stepped') && lineCoords[i + 1] && this.Get('chart.tickmarks') != 'endsquare' && this.Get('chart.tickmarks') != 'endcircle' && this.Get('chart.tickmarks') != 'endtick') { + // this.DrawTick(lineCoords[i + 1][0], lineCoords[i][1], color); + //} + } + } + + // Draw something off canvas to skirt an annoying bug + this.context.beginPath(); + this.context.arc(RGraph.GetWidth(this) + 50000, RGraph.GetHeight(this) + 50000, 2, 0, 6.38, 1); + } + + + /** + * This functions draws a tick mark on the line + * + * @param xPos int The x position of the tickmark + * @param yPos int The y position of the tickmark + * @param color str The color of the tickmark + * @param bool Whether the tick is a shadow. If it is, it gets offset by the shadow offset + */ + RGraph.Line.prototype.DrawTick = function (lineData, xPos, yPos, color, isShadow, prevX, prevY, tickmarks, index) + { + // If the yPos is null - no tick + if ((yPos == null || yPos > (this.canvas.height - this.gutterBottom) || yPos < this.gutterTop) && !this.Get('chart.outofbounds') || !this.Get('chart.line.visible')) { + return; + } + + this.context.beginPath(); + + var offset = 0; + + // Reset the stroke and lineWidth back to the same as what they were when the line was drawm + // UPDATE 28th July 2011 - the line width is now set to 1 + this.context.lineWidth = this.Get('chart.tickmarks.linewidth') ? this.Get('chart.tickmarks.linewidth') : this.Get('chart.linewidth'); + this.context.strokeStyle = isShadow ? this.Get('chart.shadow.color') : this.context.strokeStyle; + this.context.fillStyle = isShadow ? this.Get('chart.shadow.color') : this.context.strokeStyle; + + // Cicular tick marks + if ( tickmarks == 'circle' + || tickmarks == 'filledcircle' + || tickmarks == 'endcircle') { + + if (tickmarks == 'circle'|| tickmarks == 'filledcircle' || (tickmarks == 'endcircle') ) { + this.context.beginPath(); + this.context.arc(xPos + offset, yPos + offset, this.Get('chart.ticksize'), 0, 360 / (180 / Math.PI), false); + + if (tickmarks == 'filledcircle') { + this.context.fillStyle = isShadow ? this.Get('chart.shadow.color') : this.context.strokeStyle; + } else { + this.context.fillStyle = isShadow ? this.Get('chart.shadow.color') : 'white'; + } + + this.context.stroke(); + this.context.fill(); + } + + // Halfheight "Line" style tick marks + } else if (tickmarks == 'halftick') { + this.context.beginPath(); + this.context.moveTo(xPos, yPos); + this.context.lineTo(xPos, yPos + this.Get('chart.ticksize')); + + this.context.stroke(); + + // Tick style tickmarks + } else if (tickmarks == 'tick') { + this.context.beginPath(); + this.context.moveTo(xPos, yPos - this.Get('chart.ticksize')); + this.context.lineTo(xPos, yPos + this.Get('chart.ticksize')); + + this.context.stroke(); + + // Endtick style tickmarks + } else if (tickmarks == 'endtick') { + this.context.beginPath(); + this.context.moveTo(xPos, yPos - this.Get('chart.ticksize')); + this.context.lineTo(xPos, yPos + this.Get('chart.ticksize')); + + this.context.stroke(); + + // "Cross" style tick marks + } else if (tickmarks == 'cross') { + this.context.beginPath(); + this.context.moveTo(xPos - this.Get('chart.ticksize'), yPos - this.Get('chart.ticksize')); + this.context.lineTo(xPos + this.Get('chart.ticksize'), yPos + this.Get('chart.ticksize')); + this.context.moveTo(xPos + this.Get('chart.ticksize'), yPos - this.Get('chart.ticksize')); + this.context.lineTo(xPos - this.Get('chart.ticksize'), yPos + this.Get('chart.ticksize')); + + this.context.stroke(); + + + // Triangle style tick marks + } else if (tickmarks == 'triangle' || tickmarks == 'filledtriangle' || tickmarks == 'endtriangle') { + this.context.beginPath(); + + if (tickmarks == 'filledtriangle') { + this.context.fillStyle = isShadow ? this.Get('chart.shadow.color') : this.context.strokeStyle; + } else { + this.context.fillStyle = 'white'; + } + + this.context.moveTo(xPos - this.Get('chart.ticksize'), yPos + this.Get('chart.ticksize')); + this.context.lineTo(xPos, yPos - this.Get('chart.ticksize')); + this.context.lineTo(xPos + this.Get('chart.ticksize'), yPos + this.Get('chart.ticksize')); + this.context.closePath(); + + this.context.stroke(); + this.context.fill(); + + + // A white bordered circle + } else if (tickmarks == 'borderedcircle' || tickmarks == 'dot') { + this.context.lineWidth = 1; + this.context.strokeStyle = this.Get('chart.tickmarks.dot.color'); + this.context.fillStyle = this.Get('chart.tickmarks.dot.color'); + + // The outer white circle + this.context.beginPath(); + this.context.arc(xPos, yPos, this.Get('chart.ticksize'), 0, 360 / (180 / Math.PI), false); + this.context.closePath(); + + + this.context.fill(); + this.context.stroke(); + + // Now do the inners + this.context.beginPath(); + this.context.fillStyle = color; + this.context.strokeStyle = color; + this.context.arc(xPos, yPos, this.Get('chart.ticksize') - 2, 0, 360 / (180 / Math.PI), false); + + this.context.closePath(); + + this.context.fill(); + this.context.stroke(); + + } else if ( tickmarks == 'square' + || tickmarks == 'filledsquare' + || (tickmarks == 'endsquare') + || (tickmarks == 'filledendsquare') ) { + + this.context.fillStyle = 'white'; + this.context.strokeStyle = this.context.strokeStyle; // FIXME Is this correct? + + this.context.beginPath(); + this.context.strokeRect(xPos - this.Get('chart.ticksize'), yPos - this.Get('chart.ticksize'), this.Get('chart.ticksize') * 2, this.Get('chart.ticksize') * 2); + + // Fillrect + if (tickmarks == 'filledsquare' || tickmarks == 'filledendsquare') { + this.context.fillStyle = isShadow ? this.Get('chart.shadow.color') : this.context.strokeStyle; + this.context.fillRect(xPos - this.Get('chart.ticksize'), yPos - this.Get('chart.ticksize'), this.Get('chart.ticksize') * 2, this.Get('chart.ticksize') * 2); + + } else if (tickmarks == 'square' || tickmarks == 'endsquare') { + this.context.fillStyle = isShadow ? this.Get('chart.shadow.color') : 'white'; + this.context.fillRect((xPos - this.Get('chart.ticksize')) + 1, (yPos - this.Get('chart.ticksize')) + 1, (this.Get('chart.ticksize') * 2) - 2, (this.Get('chart.ticksize') * 2) - 2); + } + + this.context.stroke(); + this.context.fill(); + + /** + * FILLED arrowhead + */ + } else if (tickmarks == 'filledarrow') { + + var x = Math.abs(xPos - prevX); + var y = Math.abs(yPos - prevY); + + if (yPos < prevY) { + var a = Math.atan(x / y) + 1.57; + } else { + var a = Math.atan(y / x) + 3.14; + } + + this.context.beginPath(); + this.context.moveTo(xPos, yPos); + this.context.arc(xPos, yPos, 7, a - 0.5, a + 0.5, false); + this.context.closePath(); + + this.context.stroke(); + this.context.fill(); + + /** + * Arrow head, NOT filled + */ + } else if (tickmarks == 'arrow') { + + var x = Math.abs(xPos - prevX); + var y = Math.abs(yPos - prevY); + + if (yPos < prevY) { + var a = Math.atan(x / y) + 1.57; + } else { + var a = Math.atan(y / x) + 3.14; + } + + this.context.beginPath(); + this.context.moveTo(xPos, yPos); + this.context.arc(xPos, yPos, 7, a - 0.5 - (document.all ? 0.1 : 0.01), a - 0.4, false); + + this.context.moveTo(xPos, yPos); + this.context.arc(xPos, yPos, 7, a + 0.5 + (document.all ? 0.1 : 0.01), a + 0.5, true); + + + this.context.stroke(); + + /** + * Custom tick drawing function + */ + } else if (typeof(tickmarks) == 'function') { + tickmarks(this, lineData, lineData[index], index, xPos, yPos, color, prevX, prevY); + } + } + + + /** + * Draws a filled range if necessary + */ + RGraph.Line.prototype.DrawRange = function () + { + /** + * Fill the range if necessary + */ + if (this.Get('chart.filled.range') && this.Get('chart.filled')) { + this.context.beginPath(); + this.context.fillStyle = this.Get('chart.fillstyle'); + this.context.strokeStyle = this.Get('chart.fillstyle'); + this.context.lineWidth = 1; + var len = (this.coords.length / 2); + + for (var i=0; i<len; ++i) { + if (i == 0) { + this.context.moveTo(this.coords[i][0], this.coords[i][1]) + } else { + this.context.lineTo(this.coords[i][0], this.coords[i][1]) + } + } + + for (var i=this.coords.length - 1; i>=len; --i) { + this.context.lineTo(this.coords[i][0], this.coords[i][1]) + } + this.context.stroke(); + this.context.fill(); + } + } + + + /** + * Redraws the line with the correct line width etc + * + * @param array coords The coordinates of the line + */ + RGraph.Line.prototype.RedrawLine = function (coords, color, linewidth) + { + if (this.Get('chart.noredraw')) { + return; + } + + this.context.strokeStyle = (typeof(color) == 'object' && color ? color[0] : color); + this.context.lineWidth = linewidth; + + if (!this.Get('chart.line.visible')) { + this.context.strokeStyle = 'rgba(0,0,0,0)'; + } + + if (this.Get('chart.curvy')) { + this.DrawCurvyLine(coords, !this.Get('chart.line.visible') ? 'rgba(0,0,0,0)' : color, linewidth); + return + } + + this.context.beginPath(); + + var len = coords.length; + var width = this.canvas.width + var height = this.canvas.height; + var penUp = false; + + for (var i=0; i<len; ++i) { + + var xPos = coords[i][0]; + var yPos = coords[i][1]; + + if (i > 0) { + var prevX = coords[i - 1][0]; + var prevY = coords[i - 1][1]; + } + + + if (( + (i == 0 && coords[i]) + || (yPos < this.gutterTop) + || (prevY < this.gutterTop) + || (yPos > (height - this.gutterBottom)) + || (i > 0 && prevX > (width - this.gutterRight)) + || (i > 0 && prevY > (height - this.gutterBottom)) + || prevY == null + || penUp == true + ) && (!this.Get('chart.outofbounds') || yPos == null || prevY == null) ) { + + if (RGraph.isIE8() && yPos == null) { + // ...? + } else { + this.context.moveTo(coords[i][0], coords[i][1]); + } + + penUp = false; + + } else { + + if (this.Get('chart.stepped') && i > 0) { + this.context.lineTo(coords[i][0], coords[i - 1][1]); + } + + // Don't draw the last bit of a stepped chart. Now DO + //if (!this.Get('chart.stepped') || i < (coords.length - 1)) { + this.context.lineTo(coords[i][0], coords[i][1]); + //} + penUp = false; + } + } + + /** + * If two colors are specified instead of one, go over the up bits + */ + if (this.Get('chart.colors.alternate') && typeof(color) == 'object' && color[0] && color[1]) { + for (var i=1; i<len; ++i) { + + var prevX = coords[i - 1][0]; + var prevY = coords[i - 1][1]; + + this.context.beginPath(); + this.context.strokeStyle = color[coords[i][1] < prevY ? 0 : 1]; + this.context.lineWidth = this.Get('chart.linewidth'); + this.context.moveTo(prevX, prevY); + this.context.lineTo(coords[i][0], coords[i][1]); + this.context.stroke(); + } + } + } + + + /** + * This function is used by MSIE only to manually draw the shadow + * + * @param array coords The coords for the line + */ + RGraph.Line.prototype.DrawIEShadow = function (coords, color) + { + var offsetx = this.Get('chart.shadow.offsetx'); + var offsety = this.Get('chart.shadow.offsety'); + + this.context.lineWidth = this.Get('chart.linewidth'); + this.context.strokeStyle = color; + this.context.beginPath(); + + for (var i=0; i<coords.length; ++i) { + if (i == 0) { + this.context.moveTo(coords[i][0] + offsetx, coords[i][1] + offsety); + } else { + this.context.lineTo(coords[i][0] + offsetx, coords[i][1] + offsety); + } + } + + this.context.stroke(); + } + + + /** + * Draw the backdrop + */ + RGraph.Line.prototype.DrawBackdrop = function (coords, color) + { + var size = this.Get('chart.backdrop.size'); + this.context.lineWidth = size; + this.context.globalAlpha = this.Get('chart.backdrop.alpha'); + this.context.strokeStyle = color; + this.context.lineJoin = 'miter'; + + this.context.beginPath(); + this.context.moveTo(coords[0][0], coords[0][1]); + for (var j=1; j<coords.length; ++j) { + this.context.lineTo(coords[j][0], coords[j][1]); + } + + this.context.stroke(); + + // Reset the alpha value + this.context.globalAlpha = 1; + this.context.lineJoin = 'round'; + RGraph.NoShadow(this); + } + + + /** + * Returns the linewidth + */ + RGraph.Line.prototype.GetLineWidth = function (i) + { + var linewidth = this.Get('chart.linewidth'); + + if (typeof(linewidth) == 'number') { + return linewidth; + + } else if (typeof(linewidth) == 'object') { + if (linewidth[i]) { + return linewidth[i]; + } else { + return linewidth[0]; + } + + alert('[LINE] Error! chart.linewidth should be a single number or an array of one or more numbers'); + } + } + + + /** + * The getPoint() method - used to get the point the mouse is currently over, if any + * + * @param object e The event object + * @param object OPTIONAL You can pass in the bar object instead of the + * function getting it from the canvas + */ + RGraph.Line.prototype.getPoint = function (e) + { + var canvas = e.target; + var obj = canvas.__object__; + var context = obj.context; + var mouseXY = RGraph.getMouseXY(e); + var mouseX = mouseXY[0]; + var mouseY = mouseXY[1]; + + // This facilitates you being able to pass in the bar object as a parameter instead of + // the function getting it from the object + if (arguments[1]) { + obj = arguments[1]; + } + + for (var i=0; i<obj.coords.length; ++i) { + + var xCoord = obj.coords[i][0]; + var yCoord = obj.coords[i][1]; + + // Do this if the hotspot is triggered by the X coord AND the Y coord + if ( obj.Get('chart.tooltips.hotspot.xonly') == false + && mouseX <= (xCoord + 5) + && mouseX >= (xCoord - 5) + && mouseY <= (yCoord + 5) + && mouseY >= (yCoord - 5) + ) { + + return [obj, xCoord, yCoord, i]; + + } else if ( obj.Get('chart.tooltips.hotspot.xonly') == true + && mouseX <= (xCoord + 5) + && mouseX >= (xCoord - 5)) { + + return [obj, xCoord, yCoord, i]; + } + } + } + + + /** + * Draws the above line labels + */ + RGraph.Line.prototype.DrawAboveLabels = function () + { + var context = this.context; + var size = this.Get('chart.labels.above.size'); + var font = this.Get('chart.text.font'); + var units_pre = this.Get('chart.units.pre'); + var units_post = this.Get('chart.units.post'); + + context.beginPath(); + + // Don't need to check that chart.labels.above is enabled here, it's been done already + for (var i=0; i<this.coords.length; ++i) { + var coords = this.coords[i]; + + RGraph.Text(context, font, size, coords[0], coords[1] - 5 - size, RGraph.number_format(this, this.data_arr[i], units_pre, units_post), 'center', 'center', true, null, 'rgba(255, 255, 255, 0.7)'); + } + + context.fill(); + } + + + /** + * Draw a curvy line. This isn't 100% accurate but may be more to your tastes + */ + RGraph.Line.prototype.DrawCurvyLine = function (coords, color, linewidth) + { + var co = this.context; + + // Now calculate the halfway point + co.beginPath(); + + co.strokeStyle = color; + co.lineWidth = linewidth; + + for (var i=0; i<coords.length; ++i) { + if (coords[i + 1]) { + + var factor = this.Get('chart.curvy.factor'); + var coordX = coords[i][0]; + var coordY = coords[i][1]; + var nextX = coords[i + 1][0]; + var nextY = coords[i + 1][1]; + var offsetX = (coords[i + 1][0] - coords[i][0]) * factor; + var offsetY = (coords[i + 1][1] - coords[i][1]) * factor; + + if (i == 0) { + co.moveTo(coordX, coordY); + co.lineTo(nextX - offsetX, nextY - offsetY); + + } else if (nextY == null) { + co.lineTo(coordX, coordY); + + } else if (coordY == null) { + co.moveTo(nextX, nextY); + + + } else { + + co.quadraticCurveTo(coordX, coordY, coordX + offsetX, coordY + offsetY); + + if (nextY) { + co.lineTo(nextX - offsetX, nextY - offsetY); + } else { + co.lineTo(coordX, coordY); + } + } + + // Draw the last bit + } else { + co.lineTo(coords[i][0], coords[i][1]); + } + } + + co.stroke(); + }
\ No newline at end of file diff --git a/schall/static/RGraph/libraries/RGraph.meter.js b/schall/static/RGraph/libraries/RGraph.meter.js new file mode 100644 index 0000000..a246cbf --- /dev/null +++ b/schall/static/RGraph/libraries/RGraph.meter.js @@ -0,0 +1,573 @@ + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + + if (typeof(RGraph) == 'undefined') RGraph = {}; + + /** + * The bar chart constructor + * + * @param string canvas The canvas ID + * @param min integer The minimum value + * @param max integer The maximum value + * @param value integer The indicated value + */ + RGraph.Meter = function (id, min, max, value) + { + // Get the canvas and context objects + this.id = id; + this.canvas = document.getElementById(id); + this.context = this.canvas.getContext ? this.canvas.getContext("2d") : null; + this.canvas.__object__ = this; + this.type = 'meter'; + this.min = min; + this.max = max; + this.value = value; + this.centerx = null; + this.centery = null; + this.radius = null; + this.isRGraph = true; + this.currentValue = null; + + + /** + * Compatibility with older browsers + */ + RGraph.OldBrowserCompat(this.context); + + + // Various config type stuff + this.properties = { + 'chart.gutter.left': 25, + 'chart.gutter.right': 25, + 'chart.gutter.top': 25, + 'chart.gutter.bottom': 25, + 'chart.linewidth': 1, + 'chart.linewidth.segments': 1, + 'chart.strokestyle': null, + 'chart.border': true, + 'chart.border.color': 'black', + 'chart.text.font': 'Verdana', + 'chart.text.size': 10, + 'chart.text.color': 'black', + 'chart.value.label': false, + 'chart.value.text.decimals': 0, + 'chart.value.text.units.pre': '', + 'chart.value.text.units.post': '', + 'chart.title': '', + 'chart.title.background': null, + 'chart.title.hpos': null, + 'chart.title.vpos': null, + 'chart.title.color': 'black', + 'chart.title.bold': true, + 'chart.title.font': null, + 'chart.green.start': ((this.max - this.min) * 0.35) + this.min, + 'chart.green.end': this.max, + 'chart.green.color': '#207A20', + 'chart.yellow.start': ((this.max - this.min) * 0.1) + this.min, + 'chart.yellow.end': ((this.max - this.min) * 0.35) + this.min, + 'chart.yellow.color': '#D0AC41', + 'chart.red.start': this.min, + 'chart.red.end': ((this.max - this.min) * 0.1) + this.min, + 'chart.red.color': '#9E1E1E', + 'chart.units.pre': '', + 'chart.units.post': '', + 'chart.contextmenu': null, + 'chart.zoom.factor': 1.5, + 'chart.zoom.fade.in': true, + 'chart.zoom.fade.out': true, + 'chart.zoom.hdir': 'right', + 'chart.zoom.vdir': 'down', + 'chart.zoom.frames': 25, + 'chart.zoom.delay': 16.666, + 'chart.zoom.shadow': true, + 'chart.zoom.mode': 'canvas', + 'chart.zoom.thumbnail.width': 75, + 'chart.zoom.thumbnail.height': 75, + 'chart.zoom.background': true, + 'chart.zoom.action': 'zoom', + 'chart.annotatable': false, + 'chart.annotate.color': 'black', + 'chart.shadow': false, + 'chart.shadow.color': 'rgba(0,0,0,0.5)', + 'chart.shadow.blur': 3, + 'chart.shadow.offsetx': 3, + 'chart.shadow.offsety': 3, + 'chart.resizable': false, + 'chart.resize.handle.adjust': [0,0], + 'chart.resize.handle.background': null, + 'chart.tickmarks.small.num': 100, + 'chart.tickmarks.big.num': 10, + 'chart.tickmarks.small.color': '#bbb', + 'chart.tickmarks.big.color': 'black', + 'chart.scale.decimals': 0, + 'chart.radius': null, + 'chart.centerx': null, + 'chart.centery': null, + 'chart.labels': true, + 'chart.segment.radius.start': null, + 'chart.needle.radius': null, + 'chart.needle.tail': false + } + + + // Check for support + if (!this.canvas) { + alert('[METER] No canvas support'); + return; + } + } + + + /** + * A setter + * + * @param name string The name of the property to set + * @param value mixed The value of the property + */ + RGraph.Meter.prototype.Set = function (name, value) + { + if (name == 'chart.value') { + this.value = value; + return; + } + + this.properties[name.toLowerCase()] = value; + } + + + /** + * A getter + * + * @param name string The name of the property to get + */ + RGraph.Meter.prototype.Get = function (name) + { + if (name == 'chart.value') { + return this.value; + } + + return this.properties[name]; + } + + + /** + * The function you call to draw the bar chart + */ + RGraph.Meter.prototype.Draw = function () + { + /** + * Fire the onbeforedraw event + */ + RGraph.FireCustomEvent(this, 'onbeforedraw'); + + /** + * Constrain the value to be within the min and max + */ + if (this.value > this.max) this.value = this.max; + if (this.value < this.min) this.value = this.min; + + /** + * Set the current value + */ + this.currentValue = this.value; + + /** + * This is new in May 2011 and facilitates indiviual gutter settings, + * eg chart.gutter.left + */ + this.gutterLeft = this.Get('chart.gutter.left'); + this.gutterRight = this.Get('chart.gutter.right'); + this.gutterTop = this.Get('chart.gutter.top'); + this.gutterBottom = this.Get('chart.gutter.bottom'); + + this.centerx = this.canvas.width / 2; + this.centery = this.canvas.height - this.gutterBottom; + this.radius = Math.min( + this.canvas.width - this.gutterLeft - this.gutterRight, + this.canvas.height - this.gutterTop - this.gutterBottom + ); + + /** + * Custom centerx, centery and radius + */ + if (typeof(this.Get('chart.centerx')) == 'number') this.centerx = this.Get('chart.centerx'); + if (typeof(this.Get('chart.centery')) == 'number') this.centery = this.Get('chart.centery'); + if (typeof(this.Get('chart.radius')) == 'number') this.radius = this.Get('chart.radius'); + + this.DrawBackground(); + this.DrawNeedle(); + this.DrawLabels(); + this.DrawReadout(); + + /** + * Draw the title + */ + RGraph.DrawTitle(this.canvas, this.Get('chart.title'), this.gutterTop, null, this.Get('chart.title.size') ? this.Get('chart.title.size') : this.Get('chart.text.size') + 2); + + /** + * Setup the context menu if required + */ + if (this.Get('chart.contextmenu')) { + RGraph.ShowContext(this); + } + + /** + * If the canvas is annotatable, do install the event handlers + */ + if (this.Get('chart.annotatable')) { + RGraph.Annotate(this); + } + + /** + * This bit shows the mini zoom window if requested + */ + if (this.Get('chart.zoom.mode') == 'thumbnail' || this.Get('chart.zoom.mode') == 'area') { + RGraph.ShowZoomWindow(this); + } + + + /** + * This function enables resizing + */ + if (this.Get('chart.resizable')) { + RGraph.AllowResizing(this); + } + + + /** + * For MSIE only, to cover the spurious lower ends of the circle + */ + if (RGraph.isIE8()) { + // Cover the left tail + this.context.beginPath(); + this.context.moveTo(this.gutterLeft, this.canvas.height - this.gutterBottom); + this.context.fillStyle = 'white'; + this.context.fillRect(this.centerx - this.radius - 5, RGraph.GetHeight(this) - this.gutterBottom + 1, 10, this.gutterBottom); + this.context.fill(); + + // Cover the right tail + this.context.beginPath(); + this.context.moveTo(RGraph.GetWidth(this) - this.gutterRight, RGraph.GetHeight(this) - this.gutterBottom); + this.context.fillStyle = 'white'; + this.context.fillRect(this.centerx + this.radius - 5, RGraph.GetHeight(this) - this.gutterBottom + 1, 10, this.gutterBottom); + this.context.fill(); + } + + /** + * Fire the RGraph ondraw event + */ + RGraph.FireCustomEvent(this, 'ondraw'); + } + + + /** + * Draws the background of the chart + */ + RGraph.Meter.prototype.DrawBackground = function () + { + // Draw the shadow + if (this.Get('chart.shadow')) { + this.context.beginPath(); + this.context.fillStyle = 'white'; + this.context.shadowColor = this.Get('chart.shadow.color'); + this.context.shadowBlur = this.Get('chart.shadow.blur'); + this.context.shadowOffsetX = this.Get('chart.shadow.offsetx'); + this.context.shadowOffsetY = this.Get('chart.shadow.offsety'); + + this.context.arc(this.centerx, this.centery, this.radius, 3.14, 6.28, false); + //this.context.arc(this.centerx, this.centery, , 0, 6.28, false); + this.context.fill(); + + + this.context.beginPath(); + var r = (this.radius * 0.06) > 40 ? 40 : (this.radius * 0.06); + this.context.arc(this.centerx, this.centery, r, 0, 6.28, 0); + this.context.fill(); + + RGraph.NoShadow(this); + } + + // First, draw the grey tickmarks + if (this.Get('chart.tickmarks.small.num')) { + for (var i=0; i<3.14; i+=(3.14 / this.Get('chart.tickmarks.small.num'))) { + this.context.beginPath(); + this.context.strokeStyle = this.Get('chart.tickmarks.small.color'); + this.context.arc(this.centerx, this.centery, this.radius, 3.14 + i, 3.1415 + i, 0); + this.context.arc(this.centerx, this.centery, this.radius - 5, 3.14 + i, 3.1415 + i, 0); + this.context.stroke(); + } + + // Draw the white semi-circle that makes the tickmarks + this.context.beginPath(); + this.context.fillStyle = 'white' + this.context.arc(this.centerx, this.centery, this.radius - 4, 3.14, 6.28, false); + this.context.closePath(); + this.context.fill(); + } + + + + // Second, draw the darker tickmarks. First run draws them in white to get rid of the existing tickmark, + // then the second run draws them in the requested color + if (this.Get('chart.tickmarks.big.num')) { + var colors = ['white','white',this.Get('chart.tickmarks.big.color')]; + for (var j=0; j<colors.length; ++j) { + for (var i=0; i<3.14; i+=(3.1415927 / this.Get('chart.tickmarks.big.num'))) { + this.context.beginPath(); + this.context.strokeStyle = colors[j]; + this.context.arc(this.centerx, this.centery, this.radius, 3.14 + i, 3.1415 + i, 0); + this.context.arc(this.centerx, this.centery, this.radius - 5, 3.14 + i, 3.1415 + i, 0); + //this.context.lineTo(this.centerx, this.centery); + this.context.stroke(); + } + } + } + + // Draw the white circle that makes the tickmarks + this.context.beginPath(); + this.context.fillStyle = 'white'; + this.context.arc(this.centerx, this.centery, this.radius - 7, 3.1415927, 6.28, false); + this.context.closePath(); + this.context.fill(); + + /** + * Color ranges - either green/yellow/red or an arbitrary number of ranges + */ + var ranges = this.Get('chart.colors.ranges'); + + if (RGraph.is_array(this.Get('chart.colors.ranges'))) { + + var ranges = this.Get('chart.colors.ranges'); + + for (var i=0; i<ranges.length; ++i) { + + this.context.strokeStyle = this.Get('chart.strokestyle') ? this.Get('chart.strokestyle') : ranges[i][2]; + this.context.fillStyle = ranges[i][2]; + this.context.lineWidth = this.Get('chart.linewidth.segments'); + + this.context.beginPath(); + this.context.moveTo(this.centerx,this.centery); + this.context.arc(this.centerx, + this.centery, + this.radius * 0.85, + (((ranges[i][0] - this.min) / (this.max - this.min)) * 3.1415927) + 3.1415927, + (((ranges[i][1] - this.min) / (this.max - this.min)) * 3.1415927) + 3.1415927, + false); + this.context.lineTo(this.centerx, this.centery); + this.context.closePath(); + this.context.stroke(); + this.context.fill(); + } + + // Stops the last line from being changed to a big linewidth. So it seems. + this.context.beginPath(); + + } else { + // Draw the green area + this.context.strokeStyle = this.Get('chart.strokestyle') ? this.Get('chart.strokestyle') : this.Get('chart.green.color'); + this.context.fillStyle = this.Get('chart.green.color'); + this.context.lineWidth = this.Get('chart.linewidth.segments'); + this.context.beginPath(); + this.context.arc(this.centerx,this.centery,this.radius * 0.85,(((this.Get('chart.green.start') - this.min) / (this.max - this.min)) * 3.1415927) + 3.1415927,(((this.Get('chart.green.end') - this.min) / (this.max - this.min)) * 3.1415927) + 3.1415927,false); + + if (typeof(this.Get('chart.segment.radius.start')) && this.Get('chart.segment.radius.start')) { + this.context.arc(this.centerx,this.centery,this.Get('chart.segment.radius.start'),(((this.Get('chart.green.end') - this.min) / (this.max - this.min)) * 3.1415927) + 3.1415927,(((this.Get('chart.green.start') - this.min) / (this.max - this.min)) * 3.1415927) + 3.1415927,true); + } else { + this.context.lineTo(this.centerx, this.centery); + } + + this.context.closePath(); + this.context.stroke(); + this.context.fill(); + + // Draw the yellow area + this.context.strokeStyle = this.Get('chart.strokestyle') ? this.Get('chart.strokestyle') : this.Get('chart.yellow.color'); + this.context.fillStyle = this.Get('chart.yellow.color'); + this.context.lineWidth = this.Get('chart.linewidth.segments'); + this.context.beginPath(); + this.context.arc(this.centerx,this.centery,this.radius * 0.85,(((this.Get('chart.yellow.start') - this.min) / (this.max - this.min)) * 3.1415927) + 3.1415927,(((this.Get('chart.yellow.end') - this.min) / (this.max - this.min)) * 3.1415927) + 3.1415927,false); + + if (typeof(this.Get('chart.segment.radius.start')) && this.Get('chart.segment.radius.start')) { + this.context.arc(this.centerx,this.centery,this.Get('chart.segment.radius.start'),(((this.Get('chart.yellow.end') - this.min) / (this.max - this.min)) * 3.1415927) + 3.1415927, (((this.Get('chart.yellow.start') - this.min) / (this.max - this.min)) * 3.1415927) + 3.1415927,true); + } else { + this.context.lineTo(this.centerx, this.centery); + } + + this.context.closePath(); + this.context.stroke(); + this.context.fill(); + + // Draw the red area + this.context.strokeStyle = this.Get('chart.strokestyle') ? this.Get('chart.strokestyle') : this.Get('chart.red.color'); + this.context.fillStyle = this.Get('chart.red.color'); + this.context.lineWidth = this.Get('chart.linewidth.segments'); + this.context.beginPath(); + this.context.arc(this.centerx,this.centery,this.radius * 0.85,(((this.Get('chart.red.start') - this.min) / (this.max - this.min)) * 3.1415927) + 3.1415927,(((this.Get('chart.red.end') - this.min) / (this.max - this.min)) * 3.1415927) + 3.1415927,false); + + if (typeof(this.Get('chart.segment.radius.start')) && this.Get('chart.segment.radius.start')) { + this.context.arc(this.centerx,this.centery, this.Get('chart.segment.radius.start'),(((this.Get('chart.red.end') - this.min) / (this.max - this.min)) * 3.1415927) + 3.1415927,(((this.Get('chart.red.start') - this.min) / (this.max - this.min)) * 3.1415927) + 3.1415927,true); + } else { + this.context.lineTo(this.centerx, this.centery); + } + + this.context.closePath(); + this.context.stroke(); + this.context.fill(); + + // Revert the linewidth + this.context.lineWidth = 1; + } + + // Draw the outline + if (this.Get('chart.border')) { + this.context.strokeStyle = this.Get('chart.border.color'); + this.context.lineWidth = this.Get('chart.linewidth'); + + this.context.beginPath(); + this.context.moveTo(this.centerx, this.centery); + this.context.arc(this.centerx, this.centery, this.radius, 3.1415927, 6.2831854, false); + this.context.closePath(); + } + + this.context.stroke(); + + // Reset the linewidth back to 1 + this.context.lineWidth = 1; + } + + + /** + * Draws the pointer + */ + RGraph.Meter.prototype.DrawNeedle = function () + { + // Allow customising the needle radius + var needleRadius = typeof(this.Get('chart.needle.radius')) == 'number' ? this.Get('chart.needle.radius') : this.radius * 0.7; + + // First draw the circle at the bottom + this.context.fillStyle = 'black'; + this.context.lineWidth = this.radius >= 200 ? 7 : 3; + this.context.lineCap = 'round'; + + // Now, draw the arm of the needle + this.context.beginPath(); + this.context.strokeStyle = 'black'; + if (typeof(this.Get('chart.needle.linewidth')) == 'number') this.context.lineWidth = this.Get('chart.needle.linewidth'); + var a = (((this.value - this.min) / (this.max - this.min)) * 3.14) + 3.14; + this.context.arc(this.centerx, this.centery, needleRadius, a, a + 0.001, false); + this.context.lineTo(this.centerx, this.centery); + this.context.stroke(); + + // Draw the triangular needle head + this.context.beginPath(); + this.context.lineWidth = 1; + //this.context.moveTo(this.centerx, this.centery); + this.context.arc(this.centerx, this.centery, needleRadius + 15, a, a + 0.001, 0); + this.context.arc(this.centerx, this.centery, needleRadius - 15, a + 0.087, a + 0.087999, 0); + this.context.arc(this.centerx, this.centery, needleRadius - 15, a - 0.087, a - 0.087999, 1); + this.context.fill(); + + // Draw the tail if requested + if (this.Get('chart.needle.tail')) { + this.context.beginPath(); + this.context.strokeStyle = 'black'; + if (typeof(this.Get('chart.needle.linewidth')) == 'number') this.context.lineWidth = this.Get('chart.needle.linewidth'); + var a = (((this.value - this.min) / (this.max - this.min)) * 3.14) + 6.28; + this.context.arc(this.centerx, this.centery, 25, a, a + 0.001, false); + this.context.lineTo(this.centerx, this.centery); + this.context.stroke(); + } + + // Draw the center circle + var r = (this.radius * 0.06) > 40 ? 40 : (this.radius * 0.06); + + this.context.beginPath(); + this.context.arc(this.centerx, this.centery, r, 0, 6.28, 0); + this.context.fill(); + + // Draw the centre bit of the circle + this.context.fillStyle = 'white'; + this.context.beginPath(); + this.context.arc(this.centerx, this.centery, r - 2, 0, 6.28, 0); + this.context.fill(); + } + + + /** + * Draws the labels + */ + RGraph.Meter.prototype.DrawLabels = function () + { + if (!this.Get('chart.labels')) { + return; + } + + var context = this.context; + var radius = this.radius; + var text_size = this.Get('chart.text.size'); + var text_font = this.Get('chart.text.font'); + var units_post = this.Get('chart.units.post'); + var units_pre = this.Get('chart.units.pre'); + var centerx = this.centerx; + var centery = this.centery; + var min = this.min; + var max = this.max; + var decimals = this.Get('chart.scale.decimals'); + + context.fillStyle = this.Get('chart.text.color'); + context.lineWidth = 1; + + context.beginPath(); + + + RGraph.Text(context,text_font,text_size,centerx - radius + (0.075 * radius),centery - (this.Get('chart.border') ? 10 : -5),units_pre + (min).toFixed(decimals) + units_post,'center', 'left', false, 270); + RGraph.Text(context,text_font,text_size,centerx - (Math.cos(0.62819 / 2) * (radius - (0.075 * radius)) ),centery - (Math.sin(0.682819 / 2) * (radius - (0.1587 * radius)) ),units_pre + (((max - min) * (1/10)) + min).toFixed(decimals) + units_post,'center','center', false, 288); + RGraph.Text(context,text_font,text_size,centerx - (Math.cos(0.62819) * (radius - (0.07 * radius)) ),centery - (Math.sin(0.682819) * (radius - (0.15 * radius)) ),units_pre + (((max - min) * (2/10)) + min).toFixed(decimals) + units_post,'center','center', false, 306); + RGraph.Text(context, text_font, text_size,centerx - (Math.cos(0.95) * (radius - (0.085 * radius)) ),centery - (Math.sin(0.95) * (radius - (0.0785 * radius)) ),units_pre + (((max - min) * (3/10)) + min).toFixed(decimals) + units_post,'center', 'center', false, 320); + RGraph.Text(context, text_font, text_size,centerx - (Math.cos(1.2566) * (radius - (0.085 * radius)) ),centery - (Math.sin(1.2566) * (radius - (0.0785 * radius)) ),units_pre + (((max - min) * (4/10)) + min).toFixed(decimals) + units_post,'center', 'center', false, 342); + RGraph.Text(context,text_font,text_size,centerx - (Math.cos(1.57) * (radius - (0.075 * radius)) ),centery - (Math.sin(1.57) * (radius - (0.075 * radius)) ),units_pre + (((max - min) * (5/10)) + min).toFixed(decimals) + units_post,'center','center', false, 0); + RGraph.Text(context,text_font,text_size,centerx - (Math.cos(1.88495562) * (radius - (0.075 * radius)) ),centery - (Math.sin(1.88495562) * (radius - (0.075 * radius)) ),units_pre + (((max - min)* (6/10)) + min).toFixed(decimals) + units_post,'center','center', false, 18); + RGraph.Text(context,text_font,text_size,centerx - (Math.cos(2.1989) * (radius - (0.075 * radius)) ),centery - (Math.sin(2.1989) * (radius - (0.075 * radius)) ),units_pre + (((max - min)* (7/10)) + min).toFixed(decimals) + units_post,'center','center', false, 36); + RGraph.Text(context,text_font,text_size,centerx - (Math.cos(2.51327416) * (radius - (0.075 * radius)) ),centery - (Math.sin(2.51327416) * (radius - (0.075 * radius)) ), units_pre + (((max - min) * (8/10)) + min).toFixed(decimals) + units_post,'center','center', false, 54); + RGraph.Text(context,text_font,text_size,centerx - (Math.cos(2.82764832) * (radius - (0.075 * radius)) ),centery - (Math.sin(2.82764832) * (radius - (0.075 * radius)) ),units_pre + (((max - min) * (9/10)) + min).toFixed(decimals) + units_post,'center','center', false, 72); + RGraph.Text(context,text_font,text_size,centerx + radius - (0.075 * radius),centery - (!this.Get('chart.border') ? -5 : 10),units_pre + (max).toFixed(decimals) + units_post,'center', 'right', false, 90); + + context.fill(); + context.stroke(); + } + + + /** + * This function draws the text readout if specified + */ + RGraph.Meter.prototype.DrawReadout = function () + { + if (this.Get('chart.value.text')) { + this.context.beginPath(); + RGraph.Text(this.context, + this.Get('chart.text.font'), + this.Get('chart.text.size'), + this.centerx, + this.centery - this.Get('chart.text.size') - 15, + this.Get('chart.value.text.units.pre') + (this.value).toFixed(this.Get('chart.value.text.decimals')) + this.Get('chart.value.text.units.post'), + 'center', + 'center', + true, + null, + 'white'); + + this.context.stroke(); + this.context.fill(); + } + } diff --git a/schall/static/RGraph/libraries/RGraph.modaldialog.js b/schall/static/RGraph/libraries/RGraph.modaldialog.js new file mode 100644 index 0000000..2d4cc88 --- /dev/null +++ b/schall/static/RGraph/libraries/RGraph.modaldialog.js @@ -0,0 +1,244 @@ + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + + ModalDialog = {} + ModalDialog.dialog = null; + ModalDialog.background = null; + ModalDialog.offset = 50; + ModalDialog.events = []; + + /** + * Shows the dialog with the supplied DIV acting as the contents + * + * @param string id The ID of the DIV to use as the dialogs contents + * @param int width The width of the dialog + */ + ModalDialog.Show = function (id, width) + { + ModalDialog.id = id; + ModalDialog.width = width; + + ModalDialog.ShowBackground(); + ModalDialog.ShowDialog(); + + // Install the event handlers + window.onresize = ModalDialog.Resize; + + + // Call them initially + ModalDialog.Resize(); + + ModalDialog.FireCustomEvent('onmodaldialog'); + } + + + /** + * Shows the background semi-transparent darkened DIV + */ + ModalDialog.ShowBackground = function () + { + // Create the background if neccessary + ModalDialog.background = document.createElement('DIV'); + ModalDialog.background.className = 'ModalDialog_background'; + ModalDialog.background.style.position = 'fixed'; + ModalDialog.background.style.top = 0; + ModalDialog.background.style.left = 0; + ModalDialog.background.style.width = (screen.width + 100) + 'px'; + ModalDialog.background.style.height = (screen.height + 100) + 'px'; + ModalDialog.background.style.backgroundColor = 'rgb(204,204,204)'; + ModalDialog.background.style.opacity = 0; + ModalDialog.background.style.zIndex = 3276; + ModalDialog.background.style.filter = "Alpha(opacity=50)"; + + document.body.appendChild(ModalDialog.background); + + ModalDialog.background.style.visibility = 'visible'; + } + + + /** + * Shows the dialog itself + */ + ModalDialog.ShowDialog = function () + { + // Create the DIV if necessary + if (!ModalDialog.dialog) { + ModalDialog.dialog = document.createElement('DIV'); + + ModalDialog.dialog.id = 'ModalDialog_dialog'; + ModalDialog.dialog.className = 'ModalDialog_dialog'; + + var borderRadius = '15px'; + + ModalDialog.dialog.style.borderRadius = borderRadius; + ModalDialog.dialog.style.MozBorderRadius = borderRadius; + ModalDialog.dialog.style.WebkitBorderRadius = borderRadius; + + ModalDialog.dialog.style.boxShadow = '3px 3px 3px rgba(96,96,96,0.5)'; + ModalDialog.dialog.style.MozBoxShadow = '3px 3px 3px rgba(96,96,96,0.5)'; + ModalDialog.dialog.style.WebkitBoxShadow = 'rgba(96,96,96,0.5) 3px 3px 3px'; + + ModalDialog.dialog.style.position = 'fixed'; + ModalDialog.dialog.style.backgroundColor = 'white'; + ModalDialog.dialog.style.width = parseInt(ModalDialog.width) + 'px'; + ModalDialog.dialog.style.border = '2px solid #999'; + ModalDialog.dialog.style.zIndex = 32767; + ModalDialog.dialog.style.padding = '5px'; + ModalDialog.dialog.style.paddingTop = '25px'; + ModalDialog.dialog.style.opacity = 0; + + if (document.all) { + ModalDialog.dialog.style.zIndex = 32767; + } + + + + // Accomodate various browsers + if (navigator.userAgent.indexOf('Opera') != -1) { + ModalDialog.dialog.style.paddingTop = '25px'; + + } else if (navigator.userAgent.indexOf('MSIE') != -1) { + ModalDialog.dialog.style.paddingTop = '25px'; + + } else if (navigator.userAgent.indexOf('Safari') != -1) { + ModalDialog.dialog.style.paddingTop = '25px'; + } + + document.body.appendChild(ModalDialog.dialog); + + + // Now create the grey bar at the top of the dialog + var bar = document.createElement('DIV'); + bar.className = 'ModalDialog_topbar'; + bar.style.top = 0; + bar.style.left = 0; + bar.style.width = '100%';//(ModalDialog.dialog.offsetWidth - 4) + 'px'; + bar.style.height = '20px'; + bar.style.backgroundColor = '#bbb'; + bar.style.borderBottom = '2px solid #999'; + //bar.style.zIndex = 50000; + bar.style.position = 'absolute'; + var borderRadius = '11px'; + bar.style.WebkitBorderTopLeftRadius = borderRadius; + bar.style.WebkitBorderTopRightRadius = borderRadius; + bar.style.MozBorderRadiusTopleft = borderRadius; + bar.style.MozBorderRadiusTopright = borderRadius; + bar.style.borderTopRightRadius = borderRadius; + bar.style.borderTopLeftRadius = borderRadius; + ModalDialog.dialog.appendChild(bar); + + // Add the content div + var content = document.createElement('DIV'); + //content.style.paddingTop = '20px'; + content.style.width = '100%'; + content.style.height = '100%'; + ModalDialog.dialog.appendChild(content); + + content.innerHTML = document.getElementById(ModalDialog.id).innerHTML; + + // Now reposition the dialog in the center + ModalDialog.dialog.style.left = (document.body.offsetWidth / 2) - (ModalDialog.dialog.offsetWidth / 2) + 'px'; + ModalDialog.dialog.style.top = '30%'; + } + + // Show the dialog + ModalDialog.dialog.style.visibility = 'visible'; + + // A simple fade-in effect + setTimeout('ModalDialog.dialog.style.opacity = 0.2', 50); + setTimeout('ModalDialog.dialog.style.opacity = 0.4', 100); + setTimeout('ModalDialog.dialog.style.opacity = 0.6', 150); + setTimeout('ModalDialog.dialog.style.opacity = 0.8', 200); + setTimeout('ModalDialog.dialog.style.opacity = 1', 250); + + setTimeout('ModalDialog.background.style.opacity = 0.1', 50); + setTimeout('ModalDialog.background.style.opacity = 0.2', 100); + setTimeout('ModalDialog.background.style.opacity = 0.3', 150); + setTimeout('ModalDialog.background.style.opacity = 0.4', 200); + setTimeout('ModalDialog.background.style.opacity = 0.5', 250); + } + + + /** + * Hides everything + */ + ModalDialog.Close = function () + { + if (ModalDialog.dialog) { + ModalDialog.dialog.style.visibility = 'hidden'; + ModalDialog.dialog.style.opacity = 0; + } + + if (ModalDialog.background) { + ModalDialog.background.style.visibility = 'hidden'; + ModalDialog.background.style.opacity = 0; + } + } + + // An alias + ModalDialog.Hide = ModalDialog.Close + + + /** + * Accommodate the window being resized + */ + ModalDialog.Resize = function () + { + if (ModalDialog.dialog) { + ModalDialog.dialog.style.left = (document.body.offsetWidth / 2) - (ModalDialog.dialog.offsetWidth / 2) + 'px'; + } + + ModalDialog.background.style.width = '2500px'; + ModalDialog.background.style.height = '2500px'; + } + + + /** + * Returns the page height + * + * @return int The page height + */ + ModalDialog.AddCustomEventListener = function (name, func) + { + if (typeof(ModalDialog.events) == 'undefined') { + ModalDialog.events = []; + } + + ModalDialog.events.push([name, func]); + } + + + /** + * Used to fire the ModalDialog custom event + * + * @param object obj The graph object that fires the event + * @param string event The name of the event to fire + */ + ModalDialog.FireCustomEvent = function (name) + { + for (var i=0; i<ModalDialog.events.length; ++i) { + if (typeof(ModalDialog.events[i][0]) == 'string' && ModalDialog.events[i][0] == name && typeof(ModalDialog.events[i][1]) == 'function') { + ModalDialog.events[i][1](); + } + } + } + + + /** + * Returns true if the browser is IE8 + */ + ModalDialog.isIE8 = function () + { + return document.all && (navigatot.userAgent.indexOf('MSIE 8') > 0); + }
\ No newline at end of file diff --git a/schall/static/RGraph/libraries/RGraph.odo.js b/schall/static/RGraph/libraries/RGraph.odo.js new file mode 100644 index 0000000..2da7fcd --- /dev/null +++ b/schall/static/RGraph/libraries/RGraph.odo.js @@ -0,0 +1,815 @@ + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + + if (typeof(RGraph) == 'undefined') RGraph = {}; + + /** + * The odometer constructor. Pass it the ID of the canvas tag, the start value of the odo, + * the end value, and the value that the pointer should point to. + * + * @param string id The ID of the canvas tag + * @param int start The start value of the Odo + * @param int end The end value of the odo + * @param int value The indicated value (what the needle points to) + */ + RGraph.Odometer = function (id, start, end, value) + { + this.id = id + this.canvas = document.getElementById(id); + this.context = this.canvas.getContext('2d'); + this.canvas.__object__ = this; + this.type = 'odo'; + this.isRGraph = true; + this.start = start; + this.end = end; + this.value = value; + this.currentValue = null; + + + /** + * Compatibility with older browsers + */ + RGraph.OldBrowserCompat(this.context); + + + this.properties = { + 'chart.radius': null, + 'chart.value.text': false, + 'chart.value.text.decimals': 0, + 'chart.needle.color': 'black', + 'chart.needle.width': 2, + 'chart.needle.head': true, + 'chart.needle.tail': true, + 'chart.needle.type': 'pointer', + 'chart.needle.extra': [], + 'chart.needle.triangle.border': '#aaa', + 'chart.text.size': 10, + 'chart.text.color': 'black', + 'chart.text.font': 'Verdana', + 'chart.green.max': end * 0.75, + 'chart.red.min': end * 0.9, + 'chart.green.color': 'green', + 'chart.yellow.color': 'yellow', + 'chart.red.color': 'red', + 'chart.green.solid': false, + 'chart.yellow.solid': false, + 'chart.red.solid': false, + 'chart.label.area': 35, + 'chart.gutter.left': 25, + 'chart.gutter.right': 25, + 'chart.gutter.top': 25, + 'chart.gutter.bottom': 25, + 'chart.title': '', + 'chart.title.background': null, + 'chart.title.hpos': null, + 'chart.title.vpos': null, + 'chart.title.font': null, + 'chart.title.bold': true, + 'chart.contextmenu': null, + 'chart.linewidth': 1, + 'chart.shadow.inner': false, + 'chart.shadow.inner.color': 'black', + 'chart.shadow.inner.offsetx': 3, + 'chart.shadow.inner.offsety': 3, + 'chart.shadow.inner.blur': 6, + 'chart.shadow.outer': false, + 'chart.shadow.outer.color': '#666', + 'chart.shadow.outer.offsetx': 0, + 'chart.shadow.outer.offsety': 0, + 'chart.shadow.outer.blur': 15, + 'chart.annotatable': false, + 'chart.annotate.color': 'black', + 'chart.scale.decimals': 0, + 'chart.zoom.factor': 1.5, + 'chart.zoom.fade.in': true, + 'chart.zoom.fade.out': true, + 'chart.zoom.hdir': 'right', + 'chart.zoom.vdir': 'down', + 'chart.zoom.frames': 25, + 'chart.zoom.delay': 16.666, + 'chart.zoom.shadow': true, + 'chart.zoom.mode': 'canvas', + 'chart.zoom.thumbnail.width': 75, + 'chart.zoom.thumbnail.height': 75, + 'chart.zoom.background': true, + 'chart.zoom.action': 'zoom', + 'chart.resizable': false, + 'chart.resize.handle.adjust': [0,0], + 'chart.resize.handle.background': null, + 'chart.units.pre': '', + 'chart.units.post': '', + 'chart.border': false, + 'chart.border.color1': '#BEBCB0', + 'chart.border.color2': '#F0EFEA', + 'chart.border.color3': '#BEBCB0', + 'chart.tickmarks.highlighted': false, + 'chart.zerostart': false, + 'chart.labels': null, + 'chart.units.pre': '', + 'chart.units.post': '', + 'chart.value.units.pre': '', + 'chart.value.units.post': '', + 'chart.key': [], + 'chart.key.background': 'white', + 'chart.key.position': 'graph', + 'chart.key.shadow': false, + 'chart.key.shadow.color': '#666', + 'chart.key.shadow.blur': 3, + 'chart.key.shadow.offsetx': 2, + 'chart.key.shadow.offsety': 2, + 'chart.key.position.gutter.boxed': true, + 'chart.key.position.x': null, + 'chart.key.position.y': null, + 'chart.key.halign': 'right', + 'chart.key.color.shape': 'square', + 'chart.key.rounded': true, + 'chart.key.text.size': 10, + } + } + + + /** + * A peudo setter + * + * @param name string The name of the property to set + * @param value mixed The value of the property + */ + RGraph.Odometer.prototype.Set = function (name, value) + { + if (name == 'chart.needle.style') { + alert('[RGRAPH] The RGraph property chart.needle.style has changed to chart.needle.color'); + } + + if (name == 'chart.needle.thickness') { + name = 'chart.needle.width'; + } + + if (name == 'chart.value') { + this.value = value; + return; + } + + this.properties[name.toLowerCase()] = value; + } + + + /** + * A getter + * + * @param name string The name of the property to get + */ + RGraph.Odometer.prototype.Get = function (name) + { + if (name == 'chart.value') { + return this.value; + } + + return this.properties[name.toLowerCase()]; + } + + + /** + * Draws the odometer + */ + RGraph.Odometer.prototype.Draw = function () + { + /** + * Fire the onbeforedraw event + */ + RGraph.FireCustomEvent(this, 'onbeforedraw'); + + /** + * Clear all of this canvases event handlers (the ones installed by RGraph) + */ + RGraph.ClearEventListeners(this.id); + + /** + * Set the current value + */ + this.currentValue = this.value; + + /** + * No longer allow values outside the range of the Odo + */ + if (this.value > this.end) { + this.value = this.end; + } + + if (this.value < this.start) { + this.value = this.start; + } + + /** + * This is new in May 2011 and facilitates indiviual gutter settings, + * eg chart.gutter.left + */ + this.gutterLeft = this.Get('chart.gutter.left'); + this.gutterRight = this.Get('chart.gutter.right'); + this.gutterTop = this.Get('chart.gutter.top'); + this.gutterBottom = this.Get('chart.gutter.bottom'); + + // Work out a few things + this.radius = Math.min((RGraph.GetWidth(this) - this.gutterLeft - this.gutterRight) / 2, (RGraph.GetHeight(this) - this.gutterTop - this.gutterBottom) / 2) - (this.Get('chart.border') ? 25 : 0); + this.diameter = 2 * this.radius; + this.centerx = this.canvas.width / 2; + this.centery = this.canvas.height / 2; + this.range = this.end - this.start; + + + if (typeof(this.Get('chart.radius')) == 'number') { + this.radius = this.Get('chart.radius'); + } + + /** + * Move the centerx if the key is defined + */ + if (this.Get('chart.key').length > 0 && this.canvas.width > this.canvas.height) { + this.centerx = 5 + this.radius; + } + + this.context.lineWidth = this.Get('chart.linewidth'); + + // Draw the background + this.DrawBackground(); + + // And lastly, draw the labels + this.DrawLabels(); + + // Draw the needle + this.DrawNeedle(this.value, this.Get('chart.needle.color')); + + /** + * Draw any extra needles + */ + if (this.Get('chart.needle.extra').length > 0) { + for (var i=0; i<this.Get('chart.needle.extra').length; ++i) { + var needle = this.Get('chart.needle.extra')[i]; + this.DrawNeedle(needle[0], needle[1], needle[2]); + } + } + + /** + * Draw the key if requested + */ + if (this.Get('chart.key').length > 0) { + // Build a colors array out of the needle colors + var colors = [this.Get('chart.needle.color')]; + + if (this.Get('chart.needle.extra').length > 0) { + for (var i=0; i<this.Get('chart.needle.extra').length; ++i) { + var needle = this.Get('chart.needle.extra')[i]; + colors.push(needle[1]); + } + } + + RGraph.DrawKey(this, this.Get('chart.key'), colors); + } + + + /** + * Setup the context menu if required + */ + if (this.Get('chart.contextmenu')) { + RGraph.ShowContext(this); + } + + /** + * If the canvas is annotatable, do install the event handlers + */ + if (this.Get('chart.annotatable')) { + RGraph.Annotate(this); + } + + /** + * This bit shows the mini zoom window if requested + */ + if (this.Get('chart.zoom.mode') == 'thumbnail' || this.Get('chart.zoom.mode') == 'area') { + RGraph.ShowZoomWindow(this); + } + + + /** + * This function enables resizing + */ + if (this.Get('chart.resizable')) { + RGraph.AllowResizing(this); + } + + /** + * Fire the RGraph ondraw event + */ + RGraph.FireCustomEvent(this, 'ondraw'); + } + + /** + * Draws the background + */ + RGraph.Odometer.prototype.DrawBackground = function () + { + this.context.beginPath(); + + /** + * Turn on the shadow if need be + */ + if (this.Get('chart.shadow.outer')) { + RGraph.SetShadow(this, this.Get('chart.shadow.outer.color'), this.Get('chart.shadow.outer.offsetx'), this.Get('chart.shadow.outer.offsety'), this.Get('chart.shadow.outer.blur')); + } + + var backgroundColor = '#eee'; + + // Draw the grey border + this.context.fillStyle = backgroundColor; + this.context.arc(this.centerx, this.centery, this.radius, 0.0001, 6.28, false); + this.context.fill(); + + /** + * Turn off the shadow + */ + RGraph.NoShadow(this); + + + // Draw a circle + this.context.strokeStyle = '#666'; + this.context.arc(this.centerx, this.centery, this.radius, 0, 6.28, false); + + // Now draw a big white circle to make the lines appear as tick marks + // This is solely for Chrome + this.context.fillStyle = backgroundColor; + this.context.arc(this.centerx, this.centery, this.radius, 0, 6.28, false); + this.context.fill(); + + /** + * Draw more tickmarks + */ + this.context.beginPath(); + this.context.strokeStyle = '#bbb'; + + for (var i=0; i<=360; i+=3) { + this.context.arc(this.centerx, this.centery, this.radius, 0, RGraph.degrees2Radians(i), false); + this.context.lineTo(this.centerx, this.centery); + } + this.context.stroke(); + + this.context.beginPath(); + this.context.lineWidth = 1; + this.context.strokeStyle = 'black'; + + // Now draw a big white circle to make the lines appear as tick marks + this.context.fillStyle = backgroundColor; + this.context.strokeStyle = backgroundColor; + this.context.arc(this.centerx, this.centery, this.radius - 5, 0, 6.28, false); + this.context.fill(); + this.context.stroke(); + + // Gray lines at 18 degree intervals + this.context.beginPath(); + this.context.strokeStyle = '#ddd'; + for (var i=0; i<360; i+=18) { + this.context.arc(this.centerx, this.centery, this.radius, 0, RGraph.degrees2Radians(i), false); + this.context.lineTo(this.centerx, this.centery); + } + this.context.stroke(); + + // Redraw the outer circle + this.context.beginPath(); + this.context.strokeStyle = 'black'; + this.context.arc(this.centerx, this.centery, this.radius, 0, 6.2830, false); + this.context.stroke(); + + /** + * Now draw the center bits shadow if need be + */ + if (this.Get('chart.shadow.inner')) { + this.context.beginPath(); + RGraph.SetShadow(this, this.Get('chart.shadow.inner.color'), this.Get('chart.shadow.inner.offsetx'), this.Get('chart.shadow.inner.offsety'), this.Get('chart.shadow.inner.blur')); + this.context.arc(this.centerx, this.centery, this.radius - this.Get('chart.label.area'), 0, 6.28, 0); + this.context.fill(); + this.context.stroke(); + + /** + * Turn off the shadow + */ + RGraph.NoShadow(this); + } + + /******************************************************* + * Draw the green area + *******************************************************/ + if (this.Get('chart.green.solid')) { + var greengrad = this.Get('chart.green.color'); + + } else { + var greengrad = this.context.createRadialGradient(this.centerx,this.centery,0,this.centerx,this.centery,this.radius); + greengrad.addColorStop(0, 'white'); + greengrad.addColorStop(1, this.Get('chart.green.color')); + } + + // Draw the "tick highlight" + if (this.Get('chart.tickmarks.highlighted')) { + this.context.beginPath(); + this.context.lineWidth = 5; + this.context.strokeStyle = greengrad; + this.context.arc(this.centerx, this.centery, this.radius - 2.5, + + -1.57, + (((this.Get('chart.green.max') - this.start)/ (this.end - this.start)) * 6.2830) - 1.57, + 0); + + this.context.stroke(); + + this.context.lineWidth = 1; + } + + this.context.beginPath(); + this.context.fillStyle = greengrad; + this.context.arc( + this.centerx, + this.centery, + this.radius - this.Get('chart.label.area'), + -1.57, + (((this.Get('chart.green.max') - this.start)/ (this.end - this.start)) * 6.2830) - 1.57, + false + ); + this.context.lineTo(this.centerx, this.centery); + this.context.closePath(); + this.context.fill(); + + + /******************************************************* + * Draw the yellow area + *******************************************************/ + if (this.Get('chart.yellow.solid')) { + var yellowgrad = this.Get('chart.yellow.color'); + + } else { + var yellowgrad = this.context.createRadialGradient(this.centerx,this.centery,0,this.centerx,this.centery,this.radius); + yellowgrad.addColorStop(0, 'white'); + yellowgrad.addColorStop(1, this.Get('chart.yellow.color')); + } + + // Draw the "tick highlight" + if (this.Get('chart.tickmarks.highlighted')) { + this.context.beginPath(); + this.context.lineWidth = 5; + this.context.strokeStyle = yellowgrad; + this.context.arc(this.centerx, this.centery, this.radius - 2.5, ( + + ((this.Get('chart.green.max') - this.start) / (this.end - this.start)) * 6.2830) - 1.57, + (((this.Get('chart.red.min') - this.start) / (this.end - this.start)) * 6.2830) - 1.57, + 0); + + this.context.stroke(); + + this.context.lineWidth = 1; + } + + this.context.beginPath(); + this.context.fillStyle = yellowgrad; + this.context.arc( + this.centerx, + this.centery, + this.radius - this.Get('chart.label.area'), + ( ((this.Get('chart.green.max') -this.start) / (this.end - this.start)) * 6.2830) - 1.57, + ( ((this.Get('chart.red.min') - this.start) / (this.end - this.start)) * 6.2830) - 1.57, + false + ); + this.context.lineTo(this.centerx, this.centery); + this.context.closePath(); + this.context.fill(); + + /******************************************************* + * Draw the red area + *******************************************************/ + if (this.Get('chart.red.solid')) { + var redgrad = this.Get('chart.red.color'); + + } else { + var redgrad = this.context.createRadialGradient(this.centerx, + this.centery, + 0, + this.centerx, + this.centery, + this.radius); + redgrad.addColorStop(0, 'white'); + redgrad.addColorStop(1, this.Get('chart.red.color')); + } + + + // Draw the "tick highlight" + if (this.Get('chart.tickmarks.highlighted')) { + this.context.beginPath(); + this.context.lineWidth = 5; + this.context.strokeStyle = redgrad; + this.context.arc(this.centerx, this.centery, this.radius - 2.5,(((this.Get('chart.red.min') - this.start) / (this.end - this.start)) * 6.2830) - 1.57,(2 * Math.PI) - (0.5 * Math.PI),0); + this.context.stroke(); + + this.context.lineWidth = 1; + } + + this.context.beginPath(); + this.context.fillStyle = redgrad; + this.context.strokeStyle = redgrad; + this.context.arc( + this.centerx, + this.centery, + this.radius - this.Get('chart.label.area'), + (((this.Get('chart.red.min') - this.start) / (this.end - this.start)) * 6.2830) - 1.57, + 6.2830 - (0.25 * 6.2830), + false + ); + this.context.lineTo(this.centerx, this.centery); + this.context.closePath(); + this.context.fill(); + + + /** + * Draw the thick border + */ + + if (this.Get('chart.border')) { + + + var grad = this.context.createRadialGradient(this.centerx, this.centery, this.radius, this.centerx, this.centery, this.radius + 20); + grad.addColorStop(0, this.Get('chart.border.color1')); + grad.addColorStop(0.5, this.Get('chart.border.color2')); + grad.addColorStop(1, this.Get('chart.border.color3')); + + + this.context.beginPath(); + this.context.fillStyle = grad; + this.context.strokeStyle = 'rgba(0,0,0,0)' + this.context.lineWidth = 0.001; + this.context.arc(this.centerx, this.centery, this.radius + 20, 0, 6.2830, 0); + this.context.arc(this.centerx, this.centery, this.radius - 2, 6.2830, 0, 1); + this.context.fill(); + } + + // Put the linewidth back to what it was + this.context.lineWidth = this.Get('chart.linewidth'); + + + /** + * Draw the title if specified + */ + if (this.Get('chart.title')) { + RGraph.DrawTitle(this.canvas, + this.Get('chart.title'), + this.centery - this.radius, + null, + this.Get('chart.title.size') ? this.Get('chart.title.size') : this.Get('chart.text.size') + 2); + } + + + // Draw the big tick marks + if (!this.Get('chart.tickmarks.highlighted')) { + for (var i=18; i<=360; i+=36) { + this.context.beginPath(); + this.context.strokeStyle = '#999'; + this.context.lineWidth = 2; + this.context.arc(this.centerx, this.centery, this.radius - 1, RGraph.degrees2Radians(i), RGraph.degrees2Radians(i+0.01), false); + this.context.arc(this.centerx, this.centery, this.radius - 7, RGraph.degrees2Radians(i), RGraph.degrees2Radians(i+0.01), false); + this.context.stroke(); + } + } + } + + + /** + * Draws the needle of the odometer + * + * @param number value The value to represent + * @param string color The color of the needle + * @param number The OPTIONAL length of the needle + */ + RGraph.Odometer.prototype.DrawNeedle = function (value, color) + { + // The optional length of the needle + var length = arguments[2] ? arguments[2] : this.radius - this.Get('chart.label.area'); + + // ===== First draw a grey background circle ===== + + this.context.fillStyle = '#999'; + + this.context.beginPath(); + this.context.moveTo(this.centerx, this.centery); + this.context.arc(this.centerx, this.centery, 10, 0, 6.28, false); + this.context.fill(); + this.context.closePath(); + + this.context.fill(); + + // =============================================== + + this.context.fillStyle = color + this.context.strokeStyle = '#666'; + + // Draw the centre bit + this.context.beginPath(); + this.context.moveTo(this.centerx, this.centery); + this.context.arc(this.centerx, this.centery, 8, 0, 6.28, false); + this.context.fill(); + this.context.closePath(); + + this.context.stroke(); + this.context.fill(); + + if (this.Get('chart.needle.type') == 'pointer') { + + this.context.strokeStyle = color; + this.context.lineWidth = this.Get('chart.needle.width'); + this.context.lineCap = 'round'; + this.context.lineJoin = 'round'; + + // Draw the needle + this.context.beginPath(); + // The trailing bit on the opposite side of the dial + this.context.beginPath(); + this.context.moveTo(this.centerx, this.centery); + + if (this.Get('chart.needle.tail')) { + + this.context.arc(this.centerx, + this.centery, + 20, + (((value / this.range) * 360) + 90) / 57.3, + (((value / this.range) * 360) + 90 + 0.01) / 57.3, // The 0.01 avoids a bug in ExCanvas and Chrome 6 + false + ); + } + + // Draw the long bit on the opposite side + this.context.arc(this.centerx, + this.centery, + length - 10, + (((value / this.range) * 360) - 90) / 57.3, + (((value / this.range) * 360) - 90 + 0.1 ) / 57.3, // The 0.1 avoids a bug in ExCanvas and Chrome 6 + false + ); + this.context.closePath(); + + //this.context.stroke(); + //this.context.fill(); + + + } else if (this.Get('chart.needle.type') == 'triangle') { + + this.context.lineWidth = 0.01; + this.context.lineEnd = 'square'; + this.context.lineJoin = 'miter'; + + /** + * This draws the version of the pointer that becomes the border + */ + this.context.beginPath(); + this.context.fillStyle = this.Get('chart.needle.triangle.border'); + this.context.arc(this.centerx, this.centery, 11, (((value / this.range) * 360)) / 57.3, ((((value / this.range) * 360)) + 0.01) / 57.3, 0); + this.context.arc(this.centerx, this.centery, 11, (((value / this.range) * 360) + 180) / 57.3, ((((value / this.range) * 360) + 180) + 0.01)/ 57.3, 0); + this.context.arc(this.centerx, this.centery, length - 5, (((value / this.range) * 360) - 90) / 57.3, ((((value / this.range) * 360) - 90) / 57.3) + 0.01, 0); + this.context.closePath(); + this.context.fill(); + + this.context.beginPath(); + this.context.arc(this.centerx, this.centery, 15, 0, 6.28, 0); + this.context.closePath(); + this.context.fill(); + + // This draws the pointer + this.context.beginPath(); + this.context.strokeStyle = 'black'; + this.context.fillStyle = color; + this.context.arc(this.centerx, this.centery, 7, (((value / this.range) * 360)) / 57.3, ((((value / this.range) * 360)) + 0.01) / 57.3, 0); + this.context.arc(this.centerx, this.centery, 7, (((value / this.range) * 360) + 180) / 57.3, ((((value / this.range) * 360) + 180) + 0.01)/ 57.3, 0); + this.context.arc(this.centerx, this.centery, length - 13, (((value / this.range) * 360) - 90) / 57.3, ((((value / this.range) * 360) - 90) / 57.3) + 0.01, 0); + this.context.closePath(); + this.context.stroke(); + this.context.fill(); + + /** + * This is here to accomodate the MSIE/ExCanvas combo + */ + this.context.beginPath(); + this.context.arc(this.centerx, this.centery, 7, 0, 6.28, 0); + this.context.closePath(); + this.context.fill(); + } + + + this.context.stroke(); + this.context.fill(); + + // Draw the mini center circle + this.context.beginPath(); + this.context.fillStyle = color; + this.context.arc(this.centerx, this.centery, this.Get('chart.needle.type') == 'pointer' ? 7 : 12, 0.01, 6.2830, false); + this.context.fill(); + + // This draws the arrow at the end of the line + if (this.Get('chart.needle.head') && this.Get('chart.needle.type') == 'pointer') { + this.context.lineWidth = 1; + this.context.fillStyle = color; + + // round, bevel, miter + this.context.lineJoin = 'miter'; + this.context.lineCap = 'butt'; + + this.context.beginPath(); + this.context.arc(this.centerx, this.centery, length - 5, (((value / this.range) * 360) - 90) / 57.3, (((value / this.range) * 360) - 90 + 0.1) / 57.3, false); + + this.context.arc(this.centerx, + this.centery, + length - 20, + RGraph.degrees2Radians( ((value / this.range) * 360) - (length < 60 ? 80 : 85) ), + RGraph.degrees2Radians( ((value / this.range) * 360) - (length < 60 ? 100 : 95) ), + 1); + this.context.closePath(); + + this.context.fill(); + //this.context.stroke(); + } + + /** + * Draw a white circle at the centre + */ + this.context.beginPath(); + this.context.fillStyle = 'gray'; + this.context.moveTo(this.centerx, this.centery); + this.context.arc(this.centerx,this.centery,2,0,6.2795,false); + this.context.closePath(); + + this.context.fill(); + } + + /** + * Draws the labels for the Odo + */ + RGraph.Odometer.prototype.DrawLabels = function () + { + var context = this.context; + var size = this.Get('chart.text.size'); + var font = this.Get('chart.text.font'); + var centerx = this.centerx; + var centery = this.centery; + var r = this.radius - (this.Get('chart.label.area') / 2); + var start = this.start; + var end = this.end; + var decimals = this.Get('chart.scale.decimals'); + var labels = this.Get('chart.labels'); + var units_pre = this.Get('chart.units.pre'); + var units_post = this.Get('chart.units.post'); + + context.beginPath(); + context.fillStyle = this.Get('chart.text.color'); + + /** + * If label are specified, use those + */ + if (labels) { + for (var i=0; i<labels.length; ++i) { + + RGraph.Text(context, + font, + size, + centerx + (Math.cos(((i / labels.length) * 6.28) - 1.57) * (this.radius - (this.Get('chart.label.area') / 2) ) ), // Sin A = Opp / Hyp + centery + (Math.sin(((i / labels.length) * 6.28) - 1.57) * (this.radius - (this.Get('chart.label.area') / 2) ) ), // Cos A = Adj / Hyp + String(units_pre + labels[i] + units_post), + 'center', + 'center'); + } + + /** + * If not, use the maximum value + */ + } else { + RGraph.Text(context, font, size, centerx + (0.588 * r ), centery - (0.809 * r ), String(units_pre + (((end - start) * (1/10)) + start).toFixed(decimals) + units_post), 'center', 'center', false, 36); + RGraph.Text(context, font, size, centerx + (0.951 * r ), centery - (0.309 * r), String(units_pre + (((end - start) * (2/10)) + start).toFixed(decimals) + units_post), 'center', 'center', false, 72); + RGraph.Text(context, font, size, centerx + (0.949 * r), centery + (0.287 * r), String(units_pre + (((end - start) * (3/10)) + start).toFixed(decimals) + units_post), 'center', 'center', false, 108); + RGraph.Text(context, font, size, centerx + (0.588 * r ), centery + (0.809 * r ), String(units_pre + (((end - start) * (4/10)) + start).toFixed(decimals) + units_post), 'center', 'center', false, 144); + RGraph.Text(context, font, size, centerx, centery + r, String(units_pre + (((end - start) * (5/10)) + start).toFixed(decimals) + units_post), 'center', 'center', false, 180); + RGraph.Text(context, font, size, centerx - (0.588 * r ), centery + (0.809 * r ), String(units_pre + (((end - start) * (6/10)) + start).toFixed(decimals) + units_post), 'center', 'center', false, 216); + RGraph.Text(context, font, size, centerx - (0.949 * r), centery + (0.300 * r), a = String(units_pre + (((end - start) * (7/10)) + start).toFixed(decimals) + units_post), 'center', 'center', false, 252); + RGraph.Text(context, font, size, centerx - (0.951 * r), centery - (0.309 * r), String(units_pre + (((end - start) * (8/10)) + start).toFixed(decimals) + units_post), 'center', 'center', false, 288); + RGraph.Text(context, font, size, centerx - (0.588 * r ), centery - (0.809 * r ), String(units_pre + (((end - start) * (9/10)) + start).toFixed(decimals) + units_post), 'center', 'center', false, 324); + RGraph.Text(context, font, size, centerx, centery - r, this.Get('chart.zerostart') ? units_pre + String(this.start) + units_post : String(units_pre + (((end - start) * (10/10)) + start).toFixed(decimals) + units_post), 'center', 'center', false, 360); + } + + this.context.fill(); + + /** + * Draw the text label below the center point + */ + if (this.Get('chart.value.text')) { + context.strokeStyle = 'black'; + RGraph.Text(context, font, size + 2, centerx, centery + size + 2 + 10, String(this.Get('chart.value.units.pre') + this.value.toFixed(this.Get('chart.value.text.decimals')) + this.Get('chart.value.units.post')), 'center', 'center', true, null, 'white'); + } + } diff --git a/schall/static/RGraph/libraries/RGraph.pie.js b/schall/static/RGraph/libraries/RGraph.pie.js new file mode 100644 index 0000000..26f688e --- /dev/null +++ b/schall/static/RGraph/libraries/RGraph.pie.js @@ -0,0 +1,1042 @@ + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + + if (typeof(RGraph) == 'undefined') RGraph = {}; + + /** + * The pie chart constructor + * + * @param data array The data to be represented on the pie chart + */ + RGraph.Pie = function (id, data) + { + this.id = id; + this.canvas = document.getElementById(id); + this.context = this.canvas.getContext("2d"); + this.canvas.__object__ = this; + this.total = 0; + this.subTotal = 0; + this.angles = []; + this.data = data; + this.properties = []; + this.type = 'pie'; + this.isRGraph = true; + + + /** + * Compatibility with older browsers + */ + RGraph.OldBrowserCompat(this.context); + + this.properties = { + 'chart.colors': ['rgb(255,0,0)', '#ddd', 'rgb(0,255,0)', 'rgb(0,0,255)', 'pink', 'yellow', '#000'], + 'chart.strokestyle': '#999', + 'chart.linewidth': 1, + 'chart.labels': [], + 'chart.labels.sticks': false, + 'chart.labels.sticks.length': 7, + 'chart.labels.sticks.color': '#aaa', + 'chart.segments': [], + 'chart.gutter.left': 25, + 'chart.gutter.right': 25, + 'chart.gutter.top': 25, + 'chart.gutter.bottom': 25, + 'chart.title': '', + 'chart.title.background': null, + 'chart.title.hpos': null, + 'chart.title.vpos': 0.5, + 'chart.title.bold': true, + 'chart.title.font': null, + 'chart.shadow': false, + 'chart.shadow.color': 'rgba(0,0,0,0.5)', + 'chart.shadow.offsetx': 3, + 'chart.shadow.offsety': 3, + 'chart.shadow.blur': 3, + 'chart.text.size': 10, + 'chart.text.color': 'black', + 'chart.text.font': 'Verdana', + 'chart.contextmenu': null, + 'chart.tooltips': [], + 'chart.tooltips.event': 'onclick', + 'chart.tooltips.effect': 'fade', + 'chart.tooltips.css.class': 'RGraph_tooltip', + 'chart.tooltips.highlight': true, + 'chart.highlight.style': '3d', + 'chart.highlight.style.2d.fill': 'rgba(255,255,255,0.5)', + 'chart.highlight.style.2d.stroke': 'rgba(255,255,255,0)', + 'chart.centerx': null, + 'chart.centery': null, + 'chart.radius': null, + 'chart.border': false, + 'chart.border.color': 'rgba(255,255,255,0.5)', + 'chart.key': null, + 'chart.key.background': 'white', + 'chart.key.position': 'graph', + 'chart.key.halign': 'right', + 'chart.key.shadow': false, + 'chart.key.shadow.color': '#666', + 'chart.key.shadow.blur': 3, + 'chart.key.shadow.offsetx': 2, + 'chart.key.shadow.offsety': 2, + 'chart.key.position.gutter.boxed': true, + 'chart.key.position.x': null, + 'chart.key.position.y': null, + 'chart.key.color.shape': 'square', + 'chart.key.rounded': true, + 'chart.key.linewidth': 1, + 'chart.annotatable': false, + 'chart.annotate.color': 'black', + 'chart.align': 'center', + 'chart.zoom.factor': 1.5, + 'chart.zoom.fade.in': true, + 'chart.zoom.fade.out': true, + 'chart.zoom.hdir': 'right', + 'chart.zoom.vdir': 'down', + 'chart.zoom.frames': 25, + 'chart.zoom.delay': 16.666, + 'chart.zoom.shadow': true, + 'chart.zoom.mode': 'canvas', + 'chart.zoom.thumbnail.width': 75, + 'chart.zoom.thumbnail.height': 75, + 'chart.zoom.background': true, + 'chart.zoom.action': 'zoom', + 'chart.resizable': false, + 'chart.resize.handle.adjust': [0,0], + 'chart.resize.handle.background': null, + 'chart.variant': 'pie', + 'chart.variant.donut.color': 'white', + 'chart.exploded': [], + 'chart.effect.roundrobin.multiplier': 1 + } + + /** + * Calculate the total + */ + for (var i=0,len=data.length; i<len; i++) { + this.total += data[i]; + } + + + /** + * Set the .getShape commonly named method + */ + this.getShape = this.getSegment; + } + + + /** + * A generic setter + */ + RGraph.Pie.prototype.Set = function (name, value) + { + if (name == 'chart.highlight.style.2d.color') { + name = 'chart.highlight.style.2d.fill'; + } + + this.properties[name] = value; + } + + + /** + * A generic getter + */ + RGraph.Pie.prototype.Get = function (name) + { + if (name == 'chart.highlight.style.2d.color') { + name = 'chart.highlight.style.2d.fill'; + } + + return this.properties[name]; + } + + + /** + * This draws the pie chart + */ + RGraph.Pie.prototype.Draw = function () + { + /** + * Fire the onbeforedraw event + */ + RGraph.FireCustomEvent(this, 'onbeforedraw'); + + + /** + * This is new in May 2011 and facilitates indiviual gutter settings, + * eg chart.gutter.left + */ + this.gutterLeft = this.Get('chart.gutter.left'); + this.gutterRight = this.Get('chart.gutter.right'); + this.gutterTop = this.Get('chart.gutter.top'); + this.gutterBottom = this.Get('chart.gutter.bottom'); + + /** + * Reset this to an empty array + */ + this.Set('chart.segments', []); + + /** + * Clear all of this canvases event handlers (the ones installed by RGraph) + */ + RGraph.ClearEventListeners(this.id); + + + this.radius = this.Get('chart.radius') ? this.Get('chart.radius') : this.getRadius(); + // this.centerx now defined below + this.centery = ((this.canvas.height - this.gutterTop - this.gutterBottom) / 2) + this.gutterTop; + this.subTotal = 0; + this.angles = []; + + /** + * Allow the specification of a custom centery + */ + if (typeof(this.Get('chart.centery')) == 'number') { + this.centery = this.Get('chart.centery'); + } + + /** + * Alignment (Pie is center aligned by default) Only if centerx is not defined - donut defines the centerx + */ + if (this.Get('chart.align') == 'left') { + this.centerx = this.radius + this.gutterLeft; + + } else if (this.Get('chart.align') == 'right') { + this.centerx = this.canvas.width - this.radius - this.gutterRight; + + } else { + this.centerx = this.canvas.width / 2; + } + + /** + * Allow the specification of a custom centerx + */ + if (typeof(this.Get('chart.centerx')) == 'number') { + this.centerx = this.Get('chart.centerx'); + } + + /** + * Draw the shadow if required + */ + if (this.Get('chart.shadow') && 0) { + + var offsetx = document.all ? this.Get('chart.shadow.offsetx') : 0; + var offsety = document.all ? this.Get('chart.shadow.offsety') : 0; + + this.context.beginPath(); + this.context.fillStyle = this.Get('chart.shadow.color'); + + this.context.shadowColor = this.Get('chart.shadow.color'); + this.context.shadowBlur = this.Get('chart.shadow.blur'); + this.context.shadowOffsetX = this.Get('chart.shadow.offsetx'); + this.context.shadowOffsetY = this.Get('chart.shadow.offsety'); + + this.context.arc(this.centerx + offsetx, this.centery + offsety, this.radius, 0, 6.28, 0); + + this.context.fill(); + + // Now turn off the shadow + RGraph.NoShadow(this); + } + + /** + * The total of the array of values + */ + this.total = RGraph.array_sum(this.data); + + for (var i=0,len=this.data.length; i<len; i++) { + + var angle = ((this.data[i] / this.total) * 360); + + // Draw the segment + this.DrawSegment(angle,this.Get('chart.colors')[i],i == (this.data.length - 1), i); + } + + RGraph.NoShadow(this); + + + /** + * Redraw the seperating lines + */ + this.DrawBorders(); + + /** + * Now draw the segments again with shadow turned off. This is always performed, + * not just if the shadow is on. + */ + + for (var i=0; i<this.angles.length; i++) { + + this.context.beginPath(); + this.context.strokeStyle = this.Get('chart.strokestyle'); + this.context.fillStyle = this.Get('chart.colors')[i]; + this.context.moveTo(this.angles[i][2], this.angles[i][3]); + this.context.arc(this.angles[i][2], + this.angles[i][3], + this.radius, + (this.angles[i][0] / 57.3), + (this.angles[i][1] / 57.3), + false); + this.context.lineTo(this.angles[i][2], this.angles[i][3]); + this.context.closePath(); + this.context.fill(); + this.context.stroke(); + } + + + + /** + * Draw label sticks + */ + if (this.Get('chart.labels.sticks')) { + + this.DrawSticks(); + + // Redraw the border going around the Pie chart if the stroke style is NOT white + var strokeStyle = this.Get('chart.strokestyle'); + var isWhite = strokeStyle == 'white' || strokeStyle == '#fff' || strokeStyle == '#fffffff' || strokeStyle == 'rgb(255,255,255)' || strokeStyle == 'rgba(255,255,255,0)'; + + if (!isWhite || (isWhite && this.Get('chart.shadow'))) { + // Again (?) + this.DrawBorders(); + } + } + + /** + * Draw the labels + */ + this.DrawLabels(); + + /** + * Draw the title + */ + if (this.Get('chart.align') == 'left') { + var centerx = this.radius + this.Get('chart.gutter.left'); + + } else if (this.Get('chart.align') == 'right') { + var centerx = RGraph.GetWidth(this) - (this.radius + this.gutterRight); + + } else { + var centerx = null; + } + + RGraph.DrawTitle(this.canvas, + this.Get('chart.title'), + (this.canvas.height / 2) - this.radius - 5, + centerx, + this.Get('chart.title.size') ? this.Get('chart.title.size') : this.Get('chart.text.size') + 2); + + + /** + * Setup the context menu if required + */ + if (this.Get('chart.contextmenu')) { + RGraph.ShowContext(this); + } + + /** + * Tooltips + */ + if (this.Get('chart.tooltips').length) { + + /** + * Register this object for redrawing + */ + RGraph.Register(this); + + /** + * The onclick event + */ + //this.canvas.onclick = function (e) + var canvas_onclick_func = function (e) + { + RGraph.HideZoomedCanvas(); + + e = RGraph.FixEventObject(e); + + var mouseCoords = RGraph.getMouseXY(e); + + var canvas = e.target; + var context = canvas.getContext('2d'); + var obj = e.target.__object__; + + + + /** + * If it's actually a donut make sure the hyp is bigger + * than the size of the hole in the middle + */ + if (obj.Get('chart.variant') == 'donut' && Math.abs(hyp) < (obj.radius / 2)) { + return; + } + + /** + * The angles for each segment are stored in "angles", + * so go through that checking if the mouse position corresponds + */ + var isDonut = obj.Get('chart.variant') == 'donut'; + var hStyle = obj.Get('chart.highlight.style'); + var segment = obj.getSegment(e); + + if (segment) { + + var x = mouseCoords[0] - segment[0]; + var y = mouseCoords[1] - segment[1]; + var theta = Math.atan(y / x); // RADIANS + var hyp = y / Math.sin(theta); + + + if ( RGraph.Registry.Get('chart.tooltip') + && segment[5] == RGraph.Registry.Get('chart.tooltip').__index__ + && RGraph.Registry.Get('chart.tooltip').__canvas__.__object__.id == obj.id) { + + return; + + } else { + RGraph.Redraw(); + } + + + if (isDonut || hStyle == '2d') { + + context.beginPath(); + + context.strokeStyle = obj.Get('chart.highlight.style.2d.stroke'); + context.fillStyle = obj.Get('chart.highlight.style.2d.fill'); + + //context.moveTo(obj.centerx, obj.centery); + + context.moveTo(segment[0], segment[1]); + context.arc(segment[0], segment[1], segment[2], RGraph.degrees2Radians(obj.angles[segment[5]][0]), RGraph.degrees2Radians(obj.angles[segment[5]][1]), 0); + context.lineTo(segment[0], segment[1]); + context.closePath(); + + context.stroke(); + context.fill(); + + //Removed 7th December 2010 + //context.stroke(); + + } else if (hStyle == 'explode') { + + var exploded = []; + + exploded[segment[5]] = 0; + + RGraph.Registry.Set('chart.pie.exploded', obj); + + setTimeout(function () {var pie = RGraph.Registry.Get('chart.pie.exploded'); pie.Set('chart.exploded', exploded);RGraph.Clear(pie.canvas);pie.Draw(); exploded[segment[5]] += 7;}, 25); + setTimeout(function () {var pie = RGraph.Registry.Get('chart.pie.exploded'); pie.Set('chart.exploded', exploded);RGraph.Clear(pie.canvas);pie.Draw(); exploded[segment[5]] += 7;}, 50); + setTimeout(function () {var pie = RGraph.Registry.Get('chart.pie.exploded'); pie.Set('chart.exploded', exploded);RGraph.Clear(pie.canvas);pie.Draw(); exploded[segment[5]] += 7;}, 75); + setTimeout(function () {var pie = RGraph.Registry.Get('chart.pie.exploded'); pie.Set('chart.exploded', exploded);RGraph.Clear(pie.canvas);pie.Draw(); exploded[segment[5]] += 7;}, 100); + setTimeout(function () {var pie = RGraph.Registry.Get('chart.pie.exploded'); pie.Set('chart.exploded', exploded);RGraph.Clear(pie.canvas);pie.Draw(); exploded[segment[5]] += 7;}, 125); + + setTimeout(function () {RGraph.Registry.Get('chart.pie.exploded').Set('chart.exploded', []);}, 150); + + } else { + + context.lineWidth = 2; + + /** + * Draw a white segment where the one that has been clicked on was + */ + context.fillStyle = 'white'; + context.strokeStyle = 'white'; + context.beginPath(); + context.moveTo(segment[0], segment[1]); + context.arc(segment[0], segment[1], segment[2], obj.angles[segment[5]][0] / 57.3, obj.angles[segment[5]][1] / 57.3, 0); + context.stroke(); + context.fill(); + + context.lineWidth = 1; + + context.shadowColor = '#666'; + context.shadowBlur = 3; + context.shadowOffsetX = 3; + context.shadowOffsetY = 3; + + // Draw the new segment + context.beginPath(); + context.fillStyle = obj.Get('chart.colors')[segment[5]]; + context.strokeStyle = obj.Get('chart.strokestyle'); + context.moveTo(segment[0] - 3, segment[1] - 3); + context.arc(segment[0] - 3, segment[1] - 3, segment[2], RGraph.degrees2Radians(obj.angles[segment[5]][0]), RGraph.degrees2Radians(obj.angles[segment[5]][1]), 0); + context.lineTo(segment[0] - 3, segment[1] - 3); + context.closePath(); + + context.stroke(); + context.fill(); + + // Turn off the shadow + RGraph.NoShadow(obj); + + /** + * If a border is defined, redraw that + */ + if (obj.Get('chart.border')) { + context.beginPath(); + context.strokeStyle = obj.Get('chart.border.color'); + context.lineWidth = 5; + context.arc(segment[0] - 3, segment[1] - 3, obj.radius - 2, RGraph.degrees2Radians(obj.angles[i][0]), RGraph.degrees2Radians(obj.angles[i][1]), 0); + context.stroke(); + } + } + + /** + * If a tooltip is defined, show it + */ + + /** + * Get the tooltip text + */ + var text = RGraph.parseTooltipText(obj.Get('chart.tooltips'), segment[5]); + + if (text) { + RGraph.Tooltip(canvas, text, e.pageX, e.pageY, segment[5]); + } + + /** + * Need to redraw the key? + */ + if (obj.Get('chart.key') && obj.Get('chart.key').length && obj.Get('chart.key.position') == 'graph') { + RGraph.DrawKey(obj, obj.Get('chart.key'), obj.Get('chart.colors')); + } + + e.stopPropagation(); + + return; + } else if (obj.Get('chart.tooltips.event') == 'onclick') { + RGraph.Redraw(); + } + } + var event_name = this.Get('chart.tooltips.event') == 'onmousemove' ? 'mousemove' : 'click'; + + this.canvas.addEventListener(event_name, canvas_onclick_func, false); + RGraph.AddEventListener(this.id, event_name, canvas_onclick_func); + + + + + + + /** + * The onmousemove event for changing the cursor + */ + //this.canvas.onmousemove = function (e) + var canvas_onmousemove_func = function (e) + { + RGraph.HideZoomedCanvas(); + + e = RGraph.FixEventObject(e); + + var obj = e.target.__object__; + var segment = obj.getSegment(e); + + if (segment) { + e.target.style.cursor = 'pointer'; + + return; + } + + /** + * Put the cursor back to null + */ + e.target.style.cursor = 'default'; + } + this.canvas.addEventListener('mousemove', canvas_onmousemove_func, false); + RGraph.AddEventListener(this.id, 'mousemove', canvas_onmousemove_func); + + + + + + + + + + /** + * The window onclick function + */ + var window_onclick_func = function (e) + { + // Taken out on 02/10/11 + //RGraph.HideZoomedCanvas(); + + e = RGraph.FixEventObject(e); + + RGraph.Redraw(); + + /** + * Put the cursor back to null + */ + //e.target.style.cursor = 'default'; + } + window.addEventListener('click', window_onclick_func, false); + RGraph.AddEventListener('window_' + this.id, 'click', window_onclick_func); + } + + + /** + * If a border is pecified, draw it + */ + if (this.Get('chart.border')) { + this.context.beginPath(); + this.context.lineWidth = 5; + this.context.strokeStyle = this.Get('chart.border.color'); + + this.context.arc(this.centerx, + this.centery, + this.radius - 2, + 0, + 6.28, + 0); + + this.context.stroke(); + } + + /** + * Draw the kay if desired + */ + if (this.Get('chart.key') != null) { + //this.Set('chart.key.position', 'graph'); + RGraph.DrawKey(this, this.Get('chart.key'), this.Get('chart.colors')); + } + + + /** + * If this is actually a donut, draw a big circle in the middle + */ + if (this.Get('chart.variant') == 'donut') { + this.context.beginPath(); + this.context.strokeStyle = this.Get('chart.strokestyle'); + this.context.fillStyle = this.Get('chart.variant.donut.color'); + this.context.arc(this.centerx, this.centery, this.radius / 2, 0, 6.28, 0); + this.context.stroke(); + this.context.fill(); + } + + RGraph.NoShadow(this); + + /** + * If the canvas is annotatable, do install the event handlers + */ + if (this.Get('chart.annotatable')) { + RGraph.Annotate(this); + } + + /** + * This bit shows the mini zoom window if requested + */ + if (this.Get('chart.zoom.mode') == 'thumbnail' || this.Get('chart.zoom.mode') == 'area') { + RGraph.ShowZoomWindow(this); + } + + + /** + * This function enables resizing + */ + if (this.Get('chart.resizable')) { + RGraph.AllowResizing(this); + } + + /** + * Fire the RGraph ondraw event + */ + RGraph.FireCustomEvent(this, 'ondraw'); + } + + + /** + * Draws a single segment of the pie chart + * + * @param int degrees The number of degrees for this segment + */ + RGraph.Pie.prototype.DrawSegment = function (degrees, color, last, index) + { + var context = this.context; + var canvas = this.canvas; + var subTotal = this.subTotal; + degrees = degrees * this.Get('chart.effect.roundrobin.multiplier'); + + context.beginPath(); + + context.fillStyle = color; + context.strokeStyle = this.Get('chart.strokestyle'); + context.lineWidth = 0; + + if (this.Get('chart.shadow')) { + RGraph.SetShadow(this, this.Get('chart.shadow.color'),this.Get('chart.shadow.offsetx'), this.Get('chart.shadow.offsety'), this.Get('chart.shadow.blur')); + } + + /** + * Exploded segments + */ + if ( (typeof(this.Get('chart.exploded')) == 'object' && this.Get('chart.exploded')[index] > 0) || typeof(this.Get('chart.exploded')) == 'number') { + var explosion = typeof(this.Get('chart.exploded')) == 'number' ? this.Get('chart.exploded') : this.Get('chart.exploded')[index]; + var x = 0; + var y = 0; + var h = explosion; + var t = ((subTotal + (degrees / 2)) / (360/6.2830)) - 1.57; + var x = (Math.cos(t) * explosion); + var y = (Math.sin(t) * explosion); + + this.context.moveTo(this.centerx + x, this.centery + y); + } else { + var x = 0; + var y = 0; + } + + /** + * Calculate the angles + */ + var startAngle = ((subTotal / 57.3)) - 1.57; + var endAngle = (((subTotal + degrees) / 57.3)) - 1.57; + + context.arc(this.centerx + x, + this.centery + y, + this.radius, + startAngle, + endAngle, + 0); + + context.lineTo(this.centerx + x, this.centery + y); + + // Keep hold of the angles + this.angles.push([subTotal - 90, subTotal + degrees - 90, this.centerx + x, this.centery + y]) + this.context.closePath(); + + + + //this.context.stroke(); + this.context.fill(); + + /** + * Calculate the segment angle + */ + this.Get('chart.segments').push([subTotal, subTotal + degrees]); + this.subTotal += degrees; + } + + /** + * Draws the graphs labels + */ + RGraph.Pie.prototype.DrawLabels = function () + { + var hAlignment = 'left'; + var vAlignment = 'center'; + var labels = this.Get('chart.labels'); + var context = this.context; + + /** + * Turn the shadow off + */ + RGraph.NoShadow(this); + + context.fillStyle = 'black'; + context.beginPath(); + + /** + * Draw the key (ie. the labels) + */ + if (labels && labels.length) { + + var text_size = this.Get('chart.text.size'); + + for (i=0; i<labels.length; ++i) { + + /** + * T|his ensures that if we're given too many labels, that we don't get an error + */ + if (typeof(this.Get('chart.segments')[i]) == 'undefined') { + continue; + } + + // Move to the centre + context.moveTo(this.centerx,this.centery); + + var a = this.Get('chart.segments')[i][0] + ((this.Get('chart.segments')[i][1] - this.Get('chart.segments')[i][0]) / 2) - 90; + + /** + * Alignment + */ + if (a < 90) { + hAlignment = 'left'; + vAlignment = 'center'; + } else if (a < 180) { + hAlignment = 'right'; + vAlignment = 'center'; + } else if (a < 270) { + hAlignment = 'right'; + vAlignment = 'center'; + } else if (a < 360) { + hAlignment = 'left'; + vAlignment = 'center'; + } + +var angle = ((this.angles[i][1] - this.angles[i][0]) / 2) + this.angles[i][0]; + /** + * Handle the additional "explosion" offset + */ + if (typeof(this.Get('chart.exploded')) == 'object' && this.Get('chart.exploded')[i] || typeof(this.Get('chart.exploded')) == 'number') { + + var t = ((this.angles[i][1] - this.angles[i][0]) / 2) / (360/6.2830); + var seperation = typeof(this.Get('chart.exploded')) == 'number' ? this.Get('chart.exploded') : this.Get('chart.exploded')[i]; + + // Adjust the angles + var explosion_offsetx = (Math.cos(angle / 57.29) * seperation); + var explosion_offsety = (Math.sin(angle / 57.29) * seperation); + } else { + var explosion_offsetx = 0; + var explosion_offsety = 0; + } + + /** + * Allow for the label sticks + */ + if (this.Get('chart.labels.sticks')) { + explosion_offsetx += (Math.cos(angle / 57.29) * this.Get('chart.labels.sticks.length')); + explosion_offsety += (Math.sin(angle / 57.29) * this.Get('chart.labels.sticks.length')); + } + + + context.fillStyle = this.Get('chart.text.color'); + + RGraph.Text(context, + this.Get('chart.text.font'), + text_size, + this.centerx + explosion_offsetx + ((this.radius + 10)* Math.cos(a / 57.3)) + (this.Get('chart.labels.sticks') ? (a < 90 || a > 270 ? 2 : -2) : 0), + this.centery + explosion_offsety + (((this.radius + 10) * Math.sin(a / 57.3))), + labels[i], + vAlignment, + hAlignment); + } + + context.fill(); + } + } + + + /** + * This function draws the pie chart sticks (for the labels) + */ + RGraph.Pie.prototype.DrawSticks = function () + { + var context = this.context; + var offset = this.Get('chart.linewidth') / 2; + var exploded = this.Get('chart.exploded'); + var sticks = this.Get('chart.labels.sticks'); + + for (var i=0; i<this.angles.length; ++i) { + + // This allows the chart.labels.sticks to be an array as well as a boolean + if (typeof(sticks) == 'object' && !sticks[i]) { + continue; + } + + var degrees = this.angles[i][1] - this.angles[i][0]; + + context.beginPath(); + context.strokeStyle = this.Get('chart.labels.sticks.color'); + context.lineWidth = 1; + + var midpoint = (this.angles[i][0] + (degrees / 2)) / 57.3; + + if (typeof(exploded) == 'object' && exploded[i]) { + var extra = exploded[i]; + } else if (typeof(exploded) == 'number') { + var extra = exploded; + } else { + var extra = 0; + } + + context.lineJoin = 'round'; + context.lineWidth = 1; + + context.arc(this.centerx, + this.centery, + this.radius + this.Get('chart.labels.sticks.length') + extra, + midpoint, + midpoint + 0.001, + 0); + context.arc(this.centerx, + this.centery, + this.radius + extra, + midpoint, + midpoint + 0.001, + 0); + + context.stroke(); + } + } + + + /** + * The (now Pie chart specific) getSegment function + * + * @param object e The event object + */ + RGraph.Pie.prototype.getSegment = function (e) + { + RGraph.FixEventObject(e); + + // The optional arg provides a way of allowing some accuracy (pixels) + var accuracy = arguments[1] ? arguments[1] : 0; + + var obj = e.target.__object__; + var canvas = obj.canvas; + var context = obj.context; + var mouseCoords = RGraph.getMouseXY(e); + var r = obj.radius; + var angles = obj.angles; + var ret = []; + + for (var i=0; i<angles.length; ++i) { + + var x = mouseCoords[0] - angles[i][2]; + var y = mouseCoords[1] - angles[i][3]; + var theta = Math.atan(y / x); // RADIANS + var hyp = y / Math.sin(theta); + var hyp = (hyp < 0) ? hyp + accuracy : hyp - accuracy; + // Put theta in DEGREES + theta *= 57.3 + + /** + * Account for the correct quadrant + */ + if (x < 0 && y >= 0) { + theta += 180; + } else if (x < 0 && y < 0) { + theta += 180; + } + + if (theta > 360) { + theta -= 360; + } + + if (theta >= angles[i][0] && theta < angles[i][1]) { + + hyp = Math.abs(hyp); + + if (!hyp || (obj.radius && hyp > obj.radius) ) { + return null; + } + + if (obj.type == 'pie' && obj.Get('chart.variant') == 'donut' && (hyp > obj.radius || hyp < (obj.radius / 2) ) ) { + return null; + } + + ret[0] = angles[i][2]; + ret[1] = angles[i][3]; + ret[2] = (obj.type == 'rose') ? angles[i][2] : obj.radius; + ret[3] = angles[i][0]; + ret[4] = angles[i][1]; + ret[5] = i; + + + + if (ret[3] < 0) ret[3] += 360; + if (ret[4] > 360) ret[4] -= 360; + + return ret; + } + } + + return null; + } + + + RGraph.Pie.prototype.DrawBorders = function () + { + if (this.Get('chart.linewidth') > 0) { + + this.context.lineWidth = this.Get('chart.linewidth'); + this.context.strokeStyle = this.Get('chart.strokestyle'); + + for (var i=0,len=this.angles.length; i<len; ++i) { + this.context.beginPath(); + this.context.moveTo(this.angles[i][2], this.angles[i][3]); + this.context.arc(this.angles[i][2], + this.angles[i][3], + this.radius, + ((this.angles[i][0] / 57.3)), + ((this.angles[i][0] + 0.01) / 57.3), + 0); + this.context.arc(this.angles[i][2], + this.angles[i][3], + this.radius, + ((this.angles[i][0] / 57.3)), + this.angles[i][1] / 57.3, + 0); + this.context.closePath(); + + this.context.stroke(); + } + } + } + + + /** + * Returns the radius of the pie chart + */ + RGraph.Pie.prototype.getRadius = function () + { + return Math.min(this.canvas.height - this.gutterTop - this.gutterBottom, this.canvas.width - this.gutterLeft - this.gutterRight) / 2; + } + + + /** + * A programmatic explode function + * + * @param object obj The chart object + * @param number index The zero-indexed number of the segment + * @param number size The size (in pixels) of the explosion + */ + RGraph.Pie.prototype.Explode = function (index, size) + { + if (this.Get('chart.exploded') == 0) { + this.Set('chart.exploded', []); + } + + var obj = this; + + for (var i=0; i<size; ++i) { + setTimeout( + function () + { + var exploded = obj.Get('chart.exploded'); + var value = typeof(exploded[index]) == 'number' ? exploded[index] : 0; + exploded[index] = value + 1; + obj.Set('chart.exploded', exploded); + RGraph.Clear(obj.canvas); + obj.Draw(); + }, i * 16.666); + } + + /** + * Now set the property accordingly + */ + setTimeout( + function () + { + obj.Set('chart.exploded', exploded); + }, i * 16.666 + ) + + //var Reset = function () + //{ + // pie.Set('chart.exploded', []); + // RGraph.Clear(pie.canvas); + // pie.Draw(); + //} + //window.addEventListener('click', Reset, false); + }
\ No newline at end of file diff --git a/schall/static/RGraph/libraries/RGraph.pie.js.old b/schall/static/RGraph/libraries/RGraph.pie.js.old new file mode 100644 index 0000000..8b9dc5b --- /dev/null +++ b/schall/static/RGraph/libraries/RGraph.pie.js.old @@ -0,0 +1,975 @@ + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + + if (typeof(RGraph) == 'undefined') RGraph = {}; + + /** + * The pie chart constructor + * + * @param data array The data to be represented on the pie chart + */ + RGraph.Pie = function (id, data) + { + this.id = id; + this.canvas = document.getElementById(id); + this.context = this.canvas.getContext("2d"); + this.canvas.__object__ = this; + this.total = 0; + this.subTotal = 0; + this.angles = []; + this.data = data; + this.properties = []; + this.type = 'pie'; + this.isRGraph = true; + + + /** + * Compatibility with older browsers + */ + RGraph.OldBrowserCompat(this.context); + + this.properties = { + 'chart.colors': ['rgb(255,0,0)', '#ddd', 'rgb(0,255,0)', 'rgb(0,0,255)', 'pink', 'yellow', '#000'], + 'chart.strokestyle': '#999', + 'chart.linewidth': 1, + 'chart.labels': [], + 'chart.labels.sticks': false, + 'chart.labels.sticks.color': '#aaa', + 'chart.segments': [], + 'chart.gutter.left': 25, + 'chart.gutter.right': 25, + 'chart.gutter.top': 25, + 'chart.gutter.bottom': 25, + 'chart.title': '', + 'chart.title.background': null, + 'chart.title.hpos': null, + 'chart.title.vpos': 0.5, + 'chart.title.bold': true, + 'chart.title.font': null, + 'chart.shadow': false, + 'chart.shadow.color': 'rgba(0,0,0,0.5)', + 'chart.shadow.offsetx': 3, + 'chart.shadow.offsety': 3, + 'chart.shadow.blur': 3, + 'chart.text.size': 10, + 'chart.text.color': 'black', + 'chart.text.font': 'Verdana', + 'chart.contextmenu': null, + 'chart.tooltips': [], + 'chart.tooltips.event': 'onclick', + 'chart.tooltips.effect': 'fade', + 'chart.tooltips.css.class': 'RGraph_tooltip', + 'chart.tooltips.highlight': true, + 'chart.highlight.style': '3d', + 'chart.highlight.style.2d.fill': 'rgba(255,255,255,0.5)', + 'chart.highlight.style.2d.stroke': 'rgba(255,255,255,0)', + 'chart.centerx': null, + 'chart.centery': null, + 'chart.radius': null, + 'chart.border': false, + 'chart.border.color': 'rgba(255,255,255,0.5)', + 'chart.key': null, + 'chart.key.background': 'white', + 'chart.key.position': 'graph', + 'chart.key.halign': 'right', + 'chart.key.shadow': false, + 'chart.key.shadow.color': '#666', + 'chart.key.shadow.blur': 3, + 'chart.key.shadow.offsetx': 2, + 'chart.key.shadow.offsety': 2, + 'chart.key.position.gutter.boxed': true, + 'chart.key.position.x': null, + 'chart.key.position.y': null, + 'chart.key.color.shape': 'square', + 'chart.key.rounded': true, + 'chart.key.linewidth': 1, + 'chart.annotatable': false, + 'chart.annotate.color': 'black', + 'chart.align': 'center', + 'chart.zoom.factor': 1.5, + 'chart.zoom.fade.in': true, + 'chart.zoom.fade.out': true, + 'chart.zoom.hdir': 'right', + 'chart.zoom.vdir': 'down', + 'chart.zoom.frames': 25, + 'chart.zoom.delay': 16.666, + 'chart.zoom.shadow': true, + 'chart.zoom.mode': 'canvas', + 'chart.zoom.thumbnail.width': 75, + 'chart.zoom.thumbnail.height': 75, + 'chart.zoom.background': true, + 'chart.zoom.action': 'zoom', + 'chart.resizable': false, + 'chart.resize.handle.adjust': [0,0], + 'chart.resize.handle.background': null, + 'chart.variant': 'pie', + 'chart.variant.donut.color': 'white', + 'chart.exploded': [], + 'chart.effect.roundrobin.multiplier': 1 + } + + /** + * Calculate the total + */ + for (var i=0,len=data.length; i<len; i++) { + this.total += data[i]; + } + + + /** + * Set the .getShape commonly named method + */ + this.getShape = this.getSegment; + } + + + /** + * A generic setter + */ + RGraph.Pie.prototype.Set = function (name, value) + { + if (name == 'chart.highlight.style.2d.color') { + name = 'chart.highlight.style.2d.fill'; + } + + this.properties[name] = value; + } + + + /** + * A generic getter + */ + RGraph.Pie.prototype.Get = function (name) + { + if (name == 'chart.highlight.style.2d.color') { + name = 'chart.highlight.style.2d.fill'; + } + + return this.properties[name]; + } + + + /** + * This draws the pie chart + */ + RGraph.Pie.prototype.Draw = function () + { + /** + * Fire the onbeforedraw event + */ + RGraph.FireCustomEvent(this, 'onbeforedraw'); + + + /** + * This is new in May 2011 and facilitates indiviual gutter settings, + * eg chart.gutter.left + */ + this.gutterLeft = this.Get('chart.gutter.left'); + this.gutterRight = this.Get('chart.gutter.right'); + this.gutterTop = this.Get('chart.gutter.top'); + this.gutterBottom = this.Get('chart.gutter.bottom'); + + /** + * Reset this to an empty array + */ + this.Set('chart.segments', []); + + /** + * Clear all of this canvases event handlers (the ones installed by RGraph) + */ + RGraph.ClearEventListeners(this.id); + + + this.radius = this.Get('chart.radius') ? this.Get('chart.radius') : this.getRadius(); + // this.centerx now defined below + this.centery = ((this.canvas.height - this.gutterTop - this.gutterBottom) / 2) + this.gutterTop; + this.subTotal = 0; + this.angles = []; + + /** + * Allow the specification of a custom centery + */ + if (typeof(this.Get('chart.centery')) == 'number') { + this.centery = this.Get('chart.centery'); + } + + /** + * Alignment (Pie is center aligned by default) Only if centerx is not defined - donut defines the centerx + */ + if (this.Get('chart.align') == 'left') { + this.centerx = this.radius + this.gutterLeft; + + } else if (this.Get('chart.align') == 'right') { + this.centerx = this.canvas.width - this.radius - this.gutterRight; + + } else { + this.centerx = this.canvas.width / 2; + } + + /** + * Allow the specification of a custom centerx + */ + if (typeof(this.Get('chart.centerx')) == 'number') { + this.centerx = this.Get('chart.centerx'); + } + + /** + * Draw the shadow if required + */ + if (this.Get('chart.shadow') && 0) { + + var offsetx = document.all ? this.Get('chart.shadow.offsetx') : 0; + var offsety = document.all ? this.Get('chart.shadow.offsety') : 0; + + this.context.beginPath(); + this.context.fillStyle = this.Get('chart.shadow.color'); + + this.context.shadowColor = this.Get('chart.shadow.color'); + this.context.shadowBlur = this.Get('chart.shadow.blur'); + this.context.shadowOffsetX = this.Get('chart.shadow.offsetx'); + this.context.shadowOffsetY = this.Get('chart.shadow.offsety'); + + this.context.arc(this.centerx + offsetx, this.centery + offsety, this.radius, 0, 6.28, 0); + + this.context.fill(); + + // Now turn off the shadow + RGraph.NoShadow(this); + } + + /** + * The total of the array of values + */ + this.total = RGraph.array_sum(this.data); + + for (var i=0,len=this.data.length; i<len; i++) { + var angle = (this.data[i] / this.total) * 360; + + // Draw the segment + this.DrawSegment(angle,this.Get('chart.colors')[i],i == (this.data.length - 1), i); + } + + RGraph.NoShadow(this); + + + /** + * Redraw the seperating lines + */ + this.DrawBorders(); + + /** + * Now draw the segments again with shadow turned off. This is always performed, + * not just if the shadow is on. + */ + for (var i=0; i<this.angles.length; i++) { + + this.context.beginPath(); + this.context.strokeStyle = this.Get('chart.strokestyle'); + this.context.fillStyle = this.Get('chart.colors')[i]; + this.context.moveTo(this.angles[i][2], this.angles[i][3]); + this.context.arc(this.angles[i][2], + this.angles[i][3], + this.radius, + (this.angles[i][0] / 57.3) * this.Get('chart.effect.roundrobin.multiplier'), + (this.angles[i][1] / 57.3) * this.Get('chart.effect.roundrobin.multiplier'), + false); + this.context.lineTo(this.angles[i][2], this.angles[i][3]); + this.context.closePath(); + this.context.fill(); + this.context.stroke(); + } + + /** + * Draw label sticks + */ + if (this.Get('chart.labels.sticks')) { + this.DrawSticks(); + + // Redraw the border going around the Pie chart if the stroke style is NOT white + if ( + this.Get('chart.strokestyle') != 'white' + && this.Get('chart.strokestyle') != '#fff' + && this.Get('chart.strokestyle') != '#fffffff' + && this.Get('chart.strokestyle') != 'rgb(255,255,255)' + && this.Get('chart.strokestyle') != 'rgba(255,255,255,0)' + ) { + + // Again (?) + this.DrawBorders(); + } + } + + /** + * Draw the labels + */ + this.DrawLabels(); + + /** + * Draw the title + */ + if (this.Get('chart.align') == 'left') { + var centerx = this.radius + this.Get('chart.gutter.left'); + + } else if (this.Get('chart.align') == 'right') { + var centerx = RGraph.GetWidth(this) - (this.radius + this.gutterRight); + + } else { + var centerx = null; + } + + RGraph.DrawTitle(this.canvas, + this.Get('chart.title'), + (this.canvas.height / 2) - this.radius - 5, + centerx, + this.Get('chart.title.size') ? this.Get('chart.title.size') : this.Get('chart.text.size') + 2); + + + /** + * Setup the context menu if required + */ + if (this.Get('chart.contextmenu')) { + RGraph.ShowContext(this); + } + + /** + * Tooltips + */ + if (this.Get('chart.tooltips').length) { + + /** + * Register this object for redrawing + */ + RGraph.Register(this); + + /** + * The onclick event + */ + //this.canvas.onclick = function (e) + var canvas_onclick_func = function (e) + { + RGraph.HideZoomedCanvas(); + + e = RGraph.FixEventObject(e); + + var mouseCoords = RGraph.getMouseXY(e); + + var canvas = e.target; + var context = canvas.getContext('2d'); + var obj = e.target.__object__; + + + + /** + * If it's actually a donut make sure the hyp is bigger + * than the size of the hole in the middle + */ + if (obj.Get('chart.variant') == 'donut' && Math.abs(hyp) < (obj.radius / 2)) { + return; + } + + /** + * The angles for each segment are stored in "angles", + * so go through that checking if the mouse position corresponds + */ + var isDonut = obj.Get('chart.variant') == 'donut'; + var hStyle = obj.Get('chart.highlight.style'); + var segment = obj.getSegment(e); + + if (segment) { + + var x = mouseCoords[0] - segment[0]; + var y = mouseCoords[1] - segment[1]; + var theta = Math.atan(y / x); // RADIANS + var hyp = y / Math.sin(theta); + + + if ( RGraph.Registry.Get('chart.tooltip') + && segment[5] == RGraph.Registry.Get('chart.tooltip').__index__ + && RGraph.Registry.Get('chart.tooltip').__canvas__.__object__.id == obj.id) { + + return; + + } else { + RGraph.Redraw(); + } + + + if (isDonut || hStyle == '2d') { + + context.beginPath(); + + context.strokeStyle = obj.Get('chart.highlight.style.2d.stroke'); + context.fillStyle = obj.Get('chart.highlight.style.2d.fill'); + + //context.moveTo(obj.centerx, obj.centery); + + context.moveTo(segment[0], segment[1]); + context.arc(segment[0], segment[1], segment[2], RGraph.degrees2Radians(obj.angles[segment[5]][0]), RGraph.degrees2Radians(obj.angles[segment[5]][1]), 0); + context.lineTo(segment[0], segment[1]); + context.closePath(); + + context.stroke(); + context.fill(); + + //Removed 7th December 2010 + //context.stroke(); + + } else if (hStyle == 'explode') { + + var exploded = []; + + exploded[segment[5]] = 0; + + RGraph.Registry.Set('chart.pie.exploded', obj); + + setTimeout(function () {var pie = RGraph.Registry.Get('chart.pie.exploded'); pie.Set('chart.exploded', exploded);RGraph.Clear(pie.canvas);pie.Draw(); exploded[segment[5]] += 7;}, 25); + setTimeout(function () {var pie = RGraph.Registry.Get('chart.pie.exploded'); pie.Set('chart.exploded', exploded);RGraph.Clear(pie.canvas);pie.Draw(); exploded[segment[5]] += 7;}, 50); + setTimeout(function () {var pie = RGraph.Registry.Get('chart.pie.exploded'); pie.Set('chart.exploded', exploded);RGraph.Clear(pie.canvas);pie.Draw(); exploded[segment[5]] += 7;}, 75); + setTimeout(function () {var pie = RGraph.Registry.Get('chart.pie.exploded'); pie.Set('chart.exploded', exploded);RGraph.Clear(pie.canvas);pie.Draw(); exploded[segment[5]] += 7;}, 100); + setTimeout(function () {var pie = RGraph.Registry.Get('chart.pie.exploded'); pie.Set('chart.exploded', exploded);RGraph.Clear(pie.canvas);pie.Draw(); exploded[segment[5]] += 7;}, 125); + + setTimeout(function () {RGraph.Registry.Get('chart.pie.exploded').Set('chart.exploded', []);}, 150); + + } else { + + context.lineWidth = 2; + + /** + * Draw a white segment where the one that has been clicked on was + */ + context.fillStyle = 'white'; + context.strokeStyle = 'white'; + context.beginPath(); + context.moveTo(segment[0], segment[1]); + context.arc(segment[0], segment[1], segment[2], obj.angles[segment[5]][0] / 57.3, obj.angles[segment[5]][1] / 57.3, 0); + context.stroke(); + context.fill(); + + context.lineWidth = 1; + + context.shadowColor = '#666'; + context.shadowBlur = 3; + context.shadowOffsetX = 3; + context.shadowOffsetY = 3; + + // Draw the new segment + context.beginPath(); + context.fillStyle = obj.Get('chart.colors')[segment[5]]; + context.strokeStyle = obj.Get('chart.strokestyle'); + context.moveTo(segment[0] - 3, segment[1] - 3); + context.arc(segment[0] - 3, segment[1] - 3, segment[2], RGraph.degrees2Radians(obj.angles[segment[5]][0]), RGraph.degrees2Radians(obj.angles[segment[5]][1]), 0); + context.lineTo(segment[0] - 3, segment[1] - 3); + context.closePath(); + + context.stroke(); + context.fill(); + + // Turn off the shadow + RGraph.NoShadow(obj); + + /** + * If a border is defined, redraw that + */ + if (obj.Get('chart.border')) { + context.beginPath(); + context.strokeStyle = obj.Get('chart.border.color'); + context.lineWidth = 5; + context.arc(segment[0] - 3, segment[1] - 3, obj.radius - 2, RGraph.degrees2Radians(obj.angles[i][0]), RGraph.degrees2Radians(obj.angles[i][1]), 0); + context.stroke(); + } + } + + /** + * If a tooltip is defined, show it + */ + + /** + * Get the tooltip text + */ + var text = RGraph.parseTooltipText(obj.Get('chart.tooltips'), segment[5]); + + if (text) { + RGraph.Tooltip(canvas, text, e.pageX, e.pageY, segment[5]); + } + + /** + * Need to redraw the key? + */ + if (obj.Get('chart.key') && obj.Get('chart.key').length && obj.Get('chart.key.position') == 'graph') { + RGraph.DrawKey(obj, obj.Get('chart.key'), obj.Get('chart.colors')); + } + + e.stopPropagation(); + + return; + } else if (obj.Get('chart.tooltips.event') == 'onclick') { + RGraph.Redraw(); + } + } + var event_name = this.Get('chart.tooltips.event') == 'onmousemove' ? 'mousemove' : 'click'; + + this.canvas.addEventListener(event_name, canvas_onclick_func, false); + RGraph.AddEventListener(this.id, event_name, canvas_onclick_func); + + + + + + + /** + * The onmousemove event for changing the cursor + */ + //this.canvas.onmousemove = function (e) + var canvas_onmousemove_func = function (e) + { + RGraph.HideZoomedCanvas(); + + e = RGraph.FixEventObject(e); + + var obj = e.target.__object__; + var segment = obj.getSegment(e); + + if (segment) { + e.target.style.cursor = 'pointer'; + + return; + } + + /** + * Put the cursor back to null + */ + e.target.style.cursor = 'default'; + } + this.canvas.addEventListener('mousemove', canvas_onmousemove_func, false); + RGraph.AddEventListener(this.id, 'mousemove', canvas_onmousemove_func); + + + + + + + + + + /** + * The window onclick function + */ + var window_onclick_func = function (e) + { + // Taken out on 02/10/11 + //RGraph.HideZoomedCanvas(); + + e = RGraph.FixEventObject(e); + + RGraph.Redraw(); + + /** + * Put the cursor back to null + */ + //e.target.style.cursor = 'default'; + } + window.addEventListener('click', window_onclick_func, false); + RGraph.AddEventListener('window_' + this.id, 'click', window_onclick_func); + } + + + /** + * If a border is pecified, draw it + */ + if (this.Get('chart.border')) { + this.context.beginPath(); + this.context.lineWidth = 5; + this.context.strokeStyle = this.Get('chart.border.color'); + + this.context.arc(this.centerx, + this.centery, + this.radius - 2, + 0, + 6.28, + 0); + + this.context.stroke(); + } + + /** + * Draw the kay if desired + */ + if (this.Get('chart.key') != null) { + //this.Set('chart.key.position', 'graph'); + RGraph.DrawKey(this, this.Get('chart.key'), this.Get('chart.colors')); + } + + + /** + * If this is actually a donut, draw a big circle in the middle + */ + if (this.Get('chart.variant') == 'donut') { + this.context.beginPath(); + this.context.strokeStyle = this.Get('chart.strokestyle'); + this.context.fillStyle = this.Get('chart.variant.donut.color'); + this.context.arc(this.centerx, this.centery, this.radius / 2, 0, 6.28, 0); + this.context.stroke(); + this.context.fill(); + } + + RGraph.NoShadow(this); + + /** + * If the canvas is annotatable, do install the event handlers + */ + if (this.Get('chart.annotatable')) { + RGraph.Annotate(this); + } + + /** + * This bit shows the mini zoom window if requested + */ + if (this.Get('chart.zoom.mode') == 'thumbnail' || this.Get('chart.zoom.mode') == 'area') { + RGraph.ShowZoomWindow(this); + } + + + /** + * This function enables resizing + */ + if (this.Get('chart.resizable')) { + RGraph.AllowResizing(this); + } + + /** + * Fire the RGraph ondraw event + */ + RGraph.FireCustomEvent(this, 'ondraw'); + } + + + /** + * Draws a single segment of the pie chart + * + * @param int degrees The number of degrees for this segment + */ + RGraph.Pie.prototype.DrawSegment = function (degrees, color, last, index) + { + var context = this.context; + var canvas = this.canvas; + var subTotal = this.subTotal; + + context.beginPath(); + + context.fillStyle = color; + context.strokeStyle = this.Get('chart.strokestyle'); + context.lineWidth = 0; + + if (this.Get('chart.shadow')) { + RGraph.SetShadow(this, this.Get('chart.shadow.color'),this.Get('chart.shadow.offsetx'), this.Get('chart.shadow.offsety'), this.Get('chart.shadow.blur')); + } + + /** + * Exploded segments + */ + if ( (typeof(this.Get('chart.exploded')) == 'object' && this.Get('chart.exploded')[index] > 0) || typeof(this.Get('chart.exploded')) == 'number') { + var explosion = typeof(this.Get('chart.exploded')) == 'number' ? this.Get('chart.exploded') : this.Get('chart.exploded')[index]; + var x = 0; + var y = 0; + var h = explosion; + var t = (subTotal + (degrees / 2)) / (360/6.2830); + var x = (Math.cos(t) * explosion); + var y = (Math.sin(t) * explosion); + + this.context.moveTo(this.centerx + x, this.centery + y); + } else { + var x = 0; + var y = 0; + } + + /** + * Calculate the angles + */ + var startAngle = subTotal / 57.3; + var endAngle = (last ? 360 : subTotal + degrees) / 57.3; + + context.arc(this.centerx + x, + this.centery + y, + this.radius, + startAngle * this.Get('chart.effect.roundrobin.multiplier'), + endAngle * this.Get('chart.effect.roundrobin.multiplier'), + 0); + + context.lineTo(this.centerx + x, this.centery + y); + + // Keep hold of the angles + this.angles.push([subTotal, subTotal + degrees, this.centerx + x, this.centery + y]) + this.context.closePath(); + + + + //this.context.stroke(); + this.context.fill(); + + /** + * Calculate the segment angle + */ + this.Get('chart.segments').push([subTotal, subTotal + degrees]); + this.subTotal += degrees; + } + + /** + * Draws the graphs labels + */ + RGraph.Pie.prototype.DrawLabels = function () + { + var hAlignment = 'left'; + var vAlignment = 'center'; + var labels = this.Get('chart.labels'); + var context = this.context; + + /** + * Turn the shadow off + */ + RGraph.NoShadow(this); + + context.fillStyle = 'black'; + context.beginPath(); + + /** + * Draw the key (ie. the labels) + */ + if (labels && labels.length) { + + var text_size = this.Get('chart.text.size'); + + for (i=0; i<labels.length; ++i) { + + /** + * T|his ensures that if we're given too many labels, that we don't get an error + */ + if (typeof(this.Get('chart.segments')[i]) == 'undefined') { + continue; + } + + // Move to the centre + context.moveTo(this.centerx,this.centery); + + var a = this.Get('chart.segments')[i][0] + ((this.Get('chart.segments')[i][1] - this.Get('chart.segments')[i][0]) / 2); + + /** + * Alignment + */ + if (a < 90) { + hAlignment = 'left'; + vAlignment = 'center'; + } else if (a < 180) { + hAlignment = 'right'; + vAlignment = 'center'; + } else if (a < 270) { + hAlignment = 'right'; + vAlignment = 'center'; + } else if (a < 360) { + hAlignment = 'left'; + vAlignment = 'center'; + } + + + /** + * Handle the additional "explosion" offset + */ + if (typeof(this.Get('chart.exploded')) == 'object' && this.Get('chart.exploded')[i] || typeof(this.Get('chart.exploded')) == 'number') { + + var t = ((this.angles[i][1] - this.angles[i][0]) / 2) / (360/6.2830); + var seperation = typeof(this.Get('chart.exploded')) == 'number' ? this.Get('chart.exploded') : this.Get('chart.exploded')[i]; + var angle = ((this.angles[i][1] - this.angles[i][0]) / 2) + this.angles[i][0]; + + // Adjust the angles + var explosion_offsetx = (Math.cos(angle / 57.29) * seperation); + var explosion_offsety = (Math.sin(angle / 57.29) * seperation); + } else { + var explosion_offsetx = 0; + var explosion_offsety = 0; + } + + context.fillStyle = this.Get('chart.text.color'); + + RGraph.Text(context, + this.Get('chart.text.font'), + text_size, + this.centerx + explosion_offsetx + ((this.radius + 10)* Math.cos(a / 57.3)) + (this.Get('chart.labels.sticks') ? (a < 90 || a > 270 ? 2 : -2) : 0), + this.centery + explosion_offsety + (((this.radius + 10) * Math.sin(a / 57.3))), + labels[i], + vAlignment, + hAlignment); + } + + context.fill(); + } + } + + + /** + * This function draws the pie chart sticks (for the labels) + */ + RGraph.Pie.prototype.DrawSticks = function () + { + var context = this.context; + var segments = this.Get('chart.segments'); + var offset = this.Get('chart.linewidth') / 2; + var exploded = this.Get('chart.exploded'); + var sticks = this.Get('chart.labels.sticks'); + + for (var i=0; i<segments.length; ++i) { + + // This allows the chart.labels.sticks to be an array as well as a boolean + if (typeof(sticks) == 'object' && !sticks[i]) { + continue; + } + + var degrees = segments[i][1] - segments[i][0]; + + context.beginPath(); + context.strokeStyle = this.Get('chart.labels.sticks.color'); + context.lineWidth = 1; + + var midpoint = (segments[i][0] + (degrees / 2)) / 57.3; + + if (exploded && exploded[i]) { + var extra = exploded[i]; + } else { + var extra = 0; + } + + context.lineJoin = 'round'; + context.lineWidth = 1; + + context.arc(this.centerx, + this.centery, + this.radius + 7 + extra, + midpoint, + midpoint + 0.01, + 0); + + context.arc(this.centerx, + this.centery, + this.radius - offset + extra, + midpoint, + midpoint + 0.01, + 0); + + context.stroke(); + } + } + + + /** + * The (now Pie chart specific) getSegment function + * + * @param object e The event object + */ + RGraph.Pie.prototype.getSegment = function (e) + { + RGraph.FixEventObject(e); + + // The optional arg provides a way of allowing some accuracy (pixels) + var accuracy = arguments[1] ? arguments[1] : 0; + + var obj = e.target.__object__; + var canvas = obj.canvas; + var context = obj.context; + var mouseCoords = RGraph.getMouseXY(e); + var r = obj.radius; + var angles = obj.angles; + var ret = []; + + for (var i=0; i<angles.length; ++i) { + + var x = mouseCoords[0] - angles[i][2]; + var y = mouseCoords[1] - angles[i][3]; + var theta = Math.atan(y / x); // RADIANS + var hyp = y / Math.sin(theta); + var hyp = (hyp < 0) ? hyp + accuracy : hyp - accuracy; + // Put theta in DEGREES + theta *= 57.3 + + /** + * Account for the correct quadrant + */ + if (x < 0 && y >= 0) { + theta += 180; + } else if (x < 0 && y < 0) { + theta += 180; + } else if (x > 0 && y < 0) { + theta += 360; + } + + if (theta > 360) { + theta -= 360; + } + + if (theta >= angles[i][0] && theta < angles[i][1]) { + + hyp = Math.abs(hyp); + + if (!hyp || (obj.radius && hyp > obj.radius) ) { + return null; + } + + if (obj.type == 'pie' && obj.Get('chart.variant') == 'donut' && (hyp > obj.radius || hyp < (obj.radius / 2) ) ) { + return null; + } + + ret[0] = angles[i][2]; + ret[1] = angles[i][3]; + ret[2] = (obj.type == 'rose') ? angles[i][2] : obj.radius; + ret[3] = angles[i][0]; + ret[4] = angles[i][1]; + ret[5] = i; + + + + if (ret[3] < 0) ret[3] += 360; + if (ret[4] > 360) ret[4] -= 360; + + return ret; + } + } + + return null; + } + + + RGraph.Pie.prototype.DrawBorders = function () + { + if (this.Get('chart.linewidth') > 0) { + + this.context.lineWidth = this.Get('chart.linewidth'); + this.context.strokeStyle = this.Get('chart.strokestyle'); + + for (var i=0,len=this.angles.length; i<len; ++i) { + this.context.beginPath(); + this.context.moveTo(this.angles[i][2], this.angles[i][3]); + this.context.arc(this.angles[i][2], this.angles[i][3], this.radius, this.angles[i][0] / 57.3, (this.angles[i][0] + 0.01) / 57.3, 0); + this.context.arc(this.angles[i][2], this.angles[i][3], this.radius, this.angles[i][0] / 57.3, (this.angles[i][1]) / 57.3, 0); + this.context.closePath(); + + this.context.stroke(); + } + } + } + + + /** + * Returns the radius of the pie chart + */ + RGraph.Pie.prototype.getRadius = function () + { + return Math.min(this.canvas.height - this.gutterTop - this.gutterBottom, this.canvas.width - this.gutterLeft - this.gutterRight) / 2; + }
\ No newline at end of file diff --git a/schall/static/RGraph/libraries/RGraph.radar.js b/schall/static/RGraph/libraries/RGraph.radar.js new file mode 100644 index 0000000..fd63e8f --- /dev/null +++ b/schall/static/RGraph/libraries/RGraph.radar.js @@ -0,0 +1,739 @@ + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + + if (typeof(RGraph) == 'undefined') RGraph = {}; + + /** + * The traditional radar chart constructor + * + * @param string id The ID of the canvas + * @param array data An array of data to represent + */ + RGraph.Radar = function (id, data) + { + this.id = id; + this.canvas = document.getElementById(id); + this.context = this.canvas.getContext('2d'); + this.canvas.__object__ = this; + this.size = null;// Set in the .Draw() method + this.type = 'radar'; + this.coords = []; + this.isRGraph = true; + this.data = []; + this.max = 0; + + for (var i=1; i<arguments.length; ++i) { + this.data.push(RGraph.array_clone(arguments[i])); + this.max = Math.max(this.max, RGraph.array_max(arguments[i])); + } + + /** + * Compatibility with older browsers + */ + RGraph.OldBrowserCompat(this.context); + + + this.properties = { + 'chart.strokestyle': 'black', + 'chart.gutter.left': 25, + 'chart.gutter.right': 25, + 'chart.gutter.top': 25, + 'chart.gutter.bottom': 25, + 'chart.linewidth': 1, + 'chart.colors': ['red', 'green', 'blue'], + 'chart.colors.alpha': null, + 'chart.circle': 0, + 'chart.circle.fill': 'red', + 'chart.circle.stroke': 'black', + 'chart.labels': [], + 'chart.labels.offsetx': 10, + 'chart.labels.offsety': 10, + 'chart.background.circles': true, + 'chart.text.size': 10, + 'chart.text.font': 'Verdana', + 'chart.text.color': 'black', + 'chart.title': '', + 'chart.title.background': null, + 'chart.title.hpos': null, + 'chart.title.vpos': null, + 'chart.title.color': 'black', + 'chart.title.bold': true, + 'chart.title.font': null, + 'chart.linewidth': 1, + + 'chart.key': null, + 'chart.key.background': 'white', + 'chart.key.shadow': false, + 'chart.key.shadow.color': '#666', + 'chart.key.shadow.blur': 3, + 'chart.key.shadow.offsetx': 2, + 'chart.key.shadow.offsety': 2, + 'chart.key.position': 'graph', + 'chart.key.halign': 'right', + 'chart.key.position.gutter.boxed': true, + 'chart.key.position.x': null, + 'chart.key.position.y': null, + 'chart.key.color.shape': 'square', + 'chart.key.rounded': true, + 'chart.key.linewidth': 1, + + 'chart.contextmenu': null, + 'chart.annotatable': false, + 'chart.annotate.color': 'black', + 'chart.zoom.factor': 1.5, + 'chart.zoom.fade.in': true, + 'chart.zoom.fade.out': true, + 'chart.zoom.hdir': 'right', + 'chart.zoom.vdir': 'down', + 'chart.zoom.frames': 25, + 'chart.zoom.delay': 16.666, + 'chart.zoom.shadow': true, + 'chart.zoom.mode': 'canvas', + 'chart.zoom.thumbnail.width': 75, + 'chart.zoom.thumbnail.height': 75, + 'chart.zoom.background': true, + 'chart.zoom.action': 'zoom', + 'chart.tooltips.effect': 'fade', + 'chart.tooltips.css.class': 'RGraph_tooltip', + 'chart.tooltips.highlight': true, + 'chart.highlight.stroke': 'gray', + 'chart.highlight.fill': 'white', + 'chart.resizable': false, + 'chart.resize.handle.adjust': [0,0], + 'chart.resize.handle.background': null, + 'chart.labels.axes': 'nsew', + 'chart.ymax': null + } + + // Must have at least 3 points + for (var dataset=0; dataset<this.data.length; ++dataset) { + if (this.data[dataset].length < 3) { + alert('[RADAR] You must specify at least 3 data points'); + return; + } + } + + + /** + * Set the .getShape commonly named method + */ + this.getShape = this.getPoint; + } + + + /** + * A simple setter + * + * @param string name The name of the property to set + * @param string value The value of the property + */ + RGraph.Radar.prototype.Set = function (name, value) + { + this.properties[name] = value; + + /** + * If the name is chart.color, set chart.colors too + */ + if (name == 'chart.color') { + this.properties['chart.colors'] = [value]; + } + } + + + /** + * A simple hetter + * + * @param string name The name of the property to get + */ + RGraph.Radar.prototype.Get = function (name) + { + return this.properties[name]; + } + + + /** + * The draw method which does all the brunt of the work + */ + RGraph.Radar.prototype.Draw = function () + { + /** + * Fire the onbeforedraw event + */ + RGraph.FireCustomEvent(this, 'onbeforedraw'); + + /** + * Clear all of this canvases event handlers (the ones installed by RGraph) + */ + RGraph.ClearEventListeners(this.id); + + /** + * This is new in May 2011 and facilitates indiviual gutter settings, + * eg chart.gutter.left + */ + this.gutterLeft = this.Get('chart.gutter.left'); + this.gutterRight = this.Get('chart.gutter.right'); + this.gutterTop = this.Get('chart.gutter.top'); + this.gutterBottom = this.Get('chart.gutter.bottom'); + + this.centerx = ((this.canvas.width - this.gutterLeft - this.gutterRight) / 2) + this.gutterLeft; + this.centery = ((this.canvas.height - this.gutterTop - this.gutterBottom) / 2) + this.gutterTop; + this.size = Math.min(this.canvas.width - this.gutterLeft - this.gutterRight, this.canvas.height - this.gutterTop - this.gutterBottom); + + // Work out the maximum value and the sum + if (!this.Get('chart.ymax')) { + + // this.max is calculated in the constructor + + this.scale = RGraph.getScale(this.max, this); + this.max = this.scale[4]; + } else { + var ymax = this.Get('chart.ymax'); + + this.scale = [ + ymax * 0.2, + ymax * 0.4, + ymax * 0.6, + ymax * 0.8, + ymax * 1 + ]; + this.max = this.scale[4]; + } + + this.DrawBackground(); + this.DrawAxes(); + this.DrawCircle(); + this.DrawAxisLabels(); + this.DrawChart(); + this.DrawLabels(); + + // Draw the title + if (this.Get('chart.title')) { + RGraph.DrawTitle(this.canvas, this.Get('chart.title'), this.gutterTop, null, this.Get('chart.title.size') ? this.Get('chart.title.size') : null) + } + + // Draw the key if necessary + // obj, key, colors + if (this.Get('chart.key')) { + RGraph.DrawKey(this, this.Get('chart.key'), this.Get('chart.colors')); + } + + /** + * Show the context menu + */ + if (this.Get('chart.contextmenu')) { + RGraph.ShowContext(this); + } + + /** + * If the canvas is annotatable, do install the event handlers + */ + if (this.Get('chart.annotatable')) { + RGraph.Annotate(this); + } + + /** + * This bit shows the mini zoom window if requested + */ + if (this.Get('chart.zoom.mode') == 'thumbnail' || this.Get('chart.zoom.mode') == 'area') { + RGraph.ShowZoomWindow(this); + } + + + /** + * This function enables resizing + */ + if (this.Get('chart.resizable')) { + RGraph.AllowResizing(this); + } + + + /** + * This function enables adjusting + */ + if (this.Get('chart.adjustable')) { + RGraph.AllowAdjusting(this); + } + + /** + * Fire the RGraph ondraw event + */ + RGraph.FireCustomEvent(this, 'ondraw'); + } + + + /** + * Draws the background circles + */ + RGraph.Radar.prototype.DrawBackground = function () + { + var color = '#ddd'; + + /** + * Draws the background circles + */ + if (this.Get('chart.background.circles')) { + + this.context.strokeStyle = color; + this.context.beginPath(); + + for (var r=5; r<(this.size / 2); r+=15) { + + this.context.moveTo(this.centerx, this.centery); + this.context.arc(this.centerx, this.centery,r, 0, 6.28, 0); + } + + this.context.stroke(); + } + + + /** + * Draw diagonals + */ + this.context.strokeStyle = color; + for (var i=0; i<360; i+=15) { + this.context.beginPath(); + this.context.arc(this.centerx, this.centery, this.size / 2, (i / 360) * (2 * Math.PI), ((i+0.01) / 360) * (2 * Math.PI), 0); // The 0.01 avoids a bug in Chrome 6 + this.context.lineTo(this.centerx, this.centery); + this.context.stroke(); + } + } + + + /** + * Draws the axes + */ + RGraph.Radar.prototype.DrawAxes = function () + { + this.context.strokeStyle = 'black'; + + var halfsize = this.size / 2; + + this.context.beginPath(); + + /** + * The Y axis + */ + this.context.moveTo(this.centerx, this.centery + halfsize); + this.context.lineTo(this.centerx, this.centery - halfsize); + + + // Draw the bits at either end of the Y axis + this.context.moveTo(this.centerx - 5, this.centery + halfsize); + this.context.lineTo(this.centerx + 5, this.centery + halfsize); + this.context.moveTo(this.centerx - 5, this.centery - halfsize); + this.context.lineTo(this.centerx + 5, this.centery - halfsize); + + // Draw X axis tick marks + for (var y=(this.centery - halfsize); y<(this.centery + halfsize); y+=15) { + this.context.moveTo(this.centerx - 3, y); + this.context.lineTo(this.centerx + 3, y); + } + + /** + * The X axis + */ + this.context.moveTo(this.centerx - halfsize, this.centery); + this.context.lineTo(this.centerx + halfsize, this.centery); + + // Draw the bits at the end of the X axis + this.context.moveTo(this.centerx - halfsize, this.centery - 5); + this.context.lineTo(this.centerx - halfsize, this.centery + 5); + this.context.moveTo(this.centerx + halfsize, this.centery - 5); + this.context.lineTo(this.centerx + halfsize, this.centery + 5); + + // Draw X axis tick marks + for (var x=(this.centerx - halfsize); x<(this.centerx + halfsize); x+=15) { + this.context.moveTo(x, this.centery - 3); + this.context.lineTo(x, this.centery + 3); + } + + /** + * Finally draw it to the canvas + */ + this.context.stroke(); + } + + + /** + * The function which actually draws the radar chart + */ + RGraph.Radar.prototype.DrawChart = function () + { + var alpha = this.Get('chart.colors.alpha'); + + if (typeof(alpha) == 'number') { + var oldAlpha = this.context.globalAlpha; + this.context.globalAlpha = alpha; + } + + for (var dataset=0; dataset<this.data.length; ++dataset) { + + this.context.beginPath(); + + this.coords[dataset] = []; + + for (var i=0; i<this.data[dataset].length; ++i) { + this.coords[dataset][i] = this.GetCoordinates(dataset, i); + } + + /** + * Now go through the coords and draw the chart itself + */ + this.context.strokeStyle = this.Get('chart.strokestyle'); + this.context.fillStyle = this.Get('chart.colors')[dataset]; + this.context.lineWidth = this.Get('chart.linewidth'); + + for (i=0; i<this.coords[dataset].length; ++i) { + if (i == 0) { + this.context.moveTo(this.coords[dataset][i][0], this.coords[dataset][i][1]); + } else { + this.context.lineTo(this.coords[dataset][i][0], this.coords[dataset][i][1]); + } + } + + this.context.closePath(); + + this.context.stroke(); + this.context.fill(); + + /** + * Can now handletooltips + */ + if (this.Get('chart.tooltips')) { + + RGraph.Register(this); + + var canvas_onmousemove_func = function (e) + { + e = RGraph.FixEventObject(e); + + var canvas = e.target; + var obj = canvas.__object__; + var overHotspot = false; + var point = obj.getPoint(e); + + + if (point) { + + var dataset = point[3]; + var idx = point[4]; + + if ( !RGraph.Registry.Get('chart.tooltip') + || (RGraph.Registry.Get('chart.tooltip').__index__ != idx && RGraph.Registry.Get('chart.tooltip').__dataset__ != dataset) + || (RGraph.Registry.Get('chart.tooltip').__index__ != idx && RGraph.Registry.Get('chart.tooltip').__dataset__ == dataset) + ) { + + /** + * Get the tooltip text + */ + var text = RGraph.parseTooltipText(obj.Get('chart.tooltips'), idx); + + if (typeof(text) == 'string' && text.length) { + + overHotspot = true; + obj.canvas.style.cursor = 'pointer'; + + RGraph.Clear(obj.canvas); + obj.Draw(); + + if (obj.Get('chart.tooltips.highlight')) { + obj.context.beginPath(); + obj.context.strokeStyle = obj.Get('chart.highlight.stroke'); + obj.context.fillStyle = obj.Get('chart.highlight.fill'); + obj.context.arc(point[1], point[2], 2, 0, 6.28, 0); + obj.context.fill(); + obj.context.stroke(); + } + + RGraph.Tooltip(obj.canvas, text, e.pageX, e.pageY, idx); + + // Set the data set value on the tooltip + RGraph.Registry.Get('chart.tooltip').__index__ = idx; + RGraph.Registry.Get('chart.tooltip').__dataset__ = dataset; + + + } + //} else if (RGraph.Registry.Get('chart.tooltip') && RGraph.Registry.Get('chart.tooltip').__index__ == idx && RGraph.Registry.Get('chart.tooltip').__dataset__ == dataset) { + } else { + overHotspot = true; + obj.canvas.style.cursor = 'pointer'; + } + } + + if (!overHotspot) { + obj.canvas.style.cursor = 'default'; + } + } + this.canvas.addEventListener('mousemove', canvas_onmousemove_func, false); + RGraph.AddEventListener(this.id, 'mousemove', canvas_onmousemove_func); + } + } + + // Reset the globalAlpha + if (typeof(alpha) == 'number') { + this.context.globalAlpha = oldAlpha; + } + } + + + /** + * Gets the coordinates for a particular mark + * + * @param number i The index of the data (ie which one it is) + * @return array A two element array of the coordinates + */ + RGraph.Radar.prototype.GetCoordinates = function (dataset, index) + { + // The number of data points + var len = this.data[dataset].length; + + // The magnitude of the data (NOT the x/y coords) + var mag = (this.data[dataset][index] / this.max) * (this.size / 2); + + /** + * Get the angle + */ + var angle = (6.28 / len) * index; // In radians + + /** + * Work out the X/Y coordinates + */ + var x = Math.cos(angle) * mag; + var y = Math.sin(angle) * mag; + + /** + * Put the coordinate in the right quadrant + */ + x = this.centerx + x; + y = this.centery + (index == 0 ? 0 : y); + + return [x,y]; + } + + + /** + * This function adds the labels to the chart + */ + RGraph.Radar.prototype.DrawLabels = function () + { + var labels = this.Get('chart.labels'); + + if (labels && labels.length > 0) { + + this.context.lineWidth = 1; + this.context.fillStyle = this.Get('chart.text.color'); + + var offsetx = this.Get('chart.labels.offsetx'); + var offsety = this.Get('chart.labels.offsety'); + + for (var i=0; i<labels.length; ++i) { + + var ds = 0; + + for (var dataset=0; dataset<this.data.length; ++dataset) { + if (this.data[dataset][i] > this.data[ds][i]) { + ds = dataset; + } + } + + var x = this.coords[ds][i][0]; + var y = this.coords[ds][i][1]; + var text = labels[i]; + var hAlign = 'center'; + var vAlign = 'center'; + var quartile = (i / this.coords.length); + + // ~Manually do labels on the right middle axis + if (i == 0) { + hAlign = 'left'; + vAlign = 'center'; + x += offsetx; + + } else { + + hAlign = (x < this.centerx) ? 'right' : 'left'; + vAlign = (y < this.centery) ? 'bottom' : 'top'; + x += (x < this.centerx) ? (-1 * offsetx) : offsetx; + y += (y < this.centery) ? (-1 * offsety) : offsety; + + if (i / this.data.length == 0.25) { x -= offsetx; hAlign = 'center'; + } else if (i / this.data.length == 0.5) { y -= offsety; vAlign = 'center'; + } else if (i / this.data.length == 0.75) { x += offsetx; hAlign = 'center'; } + } + + // context, font, size, x, y, text + RGraph.Text(this.context, this.Get('chart.text.font'), this.Get('chart.text.size'), x, y, text, vAlign, hAlign, true, null, 'white'); + } + } + } + + + /** + * Draws the circle. No arguments as it gets the information from the object properties. + */ + RGraph.Radar.prototype.DrawCircle = function () + { + var circle = {}; + circle.limit = this.Get('chart.circle'); + circle.fill = this.Get('chart.circle.fill'); + circle.stroke = this.Get('chart.circle.stroke'); + + if (circle.limit) { + + var r = (circle.limit / this.max) * (this.size / 2); + + this.context.fillStyle = circle.fill; + this.context.strokeStyle = circle.stroke; + + this.context.beginPath(); + this.context.arc(this.centerx, this.centery, r, 0, 6.28, 0); + this.context.fill(); + this.context.stroke(); + } + } + + + /** + * Unsuprisingly, draws the labels + */ + RGraph.Radar.prototype.DrawAxisLabels = function () + { + /** + * Draw specific axis labels + */ + if (this.Get('chart.labels.specific')) { + this.DrawSpecificAxisLabels(); + return; + } + + this.context.lineWidth = 1; + + // Set the color to black + this.context.fillStyle = 'black'; + this.context.strokeStyle = 'black'; + + var r = (this.size/ 2); + var font_face = this.Get('chart.text.font'); + var font_size = this.Get('chart.text.size'); + var context = this.context; + var axes = this.Get('chart.labels.axes').toLowerCase(); + var color = 'rgba(255,255,255,0.8)'; + + // The "North" axis labels + if (axes.indexOf('n') > -1) { + RGraph.Text(context,font_face,font_size,this.centerx,this.centery - (r * 0.2),String(this.scale[0]),'center','center',true,false,color); + RGraph.Text(context, font_face, font_size, this.centerx, this.centery - (r * 0.4), String(this.scale[1]), 'center', 'center', true, false, color); + RGraph.Text(context, font_face, font_size, this.centerx, this.centery - (r * 0.6), String(this.scale[2]), 'center', 'center', true, false, color); + RGraph.Text(context, font_face, font_size, this.centerx, this.centery - (r * 0.8), String(this.scale[3]), 'center', 'center', true, false, color); + RGraph.Text(context, font_face, font_size, this.centerx, this.centery - r, String(this.scale[4]), 'center', 'center', true, false, color); + } + + // The "South" axis labels + if (axes.indexOf('s') > -1) { + RGraph.Text(context, font_face, font_size, this.centerx, this.centery + (r * 0.2), String(this.scale[0]), 'center', 'center', true, false, color); + RGraph.Text(context, font_face, font_size, this.centerx, this.centery + (r * 0.4), String(this.scale[1]), 'center', 'center', true, false, color); + RGraph.Text(context, font_face, font_size, this.centerx, this.centery + (r * 0.6), String(this.scale[2]), 'center', 'center', true, false, color); + RGraph.Text(context, font_face, font_size, this.centerx, this.centery + (r * 0.8), String(this.scale[3]), 'center', 'center', true, false, color); + RGraph.Text(context, font_face, font_size, this.centerx, this.centery + r, String(this.scale[4]), 'center', 'center', true, false, color); + } + + // The "East" axis labels + if (axes.indexOf('e') > -1) { + RGraph.Text(context, font_face, font_size, this.centerx + (r * 0.2), this.centery, String(this.scale[0]), 'center', 'center', true, false, color); + RGraph.Text(context, font_face, font_size, this.centerx + (r * 0.4), this.centery, String(this.scale[1]), 'center', 'center', true, false, color); + RGraph.Text(context, font_face, font_size, this.centerx + (r * 0.6), this.centery, String(this.scale[2]), 'center', 'center', true, false, color); + RGraph.Text(context, font_face, font_size, this.centerx + (r * 0.8), this.centery, String(this.scale[3]), 'center', 'center', true, false, color); + RGraph.Text(context, font_face, font_size, this.centerx + r, this.centery, String(this.scale[4]), 'center', 'center', true, false, color); + } + + // The "West" axis labels + if (axes.indexOf('w') > -1) { + RGraph.Text(context, font_face, font_size, this.centerx - (r * 0.2), this.centery, String(this.scale[0]), 'center', 'center', true, false, color); + RGraph.Text(context, font_face, font_size, this.centerx - (r * 0.4), this.centery, String(this.scale[1]), 'center', 'center', true, false, color); + RGraph.Text(context, font_face, font_size, this.centerx - (r * 0.6), this.centery, String(this.scale[2]), 'center', 'center', true, false, color); + RGraph.Text(context, font_face, font_size, this.centerx - (r * 0.8), this.centery, String(this.scale[3]), 'center', 'center', true, false, color); + RGraph.Text(context, font_face, font_size, this.centerx - r, this.centery, String(this.scale[4]), 'center', 'center', true, false, color); + } + + RGraph.Text(context, font_face, font_size, this.centerx, this.centery, '0', 'center', 'center', true, false, color); + } + + + /** + * Draws specific axis labels + */ + RGraph.Radar.prototype.DrawSpecificAxisLabels = function () + { + /** + * Specific Y labels + */ + var labels = this.Get('chart.labels.specific'); + var context = this.context; + var font = this.Get('chart.text.font'); + var size = this.Get('chart.text.size'); + var axes = this.Get('chart.labels.axes').toLowerCase(); + var interval = this.size / (labels.length * 2); + + for (var i=0; i<labels.length; ++i) { + + if (axes.indexOf('n') > -1) RGraph.Text(context,font,size,this.gutterLeft + (this.size / 2),this.gutterTop + (i * interval),labels[i],'center','center', true, false, 'rgba(255,255,255,0.8)'); + if (axes.indexOf('s') > -1) RGraph.Text(context,font,size,this.gutterLeft + (this.size / 2),this.gutterTop + (this.size / 2) + (i * interval) + interval,RGraph.array_reverse(labels)[i],'center','center', true, false, 'rgba(255,255,255,0.8)'); + if (axes.indexOf('w') > -1) RGraph.Text(context,font,size,this.gutterLeft + (i * interval),this.gutterTop + (this.size / 2),labels[i],'center','center', true, false, 'rgba(255,255,255,0.8)'); + if (axes.indexOf('e') > -1) RGraph.Text(context,font,size,this.gutterLeft + (i * interval) + interval + (this.size / 2),this.gutterTop + (this.size / 2),RGraph.array_reverse(labels)[i],'center','center', true, false, 'rgba(255,255,255,0.8)'); + } + } + + + /** + * This method eases getting the focussed point (if any) + * + * @param event e The event object + */ + RGraph.Radar.prototype.getPoint = function (e) + { + var obj = e.target.__object__; + var canvas = obj.canvas; + var context = obj.context; + + for(var dataset=0; dataset<obj.coords.length; ++dataset) { + for (var i=0; i<obj.coords[dataset].length; ++i) { + + var x = obj.coords[dataset][i][0]; + var y = obj.coords[dataset][i][1]; + var tooltips = obj.Get('chart.tooltips'); + var idx = Number(i); + var mouseCoords = RGraph.getMouseXY(e); + var mouseX = mouseCoords[0]; + var mouseY = mouseCoords[1]; + + if ( + (tooltips[i] || tooltips) // The order here is important due to short circuiting + && mouseX < (x + 5) + && mouseX > (x - 5) + && mouseY > (y - 5) + && mouseY < (y + 5) + ) { + + // This accounts for the datasets and increases the index accordingly + for(var j=0; j<dataset; j++) { + if (typeof(obj.data[j]) == 'object') { + i += obj.data[j].length; + } + } + + return [obj, x, y, dataset, i]; + } + } + } + }
\ No newline at end of file diff --git a/schall/static/RGraph/libraries/RGraph.rose.js b/schall/static/RGraph/libraries/RGraph.rose.js new file mode 100644 index 0000000..99bf353 --- /dev/null +++ b/schall/static/RGraph/libraries/RGraph.rose.js @@ -0,0 +1,894 @@ + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + + if (typeof(RGraph) == 'undefined') RGraph = {}; + + /** + * The rose chart constuctor + * + * @param object canvas + * @param array data + */ + RGraph.Rose = function (id, data) + { + this.id = id; + this.canvas = document.getElementById(id); + this.context = this.canvas.getContext('2d'); + this.data = data; + this.canvas.__object__ = this; + this.type = 'rose'; + this.isRGraph = true; + + + /** + * Compatibility with older browsers + */ + RGraph.OldBrowserCompat(this.context); + + + this.centerx = 0; + this.centery = 0; + this.radius = 0; + this.max = 0; + + this.properties = { + 'chart.radius': null, + 'chart.colors': ['red', 'rgb(0,255,255)', 'rgb(0,255,0)', 'gray', 'blue', 'rgb(255,128,255)','green', 'pink', 'gray', 'aqua'], + 'chart.colors.sequential': false, + 'chart.colors.alpha': null, + 'chart.margin': 0, + 'chart.strokestyle': 'rgba(0,0,0,0.5)', + 'chart.gutter.left': 25, + 'chart.gutter.right': 25, + 'chart.gutter.top': 25, + 'chart.gutter.bottom': 25, + 'chart.title': '', + 'chart.title.background': null, + 'chart.title.hpos': null, + 'chart.title.vpos': null, + 'chart.title.bold': true, + 'chart.title.font': null, + 'chart.labels': null, + 'chart.labels.position': 'center', + 'chart.labels.axes': 'nsew', + 'chart.labels.offset': 0, + 'chart.text.color': 'black', + 'chart.text.font': 'Verdana', + 'chart.text.size': 10, + 'chart.key': null, + 'chart.key.background': 'white', + 'chart.key.position': 'graph', + 'chart.key.halign': 'right', + 'chart.key.shadow': false, + 'chart.key.shadow.color': '#666', + 'chart.key.shadow.blur': 3, + 'chart.key.shadow.offsetx': 2, + 'chart.key.shadow.offsety': 2, + 'chart.key.position.gutter.boxed': true, + 'chart.key.position.x': null, + 'chart.key.position.y': null, + 'chart.key.color.shape': 'square', + 'chart.key.rounded': true, + 'chart.key.linewidth': 1, + 'chart.contextmenu': null, + 'chart.tooltips': null, + 'chart.tooltips.event': 'onclick', + 'chart.tooltips.effect': 'fade', + 'chart.tooltips.css.class': 'RGraph_tooltip', + 'chart.tooltips.highlight': true, + 'chart.highlight.stroke': 'black', + 'chart.highlight.fill': 'rgba(255,255,255,0.5)', + 'chart.annotatable': false, + 'chart.annotate.color': 'black', + 'chart.zoom.factor': 1.5, + 'chart.zoom.fade.in': true, + 'chart.zoom.fade.out': true, + 'chart.zoom.hdir': 'right', + 'chart.zoom.vdir': 'down', + 'chart.zoom.frames': 25, + 'chart.zoom.delay': 16.666, + 'chart.zoom.shadow': true, + 'chart.zoom.mode': 'canvas', + 'chart.zoom.thumbnail.width': 75, + 'chart.zoom.thumbnail.height': 75, + 'chart.zoom.background': true, + 'chart.zoom.action': 'zoom', + 'chart.resizable': false, + 'chart.resize.handle.adjust': [0,0], + 'chart.resize.handle.background': null, + 'chart.adjustable': false, + 'chart.ymax': null, + 'chart.ymin': 0, + 'chart.scale.decimals': null, + 'chart.variant': 'stacked', + 'chart.animation.grow.factor': 1 + } + + + /** + * Set the .getShape commonly named method + */ + this.getShape = this.getSegment; + } + + + /** + * A simple setter + * + * @param string name The name of the property to set + * @param string value The value of the property + */ + RGraph.Rose.prototype.Set = function (name, value) + { + this.properties[name.toLowerCase()] = value; + } + + + /** + * A simple getter + * + * @param string name The name of the property to get + */ + RGraph.Rose.prototype.Get = function (name) + { + return this.properties[name.toLowerCase()]; + } + + + /** + * This method draws the rose chart + */ + RGraph.Rose.prototype.Draw = function () + { + /** + * Fire the onbeforedraw event + */ + RGraph.FireCustomEvent(this, 'onbeforedraw'); + + /** + * Clear all of this canvases event handlers (the ones installed by RGraph) + */ + RGraph.ClearEventListeners(this.id); + + + /** + * This doesn't affect the chart, but is used for compatibility + */ + this.gutterLeft = this.Get('chart.gutter.left'); + this.gutterRight = this.Get('chart.gutter.right'); + this.gutterTop = this.Get('chart.gutter.top'); + this.gutterBottom = this.Get('chart.gutter.bottom'); + + // Calculate the radius + this.radius = (Math.min(RGraph.GetWidth(this) - this.gutterLeft - this.gutterRight, RGraph.GetHeight(this) - this.gutterTop - this.gutterBottom) / 2); + this.centerx = RGraph.GetWidth(this) / 2; + this.centery = RGraph.GetHeight(this) / 2; + this.angles = []; + this.total = 0; + this.startRadians = 0; + + // User specified radius + if (typeof(this.Get('chart.radius')) == 'number') { + this.radius = this.Get('chart.radius'); + } + + /** + * Change the centerx marginally if the key is defined + */ + if (this.Get('chart.key') && this.Get('chart.key').length > 0 && this.Get('chart.key').length >= 3) { + this.centerx = this.centerx - this.Get('chart.gutter.right') + 5; + } + + this.DrawBackground(); + this.DrawRose(); + this.DrawLabels(); + + /** + * Setup the context menu if required + */ + if (this.Get('chart.contextmenu')) { + RGraph.ShowContext(this); + } + + /** + * Tooltips + */ + if (this.Get('chart.tooltips')) { + + /** + * Register this object for redrawing + */ + RGraph.Register(this); + + /** + * The onclick event + */ + var canvas_onclick_func = function (e) + { + var obj = e.target.__object__; + var canvas = e.target; + var context = canvas.getContext('2d'); + + e = RGraph.FixEventObject(e); + + RGraph.Redraw(); + + var segment = obj.getSegment(e); + + if (segment && obj.Get('chart.tooltips')) { + + /** + * Get the tooltip text + */ + if (typeof(obj.Get('chart.tooltips')) == 'function') { + var text = String(obj.Get('chart.tooltips')(segment[6])); + } else if (typeof(obj.Get('chart.tooltips')) == 'object' && typeof(obj.Get('chart.tooltips')[segment[6]]) == 'function') { + var text = String(obj.Get('chart.tooltips')[segment[6]](segment[6])); + } else if (typeof(obj.Get('chart.tooltips')) == 'object' && (typeof(obj.Get('chart.tooltips')[segment[6]]) == 'string' || typeof(obj.Get('chart.tooltips')[segment[6]]) == 'number')) { + var text = String(obj.Get('chart.tooltips')[segment[6]]); + } else { + var text = null; + } + + if (text) { + context.beginPath(); + context.strokeStyle = obj.Get('chart.highlight.stroke'); + context.fillStyle = obj.Get('chart.highlight.fill'); + + // This highlights the chart + context.arc(obj.centerx, obj.centery, segment[3], segment[4] / 57.3, segment[5] / 57.3, false); + context.arc(obj.centerx, obj.centery, segment[2] + 0.01, segment[5] / 57.3, segment[4] / 57.3, true); + + context.closePath(); + + context.fill(); + context.stroke(); + + context.strokeStyle = 'rgba(0,0,0,0)'; + + // Taken out on 12th June 2011 + //obj.DrawLabels(); + + /** + * Show the tooltip + */ + RGraph.Tooltip(canvas, text, e.pageX, e.pageY, segment[6]); + + e.stopPropagation(); + } + + return; + } + } + this.canvas.addEventListener('click', canvas_onclick_func, false); + RGraph.AddEventListener(this.id, 'click', canvas_onclick_func); + + + /** + * The onmousemove event + */ + var canvas_onmousemove_func = function (e) + { + + var obj = e.target.__object__; + var canvas = e.target; + var context = canvas.getContext('2d'); + + e = RGraph.FixEventObject(e); + + var segment = obj.getSegment(e); + + if (segment && obj.Get('chart.tooltips')) { + + /** + * Get the tooltip text + */ + if (typeof(obj.Get('chart.tooltips')) == 'function') { + var text = String(obj.Get('chart.tooltips')(segment[6])); + } else if (typeof(obj.Get('chart.tooltips')) == 'object' && typeof(obj.Get('chart.tooltips')[segment[6]]) == 'function') { + var text = String(obj.Get('chart.tooltips')[segment[6]](segment[6])); + } else if (typeof(obj.Get('chart.tooltips')) == 'object' && (typeof(obj.Get('chart.tooltips')[segment[6]]) == 'string' || typeof(obj.Get('chart.tooltips')[segment[6]]) == 'number')) { + var text = String(obj.Get('chart.tooltips')[segment[6]]); + } else { + var text = null; + } + + if (text) { + canvas.style.cursor = 'pointer'; + + /******************************************************* + * This is here in case tooltips are using the + * onmousemove event + *******************************************************/ + if (obj.Get('chart.tooltips.event') == 'onmousemove') { + if (!RGraph.Registry.Get('chart.tooltip') || RGraph.Registry.Get('chart.tooltip').__index__ != segment[6]) { + canvas_onclick_func(e); + } + } + + } else { + canvas.style.cursor = 'default'; + } + + return; + } + + canvas.style.cursor = 'default'; + } + this.canvas.addEventListener('mousemove', canvas_onmousemove_func, false); + RGraph.AddEventListener(this.id, 'mousemove', canvas_onmousemove_func); + } + + /** + * If the canvas is annotatable, do install the event handlers + */ + if (this.Get('chart.annotatable')) { + RGraph.Annotate(this); + } + + /** + * This bit shows the mini zoom window if requested + */ + if (this.Get('chart.zoom.mode') == 'thumbnail' || this.Get('chart.zoom.mode') == 'area') { + RGraph.ShowZoomWindow(this); + } + + + /** + * This function enables resizing + */ + if (this.Get('chart.resizable')) { + RGraph.AllowResizing(this); + } + + + /** + * This function enables adjusting + */ + if (this.Get('chart.adjustable')) { + RGraph.AllowAdjusting(this); + } + + /** + * Fire the RGraph ondraw event + */ + RGraph.FireCustomEvent(this, 'ondraw'); + } + + /** + * This method draws the rose charts background + */ + RGraph.Rose.prototype.DrawBackground = function () + { + this.context.lineWidth = 1; + + // Draw the background grey circles + this.context.beginPath(); + this.context.strokeStyle = '#ccc'; + for (var i=15; i<this.radius - (RGraph.isIE8() ? 5 : 0); i+=15) {// Radius must be greater than 0 for Opera to work + + //this.context.moveTo(this.centerx + i, this.centery); + + // Radius must be greater than 0 for Opera to work + this.context.arc(this.centerx, this.centery, i, 0, (2 * Math.PI), 0); + } + this.context.stroke(); + + // Draw the background lines that go from the center outwards + this.context.beginPath(); + for (var i=15; i<360; i+=15) { + + // Radius must be greater than 0 for Opera to work + this.context.arc(this.centerx, this.centery, this.radius, i / 57.3, (i + 0.1) / 57.3, 0); // The 0.1 avoids a bug in Chrome 6 + + this.context.lineTo(this.centerx, this.centery); + } + this.context.stroke(); + + this.context.beginPath(); + this.context.strokeStyle = 'black'; + + // Draw the X axis + this.context.moveTo(this.centerx - this.radius, this.centery); + this.context.lineTo(this.centerx + this.radius, this.centery); + + // Draw the X ends + this.context.moveTo(this.centerx - this.radius, this.centery - 5); + this.context.lineTo(this.centerx - this.radius, this.centery + 5); + this.context.moveTo(this.centerx + this.radius, this.centery - 5); + this.context.lineTo(this.centerx + this.radius, this.centery + 5); + + // Draw the X check marks + for (var i=(this.centerx - this.radius); i<(this.centerx + this.radius); i+=20) { + this.context.moveTo(i, this.centery - 3); + this.context.lineTo(i, this.centery + 3); + } + + // Draw the Y check marks + for (var i=(this.centery - this.radius); i<(this.centery + this.radius); i+=20) { + this.context.moveTo(this.centerx - 3, i); + this.context.lineTo(this.centerx + 3, i); + } + + // Draw the Y axis + this.context.moveTo(this.centerx, this.centery - this.radius); + this.context.lineTo(this.centerx, this.centery + this.radius); + + // Draw the Y ends + this.context.moveTo(this.centerx - 5, this.centery - this.radius); + this.context.lineTo(this.centerx + 5, this.centery - this.radius); + + this.context.moveTo(this.centerx - 5, this.centery + this.radius); + this.context.lineTo(this.centerx + 5, this.centery + this.radius); + + // Stroke it + this.context.closePath(); + this.context.stroke(); + } + + + /** + * This method draws the data on the graph + */ + RGraph.Rose.prototype.DrawRose = function () + { + var max = 0; + var data = this.data; + var margin = RGraph.degrees2Radians(this.Get('chart.margin')); + + // Must be at least two data points + //if (data.length < 2) { + // alert('[ROSE] Must be at least two data points! [' + data + ']'); + // return; + //} + + // Work out the maximum value and the sum + if (!this.Get('chart.ymax')) { + // Work out the max + for (var i=0; i<data.length; ++i) { + if (typeof(data[i]) == 'number') { + max = Math.max(max, data[i]); + } else if (typeof(data[i]) == 'object' && this.Get('chart.variant') == 'non-equi-angular') { + max = Math.max(max, data[i][0]); + + // Fallback is stacked + } else { + max = Math.max(max, RGraph.array_sum(data[i])); + } + } + + this.scale = RGraph.getScale(max, this); + this.max = this.scale[4]; + } else { + var ymax = this.Get('chart.ymax'); + var ymin = this.Get('chart.ymin'); + + this.scale = [ + ((ymax - ymin) * 0.2) + ymin, + ((ymax - ymin) * 0.4) + ymin, + ((ymax - ymin) * 0.6) + ymin, + ((ymax - ymin) * 0.8) + ymin, + ((ymax - ymin) * 1.0) + ymin + ]; + this.max = this.scale[4]; + } + + this.sum = RGraph.array_sum(data); + + // Move to the centre + this.context.moveTo(this.centerx, this.centery); + + this.context.stroke(); // Stroke the background so it stays grey + + // Transparency + if (this.Get('chart.colors.alpha')) { + this.context.globalAlpha = this.Get('chart.colors.alpha'); + } + + /******************************************************* + * A non-equi-angular Rose chart + *******************************************************/ + if (typeof(this.Get('chart.variant')) == 'string' && this.Get('chart.variant') == 'non-equi-angular') { + /******************************************************* + * NON-EQUI-ANGULAR GOES HERE + *******************************************************/ + var total=0; + for (var i=0; i<data.length; ++i) { + total += data[i][1]; + } + + + for (var i=0; i<this.data.length; ++i) { + + var segmentRadians = (this.data[i][1] / total) * (2 * Math.PI); + var radius = ((this.data[i][0] - this.Get('chart.ymin')) / (this.max - this.Get('chart.ymin'))) * (this.radius - 10); + + this.context.strokeStyle = this.Get('chart.strokestyle'); + this.context.fillStyle = this.Get('chart.colors')[0]; + + if (this.Get('chart.colors.sequential')) { + this.context.fillStyle = this.Get('chart.colors')[i]; + } + + this.context.beginPath(); // Begin the segment + this.context.arc(this.centerx, + this.centery, + radius, + this.startRadians - (Math.PI / 2) + margin, + this.startRadians + segmentRadians - (Math.PI / 2) - margin, + 0); + this.context.lineTo(this.centerx, this.centery); + this.context.closePath(); // End the segment + + this.context.stroke(); + this.context.fill(); + + // Store the start and end angles + this.angles.push([ + ((this.startRadians - (Math.PI / 2) + margin) * 57.3) + 90, + (((this.startRadians + segmentRadians) - (Math.PI / 2) - margin) * 57.3) + 90, + 0, + radius + ]); + + this.startRadians += segmentRadians; + } + } else { + /******************************************************* + * Draw regular segments here + *******************************************************/ + for (var i=0; i<this.data.length; ++i) { + + this.context.strokeStyle = this.Get('chart.strokestyle'); + this.context.fillStyle = this.Get('chart.colors')[0]; + + /******************************************************* + * This allows sequential colors + *******************************************************/ + if (this.Get('chart.colors.sequential')) { + this.context.fillStyle = this.Get('chart.colors')[i]; + } + + var segmentRadians = (1 / this.data.length) * (2 * Math.PI); + + if (typeof(this.data[i]) == 'number') { + this.context.beginPath(); // Begin the segment + + var radius = ((this.data[i] - this.Get('chart.ymin')) / (this.max - this.Get('chart.ymin'))) * (this.radius - 10); + + this.context.arc(this.centerx, + this.centery, + radius * this.Get('chart.animation.grow.factor'), + (this.startRadians * this.Get('chart.animation.grow.factor')) - (Math.PI / 2) + margin, + (this.startRadians * this.Get('chart.animation.grow.factor')) + (segmentRadians) - (Math.PI / 2) - margin, + 0); + this.context.lineTo(this.centerx, this.centery); + this.context.closePath(); // End the segment + this.context.stroke(); + this.context.fill(); + + // Store the start and end angles + this.angles.push([ + (((this.startRadians * this.Get('chart.animation.grow.factor')) - (Math.PI / 2) + margin) * 57.3) + 90, + ((((this.startRadians * this.Get('chart.animation.grow.factor')) + segmentRadians) - (Math.PI / 2) - margin) * 57.3) + 90, + 0, + radius * this.Get('chart.animation.grow.factor') + ]); + /******************************************************* + * Draw a stacked segment + *******************************************************/ + } else if (typeof(this.data[i]) == 'object') { + + var margin = this.Get('chart.margin') / (180 / Math.PI); + + for (var j=0; j<this.data[i].length; ++j) { + + this.context.fillStyle = this.Get('chart.colors')[j]; + if (j == 0) { + this.context.beginPath(); // Begin the segment + var startRadius = 0; + var endRadius = ((this.data[i][j] - this.Get('chart.ymin')) / (this.max - this.Get('chart.ymin'))) * (this.radius - 10); + + this.context.arc(this.centerx, + this.centery, + endRadius * this.Get('chart.animation.grow.factor'), + (this.startRadians * this.Get('chart.animation.grow.factor')) - (Math.PI / 2) + margin, + (this.startRadians * this.Get('chart.animation.grow.factor'))+ segmentRadians - (Math.PI / 2) - margin, + 0); + this.context.lineTo(this.centerx, this.centery); + this.context.closePath(); // End the segment + this.context.stroke(); + this.context.fill(); + + this.angles.push([ + (((this.startRadians * this.Get('chart.animation.grow.factor')) - (Math.PI / 2) + margin) * 57.3) + 90 , + ((((this.startRadians * this.Get('chart.animation.grow.factor')) + segmentRadians) - (Math.PI / 2) - margin) * 57.3) + 90, + 0, + endRadius * this.Get('chart.animation.grow.factor') + ]); + + } else { + + this.context.beginPath(); // Begin the segment + var startRadius = endRadius; // This comes from the prior iteration of this loop + var endRadius = (((this.data[i][j] - this.Get('chart.ymin')) / (this.max - this.Get('chart.ymin'))) * (this.radius - 10)) + startRadius; + + this.context.arc(this.centerx, + this.centery, + startRadius * this.Get('chart.animation.grow.factor'), + (this.startRadians * this.Get('chart.animation.grow.factor')) - (Math.PI / 2) + margin, + (this.startRadians * this.Get('chart.animation.grow.factor')) + segmentRadians - (Math.PI / 2) - margin, + 0); + + this.context.arc(this.centerx, + this.centery, + endRadius * this.Get('chart.animation.grow.factor'), + (this.startRadians * this.Get('chart.animation.grow.factor')) + segmentRadians - (Math.PI / 2) - margin, + (this.startRadians * this.Get('chart.animation.grow.factor')) - (Math.PI / 2) + margin, + true); + + this.context.closePath(); // End the segment + this.context.stroke(); + this.context.fill(); + + this.angles.push([ + (((this.startRadians * this.Get('chart.animation.grow.factor')) - (Math.PI / 2) + margin) * 57.3) + 90, + (((this.startRadians * this.Get('chart.animation.grow.factor')) + segmentRadians - (Math.PI / 2) - margin) * 57.3) + 90, + startRadius * this.Get('chart.animation.grow.factor'), + endRadius * this.Get('chart.animation.grow.factor') + ]); + } + } + } + + this.startRadians += segmentRadians; + } + } + + // Turn off the transparency + if (this.Get('chart.colors.alpha')) { + this.context.globalAlpha = 1; + } + + // Draw the title if any has been set + if (this.Get('chart.title')) { + RGraph.DrawTitle(this.canvas, + this.Get('chart.title'), + (this.canvas.height / 2) - this.radius, + this.centerx, + this.Get('chart.title.size') ? this.Get('chart.title.size') : this.Get('chart.text.size') + 2); + } + } + + + /** + * Unsuprisingly, draws the labels + */ + RGraph.Rose.prototype.DrawLabels = function () + { + this.context.lineWidth = 1; + var key = this.Get('chart.key'); + + if (key && key.length) { + RGraph.DrawKey(this, key, this.Get('chart.colors')); + } + + // Set the color to black + this.context.fillStyle = 'black'; + this.context.strokeStyle = 'black'; + + var r = this.radius - 10; + var font_face = this.Get('chart.text.font'); + var font_size = this.Get('chart.text.size'); + var context = this.context; + var axes = this.Get('chart.labels.axes').toLowerCase(); + + // Draw any labels + + if (typeof(this.Get('chart.labels')) == 'object' && this.Get('chart.labels')) { + this.DrawCircularLabels(context, this.Get('chart.labels'), font_face, font_size, r + 10); + } + + + var color = 'rgba(255,255,255,0.8)'; + + // The "North" axis labels + if (axes.indexOf('n') > -1) { + RGraph.Text(context, font_face, font_size, this.centerx, this.centery - (r * 0.2), String(Number(this.scale[0]).toFixed(this.Get('chart.scale.decimals'))), 'center', 'center', true, false, color); + RGraph.Text(context, font_face, font_size, this.centerx, this.centery - (r * 0.4), String(Number(this.scale[1]).toFixed(this.Get('chart.scale.decimals'))), 'center', 'center', true, false, color); + RGraph.Text(context, font_face, font_size, this.centerx, this.centery - (r * 0.6), String(Number(this.scale[2]).toFixed(this.Get('chart.scale.decimals'))), 'center', 'center', true, false, color); + RGraph.Text(context, font_face, font_size, this.centerx, this.centery - (r * 0.8), String(Number(this.scale[3]).toFixed(this.Get('chart.scale.decimals'))), 'center', 'center', true, false, color); + RGraph.Text(context, font_face, font_size, this.centerx, this.centery - r, String(Number(this.scale[4]).toFixed(this.Get('chart.scale.decimals'))), 'center', 'center', true, false, color); + } + + // The "South" axis labels + if (axes.indexOf('s') > -1) { + RGraph.Text(context, font_face, font_size, this.centerx, this.centery + (r * 0.2), String(Number(this.scale[0]).toFixed(this.Get('chart.scale.decimals'))), 'center', 'center', true, false, color); + RGraph.Text(context, font_face, font_size, this.centerx, this.centery + (r * 0.4), String(Number(this.scale[1]).toFixed(this.Get('chart.scale.decimals'))), 'center', 'center', true, false, color); + RGraph.Text(context, font_face, font_size, this.centerx, this.centery + (r * 0.6), String(Number(this.scale[2]).toFixed(this.Get('chart.scale.decimals'))), 'center', 'center', true, false, color); + RGraph.Text(context, font_face, font_size, this.centerx, this.centery + (r * 0.8), String(Number(this.scale[3]).toFixed(this.Get('chart.scale.decimals'))), 'center', 'center', true, false, color); + RGraph.Text(context, font_face, font_size, this.centerx, this.centery + r, String(Number(this.scale[4]).toFixed(this.Get('chart.scale.decimals'))), 'center', 'center', true, false, color); + } + + // The "East" axis labels + if (axes.indexOf('e') > -1) { + RGraph.Text(context, font_face, font_size, this.centerx + (r * 0.2), this.centery, String(Number(this.scale[0]).toFixed(this.Get('chart.scale.decimals'))), 'center', 'center', true, false, color); + RGraph.Text(context, font_face, font_size, this.centerx + (r * 0.4), this.centery, String(Number(this.scale[1]).toFixed(this.Get('chart.scale.decimals'))), 'center', 'center', true, false, color); + RGraph.Text(context, font_face, font_size, this.centerx + (r * 0.6), this.centery, String(Number(this.scale[2]).toFixed(this.Get('chart.scale.decimals'))), 'center', 'center', true, false, color); + RGraph.Text(context, font_face, font_size, this.centerx + (r * 0.8), this.centery, String(Number(this.scale[3]).toFixed(this.Get('chart.scale.decimals'))), 'center', 'center', true, false, color); + RGraph.Text(context, font_face, font_size, this.centerx + r, this.centery, String(Number(this.scale[4]).toFixed(this.Get('chart.scale.decimals'))), 'center', 'center', true, false, color); + } + + // The "West" axis labels + if (axes.indexOf('w') > -1) { + RGraph.Text(context, font_face, font_size, this.centerx - (r * 0.2), this.centery, String(Number(this.scale[0]).toFixed(this.Get('chart.scale.decimals'))), 'center', 'center', true, false, color); + RGraph.Text(context, font_face, font_size, this.centerx - (r * 0.4), this.centery, String(Number(this.scale[1]).toFixed(this.Get('chart.scale.decimals'))), 'center', 'center', true, false, color); + RGraph.Text(context, font_face, font_size, this.centerx - (r * 0.6), this.centery, String(Number(this.scale[2]).toFixed(this.Get('chart.scale.decimals'))), 'center', 'center', true, false, color); + RGraph.Text(context, font_face, font_size, this.centerx - (r * 0.8), this.centery, String(Number(this.scale[3]).toFixed(this.Get('chart.scale.decimals'))), 'center', 'center', true, false, color); + RGraph.Text(context, font_face, font_size, this.centerx - r, this.centery, String(Number(this.scale[4]).toFixed(this.Get('chart.scale.decimals'))), 'center', 'center', true, false, color); + } + + RGraph.Text(context, font_face, font_size, this.centerx, this.centery, typeof(this.Get('chart.ymin')) == 'number' ? String(Number(this.Get('chart.ymin')).toFixed(this.Get('chart.scale.decimals'))) : '0', 'center', 'center', true, false, color); + } + + + /** + * Draws the circular labels that go around the charts + * + * @param labels array The labels that go around the chart + */ + RGraph.Rose.prototype.DrawCircularLabels = function (context, labels, font_face, font_size, r) + { + var variant = this.Get('chart.variant'); + var position = this.Get('chart.labels.position'); + var r = r + 10 + this.Get('chart.labels.offset'); + + for (var i=0; i<labels.length; ++i) { + + if (typeof(variant) == 'string' && variant == 'non-equi-angular') { + + var a = Number(this.angles[i][0]) + ((this.angles[i][1] - this.angles[i][0]) / 2); + a -= 90; + var halign = 'center'; // Default halign + + var x = Math.cos(a / 57.29577866666) * (r + 10); + var y = Math.sin(a / 57.29577866666) * (r + 10); + + RGraph.Text(context, font_face, font_size, this.centerx + x, this.centery + y, String(labels[i]), 'center', halign); + + } else { + + var a = (360 / labels.length) * (i + 1) - (360 / (labels.length * 2)); + var a = a - 90 + (this.Get('chart.labels.position') == 'edge' ? ((360 / labels.length) / 2) : 0); + var halign = 'center'; // Default halign + + // Horizontal alignment + //if (a == 0) { + // var halign = 'left'; + //} else if (a == 180) { + // var halign = 'right'; + //} + + var x = Math.cos(a / 57.29577866666) * (r + 10); + var y = Math.sin(a / 57.29577866666) * (r + 10); + + RGraph.Text(context, font_face, font_size, this.centerx + x, this.centery + y, String(labels[i]), 'center', halign); + } + } + } + + + /** + * This function is for use with circular graph types, eg the Pie or Rose. Pass it your event object + * and it will pass you back the corresponding segment details as an array: + * + * [x, y, r, startAngle, endAngle] + * + * Angles are measured in degrees, and are measured from the "east" axis (just like the canvas). + * + * @param object e Your event object + */ + RGraph.Rose.prototype.getSegment = function (e) + { + RGraph.FixEventObject(e); + + // The optional arg provides a way of allowing some accuracy (pixels) + var accuracy = arguments[1] ? arguments[1] : 0; + + var obj = e.target.__object__; + var canvas = obj.canvas; + var context = obj.context; + var mouseCoords = RGraph.getMouseXY(e); + var x = mouseCoords[0] - obj.centerx; + var y = mouseCoords[1] - obj.centery; + var r = obj.radius; + var theta = Math.atan(y / x); // RADIANS + var hyp = y / Math.sin(theta); + var angles = obj.angles; + var ret = []; + var hyp = (hyp < 0) ? hyp + accuracy : hyp - accuracy; + + + + // Put theta in DEGREES + theta *= 57.3 + + // hyp should not be greater than radius if it's a Rose chart + if (obj.type == 'rose') { + if ( (isNaN(hyp) && Math.abs(mouseCoords[0]) < (obj.centerx - r) ) + || (isNaN(hyp) && Math.abs(mouseCoords[0]) > (obj.centerx + r)) + || (!isNaN(hyp) && Math.abs(hyp) > r)) { + return; + } + } + + /** + * Account for the correct quadrant + */ + if (x < 0 && y >= 0) { + theta += 180; + } else if (x < 0 && y < 0) { + theta += 180; + } else if (x > 0 && y < 0) { + theta += 360; + } + + /** + * Account for the rose chart angle displacement + */ + theta += 90; + + if (theta > 360) { + theta -= 360; + } + + hyp = Math.abs(hyp); + + for (var i=0; i<angles.length; ++i) { + if (theta >= angles[i][0] && theta < angles[i][1] && hyp > angles[i][2] && hyp < angles[i][3]) { + + if (!(hyp > angles[i][2] && hyp < angles[i][3])) { + return null; + } + + if (!hyp) { + return null; + } + + ret[0] = obj.centerx; + ret[1] = obj.centery; + ret[2] = angles[i][2]; // Start angle + ret[3] = angles[i][3]; // End angle + + ret[4] = angles[i][0]; // Start radius + ret[5] = angles[i][1]; // End radius + ret[6] = i; + + ret[4] -= 90; + ret[5] -= 90; + + if (x > 0 && y < 0) { + ret[4] += 360; + ret[5] += 360; + } + + if (ret[4] < 0) ret[4] += 360; + if (ret[5] > 360) ret[5] -= 360; + + return ret; + } + } + + return null; + }
\ No newline at end of file diff --git a/schall/static/RGraph/libraries/RGraph.rscatter.js b/schall/static/RGraph/libraries/RGraph.rscatter.js new file mode 100644 index 0000000..cc7949d --- /dev/null +++ b/schall/static/RGraph/libraries/RGraph.rscatter.js @@ -0,0 +1,653 @@ + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + + if (typeof(RGraph) == 'undefined') RGraph = {}; + + /** + * The chart constuctor + * + * @param object canvas + * @param array data + */ + RGraph.Rscatter = function (id, data) + { + this.id = id; + this.canvas = document.getElementById(id); + this.context = this.canvas.getContext('2d'); + this.data = data; + this.canvas.__object__ = this; + this.type = 'rscatter'; + this.hasTooltips = false; + this.isRGraph = true; + + + /** + * Compatibility with older browsers + */ + RGraph.OldBrowserCompat(this.context); + + + this.centerx = 0; + this.centery = 0; + this.radius = 0; + this.max = 0; + + this.properties = { + 'chart.radius': null, + 'chart.colors': [], // This is used internally for the key + 'chart.colors.default': 'black', + 'chart.gutter.left': 25, + 'chart.gutter.right': 25, + 'chart.gutter.top': 25, + 'chart.gutter.bottom': 25, + 'chart.title': '', + 'chart.title.background': null, + 'chart.title.hpos': null, + 'chart.title.vpos': null, + 'chart.title.bold': true, + 'chart.title.font': null, + 'chart.labels': null, + 'chart.labels.position': 'center', + 'chart.labels.axes': 'nsew', + 'chart.text.color': 'black', + 'chart.text.font': 'Verdana', + 'chart.text.size': 10, + 'chart.key': null, + 'chart.key.background': 'white', + 'chart.key.position': 'graph', + 'chart.key.halign': 'right', + 'chart.key.shadow': false, + 'chart.key.shadow.color': '#666', + 'chart.key.shadow.blur': 3, + 'chart.key.shadow.offsetx': 2, + 'chart.key.shadow.offsety': 2, + 'chart.key.position.gutter.boxed': true, + 'chart.key.position.x': null, + 'chart.key.position.y': null, + 'chart.key.color.shape': 'square', + 'chart.key.rounded': true, + 'chart.key.linewidth': 1, + 'chart.contextmenu': null, + 'chart.tooltips.effect': 'fade', + 'chart.tooltips.css.class': 'RGraph_tooltip', + 'chart.tooltips.highlight': true, + 'chart.tooltips.hotspot': 3, + 'chart.annotatable': false, + 'chart.annotate.color': 'black', + 'chart.zoom.factor': 1.5, + 'chart.zoom.fade.in': true, + 'chart.zoom.fade.out': true, + 'chart.zoom.hdir': 'right', + 'chart.zoom.vdir': 'down', + 'chart.zoom.frames': 25, + 'chart.zoom.delay': 16.666, + 'chart.zoom.shadow': true, + 'chart.zoom.mode': 'canvas', + 'chart.zoom.thumbnail.width': 75, + 'chart.zoom.thumbnail.height': 75, + 'chart.zoom.background': true, + 'chart.zoom.action': 'zoom', + 'chart.resizable': false, + 'chart.resize.handle.background': null, + 'chart.adjustable': false, + 'chart.ymax': null, + 'chart.ymin': 0, + 'chart.tickmarks': 'cross', + 'chart.ticksize': 3, + 'chart.scale.decimals': null, + 'chart.scale.round': false + } + + + /** + * Set the .getShape commonly named method + */ + this.getShape = this.getPoint; + } + + + /** + * A simple setter + * + * @param string name The name of the property to set + * @param string value The value of the property + */ + RGraph.Rscatter.prototype.Set = function (name, value) + { + this.properties[name.toLowerCase()] = value; + } + + + /** + * A simple getter + * + * @param string name The name of the property to get + */ + RGraph.Rscatter.prototype.Get = function (name) + { + return this.properties[name.toLowerCase()]; + } + + + /** + * This method draws the rose chart + */ + RGraph.Rscatter.prototype.Draw = function () + { + /** + * Fire the onbeforedraw event + */ + RGraph.FireCustomEvent(this, 'onbeforedraw'); + + /** + * Clear all of this canvases event handlers (the ones installed by RGraph) + */ + RGraph.ClearEventListeners(this.id); + + + /** + * This doesn't affect the chart, but is used for compatibility + */ + this.gutterLeft = this.Get('chart.gutter.left'); + this.gutterRight = this.Get('chart.gutter.right'); + this.gutterTop = this.Get('chart.gutter.top'); + this.gutterBottom = this.Get('chart.gutter.bottom'); + + // Calculate the radius + this.radius = (Math.min(RGraph.GetWidth(this) - this.gutterLeft - this.gutterRight, RGraph.GetHeight(this) - this.gutterTop - this.gutterBottom) / 2); + this.centerx = RGraph.GetWidth(this) / 2; + this.centery = RGraph.GetHeight(this) / 2; + this.coords = []; + + /** + * If there's a user specified radius, use that + */ + if (typeof(this.Get('chart.radius')) == 'number') { + this.radius = this.Get('chart.radius'); + } + + /** + * Work out the scale + */ + var max = this.Get('chart.ymax'); + var min = this.Get('chart.ymin'); + + if (typeof(max) == 'number') { + this.max = max; + this.scale = [((max - min) * 0.2) + min,((max - min) * 0.4) + min,((max - min) * 0.6) + min,((max - min) * 0.8) + min,((max - min) * 1.0) + min,]; + + } else { + for (var i=0; i<this.data.length; ++i) { + this.max = Math.max(this.max, this.data[i][1]); + } + this.scale = RGraph.getScale(this.max, this); + this.max = this.scale[4]; + + // Hmmmmmmmm + if (String(this.scale[0]).indexOf('e') == -1) { + + var decimals = this.Get('chart.scale.decimals'); + + this.scale[0] = Number(this.scale[0]).toFixed(decimals); + this.scale[1] = Number(this.scale[1]).toFixed(decimals); + this.scale[2] = Number(this.scale[2]).toFixed(decimals); + this.scale[3] = Number(this.scale[3]).toFixed(decimals); + this.scale[4] = Number(this.scale[4]).toFixed(decimals); + } + } + + /** + * Change the centerx marginally if the key is defined + */ + if (this.Get('chart.key') && this.Get('chart.key').length > 0 && this.Get('chart.key').length >= 3) { + this.centerx = this.centerx - this.Get('chart.gutter.right') + 5; + } + + /** + * Populate the colors array for the purposes of generating the key + */ + if (typeof(this.Get('chart.key')) == 'object' && RGraph.is_array(this.Get('chart.key')) && this.Get('chart.key')[0]) { + for (var i=0; i<this.data.length; ++i) { + if (this.data[i][2] && typeof(this.data[i][2]) == 'string') { + this.Get('chart.colors').push(this.data[i][2]); + } + } + } + + this.DrawBackground(); + this.DrawRscatter(); + this.DrawLabels(); + + /** + * Setup the context menu if required + */ + if (this.Get('chart.contextmenu')) { + RGraph.ShowContext(this); + } + + /** + * Tooltips + */ + if (this.hasTooltips) { + + /** + * Register this object for redrawing + */ + RGraph.Register(this); + + /** + * The onmousemove event + */ + var canvas_onmousemove_func = function (e) + { + e = RGraph.FixEventObject(e); + + var obj = event.target.__object__; + var canvas = obj.canvas; + var context = obj.context; + var overHotspot = false; + var offset = obj.Get('chart.tooltips.hotspot'); // This is how far the hotspot extends + var point = obj.getPoint(e); + + if (point) { + + overHotspot = true; + canvas.style.cursor = 'pointer'; + var tooltip = obj.data[point[3]][3]; + + if (!RGraph.Registry.Get('chart.tooltip') || RGraph.Registry.Get('chart.tooltip').__text__ != tooltip) { + + if (obj.Get('chart.tooltips.highlight')) { + RGraph.Redraw(); + } + + /** + * Get the tooltip text + */ + if (typeof(tooltip) == 'function') { + var text = String(tooltip(i)); + + } else { + var text = String(tooltip); + } + + RGraph.Tooltip(canvas, text, e.pageX + 5, e.pageY - 5, point[3]); + + /** + * Highlight the tickmark + */ + if (obj.Get('chart.tooltips.highlight')) { + context.beginPath(); + context.fillStyle = 'rgba(255,255,255,0.5)'; + context.arc(point[1], point[2], 3, 0, 6.2830, 0); + context.fill(); + } + } + } + + if (!overHotspot) { + canvas.style.cursor = 'default'; + } + } + this.canvas.addEventListener('mousemove', canvas_onmousemove_func, false); + RGraph.AddEventListener(this.id, 'mousemove', canvas_onmousemove_func); + } + + // Draw the title if any has been set + if (this.Get('chart.title')) { + RGraph.DrawTitle(this.canvas, + this.Get('chart.title'), + (this.canvas.height / 2) - this.radius - 5, + this.centerx, + this.Get('chart.title.size') ? this.Get('chart.title.size') : this.Get('chart.text.size') + 2); + } + + /** + * If the canvas is annotatable, do install the event handlers + */ + if (this.Get('chart.annotatable')) { + RGraph.Annotate(this); + } + + /** + * This bit shows the mini zoom window if requested + */ + if (this.Get('chart.zoom.mode') == 'thumbnail' || this.Get('chart.zoom.mode') == 'area') { + RGraph.ShowZoomWindow(this); + } + + + /** + * This function enables resizing + */ + if (this.Get('chart.resizable')) { + RGraph.AllowResizing(this); + } + + /** + * Fire the RGraph ondraw event + */ + RGraph.FireCustomEvent(this, 'ondraw'); + } + + /** + * This method draws the rose charts background + */ + RGraph.Rscatter.prototype.DrawBackground = function () + { + this.context.lineWidth = 1; + + // Draw the background grey circles + this.context.strokeStyle = '#ccc'; + for (var i=15; i<this.radius - (document.all ? 5 : 0); i+=15) {// Radius must be greater than 0 for Opera to work + //this.context.moveTo(this.centerx + i, this.centery); + + // Radius must be greater than 0 for Opera to work + this.context.arc(this.centerx, this.centery, i, 0, (2 * Math.PI), 0); + } + this.context.stroke(); + + // Draw the background lines that go from the center outwards + this.context.beginPath(); + for (var i=15; i<360; i+=15) { + + // Radius must be greater than 0 for Opera to work + this.context.arc(this.centerx, this.centery, this.radius, i / 57.3, (i + 0.01) / 57.3, 0); + + this.context.lineTo(this.centerx, this.centery); + } + this.context.stroke(); + + this.context.beginPath(); + this.context.strokeStyle = 'black'; + + // Draw the X axis + this.context.moveTo(this.centerx - this.radius, this.centery); + this.context.lineTo(this.centerx + this.radius, this.centery); + + // Draw the X ends + this.context.moveTo(this.centerx - this.radius, this.centery - 5); + this.context.lineTo(this.centerx - this.radius, this.centery + 5); + this.context.moveTo(this.centerx + this.radius, this.centery - 5); + this.context.lineTo(this.centerx + this.radius, this.centery + 5); + + // Draw the X check marks + for (var i=(this.centerx - this.radius); i<(this.centerx + this.radius); i+=20) { + this.context.moveTo(i, this.centery - 3); + this.context.lineTo(i, this.centery + 3); + } + + // Draw the Y check marks + for (var i=(this.centery - this.radius); i<(this.centery + this.radius); i+=20) { + this.context.moveTo(this.centerx - 3, i); + this.context.lineTo(this.centerx + 3, i); + } + + // Draw the Y axis + this.context.moveTo(this.centerx, this.centery - this.radius); + this.context.lineTo(this.centerx, this.centery + this.radius); + + // Draw the Y ends + this.context.moveTo(this.centerx - 5, this.centery - this.radius); + this.context.lineTo(this.centerx + 5, this.centery - this.radius); + + this.context.moveTo(this.centerx - 5, this.centery + this.radius); + this.context.lineTo(this.centerx + 5, this.centery + this.radius); + + // Stroke it + this.context.closePath(); + this.context.stroke(); + } + + + /** + * This method draws a set of data on the graph + */ + RGraph.Rscatter.prototype.DrawRscatter = function () + { + var data = this.data; + + for (var i=0; i<data.length; ++i) { + + var d1 = data[i][0]; + var d2 = data[i][1]; + var a = d1 / (180 / Math.PI); // RADIANS + var r = ( (d2 - this.Get('chart.ymin')) / (this.max - this.Get('chart.ymin')) ) * this.radius; + var x = Math.sin(a) * r; + var y = Math.cos(a) * r; + var color = data[i][2] ? data[i][2] : this.Get('chart.colors.default'); + var tooltip = data[i][3] ? data[i][3] : null; + + if (tooltip && tooltip.length) { + this.hasTooltips = true; + } + + /** + * Account for the correct quadrant + */ + x = x + this.centerx; + y = this.centery - y; + + + this.DrawTick(x, y, color); + + // Populate the coords array with the coordinates and the tooltip + this.coords.push([x, y, color, tooltip]); + } + } + + + /** + * Unsuprisingly, draws the labels + */ + RGraph.Rscatter.prototype.DrawLabels = function () + { + this.context.lineWidth = 1; + var key = this.Get('chart.key'); + + // Set the color to black + this.context.fillStyle = 'black'; + this.context.strokeStyle = 'black'; + + var r = this.radius; + var color = this.Get('chart.text.color'); + var font_face = this.Get('chart.text.font'); + var font_size = this.Get('chart.text.size'); + var context = this.context; + var axes = this.Get('chart.labels.axes').toLowerCase(); + + this.context.fillStyle = this.Get('chart.text.color'); + + // Draw any labels + if (typeof(this.Get('chart.labels')) == 'object' && this.Get('chart.labels')) { + this.DrawCircularLabels(context, this.Get('chart.labels'), font_face, font_size, r); + } + + + var color = 'rgba(255,255,255,0.8)'; + + // The "North" axis labels + if (axes.indexOf('n') > -1) { + RGraph.Text(context,font_face,font_size,this.centerx,this.centery - ((r) * 0.2),String(this.scale[0]),'center','center',true,false,color); + RGraph.Text(context, font_face, font_size, this.centerx, this.centery - ((r) * 0.4), String(this.scale[1]), 'center', 'center', true, false, color); + RGraph.Text(context, font_face, font_size, this.centerx, this.centery - ((r) * 0.6), String(this.scale[2]), 'center', 'center', true, false, color); + RGraph.Text(context, font_face, font_size, this.centerx, this.centery - ((r) * 0.8), String(this.scale[3]), 'center', 'center', true, false, color); + RGraph.Text(context, font_face, font_size, this.centerx, this.centery - r, String(this.scale[4]), 'center', 'center', true, false, color); + } + + // The "South" axis labels + if (axes.indexOf('s') > -1) { + RGraph.Text(context, font_face, font_size, this.centerx, this.centery + ((r) * 0.2), String(this.scale[0]), 'center', 'center', true, false, color); + RGraph.Text(context, font_face, font_size, this.centerx, this.centery + ((r) * 0.4), String(this.scale[1]), 'center', 'center', true, false, color); + RGraph.Text(context, font_face, font_size, this.centerx, this.centery + ((r) * 0.6), String(this.scale[2]), 'center', 'center', true, false, color); + RGraph.Text(context, font_face, font_size, this.centerx, this.centery + ((r) * 0.8), String(this.scale[3]), 'center', 'center', true, false, color); + RGraph.Text(context, font_face, font_size, this.centerx, this.centery + r, String(this.scale[4]), 'center', 'center', true, false, color); + } + + // The "East" axis labels + if (axes.indexOf('e') > -1) { + RGraph.Text(context, font_face, font_size, this.centerx + ((r) * 0.2), this.centery, String(this.scale[0]), 'center', 'center', true, false, color); + RGraph.Text(context, font_face, font_size, this.centerx + ((r) * 0.4), this.centery, String(this.scale[1]), 'center', 'center', true, false, color); + RGraph.Text(context, font_face, font_size, this.centerx + ((r) * 0.6), this.centery, String(this.scale[2]), 'center', 'center', true, false, color); + RGraph.Text(context, font_face, font_size, this.centerx + ((r) * 0.8), this.centery, String(this.scale[3]), 'center', 'center', true, false, color); + RGraph.Text(context, font_face, font_size, this.centerx + r, this.centery, String(this.scale[4]), 'center', 'center', true, false, color); + } + + // The "West" axis labels + if (axes.indexOf('w') > -1) { + RGraph.Text(context, font_face, font_size, this.centerx - ((r) * 0.2), this.centery, String(this.scale[0]), 'center', 'center', true, false, color); + RGraph.Text(context, font_face, font_size, this.centerx - ((r) * 0.4), this.centery, String(this.scale[1]), 'center', 'center', true, false, color); + RGraph.Text(context, font_face, font_size, this.centerx - ((r) * 0.6), this.centery, String(this.scale[2]), 'center', 'center', true, false, color); + RGraph.Text(context, font_face, font_size, this.centerx - ((r) * 0.8), this.centery, String(this.scale[3]), 'center', 'center', true, false, color); + RGraph.Text(context, font_face, font_size, this.centerx - r, this.centery, String(this.scale[4]), 'center', 'center', true, false, color); + } + + // Draw the center minimum value (but only if there's at least one axes labels stipulated) + if (this.Get('chart.labels.axes').length > 0) { + RGraph.Text(context, font_face, font_size, this.centerx, this.centery, this.Get('chart.ymin') > 0 ? String(this.Get('chart.ymin').toFixed(this.Get('chart.scale.decimals'))) : '0', 'center', 'center', true, false, color); + } + + /** + * Draw the key + */ + if (key && key.length) { + RGraph.DrawKey(this, key, this.Get('chart.colors')); + } + } + + + /** + * Draws the circular labels that go around the charts + * + * @param labels array The labels that go around the chart + */ + RGraph.Rscatter.prototype.DrawCircularLabels = function (context, labels, font_face, font_size, r) + { + var position = this.Get('chart.labels.position'); + var r = r + 10; + + for (var i=0; i<labels.length; ++i) { + + + var a = (360 / labels.length) * (i + 1) - (360 / (labels.length * 2)); + var a = a - 90 + (this.Get('chart.labels.position') == 'edge' ? ((360 / labels.length) / 2) : 0); + + var x = Math.cos(a / 57.29577866666) * (r + 10); + var y = Math.sin(a / 57.29577866666) * (r + 10); + + RGraph.Text(context, font_face, font_size, this.centerx + x, this.centery + y, String(labels[i]), 'center', 'center'); + } + } + + + /** + * Draws a single tickmark + */ + RGraph.Rscatter.prototype.DrawTick = function (x, y, color) + { + var tickmarks = this.Get('chart.tickmarks'); + var ticksize = this.Get('chart.ticksize'); + + this.context.strokeStyle = color; + this.context.fillStyle = color; + + // Cross + if (tickmarks == 'cross') { + + this.context.beginPath(); + this.context.moveTo(x + ticksize, y + ticksize); + this.context.lineTo(x - ticksize, y - ticksize); + this.context.stroke(); + + this.context.beginPath(); + this.context.moveTo(x - ticksize, y + ticksize); + this.context.lineTo(x + ticksize, y - ticksize); + this.context.stroke(); + + // Circle + } else if (tickmarks == 'circle') { + + this.context.beginPath(); + this.context.arc(x, y, ticksize, 0, 6.2830, false); + this.context.fill(); + + // Square + } else if (tickmarks == 'square') { + + this.context.beginPath(); + this.context.fillRect(x - ticksize, y - ticksize, 2 * ticksize, 2 * ticksize); + this.context.fill(); + + // Diamond shape tickmarks + } else if (tickmarks == 'diamond') { + + this.context.beginPath(); + this.context.moveTo(x, y - ticksize); + this.context.lineTo(x + ticksize, y); + this.context.lineTo(x, y + ticksize); + this.context.lineTo(x - ticksize, y); + this.context.closePath(); + this.context.fill(); + + // Plus style tickmarks + } else if (tickmarks == 'plus') { + + this.context.lineWidth = 1; + + this.context.beginPath(); + this.context.moveTo(x, y - ticksize); + this.context.lineTo(x, y + ticksize); + this.context.moveTo(x - ticksize, y); + this.context.lineTo(x + ticksize, y); + this.context.stroke(); + } + } + + + /** + * This function makes it much easier to get the (if any) point that is currently being hovered over. + * + * @param object e The event object + */ + RGraph.Rscatter.prototype.getPoint = function (e) + { + var canvas = e.target; + var obj = canvas.__object__; + var context = obj.context; + var context = obj.context; + var mouseCoords = RGraph.getMouseXY(e); + var mouseX = mouseCoords[0]; + var mouseY = mouseCoords[1]; + var overHotspot = false; + var offset = obj.Get('chart.tooltips.hotspot'); // This is how far the hotspot extends + + for (var i=0; i<obj.coords.length; ++i) { + + var x = obj.coords[i][0]; + var y = obj.coords[i][1]; + var tooltip = obj.coords[i][3]; + + if ( + mouseX < (x + offset) && + mouseX > (x - offset) && + mouseY < (y + offset) && + mouseY > (y - offset) && + typeof(tooltip) == 'string' && + tooltip.length > 0 + ) { + + return [obj, x, y, i]; + } + } + }
\ No newline at end of file diff --git a/schall/static/RGraph/libraries/RGraph.scatter.js b/schall/static/RGraph/libraries/RGraph.scatter.js new file mode 100644 index 0000000..3fde9f3 --- /dev/null +++ b/schall/static/RGraph/libraries/RGraph.scatter.js @@ -0,0 +1,1662 @@ + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + + if (typeof(RGraph) == 'undefined') RGraph = {}; + + /** + * The scatter graph constructor + * + * @param object canvas The cxanvas object + * @param array data The chart data + */ + RGraph.Scatter = function (id, data) + { + // Get the canvas and context objects + this.id = id; + this.canvas = document.getElementById(id); + this.canvas.__object__ = this; + this.context = this.canvas.getContext ? this.canvas.getContext("2d") : null; + this.max = 0; + this.coords = []; + this.data = []; + this.type = 'scatter'; + this.isRGraph = true; + + + /** + * Compatibility with older browsers + */ + RGraph.OldBrowserCompat(this.context); + + + // Various config properties + this.properties = { + 'chart.background.barcolor1': 'rgba(0,0,0,0)', + 'chart.background.barcolor2': 'rgba(0,0,0,0)', + 'chart.background.grid': true, + 'chart.background.grid.width': 1, + 'chart.background.grid.color': '#ddd', + 'chart.background.grid.hsize': 20, + 'chart.background.grid.vsize': 20, + 'chart.background.hbars': null, + 'chart.background.vbars': null, + 'chart.background.grid.vlines': true, + 'chart.background.grid.hlines': true, + 'chart.background.grid.border': true, + 'chart.background.grid.autofit':true, + 'chart.background.grid.autofit.numhlines': 5, + 'chart.background.grid.autofit.numvlines': 20, + 'chart.text.size': 10, + 'chart.text.angle': 0, + 'chart.text.color': 'black', + 'chart.text.font': 'Verdana', + 'chart.tooltips.effect': 'fade', + 'chart.tooltips.hotspot': 3, + 'chart.tooltips.css.class': 'RGraph_tooltip', + 'chart.tooltips.highlight': true, + 'chart.units.pre': '', + 'chart.units.post': '', + 'chart.numyticks': 10, + 'chart.tickmarks': 'cross', + 'chart.ticksize': 5, + 'chart.xticks': true, + 'chart.xaxis': true, + 'chart.gutter.left': 25, + 'chart.gutter.right': 25, + 'chart.gutter.top': 25, + 'chart.gutter.bottom': 25, + 'chart.xmin': 0, + 'chart.xmax': 0, + 'chart.ymax': null, + 'chart.ymin': null, + 'chart.scale.decimals': null, + 'chart.scale.point': '.', + 'chart.scale.thousand': ',', + 'chart.title': '', + 'chart.title.background': null, + 'chart.title.hpos': null, + 'chart.title.vpos': null, + 'chart.title.bold': true, + 'chart.title.font': null, + 'chart.title.xaxis': '', + 'chart.title.xaxis.bold': true, + 'chart.title.xaxis.size': null, + 'chart.title.xaxis.font': null, + 'chart.title.yaxis': '', + 'chart.title.yaxis.bold': true, + 'chart.title.yaxis.size': null, + 'chart.title.yaxis.font': null, + 'chart.title.xaxis.pos': null, + 'chart.title.yaxis.pos': null, + 'chart.labels': [], + 'chart.labels.ingraph': null, + 'chart.labels.above': false, + 'chart.labels.above.size': 8, + 'chart.labels.above.decimals': 0, + 'chart.ylabels': true, + 'chart.ylabels.count': 5, + 'chart.ylabels.invert': false, + 'chart.ylabels.specific': null, + 'chart.ylabels.inside': false, + 'chart.contextmenu': null, + 'chart.defaultcolor': 'black', + 'chart.xaxispos': 'bottom', + 'chart.yaxispos': 'left', + 'chart.crosshairs': false, + 'chart.crosshairs.color': '#333', + 'chart.crosshairs.linewidth': 1, + 'chart.crosshairs.coords': false, + 'chart.crosshairs.coords.fixed':true, + 'chart.crosshairs.coords.fadeout':false, + 'chart.crosshairs.coords.labels.x': 'X', + 'chart.crosshairs.coords.labels.y': 'Y', + 'chart.crosshairs.hline': true, + 'chart.crosshairs.vline': true, + 'chart.annotatable': false, + 'chart.annotate.color': 'black', + 'chart.line': false, + 'chart.line.linewidth': 1, + 'chart.line.colors': ['green', 'red'], + 'chart.line.shadow.color': 'rgba(0,0,0,0)', + 'chart.line.shadow.blur': 2, + 'chart.line.shadow.offsetx': 3, + 'chart.line.shadow.offsety': 3, + 'chart.line.stepped': false, + 'chart.noaxes': false, + 'chart.key': [], + 'chart.key.background': 'white', + 'chart.key.position': 'graph', + 'chart.key.halign': 'right', + 'chart.key.shadow': false, + 'chart.key.shadow.color': '#666', + 'chart.key.shadow.blur': 3, + 'chart.key.shadow.offsetx': 2, + 'chart.key.shadow.offsety': 2, + 'chart.key.position.gutter.boxed': true, + 'chart.key.position.x': null, + 'chart.key.position.y': null, + 'chart.key.color.shape': 'square', + 'chart.key.rounded': true, + 'chart.key.linewidth': 1, + 'chart.axis.color': 'black', + 'chart.zoom.factor': 1.5, + 'chart.zoom.fade.in': true, + 'chart.zoom.fade.out': true, + 'chart.zoom.hdir': 'right', + 'chart.zoom.vdir': 'down', + 'chart.zoom.frames': 25, + 'chart.zoom.delay': 16.666, + 'chart.zoom.shadow': true, + 'chart.zoom.mode': 'canvas', + 'chart.zoom.thumbnail.width': 75, + 'chart.zoom.thumbnail.height': 75, + 'chart.zoom.background': true, + 'chart.zoom.action': 'zoom', + 'chart.boxplot.width': 8, + 'chart.boxplot.capped': true, + 'chart.resizable': false, + 'chart.resize.handle.background': null, + 'chart.xmin': 0, + 'chart.labels.specific.align': 'left', + 'chart.xscale': false, + 'chart.xscale.units.pre': '', + 'chart.xscale.units.post': '', + 'chart.xscale.numlabels': 10, + 'chart.xscale.formatter': null, + 'chart.noendxtick': false, + 'chart.noendytick': true + } + + // Handle multiple datasets being given as one argument + if (arguments[1][0] && arguments[1][0][0] && typeof(arguments[1][0][0][0]) == 'number') { + // Store the data set(s) + for (var i=0; i<arguments[1].length; ++i) { + this.data[i] = arguments[1][i]; + } + + // Handle multiple data sets being supplied as seperate arguments + } else { + // Store the data set(s) + for (var i=1; i<arguments.length; ++i) { + this.data[i - 1] = arguments[i]; + } + } + + // Check for support + if (!this.canvas) { + alert('[SCATTER] No canvas support'); + return; + } + + + /** + * Set the .getShape commonly named method + */ + this.getShape = this.getPoint; + } + + + /** + * A simple setter + * + * @param string name The name of the property to set + * @param string value The value of the property + */ + RGraph.Scatter.prototype.Set = function (name, value) + { + /** + * This is here because the key expects a name of "chart.colors" + */ + if (name == 'chart.line.colors') { + this.properties['chart.colors'] = value; + } + + /** + * Allow compatibility with older property names + */ + if (name == 'chart.tooltip.hotspot') { + name = 'chart.tooltips.hotspot'; + } + + /** + * chart.yaxispos should be left or right + */ + if (name == 'chart.yaxispos' && value != 'left' && value != 'right') { + alert("[SCATTER] chart.yaxispos should be left or right. You've set it to: '" + value + "' Changing it to left"); + value = 'left'; + } + + /** + * Check for xaxispos + */ + if (name == 'chart.xaxispos' ) { + if (value != 'bottom' && value != 'center') { + alert('[SCATTER] (' + this.id + ') chart.xaxispos should be center or bottom. Tried to set it to: ' + value + ' Changing it to center'); + value = 'center'; + } + } + + this.properties[name.toLowerCase()] = value; + } + + + /** + * A simple getter + * + * @param string name The name of the property to set + */ + RGraph.Scatter.prototype.Get = function (name) + { + return this.properties[name]; + } + + + /** + * The function you call to draw the line chart + */ + RGraph.Scatter.prototype.Draw = function () + { + // MUST be the first thing done! + if (typeof(this.Get('chart.background.image')) == 'string' && !this.__background_image__) { + RGraph.DrawBackgroundImage(this); + return; + } + + /** + * Fire the onbeforedraw event + */ + RGraph.FireCustomEvent(this, 'onbeforedraw'); + + /** + * Clear all of this canvases event handlers (the ones installed by RGraph) + */ + RGraph.ClearEventListeners(this.id); + + /** + * This is new in May 2011 and facilitates indiviual gutter settings, + * eg chart.gutter.left + */ + this.gutterLeft = this.Get('chart.gutter.left'); + this.gutterRight = this.Get('chart.gutter.right'); + this.gutterTop = this.Get('chart.gutter.top'); + this.gutterBottom = this.Get('chart.gutter.bottom'); + + // Go through all the data points and see if a tooltip has been given + this.Set('chart.tooltips', false); + this.hasTooltips = false; + var overHotspot = false; + + // Reset the coords array + this.coords = []; + + if (!RGraph.isIE8()) { + for (var i=0; i<this.data.length; ++i) { + for (var j =0;j<this.data[i].length; ++j) { + if (this.data[i][j] && this.data[i][j][3] && typeof(this.data[i][j][3]) == 'string' && this.data[i][j][3].length) { + this.Set('chart.tooltips', [1]); // An array + this.hasTooltips = true; + } + } + } + } + + // Reset the maximum value + this.max = 0; + + // Work out the maximum Y value + if (this.Get('chart.ymax') && this.Get('chart.ymax') > 0) { + + this.scale = []; + this.max = this.Get('chart.ymax'); + this.min = this.Get('chart.ymin') ? this.Get('chart.ymin') : 0; + + this.scale[0] = ((this.max - this.min) * (1/5)) + this.min; + this.scale[1] = ((this.max - this.min) * (2/5)) + this.min; + this.scale[2] = ((this.max - this.min) * (3/5)) + this.min; + this.scale[3] = ((this.max - this.min) * (4/5)) + this.min; + this.scale[4] = ((this.max - this.min) * (5/5)) + this.min; + + var decimals = this.Get('chart.scale.decimals'); + + this.scale = [ + Number(this.scale[0]).toFixed(decimals), + Number(this.scale[1]).toFixed(decimals), + Number(this.scale[2]).toFixed(decimals), + Number(this.scale[3]).toFixed(decimals), + Number(this.scale[4]).toFixed(decimals) + ]; + + } else { + + var i = 0; + var j = 0; + + for (i=0; i<this.data.length; ++i) { + for (j=0; j<this.data[i].length; ++j) { + this.max = Math.max(this.max, typeof(this.data[i][j][1]) == 'object' ? RGraph.array_max(this.data[i][j][1]) : Math.abs(this.data[i][j][1])); + } + } + + this.scale = RGraph.getScale(this.max, this); + + this.max = this.scale[4]; + this.min = this.Get('chart.ymin') ? this.Get('chart.ymin') : 0; + + if (this.min) { + this.scale[0] = ((this.max - this.min) * (1/5)) + this.min; + this.scale[1] = ((this.max - this.min) * (2/5)) + this.min; + this.scale[2] = ((this.max - this.min) * (3/5)) + this.min; + this.scale[3] = ((this.max - this.min) * (4/5)) + this.min; + this.scale[4] = ((this.max - this.min) * (5/5)) + this.min; + } + + + if (typeof(this.Get('chart.scale.decimals')) == 'number') { + var decimals = this.Get('chart.scale.decimals'); + + this.scale = [ + Number(this.scale[0]).toFixed(decimals), + Number(this.scale[1]).toFixed(decimals), + Number(this.scale[2]).toFixed(decimals), + Number(this.scale[3]).toFixed(decimals), + Number(this.scale[4]).toFixed(decimals) + ]; + } + } + + this.grapharea = this.canvas.height - this.gutterTop - this.gutterBottom; + + // Progressively Draw the chart + RGraph.background.Draw(this); + + /** + * Draw any horizontal bars that have been specified + */ + if (this.Get('chart.background.hbars') && this.Get('chart.background.hbars').length) { + RGraph.DrawBars(this); + } + + /** + * Draw any vertical bars that have been specified + */ + if (this.Get('chart.background.vbars') && this.Get('chart.background.vbars').length) { + this.DrawVBars(); + } + + if (!this.Get('chart.noaxes')) { + this.DrawAxes(); + } + + this.DrawLabels(); + + i = 0; + for(i=0; i<this.data.length; ++i) { + this.DrawMarks(i); + + // Set the shadow + this.context.shadowColor = this.Get('chart.line.shadow.color'); + this.context.shadowOffsetX = this.Get('chart.line.shadow.offsetx'); + this.context.shadowOffsetY = this.Get('chart.line.shadow.offsety'); + this.context.shadowBlur = this.Get('chart.line.shadow.blur'); + + this.DrawLine(i); + + // Turn the shadow off + RGraph.NoShadow(this); + } + + + if (this.Get('chart.line')) { + for (var i=0;i<this.data.length; ++i) { + this.DrawMarks(i); // Call this again so the tickmarks appear over the line + } + } + + + + /** + * Setup the context menu if required + */ + if (this.Get('chart.contextmenu')) { + RGraph.ShowContext(this); + } + + /** + * Install the event handler for tooltips + */ + if (this.hasTooltips) { + + /** + * Register all charts + */ + RGraph.Register(this); + + var overHotspot = false; + + var canvas_onmousemove_func = function (e) + { + e = RGraph.FixEventObject(e); + + var canvas = e.target; + var obj = canvas.__object__; + var context = obj.context; + var mouseCoords = RGraph.getMouseXY(e); + var point = obj.getPoint(e); + var overHotspot = false; + + if (point) { + + var __dataset__ = point[2]; + var __index__ = point[3]; + var __text__ = point[4]; + var overHotspot = true; + + + + if (point[4]) { + canvas.style.cursor = 'pointer'; + + if ( + !RGraph.Registry.Get('chart.tooltip') || + RGraph.Registry.Get('chart.tooltip').__text__ != __text__ || + RGraph.Registry.Get('chart.tooltip').__index__ != __index__ || + RGraph.Registry.Get('chart.tooltip').__dataset__ != __dataset__ + ) { + + if (obj.Get('chart.tooltips.highlight')) { + RGraph.Redraw(); + } + + /** + * Get the tooltip text + */ + if (typeof(__text__) == 'function') { + var text = String(__text__(i)); + + } else { + var text = String(__text__); + } + + RGraph.Tooltip(canvas, text, e.pageX, e.pageY, __index__); + + RGraph.Registry.Get('chart.tooltip').__index__ = __index__; + + if (RGraph.Registry.Get('chart.tooltip')) { + RGraph.Registry.Get('chart.tooltip').__dataset__ = __dataset__; + } + + + + /** + * Draw a circle around the mark. Also highlight the boxplot if necessary + */ + if (obj.Get('chart.tooltips.highlight') && typeof(point[0]) == 'object') { + context.beginPath(); + context.strokeStyle = 'black'; + context.fillStyle = 'rgba(255,255,255,0.5)'; + context.strokeRect(point[0][0], point[1][0], point[0][1], point[1][1]); + context.fillRect(point[0][0], point[1][0], point[0][1], point[1][1]); + context.stroke(); + context.fill(); + + } else if (obj.Get('chart.tooltips.highlight') && typeof(point[0]) == 'number') { + context.beginPath(); + context.fillStyle = 'rgba(255,255,255,0.5)'; + context.arc(point[0], point[1], 3, 0, 6.28, 0); + context.fill(); + } + } + } + } + + /** + * Reset the pointer + */ + if (!overHotspot || !point[4]) { + canvas.style.cursor = 'default'; + } + } + this.canvas.addEventListener('mousemove', canvas_onmousemove_func, false); + RGraph.AddEventListener(this.id, 'mousemove', canvas_onmousemove_func); + } + + + /** + * Draw the key if necessary + */ + if (this.Get('chart.key') && this.Get('chart.key').length) { + RGraph.DrawKey(this, this.Get('chart.key'), this.Get('chart.line.colors')); + } + + + /** + * Draw " above" labels if enabled + */ + if (this.Get('chart.labels.above')) { + this.DrawAboveLabels(); + } + + /** + * Draw the "in graph" labels, using the member function, NOT the shared function in RGraph.common.core.js + */ + this.DrawInGraphLabels(this); + + + /** + * Draw crosschairs + */ + RGraph.DrawCrosshairs(this); + + + /** + * If the canvas is annotatable, do install the event handlers + */ + if (this.Get('chart.annotatable')) { + RGraph.Annotate(this); + } + + /** + * This bit shows the mini zoom window if requested + */ + if (this.Get('chart.zoom.mode') == 'thumbnail' || this.Get('chart.zoom.mode') == 'area') { + RGraph.ShowZoomWindow(this); + } + + + /** + * This function enables resizing + */ + if (this.Get('chart.resizable')) { + RGraph.AllowResizing(this); + } + + /** + * Fire the RGraph ondraw event + */ + RGraph.FireCustomEvent(this, 'ondraw'); + } + + + /** + * Draws the axes of the scatter graph + */ + RGraph.Scatter.prototype.DrawAxes = function () + { + var canvas = this.canvas; + var context = this.context; + var graphHeight = RGraph.GetHeight(this) - this.gutterTop - this.gutterBottom; + + context.beginPath(); + context.strokeStyle = this.Get('chart.axis.color'); + context.lineWidth = 1; + + // Draw the Y axis + if (this.Get('chart.yaxispos') == 'left') { + context.moveTo(this.gutterLeft, this.gutterTop); + context.lineTo(this.gutterLeft, RGraph.GetHeight(this) - this.gutterBottom); + } else { + context.moveTo(RGraph.GetWidth(this) - this.gutterRight, this.gutterTop); + context.lineTo(RGraph.GetWidth(this) - this.gutterRight, RGraph.GetHeight(this) - this.gutterBottom); + } + + + // Draw the X axis + if (this.Get('chart.xaxis')) { + if (this.Get('chart.xaxispos') == 'center') { + context.moveTo(this.gutterLeft, this.gutterTop + ((RGraph.GetHeight(this) - this.gutterTop - this.gutterBottom) / 2)); + context.lineTo(this.canvas.width - this.gutterRight, this.gutterTop + ((this.canvas.height - this.gutterTop - this.gutterBottom) / 2)); + } else { + context.moveTo(this.gutterLeft, this.canvas.height - this.gutterBottom); + context.lineTo(this.canvas.width - this.gutterRight, this.canvas.height - this.gutterBottom); + } + } + + /** + * Draw the Y tickmarks + */ + var numyticks = this.Get('chart.numyticks'); + + for (y=this.gutterTop; y < this.canvas.height - this.gutterBottom + (this.Get('chart.xaxispos') == 'center' ? 1 : 0) ; y+=(graphHeight / numyticks)) { + + // This is here to accomodate the X axis being at the center + if (y == (this.gutterTop + ((this.canvas.height - this.gutterTop - this.gutterBottom) / 2)) ) continue; + + if (this.Get('chart.yaxispos') == 'left') { + context.moveTo(this.gutterLeft, y); + context.lineTo(this.gutterLeft - 3, y); + } else { + context.moveTo(this.canvas.width - this.gutterRight +3, y); + context.lineTo(this.canvas.width - this.gutterRight, y); + } + + /** + * Draw an extra tick if the X axis isn't being shown + */ + if (this.Get('chart.xaxis') == false && this.Get('chart.noendytick') == false) { + this.context.moveTo(this.gutterLeft, this.canvas.height - this.gutterBottom); + this.context.lineTo(this.gutterLeft - 3, this.canvas.height - this.gutterBottom); + } + } + + + /** + * Draw the X tickmarks + */ + if (this.Get('chart.xticks') && this.Get('chart.xaxis')) { + var x = 0; + var y = (this.Get('chart.xaxispos') == 'center') ? this.gutterTop + (this.grapharea / 2): (this.canvas.height - this.gutterBottom); + this.xTickGap = (this.Get('chart.labels') && this.Get('chart.labels').length) ? ((this.canvas.width - this.gutterLeft - this.gutterRight ) / this.Get('chart.labels').length) : (this.canvas.width - this.gutterLeft - this.gutterRight) / 10; + + for (x = (this.gutterLeft + (this.Get('chart.yaxispos') == 'left' ? this.xTickGap : 0) ); + x <= (this.canvas.width - this.gutterRight - (this.Get('chart.yaxispos') == 'left' ? 0 : 1)); + x += this.xTickGap) { + + if (this.Get('chart.yaxispos') == 'left' && this.Get('chart.noendxtick') == true && x == (this.canvas.width - this.gutterRight) ) { + continue; + } else if (this.Get('chart.yaxispos') == 'right' && this.Get('chart.noendxtick') == true && x == this.gutterLeft) { + continue; + } + + context.moveTo(x, y - (this.Get('chart.xaxispos') == 'center' ? 3 : 0)); + context.lineTo(x, y + 3); + } + } + + context.stroke(); + } + + + + + + + + + + + + /** + * Draws the labels on the scatter graph + */ + RGraph.Scatter.prototype.DrawLabels = function () + { + this.context.fillStyle = this.Get('chart.text.color'); + var font = this.Get('chart.text.font'); + var xMin = this.Get('chart.xmin'); + var xMax = this.Get('chart.xmax'); + var yMax = this.scale[4]; + var yMin = this.Get('chart.ymin'); + var text_size = this.Get('chart.text.size'); + var units_pre = this.Get('chart.units.pre'); + var units_post = this.Get('chart.units.post'); + var numYLabels = this.Get('chart.ylabels.count'); + var invert = this.Get('chart.ylabels.invert'); + var inside = this.Get('chart.ylabels.inside'); + var context = this.context; + var canvas = this.canvas; + var boxed = false; + + this.halfTextHeight = text_size / 2; + + + this.halfGraphHeight = (this.canvas.height - this.gutterTop - this.gutterBottom) / 2; + + /** + * Draw the Y yaxis labels, be it at the top or center + */ + if (this.Get('chart.ylabels')) { + + var xPos = this.Get('chart.yaxispos') == 'left' ? this.gutterLeft - 5 : RGraph.GetWidth(this) - this.gutterRight + 5; + var align = this.Get('chart.yaxispos') == 'right' ? 'left' : 'right'; + + /** + * Now change the two things above if chart.ylabels.inside is specified + */ + if (inside) { + if (this.Get('chart.yaxispos') == 'left') { + xPos = this.Get('chart.gutter.left') + 5; + align = 'left'; + boxed = true; + } else { + xPos = this.canvas.width - this.Get('chart.gutter.right') - 5; + align = 'right'; + boxed = true; + } + } + + if (this.Get('chart.xaxispos') == 'center') { + + + /** + * Specific Y labels + */ + if (typeof(this.Get('chart.ylabels.specific')) == 'object' && this.Get('chart.ylabels.specific') != null && this.Get('chart.ylabels.specific').length) { + + var labels = this.Get('chart.ylabels.specific'); + + if (this.Get('chart.ymin') > 0) { + labels = []; + for (var i=0; i<(this.Get('chart.ylabels.specific').length - 1); ++i) { + labels.push(this.Get('chart.ylabels.specific')[i]); + } + } + + for (var i=0; i<labels.length; ++i) { + var y = this.gutterTop + (i * (this.grapharea / (labels.length * 2) ) ); + RGraph.Text(context, font, text_size, xPos, y, labels[i], 'center', align, boxed); + } + + var reversed_labels = RGraph.array_reverse(labels); + + for (var i=0; i<reversed_labels.length; ++i) { + var y = this.gutterTop + (this.grapharea / 2) + ((i+1) * (this.grapharea / (labels.length * 2) ) ); + RGraph.Text(context,font, text_size, xPos, y, reversed_labels[i], 'center', align, boxed); + } + + /** + * Draw the center label if chart.ymin is specified + */ + if (this.Get('chart.ymin') > 0) { + RGraph.Text(context, font, text_size, xPos, (this.grapharea / 2) + this.Get('chart.gutter.top'), this.Get('chart.ylabels.specific')[this.Get('chart.ylabels.specific').length - 1], 'center', align, boxed); + } + + return; + } + + + if (numYLabels == 1 || numYLabels == 3 || numYLabels == 5) { + // Draw the top halves labels + RGraph.Text(context, font, text_size, xPos, this.gutterTop, RGraph.number_format(this, this.scale[4], units_pre, units_post), 'center', align, boxed); + + + if (numYLabels >= 5) { + RGraph.Text(context, font, text_size, xPos, this.gutterTop + ((RGraph.GetHeight(this) - this.gutterTop - this.gutterBottom) * (1/10) ), RGraph.number_format(this, this.scale[3], units_pre, units_post), 'center', align, boxed); + RGraph.Text(context, font, text_size, xPos, this.gutterTop + ((RGraph.GetHeight(this) - this.gutterTop - this.gutterBottom) * (3/10) ), RGraph.number_format(this, this.scale[1], units_pre, units_post), 'center', align, boxed); + } + + if (numYLabels >= 3) { + RGraph.Text(context, font, text_size, xPos, this.gutterTop + ((RGraph.GetHeight(this) - this.gutterTop - this.gutterBottom) * (2/10) ), RGraph.number_format(this, this.scale[2], units_pre, units_post), 'center', align, boxed); + RGraph.Text(context, font, text_size, xPos, this.gutterTop + ((RGraph.GetHeight(this) - this.gutterTop - this.gutterBottom) * (4/10) ), RGraph.number_format(this, this.scale[0], units_pre, units_post), 'center', align, boxed); + } + + // Draw the bottom halves labels + if (numYLabels >= 3) { + RGraph.Text(context, font, text_size, xPos, this.gutterTop + ((RGraph.GetHeight(this) - this.gutterTop - this.gutterBottom) * (1/10) ) + this.halfGraphHeight, '-' + RGraph.number_format(this, this.scale[0], units_pre, units_post), 'center', align, boxed); + RGraph.Text(context, font, text_size, xPos, this.gutterTop + ((RGraph.GetHeight(this) - this.gutterTop - this.gutterBottom) * (3/10) ) + this.halfGraphHeight, '-' + RGraph.number_format(this, this.scale[2], units_pre, units_post), 'center', align, boxed); + } + + if (numYLabels == 5) { + RGraph.Text(context, font, text_size, xPos, this.gutterTop + ((RGraph.GetHeight(this) - this.gutterTop - this.gutterBottom) * (2/10) ) + this.halfGraphHeight, '-' + RGraph.number_format(this, this.scale[1], units_pre, units_post), 'center', align, boxed); + RGraph.Text(context, font, text_size, xPos, this.gutterTop + ((RGraph.GetHeight(this) - this.gutterTop - this.gutterBottom) * (4/10) ) + this.halfGraphHeight, '-' + RGraph.number_format(this, this.scale[3], units_pre, units_post), 'center', align, boxed); + } + + RGraph.Text(context, font, text_size, xPos, this.gutterTop + ((this.canvas.height - this.gutterTop - this.gutterBottom) * (5/10) ) + this.halfGraphHeight, '-' + RGraph.number_format(this, this.scale[4], units_pre, units_post), 'center', align, boxed); + + } else if (numYLabels == 10) { + // 10 Y labels + var interval = (this.grapharea / numYLabels) / 2; + + for (var i=0; i<numYLabels; ++i) { + RGraph.Text(context, font, text_size, xPos,this.gutterTop + ((this.canvas.height - this.gutterTop - this.gutterBottom) * (i/20) ),RGraph.number_format(this,(this.max - (this.max * (i/10))).toFixed(this.Get('chart.scale.decimals')),units_pre, units_post),'center', align, boxed); + RGraph.Text(context, font, text_size, xPos,this.gutterTop + ((this.canvas.height - this.gutterTop - this.gutterBottom) * (i/20) ) + (this.grapharea / 2) + (this.grapharea / 20),'-' + RGraph.number_format(this, ((this.max * (i/10)) + (this.max * (1/10))).toFixed((this.Get('chart.scale.decimals'))), units_pre, units_post), 'center', align, boxed); + } + + } else { + alert('[SCATTER SCALE] Number of Y labels can be 1/3/5/10 only'); + } + + } else { + + var xPos = this.Get('chart.yaxispos') == 'left' ? this.gutterLeft - 5 : this.canvas.width - this.gutterRight + 5; + var align = this.Get('chart.yaxispos') == 'right' ? 'left' : 'right'; + + if (inside) { + if (this.Get('chart.yaxispos') == 'left') { + xPos = this.Get('chart.gutter.left') + 5; + align = 'left'; + boxed = true; + } else { + xPos = this.canvas.width - this.Get('chart.gutter.right') - 5; + align = 'right'; + boxed = true; + } + } + /** + * Specific Y labels + */ + if (typeof(this.Get('chart.ylabels.specific')) == 'object' && this.Get('chart.ylabels.specific')) { + + var labels = this.Get('chart.ylabels.specific'); + + // Lose the last label + if (this.Get('chart.ymin') > 0) { + labels = []; + for (var i=0; i<(this.Get('chart.ylabels.specific').length - 1); ++i) { + labels.push(this.Get('chart.ylabels.specific')[i]); + } + } + + for (var i=0; i<labels.length; ++i) { + var y = this.gutterTop + (i * (this.grapharea / labels.length) ); + + RGraph.Text(context, font, text_size, xPos, y, labels[i], 'center', align, boxed); + } + + /** + * Draw the center label if chart.ymin is specified + */ + if (this.Get('chart.ymin') > 0) { + RGraph.Text(context, font, text_size, xPos, this.canvas.height - this.Get('chart.gutter.bottom'), this.Get('chart.ylabels.specific')[this.Get('chart.ylabels.specific').length - 1], 'center', align, boxed); + } + + return; + } + + if (numYLabels == 1 || numYLabels == 3 || numYLabels == 5) { + if (invert) { + RGraph.Text(context, font, text_size, xPos, this.gutterTop, RGraph.number_format(this, 0, units_pre, units_post), 'center', align, boxed); + RGraph.Text(context, font, text_size, xPos, this.gutterTop + ((RGraph.GetHeight(this) - this.gutterTop - this.gutterBottom) * (5/5) ), RGraph.number_format(this, this.scale[4], units_pre, units_post), 'center', align, boxed); + + if (numYLabels >= 5) { + RGraph.Text(context, font, text_size, xPos, this.gutterTop + ((this.canvas.height - this.gutterTop - this.gutterBottom) * (2/5) ), RGraph.number_format(this, this.scale[1], units_pre, units_post), 'center', align, boxed); + RGraph.Text(context, font, text_size, xPos, this.gutterTop + ((this.canvas.height - this.gutterTop - this.gutterBottom) * (4/5) ), RGraph.number_format(this, this.scale[3], units_pre, units_post), 'center', align, boxed); + } + + if (numYLabels >= 3) { + RGraph.Text(context, font, text_size, xPos, this.gutterTop + ((this.canvas.height - this.gutterTop - this.gutterBottom) * (3/5) ), RGraph.number_format(this, this.scale[2], units_pre, units_post), 'center', align, boxed); + RGraph.Text(context, font, text_size, xPos, this.gutterTop + ((this.canvas.height - this.gutterTop - this.gutterBottom) * (1/5) ), RGraph.number_format(this, this.scale[0], units_pre, units_post), 'center', align, boxed); + } + } else { + RGraph.Text(context, font, text_size, xPos, this.gutterTop, RGraph.number_format(this, this.scale[4], units_pre, units_post), 'center', align, boxed); + + if (numYLabels >= 5) { + RGraph.Text(context, font, text_size, xPos, this.gutterTop + ((this.canvas.height - this.gutterTop - this.gutterBottom) * (1/5) ), RGraph.number_format(this, this.scale[3], units_pre, units_post), 'center', align, boxed); + RGraph.Text(context, font, text_size, xPos, this.gutterTop + ((this.canvas.height - this.gutterTop - this.gutterBottom) * (3/5) ), RGraph.number_format(this, this.scale[1], units_pre, units_post), 'center', align, boxed); + } + + if (numYLabels >= 3) { + RGraph.Text(context, font, text_size, xPos, this.gutterTop + ((this.canvas.height - this.gutterTop - this.gutterBottom) * (2/5) ), RGraph.number_format(this, this.scale[2], units_pre, units_post), 'center', align, boxed); + RGraph.Text(context, font, text_size, xPos, this.gutterTop + ((this.canvas.height - this.gutterTop - this.gutterBottom) * (4/5) ), RGraph.number_format(this, this.scale[0], units_pre, units_post), 'center', align, boxed); + } + } + } else if (numYLabels == 10) { + var interval = (this.grapharea / numYLabels) / 2; + if (invert) { + for (var i=numYLabels; i>=0; --i) { + RGraph.Text(context, font, text_size, xPos,this.gutterTop + ((this.canvas.height - this.gutterTop - this.gutterBottom) * ((10-i)/10) ),RGraph.number_format(this,(this.max - (this.max * (i/10))).toFixed((this.Get('chart.scale.decimals'))), units_pre, units_post),'center', align, boxed); + } + } else { + // 10 Y labels + for (var i=0; i<numYLabels; ++i) { + + RGraph.Text(context, font, text_size, xPos,this.gutterTop + ((this.canvas.height - this.gutterTop - this.gutterBottom) * (i/10) ),RGraph.number_format(this, (this.max - ((this.max - this.min) * (i/10))).toFixed((this.Get('chart.scale.decimals'))), units_pre, units_post),'center', align, boxed); + } + } + } else { + alert('[SCATTER SCALE] Number of Y labels can be 1/3/5/10 only'); + } + + if (this.Get('chart.ymin')) { + RGraph.Text(context, font, text_size, xPos, this.canvas.height - this.gutterBottom,RGraph.number_format(this, this.Get('chart.ymin').toFixed(this.Get('chart.scale.decimals')), units_pre, units_post),'center', align, boxed); + } + } + } + + + + + /** + * Draw an X scale + */ + if (this.Get('chart.xscale')) { + + var numXLabels = this.Get('chart.xscale.numlabels'); + var interval = (this.canvas.width - this.gutterLeft - this.gutterRight) / numXLabels; + var y = this.canvas.height - this.gutterBottom + 5 + (text_size / 2); + var units_pre_x = this.Get('chart.xscale.units.pre'); + var units_post_x = this.Get('chart.xscale.units.post'); + + + if (!this.Get('chart.xmax')) { + var xmax = 0; + + for (var ds=0; ds<this.data.length; ++ds) { + for (var point=0; point<this.data[ds].length; ++point) { + xmax = Math.max(xmax, this.data[ds][point][0]); + } + } + + this.Set('chart.xmax', RGraph.getScale(xmax)[4]); + } + + + for (var i=0; i<numXLabels; ++i) { + + var num = ( (this.Get('chart.xmax') - this.Get('chart.xmin')) * ((i+1) / numXLabels)) + this.Get('chart.xmin'); + var x = this.gutterLeft + ((i+1) * interval); + + if (typeof(this.Get('chart.xscale.formatter')) == 'function') { + var text = this.Get('chart.xscale.formatter')(this, num); + } else { + var text = RGraph.number_format(this, + num.toFixed(this.Get('chart.scale.decimals')), + units_pre_x, + units_post_x); + } + + RGraph.Text(context, font, text_size, x, y, text, 'center', 'center'); + } + + /** + * Draw X labels + */ + } else { + // Put the text on the X axis + var graphArea = this.canvas.width - this.gutterLeft - this.gutterRight; + var xInterval = graphArea / this.Get('chart.labels').length; + var xPos = this.gutterLeft; + var yPos = (this.canvas.height - this.gutterBottom) + 15; + var labels = this.Get('chart.labels'); + + /** + * Text angle + */ + var angle = 0; + var valign = null; + var halign = 'center'; + + if (this.Get('chart.text.angle') > 0) { + angle = -1 * this.Get('chart.text.angle'); + valign = 'center'; + halign = 'right'; + yPos -= 10; + } + + for (i=0; i<labels.length; ++i) { + + if (typeof(labels[i]) == 'object') { + + if (this.Get('chart.labels.specific.align') == 'center') { + var rightEdge = 0; + + if (labels[i+1] && labels[i+1][1]) { + rightEdge = labels[i+1][1]; + } else { + rightEdge = this.Get('chart.xmax'); + } + + var offset = (rightEdge - labels[i][1]) / 2; + + } else { + var offset = 0; + } + + + RGraph.Text(context, + font, + this.Get('chart.text.size'), + this.gutterLeft + (graphArea * ((labels[i][1] - xMin + offset) / (this.Get('chart.xmax') - xMin))) + 5, + yPos, + String(labels[i][0]), + valign, + angle != 0 ? 'right' : (this.Get('chart.labels.specific.align') == 'center' ? 'center' : 'left'), + null, + angle + ); + + /** + * Draw the gray indicator line + */ + this.context.beginPath(); + this.context.strokeStyle = '#bbb'; + this.context.moveTo(this.gutterLeft + (graphArea * ((labels[i][1] - xMin)/ (this.Get('chart.xmax') - xMin))), RGraph.GetHeight(this) - this.gutterBottom); + this.context.lineTo(this.gutterLeft + (graphArea * ((labels[i][1] - xMin)/ (this.Get('chart.xmax') - xMin))), RGraph.GetHeight(this) - this.gutterBottom + 20); + this.context.stroke(); + + } else { + RGraph.Text(context, font, this.Get('chart.text.size'), xPos + (this.xTickGap / 2), yPos, String(labels[i]), valign, halign, null, angle); + } + + // Do this for the next time around + xPos += xInterval; + } + + /** + * Draw the final indicator line + */ + if (typeof(labels[0]) == 'object') { + this.context.beginPath(); + this.context.strokeStyle = '#bbb'; + this.context.moveTo(this.gutterLeft + graphArea, RGraph.GetHeight(this) - this.gutterBottom); + this.context.lineTo(this.gutterLeft + graphArea, RGraph.GetHeight(this) - this.gutterBottom + 20); + this.context.stroke(); + } + } + } + + + + + + + + + + + + + + + /** + * Draws the actual scatter graph marks + * + * @param i integer The dataset index + */ + RGraph.Scatter.prototype.DrawMarks = function (i) + { + /** + * Reset the coords array + */ + this.coords[i] = []; + + /** + * Plot the values + */ + var xmax = this.Get('chart.xmax'); + var default_color = this.Get('chart.defaultcolor'); + + for (var j=0; j<this.data[i].length; ++j) { + /** + * This is here because tooltips are optional + */ + var data_point = this.data[i]; + + var xCoord = data_point[j][0]; + var yCoord = data_point[j][1]; + var color = data_point[j][2] ? data_point[j][2] : default_color; + var tooltip = (data_point[j] && data_point[j][3]) ? data_point[j][3] : null; + + + this.DrawMark( + i, + xCoord, + yCoord, + xmax, + this.scale[4], + color, + tooltip, + this.coords[i], + data_point + ); + } + } + + + /** + * Draws a single scatter mark + */ + RGraph.Scatter.prototype.DrawMark = function (index, x, y, xMax, yMax, color, tooltip, coords, data) + { + /** + * Inverted Y scale handling + */ + if (this.Get('chart.ylabels.invert')) { + if (typeof(y) == 'number') { + y = yMax - y; + } + } + + var tickmarks = this.Get('chart.tickmarks'); + var tickSize = this.Get('chart.ticksize'); + var xMin = this.Get('chart.xmin'); + var x = ((x - xMin) / (xMax - xMin)) * (this.canvas.width - this.gutterLeft - this.gutterRight); + var originalX = x; + var originalY = y; + + + /** + * This allows chart.tickmarks to be an array + */ + + if (tickmarks && typeof(tickmarks) == 'object') { + tickmarks = tickmarks[index]; + } + + + /** + * This allows chart.ticksize to be an array + */ + if (typeof(tickSize) == 'object') { + var tickSize = tickSize[index]; + var halfTickSize = tickSize / 2; + } else { + var halfTickSize = tickSize / 2; + } + + + /** + * This bit is for boxplots only + */ + if ( typeof(y) == 'object' + && typeof(y[0]) == 'number' + && typeof(y[1]) == 'number' + && typeof(y[2]) == 'number' + && typeof(y[3]) == 'number' + && typeof(y[4]) == 'number' + ) { + + var yMin = this.Get('chart.ymin') ? this.Get('chart.ymin') : 0; + this.Set('chart.boxplot', true); + this.graphheight = this.canvas.height - this.gutterTop - this.gutterBottom; + + if (this.Get('chart.xaxispos') == 'center') { + this.graphheight /= 2; + } + + var y0 = (this.graphheight) - ((y[4] - yMin) / (yMax - yMin)) * (this.graphheight); + var y1 = (this.graphheight) - ((y[3] - yMin) / (yMax - yMin)) * (this.graphheight); + var y2 = (this.graphheight) - ((y[2] - yMin) / (yMax - yMin)) * (this.graphheight); + var y3 = (this.graphheight) - ((y[1] - yMin) / (yMax - yMin)) * (this.graphheight); + var y4 = (this.graphheight) - ((y[0] - yMin) / (yMax - yMin)) * (this.graphheight); + + /** + * Inverted labels + */ + if (this.Get('chart.ylabels.invert')) { + y0 = this.graphheight - y0; + y1 = this.graphheight - y1; + y2 = this.graphheight - y2; + y3 = this.graphheight - y3; + y4 = this.graphheight - y4; + } + + var col1 = y[5]; + var col2 = y[6]; + + // Override the boxWidth + if (typeof(y[7]) == 'number') { + var boxWidth = y[7]; + } + + var y = this.graphheight - y2; + + } else { + var yMin = this.Get('chart.ymin') ? this.Get('chart.ymin') : 0; + var y = (( (y - yMin) / (yMax - yMin)) * (RGraph.GetHeight(this) - this.gutterTop - this.gutterBottom)); + } + + /** + * Account for the X axis being at the centre + */ + if (this.Get('chart.xaxispos') == 'center') { + y /= 2; + y += this.halfGraphHeight; + } + + // This is so that points are on the graph, and not the gutter + x += this.gutterLeft; + y = this.canvas.height - this.gutterBottom - y; + + this.context.beginPath(); + + // Color + this.context.strokeStyle = color; + + /** + * Boxplots + */ + if ( this.Get('chart.boxplot') + && typeof(y0) == 'number' + && typeof(y1) == 'number' + && typeof(y2) == 'number' + && typeof(y3) == 'number' + && typeof(y4) == 'number' + ) { + + var boxWidth = boxWidth ? boxWidth : this.Get('chart.boxplot.width'); + var halfBoxWidth = boxWidth / 2; + + this.context.beginPath(); + + // Draw the upper coloured box if a value is specified + if (col1) { + this.context.fillStyle = col1; + this.context.fillRect(x - halfBoxWidth, y1 + this.gutterTop, boxWidth, y2 - y1); + } + + // Draw the lower coloured box if a value is specified + if (col2) { + this.context.fillStyle = col2; + this.context.fillRect(x - halfBoxWidth, y2 + this.gutterTop, boxWidth, y3 - y2); + } + + this.context.strokeRect(x - halfBoxWidth, y1 + this.gutterTop, boxWidth, y3 - y1); + this.context.stroke(); + + // Now draw the whiskers + this.context.beginPath(); + if (this.Get('chart.boxplot.capped')) { + this.context.moveTo(x - halfBoxWidth, y0 + this.gutterTop); + this.context.lineTo(x + halfBoxWidth, y0 + this.gutterTop); + } + + this.context.moveTo(x, y0 + this.gutterTop); + this.context.lineTo(x, y1 + this.gutterTop); + + if (this.Get('chart.boxplot.capped')) { + this.context.moveTo(x - halfBoxWidth, y4 + this.gutterTop); + this.context.lineTo(x + halfBoxWidth, y4 + this.gutterTop); + } + + this.context.moveTo(x, y4 + this.gutterTop); + this.context.lineTo(x, y3 + this.gutterTop); + + this.context.stroke(); + } + + + /** + * Draw the tickmark, but not for boxplots + */ + if (!y0 && !y1 && !y2 && !y3 && !y4) { + + this.graphheight = this.canvas.height - this.gutterTop - this.gutterBottom; + + + + if (tickmarks == 'circle') { + this.context.arc(x, y, halfTickSize, 0, 6.28, 0); + this.context.fillStyle = color; + this.context.fill(); + + } else if (tickmarks == 'plus') { + + this.context.moveTo(x, y - halfTickSize); + this.context.lineTo(x, y + halfTickSize); + this.context.moveTo(x - halfTickSize, y); + this.context.lineTo(x + halfTickSize, y); + this.context.stroke(); + + } else if (tickmarks == 'square') { + this.context.strokeStyle = color; + this.context.fillStyle = color; + this.context.fillRect( + x - halfTickSize, + y - halfTickSize, + tickSize, + tickSize + ); + //this.context.fill(); + + } else if (tickmarks == 'cross') { + + this.context.moveTo(x - halfTickSize, y - halfTickSize); + this.context.lineTo(x + halfTickSize, y + halfTickSize); + this.context.moveTo(x + halfTickSize, y - halfTickSize); + this.context.lineTo(x - halfTickSize, y + halfTickSize); + + this.context.stroke(); + + /** + * Diamond shape tickmarks + */ + } else if (tickmarks == 'diamond') { + this.context.fillStyle = this.context.strokeStyle; + + this.context.moveTo(x, y - halfTickSize); + this.context.lineTo(x + halfTickSize, y); + this.context.lineTo(x, y + halfTickSize); + this.context.lineTo(x - halfTickSize, y); + this.context.lineTo(x, y - halfTickSize); + + this.context.fill(); + this.context.stroke(); + + /** + * Custom tickmark style + */ + } else if (typeof(tickmarks) == 'function') { + + var graphWidth = RGraph.GetWidth(this) - this.gutterLeft - this.gutterRight + var xVal = ((x - this.gutterLeft) / graphWidth) * xMax; + var yVal = ((this.graphheight - (y - this.gutterTop)) / this.graphheight) * yMax; + + tickmarks(this, data, x, y, xVal, yVal, xMax, yMax, color) + + /** + * No tickmarks + */ + } else if (tickmarks == null) { + + /** + * Unknown tickmark type + */ + } else { + alert('[SCATTER] (' + this.id + ') Unknown tickmark style: ' + tickmarks ); + } + } + + /** + * Add the tickmark to the coords array + */ + if ( this.Get('chart.boxplot') + && typeof(y0) == 'number' + && typeof(y1) == 'number' + && typeof(y2) == 'number' + && typeof(y3) == 'number' + && typeof(y4) == 'number') { + + x = [x - halfBoxWidth, x + halfBoxWidth]; + y = [y0 + this.gutterTop, y1 + this.gutterTop, y2 + this.gutterTop, y3 + this.gutterTop, y4 + this.gutterTop]; + + } + + coords.push([x, y, tooltip]); + } + + + /** + * Draws an optional line connecting the tick marks. + * + * @param i The index of the dataset to use + */ + RGraph.Scatter.prototype.DrawLine = function (i) + { + if (this.Get('chart.line') && this.coords[i].length >= 2) { + + this.context.lineCap = 'round'; + this.context.lineJoin = 'round'; + this.context.lineWidth = this.GetLineWidth(i);// i is the index of the set of coordinates + this.context.strokeStyle = this.Get('chart.line.colors')[i]; + this.context.beginPath(); + + var len = this.coords[i].length; + + for (var j=0; j<this.coords[i].length; ++j) { + + var xPos = this.coords[i][j][0]; + var yPos = this.coords[i][j][1]; + + if (j == 0) { + this.context.moveTo(xPos, yPos); + } else { + + // Stepped? + var stepped = this.Get('chart.line.stepped'); + + if ( (typeof(stepped) == 'boolean' && stepped) + || (typeof(stepped) == 'object' && stepped[i]) + ) { + this.context.lineTo(this.coords[i][j][0], this.coords[i][j - 1][1]); + } + + this.context.lineTo(xPos, yPos); + } + } + + this.context.stroke(); + } + + /** + * Set the linewidth back to 1 + */ + this.context.lineWidth = 1; + } + + + /** + * Returns the linewidth + * + * @param number i The index of the "line" (/set of coordinates) + */ + RGraph.Scatter.prototype.GetLineWidth = function (i) + { + var linewidth = this.Get('chart.line.linewidth'); + + if (typeof(linewidth) == 'number') { + return linewidth; + + } else if (typeof(linewidth) == 'object') { + if (linewidth[i]) { + return linewidth[i]; + } else { + return linewidth[0]; + } + + alert('[SCATTER] Error! chart.linewidth should be a single number or an array of one or more numbers'); + } + } + + + /** + * Draws vertical bars. Line chart doesn't use a horizontal scale, hence this function + * is not common + */ + RGraph.Scatter.prototype.DrawVBars = function () + { + var canvas = this.canvas; + var context = this.context; + var vbars = this.Get('chart.background.vbars'); + var graphWidth = RGraph.GetWidth(this) - this.gutterLeft - this.gutterRight; + + if (vbars) { + + var xmax = this.Get('chart.xmax'); + + for (var i=0; i<vbars.length; ++i) { + var startX = ((vbars[i][0] / xmax) * graphWidth) + this.gutterLeft; + var width = (vbars[i][1] / xmax) * graphWidth; + + context.beginPath(); + context.fillStyle = vbars[i][2]; + context.fillRect(startX, this.gutterTop, width, (RGraph.GetHeight(this) - this.gutterTop - this.gutterBottom)); + context.fill(); + } + } + } + + + + + + /** + * Draws in-graph labels. + * + * @param object obj The graph object + */ + RGraph.Scatter.prototype.DrawInGraphLabels = function (obj) + { + var canvas = obj.canvas; + var context = obj.context; + var labels = obj.Get('chart.labels.ingraph'); + var labels_processed = []; + + // Defaults + var fgcolor = 'black'; + var bgcolor = 'white'; + var direction = 1; + + if (!labels) { + return; + } + + /** + * Preprocess the labels array. Numbers are expanded + */ + for (var i=0; i<labels.length; ++i) { + if (typeof(labels[i]) == 'number') { + for (var j=0; j<labels[i]; ++j) { + labels_processed.push(null); + } + } else if (typeof(labels[i]) == 'string' || typeof(labels[i]) == 'object') { + labels_processed.push(labels[i]); + + } else { + labels_processed.push(''); + } + } + + /** + * Turn off any shadow + */ + RGraph.NoShadow(obj); + + if (labels_processed && labels_processed.length > 0) { + + var i=0; + + for (var set=0; set<obj.coords.length; ++set) { + for (var point = 0; point<obj.coords[set].length; ++point) { + if (labels_processed[i]) { + var x = obj.coords[set][point][0]; + var y = obj.coords[set][point][1]; + var length = typeof(labels_processed[i][4]) == 'number' ? labels_processed[i][4] : 25; + + var text_x = x; + var text_y = y - 5 - length; + + context.moveTo(x, y - 5); + context.lineTo(x, y - 5 - length); + + context.stroke(); + context.beginPath(); + + // This draws the arrow + context.moveTo(x, y - 5); + context.lineTo(x - 3, y - 10); + context.lineTo(x + 3, y - 10); + context.closePath(); + + + context.beginPath(); + + // Fore ground color + context.fillStyle = (typeof(labels_processed[i]) == 'object' && typeof(labels_processed[i][1]) == 'string') ? labels_processed[i][1] : 'black'; + + RGraph.Text(context, + obj.Get('chart.text.font'), + obj.Get('chart.text.size'), + text_x, + text_y, + (typeof(labels_processed[i]) == 'object' && typeof(labels_processed[i][0]) == 'string') ? labels_processed[i][0] : labels_processed[i], + 'bottom', + 'center', + true, + null, + (typeof(labels_processed[i]) == 'object' && typeof(labels_processed[i][2]) == 'string') ? labels_processed[i][2] : 'white'); + context.fill(); + } + + i++; + } + } + } + } + + + /** + * This function makes it much easier to get the (if any) point that is currently being hovered over. + * + * @param object e The event object + */ + RGraph.Scatter.prototype.getPoint = function (e) + { + var canvas = e.target; + var obj = canvas.__object__; + var context = obj.context; + var mouseXY = RGraph.getMouseXY(e); + var mouseX = mouseXY[0]; + var mouseY = mouseXY[1]; + var overHotspot = false; + var offset = obj.Get('chart.tooltips.hotspot'); // This is how far the hotspot extends + + for (var set=0; set<obj.coords.length; ++set) { + for (var i=0; i<obj.coords[set].length; ++i) { + + var xCoord = obj.coords[set][i][0]; + var yCoord = obj.coords[set][i][1]; + + if (typeof(yCoord) == 'number') { + if (mouseX <= (xCoord + offset) && + mouseX >= (xCoord - offset) && + mouseY <= (yCoord + offset) && + mouseY >= (yCoord - offset)) { + + return [xCoord, yCoord, set, i, obj.data[set][i][3]]; + } + } else { + + var mark = obj.data[set][i]; + + + /** + * Determine the width + */ + var width = obj.Get('chart.boxplot.width'); + + if (typeof(mark[1][7]) == 'number') { + width = mark[1][7]; + } + + if ( typeof(xCoord) == 'object' + && mouseX > xCoord[0] + && mouseX < xCoord[1] + && mouseY < yCoord[3] + && mouseY > yCoord[1] + ) { + + return [[xCoord[0], xCoord[1] - xCoord[0]], [yCoord[1], yCoord[3] - yCoord[1]], set, i, obj.data[set][i][3]]; + } + } + } + } + } + + + /** + * Draws the above line labels + */ + RGraph.Scatter.prototype.DrawAboveLabels = function () + { + var context = this.context; + var size = this.Get('chart.labels.above.size'); + var font = this.Get('chart.text.font'); + var units_pre = this.Get('chart.units.pre'); + var units_post = this.Get('chart.units.post'); + + + for (var set=0; set<this.coords.length; ++set) { + for (var point=0; point<this.coords[set].length; ++point) { + + var x_val = this.data[set][point][0]; + var y_val = this.data[set][point][1]; + + + var x_pos = this.coords[set][point][0]; + var y_pos = this.coords[set][point][1]; + + RGraph.Text(context, + font, + size, + x_pos, + y_pos - 5 - size, + x_val.toFixed(this.Get('chart.labels.above.decimals')) + ', ' + y_val.toFixed(this.Get('chart.labels.above.decimals')), + 'center', + 'center', + true, + null, + 'rgba(255, 255, 255, 0.7)'); + } + } + }
\ No newline at end of file diff --git a/schall/static/RGraph/libraries/RGraph.skeleton.js b/schall/static/RGraph/libraries/RGraph.skeleton.js new file mode 100644 index 0000000..fd93edc --- /dev/null +++ b/schall/static/RGraph/libraries/RGraph.skeleton.js @@ -0,0 +1,333 @@ + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + + + + + /** + * This is the RGraph.skeleton.js file which you can use as a base for creating new graph types. + */ + + + + + /** + * Having this here means that the RGraph libraries can be included in any order, instead of you having + * to include the common core library first. + */ + if (typeof(RGraph) == 'undefined') RGraph = {}; + + + + + /** + * The chart constructor. This function sets up the object. It takes the ID (the HTML attribute) of the canvas as the + * first argument and the data as the second. If you need to change this, you can. + * + * @param string id The canvas tag ID + * @param array data The chart data + */ + RGraph.Skeleton = function (id, data) + { + /** + * Set these as object properties so they don't have to be constantly retrieved. Note that using a dollar + * function - $() - can cause conflicts with popular javascript libraries, eg jQuery. It's therefore best + * to stick to document.getElementById(). Setting the canvas and context as object properties means you + * can reference them like this: myObj.canvas + * myObj.context + */ + this.id = id; + this.canvas = document.getElementById(id); + this.context = this.canvas.getContext ? this.canvas.getContext("2d") : null; + + /** + * This puts a reference to this object on to the canvas. Useful in event handling. + */ + this.canvas.__object__ = this; + + /** + * This defines the type of this graph type and should be a one word description. + */ + this.type = 'skeleton'; + + /** + * This facilitates easy object identification, and should be true + */ + this.isRGraph = true; + + /** + * This does a few things, for example adding the .fillText() method to the canvas 2D context when + * it doesn't exist. This facilitates the graphs to be still shown in older browser (though without + * text obviously). You'll find the function in RGraph.common.core.js + */ + RGraph.OldBrowserCompat(this.context); + + + /** + * Some example background properties, as used by the method RGraph.background.Draw() + */ + this.properties = { + 'chart.gutter.left': 25, + 'chart.gutter.right': 25, + 'chart.gutter.top': 25, + 'chart.gutter.bottom': 25, + 'chart.colors': ['red','blue'], + 'chart.background.barcolor1': 'rgba(0,0,0,0)', + 'chart.background.barcolor2': 'rgba(0,0,0,0)', + 'chart.background.grid': true, + 'chart.background.grid.color': '#ddd', + 'chart.background.grid.width': 1, + 'chart.background.grid.hsize': 20, + 'chart.background.grid.vsize': 20, + 'chart.background.grid.vlines': true, + 'chart.background.grid.hlines': true, + 'chart.background.grid.border': true, + 'chart.background.grid.autofit':false, + 'chart.background.grid.autofit.align':false, + 'chart.background.grid.autofit.numhlines': 7, + 'chart.background.grid.autofit.numvlines': 20, + 'chart.zoom.factor': 1.5, + 'chart.zoom.fade.in': true, + 'chart.zoom.fade.out': true, + 'chart.zoom.hdir': 'right', + 'chart.zoom.vdir': 'down', + 'chart.zoom.frames': 25, + 'chart.zoom.delay': 16.666, + 'chart.zoom.shadow': true, + 'chart.zoom.mode': 'canvas', + 'chart.zoom.thumbnail.width': 75, + 'chart.zoom.thumbnail.height': 75, + 'chart.zoom.background': true, + 'chart.contextmenu': null, + 'chart.labels': null, + 'chart.labels.ingraph': null, + 'chart.labels.above': false, + 'chart.labels.above.decimals': 0, + 'chart.labels.above.size': null, + 'chart.scale.decimals': 0, + 'chart.scale.point': '.', + 'chart.scale.thousand': ',', + 'chart.crosshairs': false, + 'chart.crosshairs.color': '#333', + 'chart.crosshairs.hline': true, + 'chart.crosshairs.vline': true, + 'chart.annotatable': false, + 'chart.annotate.color': 'black', + 'chart.units.pre': '', + 'chart.units.post': '', + 'chart.key': null, + 'chart.key.background': 'white', + 'chart.key.position': 'graph', + 'chart.key.shadow': false, + 'chart.key.shadow.color': '#666', + 'chart.key.shadow.blur': 3, + 'chart.key.shadow.offsetx': 2, + 'chart.key.shadow.offsety': 2, + 'chart.key.position.gutter.boxed': true, + 'chart.key.position.x': null, + 'chart.key.position.y': null, + 'chart.key.color.shape': 'square', + 'chart.key.rounded': true, + 'chart.key.linewidth': 1, + 'chart.title': '', + 'chart.title.background': null, + 'chart.title.hpos': null, + 'chart.title.vpos': null, + 'chart.title.bold': true, + 'chart.title.font': null, + 'chart.title.xaxis': '', + 'chart.title.xaxis.bold': true, + 'chart.title.xaxis.size': null, + 'chart.title.xaxis.font': null, + 'chart.title.yaxis': '', + 'chart.title.yaxis.bold': true, + 'chart.title.yaxis.size': null, + 'chart.title.yaxis.font': null, + 'chart.title.xaxis.pos': null, + 'chart.title.yaxis.pos': null, + 'chart.title.yaxis.position': 'left', + 'chart.text.color': 'black', + 'chart.text.size': 10, + 'chart.text.angle': 0, + 'chart.text.font': 'Verdana', + 'chart.resizable': false, + 'chart.resize.handle.background': null, + 'chart.adjustable': false, + 'chart.hmargin': 5, + 'chart.shadow': false, + 'chart.shadow.color': '#666', + 'chart.shadow.offsetx': 3, + 'chart.shadow.offsety': 3, + 'chart.shadow.blur': 3, + 'chart.tooltips': null, + 'chart.tooltips.effect': 'fade', + 'chart.tooltips.css.class': 'RGraph_tooltip', + 'chart.tooltips.event': 'onclick', + 'chart.tooltips.highlight': true + } + + /** + * A simple check that the browser has canvas support + */ + if (!this.canvas) { + alert('[SKELETON] No canvas support'); + return; + } + + /** + * Store the data that was passed to this constructor + */ + this.data = data; + + /** + * This can be used to store the coordinates of shapes on the graph + */ + this.coords = []; + + + /** + * If you add a .get*(e) method to ease getting the shape that's currently being hovered over + * or has been clicked on (in the same vein as the Bar charts .getBar() method or the Line charts + * .getPoint() method) then you should set this so that common methods have a common function + * name to call - for example the context menu uses the common name .getShape(e) to add the + * details to the context menu. + */ + this.getShape = this.getXXX; + } + + + + + /** + * A setter method for setting graph properties. It can be used like this: obj.Set('chart.background.grid', false); + * + * @param name string The name of the property to set + * @param value mixed The value of the property + */ + RGraph.Skeleton.prototype.Set = function (name, value) + { + this.properties[name.toLowerCase()] = value; + } + + + + + /** + * A getter method for retrieving graph properties. It can be used like this: obj.Get('chart.background.grid'); + * This can be used inside your methods that draw the graph. + * + * @param name string The name of the property to get + */ + RGraph.Skeleton.prototype.Get = function (name) + { + return this.properties[name.toLowerCase()]; + } + + + + + /** + * The function you call to draw the chart after you have set all of the graph properties + */ + RGraph.Skeleton.prototype.Draw = function () + { + /** + * This draws the background image, which when loaded draws the graph, hence the return + */ + if (typeof(this.Get('chart.background.image')) == 'string' && !this.__background_image__) { + RGraph.DrawBackgroundImage(this); + return; + } + + /** + * Fire the custom RGraph onbeforedraw event (which should be fired before the chart is drawn) + */ + RGraph.FireCustomEvent(this, 'onbeforedraw'); + + /** + * Clear all of this canvases event handlers (the ones installed by RGraph) + */ + RGraph.ClearEventListeners(this.id); + + + + + /************************* + * Draw the chart here... * + *************************/ + + + + + /** + * These call common functions, that facilitate some of RGraphs features + */ + + + /** + * Setup the context menu if required + */ + if (this.Get('chart.contextmenu')) { + RGraph.ShowContext(this); + } + + /** + * Draw "in graph" labels + */ + if (this.Get('chart.labels.ingraph')) { + RGraph.DrawInGraphLabels(this); + } + + /** + * Draw crosschairs + */ + if (this.Get('chart.crosshairs')) { + RGraph.DrawCrosshairs(this); + } + + /** + * If the canvas is annotatable, do install the event handlers + */ + if (this.Get('chart.annotatable')) { + RGraph.Annotate(this); + } + + /** + * This bit shows the mini zoom window if requested + */ + if (this.Get('chart.zoom.mode') == 'thumbnail' || this.Get('chart.zoom.mode') == 'area') { + RGraph.ShowZoomWindow(this); + } + + + /** + * This function enables resizing + */ + if (this.Get('chart.resizable')) { + RGraph.AllowResizing(this); + } + + + /** + * This function enables adjusting + */ + if (this.Get('chart.adjustable')) { + RGraph.AllowAdjusting(this); + } + + /** + * Fire the custom RGraph ondraw event (which should be fired when you have drawn the chart) + */ + RGraph.FireCustomEvent(this, 'ondraw'); + } diff --git a/schall/static/RGraph/libraries/RGraph.thermometer.js b/schall/static/RGraph/libraries/RGraph.thermometer.js new file mode 100644 index 0000000..e3594a6 --- /dev/null +++ b/schall/static/RGraph/libraries/RGraph.thermometer.js @@ -0,0 +1,418 @@ + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + + if (typeof(RGraph) == 'undefined') RGraph = {}; + + /** + * The chart constructor. This function sets up the object. It takes the ID (the HTML attribute) of the canvas as the + * first argument and the data as the second. If you need to change this, you can. + * + * @param string id The canvas tag ID + * @param number min The minimum value + * @param number max The maximum value + * @param number value The value reported by the thermometer + */ + RGraph.Thermometer = function (id, min, max, value) + { + this.id = id; + this.canvas = document.getElementById(id); + this.context = this.canvas.getContext ? this.canvas.getContext("2d") : null; + this.canvas.__object__ = this; + + this.type = 'thermometer'; + this.isRGraph = true; + this.min = min; + this.max = max; + this.value = value; + this.coords = []; + this.graphArea = []; + this.currentValue = null; + + RGraph.OldBrowserCompat(this.context); + + this.properties = { + 'chart.colors': ['red'], + 'chart.gutter.left': 15, + 'chart.gutter.right': 15, + 'chart.gutter.top': 15, + 'chart.gutter.bottom': 15, + 'chart.ticksize': 5, + 'chart.text.color': 'black', + 'chart.text.font': 'Verdana', + 'chart.text.size': 10, + 'chart.units.pre': '', + 'chart.units.post': '', + 'chart.zoom.factor': 1.5, + 'chart.zoom.fade.in': true, + 'chart.zoom.fade.out': true, + 'chart.zoom.hdir': 'right', + 'chart.zoom.vdir': 'down', + 'chart.zoom.frames': 25, + 'chart.zoom.delay': 16.666, + 'chart.zoom.shadow': true, + 'chart.zoom.mode': 'canvas', + 'chart.zoom.thumbnail.width': 75, + 'chart.zoom.thumbnail.height': 75, + 'chart.zoom.background': true, + 'chart.title': '', + 'chart.title.hpos': 0.5, + 'chart.title.side': '', + 'chart.title.side.bold': true, + 'chart.title.side.font': null, + 'chart.shadow': true, + 'chart.shadow.offsetx': 0, + 'chart.shadow.offsety': 0, + 'chart.shadow.blur': 15, + 'chart.shadow.color': 'gray', + 'chart.resizable': false, + 'chart.contextmenu': null, + 'chart.adjustable': false, + 'chart.value.label': true, + 'chart.scale.visible': false, + 'chart.scale.decimals': 0, + 'chart.ylabels.count': 10, + 'chart.annotatable': false, + 'chart.annotate.color': 'black' + } + + /** + * A simple check that the browser has canvas support + */ + if (!this.canvas) { + alert('[THERMOMETER] No canvas support'); + return; + } + } + + + + + /** + * A setter. + * + * @param name string The name of the property to set + * @param value mixed The value of the property + */ + RGraph.Thermometer.prototype.Set = function (name, value) + { + this.properties[name.toLowerCase()] = value; + } + + + + + /** + * A getter. + * + * @param name string The name of the property to get + */ + RGraph.Thermometer.prototype.Get = function (name) + { + return this.properties[name]; + } + + + + + /** + * Draws the thermometer + */ + RGraph.Thermometer.prototype.Draw = function () + { + /** + * Fire the custom RGraph onbeforedraw event (which should be fired before the chart is drawn) + */ + RGraph.FireCustomEvent(this, 'onbeforedraw'); + + /** + * Clear all of this canvases event handlers (the ones installed by RGraph) + */ + RGraph.ClearEventListeners(this.id); + + /** + * Set the current value + */ + this.currentValue = this.value; + + /** + * This is new in May 2011 and facilitates indiviual gutter settings, + * eg chart.gutter.left + */ + this.gutterLeft = this.Get('chart.gutter.left'); + this.gutterRight = this.Get('chart.gutter.right'); + this.gutterTop = this.Get('chart.gutter.top'); + this.gutterBottom = this.Get('chart.gutter.bottom'); + + + + /** + * Draw the background + */ + this.DrawBackground(); + + /** + * Draw the bar that represents the value + */ + this.DrawBar(); + + /** + * Draw the tickmarks/hatchmarks + */ + this.DrawTickMarks(); + + /** + * Draw the label + */ + this.DrawLabels(); + + /** + * Draw the title + */ + if (this.Get('chart.title')) { + this.DrawTitle(); + } + + /** + * Draw the side title + */ + if (this.Get('chart.title.side')) { + this.DrawSideTitle(); + } + + /** + * This function enables resizing + */ + if (this.Get('chart.resizable')) { + RGraph.AllowResizing(this); + } + + + /** + * Setup the context menu if required + */ + if (this.Get('chart.contextmenu')) { + RGraph.ShowContext(this); + } + + /** + * If the canvas is annotatable, do install the event handlers + */ + if (this.Get('chart.annotatable')) { + RGraph.Annotate(this); + } + + /** + * Instead of using RGraph.common.adjusting.js, handle them here + */ + if (this.Get('chart.adjustable')) { + RGraph.AllowAdjusting(this); + } + + + + + /** + * Fire the custom RGraph ondraw event (which should be fired when you have drawn the chart) + */ + RGraph.FireCustomEvent(this, 'ondraw'); + } + + + + + + /** + * Draws the thermometer itself + */ + RGraph.Thermometer.prototype.DrawBackground = function () + { + var canvas = this.canvas; + var context = this.context; + var bulbRadius = (this.canvas.width - this.gutterLeft - this.gutterRight) / 2; + + // Cache the bulbRadius as an object variable + this.bulbRadius = bulbRadius; + + // Draw the black background that becomes the border + context.beginPath(); + context.fillStyle = 'black'; + + if (this.Get('chart.shadow')) { + RGraph.SetShadow(this, this.Get('chart.shadow.color'), this.Get('chart.shadow.offsetx'), this.Get('chart.shadow.offsety'), this.Get('chart.shadow.blur')); + } + + context.fillRect(this.gutterLeft + 12,this.gutterTop + bulbRadius,RGraph.GetWidth(this) - this.gutterLeft - this.gutterRight - 24, RGraph.GetHeight(this) - this.gutterTop - this.gutterBottom - bulbRadius - bulbRadius); + context.arc(this.gutterLeft + bulbRadius, RGraph.GetHeight(this) - this.gutterBottom - bulbRadius, bulbRadius, 0, 6.28, 0); + context.arc(this.gutterLeft + bulbRadius,this.gutterTop + bulbRadius,(this.canvas.width - this.gutterLeft - this.gutterRight - 24)/ 2,0,6.28,0); + context.fill(); + + RGraph.NoShadow(this); + + // Draw the white inner content background that creates the border + context.beginPath(); + context.fillStyle = 'white'; + context.fillRect(this.gutterLeft + 12 + 1,this.gutterTop + bulbRadius,RGraph.GetWidth(this) - this.gutterLeft - this.gutterRight - 24 - 2,RGraph.GetHeight(this) - this.gutterTop - this.gutterBottom - bulbRadius - bulbRadius); + context.arc(this.gutterLeft + bulbRadius, RGraph.GetHeight(this) - this.gutterBottom - bulbRadius, bulbRadius - 1, 0, 6.28, 0); + context.arc(this.gutterLeft + bulbRadius,this.gutterTop + bulbRadius,((RGraph.GetWidth(this) - this.gutterLeft - this.gutterRight - 24)/ 2) - 1,0,6.28,0); + context.fill(); + + // Draw the bottom content of the thermometer + context.beginPath(); + context.fillStyle = this.Get('chart.colors')[0]; + context.arc(this.gutterLeft + bulbRadius, RGraph.GetHeight(this) - this.gutterBottom - bulbRadius, bulbRadius - 1, 0, 6.28, 0); + context.fillRect(this.gutterLeft + 12 + 1, RGraph.GetHeight(this) - this.gutterBottom - bulbRadius - bulbRadius,RGraph.GetWidth(this) - this.gutterLeft - this.gutterRight - 24 - 2, bulbRadius); + context.fill(); + + // Save the X/Y/width/height + this.graphArea[0] = this.gutterLeft + 12 + 1; + this.graphArea[1] = this.gutterTop + bulbRadius; + this.graphArea[2] = this.canvas.width - this.gutterLeft - this.gutterRight - 24 - 2; + this.graphArea[3] = (this.canvas.height - this.gutterBottom - bulbRadius - bulbRadius) - (this.graphArea[1]); + } + + + /** + * This draws the bar that indicates the value of the thermometer + */ + RGraph.Thermometer.prototype.DrawBar = function () + { + var barHeight = ((this.value - this.min) / (this.max - this.min)) * this.graphArea[3]; + var context = this.context; + + // Draw the actual bar that indicates the value + context.beginPath(); + context.fillStyle = this.Get('chart.colors')[0]; + context.fillRect(this.graphArea[0],this.graphArea[1] + this.graphArea[3] - barHeight,this.graphArea[2],barHeight); + context.fill(); + + this.coords = [this.graphArea[0],this.graphArea[1] + this.graphArea[3] - barHeight,this.graphArea[2],barHeight]; + } + + + /** + * Draws the tickmarks of the thermometer + */ + RGraph.Thermometer.prototype.DrawTickMarks = function () + { + var ticksize = this.Get('chart.ticksize'); + + // Left hand side tickmarks + for (var i=this.graphArea[1]; i<=(this.graphArea[1] + this.graphArea[3]); i += (this.graphArea[3] / 10)) { + this.context.beginPath(); + this.context.moveTo(this.gutterLeft + 12, i); + this.context.lineTo(this.gutterLeft + 12 + ticksize, i); + this.context.stroke(); + } + + // Right hand side tickmarks + for (var i=this.graphArea[1]; i<=(this.graphArea[1] + this.graphArea[3]); i += (this.graphArea[3] / 10)) { + this.context.beginPath(); + this.context.moveTo(RGraph.GetWidth(this) - (this.gutterRight + 12), i); + this.context.lineTo(RGraph.GetWidth(this) - (this.gutterRight + 12 + ticksize), i); + this.context.stroke(); + } + } + + + /** + * Draws the labels of the thermometer. Now (4th August 2011) draws + * the scale too + */ + RGraph.Thermometer.prototype.DrawLabels = function () + { + if (this.Get('chart.value.label')) { + this.context.beginPath(); + this.context.fillStyle = this.Get('chart.text.color'); + + var text = this.Get('chart.scale.visible') ? String(this.value) : this.Get('chart.units.pre') + String(this.value) + this.Get('chart.units.post'); + + RGraph.Text(this.context,this.Get('chart.text.font'),this.Get('chart.text.size'),this.gutterLeft + this.bulbRadius,this.coords[1] + this.Get('chart.text.size'),text,'center','center',true,null,'white'); + this.context.fill(); + } + + + /** + * Draw the scale if requested + */ + if (this.Get('chart.scale.visible')) { + this.DrawScale(); + } + } + + + /** + * Draws the title + */ + RGraph.Thermometer.prototype.DrawTitle = function () + { + this.context.beginPath(); + this.context.fillStyle = this.Get('chart.text.color'); + RGraph.Text(this.context,this.Get('chart.text.font'),this.Get('chart.text.size') + 2,this.gutterLeft + ((RGraph.GetWidth(this) - this.gutterLeft - this.gutterRight) / 2),this.gutterTop,String(this.Get('chart.title')),'center','center',null,null,null,true); + this.context.fill(); + } + + + /** + * Draws the title + */ + RGraph.Thermometer.prototype.DrawSideTitle = function () + { + var font = this.Get('chart.title.side.font') ? this.Get('chart.title.side.font') : this.Get('chart.text.font'); + var size = this.Get('chart.title.side.size') ? this.Get('chart.title.side.size') : this.Get('chart.text.size') + 2; + + this.context.beginPath(); + this.context.fillStyle = this.Get('chart.text.color'); + RGraph.Text(this.context, + font, + size, + this.gutterLeft * this.Get('chart.title.hpos'), + this.canvas.height / 2, + String(this.Get('chart.title.side')), + 'center', + 'center', + null, + 270, + null, + true); + this.context.fill(); + } + + + /** + * Draw the scale if requested + */ + RGraph.Thermometer.prototype.DrawScale = function () + { + var numLabels = this.Get('chart.ylabels.count') - 1; // The -1 is so that the number of labels tallies with what is displayed + var step = (this.max - this.min) / numLabels; + + this.context.fillStyle = this.Get('chart.text.color'); + + this.context.beginPath(); + for (var i=0; i<=numLabels; ++i) { + + var text = this.Get('chart.units.pre') + (i == 0 ? String(this.min.toFixed(this.Get('chart.scale.decimals'))) : String((this.min + (i * step)).toFixed(this.Get('chart.scale.decimals')))) + this.Get('chart.units.post'); + var x = this.canvas.width - this.gutterRight; + var y = this.canvas.height - this.gutterBottom - (2 * this.bulbRadius) - ((this.graphArea[3] / numLabels) * i); + + RGraph.Text(this.context, + this.Get('chart.text.font'), + this.Get('chart.text.size'), + x - 6, + y, + text, + 'center'); + } + this.context.fill(); + }
\ No newline at end of file diff --git a/schall/static/RGraph/libraries/RGraph.vprogress.js b/schall/static/RGraph/libraries/RGraph.vprogress.js new file mode 100644 index 0000000..dfc1a04 --- /dev/null +++ b/schall/static/RGraph/libraries/RGraph.vprogress.js @@ -0,0 +1,625 @@ + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + + if (typeof(RGraph) == 'undefined') RGraph = {}; + + /** + * The progress bar constructor + * + * @param int id The ID of the canvas tag + * @param int value The indicated value of the meter. + * @param int max The end value (the upper most) of the meter + */ + RGraph.VProgress = function (id, value, max) + { + this.id = id; + this.max = max; + this.value = value; + this.canvas = document.getElementById(id); + this.context = this.canvas.getContext('2d'); + this.canvas.__object__ = this; + this.type = 'vprogress'; + this.coords = []; + this.isRGraph = true; + this.currentValue = null; + + + /** + * Compatibility with older browsers + */ + RGraph.OldBrowserCompat(this.context); + + this.properties = { + 'chart.colors': ['#0c0'], + 'chart.strokestyle': '#999', + 'chart.tickmarks': true, + 'chart.tickmarks.zerostart':false, + 'chart.tickmarks.color': 'black', + 'chart.tickmarks.inner': false, + 'chart.gutter.left': 25, + 'chart.gutter.right': 25, + 'chart.gutter.top': 25, + 'chart.gutter.bottom': 25, + 'chart.numticks': 10, + 'chart.numticks.inner': 50, + 'chart.background.color': '#eee', + 'chart.shadow': false, + 'chart.shadow.color': 'rgba(0,0,0,0.5)', + 'chart.shadow.blur': 3, + 'chart.shadow.offsetx': 3, + 'chart.shadow.offsety': 3, + 'chart.title': '', + 'chart.title.background': null, + 'chart.title.hpos': null, + 'chart.title.vpos': null, + 'chart.title.bold': true, + 'chart.title.font': null, + 'chart.width': 0, + 'chart.height': 0, + 'chart.text.size': 10, + 'chart.text.color': 'black', + 'chart.text.font': 'Verdana', + 'chart.contextmenu': null, + 'chart.units.pre': '', + 'chart.units.post': '', + 'chart.tooltips': [], + 'chart.tooltips.effect': 'fade', + 'chart.tooltips.css.class': 'RGraph_tooltip', + 'chart.tooltips.highlight': true, + 'chart.highlight.stroke': 'black', + 'chart.highlight.fill': 'rgba(255,255,255,0.5)', + 'chart.annotatable': false, + 'chart.annotate.color': 'black', + 'chart.zoom.mode': 'canvas', + 'chart.zoom.factor': 1.5, + 'chart.zoom.fade.in': true, + 'chart.zoom.fade.out': true, + 'chart.zoom.hdir': 'right', + 'chart.zoom.vdir': 'down', + 'chart.zoom.frames': 25, + 'chart.zoom.delay': 16.666, + 'chart.zoom.shadow': true, + 'chart.zoom.background': true, + 'chart.zoom.action': 'zoom', + 'chart.arrows': false, + 'chart.margin': 0, + 'chart.resizable': false, + 'chart.resize.handle.adjust': [0,0], + 'chart.resize.handle.background': null, + 'chart.label.inner': false, + 'chart.labels.count': 10, + 'chart.labels.position': 'right', + 'chart.adjustable': false, + 'chart.min': 0, + 'chart.scale.decimals': 0, + 'chart.key': [], + 'chart.key.background': 'white', + 'chart.key.position': 'graph', + 'chart.key.halign': 'right', + 'chart.key.shadow': false, + 'chart.key.shadow.color': '#666', + 'chart.key.shadow.blur': 3, + 'chart.key.shadow.offsetx': 2, + 'chart.key.shadow.offsety': 2, + 'chart.key.position.gutter.boxed': true, + 'chart.key.position.x': null, + 'chart.key.position.y': null, + 'chart.key.color.shape': 'square', + 'chart.key.rounded': true, + 'chart.key.linewidth': 1 + } + + // Check for support + if (!this.canvas) { + alert('[PROGRESS] No canvas support'); + return; + } + + + /** + * Set the .getShape commonly named method + */ + this.getShape = this.getBar; + } + + + /** + * A generic setter + * + * @param string name The name of the property to set + * @param string value The value of the poperty + */ + RGraph.VProgress.prototype.Set = function (name, value) + { + this.properties[name.toLowerCase()] = value; + } + + + /** + * A generic getter + * + * @param string name The name of the property to get + */ + RGraph.VProgress.prototype.Get = function (name) + { + return this.properties[name.toLowerCase()]; + } + + + /** + * Draws the progress bar + */ + RGraph.VProgress.prototype.Draw = function () + { + /** + * Fire the onbeforedraw event + */ + RGraph.FireCustomEvent(this, 'onbeforedraw'); + + /** + * Clear all of this canvases event handlers (the ones installed by RGraph) + */ + RGraph.ClearEventListeners(this.id); + + /** + * Set the current value + */ + this.currentValue = this.value; + + /** + * This is new in May 2011 and facilitates indiviual gutter settings, + * eg chart.gutter.left + */ + this.gutterLeft = this.Get('chart.gutter.left'); + this.gutterRight = this.Get('chart.gutter.right'); + this.gutterTop = this.Get('chart.gutter.top'); + this.gutterBottom = this.Get('chart.gutter.bottom'); + + // Figure out the width and height + this.width = RGraph.GetWidth(this) - this.gutterLeft - this.gutterRight; + this.height = RGraph.GetHeight(this) - this.gutterTop - this.gutterBottom; + this.coords = []; + + this.Drawbar(); + this.DrawTickMarks(); + this.DrawLabels(); + + this.context.stroke(); + this.context.fill(); + + /** + * Setup the context menu if required + */ + if (this.Get('chart.contextmenu')) { + RGraph.ShowContext(this); + } + + /** + * Alternatively, show the tooltip if requested + */ + if (typeof(this.Get('chart.tooltips')) == 'function' || this.Get('chart.tooltips').length) { + + // Need to register this object for redrawing + RGraph.Register(this); + + /** + * Install the window onclick handler + */ + var window_onclick = function (){RGraph.Redraw();} + window.addEventListener('click', window_onclick, false); + RGraph.AddEventListener('window_' + this.id, 'click', window_onclick); + + + /** + * Install the onclick event handler for the tooltips + */ + //this.canvas.onclick = function (e) + var canvas_onclick_func = function (e) + { + e = RGraph.FixEventObject(e); + + var canvas = document.getElementById(this.id); + var obj = canvas.__object__; + var bar = obj.getBar(e); + + /** + * Redraw the graph first, in effect resetting the graph to as it was when it was first drawn + * This "deselects" any already selected bar + */ + RGraph.Redraw(); + + + if (bar) { + + /** + * Get the tooltip text + */ + var text = RGraph.parseTooltipText(obj.Get('chart.tooltips'), bar[5]); + + /** + * Show a tooltip if it's defined + */ + if (text) { + + obj.context.beginPath(); + obj.context.strokeStyle = obj.Get('chart.highlight.stroke'); + obj.context.fillStyle = obj.Get('chart.highlight.fill'); + obj.context.strokeRect(bar[1], bar[2], bar[3], bar[4]); + obj.context.fillRect(bar[1], bar[2], bar[3], bar[4]); + + obj.context.stroke(); + obj.context.fill(); + + RGraph.Tooltip(canvas, text, e.pageX, e.pageY, bar[5]); + } + } + + /** + * Stop the event bubbling + */ + e.stopPropagation(); + } + this.canvas.addEventListener('click', canvas_onclick_func, false); + RGraph.AddEventListener(this.id, 'click', canvas_onclick_func); + + + /** + * If the cursor is over a hotspot, change the cursor to a hand + */ + //this.canvas.onmousemove = function (e) + var canvas_onmousemove_func = function (e) + { + e = RGraph.FixEventObject(e); + + var canvas = document.getElementById(this.id); + var obj = canvas.__object__; + var bar = obj.getBar(e); + + /** + * Change the mouse pointer + */ + if (bar) { + + var text = RGraph.parseTooltipText(obj.Get('chart.tooltips'), bar[5]); + + if (text) { + canvas.style.cursor = 'pointer'; + return; + } + } + + canvas.style.cursor = 'default'; + } + this.canvas.addEventListener('mousemove', canvas_onmousemove_func, false); + RGraph.AddEventListener(this.id, 'mousemove', canvas_onmousemove_func); + } + + /** + * If the canvas is annotatable, do install the event handlers + */ + if (this.Get('chart.annotatable')) { + RGraph.Annotate(this); + } + + /** + * This bit shows the mini zoom window if requested + */ + if (this.Get('chart.zoom.mode') == 'thumbnail' || this.Get('chart.zoom.mode') == 'area') { + RGraph.ShowZoomWindow(this); + } + + // Draw a key if necessary + if (this.Get('chart.key').length) { + RGraph.DrawKey(this, this.Get('chart.key'), this.Get('chart.colors')); + } + + + + /** + * This function enables resizing + */ + if (this.Get('chart.resizable')) { + RGraph.AllowResizing(this); + } + + /** + * Instead of using RGraph.common.adjusting.js, handle them here + */ + if (this.Get('chart.adjustable')) { + RGraph.AllowAdjusting(this); + } + + /** + * Fire the RGraph ondraw event + */ + RGraph.FireCustomEvent(this, 'ondraw'); + } + + + /** + * Draw the bar itself + */ + RGraph.VProgress.prototype.Drawbar = function () + { + // Set a shadow if requested + if (this.Get('chart.shadow')) { + RGraph.SetShadow(this, this.Get('chart.shadow.color'), this.Get('chart.shadow.offsetx'), this.Get('chart.shadow.offsety'), this.Get('chart.shadow.blur')); + } + + // Draw the shadow for MSIE + if (RGraph.isIE8() && this.Get('chart.shadow')) { + this.context.fillStyle = this.Get('chart.shadow.color'); + this.context.fillRect(this.gutterLeft + this.Get('chart.shadow.offsetx'), this.gutterTop + this.Get('chart.shadow.offsety'), this.width, this.height); + } + + // Draw the outline + this.context.fillStyle = this.Get('chart.background.color'); + this.context.strokeStyle = this.Get('chart.strokestyle'); + this.context.strokeRect(this.gutterLeft, this.gutterTop, this.width, this.height); + this.context.fillRect(this.gutterLeft, this.gutterTop, this.width, this.height); + + // Turn off any shadow + RGraph.NoShadow(this); + + this.context.strokeStyle = this.Get('chart.strokestyle'); + this.context.fillStyle = this.Get('chart.colors')[0]; + var margin = this.Get('chart.margin'); + var barHeight = RGraph.GetHeight(this) - this.gutterTop - this.gutterBottom; + + // Draw the actual bar itself + if (typeof(this.value) == 'number') { + + this.context.lineWidth = 1; + this.context.strokeStyle = this.Get('chart.strokestyle'); + + } else if (typeof(this.value) == 'object') { + + this.context.beginPath(); + this.context.strokeStyle = this.Get('chart.strokestyle'); + + var startPoint = this.canvas.height - this.gutterBottom; + + for (var i=0; i<this.value.length; ++i) { + + var segmentHeight = ( (this.value[i] - this.Get('chart.min')) / (this.max - this.Get('chart.min')) ) * barHeight; + + this.context.fillStyle = this.Get('chart.colors')[i]; + + this.context.fillRect(this.gutterLeft + margin, startPoint - segmentHeight, this.width - margin - margin, segmentHeight); + this.context.strokeRect(this.gutterLeft + margin, startPoint - segmentHeight, this.width - margin - margin, segmentHeight); + + + // Store the coords + this.coords.push([this.gutterLeft + margin, startPoint - segmentHeight, this.width - margin - margin, segmentHeight]); + + startPoint -= segmentHeight; + + } + + this.context.stroke(); + this.context.fill(); + } + + /** + * Inner tickmarks + */ + if (this.Get('chart.tickmarks.inner')) { + + var spacing = (RGraph.GetHeight(this) - this.gutterTop - this.gutterBottom) / this.Get('chart.numticks.inner'); + + this.context.lineWidth = 1; + this.context.strokeStyle = this.Get('chart.strokestyle'); + + this.context.beginPath(); + + for (var y = this.gutterTop; y<RGraph.GetHeight(this) - this.gutterBottom; y+=spacing) { + this.context.moveTo(this.gutterLeft, y); + this.context.lineTo(this.gutterLeft + 3, y); + + this.context.moveTo(RGraph.GetWidth(this) - this.gutterRight, y); + this.context.lineTo(RGraph.GetWidth(this) - this.gutterRight - 3, y); + } + + this.context.stroke(); + } + + /** + * Draw the actual bar + */ + var barHeight = Math.min(this.height, ( (this.value - this.Get('chart.min')) / (this.max - this.Get('chart.min')) ) * this.height); + + this.context.beginPath(); + this.context.strokeStyle = this.Get('chart.strokestyle'); + + if (typeof(this.value) == 'number') { + this.context.strokeRect(this.gutterLeft + margin, this.gutterTop + this.height - barHeight, this.width - margin - margin, barHeight); + this.context.fillRect(this.gutterLeft + margin, this.gutterTop + this.height - barHeight, this.width - margin - margin, barHeight); + } + + + /** + * Draw the arrows indicating the level if requested + */ + if (this.Get('chart.arrows')) { + var x = this.gutterLeft - 4; + var y = RGraph.GetHeight(this) - this.gutterBottom - barHeight; + + this.context.lineWidth = 1; + this.context.fillStyle = 'black'; + this.context.strokeStyle = 'black'; + + this.context.beginPath(); + this.context.moveTo(x, y); + this.context.lineTo(x - 4, y - 2); + this.context.lineTo(x - 4, y + 2); + this.context.closePath(); + + this.context.stroke(); + this.context.fill(); + + x += this.width + 8; + + this.context.beginPath(); + this.context.moveTo(x, y); + this.context.lineTo(x + 4, y - 2); + this.context.lineTo(x + 4, y + 2); + this.context.closePath(); + + this.context.stroke(); + this.context.fill(); + } + + + + + /** + * Draw the "in-bar" label + */ + if (this.Get('chart.label.inner')) { + this.context.beginPath(); + this.context.fillStyle = 'black'; + RGraph.Text(this.context, this.Get('chart.text.font'), this.Get('chart.text.size') + 2, RGraph.GetWidth(this) / 2, RGraph.GetHeight(this) - this.gutterBottom - barHeight - 5, String(this.Get('chart.units.pre') + this.value + this.Get('chart.units.post')), 'bottom', 'center'); + this.context.fill(); + } + + + // Store the coords + this.coords.push([this.gutterLeft + margin, this.gutterTop + this.height - barHeight, this.width - margin - margin, barHeight]); + } + + /** + * The function that draws the tick marks. Apt name... + */ + RGraph.VProgress.prototype.DrawTickMarks = function () + { + this.context.strokeStyle = this.Get('chart.tickmarks.color'); + + if (this.Get('chart.tickmarks')) { + this.context.beginPath(); + for (var i=0; this.Get('chart.tickmarks.zerostart') ? i<=this.Get('chart.numticks') : i<this.Get('chart.numticks'); i++) { + + var startX = this.Get('chart.labels.position') == 'left' ? this.gutterLeft : this.canvas.width - this.Get('chart.gutter.right'); + var endX = this.Get('chart.labels.position') == 'left' ? startX - 4 : startX + 4; + var yPos = (this.height * (i / this.Get('chart.numticks'))) + this.gutterTop + + this.context.moveTo(startX, yPos); + this.context.lineTo(endX, yPos); + } + this.context.stroke(); + } + } + + + /** + * The function that draws the labels + */ + RGraph.VProgress.prototype.DrawLabels = function () + { + this.context.fillStyle = this.Get('chart.text.color'); + + var context = this.context; + var position = this.Get('chart.labels.position'); + var xAlignment = position == 'left' ? 'right' : 'left'; + var yAlignment = 'center'; + var count = this.Get('chart.labels.count'); + var units_pre = this.Get('chart.units.pre'); + var units_post = this.Get('chart.units.post'); + var text_size = this.Get('chart.text.size'); + var text_font = this.Get('chart.text.font'); + + if (this.Get('chart.tickmarks')) { + + for (var i=0; i<count ; ++i) { + + var text = String( + ((( (this.max - this.Get('chart.min')) / count) * (count - i)) + this.Get('chart.min')).toFixed(this.Get('chart.scale.decimals')) + ); + + RGraph.Text(context, + text_font, + text_size, + position == 'left' ? (this.gutterLeft - 5) : (RGraph.GetWidth(this) - this.gutterRight + 5), + (((RGraph.GetHeight(this) - this.gutterTop - this.gutterBottom) / count) * i) + this.gutterTop, + units_pre + text + units_post, + yAlignment, + xAlignment); + } + + /** + * Show zero? + */ + if (this.Get('chart.tickmarks.zerostart') && this.Get('chart.min') == 0) { + RGraph.Text(context, + text_font, + text_size, + position == 'left' ? (this.gutterLeft - 5) : (RGraph.GetWidth(this) - this.gutterRight + 5), + RGraph.GetHeight(this) - this.gutterBottom, units_pre + String(this.Get('chart.min').toFixed(this.Get('chart.scale.decimals'))) + units_post, + yAlignment, + xAlignment); + } + + /** + * chart.ymin is set + */ + if (this.Get('chart.min') != 0) { + RGraph.Text(context, + text_font, + text_size, + position == 'left' ? (this.gutterLeft - 5) : (RGraph.GetWidth(this) - this.gutterRight + 5), + RGraph.GetHeight(this) - this.gutterBottom, units_pre + String(this.Get('chart.min').toFixed(this.Get('chart.scale.decimals'))) + units_post, + yAlignment, + xAlignment); + } + } + + // Draw the title text + if (this.Get('chart.title')) { + RGraph.Text(context, + text_font, + text_size + 2, + this.gutterLeft + ((this.canvas.width - this.gutterLeft - this.gutterRight) / 2), // X + this.gutterTop - text_size, // Y + this.Get('chart.title'), + null, + 'center',null, null, null, true); + } + } + + + /** + * Returns the focused bar + * + * @param event e The event object + */ + RGraph.VProgress.prototype.getBar = function (e) + { + var obj = e.target.__object__; + var mouseCoords = RGraph.getMouseXY(e) + + for (var i=0; i<obj.coords.length; i++) { + + var mouseCoords = RGraph.getMouseXY(e); + var mouseX = mouseCoords[0]; + var mouseY = mouseCoords[1]; + var left = obj.coords[i][0]; + var top = obj.coords[i][1]; + var width = obj.coords[i][2]; + var height = obj.coords[i][3]; + var idx = i; + + if (mouseX >= left && mouseX <= (left + width) && mouseY >= top && mouseY <= (top + height) ) { + return [obj, left, top, width, height, idx]; + } + } + }
\ No newline at end of file diff --git a/schall/static/RGraph/libraries/RGraph.waterfall.js b/schall/static/RGraph/libraries/RGraph.waterfall.js new file mode 100644 index 0000000..f3bf96c --- /dev/null +++ b/schall/static/RGraph/libraries/RGraph.waterfall.js @@ -0,0 +1,790 @@ +/** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + + if (typeof(RGraph) == 'undefined') RGraph = {}; + + /** + * The bar chart constructor + * + * @param object canvas The canvas object + * @param array data The chart data + */ + RGraph.Waterfall = function (id, data) + { + // Get the canvas and context objects + this.id = id; + this.canvas = document.getElementById(id); + this.context = this.canvas.getContext ? this.canvas.getContext("2d") : null; + this.canvas.__object__ = this; + this.type = 'waterfall'; + this.max = 0; + this.isRGraph = true; + this.coords = []; + + /** + * Compatibility with older browsers + */ + RGraph.OldBrowserCompat(this.context); + + + // Various config + this.properties = { + 'chart.background.barcolor1': 'rgba(0,0,0,0)', + 'chart.background.barcolor2': 'rgba(0,0,0,0)', + 'chart.background.grid': true, + 'chart.background.grid.color': '#ddd', + 'chart.background.grid.width': 1, + 'chart.background.grid.hsize': 20, + 'chart.background.grid.vsize': 20, + 'chart.background.grid.vlines': true, + 'chart.background.grid.hlines': true, + 'chart.background.grid.border': true, + 'chart.background.grid.autofit':true, + 'chart.background.grid.autofit.numhlines': 5, + 'chart.background.grid.autofit.numvlines': 20, + 'chart.background.grid.autofit.align': false, + 'chart.background.image': null, + 'chart.background.hbars': null, // ??? + 'chart.xaxispos': 'bottom', + 'chart.numyticks': 10, + 'chart.hmargin': 5, + 'chart.strokestyle': '#666', + 'chart.axis.color': 'black', + 'chart.gutter.left': 25, + 'chart.gutter.right': 25, + 'chart.gutter.top': 25, + 'chart.gutter.bottom': 25, + 'chart.labels': [], + 'chart.ylabels': true, + 'chart.text.color': 'black', + 'chart.text.size': 10, + 'chart.text.angle': 0, + 'chart.text.font': 'Verdana', + 'chart.ymax': null, + 'chart.title': '', + 'chart.title.color': 'black', + 'chart.title.background': null, + 'chart.title.hpos': null, + 'chart.title.vpos': null, + 'chart.title.bold': true, + 'chart.title.font': null, + 'chart.title.xaxis': '', + 'chart.title.yaxis': '', + 'chart.title.yaxis.bold': true, + 'chart.title.yaxis.size': null, + 'chart.title.yaxis.font': null, + 'chart.title.xaxis.pos': null, + 'chart.title.yaxis.pos': null, + 'chart.title.yaxis.align': 'left', + 'chart.title.xaxis.bold': true, + 'chart.title.xaxis.size': null, + 'chart.title.xaxis.font': null, + 'chart.colors': ['green', 'red', 'blue'], + 'chart.shadow': false, + 'chart.shadow.color': '#666', + 'chart.shadow.offsetx': 3, + 'chart.shadow.offsety': 3, + 'chart.shadow.blur': 3, + 'chart.tooltips': null, + 'chart.tooltips.effect': 'fade', + 'chart.tooltips.css.class': 'RGraph_tooltip', + 'chart.tooltips.event': 'onclick', + 'chart.tooltips.highlight': true, + 'chart.tooltips.override': null, + 'chart.highlight.stroke': 'black', + 'chart.highlight.fill': 'rgba(255,255,255,0.5)', + 'chart.contextmenu': null, + 'chart.units.pre': '', + 'chart.units.post': '', + //'chart.scale.decimals': 0, + //'chart.scale.point': '.', + //'chart.scale.thousand': ',', + //'chart.scale.formatter': null, + 'chart.crosshairs': false, + 'chart.crosshairs.color': '#333', + 'chart.crosshairs.hline': true, + 'chart.crosshairs.vline': true, + 'chart.annotatable': false, + 'chart.annotate.color': 'black', + 'chart.zoom.factor': 1.5, + 'chart.zoom.fade.in': true, + 'chart.zoom.fade.out': true, + 'chart.zoom.hdir': 'right', + 'chart.zoom.vdir': 'down', + 'chart.zoom.frames': 25, + 'chart.zoom.delay': 16.666, + 'chart.zoom.shadow': true, + 'chart.zoom.mode': 'canvas', + 'chart.zoom.thumbnail.width': 75, + 'chart.zoom.thumbnail.height': 75, + 'chart.zoom.background': true, + 'chart.resizable': false, + 'chart.resize.handle.background': null, + 'chart.noaxes': false, + 'chart.noxaxis': false, + 'chart.noyaxis': false, + 'chart.axis.color': 'black', + 'chart.total': true, + 'chart.multiplier.x': 1, + 'chart.multiplier.w': 1 + } + + // Check for support + if (!this.canvas) { + alert('[WATERFALL] No canvas support'); + return; + } + + // Store the data + this.data = data; + + + /** + * Set the .getShape commonly named method + */ + this.getShape = this.getBar; + } + + + /** + * A setter + * + * @param name string The name of the property to set + * @param value mixed The value of the property + */ + RGraph.Waterfall.prototype.Set = function (name, value) + { + this.properties[name.toLowerCase()] = value; + } + + + /** + * A getter + * + * @param name string The name of the property to get + */ + RGraph.Waterfall.prototype.Get = function (name) + { + return this.properties[name.toLowerCase()]; + } + + + /** + * The function you call to draw the bar chart + */ + RGraph.Waterfall.prototype.Draw = function () + { + // MUST be the first thing done! + if (typeof(this.Get('chart.background.image')) == 'string' && !this.__background_image__) { + RGraph.DrawBackgroundImage(this); + return; + } + + + /** + * Fire the onbeforedraw event + */ + RGraph.FireCustomEvent(this, 'onbeforedraw'); + + /** + * Clear all of this canvases event handlers (the ones installed by RGraph) + */ + RGraph.ClearEventListeners(this.id); + + /** + * This is new in May 2011 and facilitates indiviual gutter settings, + * eg chart.gutter.left + */ + this.gutterLeft = this.Get('chart.gutter.left'); + this.gutterRight = this.Get('chart.gutter.right'); + this.gutterTop = this.Get('chart.gutter.top'); + this.gutterBottom = this.Get('chart.gutter.bottom'); + + /** + * Stop the coords array from growing uncontrollably + */ + this.coords = []; + + /** + * This gets used a lot + */ + this.centery = ((this.canvas.height - this.gutterTop - this.gutterBottom) / 2) + this.gutterTop; + + /** + * Work out a few things. They need to be here because they depend on things you can change after you instantiate the object + */ + this.max = 0; + this.grapharea = this.canvas.height - this.gutterTop - this.gutterBottom; + this.graphwidth = this.canvas.width - this.gutterLeft - this.gutterRight; + this.halfTextHeight = this.Get('chart.text.size') / 2; + + + /** + * Work out the maximum value + * + * Normally the last bar is a total and not taken into account when the scale is generated. + * However it is not necessarily shown, so if it's not being shown it should not be + * accounted for. + */ + this.max = this.getMax(this.data); + this.scale = RGraph.getScale(typeof(this.Get('chart.ymax')) == 'number' ? this.Get('chart.ymax') : this.max, this); + this.max = this.scale[4]; + var decimals = this.Get('chart.scale.decimals'); + + this.scale = [ + (this.max * (1/5)).toFixed(decimals), + (this.max * (2/5)).toFixed(decimals), + (this.max * (3/5)).toFixed(decimals), + (this.max * (4/5)).toFixed(decimals), + typeof(this.max) == 'number' ? this.max.toFixed(decimals) : this.max + ]; + + + // Progressively Draw the chart + RGraph.background.Draw(this); + + this.DrawAxes(); + this.Drawbars(); + this.DrawLabels(); + + /** + * Setup the context menu if required + */ + if (this.Get('chart.contextmenu')) { + RGraph.ShowContext(this); + } + + + /** + * Draw crosschairs + */ + if (this.Get('chart.crosshairs')) { + RGraph.DrawCrosshairs(this); + } + + /** + * If the canvas is annotatable, do install the event handlers + */ + if (this.Get('chart.annotatable')) { + RGraph.Annotate(this); + } + + /** + * This bit shows the mini zoom window if requested + */ + if (this.Get('chart.zoom.mode') == 'thumbnail' || this.Get('chart.zoom.mode') == 'area') { + RGraph.ShowZoomWindow(this); + } + + + /** + * This function enables resizing + */ + if (this.Get('chart.resizable')) { + RGraph.AllowResizing(this); + } + + /** + * Tooltips + */ + if (this.Get('chart.tooltips')) { + + RGraph.Register(this); + + /** + * Install the onclick event handler for the tooltips + */ + var canvas_onclick_func = function (e) + { + e = RGraph.FixEventObject(e); + + var canvas = document.getElementById(this.id); + var context = canvas.getContext('2d'); + var obj = canvas.__object__; + var bar = obj.getBar(e); + + + /** + * Loop through the bars determining if the mouse is over a bar + */ + if (bar) { + + /** + * First, if the event is onmousemove end the tooltip is already being shown, do nothing + */ + if (obj.Get('chart.tooltips.event') == 'onmousemove' && RGraph.Registry.Get('chart.tooltip') && RGraph.Registry.Get('chart.tooltip').__index__ == bar[5]) { + return; + } + + /** + * Redraw the graph first, in effect resetting the graph to as it was when it was first drawn + * This "deselects" any already selected bar + */ + RGraph.Redraw(); + + var x = bar[1]; + var y = bar[2]; + var w = bar[3]; + var h = bar[4]; + + if (!obj.Get('chart.tooltips')[bar[5]]) { + return; + } + + + // Draw the highlight (if necessary) + if (obj.Get('chart.tooltips.highlight')) { + context.beginPath(); + context.fillStyle = obj.Get('chart.highlight.fill'); + context.strokeStyle = obj.Get('chart.highlight.stroke'); + context.strokeRect(x,y,w,h); + context.fillRect(x,y,w,h); + context.stroke(); + context.fill(); + } + + /** + * Get the tooltip text + */ + var text = RGraph.parseTooltipText(obj.Get('chart.tooltips'), bar[5]); + + canvas.style.cursor = text ? 'pointer' : 'default'; + + RGraph.Tooltip(canvas, text, e.pageX, e.pageY, bar[5]); + } + + /** + * Stop the event bubbling + */ + e.stopPropagation(); + + return false; + } + this.canvas.addEventListener(this.Get('chart.tooltips.event') == 'onclick' ? 'click' : 'mousemove', canvas_onclick_func, false); + RGraph.AddEventListener(this.id, this.Get('chart.tooltips.event') == 'onclick' ? 'click' : 'mousemove', canvas_onclick_func); + + /** + * Install the window onclick handler + */ + var window_onclick_func = function (){RGraph.Redraw();}; + window.addEventListener('click', window_onclick_func, false); + RGraph.AddEventListener('window_' + this.id, 'click', window_onclick_func); + + /** + * Install the onmousemove event handler for the tooltips + */ + var canvas_onmousemove_func = function (e) + { + e = RGraph.FixEventObject(e); + + var canvas = document.getElementById(this.id); + var context = canvas.getContext('2d'); + var obj = canvas.__object__; + var bar = obj.getBar(e); + + /** + * Loop through the bars determining if the mouse is over a bar + */ + if (bar) { + if (obj.Get('chart.tooltips')[bar[5]]) { + canvas.style.cursor = 'pointer'; + e.stopPropagation(); + } + + return; + } + + canvas.style.cursor = 'default'; + + /** + * Stop the event bubbling + */ + e.stopPropagation(); + + return false; + } + this.canvas.addEventListener('mousemove', canvas_onmousemove_func, false); + RGraph.AddEventListener(this.id, 'mousemove', canvas_onmousemove_func); + + + + + + + + + + + + + + } + + + /** + * Fire the RGraph ondraw event + */ + RGraph.FireCustomEvent(this, 'ondraw'); + } + + + /** + * Draws the charts axes + */ + RGraph.Waterfall.prototype.DrawAxes = function () + { + if (this.Get('chart.noaxes')) { + return; + } + + this.context.beginPath(); + this.context.strokeStyle = this.Get('chart.axis.color'); + this.context.lineWidth = 1; + + // Draw the Y axis + if (this.Get('chart.noyaxis') == false) { + this.context.moveTo(this.gutterLeft, this.gutterTop); + this.context.lineTo(this.gutterLeft, RGraph.GetHeight(this) - this.gutterBottom); + } + + // Draw the X axis + if (this.Get('chart.noxaxis') == false) { + // Center X axis + if (this.Get('chart.xaxispos') == 'center') { + this.context.moveTo(this.gutterLeft, ((this.canvas.height - this.gutterTop - this.gutterBottom) / 2) + this.gutterTop); + this.context.lineTo(this.canvas.width - this.gutterRight, ((this.canvas.height - this.gutterTop - this.gutterBottom) / 2) + this.gutterTop); + } else { + this.context.moveTo(this.gutterLeft, this.canvas.height - this.gutterBottom); + this.context.lineTo(this.canvas.width - this.gutterRight, this.canvas.height - this.gutterBottom); + } + } + + var numYTicks = this.Get('chart.numyticks'); + + // Draw the Y tickmarks + if (this.Get('chart.noyaxis') == false) { + + var yTickGap = (RGraph.GetHeight(this) - this.gutterTop - this.gutterBottom) / numYTicks; + + for (y=this.gutterTop; y < (this.canvas.height - this.gutterBottom); y += yTickGap) { + + if (this.Get('chart.xaxispos') == 'bottom' || (y != ((this.canvas.height - this.gutterTop - this.gutterBottom) / 2) + this.gutterTop)) { + this.context.moveTo(this.gutterLeft, y); + this.context.lineTo(this.gutterLeft - 3, y); + } + } + + /** + * If the X axis is not being shown, draw an extra tick + */ + if (this.Get('chart.noxaxis') || this.Get('chart.xaxispos') == 'center') { + this.context.moveTo(this.gutterLeft - 3, this.canvas.height - this.gutterBottom); + this.context.lineTo(this.gutterLeft, this.canvas.height - this.gutterBottom); + } + } + + + // Draw the X tickmarks + if (this.Get('chart.noxaxis') == false) { + + xTickGap = (this.canvas.width - this.gutterLeft - this.gutterRight ) / (this.data.length + (this.Get('chart.total') ? 1 : 0)); + + if (this.Get('chart.xaxispos') == 'center') { + yStart = ((this.canvas.height - this.gutterBottom - this.gutterTop) / 2) + this.gutterTop - 3; + yEnd = ((this.canvas.height - this.gutterBottom - this.gutterTop) / 2) + this.gutterTop + 3; + } else { + yStart = this.canvas.height - this.gutterBottom; + yEnd = (this.canvas.height - this.gutterBottom) + 3; + } + + for (x=this.gutterLeft + xTickGap; x<=RGraph.GetWidth(this) - this.gutterRight; x+=xTickGap) { + this.context.moveTo(x, yStart); + this.context.lineTo(x, yEnd); + } + + if (this.Get('chart.noyaxis')) { + this.context.moveTo(this.gutterLeft, yStart); + this.context.lineTo(this.gutterLeft, yEnd); + } + } + + /** + * If the Y axis is not being shown, draw an extra tick + */ + if (this.Get('chart.noyaxis') && this.Get('chart.noxaxis') == false) { + this.context.moveTo(this.gutterLeft, RGraph.GetHeight(this) - this.gutterBottom); + this.context.lineTo(this.gutterLeft, RGraph.GetHeight(this) - this.gutterBottom + 3); + } + + this.context.stroke(); + } + + + /** + * Draws the labels for the graph + */ + RGraph.Waterfall.prototype.DrawLabels = function () + { + var context = this.context; + var numYLabels = 5; // Make this configurable + var interval = this.grapharea / numYLabels; + var font = this.Get('chart.text.font'); + var size = this.Get('chart.text.size'); + var color = this.Get('chart.text.color'); + var units_pre = this.Get('chart.units.pre'); + var units_post = this.Get('chart.units.post'); + + this.context.beginPath(); + this.context.fillStyle = color; + + /** + * First, draw the Y labels + */ + if (this.Get('chart.ylabels')) { + if (this.Get('chart.xaxispos') == 'center') { + + var halfInterval = interval / 2; + var halfWay = ((this.canvas.height - this.gutterTop - this.gutterBottom) / 2) + this.gutterTop; + + for (var i=0; i<numYLabels; ++i) { + RGraph.Text(context, + font, + size, + this.gutterLeft - 5, + this.gutterTop + (i * halfInterval), + RGraph.number_format(this, this.scale[4 - i], units_pre, units_post), + 'center', + 'right'); + } + + for (var i=0; i<numYLabels; ++i) { + RGraph.Text(context, + font, + size, + this.gutterLeft - 5, + halfWay + (i * halfInterval) + halfInterval, + '-' + RGraph.number_format(this, this.scale[i], units_pre, units_post), + 'center', + 'right'); + } + + } else { + + for (var i=1; i<=numYLabels; ++i) { + RGraph.Text(context, + font, + size, + this.gutterLeft - 5, + this.canvas.height - this.gutterBottom - (i * interval), + RGraph.number_format(this, this.scale[i - 1], units_pre, units_post), + 'center', + 'right'); + + } + } + } + + + + /** + * Now, draw the X labels + */ + if (this.Get('chart.labels').length > 0) { + + // Recalculate the interval for the X labels + interval = (this.canvas.width - this.gutterLeft - this.gutterRight) / this.Get('chart.labels').length; + + var halign = 'center'; + var angle = this.Get('chart.text.angle'); + + if (angle) { + halign = 'right'; + angle *= -1; + } + + var labels = this.Get('chart.labels'); + + for (var i=0; i<labels.length; ++i) { + + // context, font, size, x, y, text[, valign[, halign[, border[, angle[, background[, bold[, indicator]]]]]]] + RGraph.Text(context, + font, + size, + this.gutterLeft + (i * interval) + (interval / 2), + this.canvas.height - this.gutterBottom + 5 + this.halfTextHeight, + labels[i], + 'center', + halign, + null, + angle); + + } + } + + this.context.stroke(); + this.context.fill(); + } + + + /** + * Draws the bars on to the chart + */ + RGraph.Waterfall.prototype.Drawbars = function () + { + var context = this.context; + var canvas = this.canvas; + var hmargin = this.Get('chart.hmargin'); + var runningTotal = 0; + + + for (var i=0; i<this.data.length; ++i) { + context.beginPath(); + context.strokeStyle = this.Get('chart.strokestyle'); + + var x = this.gutterLeft + hmargin + (((this.graphwidth / (this.data.length + (this.Get('chart.total') ? 1 : 0))) * i) * this.Get('chart.multiplier.x')); + var y = this.gutterTop + this.grapharea - (i == 0 ? ((this.data[0] / this.max) * this.grapharea) : (this.data[i] > 0 ? ((runningTotal + this.data[i]) / this.max) * this.grapharea : (runningTotal / this.max) * this.grapharea)); + var w = ((this.canvas.width - this.gutterLeft - this.gutterRight) / (this.data.length + (this.Get('chart.total') ? 1 : 0 )) ) - (2 * this.Get('chart.hmargin')); + w = w * this.Get('chart.multiplier.w'); + var h = (Math.abs(this.data[i]) / this.max) * this.grapharea; + + if (this.Get('chart.xaxispos') == 'center') { + h /= 2; + y = (i == 0 ? ((this.data[0] / this.max) * this.grapharea) : (this.data[i] > 0 ? ((runningTotal + this.data[i]) / this.max) * this.grapharea : (runningTotal / this.max) * this.grapharea)); + y = this.gutterTop + (this.grapharea/2) - (y / 2); + } + + // Color + context.fillStyle = this.data[i] >= 0 ? this.Get('chart.colors')[0] : this.Get('chart.colors')[1]; + + + if (this.Get('chart.shadow')) { + RGraph.SetShadow(this, this.Get('chart.shadow.color'), this.Get('chart.shadow.offsetx'), this.Get('chart.shadow.offsety'), this.Get('chart.shadow.blur')); + } else { + RGraph.NoShadow(this); + } + + context.strokeRect(x, y, w, h); + context.fillRect(x, y, w, h); + + this.coords.push([x, y, w, h]); + + runningTotal += this.data[i]; + + context.stroke(); + context.fill(); + } + +if (this.Get('chart.total')) { + + // This is the height of the final bar + h = (runningTotal / this.max) * (this.grapharea / (this.Get('chart.xaxispos') == 'center' ? 2 : 1)); + + /** + * Set the Y (ie the start point) value + */ + if (this.Get('chart.xaxispos') == 'center') { + y = runningTotal > 0 ? this.centery - h : this.centery - h; + } else { + y = this.canvas.height - this.gutterBottom - h; + } + + // This is the X position of the final bar + x = x + (this.Get('chart.hmargin') * 2) + w; + + + // Final color + this.context.fillStyle = this.Get('chart.colors')[2]; + + this.context.beginPath(); + this.context.strokeRect(x, y, w, h); + this.context.fillRect(x, y, w, h); + this.context.stroke(); + this.context.fill(); + + this.coords.push([x, y - (runningTotal > 0 ? 0 : Math.abs(h)), w, Math.abs(h)]); +} + + RGraph.NoShadow(this); + + /** + * This draws the connecting lines + */ + for (var i=1; i<this.coords.length; ++i) { + context.strokeStyle = 'gray'; + context.beginPath(); + if (this.data[i - 1] > 0) { + context.moveTo(this.coords[i - 1][0] + this.coords[i - 1][2], this.coords[i - 1][1]); + context.lineTo(this.coords[i - 1][0] + this.coords[i - 1][2] + (2 * hmargin), this.coords[i - 1][1]); + } else { + context.moveTo(this.coords[i - 1][0] + this.coords[i - 1][2], this.coords[i - 1][1] + this.coords[i - 1][3]); + context.lineTo(this.coords[i - 1][0] + this.coords[i - 1][2] + (2 * hmargin), this.coords[i - 1][1] + this.coords[i - 1][3]); + } + context.stroke(); + } + } + + + /** + * Not used by the class during creating the graph, but is used by event handlers + * to get the coordinates (if any) of the selected bar + * + * @param object e The event object + */ + RGraph.Waterfall.prototype.getBar = function (e) + { + var canvas = e.target; + var obj = e.target.__object__; + var mouseCoords = RGraph.getMouseXY(e); + + /** + * Loop through the bars determining if the mouse is over a bar + */ + for (var i=0; i<obj.coords.length; i++) { + + var mouseX = mouseCoords[0]; + var mouseY = mouseCoords[1]; + + var left = obj.coords[i][0]; + var top = obj.coords[i][1]; + var width = obj.coords[i][2]; + var height = obj.coords[i][3]; + + if ( mouseX >= left + && mouseX <= left + width + && mouseY >= top + && mouseY <= top + height) { + + return [obj, left, top, width, height, i]; + } + } + + return null; + } + + + /** + * The Waterfall is slightly different to Bar/Line charts so has this function to get the max value + */ + RGraph.Waterfall.prototype.getMax = function (data) + { + var runningTotal = 0; + var max = 0; + + for (var i=0; i<data.length; ++i) { + runningTotal += data[i]; + max = Math.max(max, Math.abs(runningTotal)); + } + + return max; + }
\ No newline at end of file diff --git a/schall/static/RGraph/scripts/minify b/schall/static/RGraph/scripts/minify new file mode 100755 index 0000000..3524429 --- /dev/null +++ b/schall/static/RGraph/scripts/minify @@ -0,0 +1,104 @@ +#!/usr/bin/php -q +<?php + /** + * This is a minification script. It minifies the desired script "in-place" + * + * Usage (Unix): ./minify file1 file2 ... + * Usage (Windows): C:\php\php.exe minify file1 file2 ... + * + * The minification is medium, and it can over halve a scripts size. + * Combined with subsequent gzip compression the results can be excellent. For + * example a 70k script of mine was reduced to just 7k. (!) Substantial + * bandwidth savings for you, and much improved performance for your users. + * + * NOTE: Usage on Windows works, but is less tested + */ + + /** + * Check for arg + */ + if (empty($_SERVER['argv'][1])) { + echo "RGraph minification script\n"; + echo "==========================\n"; + echo "Usage (Unix): " . $_SERVER['argv'][0] . " file1 file2 ...\n"; + echo "Usage (Windows): C:\php\php.exe " . $_SERVER['argv'][0] . " file1 file2 ...\n\n"; + exit; + + } else { + + for ($i=1; $i<count($_SERVER['argv']); ++$i) { + Minify($_SERVER['argv'][$i]); + } + } + + + /** + * This is the function that does the work of minifying the file + * + * @param $filename string The filename to be minified + */ + function Minify($filename) + { + /** + * Begin + */ + $original = file_get_contents($filename); + $new = preg_replace('/^ +/m', '', $original); // Lose spaces at the start of lines + $new = preg_replace('/ *\/\/.*$/m', '', $new); // Lose comments of the style: "// ..." + $new = preg_replace("/;\r?\n/m", ";\r\n", $new); // Make all lines end with \r\n + //$new = preg_replace("|\r\n\*|", "", $new); + + /** + * Get rid of block comments + */ + $out = ''; + $inBlock = false; // Are we in a block comment + for ($i=0; $i<strlen($new); $i++) { + if (substr($new, $i, 1) == '/') { + // Read the next char + if (!$inBlock AND substr($new, $i, 2) == '/*') { + $inBlock = true; + } + } elseif (substr($new, $i, 2) == '*/') { + $inBlock = false; + $i++; + continue; + } + + if (!$inBlock) { + $out .= substr($new, $i, 1); + } + } + + /** + * Get rid of double line breaks + * + * NOTE: Is this necessary? + */ + $out = preg_replace('|\n+|', "\n", $out); + + /** + * Further tweaks + * UPDATED: 28th March 2009 - Line endings have been changed - they should all be \r\n + */ + $out = str_replace(";\r\n}", ';}', $out); + $out = str_replace(";\r\nRGraph", ';RGraph', $out); + $out = preg_replace('/;\r\n([a-z])/i', ';$1', $out); + $out = str_replace('if (', 'if(', $out); + $out = str_replace(') {', '){', $out); + $out = str_replace("}\r\n", '}', $out); + $out = str_replace("{\r\n", '{', $out); // UPDATED + $out = str_replace("{\r\n", '{', $out); // UPDATED + $out = str_replace("}\r\n}", '}}', $out); // UPDATED + $out = str_replace("}\r\n}", '}}', $out); // UPDATED + $out = str_replace("}\r\n}", '}}', $out); // UPDATED + $out = preg_replace('/ {2,}= /', ' = ', $out); + + // Mark the file as minified + $out = "// THIS FILE HAS BEEN MINIFIED\r\n" . $out; + + file_put_contents($filename, $out); + + printf(" Minifying {$filename} Before: %s After: %s Saving: %d%%\n", number_format(strlen($original)), number_format(strlen($out)), number_format((((strlen($original) - strlen($out)) / strlen($original)) * 100), 1)); + } +?>
\ No newline at end of file diff --git a/schall/templates/index.html b/schall/templates/index.html new file mode 100644 index 0000000..7ed729f --- /dev/null +++ b/schall/templates/index.html @@ -0,0 +1,185 @@ +<html> + <head> + <script src="static/RGraph/libraries/RGraph.common.core.js" ></script> + <script src="static/RGraph/libraries/RGraph.common.effects.js" ></script> + <script src="static/RGraph/libraries/RGraph.led.js" ></script> + <script src="static/RGraph/libraries/RGraph.gauge.js" ></script> + <script src="static/RGraph/libraries/RGraph.line.js" ></script> + <style> +#led { + position: absolute; + left: 118px; + top: 95px; + z-index: 1; +} +#gauge1 { + position: absolute; + left: 5px; +} +#chart { + position: absolute; + left: 260px; +} +#chartHistory { + position: absolute; + top: 280px; +} + </style> + </head> + <body> + <canvas width=" 40px" height=" 20px" id="led"></canvas> + <canvas width="250px" height="250px" id="gauge1"></canvas> + <canvas width=" 0px" height="250px" id="chart"></canvas> + <canvas width=" 0px" height="250px" id="chartHistory"></canvas> + <script> +window.onload = function () { + document.getElementById("chart").width = window.innerWidth - document.getElementById("gauge1").width - 10; + document.getElementById("chartHistory").width = window.innerWidth - 10; + + var data = {"value":null, ts:null}; + var graph_data = [[],[]]; + var data_max = 0; + var req_start = 0; + + var GRAPH_MAX_POINTS = 1000; + for (var i=0; i< GRAPH_MAX_POINTS; ++i) { + graph_data[0].push(null); + graph_data[1].push(null); + } + + var gauge1 = new RGraph.Gauge('gauge1', 20, 70); + gauge1.Set('chart.text.size', 8); + gauge1.Set('chart.units.post', 'dbA'); + gauge1.Set('chart.green.color', 'lightGreen'); + gauge1.Set('chart.yellow.color', 'yellow'); + gauge1.Set('chart.red.color', 'red'); + gauge1.Set('chart.green.end', 40); + gauge1.Set('chart.red.start', 60); + gauge1.Draw(); + + var led = new RGraph.LED('led', '00'); + led.Set('chart.light', 'red'); + led.Set('chart.zoom.background', false); + led.Set('chart.dark', 'rgba(0,0,0,0)'); + led.Draw(); + + var graph = new RGraph.Line('chart', graph_data[0], graph_data[1]); + graph.Set('chart.title.yaxis', 'dBA'); + graph.Set('chart.title.yaxis.pos', 0.4); + graph.Set('chart.ylabels.count', 5); + graph.Set('chart.gutter.top', 5); + graph.Set('chart.gutter.bottom', 5); + graph.Set('chart.gutter.left', 60); + graph.Set('chart.gutter.right', 5); + graph.Set('chart.linewidth', [3,1]); + graph.Set('chart.colors', ["red", "black"]); + graph.Set('chart.ymin', 20); + graph.Set('chart.ymax', 70); + graph.Set('chart.xticks', 25); + + chartHistory = new RGraph.Line('chartHistory', []); + chartHistory.Set('chart.title.yaxis', 'dBA'); + chartHistory.Set('chart.title.yaxis.pos', 0.4); + chartHistory.Set('chart.ylabels.count', 5); + chartHistory.Set('chart.gutter.top', 5); + chartHistory.Set('chart.gutter.bottom', 5); + chartHistory.Set('chart.gutter.left', 60); + chartHistory.Set('chart.gutter.right', 5); + chartHistory.Set('chart.linewidth', [1]); + chartHistory.Set('chart.colors', ["black"]); + chartHistory.Set('chart.ymin', 20); + chartHistory.Set('chart.ymax', 70); + chartHistory.Set('chart.xticks', 25); + + + function load() { + var http = new XMLHttpRequest(); + http.open("GET", "now", true); + http.onreadystatechange = function() { + if (http.readyState == 4) { + var req_end = ( new Date ).getTime() + data = JSON.parse(http.responseText); + + var d = req_end - req_start; + window.setTimeout(load, 500 - d); + } + } + req_start = ( new Date ).getTime(); + http.send(null); + } + + var httpinit = new XMLHttpRequest(); + httpinit.open("GET", "range/", true); + httpinit.onreadystatechange = function(){ + if (httpinit.readyState == 4) { + graph_data[1] = JSON.parse(httpinit.responseText); + // Start polling + init(); + } + } + httpinit.send() + + function json(path, func) { + var req = new XMLHttpRequest(); + req.open("GET", path, true); + req.onreadystatechange = function() { + if (req.readyState == 4) + func( JSON.parse( req.responseText) ); + }; + req.send(); + } + + function refreshChartHistory() { + var now = new Date().getTime(); + var from = now - ( 1000 * 60 * 60 * 24 * 2 ); + var count = 1200; + json("range/" + from + "/" + now + "/" + count, function (data) { + RGraph.Clear(chartHistory.canvas); + chartHistory.original_data = [ data ]; + chartHistory.Draw() + + window.setTimeout( refreshChartHistory, 60 * 1000); + }); + } + + function init() { + load(); + refreshChartHistory(); + + window.setInterval(function () { + // Gauge + gauge1.value = data['value']; + gauge1.Draw(); + + // LED + led.text = '' + Math.round(data['value']); + led.Draw() + + // Line Chart + if (data['value'] > data_max) { + data_max = data['value']; + } + graph_data[0].unshift(data['value']); + + while (graph_data[0].length > GRAPH_MAX_POINTS) { + graph_data[0].pop(); + } + + RGraph.Clear(graph.canvas); + graph.original_data = graph_data; + graph.Draw(); + + }, 500); + window.setInterval(function() { + // Line Chart - Max + graph_data[1].unshift(data_max); + data_max = 0; + while (graph_data[1].length > GRAPH_MAX_POINTS) { + graph_data[1].pop(); + } + }, 10000); + } +} + </script> + </body> +</html> |
