+++ /dev/null
-Copyright (c) 2006, Alastair Tse
-All rights reserved.
-
-Redistribution and use in source and binary forms, with or without
-modification, are permitted provided that the following conditions are
-met:
-
- * Redistributions of source code must retain the above copyright
- notice, this list of conditions and the following disclaimer.
- * Redistributions in binary form must reproduce the above
- copyright notice, this list of conditions and the following
- disclaimer in the documentation and/or other materials provided
- with the distribution.
- * Neither the name of the Alastair Tse nor the names of its
- contributors may be used to endorse or promote products derived
- from this software without specific prior written permission.
-
-THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
\ No newline at end of file
+++ /dev/null
-/*
- PlotKit
- =======
- PlotKit is a collection of Javascript classes that allows
- you to quickly visualise data using different types of charts.
-
- For license/info/documentation: http://www.liquidx.net/plotkit/
-
- Copyright
- ---------
- Copyright 2005,2006 (c) Alastair Tse <alastair^liquidx.net>
- For use under the BSD license. <http://www.liquidx.net/plotkit>
-*/
-
-// --------------------------------------------------------------------
-// Check required components
-// --------------------------------------------------------------------
-
-try {
- if (typeof(MochiKit.Base) == 'undefined' ||
- typeof(MochiKit.DOM) == 'undefined' ||
- typeof(MochiKit.Color) == 'undefined')
- {
- throw "";
- }
-}
-catch (e) {
- throw "PlotKit depends on MochiKit.{Base,Color,DOM}"
-}
-
-// -------------------------------------------------------------------
-// Define our own PlotKit namespace
-// -------------------------------------------------------------------
-
-if (typeof(PlotKit) == 'undefined') {
- PlotKit = {};
-}
-
-PlotKit.NAME = "PlotKit";
-PlotKit.VERSION = "0.8";
-PlotKit.__repr__ = function() {
- return "[" + this.NAME + " " + this.VERSION + "]";
-};
-
-PlotKit.toString = function() {
- return this.__repr__();
-}
-
-// -------------------------------------------------------------------
-// Encapsulate all our utility function into it's own namespace.
-// -------------------------------------------------------------------
-
-if (typeof(PlotKit.Base) == 'undefined') {
- PlotKit.Base = {};
-}
-
-PlotKit.Base.NAME = 'PlotKit.Base';
-PlotKit.Base.VERSION = PlotKit.VERSION;
-
-PlotKit.Base.__repr__ = function() {
- return "[" + this.NAME + " " + this.VERSION + "]";
-};
-
-PlotKit.Base.toString = function() {
- return this.__repr__();
-}
-
-
-// Detect whether we are using prototype.js
-PlotKit.Base.usingPrototype = function() {
- try {
- return (typeof(Object.extend) == 'function');
- }
- catch (e) {
- return false;
- }
-}
-
-
-MochiKit.Base.update(PlotKit.Base, {
- collapse: function(lst) {
- var m = MochiKit.Base;
- var biggerList = new Array();
- for (var i = 0; i < lst.length; i++) {
- biggerList = m.concat(biggerList, lst[i]);
- }
- if (PlotKit.Base.usingPrototype()) {
- delete biggerList.extend;
- delete biggerList.from;
- delete biggerList.inspect;
- }
-
- return biggerList;
- },
-
- uniq: function(sortedList) {
- // get unique elements in list, exactly the same as unix shell's uniq.
- var m = MochiKit.Base;
-
- if (!m.isArrayLike(sortedList) || (sortedList.length < 1))
- return new Array();
-
- var uniq = new Array();
- var lastElem = sortedList[0];
- uniq.push(sortedList[0]);
- for (var i = 1; i < sortedList.length; i++) {
- if (m.compare(sortedList[i], lastElem) != 0) {
- lastElem = sortedList[i];
- uniq.push(sortedList[i]);
- }
- }
- return uniq;
- },
-
-
- palette: function(baseColor, fromLevel, toLevel, increment) {
- var isNil = MochiKit.Base.isUndefinedOrNull;
- var fractions = new Array();
- if (isNil(increment))
- increment = 0.1;
- if (isNil(toLevel))
- toLevel = 0.4;
- if (isNil(fromLevel))
- fromLevel = -0.2;
-
- var level = fromLevel;
- while (level <= toLevel) {
- fractions.push(level);
- level += increment;
- }
-
- var makeColor = function(color, fraction) {
- return color.lighterColorWithLevel(fraction);
- };
- return MochiKit.Base.map(partial(makeColor, baseColor), fractions);
- },
-
- excanvasSupported: function() {
- if (/MSIE/.test(navigator.userAgent) && !window.opera) {
- return true;
- }
- return false;
- },
-
- // The following functions are from quirksmode.org
- // http://www.quirksmode.org/js/findpos.html
-
- findPosX: function(obj) {
- var curleft = 0;
- if (obj.offsetParent) {
- while (obj.offsetParent) {
- curleft += obj.offsetLeft
- obj = obj.offsetParent;
- }
- }
- else if (obj.x)
- curleft += obj.x;
- return curleft;
- },
-
- findPosY: function(obj) {
- var curtop = 0;
- if (obj.offsetParent) {
- while (obj.offsetParent) {
- curtop += obj.offsetTop
- obj = obj.offsetParent;
- }
- }
- else if (obj.y)
- curtop += obj.y;
- return curtop;
- },
-
- isFuncLike: function(obj) {
- return (typeof(obj) == 'function');
- }
-});
-
-//
-// Prototype.js aware (crippled) versions of map and items.
-//
-
-PlotKit.Base.map = function(fn, lst) {
- if (PlotKit.Base.usingPrototype()) {
- var rval = [];
- for (var x in lst) {
- if (typeof(lst[x]) == 'function') continue;
- rval.push(fn(lst[x]));
- }
- return rval;
- }
- else {
- return MochiKit.Base.map(fn, lst);
- }
-};
-
-PlotKit.Base.items = function(lst) {
- if (PlotKit.Base.usingPrototype()) {
- var rval = [];
- for (var x in lst) {
- if (typeof(lst[x]) == 'function') continue;
- rval.push([x, lst[x]]);
- }
- return rval;
- }
- else {
- return MochiKit.Base.items(lst);
- }
-};
-
-PlotKit.Base.keys = function(lst) {
- if (PlotKit.Base.usingPrototype()) {
- var rval = [];
- for (var x in lst) {
- if (typeof(lst[x]) == 'function') continue;
- rval.push(x);
- }
- return rval;
- }
- else {
- return MochiKit.Base.keys(lst);
- }
-};
-
-//
-// colour schemes
-//
-PlotKit.Base.baseColors = function () {
- var hexColor = MochiKit.Color.Color.fromHexString;
- return [hexColor("#476fb2"),
- hexColor("#be2c2b"),
- hexColor("#85b730"),
- hexColor("#734a99"),
- hexColor("#26a1c5"),
- hexColor("#fb8707"),
- hexColor("#000000")];
-};
-
-PlotKit.Base.EXPORT = [
- "baseColors",
- "collapse",
- "findPosX",
- "findPosY",
- "uniq",
- "isFuncLike",
- "excanvasSupported"
-];
-
-PlotKit.Base.EXPORT_OK = [];
-
-PlotKit.Base.__new__ = function() {
- var m = MochiKit.Base;
-
- m.nameFunctions(this);
-
- this.EXPORT_TAGS = {
- ":common": this.EXPORT,
- ":all": m.concat(this.EXPORT, this.EXPORT_OK)
- };
-};
-
-PlotKit.Base.__new__();
-MochiKit.Base._exportSymbols(this, PlotKit.Base);
-
+++ /dev/null
-PlotKit.CanvasRenderer = function(element, layout, options) {
- if (arguments.length > 0)
- this.__init__(element, layout, options);
-};
-
-PlotKit.CanvasRenderer.prototype.__init__ = function(element, layout, options) {
- var isNil = MochiKit.Base.isUndefinedOrNull;
- var Color = MochiKit.Color.Color;
-
- // default options
- this.options = {
- "strokeWidth": 0.5,
- "drawXAxis": true,
- "drawYAxis": true,
- "axisLineColor": Color.blackColor(),
- "axisLineWidth": 0.5,
- "axisTickSize": 3,
- "axisLabelColor": Color.blackColor(),
- "axisLabelFont": "Arial",
- "axisLabelFontSize": 9,
- "axisLabelWidth": 50,
- };
- MochiKit.Base.update(this.options, options ? options : {});
-
- this.layout = layout;
- this.element = MochiKit.DOM.getElement(element);
- this.container = this.element.parentNode;
-
- // Stuff relating to Canvas on IE support
- this.isIE = PlotKit.Base.excanvasSupported();
-
- if (this.isIE && !isNil(G_vmlCanvasManager)) {
- this.IEDelay = 0.5;
- this.maxTries = 5;
- this.renderDelay = null;
- this.clearDelay = null;
- this.element = G_vmlCanvasManager.initElement(this.element);
- }
-
- this.height = this.element.height;
- this.width = this.element.width;
-
- // --- check whether everything is ok before we return
-
- if (isNil(this.element))
- throw "CanvasRenderer() - passed canvas is not found";
-
- if (!this.isIE && !(PlotKit.CanvasRenderer.isSupported(this.element)))
- throw "CanvasRenderer() - Canvas is not supported.";
-
- if (isNil(this.container) || (this.container.nodeName.toLowerCase() != "div"))
- throw "CanvasRenderer() - <canvas> needs to be enclosed in <div>";
-
- // internal state
- this.xlabels = new Array();
- this.ylabels = new Array();
-
- this.area = {
- x: this.options.yAxisLabelWidth + 2 * this.options.axisTickSize,
- y: 0
- };
- this.area.w = this.width - this.area.x - this.options.rightGap;
- this.area.h = this.height - this.options.axisLabelFontSize -
- 2 * this.options.axisTickSize;
-
- MochiKit.DOM.updateNodeAttributes(this.container,
- {"style":{ "position": "relative", "width": this.width + "px"}});
-};
-
-
-PlotKit.CanvasRenderer.prototype._renderLineAxis = function() {
- this._renderAxis();
-};
-
-
-PlotKit.CanvasRenderer.prototype._renderAxis = function() {
- if (!this.options.drawXAxis && !this.options.drawYAxis)
- return;
-
- var context = this.element.getContext("2d");
-
- var labelStyle = {"style":
- {"position": "absolute",
- "fontSize": this.options.axisLabelFontSize + "px",
- "zIndex": 10,
- "color": this.options.axisLabelColor.toRGBString(),
- "width": this.options.axisLabelWidth + "px",
- "overflow": "hidden"
- }
- };
-
- // axis lines
- context.save();
- context.strokeStyle = this.options.axisLineColor.toRGBString();
- context.lineWidth = this.options.axisLineWidth;
-
-
- if (this.options.drawYAxis) {
- if (this.layout.yticks) {
- var drawTick = function(tick) {
- if (typeof(tick) == "function") return;
- var x = this.area.x;
- var y = this.area.y + tick[0] * this.area.h;
- context.beginPath();
- context.moveTo(x, y);
- context.lineTo(x - this.options.axisTickSize, y);
- context.closePath();
- context.stroke();
-
- var label = DIV(labelStyle, tick[1]);
- var top = (y - this.options.axisLabelFontSize / 2);
- if (top < 0) top = 0;
-
- if (top + this.options.axisLabelFontSize + 3 > this.height) {
- label.style.bottom = "0px";
- } else {
- label.style.top = top + "px";
- }
- label.style.left = "0px";
- label.style.textAlign = "right";
- label.style.width = this.options.yAxisLabelWidth + "px";
- MochiKit.DOM.appendChildNodes(this.container, label);
- this.ylabels.push(label);
- };
-
- MochiKit.Iter.forEach(this.layout.yticks, bind(drawTick, this));
-
- // The lowest tick on the y-axis often overlaps with the leftmost
- // tick on the x-axis. Shift the bottom tick up a little bit to
- // compensate if necessary.
- var bottomTick = this.ylabels[0];
- var fontSize = this.options.axisLabelFontSize;
- var bottom = parseInt(bottomTick.style.top) + fontSize;
- if (bottom > this.height - fontSize) {
- bottomTick.style.top = (parseInt(bottomTick.style.top) -
- fontSize / 2) + "px";
- }
- }
-
- context.beginPath();
- context.moveTo(this.area.x, this.area.y);
- context.lineTo(this.area.x, this.area.y + this.area.h);
- context.closePath();
- context.stroke();
- }
-
- if (this.options.drawXAxis) {
- if (this.layout.xticks) {
- var drawTick = function(tick) {
- if (typeof(dataset) == "function") return;
-
- var x = this.area.x + tick[0] * this.area.w;
- var y = this.area.y + this.area.h;
- context.beginPath();
- context.moveTo(x, y);
- context.lineTo(x, y + this.options.axisTickSize);
- context.closePath();
- context.stroke();
-
- var label = DIV(labelStyle, tick[1]);
- label.style.textAlign = "center";
- label.style.bottom = "0px";
-
- var left = (x - this.options.axisLabelWidth/2);
- if (left + this.options.axisLabelWidth > this.width) {
- left = this.width - this.options.xAxisLabelWidth;
- label.style.textAlign = "right";
- }
- if (left < 0) {
- left = 0;
- label.style.textAlign = "left";
- }
-
- label.style.left = left + "px";
- label.style.width = this.options.xAxisLabelWidth + "px";
- MochiKit.DOM.appendChildNodes(this.container, label);
- this.xlabels.push(label);
- };
-
- MochiKit.Iter.forEach(this.layout.xticks, bind(drawTick, this));
- }
-
- context.beginPath();
- context.moveTo(this.area.x, this.area.y + this.area.h);
- context.lineTo(this.area.x + this.area.w, this.area.y + this.area.h);
- context.closePath();
- context.stroke();
- }
-
- context.restore();
-
-};
-
-PlotKit.CanvasRenderer.prototype.clear = function() {
- if (this.isIE) {
- // VML takes a while to start up, so we just poll every this.IEDelay
- try {
- if (this.clearDelay) {
- this.clearDelay.cancel();
- this.clearDelay = null;
- }
- var context = this.element.getContext("2d");
- }
- catch (e) {
- this.clearDelay = MochiKit.Async.wait(this.IEDelay);
- this.clearDelay.addCallback(bind(this.clear, this));
- return;
- }
- }
-
- var context = this.element.getContext("2d");
- context.clearRect(0, 0, this.width, this.height);
-
- MochiKit.Iter.forEach(this.xlabels, MochiKit.DOM.removeElement);
- MochiKit.Iter.forEach(this.ylabels, MochiKit.DOM.removeElement);
- this.xlabels = new Array();
- this.ylabels = new Array();
-};
-
-// ----------------------------------------------------------------
-// Everything below here is experimental and undocumented.
-// ----------------------------------------------------------------
-
-
-PlotKit.CanvasRenderer.isSupported = function(canvasName) {
- var canvas = null;
- try {
- if (MochiKit.Base.isUndefinedOrNull(canvasName))
- canvas = MochiKit.DOM.CANVAS({});
- else
- canvas = MochiKit.DOM.getElement(canvasName);
- var context = canvas.getContext("2d");
- }
- catch (e) {
- var ie = navigator.appVersion.match(/MSIE (\d\.\d)/);
- var opera = (navigator.userAgent.toLowerCase().indexOf("opera") != -1);
- if ((!ie) || (ie[1] < 6) || (opera))
- return false;
- return true;
- }
- return true;
-};
+++ /dev/null
-/*
- PlotKit EasyPlot
- ================
-
- User friendly wrapper around the common plotting functions.
-
- Copyright
- ---------
- Copyright 2005,2006 (c) Alastair Tse <alastair^liquidx.net>
- For use under the BSD license. <http://www.liquidx.net/plotkit>
-
-*/
-
-try {
- if (typeof(PlotKit.CanvasRenderer) == 'undefined')
- {
- throw ""
- }
-}
-catch (e) {
- throw "PlotKit.EasyPlot depends on all of PlotKit's components";
-}
-
-// --------------------------------------------------------------------
-// Start of EasyPlot definition
-// --------------------------------------------------------------------
-
-if (typeof(PlotKit.EasyPlot) == 'undefined') {
- PlotKit.EasyPlot = {};
-}
-
-PlotKit.EasyPlot.NAME = "PlotKit.EasyPlot";
-PlotKit.EasyPlot.VERSION = PlotKit.VERSION;
-
-PlotKit.EasyPlot.__repr__ = function() {
- return "[" + this.NAME + " " + this.VERSION + "]";
-};
-
-PlotKit.EasyPlot.toString = function() {
- return this.__repr__();
-}
-
-// --------------------------------------------------------------------
-// Start of EasyPlot definition
-// --------------------------------------------------------------------
-
-PlotKit.EasyPlot = function(style, options, divElem, datasources) {
- this.layout = new Layout(style, options);
- this.divElem = divElem;
- this.width = parseInt(divElem.getAttribute('width'));
- this.height = parseInt(divElem.getAttribute('height'));
- this.deferredCount = 0;
-
- // make sure we have non-zero width
- if (this.width < 1) {
- this.width = this.divElem.width ? this.divElem.width : 300;
- }
-
- if (this.height < 1) {
- this.height = this.divElem.height ? this.divElem.height : 300;
- }
-
- // load data sources
- if (isArrayLike(datasources)) {
- for (var i = 0; i < datasources.length; i++) {
- if (typeof(datasources[i]) == "string") {
- this.deferredCount++;
- // load CSV via ajax
- var d = MochiKit.Async.doSimpleXMLHttpRequest(datasources[i]);
- d.addCallback(MochiKit.Base.bind(PlotKit.EasyPlot.onDataLoaded, this));
- }
- else if (isArrayLike(datasources[i])) {
- this.layout.addDataset("data-" + i, datasources[i]);
- }
- }
- }
- else if (!isUndefinedOrNull(datasources)) {
- throw "Passed datasources are not Array like";
- }
-
- // setup canvas to render
-
- if (CanvasRenderer.isSupported()) {
- this.element = CANVAS({"id": this.divElem.getAttribute("id") + "-canvas",
- "width": this.width,
- "height": this.height}, "");
- this.divElem.appendChild(this.element);
- this.renderer = new SweetCanvasRenderer(this.element, this.layout, options);
- }
- else if (SVGRenderer.isSupported()) {
- this.element = SVGRenderer.SVG({"id": this.divElem.getAttribute("id") + "-svg",
- "width": this.width,
- "height": this.height,
- "version": "1.1",
- "baseProfile": "full"}, "");
- this.divElem.appendChild(this.element);
- this.renderer = new SweetSVGRenderer(this.element, this.layout, options);
- }
-
- if ((this.deferredCount == 0) && (PlotKit.Base.keys(this.layout.datasets).length > 0)) {
- this.layout.evaluate();
- this.renderer.clear();
- this.renderer.render();
- }
-
-};
-
-PlotKit.EasyPlot.onDataLoaded = function(request) {
-
- // very primitive CSV parser, should fix to make it more compliant.
- var table = new Array();
- var lines = request.responseText.split('\n');
- for (var i = 0; i < lines.length; i++) {
- var stripped = MochiKit.Format.strip(lines[i]);
- if ((stripped.length > 1) && (stripped.charAt(0) != '#')) {
- table.push(stripped.split(','));
- }
- }
-
- this.layout.addDataset("data-ajax-" + this.deferredCount, table);
- this.deferredCount--;
-
- if ((this.deferredCount == 0) && (PlotKit.Base.keys(this.layout.datasets).length > 0)) {
- this.layout.evaluate();
- this.renderer.clear();
- this.renderer.render();
- }
-};
-
-PlotKit.EasyPlot.prototype.reload = function() {
- this.layout.evaluate();
- this.renderer.clear();
- this.renderer.render();
-};
-
-// Namespace Iniitialisation
-
-PlotKit.EasyPlotModule = {};
-PlotKit.EasyPlotModule.EasyPlot = PlotKit.EasyPlot;
-
-PlotKit.EasyPlotModule.EXPORT = [
- "EasyPlot"
-];
-
-PlotKit.EasyPlotModule.EXPORT_OK = [];
-
-PlotKit.EasyPlotModule.__new__ = function() {
- var m = MochiKit.Base;
-
- m.nameFunctions(this);
-
- this.EXPORT_TAGS = {
- ":common": this.EXPORT,
- ":all": m.concat(this.EXPORT, this.EXPORT_OK)
- };
-};
-
-PlotKit.EasyPlotModule.__new__();
-MochiKit.Base._exportSymbols(this, PlotKit.EasyPlotModule);
-
-
+++ /dev/null
-/*
- PlotKit Layout
- ==============
-
- Handles laying out data on to a virtual canvas square canvas between 0.0
- and 1.0. If you want to add new chart/plot types such as point plots,
- you need to add them here.
-
- Copyright
- ---------
- Copyright 2005,2006 (c) Alastair Tse <alastair^liquidx.net>
- For use under the BSD license. <http://www.liquidx.net/plotkit>
-
-*/
-
-// --------------------------------------------------------------------
-// Start of Layout definition
-// --------------------------------------------------------------------
-
-if (typeof(PlotKit.Layout) == 'undefined') {
- PlotKit.Layout = {};
-}
-
-// --------------------------------------------------------------------
-// Start of Layout definition
-// --------------------------------------------------------------------
-
-PlotKit.Layout = function(style, options) {
- this.options = { };
-
- // valid external options : TODO: input verification
- MochiKit.Base.update(this.options, options ? options : {});
-
- // internal states
- this.datasets = new Array();
-};
-
-// --------------------------------------------------------------------
-// Dataset Manipulation
-// --------------------------------------------------------------------
-
-
-PlotKit.Layout.prototype.addDataset = function(setname, set_xy) {
- this.datasets[setname] = set_xy;
-};
-
-// --------------------------------------------------------------------
-// Evaluates the layout for the current data and style.
-// --------------------------------------------------------------------
-
-PlotKit.Layout.prototype.evaluate = function() {
- this._evaluateLimits();
- this._evaluateLineCharts();
- this._evaluateLineTicks();
-};
-
-
-// --------------------------------------------------------------------
-// START Internal Functions
-// --------------------------------------------------------------------
-
-PlotKit.Layout.prototype._evaluateLimits = function() {
- this.minxval = this.maxxval = null;
- for (var name in this.datasets) {
- var series = this.datasets[name];
- var x1 = series[0][0];
- if (!this.minxval || x1 < this.minxval) this.minxval = x1;
-
- var x2 = series[series.length - 1][0];
- if (!this.maxxval || x2 > this.maxxval) this.maxxval = x2;
- }
- this.xrange = this.maxxval - this.minxval;
- this.xscale = (this.xrange != 0 ? 1/this.xrange : 1.0);
-
- this.minyval = this.options.yAxis[0];
- this.maxyval = this.options.yAxis[1];
- this.yrange = this.maxyval - this.minyval;
- this.yscale = (this.yrange != 0 ? 1/this.yrange : 1.0);
-};
-
-// Create the line charts
-PlotKit.Layout.prototype._evaluateLineCharts = function() {
- // add all the rects
- this.points = new Array();
- for (var setName in this.datasets) {
- var dataset = this.datasets[setName];
- for (var j = 0; j < dataset.length; j++) {
- var item = dataset[j];
- var point = {
- x: ((parseFloat(item[0]) - this.minxval) * this.xscale),
- y: 1.0 - ((parseFloat(item[1]) - this.minyval) * this.yscale),
- xval: parseFloat(item[0]),
- yval: parseFloat(item[1]),
- name: setName
- };
-
- // limit the x, y values so they do not overdraw
- if (point.y <= 0.0) {
- point.y = 0.0;
- }
- if (point.y >= 1.0) {
- point.y = 1.0;
- }
- if ((point.x >= 0.0) && (point.x <= 1.0)) {
- this.points.push(point);
- }
- }
- }
-};
-
-PlotKit.Layout.prototype._evaluateLineTicks = function() {
- this.xticks = new Array();
- for (var i = 0; i < this.options.xTicks.length; i++) {
- var tick = this.options.xTicks[i];
- var label = tick.label;
- var pos = this.xscale * (tick.v - this.minxval);
- if ((pos >= 0.0) && (pos <= 1.0)) {
- this.xticks.push([pos, label]);
- }
- }
-
- this.yticks = new Array();
- for (var i = 0; i < this.options.yTicks.length; i++) {
- var tick = this.options.yTicks[i];
- var label = tick.label;
- var pos = 1.0 - (this.yscale * (tick.v - this.minyval));
- if ((pos >= 0.0) && (pos <= 1.0)) {
- this.yticks.push([pos, label]);
- }
- }
-};
-
+++ /dev/null
-/***
-
-PlotKit Autoload Javascript Module.
-
-This file was adapted from MochiKit.
-See <http://mochikit.com/> for documentation, downloads, license, etc.
-(c) 2005 Bob Ippolito. All rights Reserved.
-
-Modified by Alastair Tse, 2006, for PlotKit.
-
-***/
-
-if (typeof(PlotKit) == 'undefined') {
- PlotKit = {};
-}
-
-if (typeof(PlotKit.PlotKit) == 'undefined') {
- PlotKit.PlotKit = {};
-}
-
-PlotKit.PlotKit.NAME = "PlotKit.PlotKit";
-PlotKit.PlotKit.VERSION = "0.9.1";
-PlotKit.PlotKit.__repr__ = function () {
- return "[" + this.NAME + " " + this.VERSION + "]";
-};
-
-PlotKit.PlotKit.toString = function () {
- return this.__repr__();
-};
-
-PlotKit.PlotKit.SUBMODULES = [
- "Base",
- "Layout",
- "Canvas",
- "SVG",
- "SweetCanvas",
- "SweetSVG",
- "EasyPlot"
-];
-
-if (typeof(JSAN) != 'undefined' || typeof(dojo) != 'undefined') {
- if (typeof(dojo) != 'undefined') {
- dojo.provide('PlotKit.PlotKit');
- dojo.require("PlotKit.*");
- }
- if (typeof(JSAN) != 'undefined') {
- // hopefully this makes it easier for static analysis?
- JSAN.use("PlotKit.Base", []);
- JSAN.use("PlotKit.Layout", []);
- JSAN.use("PlotKit.Canvas", []);
- JSAN.use("PlotKit.SweetCanvas", []);
- JSAN.use("PlotKit.SVG", []);
- JSAN.use("PlotKit.SweetSVG", []);
- }
- (function () {
- var extend = MochiKit.Base.extend;
- var self = PlotKit.PlotKit;
- var modules = self.SUBMODULES;
- var EXPORT = [];
- var EXPORT_OK = [];
- var EXPORT_TAGS = {};
- var i, k, m, all;
- for (i = 0; i < modules.length; i++) {
- m = PlotKit[modules[i]];
- extend(EXPORT, m.EXPORT);
- extend(EXPORT_OK, m.EXPORT_OK);
- for (k in m.EXPORT_TAGS) {
- EXPORT_TAGS[k] = extend(EXPORT_TAGS[k], m.EXPORT_TAGS[k]);
- }
- all = m.EXPORT_TAGS[":all"];
- if (!all) {
- all = extend(null, m.EXPORT, m.EXPORT_OK);
- }
- var j;
- for (j = 0; j < all.length; j++) {
- k = all[j];
- self[k] = m[k];
- }
- }
- self.EXPORT = EXPORT;
- self.EXPORT_OK = EXPORT_OK;
- self.EXPORT_TAGS = EXPORT_TAGS;
- }());
-
-} else {
- if (typeof(PlotKit.__compat__) == 'undefined') {
- PlotKit.__compat__ = true;
- }
- (function () {
- if (typeof(document) == "undefined") {
- return;
- }
-
- var scripts = document.getElementsByTagName("script");
- var kXULNSURI = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
- var base = null;
- var baseElem = null;
- var allScripts = {};
- var i;
- for (i = 0; i < scripts.length; i++) {
- var src = scripts[i].getAttribute("src");
- if (!src) {
- continue;
- }
- allScripts[src] = true;
- if (src.match(/PlotKit.js$/)) {
- base = src.substring(0, src.lastIndexOf('PlotKit.js'));
- baseElem = scripts[i];
- }
-
- }
-
- if (base === null) {
- return;
- }
- var modules = PlotKit.PlotKit.SUBMODULES;
- for (var i = 0; i < modules.length; i++) {
- if (PlotKit[modules[i]]) {
- continue;
- }
- var uri = base + modules[i] + '.js';
- if (uri in allScripts) {
- continue;
- }
- if (document.documentElement &&
- document.documentElement.namespaceURI == kXULNSURI) {
- // XUL
- var s = document.createElementNS(kXULNSURI, 'script');
- s.setAttribute("id", "PlotKit_" + base + modules[i]);
- s.setAttribute("src", uri);
- s.setAttribute("type", "application/x-javascript");
- baseElem.parentNode.appendChild(s);
- } else {
- // HTML
- /*
- DOM can not be used here because Safari does
- deferred loading of scripts unless they are
- in the document or inserted with document.write
-
- This is not XHTML compliant. If you want XHTML
- compliance then you must use the packed version of MochiKit
- or include each script individually (basically unroll
- these document.write calls into your XHTML source)
-
- */
- document.write('<script src="' + uri +
- '" type="text/javascript"></script>');
- }
- };
- })();
-}
+++ /dev/null
-/***
-
- PlotKit.PlotKit 0.9.1 : PACKED VERSION
-
- THIS FILE IS AUTOMATICALLY GENERATED. If creating patches, please
- diff against the source tree, not this file.
-
- For more information, <http://www.liquidx.net/plotkit/>.
-
- Copyright (c) 2006. Alastair Tse.
-
-***/
-
-try{
-if(typeof (MochiKit.Base)=="undefined"||typeof (MochiKit.DOM)=="undefined"||typeof (MochiKit.Color)=="undefined"||typeof (MochiKit.Format)=="undefined"){
-throw "";
-}
-}
-catch(e){
-throw "PlotKit depends on MochiKit.{Base,Color,DOM,Format}";
-}
-MochiKit.Base.update(MochiKit.Color.Color.prototype,{asFillColor:function(){
-return this.lighterColorWithLevel(0.3);
-},asStrokeColor:function(){
-return this.darkerColorWithLevel(0.1);
-},asPointColor:function(){
-return this.lighterColorWithLevel(0.1);
-}});
-if(typeof (PlotKit)=="undefined"){
-PlotKit={};
-}
-PlotKit.NAME="PlotKit";
-PlotKit.VERSION="0.8";
-PlotKit.__repr__=function(){
-return "["+this.NAME+" "+this.VERSION+"]";
-};
-PlotKit.toString=function(){
-return this.__repr__();
-};
-if(typeof (PlotKit.Base)=="undefined"){
-PlotKit.Base={};
-}
-PlotKit.Base.NAME="PlotKit.Base";
-PlotKit.Base.VERSION=PlotKit.VERSION;
-PlotKit.Base.__repr__=function(){
-return "["+this.NAME+" "+this.VERSION+"]";
-};
-PlotKit.Base.toString=function(){
-return this.__repr__();
-};
-PlotKit.Base.usingPrototype=function(){
-try{
-return (typeof (Object.extend)=="function");
-}
-catch(e){
-return false;
-}
-};
-MochiKit.Base.update(PlotKit.Base,{roundInterval:function(_1,_2,_3){
-var _4=MochiKit.Format.roundToFixed;
-var _5=_1/_2;
-return parseFloat(_4(_5,_3));
-},collapse:function(_6){
-var m=MochiKit.Base;
-var _8=new Array();
-for(var i=0;i<_6.length;i++){
-_8=m.concat(_8,_6[i]);
-}
-if(PlotKit.Base.usingPrototype()){
-delete _8.extend;
-delete _8.from;
-delete _8.inspect;
-}
-return _8;
-},uniq:function(_10){
-var m=MochiKit.Base;
-if(!m.isArrayLike(_10)||(_10.length<1)){
-return new Array();
-}
-var _11=new Array();
-var _12=_10[0];
-_11.push(_10[0]);
-for(var i=1;i<_10.length;i++){
-if(m.compare(_10[i],_12)!=0){
-_12=_10[i];
-_11.push(_10[i]);
-}
-}
-return _11;
-},colorScheme:function(){
-var mb=MochiKit.Base;
-var mc=MochiKit.Color;
-var _15=["red","orange","yellow","green","cyan","blue","purple","magenta"];
-var _16=function(_17){
-return mc.Color[_17+"Color"]();
-};
-return mb.map(_16,_15);
-},baseDarkPrimaryColors:function(){
-var _18=MochiKit.Color.Color.fromHexString;
-return [_18("#ad3f40"),_18("#ddac2c"),_18("#dfdd0c"),_18("#5276c4"),_18("#739c5a")];
-},basePrimaryColors:function(){
-var _19=MochiKit.Color.Color.fromHexString;
-return [_19("#d24c4d"),_19("#f2b32f"),_19("#ece90e"),_19("#5d83da"),_19("#78a15d")];
-},baseBlueColors:function(){
-var _20=MochiKit.Color.Color.fromHexString;
-return [_20("#4b6b94"),_20("#5d81b4"),_20("#acbad2")];
-},palette:function(_21,_22,_23,_24){
-var _25=MochiKit.Base.isUndefinedOrNull;
-var _26=new Array();
-if(_25(_24)){
-_24=0.1;
-}
-if(_25(_23)){
-_23=0.4;
-}
-if(_25(_22)){
-_22=-0.2;
-}
-var _27=_22;
-while(_27<=_23){
-_26.push(_27);
-_27+=_24;
-}
-var _28=function(_29,_30){
-return _29.lighterColorWithLevel(_30);
-};
-return MochiKit.Base.map(partial(_28,_21),_26);
-},excanvasSupported:function(){
-if(/MSIE/.test(navigator.userAgent)&&!window.opera){
-return true;
-}
-return false;
-},findPosX:function(obj){
-var _32=0;
-if(obj.offsetParent){
-while(obj.offsetParent){
-_32+=obj.offsetLeft;
-obj=obj.offsetParent;
-}
-}else{
-if(obj.x){
-_32+=obj.x;
-}
-}
-return _32;
-},findPosY:function(obj){
-var _33=0;
-if(obj.offsetParent){
-while(obj.offsetParent){
-_33+=obj.offsetTop;
-obj=obj.offsetParent;
-}
-}else{
-if(obj.y){
-_33+=obj.y;
-}
-}
-return _33;
-},isFuncLike:function(obj){
-return (typeof (obj)=="function");
-}});
-PlotKit.Base.map=function(fn,lst){
-if(PlotKit.Base.usingPrototype()){
-var _36=[];
-for(var x in lst){
-if(typeof (lst[x])=="function"){
-continue;
-}
-_36.push(fn(lst[x]));
-}
-return _36;
-}else{
-return MochiKit.Base.map(fn,lst);
-}
-};
-PlotKit.Base.items=function(lst){
-if(PlotKit.Base.usingPrototype()){
-var _38=[];
-for(var x in lst){
-if(typeof (lst[x])=="function"){
-continue;
-}
-_38.push([x,lst[x]]);
-}
-return _38;
-}else{
-return MochiKit.Base.items(lst);
-}
-};
-PlotKit.Base.keys=function(lst){
-if(PlotKit.Base.usingPrototype()){
-var _39=[];
-for(var x in lst){
-if(typeof (lst[x])=="function"){
-continue;
-}
-_39.push(x);
-}
-return _39;
-}else{
-return MochiKit.Base.keys(lst);
-}
-};
-PlotKit.Base.baseColors=function(){
-var _40=MochiKit.Color.Color.fromHexString;
-return [_40("#476fb2"),_40("#be2c2b"),_40("#85b730"),_40("#734a99"),_40("#26a1c5"),_40("#fb8707"),_40("#000000")];
-};
-PlotKit.Base.officeBaseStyle={"axisLineWidth":2,"axisLabelColor":Color.grayColor(),"axisLineColor":Color.whiteColor(),"padding":{top:5,bottom:10,left:30,right:30}};
-MochiKit.Base.update(PlotKit.Base,{officeBlue:function(){
-var r={"colorScheme":PlotKit.Base.palette(PlotKit.Base.baseColors()[0]),"backgroundColor":PlotKit.Base.baseColors()[0].lighterColorWithLevel(0.45)};
-MochiKit.Base.update(r,PlotKit.Base.officeBaseStyle);
-return r;
-},officeRed:function(){
-var r={"colorScheme":PlotKit.Base.palette(PlotKit.Base.baseColors()[1]),"backgroundColor":PlotKit.Base.baseColors()[1].lighterColorWithLevel(0.5)};
-MochiKit.Base.update(r,PlotKit.Base.officeBaseStyle);
-return r;
-},officeGreen:function(){
-var r={"colorScheme":PlotKit.Base.palette(PlotKit.Base.baseColors()[2]),"backgroundColor":PlotKit.Base.baseColors()[2].lighterColorWithLevel(0.5)};
-MochiKit.Base.update(r,PlotKit.Base.officeBaseStyle);
-return r;
-},officePurple:function(){
-var r={"colorScheme":PlotKit.Base.palette(PlotKit.Base.baseColors()[3]),"backgroundColor":PlotKit.Base.baseColors()[3].lighterColorWithLevel(0.5)};
-MochiKit.Base.update(r,PlotKit.Base.officeBaseStyle);
-return r;
-},officeCyan:function(){
-var r={"colorScheme":PlotKit.Base.palette(PlotKit.Base.baseColors()[4]),"backgroundColor":PlotKit.Base.baseColors()[4].lighterColorWithLevel(0.5)};
-MochiKit.Base.update(r,PlotKit.Base.officeBaseStyle);
-return r;
-},officeOrange:function(){
-var r={"colorScheme":PlotKit.Base.palette(PlotKit.Base.baseColors()[5]),"backgroundColor":PlotKit.Base.baseColors()[5].lighterColorWithLevel(0.4)};
-MochiKit.Base.update(r,PlotKit.Base.officeBaseStyle);
-return r;
-},officeBlack:function(){
-var r={"colorScheme":PlotKit.Base.palette(PlotKit.Base.baseColors()[6],0,0.6),"backgroundColor":PlotKit.Base.baseColors()[6].lighterColorWithLevel(0.9)};
-MochiKit.Base.update(r,PlotKit.Base.officeBaseStyle);
-return r;
-}});
-PlotKit.Base.EXPORT=["baseColors","collapse","colorScheme","findPosX","findPosY","officeBaseStyle","officeBlue","officeRed","officeGreen","officePurple","officeCyan","officeOrange","officeBlack","roundInterval","uniq","isFuncLike","excanvasSupported"];
-PlotKit.Base.EXPORT_OK=[];
-PlotKit.Base.__new__=function(){
-var m=MochiKit.Base;
-m.nameFunctions(this);
-this.EXPORT_TAGS={":common":this.EXPORT,":all":m.concat(this.EXPORT,this.EXPORT_OK)};
-};
-PlotKit.Base.__new__();
-MochiKit.Base._exportSymbols(this,PlotKit.Base);
-try{
-if(typeof (PlotKit.Base)=="undefined"){
-throw "";
-}
-}
-catch(e){
-throw "PlotKit.Layout depends on MochiKit.{Base,Color,DOM,Format} and PlotKit.Base";
-}
-if(typeof (PlotKit.Layout)=="undefined"){
-PlotKit.Layout={};
-}
-PlotKit.Layout.NAME="PlotKit.Layout";
-PlotKit.Layout.VERSION=PlotKit.VERSION;
-PlotKit.Layout.__repr__=function(){
-return "["+this.NAME+" "+this.VERSION+"]";
-};
-PlotKit.Layout.toString=function(){
-return this.__repr__();
-};
-PlotKit.Layout.valid_styles=["bar","line","pie","point"];
-PlotKit.Layout=function(_42,_43){
-this.options={"barWidthFillFraction":0.75,"barOrientation":"vertical","xOriginIsZero":true,"yOriginIsZero":true,"xAxis":null,"yAxis":null,"xTicks":null,"yTicks":null,"xNumberOfTicks":10,"yNumberOfTicks":5,"xTickPrecision":1,"yTickPrecision":1,"pieRadius":0.4};
-this.style=_42;
-MochiKit.Base.update(this.options,_43?_43:{});
-if(!MochiKit.Base.isUndefinedOrNull(this.options.xAxis)){
-this.minxval=this.options.xAxis[0];
-this.maxxval=this.options.xAxis[1];
-this.xscale=this.maxxval-this.minxval;
-}else{
-this.minxval=0;
-this.maxxval=null;
-this.xscale=null;
-}
-if(!MochiKit.Base.isUndefinedOrNull(this.options.yAxis)){
-this.minyval=this.options.yAxis[0];
-this.maxyval=this.options.yAxis[1];
-this.yscale=this.maxyval-this.minyval;
-}else{
-this.minyval=0;
-this.maxyval=null;
-this.yscale=null;
-}
-this.bars=new Array();
-this.points=new Array();
-this.slices=new Array();
-this.xticks=new Array();
-this.yticks=new Array();
-this.datasets=new Array();
-this.minxdelta=0;
-this.xrange=1;
-this.yrange=1;
-this.hitTestCache={x2maxy:null};
-};
-PlotKit.Layout.prototype.addDataset=function(_44,_45){
-this.datasets[_44]=_45;
-};
-PlotKit.Layout.prototype.removeDataset=function(_46,_47){
-delete this.datasets[_46];
-};
-PlotKit.Layout.prototype.addDatasetFromTable=function(_48,_49,_50,_51,_52){
-var _53=MochiKit.Base.isUndefinedOrNull;
-var _54=MochiKit.DOM.scrapeText;
-var _55=MochiKit.Format.strip;
-if(_53(_50)){
-_50=0;
-}
-if(_53(_51)){
-_51=1;
-}
-if(_53(_52)){
-_52=-1;
-}
-var _56=_49.tBodies[0].rows;
-var _57=new Array();
-var _58=new Array();
-if(!_53(_56)){
-for(var i=0;i<_56.length;i++){
-_57.push([parseFloat(_55(_54(_56[i].cells[_50]))),parseFloat(_55(_54(_56[i].cells[_51])))]);
-if(_52>=0){
-_58.push({v:parseFloat(_55(_54(_56[i].cells[_50]))),label:_55(_54(_56[i].cells[_52]))});
-}
-}
-this.addDataset(_48,_57);
-if(_52>=0){
-this.options.xTicks=_58;
-}
-return true;
-}
-return false;
-};
-PlotKit.Layout.prototype.evaluate=function(){
-this._evaluateLimits();
-this._evaluateScales();
-if(this.style=="bar"){
-if(this.options.barOrientation=="horizontal"){
-this._evaluateHorizBarCharts();
-}else{
-this._evaluateBarCharts();
-}
-this._evaluateBarTicks();
-}else{
-if(this.style=="line"){
-this._evaluateLineCharts();
-this._evaluateLineTicks();
-}else{
-if(this.style=="pie"){
-this._evaluatePieCharts();
-this._evaluatePieTicks();
-}
-}
-}
-};
-PlotKit.Layout.prototype.hitTest=function(x,y){
-var f=MochiKit.Format.twoDigitFloat;
-if((this.style=="bar")&&this.bars&&(this.bars.length>0)){
-for(var i=0;i<this.bars.length;i++){
-var bar=this.bars[i];
-if((x>=bar.x)&&(x<=bar.x+bar.w)&&(y>=bar.y)&&(y-bar.y<=bar.h)){
-return bar;
-}
-}
-}else{
-if(this.style=="line"){
-if(this.hitTestCache.x2maxy==null){
-this._regenerateHitTestCache();
-}
-var _62=x/this.xscale;
-var _63=this.hitTestCache.xvalues;
-var _64=null;
-var _65=null;
-for(var i=1;i<_63.length;i++){
-if(_63[i]>_62){
-_64=_63[i-1];
-_65=_63[i];
-break;
-}
-}
-if((_64!=null)){
-var _66=this.hitTestCache.x2maxy[_64];
-var _67=this.hitTestCache.x2maxy[_65];
-var _68=(1-y)/this.yscale;
-var _69=(_67-_66)/(_65-_64);
-var _70=_66+_69*(_62-_64);
-if(_70>=_68){
-var obj={xval:_62,yval:_68,xafter:_65,yafter:_67,xbefore:_64,ybefore:_66,yprojected:_70};
-return obj;
-}
-}
-}else{
-if(this.style=="pie"){
-var _71=Math.sqrt((y-0.5)*(y-0.5)+(x-0.5)*(x-0.5));
-if(_71>this.options.pieRadius){
-return null;
-}
-var _72=Math.atan2(y-0.5,x-0.5)-Math.PI/2;
-for(var i=0;i<this.slices.length;i++){
-var _73=this.slices[i];
-if(_73.startAngle<_72&&_73.endAngle>=_72){
-return _73;
-}
-}
-}
-}
-}
-return null;
-};
-PlotKit.Layout.prototype.rectForX=function(x){
-return null;
-};
-PlotKit.Layout.prototype.angleRangeForX=function(x){
-return null;
-};
-PlotKit.Layout.prototype._evaluateLimits=function(){
-var map=PlotKit.Base.map;
-var _75=PlotKit.Base.items;
-var _76=MochiKit.Base.itemgetter;
-var _77=PlotKit.Base.collapse;
-var _78=MochiKit.Base.listMin;
-var _79=MochiKit.Base.listMax;
-var _80=MochiKit.Base.isUndefinedOrNull;
-var all=_77(map(_76(1),_75(this.datasets)));
-if(_80(this.options.xAxis)){
-if(this.options.xOriginIsZero){
-this.minxval=0;
-}else{
-this.minxval=_78(map(parseFloat,map(_76(0),all)));
-}
-this.maxxval=_79(map(parseFloat,map(_76(0),all)));
-}else{
-this.minxval=this.options.xAxis[0];
-this.maxxval=this.options.xAxis[1];
-this.xscale=this.maxval-this.minxval;
-}
-if(_80(this.options.yAxis)){
-if(this.options.yOriginIsZero){
-this.minyval=0;
-}else{
-this.minyval=_78(map(parseFloat,map(_76(1),all)));
-}
-this.maxyval=_79(map(parseFloat,map(_76(1),all)));
-}else{
-this.minyval=this.options.yAxis[0];
-this.maxyval=this.options.yAxis[1];
-this.yscale=this.maxyval-this.minyval;
-}
-};
-PlotKit.Layout.prototype._evaluateScales=function(){
-var _82=MochiKit.Base.isUndefinedOrNull;
-this.xrange=this.maxxval-this.minxval;
-if(this.xrange==0){
-this.xscale=1;
-}else{
-this.xscale=1/this.xrange;
-}
-this.yrange=this.maxyval-this.minyval;
-if(this.yrange==0){
-this.yscale=1;
-}else{
-this.yscale=1/this.yrange;
-}
-};
-PlotKit.Layout.prototype._uniqueXValues=function(){
-var _83=PlotKit.Base.collapse;
-var map=PlotKit.Base.map;
-var _84=PlotKit.Base.uniq;
-var _85=MochiKit.Base.itemgetter;
-var _86=PlotKit.Base.items;
-var _87=map(parseFloat,map(_85(0),_83(map(_85(1),_86(this.datasets)))));
-_87.sort(MochiKit.Base.compare);
-return _84(_87);
-};
-PlotKit.Layout.prototype._evaluateBarCharts=function(){
-var _88=PlotKit.Base.items;
-var _89=_88(this.datasets).length;
-var _90=10000000;
-var _91=this._uniqueXValues();
-for(var i=1;i<_91.length;i++){
-_90=Math.min(Math.abs(_91[i]-_91[i-1]),_90);
-}
-var _92=0;
-var _93=0;
-var _94=0;
-if(_91.length==1){
-_90=1;
-this.xscale=1;
-this.minxval=_91[0];
-_92=1*this.options.barWidthFillFraction;
-_93=_92/_89;
-_94=(1-this.options.barWidthFillFraction)/2;
-}else{
-if(this.xrange==1){
-this.xscale=0.5;
-}else{
-if(this.xrange==2){
-this.xscale=1/3;
-}else{
-this.xscale=(1-_90/this.xrange)/this.xrange;
-}
-}
-_92=_90*this.xscale*this.options.barWidthFillFraction;
-_93=_92/_89;
-_94=_90*this.xscale*(1-this.options.barWidthFillFraction)/2;
-}
-this.minxdelta=_90;
-this.bars=new Array();
-var i=0;
-for(var _95 in this.datasets){
-var _96=this.datasets[_95];
-if(PlotKit.Base.isFuncLike(_96)){
-continue;
-}
-for(var j=0;j<_96.length;j++){
-var _98=_96[j];
-var _99={x:((parseFloat(_98[0])-this.minxval)*this.xscale)+(i*_93)+_94,y:1-((parseFloat(_98[1])-this.minyval)*this.yscale),w:_93,h:((parseFloat(_98[1])-this.minyval)*this.yscale),xval:parseFloat(_98[0]),yval:parseFloat(_98[1]),name:_95};
-if((_99.x>=0)&&(_99.x<=1)&&(_99.y>=0)&&(_99.y<=1)){
-this.bars.push(_99);
-}
-}
-i++;
-}
-};
-PlotKit.Layout.prototype._evaluateHorizBarCharts=function(){
-var _100=PlotKit.Base.items;
-var _101=_100(this.datasets).length;
-var _102=10000000;
-var _103=this._uniqueXValues();
-for(var i=1;i<_103.length;i++){
-_102=Math.min(Math.abs(_103[i]-_103[i-1]),_102);
-}
-var _104=0;
-var _105=0;
-var _106=0;
-if(_103.length==1){
-_102=1;
-this.xscale=1;
-this.minxval=_103[0];
-_104=1*this.options.barWidthFillFraction;
-_105=_104/_101;
-_106=(1-this.options.barWidthFillFraction)/2;
-}else{
-this.xscale=(1-_102/this.xrange)/this.xrange;
-_104=_102*this.xscale*this.options.barWidthFillFraction;
-_105=_104/_101;
-_106=_102*this.xscale*(1-this.options.barWidthFillFraction)/2;
-}
-this.minxdelta=_102;
-this.bars=new Array();
-var i=0;
-for(var _107 in this.datasets){
-var _108=this.datasets[_107];
-if(PlotKit.Base.isFuncLike(_108)){
-continue;
-}
-for(var j=0;j<_108.length;j++){
-var item=_108[j];
-var rect={y:((parseFloat(item[0])-this.minxval)*this.xscale)+(i*_105)+_106,x:0,h:_105,w:((parseFloat(item[1])-this.minyval)*this.yscale),xval:parseFloat(item[0]),yval:parseFloat(item[1]),name:_107};
-if(rect.y<=0){
-rect.y=0;
-}
-if(rect.y>=1){
-rect.y=1;
-}
-if((rect.x>=0)&&(rect.x<=1)){
-this.bars.push(rect);
-}
-}
-i++;
-}
-};
-PlotKit.Layout.prototype._evaluateLineCharts=function(){
-var _111=PlotKit.Base.items;
-var _112=_111(this.datasets).length;
-this.points=new Array();
-var i=0;
-for(var _113 in this.datasets){
-var _114=this.datasets[_113];
-if(PlotKit.Base.isFuncLike(_114)){
-continue;
-}
-_114.sort(function(a,b){
-return compare(parseFloat(a[0]),parseFloat(b[0]));
-});
-for(var j=0;j<_114.length;j++){
-var item=_114[j];
-var _117={x:((parseFloat(item[0])-this.minxval)*this.xscale),y:1-((parseFloat(item[1])-this.minyval)*this.yscale),xval:parseFloat(item[0]),yval:parseFloat(item[1]),name:_113};
-if(_117.y<=0){
-_117.y=0;
-}
-if(_117.y>=1){
-_117.y=1;
-}
-if((_117.x>=0)&&(_117.x<=1)){
-this.points.push(_117);
-}
-}
-i++;
-}
-};
-PlotKit.Layout.prototype._evaluatePieCharts=function(){
-var _118=PlotKit.Base.items;
-var sum=MochiKit.Iter.sum;
-var _120=MochiKit.Base.itemgetter;
-var _121=_118(this.datasets).length;
-var _122=_118(this.datasets)[0][1];
-var _123=sum(map(_120(1),_122));
-this.slices=new Array();
-var _124=0;
-for(var i=0;i<_122.length;i++){
-var _125=_122[i][1]/_123;
-var _126=_124*Math.PI*2;
-var _127=(_124+_125)*Math.PI*2;
-var _128={fraction:_125,xval:_122[i][0],yval:_122[i][1],startAngle:_126,endAngle:_127};
-if(_122[i][1]!=0){
-this.slices.push(_128);
-}
-_124+=_125;
-}
-};
-PlotKit.Layout.prototype._evaluateLineTicksForXAxis=function(){
-var _129=MochiKit.Base.isUndefinedOrNull;
-if(this.options.xTicks){
-this.xticks=new Array();
-var _130=function(tick){
-var _132=tick.label;
-if(_129(_132)){
-_132=tick.v.toString();
-}
-var pos=this.xscale*(tick.v-this.minxval);
-if((pos>=0)&&(pos<=1)){
-this.xticks.push([pos,_132]);
-}
-};
-MochiKit.Iter.forEach(this.options.xTicks,bind(_130,this));
-}else{
-if(this.options.xNumberOfTicks){
-var _134=this._uniqueXValues();
-var _135=this.xrange/this.options.xNumberOfTicks;
-var _136=0;
-this.xticks=new Array();
-for(var i=0;i<=_134.length;i++){
-if((_134[i]-this.minxval)>=(_136*_135)){
-var pos=this.xscale*(_134[i]-this.minxval);
-if((pos>1)||(pos<0)){
-continue;
-}
-this.xticks.push([pos,_134[i]]);
-_136++;
-}
-if(_136>this.options.xNumberOfTicks){
-break;
-}
-}
-}
-}
-};
-PlotKit.Layout.prototype._evaluateLineTicksForYAxis=function(){
-var _137=MochiKit.Base.isUndefinedOrNull;
-if(this.options.yTicks){
-this.yticks=new Array();
-var _138=function(tick){
-var _139=tick.label;
-if(_137(_139)){
-_139=tick.v.toString();
-}
-var pos=1-(this.yscale*(tick.v-this.minyval));
-if((pos>=0)&&(pos<=1)){
-this.yticks.push([pos,_139]);
-}
-};
-MochiKit.Iter.forEach(this.options.yTicks,bind(_138,this));
-}else{
-if(this.options.yNumberOfTicks){
-this.yticks=new Array();
-var _140=PlotKit.Base.roundInterval;
-var prec=this.options.yTickPrecision;
-var _142=_140(this.yrange,this.options.yNumberOfTicks,prec);
-for(var i=0;i<=this.options.yNumberOfTicks;i++){
-var yval=this.minyval+(i*_142);
-var pos=1-((yval-this.minyval)*this.yscale);
-if((pos>1)||(pos<0)){
-continue;
-}
-this.yticks.push([pos,MochiKit.Format.roundToFixed(yval,prec)]);
-}
-}
-}
-};
-PlotKit.Layout.prototype._evaluateLineTicks=function(){
-this._evaluateLineTicksForXAxis();
-this._evaluateLineTicksForYAxis();
-};
-PlotKit.Layout.prototype._evaluateBarTicks=function(){
-this._evaluateLineTicks();
-var _144=function(tick){
-return [tick[0]+(this.minxdelta*this.xscale)/2,tick[1]];
-};
-this.xticks=MochiKit.Base.map(bind(_144,this),this.xticks);
-if(this.options.barOrientation=="horizontal"){
-var _145=this.xticks;
-this.xticks=this.yticks;
-this.yticks=_145;
-var _146=function(tick){
-return [1-tick[0],tick[1]];
-};
-this.xticks=MochiKit.Base.map(_146,this.xticks);
-}
-};
-PlotKit.Layout.prototype._evaluatePieTicks=function(){
-var _147=MochiKit.Base.isUndefinedOrNull;
-var _148=MochiKit.Format.numberFormatter("#%");
-this.xticks=new Array();
-if(this.options.xTicks){
-var _149=new Array();
-for(var i=0;i<this.slices.length;i++){
-_149[this.slices[i].xval]=this.slices[i];
-}
-for(var i=0;i<this.options.xTicks.length;i++){
-var tick=this.options.xTicks[i];
-var _150=_149[tick.v];
-var _151=tick.label;
-if(_150){
-if(_147(_151)){
-_151=tick.v.toString();
-}
-_151+=" ("+_148(_150.fraction)+")";
-this.xticks.push([tick.v,_151]);
-}
-}
-}else{
-for(var i=0;i<this.slices.length;i++){
-var _150=this.slices[i];
-var _151=_150.xval+" ("+_148(_150.fraction)+")";
-this.xticks.push([_150.xval,_151]);
-}
-}
-};
-PlotKit.Layout.prototype._regenerateHitTestCache=function(){
-this.hitTestCache.xvalues=this._uniqueXValues();
-this.hitTestCache.xlookup=new Array();
-this.hitTestCache.x2maxy=new Array();
-var _152=MochiKit.Base.listMax;
-var _153=MochiKit.Base.itemgetter;
-var map=MochiKit.Base.map;
-var _154=keys(this.datasets);
-for(var i=0;i<_154.length;i++){
-var _155=this.datasets[_154[i]];
-for(var j=0;j<_155.length;j++){
-var xval=_155[j][0];
-var yval=_155[j][1];
-if(this.hitTestCache.xlookup[xval]){
-this.hitTestCache.xlookup[xval].push([yval,_154[i]]);
-}else{
-this.hitTestCache.xlookup[xval]=[[yval,_154[i]]];
-}
-}
-}
-for(var x in this.hitTestCache.xlookup){
-var _157=this.hitTestCache.xlookup[x];
-this.hitTestCache.x2maxy[x]=_152(map(_153(0),_157));
-}
-};
-PlotKit.LayoutModule={};
-PlotKit.LayoutModule.Layout=PlotKit.Layout;
-PlotKit.LayoutModule.EXPORT=["Layout"];
-PlotKit.LayoutModule.EXPORT_OK=[];
-PlotKit.LayoutModule.__new__=function(){
-var m=MochiKit.Base;
-m.nameFunctions(this);
-this.EXPORT_TAGS={":common":this.EXPORT,":all":m.concat(this.EXPORT,this.EXPORT_OK)};
-};
-PlotKit.LayoutModule.__new__();
-MochiKit.Base._exportSymbols(this,PlotKit.LayoutModule);
-try{
-if((typeof (PlotKit.Base)=="undefined")||(typeof (PlotKit.Layout)=="undefined")){
-throw "";
-}
-}
-catch(e){
-throw "PlotKit.Layout depends on MochiKit.{Base,Color,DOM,Format} and PlotKit.{Base,Layout}";
-}
-if(typeof (PlotKit.CanvasRenderer)=="undefined"){
-PlotKit.CanvasRenderer={};
-}
-PlotKit.CanvasRenderer.NAME="PlotKit.CanvasRenderer";
-PlotKit.CanvasRenderer.VERSION=PlotKit.VERSION;
-PlotKit.CanvasRenderer.__repr__=function(){
-return "["+this.NAME+" "+this.VERSION+"]";
-};
-PlotKit.CanvasRenderer.toString=function(){
-return this.__repr__();
-};
-PlotKit.CanvasRenderer=function(_158,_159,_160){
-if(arguments.length>0){
-this.__init__(_158,_159,_160);
-}
-};
-PlotKit.CanvasRenderer.prototype.__init__=function(_161,_162,_163){
-var _164=MochiKit.Base.isUndefinedOrNull;
-var _165=MochiKit.Color.Color;
-this.options={"drawBackground":true,"backgroundColor":_165.whiteColor(),"padding":{left:30,right:30,top:5,bottom:10},"colorScheme":PlotKit.Base.palette(PlotKit.Base.baseColors()[0]),"strokeColor":_165.whiteColor(),"strokeColorTransform":"asStrokeColor","strokeWidth":0.5,"shouldFill":true,"shouldStroke":true,"drawXAxis":true,"drawYAxis":true,"axisLineColor":_165.blackColor(),"axisLineWidth":0.5,"axisTickSize":3,"axisLabelColor":_165.blackColor(),"axisLabelFont":"Arial","axisLabelFontSize":9,"axisLabelWidth":50,"pieRadius":0.4,"enableEvents":true};
-MochiKit.Base.update(this.options,_163?_163:{});
-this.layout=_162;
-this.element=MochiKit.DOM.getElement(_161);
-this.container=this.element.parentNode;
-this.isIE=PlotKit.Base.excanvasSupported();
-if(this.isIE&&!_164(G_vmlCanvasManager)){
-this.IEDelay=0.5;
-this.maxTries=5;
-this.renderDelay=null;
-this.clearDelay=null;
-this.element=G_vmlCanvasManager.initElement(this.element);
-}
-this.height=this.element.height;
-this.width=this.element.width;
-if(_164(this.element)){
-throw "CanvasRenderer() - passed canvas is not found";
-}
-if(!this.isIE&&!(PlotKit.CanvasRenderer.isSupported(this.element))){
-throw "CanvasRenderer() - Canvas is not supported.";
-}
-if(_164(this.container)||(this.container.nodeName.toLowerCase()!="div")){
-throw "CanvasRenderer() - <canvas> needs to be enclosed in <div>";
-}
-this.xlabels=new Array();
-this.ylabels=new Array();
-this.isFirstRender=true;
-this.area={x:this.options.padding.left,y:this.options.padding.top,w:this.width-this.options.padding.left-this.options.padding.right,h:this.height-this.options.padding.top-this.options.padding.bottom};
-MochiKit.DOM.updateNodeAttributes(this.container,{"style":{"position":"relative","width":this.width+"px"}});
-};
-PlotKit.CanvasRenderer.prototype.render=function(){
-if(this.isIE){
-try{
-if(this.renderDelay){
-this.renderDelay.cancel();
-this.renderDelay=null;
-}
-var _166=this.element.getContext("2d");
-}
-catch(e){
-this.isFirstRender=false;
-if(this.maxTries-->0){
-this.renderDelay=MochiKit.Async.wait(this.IEDelay);
-this.renderDelay.addCallback(bind(this.render,this));
-}
-return;
-}
-}
-if(this.options.drawBackground){
-this._renderBackground();
-}
-if(this.layout.style=="bar"){
-this._renderBarChart();
-this._renderBarAxis();
-}else{
-if(this.layout.style=="pie"){
-this._renderPieChart();
-this._renderPieAxis();
-}else{
-if(this.layout.style=="line"){
-this._renderLineChart();
-this._renderLineAxis();
-}
-}
-}
-};
-PlotKit.CanvasRenderer.prototype._renderBarChartWrap=function(data,_168){
-var _169=this.element.getContext("2d");
-var _170=this.options.colorScheme.length;
-var _171=this.options.colorScheme;
-var _172=MochiKit.Base.keys(this.layout.datasets);
-var _173=_172.length;
-for(var i=0;i<_173;i++){
-var _174=_172[i];
-var _175=_171[i%_170];
-_169.save();
-_169.fillStyle=_175.toRGBString();
-if(this.options.strokeColor){
-_169.strokeStyle=this.options.strokeColor.toRGBString();
-}else{
-if(this.options.strokeColorTransform){
-_169.strokeStyle=_175[this.options.strokeColorTransform]().toRGBString();
-}
-}
-_169.lineWidth=this.options.strokeWidth;
-var _176=function(obj){
-if(obj.name==_174){
-_168(_169,obj);
-}
-};
-MochiKit.Iter.forEach(data,bind(_176,this));
-_169.restore();
-}
-};
-PlotKit.CanvasRenderer.prototype._renderBarChart=function(){
-var bind=MochiKit.Base.bind;
-var _178=function(_179,bar){
-var x=this.area.w*bar.x+this.area.x;
-var y=this.area.h*bar.y+this.area.y;
-var w=this.area.w*bar.w;
-var h=this.area.h*bar.h;
-if((w<1)||(h<1)){
-return;
-}
-if(this.options.shouldFill){
-_179.fillRect(x,y,w,h);
-}
-if(this.options.shouldStroke){
-_179.strokeRect(x,y,w,h);
-}
-};
-this._renderBarChartWrap(this.layout.bars,bind(_178,this));
-};
-PlotKit.CanvasRenderer.prototype._renderLineChart=function(){
-var _182=this.element.getContext("2d");
-var _183=this.options.colorScheme.length;
-var _184=this.options.colorScheme;
-var _185=MochiKit.Base.keys(this.layout.datasets);
-var _186=_185.length;
-var bind=MochiKit.Base.bind;
-var _187=MochiKit.Base.partial;
-for(var i=0;i<_186;i++){
-var _188=_185[i];
-var _189=_184[i%_183];
-var _190=this.options.strokeColorTransform;
-_182.save();
-_182.fillStyle=_189.toRGBString();
-if(this.options.strokeColor){
-_182.strokeStyle=this.options.strokeColor.toRGBString();
-}else{
-if(this.options.strokeColorTransform){
-_182.strokeStyle=_189[_190]().toRGBString();
-}
-}
-_182.lineWidth=this.options.strokeWidth;
-var _191=function(ctx){
-ctx.beginPath();
-ctx.moveTo(this.area.x,this.area.y+this.area.h);
-var _193=function(ctx_,_195){
-if(_195.name==_188){
-ctx_.lineTo(this.area.w*_195.x+this.area.x,this.area.h*_195.y+this.area.y);
-}
-};
-MochiKit.Iter.forEach(this.layout.points,_187(_193,ctx),this);
-ctx.lineTo(this.area.w+this.area.x,this.area.h+this.area.y);
-ctx.lineTo(this.area.x,this.area.y+this.area.h);
-ctx.closePath();
-};
-if(this.options.shouldFill){
-bind(_191,this)(_182);
-_182.fill();
-}
-if(this.options.shouldStroke){
-bind(_191,this)(_182);
-_182.stroke();
-}
-_182.restore();
-}
-};
-PlotKit.CanvasRenderer.prototype._renderPieChart=function(){
-var _196=this.element.getContext("2d");
-var _197=this.options.colorScheme.length;
-var _198=this.layout.slices;
-var _199=this.area.x+this.area.w*0.5;
-var _200=this.area.y+this.area.h*0.5;
-var _201=Math.min(this.area.w*this.options.pieRadius,this.area.h*this.options.pieRadius);
-if(this.isIE){
-_199=parseInt(_199);
-_200=parseInt(_200);
-_201=parseInt(_201);
-}
-for(var i=0;i<_198.length;i++){
-var _202=this.options.colorScheme[i%_197];
-_196.save();
-_196.fillStyle=_202.toRGBString();
-var _203=function(){
-_196.beginPath();
-_196.moveTo(_199,_200);
-_196.arc(_199,_200,_201,_198[i].startAngle-Math.PI/2,_198[i].endAngle-Math.PI/2,false);
-_196.lineTo(_199,_200);
-_196.closePath();
-};
-if(Math.abs(_198[i].startAngle-_198[i].endAngle)>0.001){
-if(this.options.shouldFill){
-_203();
-_196.fill();
-}
-if(this.options.shouldStroke){
-_203();
-_196.lineWidth=this.options.strokeWidth;
-if(this.options.strokeColor){
-_196.strokeStyle=this.options.strokeColor.toRGBString();
-}else{
-if(this.options.strokeColorTransform){
-_196.strokeStyle=_202[this.options.strokeColorTransform]().toRGBString();
-}
-}
-_196.stroke();
-}
-}
-_196.restore();
-}
-};
-PlotKit.CanvasRenderer.prototype._renderBarAxis=function(){
-this._renderAxis();
-};
-PlotKit.CanvasRenderer.prototype._renderLineAxis=function(){
-this._renderAxis();
-};
-PlotKit.CanvasRenderer.prototype._renderAxis=function(){
-if(!this.options.drawXAxis&&!this.options.drawYAxis){
-return;
-}
-var _204=this.element.getContext("2d");
-var _205={"style":{"position":"absolute","fontSize":this.options.axisLabelFontSize+"px","zIndex":10,"color":this.options.axisLabelColor.toRGBString(),"width":this.options.axisLabelWidth+"px","overflow":"hidden"}};
-_204.save();
-_204.strokeStyle=this.options.axisLineColor.toRGBString();
-_204.lineWidth=this.options.axisLineWidth;
-if(this.options.drawYAxis){
-if(this.layout.yticks){
-var _206=function(tick){
-if(typeof (tick)=="function"){
-return;
-}
-var x=this.area.x;
-var y=this.area.y+tick[0]*this.area.h;
-_204.beginPath();
-_204.moveTo(x,y);
-_204.lineTo(x-this.options.axisTickSize,y);
-_204.closePath();
-_204.stroke();
-var _207=DIV(_205,tick[1]);
-_207.style.top=(y-this.options.axisLabelFontSize)+"px";
-_207.style.left=(x-this.options.padding.left-this.options.axisTickSize)+"px";
-_207.style.textAlign="right";
-_207.style.width=(this.options.padding.left-this.options.axisTickSize*2)+"px";
-MochiKit.DOM.appendChildNodes(this.container,_207);
-this.ylabels.push(_207);
-};
-MochiKit.Iter.forEach(this.layout.yticks,bind(_206,this));
-}
-_204.beginPath();
-_204.moveTo(this.area.x,this.area.y);
-_204.lineTo(this.area.x,this.area.y+this.area.h);
-_204.closePath();
-_204.stroke();
-}
-if(this.options.drawXAxis){
-if(this.layout.xticks){
-var _206=function(tick){
-if(typeof (dataset)=="function"){
-return;
-}
-var x=this.area.x+tick[0]*this.area.w;
-var y=this.area.y+this.area.h;
-_204.beginPath();
-_204.moveTo(x,y);
-_204.lineTo(x,y+this.options.axisTickSize);
-_204.closePath();
-_204.stroke();
-var _208=DIV(_205,tick[1]);
-_208.style.top=(y+this.options.axisTickSize)+"px";
-_208.style.left=(x-this.options.axisLabelWidth/2)+"px";
-_208.style.textAlign="center";
-_208.style.width=this.options.axisLabelWidth+"px";
-MochiKit.DOM.appendChildNodes(this.container,_208);
-this.xlabels.push(_208);
-};
-MochiKit.Iter.forEach(this.layout.xticks,bind(_206,this));
-}
-_204.beginPath();
-_204.moveTo(this.area.x,this.area.y+this.area.h);
-_204.lineTo(this.area.x+this.area.w,this.area.y+this.area.h);
-_204.closePath();
-_204.stroke();
-}
-_204.restore();
-};
-PlotKit.CanvasRenderer.prototype._renderPieAxis=function(){
-if(!this.options.drawXAxis){
-return;
-}
-if(this.layout.xticks){
-var _209=new Array();
-for(var i=0;i<this.layout.slices.length;i++){
-_209[this.layout.slices[i].xval]=this.layout.slices[i];
-}
-var _210=this.area.x+this.area.w*0.5;
-var _211=this.area.y+this.area.h*0.5;
-var _212=Math.min(this.area.w*this.options.pieRadius,this.area.h*this.options.pieRadius);
-var _213=this.options.axisLabelWidth;
-for(var i=0;i<this.layout.xticks.length;i++){
-var _214=_209[this.layout.xticks[i][0]];
-if(MochiKit.Base.isUndefinedOrNull(_214)){
-continue;
-}
-var _215=(_214.startAngle+_214.endAngle)/2;
-var _216=_215;
-if(_216>Math.PI*2){
-_216=_216-Math.PI*2;
-}else{
-if(_216<0){
-_216=_216+Math.PI*2;
-}
-}
-var _217=_210+Math.sin(_216)*(_212+10);
-var _218=_211-Math.cos(_216)*(_212+10);
-var _219={"position":"absolute","zIndex":11,"width":_213+"px","fontSize":this.options.axisLabelFontSize+"px","overflow":"hidden","color":this.options.axisLabelColor.toHexString()};
-if(_216<=Math.PI*0.5){
-_219["textAlign"]="left";
-_219["verticalAlign"]="top";
-_219["left"]=_217+"px";
-_219["top"]=(_218-this.options.axisLabelFontSize)+"px";
-}else{
-if((_216>Math.PI*0.5)&&(_216<=Math.PI)){
-_219["textAlign"]="left";
-_219["verticalAlign"]="bottom";
-_219["left"]=_217+"px";
-_219["top"]=_218+"px";
-}else{
-if((_216>Math.PI)&&(_216<=Math.PI*1.5)){
-_219["textAlign"]="right";
-_219["verticalAlign"]="bottom";
-_219["left"]=(_217-_213)+"px";
-_219["top"]=_218+"px";
-}else{
-_219["textAlign"]="right";
-_219["verticalAlign"]="bottom";
-_219["left"]=(_217-_213)+"px";
-_219["top"]=(_218-this.options.axisLabelFontSize)+"px";
-}
-}
-}
-var _220=DIV({"style":_219},this.layout.xticks[i][1]);
-this.xlabels.push(_220);
-MochiKit.DOM.appendChildNodes(this.container,_220);
-}
-}
-};
-PlotKit.CanvasRenderer.prototype._renderBackground=function(){
-var _221=this.element.getContext("2d");
-_221.save();
-_221.fillStyle=this.options.backgroundColor.toRGBString();
-_221.fillRect(0,0,this.width,this.height);
-_221.restore();
-};
-PlotKit.CanvasRenderer.prototype.clear=function(){
-if(this.isIE){
-try{
-if(this.clearDelay){
-this.clearDelay.cancel();
-this.clearDelay=null;
-}
-var _222=this.element.getContext("2d");
-}
-catch(e){
-this.isFirstRender=false;
-this.clearDelay=MochiKit.Async.wait(this.IEDelay);
-this.clearDelay.addCallback(bind(this.clear,this));
-return;
-}
-}
-var _222=this.element.getContext("2d");
-_222.clearRect(0,0,this.width,this.height);
-MochiKit.Iter.forEach(this.xlabels,MochiKit.DOM.removeElement);
-MochiKit.Iter.forEach(this.ylabels,MochiKit.DOM.removeElement);
-this.xlabels=new Array();
-this.ylabels=new Array();
-};
-PlotKit.CanvasRenderer.prototype._initialiseEvents=function(){
-var _223=MochiKit.Signal.connect;
-var bind=MochiKit.Base.bind;
-_223(this.element,"onclick",bind(this.onclick,this));
-};
-PlotKit.CanvasRenderer.prototype._resolveObject=function(e){
-var x=(e.mouse().page.x-PlotKit.Base.findPosX(this.element)-this.area.x)/this.area.w;
-var y=(e.mouse().page.y-PlotKit.Base.findPosY(this.element)-this.area.y)/this.area.h;
-var _225=this.layout.hitTest(x,y);
-if(_225){
-return _225;
-}
-return null;
-};
-PlotKit.CanvasRenderer.prototype._createEventObject=function(_226,e){
-if(_226==null){
-return null;
-}
-e.chart=_226;
-return e;
-};
-PlotKit.CanvasRenderer.prototype.onclick=function(e){
-var _227=this._resolveObject(e);
-var _228=this._createEventObject(_227,e);
-if(_228!=null){
-MochiKit.Signal.signal(this,"onclick",_228);
-}
-};
-PlotKit.CanvasRenderer.prototype.onmouseover=function(e){
-var _229=this._resolveObject(e);
-var _230=this._createEventObject(_229,e);
-if(_230!=null){
-signal(this,"onmouseover",_230);
-}
-};
-PlotKit.CanvasRenderer.prototype.onmouseout=function(e){
-var _231=this._resolveObject(e);
-var _232=this._createEventObject(_231,e);
-if(_232==null){
-signal(this,"onmouseout",e);
-}else{
-signal(this,"onmouseout",_232);
-}
-};
-PlotKit.CanvasRenderer.prototype.onmousemove=function(e){
-var _233=this._resolveObject(e);
-var _234=this._createEventObject(_233,e);
-if((_233==null)&&(this.event_isinside==null)){
-return;
-}
-if((_233!=null)&&(this.event_isinside==null)){
-signal(this,"onmouseover",_234);
-}
-if((_233==null)&&(this.event_isinside!=null)){
-signal(this,"onmouseout",_234);
-}
-if((_233!=null)&&(this.event_isinside!=null)){
-signal(this,"onmousemove",_234);
-}
-this.event_isinside=_233;
-};
-PlotKit.CanvasRenderer.isSupported=function(_235){
-var _236=null;
-try{
-if(MochiKit.Base.isUndefinedOrNull(_235)){
-_236=MochiKit.DOM.CANVAS({});
-}else{
-_236=MochiKit.DOM.getElement(_235);
-}
-var _237=_236.getContext("2d");
-}
-catch(e){
-var ie=navigator.appVersion.match(/MSIE (\d\.\d)/);
-var _239=(navigator.userAgent.toLowerCase().indexOf("opera")!=-1);
-if((!ie)||(ie[1]<6)||(_239)){
-return false;
-}
-return true;
-}
-return true;
-};
-PlotKit.Canvas={};
-PlotKit.Canvas.CanvasRenderer=PlotKit.CanvasRenderer;
-PlotKit.Canvas.EXPORT=["CanvasRenderer"];
-PlotKit.Canvas.EXPORT_OK=["CanvasRenderer"];
-PlotKit.Canvas.__new__=function(){
-var m=MochiKit.Base;
-m.nameFunctions(this);
-this.EXPORT_TAGS={":common":this.EXPORT,":all":m.concat(this.EXPORT,this.EXPORT_OK)};
-};
-PlotKit.Canvas.__new__();
-MochiKit.Base._exportSymbols(this,PlotKit.Canvas);
-try{
-if(typeof (PlotKit.Layout)=="undefined"){
-throw "";
-}
-}
-catch(e){
-throw "PlotKit depends on MochiKit.{Base,Color,DOM,Format} and PlotKit.Layout";
-}
-PlotKit.SVGRenderer=function(_240,_241,_242){
-if(arguments.length>0){
-this.__init__(_240,_241,_242);
-}
-};
-PlotKit.SVGRenderer.NAME="PlotKit.SVGRenderer";
-PlotKit.SVGRenderer.VERSION=PlotKit.VERSION;
-PlotKit.SVGRenderer.__repr__=function(){
-return "["+this.NAME+" "+this.VERSION+"]";
-};
-PlotKit.SVGRenderer.toString=function(){
-return this.__repr__();
-};
-PlotKit.SVGRenderer.SVGNS="http://www.w3.org/2000/svg";
-PlotKit.SVGRenderer.prototype.__init__=function(_243,_244,_245){
-var _246=MochiKit.Base.isUndefinedOrNull;
-this.options={"drawBackground":true,"backgroundColor":Color.whiteColor(),"padding":{left:30,right:30,top:5,bottom:10},"colorScheme":PlotKit.Base.palette(PlotKit.Base.baseColors()[1]),"strokeColor":Color.whiteColor(),"strokeColorTransform":"asStrokeColor","strokeWidth":0.5,"shouldFill":true,"shouldStroke":true,"drawXAxis":true,"drawYAxis":true,"axisLineColor":Color.blackColor(),"axisLineWidth":0.5,"axisTickSize":3,"axisLabelColor":Color.blackColor(),"axisLabelFont":"Arial","axisLabelFontSize":9,"axisLabelWidth":50,"axisLabelUseDiv":true,"pieRadius":0.4,"enableEvents":true};
-MochiKit.Base.update(this.options,_245?_245:{});
-this.layout=_244;
-this.element=MochiKit.DOM.getElement(_243);
-this.container=this.element.parentNode;
-this.height=parseInt(this.element.getAttribute("height"));
-this.width=parseInt(this.element.getAttribute("width"));
-this.document=document;
-this.root=this.element;
-try{
-this.document=this.element.getSVGDocument();
-this.root=_246(this.document.documentElement)?this.element:this.document.documentElement;
-}
-catch(e){
-}
-this.element.style.zIndex=1;
-if(_246(this.element)){
-throw "SVGRenderer() - passed SVG object is not found";
-}
-if(_246(this.container)||this.container.nodeName.toLowerCase()!="div"){
-throw "SVGRenderer() - No DIV's around the SVG.";
-}
-this.xlabels=new Array();
-this.ylabels=new Array();
-this.defs=this.createSVGElement("defs");
-this.area={x:this.options.padding.left,y:this.options.padding.top,w:this.width-this.options.padding.left-this.options.padding.right,h:this.height-this.options.padding.top-this.options.padding.bottom};
-MochiKit.DOM.updateNodeAttributes(this.container,{"style":{"position":"relative","width":this.width+"px"}});
-};
-PlotKit.SVGRenderer.prototype.render=function(){
-if(this.options.drawBackground){
-this._renderBackground();
-}
-if(this.layout.style=="bar"){
-this._renderBarChart();
-this._renderBarAxis();
-}else{
-if(this.layout.style=="pie"){
-this._renderPieChart();
-this._renderPieAxis();
-}else{
-if(this.layout.style=="line"){
-this._renderLineChart();
-this._renderLineAxis();
-}
-}
-}
-};
-PlotKit.SVGRenderer.prototype._renderBarOrLine=function(data,_247,_248,_249){
-var _250=this.options.colorScheme.length;
-var _251=this.options.colorScheme;
-var _252=MochiKit.Base.keys(this.layout.datasets);
-var _253=_252.length;
-for(var i=0;i<_253;i++){
-var _254=_252[i];
-var _255=new Array();
-var _256=_251[i%_250];
-if(this.options.shouldFill){
-_255["fill"]=_256.toRGBString();
-}else{
-_255["fill"]="none";
-}
-if(this.options.shouldStroke&&(this.options.strokeColor||this.options.strokeColorTransform)){
-if(this.options.strokeColor){
-_255["stroke"]=this.options.strokeColor.toRGBString();
-}else{
-if(this.options.strokeColorTransform){
-_255["stroke"]=_256[this.options.strokeColorTransform]().toRGBString();
-}
-}
-_255["strokeWidth"]=this.options.strokeWidth;
-}
-if(_248){
-_248(_255);
-}
-var _257=function(obj){
-if(obj.name==_254){
-_247(_255,obj);
-}
-};
-MochiKit.Iter.forEach(data,bind(_257,this));
-if(_249){
-_249(_255);
-}
-}
-};
-PlotKit.SVGRenderer.prototype._renderBarChart=function(){
-var bind=MochiKit.Base.bind;
-var _258=function(_259,bar){
-var x=this.area.w*bar.x+this.area.x;
-var y=this.area.h*bar.y+this.area.y;
-var w=this.area.w*bar.w;
-var h=this.area.h*bar.h;
-this._drawRect(x,y,w,h,_259);
-};
-this._renderBarOrLine(this.layout.bars,bind(_258,this));
-};
-PlotKit.SVGRenderer.prototype._renderLineChart=function(){
-var bind=MochiKit.Base.bind;
-var _260=function(_261,_262){
-this._tempPointsBuffer+=(this.area.w*_262.x+this.area.x)+","+(this.area.h*_262.y+this.area.y)+" ";
-};
-var _263=function(_264){
-this._tempPointsBuffer="";
-this._tempPointsBuffer+=(this.area.x)+","+(this.area.y+this.area.h)+" ";
-};
-var _265=function(_266){
-this._tempPointsBuffer+=(this.area.w+this.area.x)+","+(this.area.h+this.area.y);
-_266["points"]=this._tempPointsBuffer;
-var elem=this.createSVGElement("polygon",_266);
-this.root.appendChild(elem);
-};
-this._renderBarOrLine(this.layout.points,bind(_260,this),bind(_263,this),bind(_265,this));
-};
-PlotKit.SVGRenderer.prototype._renderPieChart=function(){
-var _268=this.options.colorScheme.length;
-var _269=this.layout.slices;
-var _270=this.area.x+this.area.w*0.5;
-var _271=this.area.y+this.area.h*0.5;
-var _272=Math.min(this.area.w*this.options.pieRadius,this.area.h*this.options.pieRadius);
-if(_269.length==1&&(Math.abs(_269[0].startAngle)-Math.abs(_269[0].endAngle)<0.1)){
-var _273={"cx":_270,"cy":_271,"r":_272};
-var _274=this.options.colorScheme[0];
-if(this.options.shouldFill){
-_273["fill"]=_274.toRGBString();
-}else{
-_273["fill"]="none";
-}
-if(this.options.shouldStroke&&(this.options.strokeColor||this.options.strokeColorTransform)){
-if(this.options.strokeColor){
-_273["stroke"]=this.options.strokeColor.toRGBString();
-}else{
-if(this.options.strokeColorTransform){
-_273["stroke"]=_274[this.options.strokeColorTransform]().toRGBString();
-}
-}
-_273["style"]="stroke-width: "+this.options.strokeWidth;
-}
-this.root.appendChild(this.createSVGElement("circle",_273));
-return;
-}
-for(var i=0;i<_269.length;i++){
-var _273=new Array();
-var _274=this.options.colorScheme[i%_268];
-if(this.options.shouldFill){
-_273["fill"]=_274.toRGBString();
-}else{
-_273["fill"]="none";
-}
-if(this.options.shouldStroke&&(this.options.strokeColor||this.options.strokeColorTransform)){
-if(this.options.strokeColor){
-_273["stroke"]=this.options.strokeColor.toRGBString();
-}else{
-if(this.options.strokeColorTransform){
-_273["stroke"]=_274[this.options.strokeColorTransform]().toRGBString();
-}
-}
-_273["style"]="stroke-width:"+this.options.strokeWidth;
-}
-var _275=0;
-if(Math.abs(_269[i].endAngle-_269[i].startAngle)>Math.PI){
-_275=1;
-}
-var x1=Math.cos(_269[i].startAngle-Math.PI/2)*_272;
-var y1=Math.sin(_269[i].startAngle-Math.PI/2)*_272;
-var x2=Math.cos(_269[i].endAngle-Math.PI/2)*_272;
-var y2=Math.sin(_269[i].endAngle-Math.PI/2)*_272;
-var rx=x2-x1;
-var ry=y2-y1;
-var _282="M"+_270+","+_271+" ";
-_282+="l"+x1+","+y1+" ";
-_282+="a"+_272+","+_272+" 0 "+_275+",1 "+rx+","+ry+" z";
-_273["d"]=_282;
-var elem=this.createSVGElement("path",_273);
-this.root.appendChild(elem);
-}
-};
-PlotKit.SVGRenderer.prototype._renderBarAxis=function(){
-this._renderAxis();
-};
-PlotKit.SVGRenderer.prototype._renderLineAxis=function(){
-this._renderAxis();
-};
-PlotKit.SVGRenderer.prototype._renderAxis=function(){
-if(!this.options.drawXAxis&&!this.options.drawYAxis){
-return;
-}
-var _283={"style":{"position":"absolute","textAlign":"center","fontSize":this.options.axisLabelFontSize+"px","zIndex":10,"color":this.options.axisLabelColor.toRGBString(),"width":this.options.axisLabelWidth+"px","overflow":"hidden"}};
-var _284={"stroke":this.options.axisLineColor.toRGBString(),"strokeWidth":this.options.axisLineWidth};
-if(this.options.drawYAxis){
-if(this.layout.yticks){
-var _285=function(tick){
-var x=this.area.x;
-var y=this.area.y+tick[0]*this.area.h;
-this._drawLine(x,y,x-3,y,_284);
-if(this.options.axisLabelUseDiv){
-var _286=DIV(_283,tick[1]);
-_286.style.top=(y-this.options.axisLabelFontSize)+"px";
-_286.style.left=(x-this.options.padding.left+this.options.axisTickSize)+"px";
-_286.style.textAlign="left";
-_286.style.width=(this.options.padding.left-3)+"px";
-MochiKit.DOM.appendChildNodes(this.container,_286);
-this.ylabels.push(_286);
-}else{
-var _287={y:y+3,x:(x-this.options.padding.left+3),width:(this.options.padding.left-this.options.axisTickSize)+"px",height:(this.options.axisLabelFontSize+3)+"px",fontFamily:"Arial",fontSize:this.options.axisLabelFontSize+"px",fill:this.options.axisLabelColor.toRGBString()};
-var _286=this.createSVGElement("text",_287);
-_286.appendChild(this.document.createTextNode(tick[1]));
-this.root.appendChild(_286);
-}
-};
-MochiKit.Iter.forEach(this.layout.yticks,bind(_285,this));
-}
-this._drawLine(this.area.x,this.area.y,this.area.x,this.area.y+this.area.h,_284);
-}
-if(this.options.drawXAxis){
-if(this.layout.xticks){
-var _285=function(tick){
-var x=this.area.x+tick[0]*this.area.w;
-var y=this.area.y+this.area.h;
-this._drawLine(x,y,x,y+this.options.axisTickSize,_284);
-if(this.options.axisLabelUseDiv){
-var _288=DIV(_283,tick[1]);
-_288.style.top=(y+this.options.axisTickSize)+"px";
-_288.style.left=(x-this.options.axisLabelWidth/2)+"px";
-_288.style.textAlign="center";
-_288.style.width=this.options.axisLabelWidth+"px";
-MochiKit.DOM.appendChildNodes(this.container,_288);
-this.xlabels.push(_288);
-}else{
-var _289={y:(y+this.options.axisTickSize+this.options.axisLabelFontSize),x:x-3,width:this.options.axisLabelWidth+"px",height:(this.options.axisLabelFontSize+3)+"px",fontFamily:"Arial",fontSize:this.options.axisLabelFontSize+"px",fill:this.options.axisLabelColor.toRGBString(),textAnchor:"middle"};
-var _288=this.createSVGElement("text",_289);
-_288.appendChild(this.document.createTextNode(tick[1]));
-this.root.appendChild(_288);
-}
-};
-MochiKit.Iter.forEach(this.layout.xticks,bind(_285,this));
-}
-this._drawLine(this.area.x,this.area.y+this.area.h,this.area.x+this.area.w,this.area.y+this.area.h,_284);
-}
-};
-PlotKit.SVGRenderer.prototype._renderPieAxis=function(){
-if(this.layout.xticks){
-var _290=new Array();
-for(var i=0;i<this.layout.slices.length;i++){
-_290[this.layout.slices[i].xval]=this.layout.slices[i];
-}
-var _291=this.area.x+this.area.w*0.5;
-var _292=this.area.y+this.area.h*0.5;
-var _293=Math.min(this.area.w*this.options.pieRadius+10,this.area.h*this.options.pieRadius+10);
-var _294=this.options.axisLabelWidth;
-for(var i=0;i<this.layout.xticks.length;i++){
-var _295=_290[this.layout.xticks[i][0]];
-if(MochiKit.Base.isUndefinedOrNull(_295)){
-continue;
-}
-var _296=(_295.startAngle+_295.endAngle)/2;
-var _297=_296;
-if(_297>Math.PI*2){
-_297=_297-Math.PI*2;
-}else{
-if(_297<0){
-_297=_297+Math.PI*2;
-}
-}
-var _298=_291+Math.sin(_297)*(_293+10);
-var _299=_292-Math.cos(_297)*(_293+10);
-var _300={"position":"absolute","zIndex":11,"width":_294+"px","fontSize":this.options.axisLabelFontSize+"px","overflow":"hidden","color":this.options.axisLabelColor.toHexString()};
-var _301={"width":_294+"px","fontSize":this.options.axisLabelFontSize+"px","height":(this.options.axisLabelFontSize+3)+"px","fill":this.options.axisLabelColor.toRGBString()};
-if(_297<=Math.PI*0.5){
-MochiKit.Base.update(_300,{"textAlign":"left","verticalAlign":"top","left":_298+"px","top":(_299-this.options.axisLabelFontSize)+"px"});
-MochiKit.Base.update(_301,{"x":_298,"y":(_299-this.options.axisLabelFontSize),"textAnchor":"left"});
-}else{
-if((_297>Math.PI*0.5)&&(_297<=Math.PI)){
-MochiKit.Base.update(_300,{"textAlign":"left","verticalAlign":"bottom","left":_298+"px","top":_299+"px"});
-MochiKit.Base.update(_301,{"textAnchor":"left","x":_298,"y":_299});
-}else{
-if((_297>Math.PI)&&(_297<=Math.PI*1.5)){
-MochiKit.Base.update(_300,{"textAlign":"right","verticalAlign":"bottom","left":_298+"px","top":_299+"px"});
-MochiKit.Base.update(_301,{"textAnchor":"right","x":_298-_294,"y":_299});
-}else{
-MochiKit.Base.update(_300,{"textAlign":"left","verticalAlign":"bottom","left":_298+"px","top":_299+"px"});
-MochiKit.Base.update(_301,{"textAnchor":"left","x":_298-_294,"y":_299-this.options.axisLabelFontSize});
-}
-}
-}
-if(this.options.axisLabelUseDiv){
-var _302=DIV({"style":_300},this.layout.xticks[i][1]);
-this.xlabels.push(_302);
-MochiKit.DOM.appendChildNodes(this.container,_302);
-}else{
-var _302=this.createSVGElement("text",_301);
-_302.appendChild(this.document.createTextNode(this.layout.xticks[i][1]));
-this.root.appendChild(_302);
-}
-}
-}
-};
-PlotKit.SVGRenderer.prototype._renderBackground=function(){
-var opts={"stroke":"none","fill":this.options.backgroundColor.toRGBString()};
-this._drawRect(0,0,this.width,this.height,opts);
-};
-PlotKit.SVGRenderer.prototype._drawRect=function(x,y,w,h,_304){
-var _305={x:x+"px",y:y+"px",width:w+"px",height:h+"px"};
-if(_304){
-MochiKit.Base.update(_305,_304);
-}
-var elem=this.createSVGElement("rect",_305);
-this.root.appendChild(elem);
-};
-PlotKit.SVGRenderer.prototype._drawLine=function(x1,y1,x2,y2,_306){
-var _307={x1:x1+"px",y1:y1+"px",x2:x2+"px",y2:y2+"px"};
-if(_306){
-MochiKit.Base.update(_307,_306);
-}
-var elem=this.createSVGElement("line",_307);
-this.root.appendChild(elem);
-};
-PlotKit.SVGRenderer.prototype.clear=function(){
-while(this.element.firstChild){
-this.element.removeChild(this.element.firstChild);
-}
-if(this.options.axisLabelUseDiv){
-for(var i=0;i<this.xlabels.length;i++){
-MochiKit.DOM.removeElement(this.xlabels[i]);
-}
-for(var i=0;i<this.ylabels.length;i++){
-MochiKit.DOM.removeElement(this.ylabels[i]);
-}
-}
-this.xlabels=new Array();
-this.ylabels=new Array();
-};
-PlotKit.SVGRenderer.prototype.createSVGElement=function(name,_309){
-var _310=MochiKit.Base.isUndefinedOrNull;
-var elem;
-var doc=_310(this.document)?document:this.document;
-try{
-elem=doc.createElementNS(PlotKit.SVGRenderer.SVGNS,name);
-}
-catch(e){
-elem=doc.createElement(name);
-elem.setAttribute("xmlns",PlotKit.SVGRenderer.SVGNS);
-}
-if(_309){
-MochiKit.DOM.updateNodeAttributes(elem,_309);
-}
-return elem;
-};
-PlotKit.SVGRenderer.SVG=function(_312){
-var ie=navigator.appVersion.match(/MSIE (\d\.\d)/);
-var _313=(navigator.userAgent.toLowerCase().indexOf("opera")!=-1);
-if(ie&&(ie[1]>=6)&&(!_313)){
-var _314=_312["width"]?_312["width"]:"100";
-var _315=_312["height"]?_312["height"]:"100";
-var eid=_312["id"]?_312["id"]:"notunique";
-var html="<svg:svg width=\""+_314+"\" height=\""+_315+"\" ";
-html+="id=\""+eid+"\" version=\"1.1\" baseProfile=\"full\" />";
-var _318=document.createElement(html);
-var _319=_318.getSVGDocument().createElementNS(PlotKit.SVGRenderer.SVGNS,"svg");
-_319.setAttribute("width",_314);
-_319.setAttribute("height",_315);
-_318.getSVGDocument().appendChild(_319);
-return _318;
-}else{
-return PlotKit.SVGRenderer.prototype.createSVGElement("svg",_312);
-}
-};
-PlotKit.SVGRenderer.isSupported=function(){
-var _320=(navigator.userAgent.toLowerCase().indexOf("opera")!=-1);
-var _321=navigator.appVersion.match(/MSIE (\d\.\d)/);
-var _322=navigator.userAgent.match(/AppleWebKit\/(\d+)/);
-var _323=navigator.userAgent.match(/Opera\/(\d*\.\d*)/);
-var _324=navigator.userAgent.match(/rv:(\d*\.\d*).*Gecko/);
-var _325="http://www.w3.org/TR/SVG11/feature#SVG";
-if(_321&&(_321[1]>=6)&&!_320){
-return document.implementation.hasFeature(_325,"1.1");
-}
-if(_323&&(_323[1]>8.9)){
-return true;
-}
-if(_324&&(_324>1.7)){
-return true;
-}
-return false;
-};
-PlotKit.SVG={};
-PlotKit.SVG.SVGRenderer=PlotKit.SVGRenderer;
-PlotKit.SVG.EXPORT=["SVGRenderer"];
-PlotKit.SVG.EXPORT_OK=["SVGRenderer"];
-PlotKit.SVG.__new__=function(){
-var m=MochiKit.Base;
-m.nameFunctions(this);
-this.EXPORT_TAGS={":common":this.EXPORT,":all":m.concat(this.EXPORT,this.EXPORT_OK)};
-};
-PlotKit.SVG.__new__();
-MochiKit.Base._exportSymbols(this,PlotKit.SVG);
-try{
-if(typeof (PlotKit.CanvasRenderer)=="undefined"){
-throw "";
-}
-}
-catch(e){
-throw "SweetCanvas depends on MochiKit.{Base,Color,DOM,Format} and PlotKit.{Layout, Canvas}";
-}
-if(typeof (PlotKit.SweetCanvasRenderer)=="undefined"){
-PlotKit.SweetCanvasRenderer={};
-}
-PlotKit.SweetCanvasRenderer=function(_326,_327,_328){
-if(arguments.length>0){
-this.__init__(_326,_327,_328);
-}
-};
-PlotKit.SweetCanvasRenderer.NAME="PlotKit.SweetCanvasRenderer";
-PlotKit.SweetCanvasRenderer.VERSION=PlotKit.VERSION;
-PlotKit.SweetCanvasRenderer.__repr__=function(){
-return "["+this.NAME+" "+this.VERSION+"]";
-};
-PlotKit.SweetCanvasRenderer.toString=function(){
-return this.__repr__();
-};
-PlotKit.SweetCanvasRenderer.prototype=new PlotKit.CanvasRenderer();
-PlotKit.SweetCanvasRenderer.prototype.constructor=PlotKit.SweetCanvasRenderer;
-PlotKit.SweetCanvasRenderer.__super__=PlotKit.CanvasRenderer.prototype;
-PlotKit.SweetCanvasRenderer.prototype.__init__=function(el,_330,opts){
-var _331=PlotKit.Base.officeBlue();
-MochiKit.Base.update(_331,opts);
-PlotKit.SweetCanvasRenderer.__super__.__init__.call(this,el,_330,_331);
-};
-PlotKit.SweetCanvasRenderer.prototype._renderBarChart=function(){
-var bind=MochiKit.Base.bind;
-var _332=Color.blackColor().colorWithAlpha(0.1).toRGBString();
-var _333=function(_334,x,y,w,h){
-_334.fillStyle=_332;
-_334.fillRect(x-2,y-2,w+4,h+2);
-_334.fillStyle=_332;
-_334.fillRect(x-1,y-1,w+2,h+1);
-};
-var _335=this.options.colorScheme.length;
-var _336=this.options.colorScheme;
-var _337=PlotKit.Base.keys(this.layout.datasets);
-var _338=_337.length;
-var _339=function(name){
-for(var i=0;i<_338;i++){
-if(name==_337[i]){
-return _336[i%_335];
-}
-}
-return _336[0];
-};
-var _340=function(_341,bar){
-var x=this.area.w*bar.x+this.area.x;
-var y=this.area.h*bar.y+this.area.y;
-var w=this.area.w*bar.w;
-var h=this.area.h*bar.h;
-if((w<1)||(h<1)){
-return;
-}
-_341.save();
-_341.shadowBlur=5;
-_341.shadowColor=Color.fromHexString("#888888").toRGBString();
-if(this.isIE){
-_341.save();
-_341.fillStyle="#cccccc";
-_341.fillRect(x-2,y-2,w+4,h+2);
-_341.restore();
-}else{
-_333(_341,x,y,w,h);
-}
-if(this.options.shouldFill){
-_341.fillStyle=_339(bar.name).toRGBString();
-_341.fillRect(x,y,w,h);
-}
-_341.shadowBlur=0;
-_341.strokeStyle=Color.whiteColor().toRGBString();
-_341.lineWidth=2;
-if(this.options.shouldStroke){
-_341.strokeRect(x,y,w,h);
-}
-_341.restore();
-};
-this._renderBarChartWrap(this.layout.bars,bind(_340,this));
-};
-PlotKit.SweetCanvasRenderer.prototype._renderLineChart=function(){
-var _342=this.element.getContext("2d");
-var _343=this.options.colorScheme.length;
-var _344=this.options.colorScheme;
-var _345=PlotKit.Base.keys(this.layout.datasets);
-var _346=_345.length;
-var bind=MochiKit.Base.bind;
-for(var i=0;i<_346;i++){
-var _347=_345[i];
-var _348=_344[i%_343];
-var _349=this.options.strokeColorTransform;
-_342.save();
-var _350=function(ctx){
-ctx.beginPath();
-ctx.moveTo(this.area.x,this.area.y+this.area.h);
-var _351=function(ctx_,_352){
-if(_352.name==_347){
-ctx_.lineTo(this.area.w*_352.x+this.area.x,this.area.h*_352.y+this.area.y);
-}
-};
-MochiKit.Iter.forEach(this.layout.points,partial(_351,ctx),this);
-ctx.lineTo(this.area.w+this.area.x,this.area.h+this.area.y);
-ctx.lineTo(this.area.x,this.area.y+this.area.h);
-ctx.closePath();
-};
-if(this.options.shouldFill){
-_342.save();
-if(this.isIE){
-_342.fillStyle="#cccccc";
-}else{
-_342.fillStyle=Color.blackColor().colorWithAlpha(0.2).toRGBString();
-}
-_342.translate(-1,-2);
-bind(_350,this)(_342);
-if(this.options.shouldFill){
-_342.fill();
-}
-_342.restore();
-}
-_342.shadowBlur=5;
-_342.shadowColor=Color.fromHexString("#888888").toRGBString();
-_342.fillStyle=_348.toRGBString();
-_342.lineWidth=2;
-_342.strokeStyle=Color.whiteColor().toRGBString();
-if(this.options.shouldFill){
-bind(_350,this)(_342);
-_342.fill();
-}
-if(this.options.shouldStroke){
-bind(_350,this)(_342);
-_342.stroke();
-}
-_342.restore();
-}
-};
-PlotKit.SweetCanvasRenderer.prototype._renderPieChart=function(){
-var _353=this.element.getContext("2d");
-var _354=this.options.colorScheme.length;
-var _355=this.layout.slices;
-var _356=this.area.x+this.area.w*0.5;
-var _357=this.area.y+this.area.h*0.5;
-var _358=Math.min(this.area.w*this.options.pieRadius,this.area.h*this.options.pieRadius);
-if(this.isIE){
-_356=parseInt(_356);
-_357=parseInt(_357);
-_358=parseInt(_358);
-}
-if(!this.isIE){
-_353.save();
-var _359=Color.blackColor().colorWithAlpha(0.2);
-_353.fillStyle=_359.toRGBString();
-_353.shadowBlur=5;
-_353.shadowColor=Color.fromHexString("#888888").toRGBString();
-_353.translate(1,1);
-_353.beginPath();
-_353.moveTo(_356,_357);
-_353.arc(_356,_357,_358+2,0,Math.PI*2,false);
-_353.closePath();
-_353.fill();
-_353.restore();
-}
-_353.save();
-_353.strokeStyle=Color.whiteColor().toRGBString();
-_353.lineWidth=2;
-for(var i=0;i<_355.length;i++){
-var _360=this.options.colorScheme[i%_354];
-_353.fillStyle=_360.toRGBString();
-var _361=function(){
-_353.beginPath();
-_353.moveTo(_356,_357);
-_353.arc(_356,_357,_358,_355[i].startAngle-Math.PI/2,_355[i].endAngle-Math.PI/2,false);
-_353.lineTo(_356,_357);
-_353.closePath();
-};
-if(Math.abs(_355[i].startAngle-_355[i].endAngle)>0.0001){
-if(this.options.shouldFill){
-_361();
-_353.fill();
-}
-if(this.options.shouldStroke){
-_361();
-_353.stroke();
-}
-}
-}
-_353.restore();
-};
-PlotKit.SweetCanvasRenderer.prototype._renderBackground=function(){
-var _362=this.element.getContext("2d");
-if(this.layout.style=="bar"||this.layout.style=="line"){
-_362.save();
-_362.fillStyle=this.options.backgroundColor.toRGBString();
-_362.fillRect(this.area.x,this.area.y,this.area.w,this.area.h);
-_362.strokeStyle=this.options.axisLineColor.toRGBString();
-_362.lineWidth=1;
-var _363=this.layout.yticks;
-var _364=false;
-if(this.layout.style=="bar"&&this.layout.options.barOrientation=="horizontal"){
-_363=this.layout.xticks;
-_364=true;
-}
-for(var i=0;i<_363.length;i++){
-var x1=0;
-var y1=0;
-var x2=0;
-var y2=0;
-if(_364){
-x1=_363[i][0]*this.area.w+this.area.x;
-y1=this.area.y;
-x2=x1;
-y2=y1+this.area.h;
-}else{
-x1=this.area.x;
-y1=_363[i][0]*this.area.h+this.area.y;
-x2=x1+this.area.w;
-y2=y1;
-}
-_362.beginPath();
-_362.moveTo(x1,y1);
-_362.lineTo(x2,y2);
-_362.closePath();
-_362.stroke();
-}
-_362.restore();
-}else{
-PlotKit.SweetCanvasRenderer.__super__._renderBackground.call(this);
-}
-};
-PlotKit.SweetCanvas={};
-PlotKit.SweetCanvas.SweetCanvasRenderer=PlotKit.SweetCanvasRenderer;
-PlotKit.SweetCanvas.EXPORT=["SweetCanvasRenderer"];
-PlotKit.SweetCanvas.EXPORT_OK=["SweetCanvasRenderer"];
-PlotKit.SweetCanvas.__new__=function(){
-var m=MochiKit.Base;
-m.nameFunctions(this);
-this.EXPORT_TAGS={":common":this.EXPORT,":all":m.concat(this.EXPORT,this.EXPORT_OK)};
-};
-PlotKit.SweetCanvas.__new__();
-MochiKit.Base._exportSymbols(this,PlotKit.SweetCanvas);
-try{
-if(typeof (PlotKit.SVGRenderer)=="undefined"){
-throw "";
-}
-}
-catch(e){
-throw "SweetSVG depends on MochiKit.{Base,Color,DOM,Format} and PlotKit.{Layout, SVG}";
-}
-if(typeof (PlotKit.SweetSVGRenderer)=="undefined"){
-PlotKit.SweetSVGRenderer={};
-}
-PlotKit.SweetSVGRenderer=function(_365,_366,_367){
-if(arguments.length>0){
-this.__init__(_365,_366,_367);
-}
-};
-PlotKit.SweetSVGRenderer.NAME="PlotKit.SweetSVGRenderer";
-PlotKit.SweetSVGRenderer.VERSION=PlotKit.VERSION;
-PlotKit.SweetSVGRenderer.__repr__=function(){
-return "["+this.NAME+" "+this.VERSION+"]";
-};
-PlotKit.SweetSVGRenderer.toString=function(){
-return this.__repr__();
-};
-PlotKit.SweetSVGRenderer.prototype=new PlotKit.SVGRenderer();
-PlotKit.SweetSVGRenderer.prototype.constructor=PlotKit.SweetSVGRenderer;
-PlotKit.SweetSVGRenderer.__super__=PlotKit.SVGRenderer.prototype;
-PlotKit.SweetSVGRenderer.prototype.__init__=function(_368,_369,_370){
-var _371=PlotKit.Base.officeBlue();
-MochiKit.Base.update(_371,_370);
-PlotKit.SweetSVGRenderer.__super__.__init__.call(this,_368,_369,_371);
-};
-PlotKit.SweetSVGRenderer.prototype._addDropShadowFilter=function(){
-var _372=this.createSVGElement("filter",{x:0,y:0,"id":"dropShadow"});
-var _373=this.createSVGElement("feOffset",{"in":"SourceGraphic","dx":0,"dy":0,"result":"topCopy"});
-var blur=this.createSVGElement("feGaussianBlur",{"in":"SourceAlpha","StdDeviation":2,"result":"shadow"});
-var _375=this.createSVGElement("feOffset",{"in":"shadow","dx":-1,"dy":-2,"result":"movedShadow"});
-var _376=this.createSVGElement("feMerge");
-var _377=this.createSVGElement("feMergeNode",{"in":"topCopy"});
-var _378=this.createSVGElement("feMergeNode",{"in":"movedShadow"});
-_376.appendChild(_377);
-_376.appendChild(_378);
-_372.appendChild(_373);
-_372.appendChild(blur);
-_372.appendChild(_375);
-_372.appendChild(_376);
-this.defs.appendChild(_372);
-};
-PlotKit.SweetSVGRenderer.prototype._renderBarChart=function(){
-var bind=MochiKit.Base.bind;
-var _379=Color.blackColor().toRGBString();
-var _380="fill:"+_379+";fill-opacity:0.15";
-var _381="stroke-width: 2.0; stroke:"+Color.whiteColor().toRGBString();
-var _382=function(_383,bar){
-var x=this.area.w*bar.x+this.area.x;
-var y=this.area.h*bar.y+this.area.y;
-var w=this.area.w*bar.w;
-var h=this.area.h*bar.h;
-if((w<1)||(h<1)){
-return;
-}
-_383["style"]=_381;
-this._drawRect(x-2,y-1,w+4,h+2,{"style":_380});
-this._drawRect(x,y,w,h,_383);
-};
-this._renderBarOrLine(this.layout.bars,bind(_382,this));
-};
-PlotKit.SweetSVGRenderer.prototype._renderLineChart=function(){
-var bind=MochiKit.Base.bind;
-var _384=Color.blackColor().toRGBString();
-var _385="fill:"+_384+";fill-opacity:0.15";
-var _386="stroke-width: 2.0; stroke:"+Color.whiteColor().toRGBString();
-var _387=function(_388,_389){
-this._tempPointsBuffer+=(this.area.w*_389.x+this.area.x)+","+(this.area.h*_389.y+this.area.y)+" ";
-};
-var _390=function(_391){
-this._tempPointsBuffer="";
-this._tempPointsBuffer+=(this.area.x)+","+(this.area.y+this.area.h)+" ";
-};
-var _392=function(_393){
-this._tempPointsBuffer+=(this.area.w+this.area.x)+","+(this.area.h+this.area.y);
-_393["points"]=this._tempPointsBuffer;
-_393["stroke"]="none";
-_393["transform"]="translate(-2, -1)";
-_393["style"]=_385;
-var _394=this.createSVGElement("polygon",_393);
-this.root.appendChild(_394);
-_393["transform"]="";
-_393["style"]=_386;
-var elem=this.createSVGElement("polygon",_393);
-this.root.appendChild(elem);
-};
-this._renderBarOrLine(this.layout.points,bind(_387,this),bind(_390,this),bind(_392,this));
-};
-PlotKit.SweetSVGRenderer.prototype._renderPieChart=function(){
-var _395=this.area.x+this.area.w*0.5;
-var _396=this.area.y+this.area.h*0.5;
-var _397=Color.blackColor().toRGBString();
-var _398=Math.min(this.area.w*this.options.pieRadius,this.area.h*this.options.pieRadius);
-var _399="fill:"+_397+";fill-opacity:0.15";
-var _400=this.createSVGElement("circle",{"style":_399,"cx":_395+1,"cy":_396+1,"r":_398+1});
-this.root.appendChild(_400);
-PlotKit.SweetSVGRenderer.__super__._renderPieChart.call(this);
-};
-PlotKit.SweetSVGRenderer.prototype._renderBackground=function(){
-var _401={"fill":this.options.backgroundColor.toRGBString(),"stroke":"none"};
-if(this.layout.style=="bar"||this.layout.style=="line"){
-this._drawRect(this.area.x,this.area.y,this.area.w,this.area.h,_401);
-var _402=this.layout.yticks;
-var _403=false;
-if(this.layout.style=="bar"&&this.layout.options.barOrientation=="horizontal"){
-_402=this.layout.xticks;
-_403=true;
-}
-for(var i=0;i<_402.length;i++){
-var x=0;
-var y=0;
-var w=0;
-var h=0;
-if(_403){
-x=_402[i][0]*this.area.w+this.area.x;
-y=this.area.y;
-w=1;
-h=this.area.w;
-}else{
-x=this.area.x;
-y=_402[i][0]*this.area.h+this.area.y;
-w=this.area.w;
-h=1;
-}
-this._drawRect(x,y,w,h,{"fill":this.options.axisLineColor.toRGBString()});
-}
-}else{
-PlotKit.SweetSVGRenderer.__super__._renderBackground.call(this);
-}
-};
-PlotKit.SweetSVG={};
-PlotKit.SweetSVG.SweetSVGRenderer=PlotKit.SweetSVGRenderer;
-PlotKit.SweetSVG.EXPORT=["SweetSVGRenderer"];
-PlotKit.SweetSVG.EXPORT_OK=["SweetSVGRenderer"];
-PlotKit.SweetSVG.__new__=function(){
-var m=MochiKit.Base;
-m.nameFunctions(this);
-this.EXPORT_TAGS={":common":this.EXPORT,":all":m.concat(this.EXPORT,this.EXPORT_OK)};
-};
-PlotKit.SweetSVG.__new__();
-MochiKit.Base._exportSymbols(this,PlotKit.SweetSVG);
-try{
-if(typeof (PlotKit.CanvasRenderer)=="undefined"){
-throw "";
-}
-}
-catch(e){
-throw "PlotKit.EasyPlot depends on all of PlotKit's components";
-}
-if(typeof (PlotKit.EasyPlot)=="undefined"){
-PlotKit.EasyPlot={};
-}
-PlotKit.EasyPlot.NAME="PlotKit.EasyPlot";
-PlotKit.EasyPlot.VERSION=PlotKit.VERSION;
-PlotKit.EasyPlot.__repr__=function(){
-return "["+this.NAME+" "+this.VERSION+"]";
-};
-PlotKit.EasyPlot.toString=function(){
-return this.__repr__();
-};
-PlotKit.EasyPlot=function(_404,_405,_406,_407){
-this.layout=new Layout(_404,_405);
-this.divElem=_406;
-this.width=parseInt(_406.getAttribute("width"));
-this.height=parseInt(_406.getAttribute("height"));
-this.deferredCount=0;
-if(this.width<1){
-this.width=this.divElem.width?this.divElem.width:300;
-}
-if(this.height<1){
-this.height=this.divElem.height?this.divElem.height:300;
-}
-if(isArrayLike(_407)){
-for(var i=0;i<_407.length;i++){
-if(typeof (_407[i])=="string"){
-this.deferredCount++;
-var d=MochiKit.Async.doSimpleXMLHttpRequest(_407[i]);
-d.addCallback(MochiKit.Base.bind(PlotKit.EasyPlot.onDataLoaded,this));
-}else{
-if(isArrayLike(_407[i])){
-this.layout.addDataset("data-"+i,_407[i]);
-}
-}
-}
-}else{
-if(!isUndefinedOrNull(_407)){
-throw "Passed datasources are not Array like";
-}
-}
-if(CanvasRenderer.isSupported()){
-this.element=CANVAS({"id":this.divElem.getAttribute("id")+"-canvas","width":this.width,"height":this.height},"");
-this.divElem.appendChild(this.element);
-this.renderer=new SweetCanvasRenderer(this.element,this.layout,_405);
-}else{
-if(SVGRenderer.isSupported()){
-this.element=SVGRenderer.SVG({"id":this.divElem.getAttribute("id")+"-svg","width":this.width,"height":this.height,"version":"1.1","baseProfile":"full"},"");
-this.divElem.appendChild(this.element);
-this.renderer=new SweetSVGRenderer(this.element,this.layout,_405);
-}
-}
-if((this.deferredCount==0)&&(PlotKit.Base.keys(this.layout.datasets).length>0)){
-this.layout.evaluate();
-this.renderer.clear();
-this.renderer.render();
-}
-};
-PlotKit.EasyPlot.onDataLoaded=function(_409){
-var _410=new Array();
-var _411=_409.responseText.split("\n");
-for(var i=0;i<_411.length;i++){
-var _412=MochiKit.Format.strip(_411[i]);
-if((_412.length>1)&&(_412.charAt(0)!="#")){
-_410.push(_412.split(","));
-}
-}
-this.layout.addDataset("data-ajax-"+this.deferredCount,_410);
-this.deferredCount--;
-if((this.deferredCount==0)&&(PlotKit.Base.keys(this.layout.datasets).length>0)){
-this.layout.evaluate();
-this.renderer.clear();
-this.renderer.render();
-}
-};
-PlotKit.EasyPlot.prototype.reload=function(){
-this.layout.evaluate();
-this.renderer.clear();
-this.renderer.render();
-};
-PlotKit.EasyPlotModule={};
-PlotKit.EasyPlotModule.EasyPlot=PlotKit.EasyPlot;
-PlotKit.EasyPlotModule.EXPORT=["EasyPlot"];
-PlotKit.EasyPlotModule.EXPORT_OK=[];
-PlotKit.EasyPlotModule.__new__=function(){
-var m=MochiKit.Base;
-m.nameFunctions(this);
-this.EXPORT_TAGS={":common":this.EXPORT,":all":m.concat(this.EXPORT,this.EXPORT_OK)};
-};
-PlotKit.EasyPlotModule.__new__();
-MochiKit.Base._exportSymbols(this,PlotKit.EasyPlotModule);
-
-
+++ /dev/null
-/*
- PlotKit SVG
- ===========
- SVG Renderer for PlotKit
-
- Copyright
- ---------
- Copyright 2005,2006 (c) Alastair Tse <alastair^liquidx.net>
- For use under the BSD license. <http://www.liquidx.net/plotkit>
-*/
-
-// -------------------------------------------------------------------------
-// NOTES: - If you use XHTML1.1 strict, then you must include each MochiKit
-// file individuall.
-// - For IE support, you must include the AdobeSVG object hack.
-// See tests/svg.html for details.
-// -------------------------------------------------------------------------
-// -------------------------------------------------------------------------
-// Check required components
-// -------------------------------------------------------------------------
-
-try {
- if (typeof(PlotKit.Layout) == 'undefined')
- {
- throw "";
- }
-}
-catch (e) {
- throw "PlotKit depends on MochiKit.{Base,Color,DOM,Format} and PlotKit.Layout"
-}
-
-
-// ---------------------------------------------------------------------------
-// SVG Renderer
-// ---------------------------------------------------------------------------
-
-PlotKit.SVGRenderer = function(element, layout, options) {
- if (arguments.length > 0)
- this.__init__(element, layout, options);
-};
-
-PlotKit.SVGRenderer.NAME = "PlotKit.SVGRenderer";
-PlotKit.SVGRenderer.VERSION = PlotKit.VERSION;
-
-PlotKit.SVGRenderer.__repr__ = function() {
- return "[" + this.NAME + " " + this.VERSION + "]";
-};
-
-PlotKit.SVGRenderer.toString = function() {
- return this.__repr__();
-}
-
-PlotKit.SVGRenderer.SVGNS = 'http://www.w3.org/2000/svg';
-
-PlotKit.SVGRenderer.prototype.__init__ = function(element, layout, options) {
- var isNil = MochiKit.Base.isUndefinedOrNull;
-
- // default options
- this.options = {
- "drawBackground": true,
- "backgroundColor": Color.whiteColor(),
- "padding": {left: 30, right: 30, top: 5, bottom: 10},
- "colorScheme": PlotKit.Base.palette(PlotKit.Base.baseColors()[1]),
- "strokeColor": Color.whiteColor(),
- "strokeColorTransform": "asStrokeColor",
- "strokeWidth": 0.5,
- "shouldFill": true,
- "shouldStroke": true,
- "drawXAxis": true,
- "drawYAxis": true,
- "axisLineColor": Color.blackColor(),
- "axisLineWidth": 0.5,
- "axisTickSize": 3,
- "axisLabelColor": Color.blackColor(),
- "axisLabelFont": "Arial",
- "axisLabelFontSize": 9,
- "axisLabelWidth": 50,
- "axisLabelUseDiv": true,
- "pieRadius": 0.4,
- "enableEvents": true
- };
-
- MochiKit.Base.update(this.options, options ? options : {});
- this.layout = layout;
- this.element = MochiKit.DOM.getElement(element);
- this.container = this.element.parentNode;
- this.height = parseInt(this.element.getAttribute("height"));
- this.width = parseInt(this.element.getAttribute("width"));
- this.document = document;
- this.root = this.element;
-
- // Adobe SVG Support:
- // - if an exception is thrown, then no Adobe SVG Plugin support.
- try {
- this.document = this.element.getSVGDocument();
- this.root = isNil(this.document.documentElement) ? this.element : this.document.documentElement;
- }
- catch (e) {
- }
-
- this.element.style.zIndex = 1;
-
- if (isNil(this.element))
- throw "SVGRenderer() - passed SVG object is not found";
-
- if (isNil(this.container) || this.container.nodeName.toLowerCase() != "div")
- throw "SVGRenderer() - No DIV's around the SVG.";
-
- // internal state
- this.xlabels = new Array();
- this.ylabels = new Array();
-
- // initialise some meta structures in SVG
- this.defs = this.createSVGElement("defs");
-
- this.area = {
- x: this.options.padding.left,
- y: this.options.padding.top,
- w: this.width - this.options.padding.left - this.options.padding.right,
- h: this.height - this.options.padding.top - this.options.padding.bottom
- };
-
- MochiKit.DOM.updateNodeAttributes(this.container,
- {"style":{ "position": "relative", "width": this.width + "px"}});
-
-
-};
-
-
-PlotKit.SVGRenderer.prototype.render = function() {
- if (this.options.drawBackground)
- this._renderBackground();
-
- if (this.layout.style == "bar") {
- this._renderBarChart();
- this._renderBarAxis();
- }
- else if (this.layout.style == "pie") {
- this._renderPieChart();
- this._renderPieAxis();
- }
- else if (this.layout.style == "line") {
- this._renderLineChart();
- this._renderLineAxis();
- }
-};
-
-PlotKit.SVGRenderer.prototype._renderBarOrLine = function(data, plotFunc, startFunc, endFunc) {
-
- var colorCount = this.options.colorScheme.length;
- var colorScheme = this.options.colorScheme;
- var setNames = MochiKit.Base.keys(this.layout.datasets);
- var setCount = setNames.length;
-
- for (var i = 0; i < setCount; i++) {
- var setName = setNames[i];
- var attrs = new Array();
- var color = colorScheme[i%colorCount];
-
- if (this.options.shouldFill)
- attrs["fill"] = color.toRGBString();
- else
- attrs["fill"] = "none";
-
- if (this.options.shouldStroke &&
- (this.options.strokeColor || this.options.strokeColorTransform)) {
- if (this.options.strokeColor)
- attrs["stroke"] = this.options.strokeColor.toRGBString();
- else if (this.options.strokeColorTransform)
- attrs["stroke"] = color[this.options.strokeColorTransform]().toRGBString();
- attrs["strokeWidth"] = this.options.strokeWidth;
- }
-
- if (startFunc)
- startFunc(attrs);
-
- var forEachFunc = function(obj) {
- if (obj.name == setName)
- plotFunc(attrs, obj);
- };
-
- MochiKit.Iter.forEach(data, bind(forEachFunc, this));
- if (endFunc)
- endFunc(attrs);
- }
-};
-
-PlotKit.SVGRenderer.prototype._renderBarChart = function() {
- var bind = MochiKit.Base.bind;
-
- var drawRect = function(attrs, bar) {
- var x = this.area.w * bar.x + this.area.x;
- var y = this.area.h * bar.y + this.area.y;
- var w = this.area.w * bar.w;
- var h = this.area.h * bar.h;
- this._drawRect(x, y, w, h, attrs);
- };
- this._renderBarOrLine(this.layout.bars, bind(drawRect, this));
-};
-
-PlotKit.SVGRenderer.prototype._renderLineChart = function() {
- var bind = MochiKit.Base.bind;
-
- var addPoint = function(attrs, point) {
- this._tempPointsBuffer += (this.area.w * point.x + this.area.x) + "," +
- (this.area.h * point.y + this.area.y) + " ";
- };
-
- var startLine = function(attrs) {
- this._tempPointsBuffer = "";
- this._tempPointsBuffer += (this.area.x) + "," + (this.area.y+this.area.h) + " ";
- };
-
- var endLine = function(attrs) {
- this._tempPointsBuffer += (this.area.w + this.area.x) + "," +(this.area.h + this.area.y);
- attrs["points"] = this._tempPointsBuffer;
- var elem = this.createSVGElement("polygon", attrs);
- this.root.appendChild(elem);
- };
-
- this._renderBarOrLine(this.layout.points,
- bind(addPoint, this),
- bind(startLine, this),
- bind(endLine, this));
-};
-
-
-PlotKit.SVGRenderer.prototype._renderPieChart = function() {
- var colorCount = this.options.colorScheme.length;
- var slices = this.layout.slices;
-
- var centerx = this.area.x + this.area.w * 0.5;
- var centery = this.area.y + this.area.h * 0.5;
- var radius = Math.min(this.area.w * this.options.pieRadius,
- this.area.h * this.options.pieRadius);
-
- // NOTE NOTE!! Canvas Tag draws the circle clockwise from the y = 0, x = 1
- // so we have to subtract 90 degrees to make it start at y = 1, x = 0
-
- // workaround if we only have 1 slice of 100%
- if (slices.length == 1 && (Math.abs(slices[0].startAngle) - Math.abs(slices[0].endAngle) < 0.1)) {
- var attrs = {"cx": centerx , "cy": centery , "r": radius };
- var color = this.options.colorScheme[0];
- if (this.options.shouldFill)
- attrs["fill"] = color.toRGBString();
- else
- attrs["fill"] = "none";
-
- if (this.options.shouldStroke &&
- (this.options.strokeColor || this.options.strokeColorTransform)) {
- if (this.options.strokeColor)
- attrs["stroke"] = this.options.strokeColor.toRGBString();
- else if (this.options.strokeColorTransform)
- attrs["stroke"] = color[this.options.strokeColorTransform]().toRGBString();
- attrs["style"] = "stroke-width: " + this.options.strokeWidth;
- }
-
- this.root.appendChild(this.createSVGElement("circle", attrs));
- return;
- }
-
- for (var i = 0; i < slices.length; i++) {
- var attrs = new Array();
- var color = this.options.colorScheme[i%colorCount];
- if (this.options.shouldFill)
- attrs["fill"] = color.toRGBString();
- else
- attrs["fill"] = "none";
-
- if (this.options.shouldStroke &&
- (this.options.strokeColor || this.options.strokeColorTransform)) {
- if (this.options.strokeColor)
- attrs["stroke"] = this.options.strokeColor.toRGBString();
- else if (this.options.strokeColorTransform)
- attrs["stroke"] = color[this.options.strokeColorTransform]().toRGBString();
- attrs["style"] = "stroke-width:" + this.options.strokeWidth;
- }
-
- var largearc = 0;
- if (Math.abs(slices[i].endAngle - slices[i].startAngle) > Math.PI)
- largearc = 1;
- var x1 = Math.cos(slices[i].startAngle - Math.PI/2) * radius;
- var y1 = Math.sin(slices[i].startAngle - Math.PI/2) * radius;
- var x2 = Math.cos(slices[i].endAngle - Math.PI/2) * radius;
- var y2 = Math.sin(slices[i].endAngle - Math.PI/2) * radius;
- var rx = x2 - x1;
- var ry = y2 - y1;
-
- var pathString = "M" + centerx + "," + centery + " ";
- pathString += "l" + x1 + "," + y1 + " ";
- pathString += "a" + radius + "," + radius + " 0 " + largearc + ",1 " + rx + "," + ry + " z";
-
- attrs["d"] = pathString;
-
- var elem = this.createSVGElement("path", attrs);
- this.root.appendChild(elem);
- }
-};
-
-PlotKit.SVGRenderer.prototype._renderBarAxis = function() {
- this._renderAxis();
-}
-
-PlotKit.SVGRenderer.prototype._renderLineAxis = function() {
- this._renderAxis();
-};
-
-
-PlotKit.SVGRenderer.prototype._renderAxis = function() {
-
- if (!this.options.drawXAxis && !this.options.drawYAxis)
- return;
-
- var labelStyle = {"style":
- {"position": "absolute",
- "textAlign": "center",
- "fontSize": this.options.axisLabelFontSize + "px",
- "zIndex": 10,
- "color": this.options.axisLabelColor.toRGBString(),
- "width": this.options.axisLabelWidth + "px",
- "overflow": "hidden"
- }
- };
-
- // axis lines
- var lineAttrs = {
- "stroke": this.options.axisLineColor.toRGBString(),
- "strokeWidth": this.options.axisLineWidth
- };
-
-
- if (this.options.drawYAxis) {
- if (this.layout.yticks) {
- var drawTick = function(tick) {
- var x = this.area.x;
- var y = this.area.y + tick[0] * this.area.h;
- this._drawLine(x, y, x - 3, y, lineAttrs);
-
- if (this.options.axisLabelUseDiv) {
- var label = DIV(labelStyle, tick[1]);
- label.style.top = (y - this.options.axisLabelFontSize) + "px";
- label.style.left = (x - this.options.padding.left + this.options.axisTickSize) + "px";
- label.style.textAlign = "left";
- label.style.width = (this.options.padding.left - 3) + "px";
- MochiKit.DOM.appendChildNodes(this.container, label);
- this.ylabels.push(label);
- }
- else {
- var attrs = {
- y: y + 3,
- x: (x - this.options.padding.left + 3),
- width: (this.options.padding.left - this.options.axisTickSize) + "px",
- height: (this.options.axisLabelFontSize + 3) + "px",
- fontFamily: "Arial",
- fontSize: this.options.axisLabelFontSize + "px",
- fill: this.options.axisLabelColor.toRGBString()
- };
-
- /* we can do clipping just like DIVs
- http://www.xml.com/pub/a/2004/06/02/svgtype.html */
- /*
- var mask = this.createSVGElement("mask", {id: "mask" + tick[0]});
- var maskShape = this.createSVGElement("rect",
- {y: y + 3,
- x: (x - this.options.padding.left + 3),
- width: (this.options.padding.left - this.options.axisTickSize) + "px",
- height: (this.options.axisLabelFontSize + 3) + "px",
- style: {"fill": "#ffffff", "stroke": "#000000"}});
- mask.appendChild(maskShape);
- this.defs.appendChild(mask);
-
- attrs["filter"] = "url(#mask" + tick[0] + ")";
- */
-
- var label = this.createSVGElement("text", attrs);
- label.appendChild(this.document.createTextNode(tick[1]));
- this.root.appendChild(label);
- }
- };
-
- MochiKit.Iter.forEach(this.layout.yticks, bind(drawTick, this));
- }
-
- this._drawLine(this.area.x, this.area.y, this.area.x, this.area.y + this.area.h, lineAttrs);
- }
-
- if (this.options.drawXAxis) {
- if (this.layout.xticks) {
- var drawTick = function(tick) {
- var x = this.area.x + tick[0] * this.area.w;
- var y = this.area.y + this.area.h;
- this._drawLine(x, y, x, y + this.options.axisTickSize, lineAttrs);
-
- if (this.options.axisLabelUseDiv) {
- var label = DIV(labelStyle, tick[1]);
- label.style.top = (y + this.options.axisTickSize) + "px";
- label.style.left = (x - this.options.axisLabelWidth/2) + "px";
- label.style.textAlign = "center";
- label.style.width = this.options.axisLabelWidth + "px";
- MochiKit.DOM.appendChildNodes(this.container, label);
- this.xlabels.push(label);
- }
- else {
- var attrs = {
- y: (y + this.options.axisTickSize + this.options.axisLabelFontSize),
- x: x - 3,
- width: this.options.axisLabelWidth + "px",
- height: (this.options.axisLabelFontSize + 3) + "px",
- fontFamily: "Arial",
- fontSize: this.options.axisLabelFontSize + "px",
- fill: this.options.axisLabelColor.toRGBString(),
- textAnchor: "middle"
- };
- var label = this.createSVGElement("text", attrs);
- label.appendChild(this.document.createTextNode(tick[1]));
- this.root.appendChild(label);
- }
- };
-
- MochiKit.Iter.forEach(this.layout.xticks, bind(drawTick, this));
- }
-
- this._drawLine(this.area.x, this.area.y + this.area.h, this.area.x + this.area.w, this.area.y + this.area.h, lineAttrs)
- }
-};
-
-PlotKit.SVGRenderer.prototype._renderPieAxis = function() {
-
- if (this.layout.xticks) {
- // make a lookup dict for x->slice values
- var lookup = new Array();
- for (var i = 0; i < this.layout.slices.length; i++) {
- lookup[this.layout.slices[i].xval] = this.layout.slices[i];
- }
-
- var centerx = this.area.x + this.area.w * 0.5;
- var centery = this.area.y + this.area.h * 0.5;
- var radius = Math.min(this.area.w * this.options.pieRadius + 10,
- this.area.h * this.options.pieRadius + 10);
- var labelWidth = this.options.axisLabelWidth;
-
- for (var i = 0; i < this.layout.xticks.length; i++) {
- var slice = lookup[this.layout.xticks[i][0]];
- if (MochiKit.Base.isUndefinedOrNull(slice))
- continue;
-
-
- var angle = (slice.startAngle + slice.endAngle)/2;
- // normalize the angle
- var normalisedAngle = angle;
- if (normalisedAngle > Math.PI * 2)
- normalisedAngle = normalisedAngle - Math.PI * 2;
- else if (normalisedAngle < 0)
- normalisedAngle = normalisedAngle + Math.PI * 2;
-
- var labelx = centerx + Math.sin(normalisedAngle) * (radius + 10);
- var labely = centery - Math.cos(normalisedAngle) * (radius + 10);
-
- var attrib = {
- "position": "absolute",
- "zIndex": 11,
- "width": labelWidth + "px",
- "fontSize": this.options.axisLabelFontSize + "px",
- "overflow": "hidden",
- "color": this.options.axisLabelColor.toHexString()
- };
-
- var svgattrib = {
- "width": labelWidth + "px",
- "fontSize": this.options.axisLabelFontSize + "px",
- "height": (this.options.axisLabelFontSize + 3) + "px",
- "fill": this.options.axisLabelColor.toRGBString()
- };
-
- if (normalisedAngle <= Math.PI * 0.5) {
- // text on top and align left
- MochiKit.Base.update(attrib, {
- 'textAlign': 'left', 'verticalAlign': 'top',
- 'left': labelx + 'px',
- 'top': (labely - this.options.axisLabelFontSize) + "px"
- });
- MochiKit.Base.update(svgattrib, {
- "x": labelx,
- "y" :(labely - this.options.axisLabelFontSize),
- "textAnchor": "left"
- });
- }
- else if ((normalisedAngle > Math.PI * 0.5) && (normalisedAngle <= Math.PI)) {
- // text on bottom and align left
- MochiKit.Base.update(attrib, {
- 'textAlign': 'left', 'verticalAlign': 'bottom',
- 'left': labelx + 'px',
- 'top': labely + "px"
- });
- MochiKit.Base.update(svgattrib, {
- 'textAnchor': 'left',
- 'x': labelx,
- 'y': labely
- });
- }
- else if ((normalisedAngle > Math.PI) && (normalisedAngle <= Math.PI*1.5)) {
- // text on bottom and align right
- MochiKit.Base.update(attrib, {
- 'textAlign': 'right', 'verticalAlign': 'bottom',
- 'left': labelx + 'px',
- 'top': labely + "px"
- });
- MochiKit.Base.update(svgattrib, {
- 'textAnchor': 'right',
- 'x': labelx - labelWidth,
- 'y': labely
- });
- }
- else {
- // text on top and align right
- MochiKit.Base.update(attrib, {
- 'textAlign': 'left', 'verticalAlign': 'bottom',
- 'left': labelx + 'px',
- 'top': labely + "px"
- });
- MochiKit.Base.update(svgattrib, {
- 'textAnchor': 'left',
- 'x': labelx - labelWidth,
- 'y': labely - this.options.axisLabelFontSize
- });
- }
-
- if (this.options.axisLabelUseDiv) {
- var label = DIV({'style': attrib}, this.layout.xticks[i][1]);
- this.xlabels.push(label);
- MochiKit.DOM.appendChildNodes(this.container, label);
- }
- else {
- var label = this.createSVGElement("text", svgattrib);
- label.appendChild(this.document.createTextNode(this.layout.xticks[i][1]))
- this.root.appendChild(label);
- }
- }
-
- }
-};
-
-PlotKit.SVGRenderer.prototype._renderBackground = function() {
- var opts = {"stroke": "none",
- "fill": this.options.backgroundColor.toRGBString()
- };
- this._drawRect(0, 0, this.width, this.height, opts);
-};
-
-PlotKit.SVGRenderer.prototype._drawRect = function(x, y, w, h, moreattrs) {
- var attrs = {x: x + "px", y: y + "px", width: w + "px", height: h + "px"};
- if (moreattrs)
- MochiKit.Base.update(attrs, moreattrs);
-
- var elem = this.createSVGElement("rect", attrs);
- this.root.appendChild(elem);
-};
-
-PlotKit.SVGRenderer.prototype._drawLine = function(x1, y1, x2, y2, moreattrs) {
- var attrs = {x1: x1 + "px", y1: y1 + "px", x2: x2 + "px", y2: y2 + "px"};
- if (moreattrs)
- MochiKit.Base.update(attrs, moreattrs);
-
- var elem = this.createSVGElement("line", attrs);
- this.root.appendChild(elem);
-}
-
-PlotKit.SVGRenderer.prototype.clear = function() {
- while(this.element.firstChild) {
- this.element.removeChild(this.element.firstChild);
- }
-
- if (this.options.axisLabelUseDiv) {
- for (var i = 0; i < this.xlabels.length; i++) {
- MochiKit.DOM.removeElement(this.xlabels[i]);
- }
- for (var i = 0; i < this.ylabels.length; i++) {
- MochiKit.DOM.removeElement(this.ylabels[i]);
- }
- }
- this.xlabels = new Array();
- this.ylabels = new Array();
-};
-
-
-PlotKit.SVGRenderer.prototype.createSVGElement = function(name, attrs) {
- var isNil = MochiKit.Base.isUndefinedOrNull;
- var elem;
- var doc = isNil(this.document) ? document : this.document;
-
- try {
- elem = doc.createElementNS(PlotKit.SVGRenderer.SVGNS, name);
- }
- catch (e) {
- elem = doc.createElement(name);
- elem.setAttribute("xmlns", PlotKit.SVGRenderer.SVGNS);
- }
-
- if (attrs)
- MochiKit.DOM.updateNodeAttributes(elem, attrs);
-
- // TODO: we don't completely emulate the MochiKit.DOM.createElement
- // as we don't care about nodes contained. We really should though.
-
- return elem;
-
-};
-
-
-PlotKit.SVGRenderer.SVG = function(attrs) {
- // we have to do things differently for IE+AdobeSVG.
- // My guess this works (via trial and error) is that we need to
- // have an SVG object in order to use SVGDocument.createElementNS
- // but IE doesn't allow us to that.
-
- var ie = navigator.appVersion.match(/MSIE (\d\.\d)/);
- var opera = (navigator.userAgent.toLowerCase().indexOf("opera") != -1);
- if (ie && (ie[1] >= 6) && (!opera)) {
- var width = attrs["width"] ? attrs["width"] : "100";
- var height = attrs["height"] ? attrs["height"] : "100";
- var eid = attrs["id"] ? attrs["id"] : "notunique";
-
- var html = '<svg:svg width="' + width + '" height="' + height + '" ';
- html += 'id="' + eid + '" version="1.1" baseProfile="full" />';
-
- var canvas = document.createElement(html);
-
- // create embedded SVG inside SVG.
- var group = canvas.getSVGDocument().createElementNS(PlotKit.SVGRenderer.SVGNS, "svg");
- group.setAttribute("width", width);
- group.setAttribute("height", height);
- canvas.getSVGDocument().appendChild(group);
-
- return canvas;
- }
- else {
- return PlotKit.SVGRenderer.prototype.createSVGElement("svg", attrs);
- }
-};
-
-PlotKit.SVGRenderer.isSupported = function() {
- var isOpera = (navigator.userAgent.toLowerCase().indexOf("opera") != -1);
- var ieVersion = navigator.appVersion.match(/MSIE (\d\.\d)/);
- var safariVersion = navigator.userAgent.match(/AppleWebKit\/(\d+)/);
- var operaVersion = navigator.userAgent.match(/Opera\/(\d*\.\d*)/);
- var mozillaVersion = navigator.userAgent.match(/rv:(\d*\.\d*).*Gecko/);
- var svgFeature = "http://www.w3.org/TR/SVG11/feature#SVG";
-
- if (ieVersion && (ieVersion[1] >= 6) && !isOpera) {
- return document.implementation.hasFeature(svgFeature,"1.1");
- /*
- var dummysvg = document.createElement('<svg:svg width="1" height="1" baseProfile="full" version="1.1" id="dummy">');
- try {
- dummysvg.getSVGDocument();
- dummysvg = null;
- return true;
- }
- catch (e) {
- return false;
- }
- */
-
- }
-
- /* support not really there yet. no text and paths are buggy
- if (safariVersion && (safariVersion[1] > 419))
- return true;
- */
-
- if (operaVersion && (operaVersion[1] > 8.9))
- return true
-
- if (mozillaVersion && (mozillaVersion > 1.7))
- return true;
-
- return false;
-};
-
-// Namespace Iniitialisation
-
-PlotKit.SVG = {}
-PlotKit.SVG.SVGRenderer = PlotKit.SVGRenderer;
-
-PlotKit.SVG.EXPORT = [
- "SVGRenderer"
-];
-
-PlotKit.SVG.EXPORT_OK = [
- "SVGRenderer"
-];
-
-PlotKit.SVG.__new__ = function() {
- var m = MochiKit.Base;
-
- m.nameFunctions(this);
-
- this.EXPORT_TAGS = {
- ":common": this.EXPORT,
- ":all": m.concat(this.EXPORT, this.EXPORT_OK)
- };
-};
-
-PlotKit.SVG.__new__();
-MochiKit.Base._exportSymbols(this, PlotKit.SVG);
-
+++ /dev/null
-/*
- PlotKit Sweet Canvas Renderer
- =============================
- Canvas Renderer for PlotKit which looks pretty!
-
- Copyright
- ---------
- Copyright 2005,2006 (c) Alastair Tse <alastair^liquidx.net>
- For use under the BSD license. <http://www.liquidx.net/plotkit>
-*/
-
-// -------------------------------------------------------------------------
-// Check required components
-// -------------------------------------------------------------------------
-
-try {
- if (typeof(PlotKit.CanvasRenderer) == 'undefined')
- {
- throw "";
- }
-}
-catch (e) {
- throw "SweetCanvas depends on MochiKit.{Base,Color,DOM,Format} and PlotKit.{Layout, Canvas}"
-}
-
-
-if (typeof(PlotKit.SweetCanvasRenderer) == 'undefined') {
- PlotKit.SweetCanvasRenderer = {};
-}
-
-PlotKit.SweetCanvasRenderer = function(element, layout, options) {
- if (arguments.length > 0) {
- this.__init__(element, layout, options);
- }
-};
-
-PlotKit.SweetCanvasRenderer.NAME = "PlotKit.SweetCanvasRenderer";
-PlotKit.SweetCanvasRenderer.VERSION = PlotKit.VERSION;
-
-PlotKit.SweetCanvasRenderer.__repr__ = function() {
- return "[" + this.NAME + " " + this.VERSION + "]";
-};
-
-PlotKit.SweetCanvasRenderer.toString = function() {
- return this.__repr__();
-};
-
-// ---------------------------------------------------------------------
-// Subclassing Magic
-// ---------------------------------------------------------------------
-
-PlotKit.SweetCanvasRenderer.prototype = new PlotKit.CanvasRenderer();
-PlotKit.SweetCanvasRenderer.prototype.constructor = PlotKit.SweetCanvasRenderer;
-PlotKit.SweetCanvasRenderer.__super__ = PlotKit.CanvasRenderer.prototype;
-
-// ---------------------------------------------------------------------
-// Constructor
-// ---------------------------------------------------------------------
-
-PlotKit.SweetCanvasRenderer.prototype.__init__ = function(el, layout, opts) {
- var moreOpts = PlotKit.Base.officeBlue();
- MochiKit.Base.update(moreOpts, opts);
- PlotKit.SweetCanvasRenderer.__super__.__init__.call(this, el, layout, moreOpts);
-};
-
-// ---------------------------------------------------------------------
-// Extended Plotting Functions
-// ---------------------------------------------------------------------
-
-PlotKit.SweetCanvasRenderer.prototype._renderBarChart = function() {
- var bind = MochiKit.Base.bind;
- var shadowColor = Color.blackColor().colorWithAlpha(0.1).toRGBString();
-
- var prepareFakeShadow = function(context, x, y, w, h) {
- context.fillStyle = shadowColor;
- context.fillRect(x-2, y-2, w+4, h+2);
- context.fillStyle = shadowColor;
- context.fillRect(x-1, y-1, w+2, h+1);
- };
-
- var colorCount = this.options.colorScheme.length;
- var colorScheme = this.options.colorScheme;
- var setNames = PlotKit.Base.keys(this.layout.datasets);
- var setCount = setNames.length;
-
- var chooseColor = function(name) {
- for (var i = 0; i < setCount; i++) {
- if (name == setNames[i])
- return colorScheme[i%colorCount];
- }
- return colorScheme[0];
- };
-
- var drawRect = function(context, bar) {
- var x = this.area.w * bar.x + this.area.x;
- var y = this.area.h * bar.y + this.area.y;
- var w = this.area.w * bar.w;
- var h = this.area.h * bar.h;
-
- if ((w < 1) || (h < 1))
- return;
-
- context.save();
-
- context.shadowBlur = 5.0;
- context.shadowColor = Color.fromHexString("#888888").toRGBString();
-
- if (this.isIE) {
- context.save();
- context.fillStyle = "#cccccc";
- context.fillRect(x-2, y-2, w+4, h+2);
- context.restore();
- }
- else {
- prepareFakeShadow(context, x, y, w, h);
- }
-
- if (this.options.shouldFill) {
- context.fillStyle = chooseColor(bar.name).toRGBString();
- context.fillRect(x, y, w, h);
- }
-
- context.shadowBlur = 0;
- context.strokeStyle = Color.whiteColor().toRGBString();
- context.lineWidth = 2.0;
-
- if (this.options.shouldStroke) {
- context.strokeRect(x, y, w, h);
- }
-
- context.restore();
-
- };
- this._renderBarChartWrap(this.layout.bars, bind(drawRect, this));
-};
-
-PlotKit.SweetCanvasRenderer.prototype._renderLineChart = function() {
- var context = this.element.getContext("2d");
- var colorCount = this.options.colorScheme.length;
- var colorScheme = this.options.colorScheme;
- var setNames = PlotKit.Base.keys(this.layout.datasets);
- var setCount = setNames.length;
- var bind = MochiKit.Base.bind;
-
-
- for (var i = 0; i < setCount; i++) {
- var setName = setNames[i];
- var color = colorScheme[i%colorCount];
- var strokeX = this.options.strokeColorTransform;
-
- // setup graphics context
- context.save();
-
- // create paths
- var makePath = function(ctx) {
- ctx.beginPath();
- ctx.moveTo(this.area.x, this.area.y + this.area.h);
- var addPoint = function(ctx_, point) {
- if (point.name == setName)
- ctx_.lineTo(this.area.w * point.x + this.area.x,
- this.area.h * point.y + this.area.y);
- };
- MochiKit.Iter.forEach(this.layout.points, partial(addPoint, ctx), this);
- ctx.lineTo(this.area.w + this.area.x,
- this.area.h + this.area.y);
- ctx.lineTo(this.area.x, this.area.y + this.area.h);
- ctx.closePath();
- };
-
- // faux shadow for firefox
- if (this.options.shouldFill) {
- context.save();
- if (this.isIE) {
- context.fillStyle = "#cccccc";
- }
- else {
- context.fillStyle = Color.blackColor().colorWithAlpha(0.2).toRGBString();
- }
- context.translate(-1, -2);
- bind(makePath, this)(context);
- if (this.options.shouldFill) {
- context.fill();
- }
- context.restore();
- }
-
- context.shadowBlur = 5.0;
- context.shadowColor = Color.fromHexString("#888888").toRGBString();
- context.fillStyle = color.toRGBString();
- context.lineWidth = 2.0;
- context.strokeStyle = Color.whiteColor().toRGBString();
-
- if (this.options.shouldFill) {
- bind(makePath, this)(context);
- context.fill();
- }
- if (this.options.shouldStroke) {
- bind(makePath, this)(context);
- context.stroke();
- }
- context.restore();
- }
-};
-
-PlotKit.SweetCanvasRenderer.prototype._renderPieChart = function() {
- var context = this.element.getContext("2d");
-
- var colorCount = this.options.colorScheme.length;
- var slices = this.layout.slices;
-
- var centerx = this.area.x + this.area.w * 0.5;
- var centery = this.area.y + this.area.h * 0.5;
- var radius = Math.min(this.area.w * this.options.pieRadius,
- this.area.h * this.options.pieRadius);
-
- if (this.isIE) {
- centerx = parseInt(centerx);
- centery = parseInt(centery);
- radius = parseInt(radius);
- }
-
- // NOTE NOTE!! Canvas Tag draws the circle clockwise from the y = 0, x = 1
- // so we have to subtract 90 degrees to make it start at y = 1, x = 0
-
- if (!this.isIE) {
- context.save();
- var shadowColor = Color.blackColor().colorWithAlpha(0.2);
- context.fillStyle = shadowColor.toRGBString();
- context.shadowBlur = 5.0;
- context.shadowColor = Color.fromHexString("#888888").toRGBString();
- context.translate(1, 1);
- context.beginPath();
- context.moveTo(centerx, centery);
- context.arc(centerx, centery, radius + 2, 0, Math.PI*2, false);
- context.closePath();
- context.fill();
- context.restore();
- }
-
- context.save();
- context.strokeStyle = Color.whiteColor().toRGBString();
- context.lineWidth = 2.0;
- for (var i = 0; i < slices.length; i++) {
- var color = this.options.colorScheme[i%colorCount];
- context.fillStyle = color.toRGBString();
-
- var makePath = function() {
- context.beginPath();
- context.moveTo(centerx, centery);
- context.arc(centerx, centery, radius,
- slices[i].startAngle - Math.PI/2,
- slices[i].endAngle - Math.PI/2,
- false);
- context.lineTo(centerx, centery);
- context.closePath();
- };
-
- if (Math.abs(slices[i].startAngle - slices[i].endAngle) > 0.0001) {
- if (this.options.shouldFill) {
- makePath();
- context.fill();
- }
- if (this.options.shouldStroke) {
- makePath();
- context.stroke();
- }
- }
- }
- context.restore();
-};
-
-PlotKit.SweetCanvasRenderer.prototype._renderBackground = function() {
- var context = this.element.getContext("2d");
-
- if (this.layout.style == "bar" || this.layout.style == "line") {
- context.save();
- context.fillStyle = this.options.backgroundColor.toRGBString();
- context.fillRect(this.area.x, this.area.y, this.area.w, this.area.h);
- context.strokeStyle = this.options.axisLineColor.toRGBString();
- context.lineWidth = 1.0;
-
- var ticks = this.layout.yticks;
- var horiz = false;
- if (this.layout.style == "bar" &&
- this.layout.options.barOrientation == "horizontal") {
- ticks = this.layout.xticks;
- horiz = true;
- }
-
- for (var i = 0; i < ticks.length; i++) {
- var x1 = 0;
- var y1 = 0;
- var x2 = 0;
- var y2 = 0;
-
- if (horiz) {
- x1 = ticks[i][0] * this.area.w + this.area.x;
- y1 = this.area.y;
- x2 = x1;
- y2 = y1 + this.area.h;
- }
- else {
- x1 = this.area.x;
- y1 = ticks[i][0] * this.area.h + this.area.y;
- x2 = x1 + this.area.w;
- y2 = y1;
- }
-
- context.beginPath();
- context.moveTo(x1, y1);
- context.lineTo(x2, y2);
- context.closePath();
- context.stroke();
- }
- context.restore();
- }
- else {
- PlotKit.SweetCanvasRenderer.__super__._renderBackground.call(this);
- }
-};
-
-// Namespace Iniitialisation
-
-PlotKit.SweetCanvas = {}
-PlotKit.SweetCanvas.SweetCanvasRenderer = PlotKit.SweetCanvasRenderer;
-
-PlotKit.SweetCanvas.EXPORT = [
- "SweetCanvasRenderer"
-];
-
-PlotKit.SweetCanvas.EXPORT_OK = [
- "SweetCanvasRenderer"
-];
-
-PlotKit.SweetCanvas.__new__ = function() {
- var m = MochiKit.Base;
-
- m.nameFunctions(this);
-
- this.EXPORT_TAGS = {
- ":common": this.EXPORT,
- ":all": m.concat(this.EXPORT, this.EXPORT_OK)
- };
-};
-
-PlotKit.SweetCanvas.__new__();
-MochiKit.Base._exportSymbols(this, PlotKit.SweetCanvas);
-
+++ /dev/null
-/*
- PlotKit Sweet SVG Renderer
- ==========================
- SVG Renderer for PlotKit which looks pretty!
-
- Copyright
- ---------
- Copyright 2005,2006 (c) Alastair Tse <alastair^liquidx.net>
- For use under the BSD license. <http://www.liquidx.net/plotkit>
-*/
-
-
-// -------------------------------------------------------------------------
-// Check required components
-// -------------------------------------------------------------------------
-
-try {
- if (typeof(PlotKit.SVGRenderer) == 'undefined')
- {
- throw "";
- }
-}
-catch (e) {
- throw "SweetSVG depends on MochiKit.{Base,Color,DOM,Format} and PlotKit.{Layout, SVG}"
-}
-
-
-if (typeof(PlotKit.SweetSVGRenderer) == 'undefined') {
- PlotKit.SweetSVGRenderer = {};
-}
-
-PlotKit.SweetSVGRenderer = function(element, layout, options) {
- if (arguments.length > 0) {
- this.__init__(element, layout, options);
- }
-};
-
-PlotKit.SweetSVGRenderer.NAME = "PlotKit.SweetSVGRenderer";
-PlotKit.SweetSVGRenderer.VERSION = PlotKit.VERSION;
-
-PlotKit.SweetSVGRenderer.__repr__ = function() {
- return "[" + this.NAME + " " + this.VERSION + "]";
-};
-
-PlotKit.SweetSVGRenderer.toString = function() {
- return this.__repr__();
-};
-
-// ---------------------------------------------------------------------
-// Subclassing Magic
-// ---------------------------------------------------------------------
-
-PlotKit.SweetSVGRenderer.prototype = new PlotKit.SVGRenderer();
-PlotKit.SweetSVGRenderer.prototype.constructor = PlotKit.SweetSVGRenderer;
-PlotKit.SweetSVGRenderer.__super__ = PlotKit.SVGRenderer.prototype;
-
-// ---------------------------------------------------------------------
-// Constructor
-// ---------------------------------------------------------------------
-
-PlotKit.SweetSVGRenderer.prototype.__init__ = function(element, layout, options) {
- var moreOpts = PlotKit.Base.officeBlue();
- MochiKit.Base.update(moreOpts, options);
- PlotKit.SweetSVGRenderer.__super__.__init__.call(this, element, layout, moreOpts);
- //this._addDropShadowFilter();
-};
-
-PlotKit.SweetSVGRenderer.prototype._addDropShadowFilter = function() {
- var filter = this.createSVGElement("filter", {x: 0, y: 0, "id":"dropShadow"});
- var goffset = this.createSVGElement("feOffset",
- {"in": "SourceGraphic", "dx": 0, "dy": 0, "result": "topCopy"});
- var blur = this.createSVGElement("feGaussianBlur",
- {"in": "SourceAlpha", "StdDeviation": 2, "result": "shadow"});
- var soffset = this.createSVGElement("feOffset",
- {"in": "shadow", "dx": -1, "dy": -2, "result":"movedShadow"});
- var merge = this.createSVGElement("feMerge");
- var gmerge = this.createSVGElement("feMergeNode", {"in":"topCopy"});
- var smerge = this.createSVGElement("feMergeNode", {"in":"movedShadow"});
-
- merge.appendChild(gmerge);
- merge.appendChild(smerge);
- filter.appendChild(goffset);
- filter.appendChild(blur);
- filter.appendChild(soffset);
- filter.appendChild(merge);
- this.defs.appendChild(filter);
-};
-
-// ---------------------------------------------------------------------
-// Extended Plotting Functions
-// ---------------------------------------------------------------------
-
-PlotKit.SweetSVGRenderer.prototype._renderBarChart = function() {
- var bind = MochiKit.Base.bind;
- var shadowColor = Color.blackColor().toRGBString();
- var shadowStyle = "fill:" + shadowColor + ";fill-opacity:0.15";
- var strokeStyle = "stroke-width: 2.0; stroke:" + Color.whiteColor().toRGBString();
-
- var drawRect = function(attrs, bar) {
- var x = this.area.w * bar.x + this.area.x;
- var y = this.area.h * bar.y + this.area.y;
- var w = this.area.w * bar.w;
- var h = this.area.h * bar.h;
-
- if ((w < 1) || (h < 1))
- return;
-
- //attrs["filter"] = "url(#dropShadow)";
- attrs["style"] = strokeStyle;
- this._drawRect(x - 2, y - 1, w+4, h+2, {"style":shadowStyle});
- this._drawRect(x, y, w, h, attrs);
- };
- this._renderBarOrLine(this.layout.bars, bind(drawRect, this));
-
-};
-
-PlotKit.SweetSVGRenderer.prototype._renderLineChart = function() {
- var bind = MochiKit.Base.bind;
- var shadowColor = Color.blackColor().toRGBString();
- var shadowStyle = "fill:" + shadowColor + ";fill-opacity:0.15";
- var strokeStyle = "stroke-width: 2.0; stroke:" + Color.whiteColor().toRGBString();
-
- var addPoint = function(attrs, point) {
- this._tempPointsBuffer += (this.area.w * point.x + this.area.x) + "," +
- (this.area.h * point.y + this.area.y) + " ";
- };
-
- var startLine = function(attrs) {
- this._tempPointsBuffer = "";
- this._tempPointsBuffer += (this.area.x) + "," + (this.area.y+this.area.h) + " ";
- };
-
- var endLine = function(attrs) {
- this._tempPointsBuffer += (this.area.w + this.area.x) + "," +(this.area.h + this.area.y);
- attrs["points"] = this._tempPointsBuffer;
-
- attrs["stroke"] = "none";
- attrs["transform"] = "translate(-2, -1)";
- attrs["style"] = shadowStyle;
- var shadow = this.createSVGElement("polygon", attrs);
- this.root.appendChild(shadow);
-
- attrs["transform"] = "";
- attrs["style"] = strokeStyle;
- var elem = this.createSVGElement("polygon", attrs);
- this.root.appendChild(elem);
-
-
- };
-
- this._renderBarOrLine(this.layout.points,
- bind(addPoint, this),
- bind(startLine, this),
- bind(endLine, this));
-};
-
-PlotKit.SweetSVGRenderer.prototype._renderPieChart = function() {
- var centerx = this.area.x + this.area.w * 0.5;
- var centery = this.area.y + this.area.h * 0.5;
- var shadowColor = Color.blackColor().toRGBString();
- var radius = Math.min(this.area.w * this.options.pieRadius,
- this.area.h * this.options.pieRadius);
- var shadowStyle = "fill:" + shadowColor + ";fill-opacity:0.15";
-
- var shadow = this.createSVGElement("circle",
- {"style": shadowStyle, "cx": centerx + 1, "cy": centery + 1, "r": radius + 1});
- this.root.appendChild(shadow);
-
- PlotKit.SweetSVGRenderer.__super__._renderPieChart.call(this);
-};
-
-
-PlotKit.SweetSVGRenderer.prototype._renderBackground = function() {
- var attrs = {
- "fill": this.options.backgroundColor.toRGBString(),
- "stroke": "none"
- };
-
-
- if (this.layout.style == "bar" || this.layout.style == "line") {
- this._drawRect(this.area.x, this.area.y,
- this.area.w, this.area.h, attrs);
-
- var ticks = this.layout.yticks;
- var horiz = false;
- if (this.layout.style == "bar" &&
- this.layout.options.barOrientation == "horizontal") {
- ticks = this.layout.xticks;
- horiz = true;
- }
-
- for (var i = 0; i < ticks.length; i++) {
- var x = 0;
- var y = 0;
- var w = 0;
- var h = 0;
-
- if (horiz) {
- x = ticks[i][0] * this.area.w + this.area.x;
- y = this.area.y;
- w = 1;
- h = this.area.w;
- }
- else {
- x = this.area.x;
- y = ticks[i][0] * this.area.h + this.area.y;
- w = this.area.w;
- h = 1;
- }
-
- this._drawRect(x, y, w, h,
- {"fill": this.options.axisLineColor.toRGBString()});
- }
- }
- else {
- PlotKit.SweetSVGRenderer.__super__._renderBackground.call(this);
-
- }
-
-};
-
-// Namespace Iniitialisation
-
-PlotKit.SweetSVG = {}
-PlotKit.SweetSVG.SweetSVGRenderer = PlotKit.SweetSVGRenderer;
-
-PlotKit.SweetSVG.EXPORT = [
- "SweetSVGRenderer"
-];
-
-PlotKit.SweetSVG.EXPORT_OK = [
- "SweetSVGRenderer"
-];
-
-PlotKit.SweetSVG.__new__ = function() {
- var m = MochiKit.Base;
-
- m.nameFunctions(this);
-
- this.EXPORT_TAGS = {
- ":common": this.EXPORT,
- ":all": m.concat(this.EXPORT, this.EXPORT_OK)
- };
-};
-
-PlotKit.SweetSVG.__new__();
-MochiKit.Base._exportSymbols(this, PlotKit.SweetSVG);
+++ /dev/null
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
- xmlns:dc="http://purl.org/dc/elements/1.1/"
- xmlns:cc="http://web.resource.org/cc/"
- xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
- xmlns:svg="http://www.w3.org/2000/svg"
- xmlns="http://www.w3.org/2000/svg"
- xmlns:xlink="http://www.w3.org/1999/xlink">
-</svg>
+++ /dev/null
-// 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.
-
-// TODO: Patterns
-// TODO: Radial gradient
-// TODO: Clipping paths
-// TODO: Coordsize (still need to support stretching)
-// TODO: Painting mode
-// TODO: Optimize
-// TODO: canvas width/height sets content size in moz, border size in ie
-
-// only add this code if we do not already have a canvas implementation
-if (!window.CanvasRenderingContext2D) {
-
-(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 G_vmlCanvasManager_ = {
- init: function (opt_doc) {
- var doc = opt_doc || document;
- if (/MSIE/.test(navigator.userAgent) && !window.opera) {
- var self = this;
- doc.attachEvent("onreadystatechange", function () {
- self.init_(doc);
- });
- }
- },
-
- init_: function (doc, e) {
- if (doc.readyState == "complete") {
- // create xmlns
- if (!doc.namespaces["g_vml_"]) {
- doc.namespaces.add("g_vml_", "urn:schemas-microsoft-com:vml");
- }
-
- // setup default css
- var ss = doc.createStyleSheet();
- ss.cssText = "canvas{display:inline-block;overflow:hidden;" +
- "text-align:left;}" +
- "g_vml_\\:*{behavior:url(#default#VML)}";
-
- // find all canvas elements
- var els = doc.getElementsByTagName("canvas");
- for (var i = 0; i < els.length; i++) {
- if (!els[i].getContext) {
- this.initElement(els[i]);
- }
- }
- }
- },
-
- fixElement_: function (el) {
- // in IE before version 5.5 we would need to add HTML: to the tag name
- // but we do not care about IE before version 6
- var outerHTML = el.outerHTML;
- var newEl = document.createElement(outerHTML);
- // if the tag is still open IE has created the children as siblings and
- // it has also created a tag with the name "/FOO"
- if (outerHTML.slice(-2) != "/>") {
- var tagName = "/" + el.tagName;
- var ns;
- // remove content
- while ((ns = el.nextSibling) && ns.tagName != tagName) {
- ns.removeNode();
- }
- // remove the incorrect closing tag
- if (ns) {
- ns.removeNode();
- }
- }
- el.parentNode.replaceChild(newEl, el);
- return newEl;
- },
-
- /**
- * 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) {
- el = this.fixElement_(el);
- el.getContext = function () {
- if (this.context_) {
- return this.context_;
- }
- return this.context_ = new CanvasRenderingContext2D_(this);
- };
-
- // 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";
- }
- if (attrs.height && attrs.height.specified) {
- // TODO: use runtimeStyle and coordsize
- // el.getContext().setHeight_(attrs.height.nodeValue);
- el.style.height = attrs.height.nodeValue + "px";
- }
- //el.getContext().setCoordsize_()
- return el;
- }
- };
-
- function onPropertyChange(e) {
- // we need to watch changes to width and height
- switch (e.propertyName) {
- case 'width':
- case 'height':
- // TODO: coordsize and size
- 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 dec2hex = [];
- for (var i = 0; i < 16; i++) {
- for (var j = 0; j < 16; j++) {
- dec2hex[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;
- }
-
- function processStyle(styleString) {
- var str, alpha = 1;
-
- styleString = String(styleString);
- if (styleString.substring(0, 3) == "rgb") {
- var start = styleString.indexOf("(", 3);
- var end = styleString.indexOf(")", start + 1);
- var guts = styleString.substring(start + 1, end).split(",");
-
- str = "#";
- for (var i = 0; i < 3; i++) {
- str += dec2hex[parseInt(guts[i])];
- }
-
- if ((guts.length == 4) && (styleString.substr(3, 1) == "a")) {
- alpha = guts[3];
- }
- } else {
- str = styleString;
- }
-
- return [str, alpha];
- }
-
- 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} surfaceElement The element that the 2D context should
- * be associated with
- */
- function CanvasRenderingContext2D_(surfaceElement) {
- this.m_ = createMatrixIdentity();
-
- this.mStack_ = [];
- this.aStack_ = [];
- this.currentPath_ = [];
-
- // Canvas context properties
- this.strokeStyle = "#000";
- this.fillStyle = "#ccc";
-
- this.lineWidth = 1;
- this.lineJoin = "miter";
- this.lineCap = "butt";
- this.miterLimit = 10;
- this.globalAlpha = 1;
-
- var el = document.createElement('div');
- el.style.width = surfaceElement.clientWidth + 'px';
- el.style.height = surfaceElement.clientHeight + 'px';
- el.style.overflow = 'hidden';
- el.style.position = 'absolute';
- surfaceElement.appendChild(el);
-
- this.element_ = el;
- this.arcScaleX_ = 1;
- this.arcScaleY_ = 1;
- };
-
- var contextPrototype = CanvasRenderingContext2D_.prototype;
- contextPrototype.clearRect = function() {
- this.element_.innerHTML = "";
- this.currentPath_ = [];
- };
-
- 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) {
- this.currentPath_.push({type: "moveTo", x: aX, y: aY});
- };
-
- contextPrototype.lineTo = function(aX, aY) {
- this.currentPath_.push({type: "lineTo", x: aX, y: aY});
- };
-
- contextPrototype.bezierCurveTo = function(aCP1x, aCP1y,
- aCP2x, aCP2y,
- aX, aY) {
- this.currentPath_.push({type: "bezierCurveTo",
- cp1x: aCP1x,
- cp1y: aCP1y,
- cp2x: aCP2x,
- cp2y: aCP2y,
- x: aX,
- y: aY});
- };
-
- contextPrototype.quadraticCurveTo = function(aCPx, aCPy, aX, aY) {
- // VML's qb produces different output to Firefox's
- // FF's behaviour seems to have changed in 1.5.0.1, check this
- this.bezierCurveTo(aCPx, aCPy, aCPx, aCPy, aX, aY);
- };
-
- contextPrototype.arc = function(aX, aY, aRadius,
- aStartAngle, aEndAngle, aClockwise) {
- aRadius *= 10;
- var arcType = aClockwise ? "at" : "wa";
-
- var xStart = aX + (mc(aStartAngle) * aRadius) - 5;
- var yStart = aY + (ms(aStartAngle) * aRadius) - 5;
-
- var xEnd = aX + (mc(aEndAngle) * aRadius) - 5;
- var yEnd = aY + (ms(aEndAngle) * aRadius) - 5;
-
- this.currentPath_.push({type: arcType,
- x: aX,
- y: aY,
- radius: aRadius,
- xStart: xStart,
- yStart: yStart,
- xEnd: xEnd,
- yEnd: yEnd});
-
- };
-
- 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) {
- // Will destroy any existing path (same as FF behaviour)
- 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();
- };
-
- contextPrototype.fillRect = function(aX, aY, aWidth, aHeight) {
- // Will destroy any existing path (same as FF behaviour)
- 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();
- };
-
- contextPrototype.createLinearGradient = function(aX0, aY0, aX1, aY1) {
- var gradient = new CanvasGradient_("gradient");
- return gradient;
- };
-
- contextPrototype.createRadialGradient = function(aX0, aY0,
- aR0, aX1,
- aY1, aR1) {
- var gradient = new CanvasGradient_("gradientradial");
- gradient.radius1_ = aR0;
- gradient.radius2_ = aR1;
- gradient.focus_.x = aX0;
- gradient.focus_.y = aY0;
- return gradient;
- };
-
- contextPrototype.drawImage = function (image, var_args) {
- var dx, dy, dw, dh, sx, sy, sw, sh;
- var w = image.width;
- var h = image.height;
-
- 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 "Invalid number of arguments";
- }
-
- var d = this.getCoords_(dx, dy);
-
- var w2 = (sw / 2);
- var h2 = (sh / 2);
-
- var vmlStr = [];
-
- // For some reason that I've now forgotten, using divs didn't work
- vmlStr.push(' <g_vml_:group',
- ' coordsize="1000,1000"',
- ' coordorigin="0, 0"' ,
- ' style="width:100px;height:100px;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]) {
- 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='", d.x, "',",
- "Dy='", d.y, "'");
-
- // 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 = Math.max(max.x, c2.x, c3.x, c4.x);
- max.y = Math.max(max.y, c2.y, c3.y, c4.y);
-
- vmlStr.push(" padding:0 ", mr(max.x), "px ", mr(max.y),
- "px 0;filter:progid:DXImageTransform.Microsoft.Matrix(",
- filter.join(""), ", sizingmethod='clip');")
- } else {
- vmlStr.push(" top:", d.y, "px;left:", d.x, "px;")
- }
-
- vmlStr.push(' ">' ,
- '<g_vml_:image src="', image.src, '"',
- ' style="width:', dw, ';',
- ' height:', dh, ';"',
- ' 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 a = processStyle(aFill ? this.fillStyle : this.strokeStyle);
- var color = a[0];
- var opacity = a[1] * this.globalAlpha;
-
- lineStr.push('<g_vml_:shape',
- ' fillcolor="', color, '"',
- ' filled="', Boolean(aFill), '"',
- ' style="position:absolute;width:10;height:10;"',
- ' coordorigin="0 0" coordsize="100 100"',
- ' stroked="', !aFill, '"',
- ' strokeweight="', this.lineWidth, '"',
- ' strokecolor="', color, '"',
- ' 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];
-
- if (p.type == "moveTo") {
- lineStr.push(" m ");
- var c = this.getCoords_(p.x, p.y);
- lineStr.push(mr(c.x), ",", mr(c.y));
- } else if (p.type == "lineTo") {
- lineStr.push(" l ");
- var c = this.getCoords_(p.x, p.y);
- lineStr.push(mr(c.x), ",", mr(c.y));
- } else if (p.type == "close") {
- lineStr.push(" x ");
- } else if (p.type == "bezierCurveTo") {
- lineStr.push(" c ");
- var c = this.getCoords_(p.x, p.y);
- var c1 = this.getCoords_(p.cp1x, p.cp1y);
- var c2 = this.getCoords_(p.cp2x, p.cp2y);
- lineStr.push(mr(c1.x), ",", mr(c1.y), ",",
- mr(c2.x), ",", mr(c2.y), ",",
- mr(c.x), ",", mr(c.y));
- } else if (p.type == "at" || p.type == "wa") {
- lineStr.push(" ", p.type, " ");
- var c = this.getCoords_(p.x, p.y);
- var cStart = this.getCoords_(p.xStart, p.yStart);
- var cEnd = this.getCoords_(p.xEnd, p.yEnd);
-
- lineStr.push(mr(c.x - this.arcScaleX_ * p.radius), ",",
- mr(c.y - this.arcScaleY_ * p.radius), " ",
- mr(c.x + this.arcScaleX_ * p.radius), ",",
- mr(c.y + this.arcScaleY_ * p.radius), " ",
- mr(cStart.x), ",", mr(cStart.y), " ",
- mr(cEnd.x), ",", mr(cEnd.y));
- }
-
-
- // TODO: Following is broken for curves due to
- // move to proper paths.
-
- // Figure out dimensions so we can do gradient fills
- // properly
- if(c) {
- if (min.x == null || c.x < min.x) {
- min.x = c.x;
- }
- if (max.x == null || c.x > max.x) {
- max.x = c.x;
- }
- if (min.y == null || c.y < min.y) {
- min.y = c.y;
- }
- if (max.y == null || c.y > max.y) {
- max.y = c.y;
- }
- }
- }
- lineStr.push(' ">');
-
- if (typeof this.fillStyle == "object") {
- var focus = {x: "50%", y: "50%"};
- var width = (max.x - min.x);
- var height = (max.y - min.y);
- var dimension = (width > height) ? width : height;
-
- focus.x = mr((this.fillStyle.focus_.x / width) * 100 + 50) + "%";
- focus.y = mr((this.fillStyle.focus_.y / height) * 100 + 50) + "%";
-
- var colors = [];
-
- // inside radius (%)
- if (this.fillStyle.type_ == "gradientradial") {
- var inside = (this.fillStyle.radius1_ / dimension * 100);
-
- // percentage that outside radius exceeds inside radius
- var expansion = (this.fillStyle.radius2_ / dimension * 100) - inside;
- } else {
- var inside = 0;
- var expansion = 100;
- }
-
- var insidecolor = {offset: null, color: null};
- var outsidecolor = {offset: null, color: null};
-
- // We need to sort 'colors' by percentage, from 0 > 100 otherwise ie
- // won't interpret it correctly
- this.fillStyle.colors_.sort(function (cs1, cs2) {
- return cs1.offset - cs2.offset;
- });
-
- for (var i = 0; i < this.fillStyle.colors_.length; i++) {
- var fs = this.fillStyle.colors_[i];
-
- colors.push( (fs.offset * expansion) + inside, "% ", fs.color, ",");
-
- if (fs.offset > insidecolor.offset || insidecolor.offset == null) {
- insidecolor.offset = fs.offset;
- insidecolor.color = fs.color;
- }
-
- if (fs.offset < outsidecolor.offset || outsidecolor.offset == null) {
- outsidecolor.offset = fs.offset;
- outsidecolor.color = fs.color;
- }
- }
- colors.pop();
-
- lineStr.push('<g_vml_:fill',
- ' color="', outsidecolor.color, '"',
- ' color2="', insidecolor.color, '"',
- ' type="', this.fillStyle.type_, '"',
- ' focusposition="', focus.x, ', ', focus.y, '"',
- ' colors="', colors.join(""), '"',
- ' opacity="', opacity, '" />');
- } else if (aFill) {
- lineStr.push('<g_vml_:fill color="', color, '" opacity="', opacity, '" />');
- } else {
- lineStr.push(
- '<g_vml_:stroke',
- ' opacity="', opacity,'"',
- ' joinstyle="', this.lineJoin, '"',
- ' miterlimit="', this.miterLimit, '"',
- ' endcap="', processLineCap(this.lineCap) ,'"',
- ' weight="', this.lineWidth, 'px"',
- ' color="', color,'" />'
- );
- }
-
- lineStr.push("</g_vml_:shape>");
-
- this.element_.insertAdjacentHTML("beforeEnd", lineStr.join(""));
-
- this.currentPath_ = [];
- };
-
- contextPrototype.fill = function() {
- this.stroke(true);
- }
-
- contextPrototype.closePath = function() {
- this.currentPath_.push({type: "close"});
- };
-
- /**
- * @private
- */
- contextPrototype.getCoords_ = function(aX, aY) {
- return {
- x: 10 * (aX * this.m_[0][0] + aY * this.m_[1][0] + this.m_[2][0]) - 5,
- y: 10 * (aX * this.m_[0][1] + aY * this.m_[1][1] + this.m_[2][1]) - 5
- }
- };
-
- 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() {
- copyState(this.aStack_.pop(), this);
- this.m_ = this.mStack_.pop();
- };
-
- contextPrototype.translate = function(aX, aY) {
- var m1 = [
- [1, 0, 0],
- [0, 1, 0],
- [aX, aY, 1]
- ];
-
- this.m_ = matrixMultiply(m1, this.m_);
- };
-
- contextPrototype.rotate = function(aRot) {
- var c = mc(aRot);
- var s = ms(aRot);
-
- var m1 = [
- [c, s, 0],
- [-s, c, 0],
- [0, 0, 1]
- ];
-
- this.m_ = matrixMultiply(m1, this.m_);
- };
-
- contextPrototype.scale = function(aX, aY) {
- this.arcScaleX_ *= aX;
- this.arcScaleY_ *= aY;
- var m1 = [
- [aX, 0, 0],
- [0, aY, 0],
- [0, 0, 1]
- ];
-
- this.m_ = matrixMultiply(m1, this.m_);
- };
-
- /******** STUBS ********/
- contextPrototype.clip = function() {
- // TODO: Implement
- };
-
- contextPrototype.arcTo = function() {
- // TODO: Implement
- };
-
- contextPrototype.createPattern = function() {
- return new CanvasPattern_;
- };
-
- // Gradient / Pattern Stubs
- function CanvasGradient_(aType) {
- this.type_ = aType;
- this.radius1_ = 0;
- this.radius2_ = 0;
- this.colors_ = [];
- this.focus_ = {x: 0, y: 0};
- }
-
- CanvasGradient_.prototype.addColorStop = function(aOffset, aColor) {
- aColor = processStyle(aColor);
- this.colors_.push({offset: 1-aOffset, color: aColor});
- };
-
- function CanvasPattern_() {}
-
- // set up externs
- G_vmlCanvasManager = G_vmlCanvasManager_;
- CanvasRenderingContext2D = CanvasRenderingContext2D_;
- CanvasGradient = CanvasGradient_;
- CanvasPattern = CanvasPattern_;
-
-})();
-
-} // if
+++ /dev/null
-For more information, go to http://www.liquidx.net/plotkit/.
+++ /dev/null
-.. title: MochiKit Additions
-
+++ /dev/null
-.. title: MochiKit Additions
-
+++ /dev/null
-
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" >
-<head>
- <title>PlotKit.Base | liquidx</title>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link href="http://media.liquidx.net/css/x_general.css" media="screen" rel="Stylesheet" type="text/css" />
- <link href="http://media.liquidx.net/css/x_header.css" media="screen" rel="Stylesheet" type="text/css" />
- <link href="http://media.liquidx.net/css/x_layout.css" media="screen" rel="Stylesheet" type="text/css" />
- <link href="http://media.liquidx.net/css/x_blocks.css" media="screen" rel="Stylesheet" type="text/css" />
- <link rel="icon" href="/favicon.png" type="image/x-png">
- <link rel="shortcut icon" href="/favicon.png" type="image/x-png">
- <!--[if lt IE 7.]>
- <script defer type="text/javascript" src="http://media.liquidx.net/js/pngfix.js"></script>
- <![endif]-->
-
-<link href="doc.css" media="screen" rel="stylesheet" type="text/css" />
-
-</head>
-
-<body>
- <div id="header">
- <div id="logo"><a href="http://www.liquidx.net/"><img src="http://media.liquidx.net/imgx/logo.png" width="256" height="128" alt="liquidx.net" /></a></div>
- <div id="menu-hack">
- <div id="menu-l"><img src="http://media.liquidx.net/imgx/menu_l.png" width="17" height="28" alt="menu cap" /></div><div id="menu-r"><img src="http://media.liquidx.net/imgx/menu_r.png" width="17" height="28" alt="menu cap" /></div>
- <div id="menu-main">
- <ul id="menu" class="code">
- <li class="tab" id="blog"><a href="http://www.liquidx.net/" title="blog/home">blog</a></li>
- <li class="tab" id="code"><a href="http://www.liquidx.net/code/" title="software i have written">software</a></li>
- <li class="tab" id="dev"><a href="http://projects.liquidx.net/" title="source code for my open source projects">dev</a></li>
- <li class="tab" id="photos"><a href="http://al.tse.id.au/gallery/" title="photos and videos">photos</a></li>
- <li class="tab" id="research"><a href="http://al.tse.id.au/research/" title="research profile">research</a></li>
- <li class="tab" id="links"><a href="http://www.liquidx.net/links/" title="my bookmarks">linkblog</a></li>
- <li class="tab" id="stats"><a href="http://stats.liquidx.net/" title="stats for various parts of my website">stats</a></li>
- <li class="tab" id="status"><a href="http://www.liquidx.net/status/" title="weather report for alastair">status</a></li>
- <li class="tab" id="about"><a href="http://al.tse.id.au/" title="about alastair tse">aboutme</a></li>
- </ul>
- </div>
- </div>
- <div id="quickbuttons">
- <span class="quickbutton"><a href="http://www.liquidx.net/albumartwidget/"><img src="http://media.liquidx.net/imgx/quick_widget.png" alt="album art widget" /></a></span>
- <span class="quickbutton"><a href="http://www.liquidx.net/plotkit/"><img src="http://media.liquidx.net/imgx/quick_plotkit.png" alt="plotkit" /></a></span>
- <span class="quickbutton"><a href="http://www.liquidx.net/fruity/"><img src="http://media.liquidx.net/imgx/quick_fruity.png" alt="fruity" /></a></span>
- </div>
-
- </div>
-
- <div id="body">
-<div class="page doc api">
-
-<p> <a href="PlotKit.html">PlotKit Home</a> | <a href="PlotKit.Layout.html">>></a>
-</p>
-
-<h1> PlotKit Base</h1>
-<p>PlotKit Base contains a number of simple functions that are needed for the rest of the PlotKit libraries.
-</p>
-
-<h2> PlotKit.Base Functions</h2>
-<ul>
- <li>
- <code>collapse()</code>
- </li>
-</ul>
-<p> Given an array, it will collapse all the values from the passed array into one big array.
-</p>
-<p> <code>[[1,2], [3,4], [5,6]] --> [1, 2, 3, 4, 5, 6]</code>
-</p>
-<ul>
- <li>
- <code>findPosX(element)</code>
- </li>
-</ul>
-<p> Returns the X value of the element relative to the document in a browser independent way.
-</p>
-<ul>
- <li>
- <code>findPosY(element)</code>
- </li>
-</ul>
-<p> Returns the Y value of the element relative to the document in a browser independent way.
-</p>
-<ul>
- <li>
- <code>palette(baseColor, fromLevel = -0.2, toLevel = 0.2, increment = 0.1)</code>
- </li>
-</ul>
-<p> Takes in a base colour and generates a palette of colours based on the intensive levels.
-</p>
-<ul>
- <li>
- <code>roundInterval(value, precision)</code>
- </li>
-</ul>
-<p> Rounds a number to a specified precision. <strong>TODO: make more robust</strong>
-</p>
-<ul>
- <li>
- <code>uniq(array)</code>
- </li>
-</ul>
-<p> Acts like the UNIX uniq, takes a sorted array and returns a new array that only contains uniq elements.
-</p>
-<ul>
- <li>
- <code>isFuncLike(obj)</code> (PlotKit 0.9+)
- </li>
-</ul>
-<p> Returns true if it is of type <code>function</code>.
-</p>
-<ul>
- <li>
- <code>usingPrototype()</code> (PlotKit 0.9+)
- </li>
-</ul>
-<p> Checks whether the javascript runtime is polluted by prototype.js
-</p>
-<ul>
- <li>
- <code>items(lst)</code> (PlotKit 0.9+)
- </li>
-</ul>
-<p> A version of <code>MochiKit.Base.items()</code> that is aware of prototype.js
-</p>
-<ul>
- <li>
- <code>keys(lst)</code> (PlotKit 0.9+)
- </li>
-</ul>
-<p> A version of <code>MochiKit.Base.keys()</code> that is aware of prototype.js
-</p>
-<ul>
- <li>
- <code>map(fn, lst)</code> (PlotKit 0.9+)
- </li>
-</ul>
-<p> A version of <code>MochiKit.Base.map()</code> that is aware of prototype.js
-</p>
-
-<h1> Preset Styles</h1>
-
-<h2> Color Schemes</h2>
-<p>There are some colour schemes, which are an array of
- MochiKit.Color.Colors.
-</p>
-<ul>
- <li>
- <code>colorScheme()</code>
- </li>
-</ul>
-<p>A default colour scheme that consists of red, orange, yellow, green, cyan, blue, purple and magenta.
-</p>
-<ul>
- <li>
- <code>baseDarkPrimaryColors()</code>
- </li>
-</ul>
-<p>A set of five dark colours.
-</p>
-<ul>
- <li>
- <code>basePrimaryColors()</code>
- </li>
-</ul>
-<p>A set of five bright primary colours.
-</p>
-<ul>
- <li>
- <code>baseBlueColors()</code>
- </li>
-</ul>
-<p>Three colour set that have a nice professional blue hue.
-</p>
-
-<h2> Office Style</h2>
-<p>These are base styles that were inspired by charts in Office 12. The
- color schemes are fairly similar to those found in screenshots of
- charts available online.
-</p>
-<ul>
- <li>
- <code>officeBaseStyle</code>
- </li>
-</ul>
-<p> Contains the basic style independent of colours.
-</p>
-<ul>
- <li>
- <code>officeBlue()</code>
- </li>
-</ul>
-<p> Blue colors: <img src="blue.png" alt="bluecolors"/>
-</p>
-<ul>
- <li>
- <code>officeRed()</code>
- </li>
-</ul>
-<p> Red colors: <img src="red.png" alt="redcolors"/>
-</p>
-<ul>
- <li>
- <code>officeGreen()</code>
- </li>
-</ul>
-<p> Green colors: <img src="green.png" alt="greencolors"/>
-</p>
-<ul>
- <li>
- <code>officePurple()</code>
- </li>
-</ul>
-<p> Purple colors: <img src="purple.png" alt="purplecolors"/>
-</p>
-<ul>
- <li>
- <code>officeCyan()</code>
- </li>
-</ul>
-<p> Cyan colors: <img src="cyan.png" alt="cyancolors"/>
-</p>
-<ul>
- <li>
- <code>officeOrange()</code>
- </li>
-</ul>
-<p> Orange colors: <img src="orange.png" alt="orangecolors"/>
-</p>
-<ul>
- <li>
- <code>officeBlack()</code>
- </li>
-</ul>
-<p> Black colors: <img src="black.png" alt="blackcolors"/>
-</p>
-
-<h2> Usage</h2>
-<p> <code>var layout = PlotKit.Layout("bar", officeOrange());</code>
-</p>
-
-
-</div>
-</div>
-
-
-
-
- <div id="footer">
- <div class="block">
- <h3>Syndication Feeds:</h3>
- <p>
- <ul class="tiny">
- <li><a href="http://www.liquidx.net/blog/feed/atom/" class="feed" title="feed for all posts on liquidx.net"><img src="http://media.liquidx.net/imgx/feed.gif" class="feed" alt="feed" />Atom Feed for the Blog Entries</a></li>
- <li><a href="http://www.liquidx.net/blog/feed/rss/" class="feed" title="feed for all posts on liquidx.net"><img src="http://media.liquidx.net/imgx/feed.gif" class="feed" alt="feed" />RSS Feed for the Blog Entries</a></li>
- <li><a href="http://www.liquidx.net/comments/feed/atom/" class="feed" title="feed for all posts on liquidx.net"><img src="http://media.liquidx.net/imgx/feed.gif" class="feed" alt="feed" />Feed for All Comments</a></li>
- <li><a href="http://www.liquidx.net/links/feed/atom/" class="feed" title="feed for all bookmarked links"><img src="http://media.liquidx.net/imgx/feed.gif" class="feed" alt="feed" />Feed for Links</a></li>
- </ul>
- </p>
- </div>
- <div class="block">
- <h3>About this site:</h3>
- <p>Content on this site is licensed under <a href="http://creativecommons.org/licenses/by/2.5/">CC By Attribution</a> unless otherwise specified.
- Copyright (c) 2002-2006, <a href="http://al.tse.id.au/">Alastair Tse</a>.</p>
- <p>For more information, see <a href="http://al.tse.id.au/">al.tse.id.au</a>.</p>
- <p><script type="text/javascript" src="http://technorati.com/embed/itwctkzez.js"></script></p>
- </div>
- <div class="block">
- <h3>Is Made Possible By:</h3>
- <p>
- <dl>
- <dt><a href="http://ecto.kung-foo.tv/" class="clean">ecto</a>. </dt>
- <dd>Blogging client for Mac</dd>
- <dt><a href="http://djangoproject.com/" class="clean">Django</a>. </dt>
- <dd>Python Web Framework</dd>
- <dt><a href="http://www.lighttpd.net/" class="clean">lighttpd</a>. </dt>
- <dd>Really Fast Web Server</dd>
- <dt><a href="http://www.saddi.com/software/flup/" class="clean">flup</a>. </dt>
- <dd>FastCGI for Python</dd>
- </dl>
- </p>
- </div>
- <div class="block">
- <h3>Search My Sites:</h3>
- <p>
- <div style='margin: 10px; text-align: center; width: 160px;'><form action='http://www.rollyo.com/search.html' ><fieldset style='margin: 0; padding: 4px 0 0 0; height: 60px; border: none; background: url(http://rollyo.com/remote/togo-bg4.png) no-repeat top left;'><div style="position: absolute; float:left; z-index:99; width: 46px; height: 50px;"><a href="http://rollyo.com"><img style="border: none;" height="50" width="46" src="http://rollyo.com/remote/x.gif"></a></div> <input type='text' size='30' style='float: left; width: 90px; margin: 2px 0 0 48px; padding: 0; font-size: 12px;' name='q' value='Search...' onclick='this.value="";' /><br /> <select name='sid' style='float: left; width: 78px; height: 15px; margin: 12px 0 0 46px; font-size: 7pt; padding: 0;'><option value='106081' selected='selected'>liquidx</option><option value='web'>Search The Web</option></select><input type='image' src='http://rollyo.com/remote/btn-togo.png' alt='Go' style='margin: 12px 0 0 3px; float: left;' /><input type='hidden' name='togo-v' value='1' /></fieldset></form></div>
- </p>
- </div>
-
-
- <div class="clear"> </div>
-
- </div>
-
-
-
- <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
- <script type="text/javascript">
- _uacct = "UA-58117-1";
- urchinTracker();
- </script>
-
-</body>
-</html>
+++ /dev/null
-{% extends "basex.html" %}
-{% load markup %}
-{% block pageid %}code{% endblock %}
-{% block headers %}
-<link href="doc.css" media="screen" rel="stylesheet" type="text/css" />
-{% endblock %}
-{% block title %}PlotKit.Base{% endblock %}
-
-{% block content %}
-<div class="page doc api">
-{% filter markdown %}
-[PlotKit Home](PlotKit.html) | [>>](PlotKit.Layout.html)
-
-PlotKit Base
-============
-
-PlotKit Base contains a number of simple functions that are needed for the rest of the PlotKit libraries.
-
-PlotKit.Base Functions
-----------------------
-
-* ``collapse()``
-
- Given an array, it will collapse all the values from the passed array into one big array.
-
- ``[[1,2], [3,4], [5,6]] --> [1, 2, 3, 4, 5, 6]``
-
-* ``findPosX(element)``
-
- Returns the X value of the element relative to the document in a browser independent way.
-
-* ``findPosY(element)``
-
- Returns the Y value of the element relative to the document in a browser independent way.
-
-* ``palette(baseColor, fromLevel = -0.2, toLevel = 0.2, increment = 0.1)``
-
- Takes in a base colour and generates a palette of colours based on the intensive levels.
-
-* ``roundInterval(value, precision)``
-
- Rounds a number to a specified precision. __TODO: make more robust__
-
-* ``uniq(array)``
-
- Acts like the UNIX uniq, takes a sorted array and returns a new array that only contains uniq elements.
-
-* ``isFuncLike(obj)`` (PlotKit 0.9+)
-
- Returns true if it is of type ``function``.
-
-* ``usingPrototype()`` (PlotKit 0.9+)
-
- Checks whether the javascript runtime is polluted by prototype.js
-
-* ``items(lst)`` (PlotKit 0.9+)
-
- A version of ``MochiKit.Base.items()`` that is aware of prototype.js
-
-* ``keys(lst)`` (PlotKit 0.9+)
-
- A version of ``MochiKit.Base.keys()`` that is aware of prototype.js
-
-* ``map(fn, lst)`` (PlotKit 0.9+)
-
- A version of ``MochiKit.Base.map()`` that is aware of prototype.js
-
-Preset Styles
-=============
-
-Color Schemes
--------------
-
-There are some colour schemes, which are an array of
-MochiKit.Color.Colors.
-
-* ``colorScheme()``
-
-A default colour scheme that consists of red, orange, yellow, green, cyan, blue, purple and magenta.
-
-* ``baseDarkPrimaryColors()``
-
-A set of five dark colours.
-
-* ``basePrimaryColors()``
-
-A set of five bright primary colours.
-
-* ``baseBlueColors()``
-
-Three colour set that have a nice professional blue hue.
-
-Office Style
-------------
-
-These are base styles that were inspired by charts in Office 12. The
-color schemes are fairly similar to those found in screenshots of
-charts available online.
-
-* ``officeBaseStyle``
-
- Contains the basic style independent of colours.
-
-* ``officeBlue()``
-
- Blue colors: 
-
-* ``officeRed()``
-
- Red colors: 
-
-* ``officeGreen()``
-
- Green colors: 
-
-* ``officePurple()``
-
- Purple colors: 
-
-* ``officeCyan()``
-
- Cyan colors: 
-
-* ``officeOrange()``
-
- Orange colors: 
-
-* ``officeBlack()``
-
- Black colors: 
-
-Usage
------
-
- ``var layout = PlotKit.Layout("bar", officeOrange());``
-
-{% endfilter %}
-</div>
-{% endblock %}
\ No newline at end of file
+++ /dev/null
-
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" >
-<head>
- <title>PlotKit.Canvas | liquidx</title>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link href="http://media.liquidx.net/css/x_general.css" media="screen" rel="Stylesheet" type="text/css" />
- <link href="http://media.liquidx.net/css/x_header.css" media="screen" rel="Stylesheet" type="text/css" />
- <link href="http://media.liquidx.net/css/x_layout.css" media="screen" rel="Stylesheet" type="text/css" />
- <link href="http://media.liquidx.net/css/x_blocks.css" media="screen" rel="Stylesheet" type="text/css" />
- <link rel="icon" href="/favicon.png" type="image/x-png">
- <link rel="shortcut icon" href="/favicon.png" type="image/x-png">
- <!--[if lt IE 7.]>
- <script defer type="text/javascript" src="http://media.liquidx.net/js/pngfix.js"></script>
- <![endif]-->
-
-<link href="doc.css" media="screen" rel="stylesheet" type="text/css" />
-
-</head>
-
-<body>
- <div id="header">
- <div id="logo"><a href="http://www.liquidx.net/"><img src="http://media.liquidx.net/imgx/logo.png" width="256" height="128" alt="liquidx.net" /></a></div>
- <div id="menu-hack">
- <div id="menu-l"><img src="http://media.liquidx.net/imgx/menu_l.png" width="17" height="28" alt="menu cap" /></div><div id="menu-r"><img src="http://media.liquidx.net/imgx/menu_r.png" width="17" height="28" alt="menu cap" /></div>
- <div id="menu-main">
- <ul id="menu" class="code">
- <li class="tab" id="blog"><a href="http://www.liquidx.net/" title="blog/home">blog</a></li>
- <li class="tab" id="code"><a href="http://www.liquidx.net/code/" title="software i have written">software</a></li>
- <li class="tab" id="dev"><a href="http://projects.liquidx.net/" title="source code for my open source projects">dev</a></li>
- <li class="tab" id="photos"><a href="http://al.tse.id.au/gallery/" title="photos and videos">photos</a></li>
- <li class="tab" id="research"><a href="http://al.tse.id.au/research/" title="research profile">research</a></li>
- <li class="tab" id="links"><a href="http://www.liquidx.net/links/" title="my bookmarks">linkblog</a></li>
- <li class="tab" id="stats"><a href="http://stats.liquidx.net/" title="stats for various parts of my website">stats</a></li>
- <li class="tab" id="status"><a href="http://www.liquidx.net/status/" title="weather report for alastair">status</a></li>
- <li class="tab" id="about"><a href="http://al.tse.id.au/" title="about alastair tse">aboutme</a></li>
- </ul>
- </div>
- </div>
- <div id="quickbuttons">
- <span class="quickbutton"><a href="http://www.liquidx.net/albumartwidget/"><img src="http://media.liquidx.net/imgx/quick_widget.png" alt="album art widget" /></a></span>
- <span class="quickbutton"><a href="http://www.liquidx.net/plotkit/"><img src="http://media.liquidx.net/imgx/quick_plotkit.png" alt="plotkit" /></a></span>
- <span class="quickbutton"><a href="http://www.liquidx.net/fruity/"><img src="http://media.liquidx.net/imgx/quick_fruity.png" alt="fruity" /></a></span>
- </div>
-
- </div>
-
- <div id="body">
-<div class="page doc api">
-
-<p> <a href="PlotKit.html">PlotKit Home</a> | <a href="PlotKit.Renderer.html"><<</a> | <a href="PlotKit.SVG.html">>></a>
-</p>
-
-<h1> PlotKit Canvas</h1>
-<p>This contains the CanvasRenderer, the default renderer and most well supported one used in PlotKit.
-</p>
-<p>It supports Safari 2, Firefox 1.5, Opera 9 and IE 6. Note that for IE6
- support, you will need iecanvas.htc which is included with PlotKit.
-</p>
-<p>Please see the <a href="SVGCanvasCompat.html">Canvas/SVG Browser Support Status</a> for bugs
- with the Canvas implementation on different browsers.
-</p>
-
-<h2> PlotKit Canvas Extra Options</h2>
-<p>In addition to the options outlined in <a href="PlotKit.Renderer.html">PlotKit.Renderer</a>, here are additional options that the CanvasRenderer supports.
-</p>
-<table>
- <thead>
- <tr><td>Option name</td><td>Description</td><td>Type</td><td>Default</td></tr>
- </thead>
- <tbody>
- <tr>
- <th>IECanvasHTC</th>
- <td>Path relative to the HTML document of the iecanvas.htc file.</td>
- <td>string</td>
- <td>iecanvas.htc</td>
- </tr>
- </tbody>
-</table>
-
-
-<h2> PlotKit Canvas Example</h2>
-<pre><code>var options = {
- "drawsBackground": true,
- "drawYAxis": false,
- "IECanvasHTC": "contrib/iecanvas.htc"
-};
-
-var layout = new Layout("bar", {});
-layout.addDataset("squares", [[0, 0], [1, 1], [2, 4], [3, 9], [4, 16]]);
-layout.evaluate()
-var renderer = new CanvasRenderer($('canvas'), layout, options);
-layout.render();
-</code></pre>
-<h2> PlotKit Canvas Events/Signals</h2>
-<p>There is preliminary support for events in the CanvasRenderer. If <code>enableEvents</code> is set <code>true</code> in the options, you can hook into the <code>onmousemove</code>, <code>onclick</code>, <code>onmouseover</code> and <code>onmouseout</code> events via the MochiKit.Signal.connect. Note that you must have included MochiKit/Signal.js before instantiating the CanvasRenderer
-</p>
-
-<h2> PlotKit Canvas Notes</h2>
-
-<h3> IE Support</h3>
-<p>IE Support is done thanks to webfx's great iecanvas.htc which emulates
- part of the WHATWG canvas specification. Note that alpha values and
- clear() does not work in IE.
-</p>
-<p>Remember that iecanvas.htc <strong>must</strong> reside on the same domain as the
- HTML page itself.
-</p>
-
-
-</div>
-</div>
-
-
-
-
- <div id="footer">
- <div class="block">
- <h3>Syndication Feeds:</h3>
- <p>
- <ul class="tiny">
- <li><a href="http://www.liquidx.net/blog/feed/atom/" class="feed" title="feed for all posts on liquidx.net"><img src="http://media.liquidx.net/imgx/feed.gif" class="feed" alt="feed" />Atom Feed for the Blog Entries</a></li>
- <li><a href="http://www.liquidx.net/blog/feed/rss/" class="feed" title="feed for all posts on liquidx.net"><img src="http://media.liquidx.net/imgx/feed.gif" class="feed" alt="feed" />RSS Feed for the Blog Entries</a></li>
- <li><a href="http://www.liquidx.net/comments/feed/atom/" class="feed" title="feed for all posts on liquidx.net"><img src="http://media.liquidx.net/imgx/feed.gif" class="feed" alt="feed" />Feed for All Comments</a></li>
- <li><a href="http://www.liquidx.net/links/feed/atom/" class="feed" title="feed for all bookmarked links"><img src="http://media.liquidx.net/imgx/feed.gif" class="feed" alt="feed" />Feed for Links</a></li>
- </ul>
- </p>
- </div>
- <div class="block">
- <h3>About this site:</h3>
- <p>Content on this site is licensed under <a href="http://creativecommons.org/licenses/by/2.5/">CC By Attribution</a> unless otherwise specified.
- Copyright (c) 2002-2006, <a href="http://al.tse.id.au/">Alastair Tse</a>.</p>
- <p>For more information, see <a href="http://al.tse.id.au/">al.tse.id.au</a>.</p>
- <p><script type="text/javascript" src="http://technorati.com/embed/itwctkzez.js"></script></p>
- </div>
- <div class="block">
- <h3>Is Made Possible By:</h3>
- <p>
- <dl>
- <dt><a href="http://ecto.kung-foo.tv/" class="clean">ecto</a>. </dt>
- <dd>Blogging client for Mac</dd>
- <dt><a href="http://djangoproject.com/" class="clean">Django</a>. </dt>
- <dd>Python Web Framework</dd>
- <dt><a href="http://www.lighttpd.net/" class="clean">lighttpd</a>. </dt>
- <dd>Really Fast Web Server</dd>
- <dt><a href="http://www.saddi.com/software/flup/" class="clean">flup</a>. </dt>
- <dd>FastCGI for Python</dd>
- </dl>
- </p>
- </div>
- <div class="block">
- <h3>Search My Sites:</h3>
- <p>
- <div style='margin: 10px; text-align: center; width: 160px;'><form action='http://www.rollyo.com/search.html' ><fieldset style='margin: 0; padding: 4px 0 0 0; height: 60px; border: none; background: url(http://rollyo.com/remote/togo-bg4.png) no-repeat top left;'><div style="position: absolute; float:left; z-index:99; width: 46px; height: 50px;"><a href="http://rollyo.com"><img style="border: none;" height="50" width="46" src="http://rollyo.com/remote/x.gif"></a></div> <input type='text' size='30' style='float: left; width: 90px; margin: 2px 0 0 48px; padding: 0; font-size: 12px;' name='q' value='Search...' onclick='this.value="";' /><br /> <select name='sid' style='float: left; width: 78px; height: 15px; margin: 12px 0 0 46px; font-size: 7pt; padding: 0;'><option value='106081' selected='selected'>liquidx</option><option value='web'>Search The Web</option></select><input type='image' src='http://rollyo.com/remote/btn-togo.png' alt='Go' style='margin: 12px 0 0 3px; float: left;' /><input type='hidden' name='togo-v' value='1' /></fieldset></form></div>
- </p>
- </div>
-
-
- <div class="clear"> </div>
-
- </div>
-
-
-
- <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
- <script type="text/javascript">
- _uacct = "UA-58117-1";
- urchinTracker();
- </script>
-
-</body>
-</html>
+++ /dev/null
-{% extends "basex.html" %}
-{% load markup %}
-{% block pageid %}code{% endblock %}
-{% block headers %}
-<link href="doc.css" media="screen" rel="stylesheet" type="text/css" />
-{% endblock %}
-{% block title %}PlotKit.Canvas{% endblock %}
-
-{% block content %}
-<div class="page doc api">
-{% filter markdown %}
-[PlotKit Home](PlotKit.html) | [<<](PlotKit.Renderer.html) | [>>](PlotKit.SVG.html)
-
-PlotKit Canvas
-==============
-
-This contains the CanvasRenderer, the default renderer and most well supported one used in PlotKit.
-
-It supports Safari 2, Firefox 1.5, Opera 9 and IE 6. Note that for IE6
-support, you will need iecanvas.htc which is included with PlotKit.
-
-Please see the [Canvas/SVG Browser Support Status][Browser] for bugs
-with the Canvas implementation on different browsers.
-
-PlotKit Canvas Extra Options
-----------------------------
-
-In addition to the options outlined in [PlotKit.Renderer][], here are additional options that the CanvasRenderer supports.
-
-<table>
- <thead>
- <tr><td>Option name</td><td>Description</td><td>Type</td><td>Default</td></tr>
- </thead>
- <tbody>
- <tr>
- <th>IECanvasHTC</th>
- <td>Path relative to the HTML document of the iecanvas.htc file.</td>
- <td>string</td>
- <td>iecanvas.htc</td>
- </tr>
- </tbody>
-</table>
-
-PlotKit Canvas Example
-----------------------
-
- var options = {
- "drawsBackground": true,
- "drawYAxis": false,
- "IECanvasHTC": "contrib/iecanvas.htc"
- };
-
- var layout = new Layout("bar", {});
- layout.addDataset("squares", [[0, 0], [1, 1], [2, 4], [3, 9], [4, 16]]);
- layout.evaluate()
- var renderer = new CanvasRenderer($('canvas'), layout, options);
- layout.render();
-
-PlotKit Canvas Events/Signals
------------------------------
-
-There is preliminary support for events in the CanvasRenderer. If ``enableEvents`` is set ``true`` in the options, you can hook into the ``onmousemove``, ``onclick``, ``onmouseover`` and ``onmouseout`` events via the MochiKit.Signal.connect. Note that you must have included MochiKit/Signal.js before instantiating the CanvasRenderer
-
-PlotKit Canvas Notes
---------------------
-
-### IE Support
-
-IE Support is done thanks to webfx's great iecanvas.htc which emulates
-part of the WHATWG canvas specification. Note that alpha values and
-clear() does not work in IE.
-
-Remember that iecanvas.htc __must__ reside on the same domain as the
-HTML page itself.
-
-[PlotKit.Renderer]: PlotKit.Renderer.html
-[Browser]: SVGCanvasCompat.html
-
-{% endfilter %}
-</div>
-{% endblock %}
\ No newline at end of file
+++ /dev/null
-
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" >
-<head>
- <title>PlotKit.Canvas | liquidx</title>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link href="http://media.liquidx.net/css/x_general.css" media="screen" rel="Stylesheet" type="text/css" />
- <link href="http://media.liquidx.net/css/x_header.css" media="screen" rel="Stylesheet" type="text/css" />
- <link href="http://media.liquidx.net/css/x_layout.css" media="screen" rel="Stylesheet" type="text/css" />
- <link href="http://media.liquidx.net/css/x_blocks.css" media="screen" rel="Stylesheet" type="text/css" />
- <link rel="icon" href="/favicon.png" type="image/x-png">
- <link rel="shortcut icon" href="/favicon.png" type="image/x-png">
- <!--[if lt IE 7.]>
- <script defer type="text/javascript" src="http://media.liquidx.net/js/pngfix.js"></script>
- <![endif]-->
-
-<link href="doc.css" media="screen" rel="stylesheet" type="text/css" />
-
-</head>
-
-<body>
- <div id="header">
- <div id="logo"><a href="http://www.liquidx.net/"><img src="http://media.liquidx.net/imgx/logo.png" width="256" height="128" alt="liquidx.net" /></a></div>
- <div id="menu-hack">
- <div id="menu-l"><img src="http://media.liquidx.net/imgx/menu_l.png" width="17" height="28" alt="menu cap" /></div><div id="menu-r"><img src="http://media.liquidx.net/imgx/menu_r.png" width="17" height="28" alt="menu cap" /></div>
- <div id="menu-main">
- <ul id="menu" class="code">
- <li class="tab" id="blog"><a href="http://www.liquidx.net/" title="blog/home">blog</a></li>
- <li class="tab" id="code"><a href="http://www.liquidx.net/code/" title="software i have written">software</a></li>
- <li class="tab" id="dev"><a href="http://projects.liquidx.net/" title="source code for my open source projects">dev</a></li>
- <li class="tab" id="photos"><a href="http://al.tse.id.au/gallery/" title="photos and videos">photos</a></li>
- <li class="tab" id="research"><a href="http://al.tse.id.au/research/" title="research profile">research</a></li>
- <li class="tab" id="links"><a href="http://www.liquidx.net/links/" title="my bookmarks">linkblog</a></li>
- <li class="tab" id="stats"><a href="http://stats.liquidx.net/" title="stats for various parts of my website">stats</a></li>
- <li class="tab" id="status"><a href="http://www.liquidx.net/status/" title="weather report for alastair">status</a></li>
- <li class="tab" id="about"><a href="http://al.tse.id.au/" title="about alastair tse">aboutme</a></li>
- </ul>
- </div>
- </div>
- <div id="quickbuttons">
- <span class="quickbutton"><a href="http://www.liquidx.net/albumartwidget/"><img src="http://media.liquidx.net/imgx/quick_widget.png" alt="album art widget" /></a></span>
- <span class="quickbutton"><a href="http://www.liquidx.net/plotkit/"><img src="http://media.liquidx.net/imgx/quick_plotkit.png" alt="plotkit" /></a></span>
- <span class="quickbutton"><a href="http://www.liquidx.net/fruity/"><img src="http://media.liquidx.net/imgx/quick_fruity.png" alt="fruity" /></a></span>
- </div>
-
- </div>
-
- <div id="body">
-<div class="page doc api">
-
-<p> <a href="PlotKit.html">PlotKit Home</a> | <a href="PlotKit.SweetSVG.html"><<</a>
-</p>
-
-<h1> PlotKit EasyPlot</h1>
-<p>EasyPlot is a wrapper around the various PlotKit classes to allow you to get a chart plotted as quick as possible with as little code as possible. Using EasyPlot, you will get a chart started with just a single line.
-</p>
-
-<h2> Constructor</h2>
-<p> <code>PlotKit.EasyPlot(style, options, divElement, datasourceArray)</code>
-</p>
-<p>EasyPlot object will automatically choose the supported render method, currently Canvas or SVG in that order, and render the datasources given in <code>datasourceArray</code>.
-</p>
-
-<h3> Arguments:</h3>
-<ul>
- <li>
- <code>style</code> may be <code>line</code>, <code>bar</code> or <code>pie</code>.
- </li>
-
- <li>
- <code>options</code> is an associative dictionary that is the combined options of both <code>Layout</code> and <code>Renderer</code>.
- </li>
-
- <li>
- <code>divElement</code> is the container that the chart should be rendered in. It is best that the <code>width</code> and <code>height</code> attribute is set in the <code>DIV</code> element.
- </li>
-
- <li>
- <code>datasourceArray</code> is an array of data sources. The elements of the array can either be a two dimensional array given in <code>Plotkit.Layout.addDataset</code> or it can be a string that points to the relative URL of a comma separated data file.
- </li>
-</ul>
-
-<h2> EasyPlot Example</h2>
-<pre><code><div id="example" style="margin: 0 auto 0 auto;" width="400" height="400"></div>
-
-<script type="text/javascript">
-var data = [[0,0], [1,2], [2,3], [3, 7], [4, 8], [5, 6]];
-var plotter = EasyPlot("line", {}, $("example"), [data, "sample.txt"]);
-</script>
-</code></pre><p>In this example, two datasets are passed, one defined as a 2D array and another which is a comma separated text file (CSV) at the location "sample.txt". A demonstration of this is found in the <a href="http://media.liquidx.net/js/plotkit-tests/quickstart-easy.html">QuickStartEasy</a> example.
-</p>
-
-
-</div>
-</div>
-
-
-
-
- <div id="footer">
- <div class="block">
- <h3>Syndication Feeds:</h3>
- <p>
- <ul class="tiny">
- <li><a href="http://www.liquidx.net/blog/feed/atom/" class="feed" title="feed for all posts on liquidx.net"><img src="http://media.liquidx.net/imgx/feed.gif" class="feed" alt="feed" />Atom Feed for the Blog Entries</a></li>
- <li><a href="http://www.liquidx.net/blog/feed/rss/" class="feed" title="feed for all posts on liquidx.net"><img src="http://media.liquidx.net/imgx/feed.gif" class="feed" alt="feed" />RSS Feed for the Blog Entries</a></li>
- <li><a href="http://www.liquidx.net/comments/feed/atom/" class="feed" title="feed for all posts on liquidx.net"><img src="http://media.liquidx.net/imgx/feed.gif" class="feed" alt="feed" />Feed for All Comments</a></li>
- <li><a href="http://www.liquidx.net/links/feed/atom/" class="feed" title="feed for all bookmarked links"><img src="http://media.liquidx.net/imgx/feed.gif" class="feed" alt="feed" />Feed for Links</a></li>
- </ul>
- </p>
- </div>
- <div class="block">
- <h3>About this site:</h3>
- <p>Content on this site is licensed under <a href="http://creativecommons.org/licenses/by/2.5/">CC By Attribution</a> unless otherwise specified.
- Copyright (c) 2002-2006, <a href="http://al.tse.id.au/">Alastair Tse</a>.</p>
- <p>For more information, see <a href="http://al.tse.id.au/">al.tse.id.au</a>.</p>
- <p><script type="text/javascript" src="http://technorati.com/embed/itwctkzez.js"></script></p>
- </div>
- <div class="block">
- <h3>Is Made Possible By:</h3>
- <p>
- <dl>
- <dt><a href="http://ecto.kung-foo.tv/" class="clean">ecto</a>. </dt>
- <dd>Blogging client for Mac</dd>
- <dt><a href="http://djangoproject.com/" class="clean">Django</a>. </dt>
- <dd>Python Web Framework</dd>
- <dt><a href="http://www.lighttpd.net/" class="clean">lighttpd</a>. </dt>
- <dd>Really Fast Web Server</dd>
- <dt><a href="http://www.saddi.com/software/flup/" class="clean">flup</a>. </dt>
- <dd>FastCGI for Python</dd>
- </dl>
- </p>
- </div>
- <div class="block">
- <h3>Search My Sites:</h3>
- <p>
- <div style='margin: 10px; text-align: center; width: 160px;'><form action='http://www.rollyo.com/search.html' ><fieldset style='margin: 0; padding: 4px 0 0 0; height: 60px; border: none; background: url(http://rollyo.com/remote/togo-bg4.png) no-repeat top left;'><div style="position: absolute; float:left; z-index:99; width: 46px; height: 50px;"><a href="http://rollyo.com"><img style="border: none;" height="50" width="46" src="http://rollyo.com/remote/x.gif"></a></div> <input type='text' size='30' style='float: left; width: 90px; margin: 2px 0 0 48px; padding: 0; font-size: 12px;' name='q' value='Search...' onclick='this.value="";' /><br /> <select name='sid' style='float: left; width: 78px; height: 15px; margin: 12px 0 0 46px; font-size: 7pt; padding: 0;'><option value='106081' selected='selected'>liquidx</option><option value='web'>Search The Web</option></select><input type='image' src='http://rollyo.com/remote/btn-togo.png' alt='Go' style='margin: 12px 0 0 3px; float: left;' /><input type='hidden' name='togo-v' value='1' /></fieldset></form></div>
- </p>
- </div>
-
-
- <div class="clear"> </div>
-
- </div>
-
-
-
- <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
- <script type="text/javascript">
- _uacct = "UA-58117-1";
- urchinTracker();
- </script>
-
-</body>
-</html>
+++ /dev/null
-{% extends "basex.html" %}
-{% load markup %}
-{% block pageid %}code{% endblock %}
-{% block headers %}
-<link href="doc.css" media="screen" rel="stylesheet" type="text/css" />
-{% endblock %}
-{% block title %}PlotKit.Canvas{% endblock %}
-
-{% block content %}
-<div class="page doc api">
-{% filter markdown %}
-[PlotKit Home](PlotKit.html) | [<<](PlotKit.SweetSVG.html)
-
-PlotKit EasyPlot
-================
-
-EasyPlot is a wrapper around the various PlotKit classes to allow you to get a chart plotted as quick as possible with as little code as possible. Using EasyPlot, you will get a chart started with just a single line.
-
-Constructor
------------
-``PlotKit.EasyPlot(style, options, divElement, datasourceArray)``
-
-EasyPlot object will automatically choose the supported render method, currently Canvas or SVG in that order, and render the datasources given in ``datasourceArray``.
-
-### Arguments:
-
-* ``style`` may be ``line``, ``bar`` or ``pie``.
-* ``options`` is an associative dictionary that is the combined options of both ``Layout`` and ``Renderer``.
-* ``divElement`` is the container that the chart should be rendered in. It is best that the ``width`` and ``height`` attribute is set in the ``DIV`` element.
-* ``datasourceArray`` is an array of data sources. The elements of the array can either be a two dimensional array given in ``Plotkit.Layout.addDataset`` or it can be a string that points to the relative URL of a comma separated data file.
-
-EasyPlot Example
-----------------
-
- <div id="example" style="margin: 0 auto 0 auto;" width="400" height="400"></div>
-
- <script type="text/javascript">
- var data = [[0,0], [1,2], [2,3], [3, 7], [4, 8], [5, 6]];
- var plotter = EasyPlot("line", {}, $("example"), [data, "sample.txt"]);
- </script>
-
-
-In this example, two datasets are passed, one defined as a 2D array and another which is a comma separated text file (CSV) at the location "sample.txt". A demonstration of this is found in the [QuickStartEasy][] example.
-
-
-[QuickStartEasy]: http://media.liquidx.net/js/plotkit-tests/quickstart-easy.html
-
-{% endfilter %}
-</div>
-{% endblock %}
\ No newline at end of file
+++ /dev/null
-
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" >
-<head>
- <title>PlotKit.Layout | liquidx</title>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link href="http://media.liquidx.net/css/x_general.css" media="screen" rel="Stylesheet" type="text/css" />
- <link href="http://media.liquidx.net/css/x_header.css" media="screen" rel="Stylesheet" type="text/css" />
- <link href="http://media.liquidx.net/css/x_layout.css" media="screen" rel="Stylesheet" type="text/css" />
- <link href="http://media.liquidx.net/css/x_blocks.css" media="screen" rel="Stylesheet" type="text/css" />
- <link rel="icon" href="/favicon.png" type="image/x-png">
- <link rel="shortcut icon" href="/favicon.png" type="image/x-png">
- <!--[if lt IE 7.]>
- <script defer type="text/javascript" src="http://media.liquidx.net/js/pngfix.js"></script>
- <![endif]-->
-
-<link href="doc.css" media="screen" rel="stylesheet" type="text/css" />
-
-</head>
-
-<body>
- <div id="header">
- <div id="logo"><a href="http://www.liquidx.net/"><img src="http://media.liquidx.net/imgx/logo.png" width="256" height="128" alt="liquidx.net" /></a></div>
- <div id="menu-hack">
- <div id="menu-l"><img src="http://media.liquidx.net/imgx/menu_l.png" width="17" height="28" alt="menu cap" /></div><div id="menu-r"><img src="http://media.liquidx.net/imgx/menu_r.png" width="17" height="28" alt="menu cap" /></div>
- <div id="menu-main">
- <ul id="menu" class="code">
- <li class="tab" id="blog"><a href="http://www.liquidx.net/" title="blog/home">blog</a></li>
- <li class="tab" id="code"><a href="http://www.liquidx.net/code/" title="software i have written">software</a></li>
- <li class="tab" id="dev"><a href="http://projects.liquidx.net/" title="source code for my open source projects">dev</a></li>
- <li class="tab" id="photos"><a href="http://al.tse.id.au/gallery/" title="photos and videos">photos</a></li>
- <li class="tab" id="research"><a href="http://al.tse.id.au/research/" title="research profile">research</a></li>
- <li class="tab" id="links"><a href="http://www.liquidx.net/links/" title="my bookmarks">linkblog</a></li>
- <li class="tab" id="stats"><a href="http://stats.liquidx.net/" title="stats for various parts of my website">stats</a></li>
- <li class="tab" id="status"><a href="http://www.liquidx.net/status/" title="weather report for alastair">status</a></li>
- <li class="tab" id="about"><a href="http://al.tse.id.au/" title="about alastair tse">aboutme</a></li>
- </ul>
- </div>
- </div>
- <div id="quickbuttons">
- <span class="quickbutton"><a href="http://www.liquidx.net/albumartwidget/"><img src="http://media.liquidx.net/imgx/quick_widget.png" alt="album art widget" /></a></span>
- <span class="quickbutton"><a href="http://www.liquidx.net/plotkit/"><img src="http://media.liquidx.net/imgx/quick_plotkit.png" alt="plotkit" /></a></span>
- <span class="quickbutton"><a href="http://www.liquidx.net/fruity/"><img src="http://media.liquidx.net/imgx/quick_fruity.png" alt="fruity" /></a></span>
- </div>
-
- </div>
-
- <div id="body">
-<div class="page doc api">
-
-<p> <a href="PlotKit.html">PlotKit Home</a> | <a href="PlotKit.Base.html"><<</a> | <a href="PlotKit.Renderer.html">>></a>
-</p>
-
-<h1> PlotKit Layout</h1>
-<p>PlotKit Layout is the core of the plotting engine. It deals exclusively with laying objects out on a virtual canvas that has the dimension of 1.0 x 1.0.
-</p>
-<p>The layout engine abstracts away all the complex layout problems with plotting charts and presents a list of objects that need to rendered rather than mixing this with the rendering logic.
-</p>
-<p>PlotKit Layout also is responsible for simple chart state querying so renderers can implement basic event support for objects on the canvas.
-</p>
-
-<h1> Constructor</h1>
-<p> <code>new Layout(style, options);</code>
-</p>
-<p>Layout takes the following arguments:
-</p>
-<p> <strong>style</strong> which can be <code>bar</code>, <code>line</code> or <code>pie</code> which represnts the style of the graph that is desired.
-</p>
-<p> <strong>options</strong> is a dictionary/associative array of layout options. Unrecognised keys are ignored. The following options are supported:
-</p>
-
-<h1> Layout Options</h1>
-
-<h2> Bar and Line Chart layout options</h2>
-<table cellpadding="0" cellspacing="0">
- <thead>
- <tr><td>Option name</td><td>Description</td><td>Type</td><td>Default</td></tr>
- </thead>
- <tbody>
- <tr>
- <th>barWidthFillFraction</th>
- <td>Amount of space the total amount of bars should consume per X value.</td>
- <td>Real number</td>
- <td>0.75</td>
- </tr>
- <tr>
- <th>barOrientation</th>
- <td>Orientation of a bar chart. <b>(PlotKit 0.9+ only)</b></td>
- <td>String ("vertical", "horizontal")</td>
- <td>vertical</td>
- </tr>
-
- <tr>
- <th>xAxis</th>
- <td>Minimum and Maximum values on the X axis.</td>
- <td>Array of 2 Real numbers. (eg. [0.0, 10.0])</td>
- <td>null</td>
- </tr>
- <tr>
- <th>xNumberOfTicks</th>
- <td>Used when automatically calculating axis ticks. This denotes the number of ticks there should be in the graph.</td>
- <td>integer</td>
- <td>10</td>
- </tr>
- <tr>
- <th>xOriginIsZero</th>
- <td>Should graph have X axis origin at 0</td>
- <td>boolean</td>
- <td>true</td>
- </tr>
- <tr>
- <th>xTickPrecision</th>
- <td>The number of decimal places we should round to for tick values.</td>
- <td>integer</td>
- <td>1</td>
- </tr>
- <tr>
- <th>xTicks</th>
- <td>X values at which ticks should be drawn. Automatically calculated if not defined using the parameters `xNumberOfTicks` and ``xTickPrecision``.</td>
- <td>Array of {label: "somelabel", v:value}.</td>
- <td>null</td>
- </tr>
-
- <tr>
- <th>yAxis</th>
- <td>Minimum and Maximum values on the Y axis.</td>
- <td>Array of 2 Real numbers. (eg. [0.0, 10.0])</td>
- <td>null</td>
- </tr>
- <tr>
- <th>yNumberOfTicks</th>
- <td>Used when automatically calculating axis ticks. This denotes the number of ticks there should be in the graph.</td>
- <td>integer</td>
- <td>5</td>
- </tr>
- <tr>
- <th>yOriginIsZero</th>
- <td>Should graph have Y axis origin at 0</td>
- <td>true</td>
- </tr>
- <tr>
- <th>yTickPrecision</th>
- <td>The number of decimal places we should round to for tick values.</td>
- <td>integer</td>
- <td>1</td>
- </tr>
- <tr>
- <th>yTicks</th>
- <td>Y values at which ticks should be drawn. Automatically calculated if not defined using the parameters ``yNumberOfTicks`` and ``yTickPrecision``.</td>
- <td>Array of {label: "somelabel", v:value}.</td>
- <td>null</td>
- </tr>
- </tbody>
-</table>
-
-
-<h2> Pie Chart Layout Options</h2>
-<table>
- <thead>
- <tr><td>Option name</td><td>Description</td><td>Type</td><td>Default</td></tr>
- </thead>
- <tbody>
- <tr>
- <th>pieRadius</th>
- <td>Radius of the circle to be drawn.</td>
- <td>Real number</td>
- <td>0.4</td>
- </tr>
- </tbody>
-</table>
-
-
-<h1> Layout Properties</h1>
-<p>There are some properties you can access, either because you are using a layout inside a renderer or if you would like additional information. Under normal operations, you will not need to, or should modify these parameters.
-</p>
-<table cellpadding="0" cellspacing="0">
- <thead>
- <tr><td>Property</td><td>Type</td><td>Description</td></tr>
- </thead>
- <tbody>
- <tr>
- <th>style</th>
- <td>String</td>
- <td>This denotes the type of chart this layout is using. Valid values are ``bar``, ``line`` or ``pie``. Renderers will use this to determine which parameter (``bars``, ``points`` or ``slices``) to access in order to get draw the chart.</td>
- </tr>
- <tr>
- <th>bars</th>
- <td>Array of Bar.</td>
- <td>This is a list of rectangles with values that the renderer should plot. This will only be valid after ``evaluate()`` has run. The properties of ``bar`` is described here. This is only valid if style is ``bar``. This array is sorted by dataset and then x-values.</td>
- </tr>
- <tr>
- <th>points</th>
- <td>Array of Point.</td>
- <td>This is a list of points with values that the renderer should plot. This will only be valid after ``evaluate()`` has run. The properties of ``bar`` is described here. This is only valid if style is ``line``. This array is sorted by dataset and then x-values.</td>
- </tr>
- <tr>
- <th>slices</th>
- <td>Array of Slice.</td>
- <td>This is a list of pie slices with values that the renderer should plot. This will only be valid after ``evaluate()`` has run. The properties of ``bar`` is described here. This is only valid if style is ``pie``.</td>
- </tr>
- <tr>
- <th>xticks</th>
- <td>Array of Tick.</td>
- <td>For style in ``bar`` or ``line``, these are the ticks on the X axis. A ``tick`` is represented as a two element array with the first element representing the x position of the tick and the second element representing the string value of the label at that position.</td>
- </tr>
- <tr>
- <th>yticks</th>
- <td>Array of Tick.</td>
- <td>For style in ``bar`` or ``line``, these are the ticks on the Y axis. A ``tick`` is represented as a two element array with the first element representing the y position of the tick and the second element representing the string value of the label at that position.</td>
- </tr>
- <tr>
- <th>datasets</th>
- <td>Associative Array of datasets</td>
- <td>This should normally only be used to find the number of datasets by performing ``keys(layout.datasets)``. If you are looking at this in a renderer, then the layout engine needs to be extended.</td>
- </tr>
- </tbody>
-</table>
-
-
-<h1> Layout Types</h1>
-<p>Here are the definition of the types that you will encounter if you access the properties of the Layout object, specifically <code>bars</code>, <code>points</code> and <code>slices</code>. If you are not writing a renderer, you do not need to know this.
-</p>
-
-<h2> Bar Type</h2>
-<p>Represents a bar that the renderer will draw. It contains the following properties.
-</p>
-<table cellpadding="0" cellspacing="0">
- <thead>
- <tr><td>Property</td><td>Type</td><td>Description</td></tr>
- </thead>
- <tbody>
- <tr>
- <th>x, y</th>
- <td>float</td>
- <td>top left position of the bar between 0.0 and 1.0.</td>
- </tr>
- <tr>
- <th>w, h</th>
- <td>float</td>
- <td>width and height of the bar from (``x``, ``y``) between 0.0 and 1.0.</td>
- </tr>
- <tr>
- <th>xval, yval</th>
- <td>float</td>
- <td>The actual x value and y value this bar represents.</td>
- </tr>
- <tr>
- <th>name</th>
- <td>string</td>
- <td>Name of the dataset which this bar belongs to.</td>
- </tr>
- </tbody>
-</table>
-
-
-<h2> Point Type</h2>
-<p>This represents a point on a line chart.
-</p>
-<table cellpadding="0" cellspacing="0">
- <thead>
- <tr><td>Property</td><td>Type</td><td>Description</td></tr>
- </thead>
- <tbody>
- <tr>
- <th>x, y</th>
- <td>float</td>
- <td>top left position of the point between 0.0 and 1.0.</td>
- </tr>
- <tr>
- <th>xval, yval</th>
- <td>float</td>
- <td>The actual x value and y value this bar represents.</td>
- </tr>
- <tr>
- <th>name</th>
- <td>string</td>
- <td>Name of the dataset which this bar belongs to.</td>
- </tr>
- </tbody>
-</table>
-
-
-<h2> Slice Type</h2>
-<p>This represents a pie slice in a pie chart.
-</p>
-<table>
- <thead>
- <tr><td>Property</td><td>Type</td><td>Description</td></tr>
- </thead>
- <tbody>
- <tr>
- <th>fraction</th>
- <td>float</td>
- <td>The fractional value this slice represents. This number is between 0.0 and 1.0</td>
- </tr>
- <tr>
- <th>xval, yval</th>
- <td>float</td>
- <td>The x and y values of this slice.</td>
- </tr>
- <tr>
- <th>startAngle</th>
- <td>float</td>
- <td>This is the angle of the start of the slice, in radians.</td>
- </tr>
- <tr>
- <th>endAngle</th>
- <td>float</td>
- <td>This is the angle of the end of the slice, in radians.</td>
- </tr>
- </tbody>
-</table>
-
-
-<h1> Layout Methods</h1>
-<ul>
- <li>
- <code>addDataset(name, values)</code>
- </li>
-</ul>
-<p> Adds a dataset to the layout engine and assigns it with <code>name</code>. <code>values</code> is an array of <code>\[x, y\]</code> values.
-</p>
-<ul>
- <li>
- <code>removeDataset(name)</code>
- </li>
-</ul>
-<p> Removes a dataset from the layout engine. In order for the new data to take effect, you must run <code>evaluate()</code>.
-</p>
-<ul>
- <li>
- <code>addDatasetFromTable(name, tableElement, xcol = 0, ycol = 1, labelCol = -1)</code>
- </li>
-</ul>
-<p> Handy function to read values off a table. <code>name</code> is the name to give to the dataset just like in <code>addDataset()</code>, <code>tableElement</code> is the table which contains the values. Optionally, the user may specify to extract alternative columns using <code>xcol</code> and <code>ycol</code>.
-</p>
-<p> <strong>New in 0.9.1:</strong> If <code>labelCol</code> is specified to a value greater than -1, it will take the contents of that column as the xTick labels.
-</p>
-<ul>
- <li>
- <code>evaluate()</code>
- </li>
-</ul>
-<p> Performs the evaluation of the layout. It is not done automatically, and you <strong>must</strong> execute this before passing the layout to a renderer.
-</p>
-<ul>
- <li>
- hitTest(x, y)
- </li>
-</ul>
-<p> Used by renderers to see if a virtual canvas position corresponds to any data. The return value varies per style. For <code>bar</code> charts, it will return the Bar type if it is a hit, or null if not. For <code>line</code> charts, it will return a value if the point is underneath the highest curve, otherwise null <strong>(TODO: expand this or change implementation)</strong>. For <code>pie</code> charts, it will return the Slice object that is at the point, otherwise null.
-</p>
-<p> <strong>Note that the specification of this function is subject to change</strong>.
-</p>
-
-<h1> Layout Notes</h1>
-
-<h2> Pie Chart Data and Ticks Restrictions</h2>
-<p>Note that you can only use one dataset for pie charts. Only the y value of the dataset will be used, but the x value must be unique and set as it will correspond to the xTicks that are given.
-</p>
-<p>Labels for pie charts will only use xTicks.
-</p>
-
-<h1> Layout Examples</h1>
-
-
-</div>
-</div>
-
-
-
-
- <div id="footer">
- <div class="block">
- <h3>Syndication Feeds:</h3>
- <p>
- <ul class="tiny">
- <li><a href="http://www.liquidx.net/blog/feed/atom/" class="feed" title="feed for all posts on liquidx.net"><img src="http://media.liquidx.net/imgx/feed.gif" class="feed" alt="feed" />Atom Feed for the Blog Entries</a></li>
- <li><a href="http://www.liquidx.net/blog/feed/rss/" class="feed" title="feed for all posts on liquidx.net"><img src="http://media.liquidx.net/imgx/feed.gif" class="feed" alt="feed" />RSS Feed for the Blog Entries</a></li>
- <li><a href="http://www.liquidx.net/comments/feed/atom/" class="feed" title="feed for all posts on liquidx.net"><img src="http://media.liquidx.net/imgx/feed.gif" class="feed" alt="feed" />Feed for All Comments</a></li>
- <li><a href="http://www.liquidx.net/links/feed/atom/" class="feed" title="feed for all bookmarked links"><img src="http://media.liquidx.net/imgx/feed.gif" class="feed" alt="feed" />Feed for Links</a></li>
- </ul>
- </p>
- </div>
- <div class="block">
- <h3>About this site:</h3>
- <p>Content on this site is licensed under <a href="http://creativecommons.org/licenses/by/2.5/">CC By Attribution</a> unless otherwise specified.
- Copyright (c) 2002-2006, <a href="http://al.tse.id.au/">Alastair Tse</a>.</p>
- <p>For more information, see <a href="http://al.tse.id.au/">al.tse.id.au</a>.</p>
- <p><script type="text/javascript" src="http://technorati.com/embed/itwctkzez.js"></script></p>
- </div>
- <div class="block">
- <h3>Is Made Possible By:</h3>
- <p>
- <dl>
- <dt><a href="http://ecto.kung-foo.tv/" class="clean">ecto</a>. </dt>
- <dd>Blogging client for Mac</dd>
- <dt><a href="http://djangoproject.com/" class="clean">Django</a>. </dt>
- <dd>Python Web Framework</dd>
- <dt><a href="http://www.lighttpd.net/" class="clean">lighttpd</a>. </dt>
- <dd>Really Fast Web Server</dd>
- <dt><a href="http://www.saddi.com/software/flup/" class="clean">flup</a>. </dt>
- <dd>FastCGI for Python</dd>
- </dl>
- </p>
- </div>
- <div class="block">
- <h3>Search My Sites:</h3>
- <p>
- <div style='margin: 10px; text-align: center; width: 160px;'><form action='http://www.rollyo.com/search.html' ><fieldset style='margin: 0; padding: 4px 0 0 0; height: 60px; border: none; background: url(http://rollyo.com/remote/togo-bg4.png) no-repeat top left;'><div style="position: absolute; float:left; z-index:99; width: 46px; height: 50px;"><a href="http://rollyo.com"><img style="border: none;" height="50" width="46" src="http://rollyo.com/remote/x.gif"></a></div> <input type='text' size='30' style='float: left; width: 90px; margin: 2px 0 0 48px; padding: 0; font-size: 12px;' name='q' value='Search...' onclick='this.value="";' /><br /> <select name='sid' style='float: left; width: 78px; height: 15px; margin: 12px 0 0 46px; font-size: 7pt; padding: 0;'><option value='106081' selected='selected'>liquidx</option><option value='web'>Search The Web</option></select><input type='image' src='http://rollyo.com/remote/btn-togo.png' alt='Go' style='margin: 12px 0 0 3px; float: left;' /><input type='hidden' name='togo-v' value='1' /></fieldset></form></div>
- </p>
- </div>
-
-
- <div class="clear"> </div>
-
- </div>
-
-
-
- <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
- <script type="text/javascript">
- _uacct = "UA-58117-1";
- urchinTracker();
- </script>
-
-</body>
-</html>
+++ /dev/null
-{% extends "basex.html" %}
-{% load markup %}
-{% block pageid %}code{% endblock %}
-{% block headers %}
-<link href="doc.css" media="screen" rel="stylesheet" type="text/css" />
-{% endblock %}
-{% block title %}PlotKit.Layout{% endblock %}
-
-{% block content %}
-<div class="page doc api">
-{% filter markdown %}
-[PlotKit Home](PlotKit.html) | [<<](PlotKit.Base.html) | [>>](PlotKit.Renderer.html)
-
-PlotKit Layout
-==============
-
-PlotKit Layout is the core of the plotting engine. It deals exclusively with laying objects out on a virtual canvas that has the dimension of 1.0 x 1.0.
-
-The layout engine abstracts away all the complex layout problems with plotting charts and presents a list of objects that need to rendered rather than mixing this with the rendering logic.
-
-PlotKit Layout also is responsible for simple chart state querying so renderers can implement basic event support for objects on the canvas.
-
-Constructor
-===========
-
- `new Layout(style, options);`
-
-Layout takes the following arguments:
-
-__style__ which can be `bar`, `line` or `pie` which represnts the style of the graph that is desired.
-
-__options__ is a dictionary/associative array of layout options. Unrecognised keys are ignored. The following options are supported:
-
-Layout Options
-==============
-
-Bar and Line Chart layout options
----------------------------------
-
-<table cellpadding="0" cellspacing="0">
- <thead>
- <tr><td>Option name</td><td>Description</td><td>Type</td><td>Default</td></tr>
- </thead>
- <tbody>
- <tr>
- <th>barWidthFillFraction</th>
- <td>Amount of space the total amount of bars should consume per X value.</td>
- <td>Real number</td>
- <td>0.75</td>
- </tr>
- <tr>
- <th>barOrientation</th>
- <td>Orientation of a bar chart. <b>(PlotKit 0.9+ only)</b></td>
- <td>String ("vertical", "horizontal")</td>
- <td>vertical</td>
- </tr>
-
- <tr>
- <th>xAxis</th>
- <td>Minimum and Maximum values on the X axis.</td>
- <td>Array of 2 Real numbers. (eg. [0.0, 10.0])</td>
- <td>null</td>
- </tr>
- <tr>
- <th>xNumberOfTicks</th>
- <td>Used when automatically calculating axis ticks. This denotes the number of ticks there should be in the graph.</td>
- <td>integer</td>
- <td>10</td>
- </tr>
- <tr>
- <th>xOriginIsZero</th>
- <td>Should graph have X axis origin at 0</td>
- <td>boolean</td>
- <td>true</td>
- </tr>
- <tr>
- <th>xTickPrecision</th>
- <td>The number of decimal places we should round to for tick values.</td>
- <td>integer</td>
- <td>1</td>
- </tr>
- <tr>
- <th>xTicks</th>
- <td>X values at which ticks should be drawn. Automatically calculated if not defined using the parameters `xNumberOfTicks` and ``xTickPrecision``.</td>
- <td>Array of {label: "somelabel", v:value}.</td>
- <td>null</td>
- </tr>
-
- <tr>
- <th>yAxis</th>
- <td>Minimum and Maximum values on the Y axis.</td>
- <td>Array of 2 Real numbers. (eg. [0.0, 10.0])</td>
- <td>null</td>
- </tr>
- <tr>
- <th>yNumberOfTicks</th>
- <td>Used when automatically calculating axis ticks. This denotes the number of ticks there should be in the graph.</td>
- <td>integer</td>
- <td>5</td>
- </tr>
- <tr>
- <th>yOriginIsZero</th>
- <td>Should graph have Y axis origin at 0</td>
- <td>true</td>
- </tr>
- <tr>
- <th>yTickPrecision</th>
- <td>The number of decimal places we should round to for tick values.</td>
- <td>integer</td>
- <td>1</td>
- </tr>
- <tr>
- <th>yTicks</th>
- <td>Y values at which ticks should be drawn. Automatically calculated if not defined using the parameters ``yNumberOfTicks`` and ``yTickPrecision``.</td>
- <td>Array of {label: "somelabel", v:value}.</td>
- <td>null</td>
- </tr>
- </tbody>
-</table>
-
-Pie Chart Layout Options
-------------------------
-
-<table>
- <thead>
- <tr><td>Option name</td><td>Description</td><td>Type</td><td>Default</td></tr>
- </thead>
- <tbody>
- <tr>
- <th>pieRadius</th>
- <td>Radius of the circle to be drawn.</td>
- <td>Real number</td>
- <td>0.4</td>
- </tr>
- </tbody>
-</table>
-
-Layout Properties
-=================
-
-There are some properties you can access, either because you are using a layout inside a renderer or if you would like additional information. Under normal operations, you will not need to, or should modify these parameters.
-
-<table cellpadding="0" cellspacing="0">
- <thead>
- <tr><td>Property</td><td>Type</td><td>Description</td></tr>
- </thead>
- <tbody>
- <tr>
- <th>style</th>
- <td>String</td>
- <td>This denotes the type of chart this layout is using. Valid values are ``bar``, ``line`` or ``pie``. Renderers will use this to determine which parameter (``bars``, ``points`` or ``slices``) to access in order to get draw the chart.</td>
- </tr>
- <tr>
- <th>bars</th>
- <td>Array of Bar.</td>
- <td>This is a list of rectangles with values that the renderer should plot. This will only be valid after ``evaluate()`` has run. The properties of ``bar`` is described here. This is only valid if style is ``bar``. This array is sorted by dataset and then x-values.</td>
- </tr>
- <tr>
- <th>points</th>
- <td>Array of Point.</td>
- <td>This is a list of points with values that the renderer should plot. This will only be valid after ``evaluate()`` has run. The properties of ``bar`` is described here. This is only valid if style is ``line``. This array is sorted by dataset and then x-values.</td>
- </tr>
- <tr>
- <th>slices</th>
- <td>Array of Slice.</td>
- <td>This is a list of pie slices with values that the renderer should plot. This will only be valid after ``evaluate()`` has run. The properties of ``bar`` is described here. This is only valid if style is ``pie``.</td>
- </tr>
- <tr>
- <th>xticks</th>
- <td>Array of Tick.</td>
- <td>For style in ``bar`` or ``line``, these are the ticks on the X axis. A ``tick`` is represented as a two element array with the first element representing the x position of the tick and the second element representing the string value of the label at that position.</td>
- </tr>
- <tr>
- <th>yticks</th>
- <td>Array of Tick.</td>
- <td>For style in ``bar`` or ``line``, these are the ticks on the Y axis. A ``tick`` is represented as a two element array with the first element representing the y position of the tick and the second element representing the string value of the label at that position.</td>
- </tr>
- <tr>
- <th>datasets</th>
- <td>Associative Array of datasets</td>
- <td>This should normally only be used to find the number of datasets by performing ``keys(layout.datasets)``. If you are looking at this in a renderer, then the layout engine needs to be extended.</td>
- </tr>
- </tbody>
-</table>
-
-Layout Types
-============
-
-Here are the definition of the types that you will encounter if you access the properties of the Layout object, specifically ``bars``, ``points`` and ``slices``. If you are not writing a renderer, you do not need to know this.
-
-Bar Type
---------
-
-Represents a bar that the renderer will draw. It contains the following properties.
-
-<table cellpadding="0" cellspacing="0">
- <thead>
- <tr><td>Property</td><td>Type</td><td>Description</td></tr>
- </thead>
- <tbody>
- <tr>
- <th>x, y</th>
- <td>float</td>
- <td>top left position of the bar between 0.0 and 1.0.</td>
- </tr>
- <tr>
- <th>w, h</th>
- <td>float</td>
- <td>width and height of the bar from (``x``, ``y``) between 0.0 and 1.0.</td>
- </tr>
- <tr>
- <th>xval, yval</th>
- <td>float</td>
- <td>The actual x value and y value this bar represents.</td>
- </tr>
- <tr>
- <th>name</th>
- <td>string</td>
- <td>Name of the dataset which this bar belongs to.</td>
- </tr>
- </tbody>
-</table>
-
-Point Type
-----------
-
-This represents a point on a line chart.
-
-<table cellpadding="0" cellspacing="0">
- <thead>
- <tr><td>Property</td><td>Type</td><td>Description</td></tr>
- </thead>
- <tbody>
- <tr>
- <th>x, y</th>
- <td>float</td>
- <td>top left position of the point between 0.0 and 1.0.</td>
- </tr>
- <tr>
- <th>xval, yval</th>
- <td>float</td>
- <td>The actual x value and y value this bar represents.</td>
- </tr>
- <tr>
- <th>name</th>
- <td>string</td>
- <td>Name of the dataset which this bar belongs to.</td>
- </tr>
- </tbody>
-</table>
-
-Slice Type
-----------
-
-This represents a pie slice in a pie chart.
-
-<table>
- <thead>
- <tr><td>Property</td><td>Type</td><td>Description</td></tr>
- </thead>
- <tbody>
- <tr>
- <th>fraction</th>
- <td>float</td>
- <td>The fractional value this slice represents. This number is between 0.0 and 1.0</td>
- </tr>
- <tr>
- <th>xval, yval</th>
- <td>float</td>
- <td>The x and y values of this slice.</td>
- </tr>
- <tr>
- <th>startAngle</th>
- <td>float</td>
- <td>This is the angle of the start of the slice, in radians.</td>
- </tr>
- <tr>
- <th>endAngle</th>
- <td>float</td>
- <td>This is the angle of the end of the slice, in radians.</td>
- </tr>
- </tbody>
-</table>
-
-Layout Methods
-==============
-
-* ``addDataset(name, values)``
-
- Adds a dataset to the layout engine and assigns it with ``name``. ``values`` is an array of ``\[x, y\]`` values.
-
-* ``removeDataset(name)``
-
- Removes a dataset from the layout engine. In order for the new data to take effect, you must run ``evaluate()``.
-
-* ``addDatasetFromTable(name, tableElement, xcol = 0, ycol = 1, labelCol = -1)``
-
- Handy function to read values off a table. ``name`` is the name to give to the dataset just like in ``addDataset()``, ``tableElement`` is the table which contains the values. Optionally, the user may specify to extract alternative columns using ``xcol`` and ``ycol``.
-
- **New in 0.9.1:** If ``labelCol`` is specified to a value greater than -1, it will take the contents of that column as the xTick labels.
-
-* ``evaluate()``
-
- Performs the evaluation of the layout. It is not done automatically, and you __must__ execute this before passing the layout to a renderer.
-
-* hitTest(x, y)
-
- Used by renderers to see if a virtual canvas position corresponds to any data. The return value varies per style. For ``bar`` charts, it will return the Bar type if it is a hit, or null if not. For ``line`` charts, it will return a value if the point is underneath the highest curve, otherwise null __(TODO: expand this or change implementation)__. For ``pie`` charts, it will return the Slice object that is at the point, otherwise null.
-
- __Note that the specification of this function is subject to change__.
-
-Layout Notes
-============
-
-Pie Chart Data and Ticks Restrictions
--------------------------------------
-
-Note that you can only use one dataset for pie charts. Only the y value of the dataset will be used, but the x value must be unique and set as it will correspond to the xTicks that are given.
-
-Labels for pie charts will only use xTicks.
-
-Layout Examples
-===============
-
-{% endfilter %}
-</div>
-{% endblock %}
-
-
-
+++ /dev/null
-
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" >
-<head>
- <title>PlotKit Quick Start | liquidx</title>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link href="http://media.liquidx.net/css/x_general.css" media="screen" rel="Stylesheet" type="text/css" />
- <link href="http://media.liquidx.net/css/x_header.css" media="screen" rel="Stylesheet" type="text/css" />
- <link href="http://media.liquidx.net/css/x_layout.css" media="screen" rel="Stylesheet" type="text/css" />
- <link href="http://media.liquidx.net/css/x_blocks.css" media="screen" rel="Stylesheet" type="text/css" />
- <link rel="icon" href="/favicon.png" type="image/x-png">
- <link rel="shortcut icon" href="/favicon.png" type="image/x-png">
- <!--[if lt IE 7.]>
- <script defer type="text/javascript" src="http://media.liquidx.net/js/pngfix.js"></script>
- <![endif]-->
-
-<script type="text/javascript" src="/js/mochi/MochiKit.js"></script>
-<script type="text/javascript" src="/js/plotkit/Base.js"></script>
-<script type="text/javascript" src="/js/plotkit/Layout.js"></script>
-<script type="text/javascript" src="/js/plotkit/Canvas.js"></script>
-<script type="text/javascript" src="/js/plotkit/SweetCanvas.js"></script>
-<link href="doc.css" media="screen" rel="stylesheet" type="text/css" />
-
-</head>
-
-<body>
- <div id="header">
- <div id="logo"><a href="http://www.liquidx.net/"><img src="http://media.liquidx.net/imgx/logo.png" width="256" height="128" alt="liquidx.net" /></a></div>
- <div id="menu-hack">
- <div id="menu-l"><img src="http://media.liquidx.net/imgx/menu_l.png" width="17" height="28" alt="menu cap" /></div><div id="menu-r"><img src="http://media.liquidx.net/imgx/menu_r.png" width="17" height="28" alt="menu cap" /></div>
- <div id="menu-main">
- <ul id="menu" class="code">
- <li class="tab" id="blog"><a href="http://www.liquidx.net/" title="blog/home">blog</a></li>
- <li class="tab" id="code"><a href="http://www.liquidx.net/code/" title="software i have written">software</a></li>
- <li class="tab" id="dev"><a href="http://projects.liquidx.net/" title="source code for my open source projects">dev</a></li>
- <li class="tab" id="photos"><a href="http://al.tse.id.au/gallery/" title="photos and videos">photos</a></li>
- <li class="tab" id="research"><a href="http://al.tse.id.au/research/" title="research profile">research</a></li>
- <li class="tab" id="links"><a href="http://www.liquidx.net/links/" title="my bookmarks">linkblog</a></li>
- <li class="tab" id="stats"><a href="http://stats.liquidx.net/" title="stats for various parts of my website">stats</a></li>
- <li class="tab" id="status"><a href="http://www.liquidx.net/status/" title="weather report for alastair">status</a></li>
- <li class="tab" id="about"><a href="http://al.tse.id.au/" title="about alastair tse">aboutme</a></li>
- </ul>
- </div>
- </div>
- <div id="quickbuttons">
- <span class="quickbutton"><a href="http://www.liquidx.net/albumartwidget/"><img src="http://media.liquidx.net/imgx/quick_widget.png" alt="album art widget" /></a></span>
- <span class="quickbutton"><a href="http://www.liquidx.net/plotkit/"><img src="http://media.liquidx.net/imgx/quick_plotkit.png" alt="plotkit" /></a></span>
- <span class="quickbutton"><a href="http://www.liquidx.net/fruity/"><img src="http://media.liquidx.net/imgx/quick_fruity.png" alt="fruity" /></a></span>
- </div>
-
- </div>
-
- <div id="body">
-<div class="page doc">
-
-
-<h1> PlotKit Quick Start</h1>
-<p>This is just a quick guide on how to get started with PlotKit. If you
- want to delve in deeper, be sure to check out the
- <a href="PlotKit.html">documentation</a>.
-</p>
-
-<h1> Canvas or SVG</h1>
-<p>Before we start, you should know a little about HTML Canvas and SVG
- support in the real browser world. For a more indepth coverage, please
- check the <a href="SVGCanvasCompat.html">SVG/Canvas Browser Support Status</a>.
-</p>
-<p>Basically, Canvas and SVG have similar support across modern
- browsers. Canvas is supported by Opera 9, Safari 2 and Firefox 1.5,
- which probably only accounts for 10% of browsers. PlotKit also supports
- a degraded Emulated Canvas mode under IE which means you can achieve
- nearly 90% browser support using this technology.
-</p>
-<p>However, the future is in SVG where Firefox 1.5 and Opera 8 have
- support it, and IE6 with the Adobe SVG Viewer (ASV) install means you
- get around the same coverage as HTML Canvas.
-</p>
-<p>PlotKit plans to support both to maximise compatiblity. Canvas has a
- simplier rendering engine, but can do the equivalent to what SVG can
- apart from animation. SVG has wider support, but is more complex and
- support for key features varies widely across different
- implementations.
-</p>
-
-<h1> Graphing with Canvas</h1>
-<p>Download the latest <a href="http://www.liquidx.net/plotkit/">PlotKit</a> and <a href="http://www.mochikit.com/">MochiKit</a> and extract it on to
- your web server and make sure <code>plotkit-0.8/PlotKit</code> and
- <code>mochikit/MochiKit</code> is visible.
-</p>
-
-<h2> Preparing the HTML</h2>
-<p>Add the script headers for PlotKit to work.
-</p>
-<pre><code><script type="text/javascript" src="/mochikit/MochiKit.js"></script>
-<script type="text/javascript" src="/plotkit/Base.js"></script>
-<script type="text/javascript" src="/plotkit/Layout.js"></script>
-<script type="text/javascript" src="/plotkit/Canvas.js"></script>
-<script type="text/javascript" src="/plotkit/SweetCanvas.js"></script>
-</code></pre><p>MochiKit.js is an autoloader for all the elements of MochiKit. You can
- reduce the size of it by making your own packed version or just
- including the script headers individually.
-</p>
-<p>The other four PlotKit javascript files deal with some basic
- functionality, the layout engine and two renderers, Canvas and
- SweetCanvas.
-</p>
-<p>Now we add the <code><canvas></code> tag to where we want the graph to
- appear. Note PlotKit <strong>requires</strong> the <code><canvas></code> tag is enclosed
- inside a <div> tags for labels to work.
-</p>
-<pre><code> <div><canvas id="graph" height="300" width="300"></canvas></div>
-</code></pre><p>This will create a blank canvas of 300 by 300 pixels.
-</p>
-
-<h2> Javascript</h2>
-<p>There are only two simple steps to draw a chart, first is the create a
- layout with our data and second is to create the renderer. So lets
- start off with creating the layout.
-</p>
-
-<h3> Layout and Data</h3>
-<pre><code>var layout = new PlotKit.Layout("bar", {});
-layout.addDataset("sqrt", [[0, 0], [1, 1], [2, 1.414], [3, 1.73], [4, 2]]);
-layout.evaluate();
-</code></pre><p>There, it is that simple. Lets explain what each line is doing:
-</p>
-<ol>
- <li><p> <code>var layout = new PlotKit.Layout("bar", {});</code>
-</p>
-<p>We create a new layout object, and tell it that we want a bar chart in the first parameter. The second parameter allows us to pass additional options, which we will go on to later. It can be left null, or in this case just an empty array.
-</p>
-
- </li>
-
- <li><p> <code>layout.addDataset("sqrt", [[0, 0], [1, 1]...)</code>
-</p>
-<p>This will add a new dataset to the layout. You can add multiple datasets by specifying a different name in the first parameter for each dataset. The dataset consists of an array of (x, y) values. These must be numeric, either floating point or integers.
-</p>
-<p>Note that PlotKit does not deal with negative numbers at the moment.
-</p>
-
- </li>
-
- <li><p> <code>layout.evaluate();</code>
-</p>
-<p>This will be the last command you make on the layout before passing it to the renderer. This will tell the layout to calculate the layout of the chart so the renderer can draw it. It is an expensive operation, so do not call it frequently, only unless the data or options have been changed.
-</p>
-
- </li>
-</ol>
-
-<h3> Renderer</h3>
-<pre><code> var canvas = MochiKit.DOM.getElement("graph");
- var plotter = new PlotKit.SweetCanvasRenderer(canvas, layout, {});
- plotter.render();
-</code></pre><ol>
- <li><p> <code>var canvas = MochiKit.DOM.getElement("graph");</code>
-</p>
-<p>This line will get the HTML element we defined earlier.
-</p>
-
- </li>
-
- <li><p> <code>var plotter = new PlotKit.SweetCanvasRenderer(canvas, layout, {});</code>
-</p>
-<p>This will create the renderer to work on the object passed, and also with the data in the layout we created earlier. Again, the third parameter here is for options to relates to the look of the graph. We will show you some things you can do with this in the following section.
-</p>
-
- </li>
-
- <li><p> <code>plotter.render()</code>
-</p>
-<p>This line will render the graph.
-</p>
-
- </li>
-</ol>
-
-<h3> Putting it altogether</h3>
-<pre><code>function drawGraph() {
- var layout = new PlotKit.Layout("bar", {});
- layout.addDataset("sqrt", [[0, 0], [1, 1], [2, 1.414], [3, 1.73], [4, 2]]);
- layout.evaluate();
- var canvas = MochiKit.DOM.getElement("graph");
- var plotter = new PlotKit.SweetCanvasRenderer(canvas, layout, {});
- plotter.render();
-}
-MochiKit.DOM.addLoadEvent(drawGraph);
-</code></pre><p>This is a sample of what you would use to plot the graph of sqare roots for 0 to 4. Make sure you plot the graph on the load event because the DOM will not be ready if when the Javascript is first loaded.
-</p>
-<p>See this in an [HTML example here][example1].
-</p>
-
-<h3> Additional Options</h3>
-<p>We mentioned that both the layout and renderer may take some additional options. In order to take advantage of that, we can use a simple options dictionary to store options for both layout and the renderer, in this way:
-</p>
-<pre><code>var options = {
- "IECanvasHTC": "/plotkit/iecanvas.htc",
- "colorScheme": PlotKit.Base.palette(PlotKit.Base.baseColors()[0]),
- "padding": {left: 0, right: 0, top: 10, bottom: 30},
- "xTicks": [{v:0, label:"zero"},
- {v:1, label:"one"},
- {v:2, label:"two"},
- {v:3, label:"three"},
- {v:4, label:"four"}],
- "drawYAxis": false
-};
-
-function drawGraph() {
- var layout = new PlotKit.Layout("bar", options);
- layout.addDataset("sqrt", [[0, 0], [1, 1], [2, 1.414], [3, 1.73], [4, 2]]);
- layout.evaluate();
- var canvas = MochiKit.DOM.getElement("graph");
- var plotter = new PlotKit.SweetCanvasRenderer(canvas, layout, options);
- plotter.render();
-}
-MochiKit.DOM.addLoadEvent(drawGraph);
-</code></pre><p>Here we define some additional options to affect how our graph is rendered.
-</p>
-<ol>
- <li>
- First line defines where the <code>IECanvasHTC</code> behaviour file is so that we can have IE support.
- </li>
-
- <li>
- Second line defines a new colorScheme to use. Here we are just using another preset color scheme that creates a palette out of the 6th preset base colour.
- </li>
-
- <li>
- Third line defines some custom labels we would like by giving the mapping from X value to label.
- </li>
-
- <li>
- Fourth line tells the renderer not to draw the Y axis.
- </li>
-</ol>
-
-<h1> Demonstration</h1>
-<p>To show you that is how it works, below is the graph defined exactly how it is presented in this quick start guide. On the left is a PNG of what you should expect and on the right is what it actually renders to.
-</p>
-
-<h3> Bar charts</h3>
-<div>
-<div style="float: left; padding-right: 5px;" width="300" height="300"><img src="barsample.png" width="300" height="300" alt="screenshot of graph" /></div>
-<div style="float: left; padding-left: 5px;" width="300" height="300"><canvas id="bargraph" width="300" height="300"></canvas></div>
-<div style="clear: both; height: 1px; width: 1px;"> </div>
-</div>
-
-
-<h3> Pie Charts</h3>
-<div>
-<div style="float: left; padding-right: 5px;" width="300" height="300"><img src="piesample.png" width="300" height="300" alt="screenshot of graph" /></div>
-<div style="float: left; padding-left: 5px;" width="300" height="300"><canvas id="piegraph" width="300" height="300"></canvas></div>
-<div style="clear: both; height: 1px; width: 1px;"> </div>
-</div>
-
-
-<h1> Author</h1>
-<p>Alastair Tse - Last Updated: 17th March 2006
-</p>
-
-
-</div>
-<script type="text/javascript">
-<!--
-
-var options = {
- "IECanvasHTC": "../plotkit/iecanvas.htc",
- "colorScheme": PlotKit.Base.palette(PlotKit.Base.baseColors()[0]),
- "padding": {left: 10, right: 10, top: 10, bottom: 30},
- "xTicks": [{v:0, label:"zero"},
- {v:1, label:"one"},
- {v:2, label:"two"},
- {v:3, label:"three"},
- {v:4, label:"four"}],
- "drawYAxis": false,
- "pieRadius": 0.35
-};
-
-
-function drawBarGraph() {
- var layout = new PlotKit.Layout("bar", options);
- layout.addDataset("sqrt", [[0, 0], [1, 1], [2, 1.414], [3, 1.73], [4, 2]]);
- layout.evaluate();
- var canvas = MochiKit.DOM.getElement("bargraph");
- var plotter = new PlotKit.SweetCanvasRenderer(canvas, layout, options);
- plotter.render();
-}
-MochiKit.DOM.addLoadEvent(drawBarGraph);
-
-function drawPieGraph() {
- var layout = new PlotKit.Layout("pie", options);
- layout.addDataset("sqrt", [[0, 0], [1, 1], [2, 1.414], [3, 1.73], [4, 2]]);
- layout.evaluate();
- var canvas = MochiKit.DOM.getElement("piegraph");
- var plotter = new PlotKit.SweetCanvasRenderer(canvas, layout, options);
- plotter.render();
-}
-
-// Damn opera 9 has a bug with javascript subclassing??
-// but works in sweet.html, grr!!
-if (navigator.userAgent.toLowerCase().indexOf("opera") == -1) {
- MochiKit.DOM.addLoadEvent(drawPieGraph);
-}
-
-//-->
-</script>
-</div>
-
-
-
-
- <div id="footer">
- <div class="block">
- <h3>Syndication Feeds:</h3>
- <p>
- <ul class="tiny">
- <li><a href="http://www.liquidx.net/blog/feed/atom/" class="feed" title="feed for all posts on liquidx.net"><img src="http://media.liquidx.net/imgx/feed.gif" class="feed" alt="feed" />Atom Feed for the Blog Entries</a></li>
- <li><a href="http://www.liquidx.net/blog/feed/rss/" class="feed" title="feed for all posts on liquidx.net"><img src="http://media.liquidx.net/imgx/feed.gif" class="feed" alt="feed" />RSS Feed for the Blog Entries</a></li>
- <li><a href="http://www.liquidx.net/comments/feed/atom/" class="feed" title="feed for all posts on liquidx.net"><img src="http://media.liquidx.net/imgx/feed.gif" class="feed" alt="feed" />Feed for All Comments</a></li>
- <li><a href="http://www.liquidx.net/links/feed/atom/" class="feed" title="feed for all bookmarked links"><img src="http://media.liquidx.net/imgx/feed.gif" class="feed" alt="feed" />Feed for Links</a></li>
- </ul>
- </p>
- </div>
- <div class="block">
- <h3>About this site:</h3>
- <p>Content on this site is licensed under <a href="http://creativecommons.org/licenses/by/2.5/">CC By Attribution</a> unless otherwise specified.
- Copyright (c) 2002-2006, <a href="http://al.tse.id.au/">Alastair Tse</a>.</p>
- <p>For more information, see <a href="http://al.tse.id.au/">al.tse.id.au</a>.</p>
- <p><script type="text/javascript" src="http://technorati.com/embed/itwctkzez.js"></script></p>
- </div>
- <div class="block">
- <h3>Is Made Possible By:</h3>
- <p>
- <dl>
- <dt><a href="http://ecto.kung-foo.tv/" class="clean">ecto</a>. </dt>
- <dd>Blogging client for Mac</dd>
- <dt><a href="http://djangoproject.com/" class="clean">Django</a>. </dt>
- <dd>Python Web Framework</dd>
- <dt><a href="http://www.lighttpd.net/" class="clean">lighttpd</a>. </dt>
- <dd>Really Fast Web Server</dd>
- <dt><a href="http://www.saddi.com/software/flup/" class="clean">flup</a>. </dt>
- <dd>FastCGI for Python</dd>
- </dl>
- </p>
- </div>
- <div class="block">
- <h3>Search My Sites:</h3>
- <p>
- <div style='margin: 10px; text-align: center; width: 160px;'><form action='http://www.rollyo.com/search.html' ><fieldset style='margin: 0; padding: 4px 0 0 0; height: 60px; border: none; background: url(http://rollyo.com/remote/togo-bg4.png) no-repeat top left;'><div style="position: absolute; float:left; z-index:99; width: 46px; height: 50px;"><a href="http://rollyo.com"><img style="border: none;" height="50" width="46" src="http://rollyo.com/remote/x.gif"></a></div> <input type='text' size='30' style='float: left; width: 90px; margin: 2px 0 0 48px; padding: 0; font-size: 12px;' name='q' value='Search...' onclick='this.value="";' /><br /> <select name='sid' style='float: left; width: 78px; height: 15px; margin: 12px 0 0 46px; font-size: 7pt; padding: 0;'><option value='106081' selected='selected'>liquidx</option><option value='web'>Search The Web</option></select><input type='image' src='http://rollyo.com/remote/btn-togo.png' alt='Go' style='margin: 12px 0 0 3px; float: left;' /><input type='hidden' name='togo-v' value='1' /></fieldset></form></div>
- </p>
- </div>
-
-
- <div class="clear"> </div>
-
- </div>
-
-
-
- <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
- <script type="text/javascript">
- _uacct = "UA-58117-1";
- urchinTracker();
- </script>
-
-</body>
-</html>
+++ /dev/null
-{% extends "basex.html" %}
-{% load markup %}
-{% block pageid %}code{% endblock %}
-{% block title %}PlotKit Quick Start{% endblock %}
-{% block headers %}
-<script type="text/javascript" src="/js/mochi/MochiKit.js"></script>
-<script type="text/javascript" src="/js/plotkit/Base.js"></script>
-<script type="text/javascript" src="/js/plotkit/Layout.js"></script>
-<script type="text/javascript" src="/js/plotkit/Canvas.js"></script>
-<script type="text/javascript" src="/js/plotkit/SweetCanvas.js"></script>
-<link href="doc.css" media="screen" rel="stylesheet" type="text/css" />
-{% endblock %}
-
-
-{% block content %}
-<div class="page doc">
-{% filter markdown %}
-PlotKit Quick Start
-===================
-
-This is just a quick guide on how to get started with PlotKit. If you
-want to delve in deeper, be sure to check out the
-[documentation][docs].
-
-Canvas or SVG
-=============
-
-Before we start, you should know a little about HTML Canvas and SVG
-support in the real browser world. For a more indepth coverage, please
-check the [SVG/Canvas Browser Support Status][Browser].
-
-Basically, Canvas and SVG have similar support across modern
-browsers. Canvas is supported by Opera 9, Safari 2 and Firefox 1.5,
-which probably only accounts for 10% of browsers. PlotKit also supports
-a degraded Emulated Canvas mode under IE which means you can achieve
-nearly 90% browser support using this technology.
-
-However, the future is in SVG where Firefox 1.5 and Opera 8 have
-support it, and IE6 with the Adobe SVG Viewer (ASV) install means you
-get around the same coverage as HTML Canvas.
-
-PlotKit plans to support both to maximise compatiblity. Canvas has a
-simplier rendering engine, but can do the equivalent to what SVG can
-apart from animation. SVG has wider support, but is more complex and
-support for key features varies widely across different
-implementations.
-
-Graphing with Canvas
-====================
-
-Download the latest [PlotKit][] and [MochiKit][] and extract it on to
-your web server and make sure ``plotkit-0.8/PlotKit`` and
-``mochikit/MochiKit`` is visible.
-
-Preparing the HTML
-------------------
-
-Add the script headers for PlotKit to work.
-
- <script type="text/javascript" src="/mochikit/MochiKit.js"></script>
- <script type="text/javascript" src="/plotkit/Base.js"></script>
- <script type="text/javascript" src="/plotkit/Layout.js"></script>
- <script type="text/javascript" src="/plotkit/Canvas.js"></script>
- <script type="text/javascript" src="/plotkit/SweetCanvas.js"></script>
-
-MochiKit.js is an autoloader for all the elements of MochiKit. You can
-reduce the size of it by making your own packed version or just
-including the script headers individually.
-
-The other four PlotKit javascript files deal with some basic
-functionality, the layout engine and two renderers, Canvas and
-SweetCanvas.
-
-Now we add the ``<canvas>`` tag to where we want the graph to
-appear. Note PlotKit __requires__ the ``<canvas>`` tag is enclosed
-inside a <div> tags for labels to work.
-
- <div><canvas id="graph" height="300" width="300"></canvas></div>
-
-This will create a blank canvas of 300 by 300 pixels.
-
-Javascript
-----------
-
-There are only two simple steps to draw a chart, first is the create a
-layout with our data and second is to create the renderer. So lets
-start off with creating the layout.
-
-### Layout and Data
-
- var layout = new PlotKit.Layout("bar", {});
- layout.addDataset("sqrt", [[0, 0], [1, 1], [2, 1.414], [3, 1.73], [4, 2]]);
- layout.evaluate();
-
-There, it is that simple. Lets explain what each line is doing:
-
-1. ``var layout = new PlotKit.Layout("bar", {});``
-
- We create a new layout object, and tell it that we want a bar chart in the first parameter. The second parameter allows us to pass additional options, which we will go on to later. It can be left null, or in this case just an empty array.
-
-2. ``layout.addDataset("sqrt", [[0, 0], [1, 1]...)``
-
- This will add a new dataset to the layout. You can add multiple datasets by specifying a different name in the first parameter for each dataset. The dataset consists of an array of (x, y) values. These must be numeric, either floating point or integers.
-
- Note that PlotKit does not deal with negative numbers at the moment.
-
-3. ``layout.evaluate();``
-
- This will be the last command you make on the layout before passing it to the renderer. This will tell the layout to calculate the layout of the chart so the renderer can draw it. It is an expensive operation, so do not call it frequently, only unless the data or options have been changed.
-
-### Renderer
-
- var canvas = MochiKit.DOM.getElement("graph");
- var plotter = new PlotKit.SweetCanvasRenderer(canvas, layout, {});
- plotter.render();
-
-1. ``var canvas = MochiKit.DOM.getElement("graph");``
-
- This line will get the HTML element we defined earlier.
-
-2. ``var plotter = new PlotKit.SweetCanvasRenderer(canvas, layout, {});``
-
- This will create the renderer to work on the object passed, and also with the data in the layout we created earlier. Again, the third parameter here is for options to relates to the look of the graph. We will show you some things you can do with this in the following section.
-
-3. ``plotter.render()``
-
- This line will render the graph.
-
-### Putting it altogether
-
- function drawGraph() {
- var layout = new PlotKit.Layout("bar", {});
- layout.addDataset("sqrt", [[0, 0], [1, 1], [2, 1.414], [3, 1.73], [4, 2]]);
- layout.evaluate();
- var canvas = MochiKit.DOM.getElement("graph");
- var plotter = new PlotKit.SweetCanvasRenderer(canvas, layout, {});
- plotter.render();
- }
- MochiKit.DOM.addLoadEvent(drawGraph);
-
-This is a sample of what you would use to plot the graph of sqare roots for 0 to 4. Make sure you plot the graph on the load event because the DOM will not be ready if when the Javascript is first loaded.
-
-See this in an [HTML example here][example1].
-
-### Additional Options
-
-We mentioned that both the layout and renderer may take some additional options. In order to take advantage of that, we can use a simple options dictionary to store options for both layout and the renderer, in this way:
-
- var options = {
- "IECanvasHTC": "/plotkit/iecanvas.htc",
- "colorScheme": PlotKit.Base.palette(PlotKit.Base.baseColors()[0]),
- "padding": {left: 0, right: 0, top: 10, bottom: 30},
- "xTicks": [{v:0, label:"zero"},
- {v:1, label:"one"},
- {v:2, label:"two"},
- {v:3, label:"three"},
- {v:4, label:"four"}],
- "drawYAxis": false
- };
-
- function drawGraph() {
- var layout = new PlotKit.Layout("bar", options);
- layout.addDataset("sqrt", [[0, 0], [1, 1], [2, 1.414], [3, 1.73], [4, 2]]);
- layout.evaluate();
- var canvas = MochiKit.DOM.getElement("graph");
- var plotter = new PlotKit.SweetCanvasRenderer(canvas, layout, options);
- plotter.render();
- }
- MochiKit.DOM.addLoadEvent(drawGraph);
-
-
-Here we define some additional options to affect how our graph is rendered.
-
-1. First line defines where the ``IECanvasHTC`` behaviour file is so that we can have IE support.
-2. Second line defines a new colorScheme to use. Here we are just using another preset color scheme that creates a palette out of the 6th preset base colour.
-3. Third line defines some custom labels we would like by giving the mapping from X value to label.
-4. Fourth line tells the renderer not to draw the Y axis.
-
-Demonstration
-=============
-
-To show you that is how it works, below is the graph defined exactly how it is presented in this quick start guide. On the left is a PNG of what you should expect and on the right is what it actually renders to.
-
-### Bar charts
-
-<div>
-<div style="float: left; padding-right: 5px;" width="300" height="300"><img src="barsample.png" width="300" height="300" alt="screenshot of graph" /></div>
-<div style="float: left; padding-left: 5px;" width="300" height="300"><canvas id="bargraph" width="300" height="300"></canvas></div>
-<div style="clear: both; height: 1px; width: 1px;"> </div>
-</div>
-
-### Pie Charts
-
-<div>
-<div style="float: left; padding-right: 5px;" width="300" height="300"><img src="piesample.png" width="300" height="300" alt="screenshot of graph" /></div>
-<div style="float: left; padding-left: 5px;" width="300" height="300"><canvas id="piegraph" width="300" height="300"></canvas></div>
-<div style="clear: both; height: 1px; width: 1px;"> </div>
-</div>
-
-Author
-======
-
-Alastair Tse - Last Updated: 17th March 2006
-
-[docs]: PlotKit.html
-[Browser]: SVGCanvasCompat.html
-[PlotKit]: http://www.liquidx.net/plotkit/
-[MochiKit]: http://www.mochikit.com/
-
-{% endfilter %}
-</div>
-<script type="text/javascript">
-<!--
-
-var options = {
- "IECanvasHTC": "../plotkit/iecanvas.htc",
- "colorScheme": PlotKit.Base.palette(PlotKit.Base.baseColors()[0]),
- "padding": {left: 10, right: 10, top: 10, bottom: 30},
- "xTicks": [{v:0, label:"zero"},
- {v:1, label:"one"},
- {v:2, label:"two"},
- {v:3, label:"three"},
- {v:4, label:"four"}],
- "drawYAxis": false,
- "pieRadius": 0.35
-};
-
-
-function drawBarGraph() {
- var layout = new PlotKit.Layout("bar", options);
- layout.addDataset("sqrt", [[0, 0], [1, 1], [2, 1.414], [3, 1.73], [4, 2]]);
- layout.evaluate();
- var canvas = MochiKit.DOM.getElement("bargraph");
- var plotter = new PlotKit.SweetCanvasRenderer(canvas, layout, options);
- plotter.render();
-}
-MochiKit.DOM.addLoadEvent(drawBarGraph);
-
-function drawPieGraph() {
- var layout = new PlotKit.Layout("pie", options);
- layout.addDataset("sqrt", [[0, 0], [1, 1], [2, 1.414], [3, 1.73], [4, 2]]);
- layout.evaluate();
- var canvas = MochiKit.DOM.getElement("piegraph");
- var plotter = new PlotKit.SweetCanvasRenderer(canvas, layout, options);
- plotter.render();
-}
-
-// Damn opera 9 has a bug with javascript subclassing??
-// but works in sweet.html, grr!!
-if (navigator.userAgent.toLowerCase().indexOf("opera") == -1) {
- MochiKit.DOM.addLoadEvent(drawPieGraph);
-}
-
-//-->
-</script>
-{% endblock %}
\ No newline at end of file
+++ /dev/null
-
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" >
-<head>
- <title>PlotKit.Renderer | liquidx</title>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link href="http://media.liquidx.net/css/x_general.css" media="screen" rel="Stylesheet" type="text/css" />
- <link href="http://media.liquidx.net/css/x_header.css" media="screen" rel="Stylesheet" type="text/css" />
- <link href="http://media.liquidx.net/css/x_layout.css" media="screen" rel="Stylesheet" type="text/css" />
- <link href="http://media.liquidx.net/css/x_blocks.css" media="screen" rel="Stylesheet" type="text/css" />
- <link rel="icon" href="/favicon.png" type="image/x-png">
- <link rel="shortcut icon" href="/favicon.png" type="image/x-png">
- <!--[if lt IE 7.]>
- <script defer type="text/javascript" src="http://media.liquidx.net/js/pngfix.js"></script>
- <![endif]-->
-
-<link href="doc.css" media="screen" rel="stylesheet" type="text/css" />
-
-</head>
-
-<body>
- <div id="header">
- <div id="logo"><a href="http://www.liquidx.net/"><img src="http://media.liquidx.net/imgx/logo.png" width="256" height="128" alt="liquidx.net" /></a></div>
- <div id="menu-hack">
- <div id="menu-l"><img src="http://media.liquidx.net/imgx/menu_l.png" width="17" height="28" alt="menu cap" /></div><div id="menu-r"><img src="http://media.liquidx.net/imgx/menu_r.png" width="17" height="28" alt="menu cap" /></div>
- <div id="menu-main">
- <ul id="menu" class="code">
- <li class="tab" id="blog"><a href="http://www.liquidx.net/" title="blog/home">blog</a></li>
- <li class="tab" id="code"><a href="http://www.liquidx.net/code/" title="software i have written">software</a></li>
- <li class="tab" id="dev"><a href="http://projects.liquidx.net/" title="source code for my open source projects">dev</a></li>
- <li class="tab" id="photos"><a href="http://al.tse.id.au/gallery/" title="photos and videos">photos</a></li>
- <li class="tab" id="research"><a href="http://al.tse.id.au/research/" title="research profile">research</a></li>
- <li class="tab" id="links"><a href="http://www.liquidx.net/links/" title="my bookmarks">linkblog</a></li>
- <li class="tab" id="stats"><a href="http://stats.liquidx.net/" title="stats for various parts of my website">stats</a></li>
- <li class="tab" id="status"><a href="http://www.liquidx.net/status/" title="weather report for alastair">status</a></li>
- <li class="tab" id="about"><a href="http://al.tse.id.au/" title="about alastair tse">aboutme</a></li>
- </ul>
- </div>
- </div>
- <div id="quickbuttons">
- <span class="quickbutton"><a href="http://www.liquidx.net/albumartwidget/"><img src="http://media.liquidx.net/imgx/quick_widget.png" alt="album art widget" /></a></span>
- <span class="quickbutton"><a href="http://www.liquidx.net/plotkit/"><img src="http://media.liquidx.net/imgx/quick_plotkit.png" alt="plotkit" /></a></span>
- <span class="quickbutton"><a href="http://www.liquidx.net/fruity/"><img src="http://media.liquidx.net/imgx/quick_fruity.png" alt="fruity" /></a></span>
- </div>
-
- </div>
-
- <div id="body">
-<div class="page doc api">
-
-<p> <a href="PlotKit.html">PlotKit Home</a> | <a href="PlotKit.Layout.html"><<</a> | <a href="PlotKit.Canvas.html">>></a>
-</p>
-
-<h1> PlotKit Renderer</h1>
-<p>A Renderer is responsible for translating the layout calculated by PlotKit.Layout and draw it on to a HTML Canvas, SVG object or any other way. One way to use the renderer is to allow theming of graphs by tweaking the layout.
-</p>
-<p>PlotKit includes some common basic renderers, so you do not need to customise anything if you just plan to change the spacing, colors, fonts, or layout.
-</p>
-<p>PlotKit Renderers should follow an informal protocol to allow users to plug and play different renderers. Below is the informal protocol:
-</p>
-
-<h2> PlotKit Renderer Protocol</h2>
-<ul>
- <li>
- Constructor: <code>new Renderer(element, layout, options = {})</code>
- </li>
-</ul>
-<p> <code>element</code> is the element which this renderer will perform on, <code>layout</code> is the PlotKit.Layout object and <code>options</code> is an associative dictionary described below.
-</p>
-<ul>
- <li>
- class function: <code>isSupported()</code>
- </li>
-</ul>
-<p> Optional check that returns <code>true</code> if the renderer is supported in the current browser.
-</p>
-<ul>
- <li>
- object method: <code>render()</code>
- </li>
-</ul>
-<p> Renders to canvas, can be called multiple times, but <code>clear()</code> must be called between invokations.
-</p>
-<ul>
- <li>
- object method: <code>clear()</code>
- </li>
-</ul>
-<p> Clear the canvas.
-</p>
-
-<h2> PlotKit Renderer Options</h2>
-<p>To allow some basic flexibility of the output, a renderer should
- accept and act on the following options passed in the constructor.
-</p>
-<table cellpadding="0" cellspacing="0">
- <thead>
- <tr><td>Option name</td><td>Description</td><td>Type</td><td>Default</td></tr>
- </thead>
- <tbody>
- <tr>
- <th>backgroundColor</th>
- <td>color to use for background</td>
- <td>MochiKit.Color.Color</td>
- <td>Color.whiteColor()</td>
- </tr>
- <tr>
- <th>colorScheme</th>
- <td>Color scheme used</td>
- <td>Array of MochiKit.Color.Color</td>
- <td>output of PlotKit.Base.colorScheme()</td>
- </tr>
- <tr>
- <th>strokeColor</th>
- <td>Color used stroking. If set to null, the renderer will
- attempt to use strokeColorTransform</td>
- <td>MochiKit.Color.Color or null</td>
- <td>null</td>
- </tr>
- <tr>
- <th>strokeColorTransform</th>
- <td>Name of the method to call to transform Color into stroke color.</td>
- <td>string (name of a function that accepts no arguments)</td>
- <td>"asStrokeColor"</td>
- </tr>
- <tr>
- <th>drawBackground</th>
- <td>Whether the background should be drawn</td>
- <td>boolean</td>
- <td>true</td>
- </tr>
- <tr>
- <th>shouldFill</th>
- <td>Should fill in area under chart</td>
- <td>boolean</td>
- <td>true</td>
- </tr>
- <tr>
- <th>shouldStroke</th>
- <td>Should stroke the borders of shapes in chart</td>
- <td>boolean</td>
- <td>true</td>
- </tr>
- <tr>
- <th>strokeWidth</th>
- <td>Width of stroke used (if shouldStroke is set)</td>
- <td>float</td>
- <td>0.1</td>
- </tr>
- <tr>
- <th>padding</th>
- <td>Padding of the graph drawn (excluding labels)</td>
- <td>Object with properties: top, bottom, left, right.</td>
- <td>{left: 30, right:20, top: 10, bottom: 10}</td>
- </tr>
- <tr>
- <th>drawYAxis</th>
- <td>draw Y Axis</td>
- <td>boolean</td>
- <td>true</td>
- </tr>
- <tr>
- <th>drawXAxis</th>
- <td>draw X Axis</td>
- <td>boolean</td>
- <td>true</td>
- </tr>
- <tr>
- <th>axisLineColor</th>
- <td>Color of axes line.</td>
- <td>MochiKit.Color.Color</td>
- <td>Color.blackColor()</td>
- </tr>
- <tr>
- <th>axisLineWidth</th>
- <td>axis line width</td>
- <td>float</td>
- <td>0.5</td>
- </tr>
- <tr>
- <th>axisTickSize</th>
- <td>length or height of a tick on the y and x axis respectively, in pixels</td>
- <td>float</td>
- <td>3.0</td>
- </tr>
- <tr>
- <th>axisLabelColor</th>
- <td>color of text label on axis.</td>
- <td>MochiKit.Color.Color</td>
- <td>Color.blackColor()</td>
- </tr>
- <tr>
- <th>axisLabelFontSize</th>
- <td>Font size of labels in pixels </td>
- <td>integer</td>
- <td>9</td>
- </tr>
- <tr>
- <th>axisLabelWidth</th>
- <td>Width of labels on ticks, in pixels</td>
- <td>integer</td>
- <td>50</td>
- </tr>
- <tr>
- <th>enableEvents</th>
- <td>Enable events (if supported)</td>
- <td>boolean</td>
- <td>true</td>
- </tr>
-</tbody>
-</table>
-
-
-<h1> Internal Renderer Methods and Style</h1>
-<p>The default renderers that are available follow a rough structure. If
- you plan to write a new renderer, you should think about using a
- similar structure.
-</p>
-<p>Also, it is important that you follow an Object Orientated style and
- split up the rendering methods as much as logically possible to allow
- other developers to extend the work by using a "psuedo subclassing"
- method described below.
-</p>
-
-<h2> Subclassing</h2>
-<p>PlotKit Renderers should adopt a Javascript subclassing structure to
- allow developers/themers to customise certain aspects of the
- rendering. Here is an example of what is expected:
-</p>
-<pre><code>MyRenderer = function(element, layout, options) {
- if (arguments.length > 0)
- this.__init__(element, layout, options);
-};
-
-MyRenderer.prototype.__init__ = function(element, layout, options) {
- ....
-};
-</code></pre><p>In this case, the default javascript constructor acts only when passed
- arguments. <code>MyRenderer.prototype.__init__</code> is the real
- constructor. It is named in similar vein to Python's constructor.
-</p>
-<p>For users who would like to subclass, they will need to use the
- following snippet of code:
-</p>
-<pre><code> MyAlternateRenderer = function(element, layout. options) {
- if (arguments.length > 0)
- this.__init__(element, layout, options);
- };
- MyAlternateRenderer.prototype = new MyRenderer();
- MyAlternateRenderer.prototype.constructor = MyAlternateRenderer;
- MyAlternateRenderer.__super__ = MyRenderer.prototype;
-
- MyAlternateRenderer.prototype.__init__ = function(element, layout, options) {
- MyAlternateRenderer.__super__.__init__.call(this, element, layout, options);
- };
-</code></pre><p>For subclasses, they will need the following magic in order to
- initialise their subclass. But after that, you can either override
- <code>MyAlternateRenderer.prototype.__init__</code> with your own
- implementation or just leave the superclass to deal with the
- constructor.
-</p>
-<p>A more thorough example can be found in the PlotKit source for
- <code>Canvas.js</code> and <code>SweetCanvas.js</code> respectively.
-</p>
-
-<h2> Internal Renderer Properties</h2>
-<p>The bundled renderers are have the following common properties to
- allow standard access by all subclasses:
-</p>
-<ul>
- <li>
- <code>this.layout</code>
- </li>
-</ul>
-<p>The PlotKit.Layout object passed by the user.
-</p>
-<ul>
- <li>
- <code>this.element</code>
- </li>
-</ul>
-<p>The HTML element to use, either a Canvas Element or SVG Element depending
- on whether a Canvas Renderer or SVG Renderer is in use.
-</p>
-<ul>
- <li>
- <code>this.options</code>
- </li>
-</ul>
-<p>A dictionary of options that are applicable to the rendering style.
-</p>
-<ul>
- <li>
- <code>this.xlabels</code>
- </li>
-</ul>
-<p>A list of elements that represent the axis. Should be cleared whenever
- <code>clear()</code> is executed.
-</p>
-<ul>
- <li>
- <code>this.ylabels</code>
- </li>
-</ul>
-<p>A list of elements that represent the axis. Should be cleared whenever
- <code>clear()</code> is executed.
-</p>
-
-<h2> Internal Renderer Methods</h2>
-<ul>
- <li>
- <code>_renderBarChart()</code>
- </li>
-</ul>
-<p>Renders only the bars of a bar chart on the element by looking at
- <code>this.layout.bars</code> for the bars to render. Will only be called if
- <code>this.layout.style == "bars"</code>
-</p>
-<ul>
- <li>
- <code>_renderLineChart()</code>
- </li>
-</ul>
-<p>Renders only the lines of a line chart on the element by looking at
- <code>this.layout.points</code> for the points to render. Will only be called if
- <code>this.layout.style == "line"</code>
-</p>
-<ul>
- <li>
- <code>_renderPieChart()</code>
- </li>
-</ul>
-<p>Renders only the slices of the pie in <code>this.layout.slices</code>.
- Will only be called if <code>this.layout.style == "pie"</code>
-</p>
-<ul>
- <li>
- <code>_renderBarAxis()</code>
- </li>
-</ul>
-<p>Renders the axis for a bar chart by looking at the
- <code>this.layout.xticks</code> and <code>this.layout.yticks</code>.
-</p>
-<ul>
- <li>
- <code>_renderLineAxis()</code>
- </li>
-</ul>
-<p>Renders the axis for a line chart by looking at the
- <code>this.layout.xticks</code> and <code>this.layout.yticks</code>.
-</p>
-<ul>
- <li>
- <code>_renderPieAxis()</code>
- </li>
-</ul>
-<p>Renders the labels for a pie chart by looking at
- <code>this.layout.xticks</code> only.
-</p>
-<ul>
- <li>
- <code>_renderBackground()</code>
- </li>
-</ul>
-<p>Called to render the background of the chart. Should check whether
- <code>this.options.drawsBackground</code> is set before proceeding.
-</p>
-
-<h1> Events from the Chart</h1>
-<p>There is preliminary support for events from the chart for the Canvas
- Renderer but the API is not stablised and subject to change. <strong>(TODO)</strong>.
-</p>
-
-
-</div>
-</div>
-
-
-
-
- <div id="footer">
- <div class="block">
- <h3>Syndication Feeds:</h3>
- <p>
- <ul class="tiny">
- <li><a href="http://www.liquidx.net/blog/feed/atom/" class="feed" title="feed for all posts on liquidx.net"><img src="http://media.liquidx.net/imgx/feed.gif" class="feed" alt="feed" />Atom Feed for the Blog Entries</a></li>
- <li><a href="http://www.liquidx.net/blog/feed/rss/" class="feed" title="feed for all posts on liquidx.net"><img src="http://media.liquidx.net/imgx/feed.gif" class="feed" alt="feed" />RSS Feed for the Blog Entries</a></li>
- <li><a href="http://www.liquidx.net/comments/feed/atom/" class="feed" title="feed for all posts on liquidx.net"><img src="http://media.liquidx.net/imgx/feed.gif" class="feed" alt="feed" />Feed for All Comments</a></li>
- <li><a href="http://www.liquidx.net/links/feed/atom/" class="feed" title="feed for all bookmarked links"><img src="http://media.liquidx.net/imgx/feed.gif" class="feed" alt="feed" />Feed for Links</a></li>
- </ul>
- </p>
- </div>
- <div class="block">
- <h3>About this site:</h3>
- <p>Content on this site is licensed under <a href="http://creativecommons.org/licenses/by/2.5/">CC By Attribution</a> unless otherwise specified.
- Copyright (c) 2002-2006, <a href="http://al.tse.id.au/">Alastair Tse</a>.</p>
- <p>For more information, see <a href="http://al.tse.id.au/">al.tse.id.au</a>.</p>
- <p><script type="text/javascript" src="http://technorati.com/embed/itwctkzez.js"></script></p>
- </div>
- <div class="block">
- <h3>Is Made Possible By:</h3>
- <p>
- <dl>
- <dt><a href="http://ecto.kung-foo.tv/" class="clean">ecto</a>. </dt>
- <dd>Blogging client for Mac</dd>
- <dt><a href="http://djangoproject.com/" class="clean">Django</a>. </dt>
- <dd>Python Web Framework</dd>
- <dt><a href="http://www.lighttpd.net/" class="clean">lighttpd</a>. </dt>
- <dd>Really Fast Web Server</dd>
- <dt><a href="http://www.saddi.com/software/flup/" class="clean">flup</a>. </dt>
- <dd>FastCGI for Python</dd>
- </dl>
- </p>
- </div>
- <div class="block">
- <h3>Search My Sites:</h3>
- <p>
- <div style='margin: 10px; text-align: center; width: 160px;'><form action='http://www.rollyo.com/search.html' ><fieldset style='margin: 0; padding: 4px 0 0 0; height: 60px; border: none; background: url(http://rollyo.com/remote/togo-bg4.png) no-repeat top left;'><div style="position: absolute; float:left; z-index:99; width: 46px; height: 50px;"><a href="http://rollyo.com"><img style="border: none;" height="50" width="46" src="http://rollyo.com/remote/x.gif"></a></div> <input type='text' size='30' style='float: left; width: 90px; margin: 2px 0 0 48px; padding: 0; font-size: 12px;' name='q' value='Search...' onclick='this.value="";' /><br /> <select name='sid' style='float: left; width: 78px; height: 15px; margin: 12px 0 0 46px; font-size: 7pt; padding: 0;'><option value='106081' selected='selected'>liquidx</option><option value='web'>Search The Web</option></select><input type='image' src='http://rollyo.com/remote/btn-togo.png' alt='Go' style='margin: 12px 0 0 3px; float: left;' /><input type='hidden' name='togo-v' value='1' /></fieldset></form></div>
- </p>
- </div>
-
-
- <div class="clear"> </div>
-
- </div>
-
-
-
- <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
- <script type="text/javascript">
- _uacct = "UA-58117-1";
- urchinTracker();
- </script>
-
-</body>
-</html>
+++ /dev/null
-{% extends "basex.html" %}
-{% load markup %}
-{% block pageid %}code{% endblock %}
-{% block headers %}
-<link href="doc.css" media="screen" rel="stylesheet" type="text/css" />
-{% endblock %}
-{% block title %}PlotKit.Renderer{% endblock %}
-
-{% block content %}
-<div class="page doc api">
-{% filter markdown %}
-[PlotKit Home](PlotKit.html) | [<<](PlotKit.Layout.html) | [>>](PlotKit.Canvas.html)
-
-PlotKit Renderer
-================
-
-A Renderer is responsible for translating the layout calculated by PlotKit.Layout and draw it on to a HTML Canvas, SVG object or any other way. One way to use the renderer is to allow theming of graphs by tweaking the layout.
-
-PlotKit includes some common basic renderers, so you do not need to customise anything if you just plan to change the spacing, colors, fonts, or layout.
-
-PlotKit Renderers should follow an informal protocol to allow users to plug and play different renderers. Below is the informal protocol:
-
-PlotKit Renderer Protocol
--------------------------
-* Constructor: ``new Renderer(element, layout, options = {})``
-
- ``element`` is the element which this renderer will perform on, ``layout`` is the PlotKit.Layout object and ``options`` is an associative dictionary described below.
-
-* class function: ``isSupported()``
-
- Optional check that returns ``true`` if the renderer is supported in the current browser.
-
-* object method: ``render()``
-
- Renders to canvas, can be called multiple times, but ``clear()`` must be called between invokations.
-
-* object method: ``clear()``
-
- Clear the canvas.
-
-PlotKit Renderer Options
-------------------------
-To allow some basic flexibility of the output, a renderer should
-accept and act on the following options passed in the constructor.
-
-
-<table cellpadding="0" cellspacing="0">
- <thead>
- <tr><td>Option name</td><td>Description</td><td>Type</td><td>Default</td></tr>
- </thead>
- <tbody>
- <tr>
- <th>backgroundColor</th>
- <td>color to use for background</td>
- <td>MochiKit.Color.Color</td>
- <td>Color.whiteColor()</td>
- </tr>
- <tr>
- <th>colorScheme</th>
- <td>Color scheme used</td>
- <td>Array of MochiKit.Color.Color</td>
- <td>output of PlotKit.Base.colorScheme()</td>
- </tr>
- <tr>
- <th>strokeColor</th>
- <td>Color used stroking. If set to null, the renderer will
- attempt to use strokeColorTransform</td>
- <td>MochiKit.Color.Color or null</td>
- <td>null</td>
- </tr>
- <tr>
- <th>strokeColorTransform</th>
- <td>Name of the method to call to transform Color into stroke color.</td>
- <td>string (name of a function that accepts no arguments)</td>
- <td>"asStrokeColor"</td>
- </tr>
- <tr>
- <th>drawBackground</th>
- <td>Whether the background should be drawn</td>
- <td>boolean</td>
- <td>true</td>
- </tr>
- <tr>
- <th>shouldFill</th>
- <td>Should fill in area under chart</td>
- <td>boolean</td>
- <td>true</td>
- </tr>
- <tr>
- <th>shouldStroke</th>
- <td>Should stroke the borders of shapes in chart</td>
- <td>boolean</td>
- <td>true</td>
- </tr>
- <tr>
- <th>strokeWidth</th>
- <td>Width of stroke used (if shouldStroke is set)</td>
- <td>float</td>
- <td>0.1</td>
- </tr>
- <tr>
- <th>padding</th>
- <td>Padding of the graph drawn (excluding labels)</td>
- <td>Object with properties: top, bottom, left, right.</td>
- <td>{left: 30, right:20, top: 10, bottom: 10}</td>
- </tr>
- <tr>
- <th>drawYAxis</th>
- <td>draw Y Axis</td>
- <td>boolean</td>
- <td>true</td>
- </tr>
- <tr>
- <th>drawXAxis</th>
- <td>draw X Axis</td>
- <td>boolean</td>
- <td>true</td>
- </tr>
- <tr>
- <th>axisLineColor</th>
- <td>Color of axes line.</td>
- <td>MochiKit.Color.Color</td>
- <td>Color.blackColor()</td>
- </tr>
- <tr>
- <th>axisLineWidth</th>
- <td>axis line width</td>
- <td>float</td>
- <td>0.5</td>
- </tr>
- <tr>
- <th>axisTickSize</th>
- <td>length or height of a tick on the y and x axis respectively, in pixels</td>
- <td>float</td>
- <td>3.0</td>
- </tr>
- <tr>
- <th>axisLabelColor</th>
- <td>color of text label on axis.</td>
- <td>MochiKit.Color.Color</td>
- <td>Color.blackColor()</td>
- </tr>
- <tr>
- <th>axisLabelFontSize</th>
- <td>Font size of labels in pixels </td>
- <td>integer</td>
- <td>9</td>
- </tr>
- <tr>
- <th>axisLabelWidth</th>
- <td>Width of labels on ticks, in pixels</td>
- <td>integer</td>
- <td>50</td>
- </tr>
- <tr>
- <th>enableEvents</th>
- <td>Enable events (if supported)</td>
- <td>boolean</td>
- <td>true</td>
- </tr>
-</tbody>
-</table>
-
-Internal Renderer Methods and Style
-===================================
-
-The default renderers that are available follow a rough structure. If
-you plan to write a new renderer, you should think about using a
-similar structure.
-
-Also, it is important that you follow an Object Orientated style and
-split up the rendering methods as much as logically possible to allow
-other developers to extend the work by using a "psuedo subclassing"
-method described below.
-
-Subclassing
------------
-
-PlotKit Renderers should adopt a Javascript subclassing structure to
-allow developers/themers to customise certain aspects of the
-rendering. Here is an example of what is expected:
-
- MyRenderer = function(element, layout, options) {
- if (arguments.length > 0)
- this.__init__(element, layout, options);
- };
-
- MyRenderer.prototype.__init__ = function(element, layout, options) {
- ....
- };
-
-In this case, the default javascript constructor acts only when passed
-arguments. ``MyRenderer.prototype.__init__`` is the real
-constructor. It is named in similar vein to Python's constructor.
-
-For users who would like to subclass, they will need to use the
-following snippet of code:
-
- MyAlternateRenderer = function(element, layout. options) {
- if (arguments.length > 0)
- this.__init__(element, layout, options);
- };
- MyAlternateRenderer.prototype = new MyRenderer();
- MyAlternateRenderer.prototype.constructor = MyAlternateRenderer;
- MyAlternateRenderer.__super__ = MyRenderer.prototype;
-
- MyAlternateRenderer.prototype.__init__ = function(element, layout, options) {
- MyAlternateRenderer.__super__.__init__.call(this, element, layout, options);
- };
-
-
-For subclasses, they will need the following magic in order to
-initialise their subclass. But after that, you can either override
-``MyAlternateRenderer.prototype.__init__`` with your own
-implementation or just leave the superclass to deal with the
-constructor.
-
-A more thorough example can be found in the PlotKit source for
-``Canvas.js`` and ``SweetCanvas.js`` respectively.
-
-Internal Renderer Properties
-----------------------------
-
-The bundled renderers are have the following common properties to
-allow standard access by all subclasses:
-
-* ``this.layout``
-
-The PlotKit.Layout object passed by the user.
-
-* ``this.element``
-
-The HTML element to use, either a Canvas Element or SVG Element depending
-on whether a Canvas Renderer or SVG Renderer is in use.
-
-* ``this.options``
-
-A dictionary of options that are applicable to the rendering style.
-
-* ``this.xlabels``
-
-A list of elements that represent the axis. Should be cleared whenever
-``clear()`` is executed.
-
-* ``this.ylabels``
-
-A list of elements that represent the axis. Should be cleared whenever
-``clear()`` is executed.
-
-Internal Renderer Methods
--------------------------
-
-* ``_renderBarChart()``
-
-Renders only the bars of a bar chart on the element by looking at
-``this.layout.bars`` for the bars to render. Will only be called if
-``this.layout.style == "bars"``
-
-* ``_renderLineChart()``
-
-Renders only the lines of a line chart on the element by looking at
-``this.layout.points`` for the points to render. Will only be called if
-``this.layout.style == "line"``
-
-* ``_renderPieChart()``
-
-Renders only the slices of the pie in ``this.layout.slices``.
-Will only be called if ``this.layout.style == "pie"``
-
-* ``_renderBarAxis()``
-
-Renders the axis for a bar chart by looking at the
-``this.layout.xticks`` and ``this.layout.yticks``.
-
-* ``_renderLineAxis()``
-
-Renders the axis for a line chart by looking at the
-``this.layout.xticks`` and ``this.layout.yticks``.
-
-* ``_renderPieAxis()``
-
-Renders the labels for a pie chart by looking at
-``this.layout.xticks`` only.
-
-* ``_renderBackground()``
-
-Called to render the background of the chart. Should check whether
-``this.options.drawsBackground`` is set before proceeding.
-
-
-Events from the Chart
-=====================
-
-There is preliminary support for events from the chart for the Canvas
-Renderer but the API is not stablised and subject to change. __(TODO)__.
-
-{% endfilter %}
-</div>
-{% endblock %}
+++ /dev/null
-
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" >
-<head>
- <title>PlotKit.SVG | liquidx</title>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link href="http://media.liquidx.net/css/x_general.css" media="screen" rel="Stylesheet" type="text/css" />
- <link href="http://media.liquidx.net/css/x_header.css" media="screen" rel="Stylesheet" type="text/css" />
- <link href="http://media.liquidx.net/css/x_layout.css" media="screen" rel="Stylesheet" type="text/css" />
- <link href="http://media.liquidx.net/css/x_blocks.css" media="screen" rel="Stylesheet" type="text/css" />
- <link rel="icon" href="/favicon.png" type="image/x-png">
- <link rel="shortcut icon" href="/favicon.png" type="image/x-png">
- <!--[if lt IE 7.]>
- <script defer type="text/javascript" src="http://media.liquidx.net/js/pngfix.js"></script>
- <![endif]-->
-
-<link href="doc.css" media="screen" rel="stylesheet" type="text/css" />
-
-</head>
-
-<body>
- <div id="header">
- <div id="logo"><a href="http://www.liquidx.net/"><img src="http://media.liquidx.net/imgx/logo.png" width="256" height="128" alt="liquidx.net" /></a></div>
- <div id="menu-hack">
- <div id="menu-l"><img src="http://media.liquidx.net/imgx/menu_l.png" width="17" height="28" alt="menu cap" /></div><div id="menu-r"><img src="http://media.liquidx.net/imgx/menu_r.png" width="17" height="28" alt="menu cap" /></div>
- <div id="menu-main">
- <ul id="menu" class="code">
- <li class="tab" id="blog"><a href="http://www.liquidx.net/" title="blog/home">blog</a></li>
- <li class="tab" id="code"><a href="http://www.liquidx.net/code/" title="software i have written">software</a></li>
- <li class="tab" id="dev"><a href="http://projects.liquidx.net/" title="source code for my open source projects">dev</a></li>
- <li class="tab" id="photos"><a href="http://al.tse.id.au/gallery/" title="photos and videos">photos</a></li>
- <li class="tab" id="research"><a href="http://al.tse.id.au/research/" title="research profile">research</a></li>
- <li class="tab" id="links"><a href="http://www.liquidx.net/links/" title="my bookmarks">linkblog</a></li>
- <li class="tab" id="stats"><a href="http://stats.liquidx.net/" title="stats for various parts of my website">stats</a></li>
- <li class="tab" id="status"><a href="http://www.liquidx.net/status/" title="weather report for alastair">status</a></li>
- <li class="tab" id="about"><a href="http://al.tse.id.au/" title="about alastair tse">aboutme</a></li>
- </ul>
- </div>
- </div>
- <div id="quickbuttons">
- <span class="quickbutton"><a href="http://www.liquidx.net/albumartwidget/"><img src="http://media.liquidx.net/imgx/quick_widget.png" alt="album art widget" /></a></span>
- <span class="quickbutton"><a href="http://www.liquidx.net/plotkit/"><img src="http://media.liquidx.net/imgx/quick_plotkit.png" alt="plotkit" /></a></span>
- <span class="quickbutton"><a href="http://www.liquidx.net/fruity/"><img src="http://media.liquidx.net/imgx/quick_fruity.png" alt="fruity" /></a></span>
- </div>
-
- </div>
-
- <div id="body">
-<div class="page doc api">
-
-<p> <a href="PlotKit.html">PlotKit Home</a> | <a href="PlotKit.Canvas.html"><<</a> | <a href="PlotKit.SweetCanvas.html">>></a>
-</p>
-
-<h1> PlotKit SVG</h1>
-<p>PlotKit SVG includes the SVGRenderer which allows chart plotting on SVG capable browsers such as Firefox 1.5 and Opera 9.0. It should support Adobe SVG plugin, but is current untested.
-</p>
-
-<h2> Important Implementation Requirements</h2>
-<p>In order to use the SVG Renderer, the file and webserver must support inline SVG files. This means the following conditions must exist:
-</p>
-
-<h3>The HTML file must be XHTML compliant. </h3>
-<p>So it should start off with this:
-</p>
-<pre><code><?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html
-xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
-xmlns:svg="http://www.w3.org/2000/svg"
-xmlns:xlink="http://www.w3.org/1999/xlink">
-<head>
- <object id="AdobeSVG" classid="clsid:78156a80-c6a1-4bbf-8e6a-3cd390eeb4e2" width="1" height="1"></object>
- <?import namespace="svg" implementation="#AdobeSVG"?>
-...
-</code></pre>
-<h3>Correct XHTML Mime-Type</h3>
-<p>Firefox and MSIE are fussy about the mimetype to do in-line
- SVG. Firefox requires that either the URL ends in .html or that the
- file is returned as mime type <code>application/xhtml+xml</code> in the HTTP
- headers.
-</p>
-<p>However, MSIE does not recognise <code>application/xhtml+xml</code> and will
- work fine with regular <code>text/html</code> mimetype for XHTML.
-</p>
-
-<h3>Non XHTML Compliant javascript includes</h3>
-<p>You cannot use the autoloading MochiKit.js, but instead include all the JS files individually or use the packed MochiKit. This is because MochiKit's way of autoloading is not XHTML compliant.
-</p>
-<p>An example of this is in the tests.
-</p>
-
-<h2> PlotKit SVG Options</h2>
-<p>There are no additional options for the SVG Renderer apart from the default Renderer options.
-</p>
-
-
-</div>
-</div>
-
-
-
-
- <div id="footer">
- <div class="block">
- <h3>Syndication Feeds:</h3>
- <p>
- <ul class="tiny">
- <li><a href="http://www.liquidx.net/blog/feed/atom/" class="feed" title="feed for all posts on liquidx.net"><img src="http://media.liquidx.net/imgx/feed.gif" class="feed" alt="feed" />Atom Feed for the Blog Entries</a></li>
- <li><a href="http://www.liquidx.net/blog/feed/rss/" class="feed" title="feed for all posts on liquidx.net"><img src="http://media.liquidx.net/imgx/feed.gif" class="feed" alt="feed" />RSS Feed for the Blog Entries</a></li>
- <li><a href="http://www.liquidx.net/comments/feed/atom/" class="feed" title="feed for all posts on liquidx.net"><img src="http://media.liquidx.net/imgx/feed.gif" class="feed" alt="feed" />Feed for All Comments</a></li>
- <li><a href="http://www.liquidx.net/links/feed/atom/" class="feed" title="feed for all bookmarked links"><img src="http://media.liquidx.net/imgx/feed.gif" class="feed" alt="feed" />Feed for Links</a></li>
- </ul>
- </p>
- </div>
- <div class="block">
- <h3>About this site:</h3>
- <p>Content on this site is licensed under <a href="http://creativecommons.org/licenses/by/2.5/">CC By Attribution</a> unless otherwise specified.
- Copyright (c) 2002-2006, <a href="http://al.tse.id.au/">Alastair Tse</a>.</p>
- <p>For more information, see <a href="http://al.tse.id.au/">al.tse.id.au</a>.</p>
- <p><script type="text/javascript" src="http://technorati.com/embed/itwctkzez.js"></script></p>
- </div>
- <div class="block">
- <h3>Is Made Possible By:</h3>
- <p>
- <dl>
- <dt><a href="http://ecto.kung-foo.tv/" class="clean">ecto</a>. </dt>
- <dd>Blogging client for Mac</dd>
- <dt><a href="http://djangoproject.com/" class="clean">Django</a>. </dt>
- <dd>Python Web Framework</dd>
- <dt><a href="http://www.lighttpd.net/" class="clean">lighttpd</a>. </dt>
- <dd>Really Fast Web Server</dd>
- <dt><a href="http://www.saddi.com/software/flup/" class="clean">flup</a>. </dt>
- <dd>FastCGI for Python</dd>
- </dl>
- </p>
- </div>
- <div class="block">
- <h3>Search My Sites:</h3>
- <p>
- <div style='margin: 10px; text-align: center; width: 160px;'><form action='http://www.rollyo.com/search.html' ><fieldset style='margin: 0; padding: 4px 0 0 0; height: 60px; border: none; background: url(http://rollyo.com/remote/togo-bg4.png) no-repeat top left;'><div style="position: absolute; float:left; z-index:99; width: 46px; height: 50px;"><a href="http://rollyo.com"><img style="border: none;" height="50" width="46" src="http://rollyo.com/remote/x.gif"></a></div> <input type='text' size='30' style='float: left; width: 90px; margin: 2px 0 0 48px; padding: 0; font-size: 12px;' name='q' value='Search...' onclick='this.value="";' /><br /> <select name='sid' style='float: left; width: 78px; height: 15px; margin: 12px 0 0 46px; font-size: 7pt; padding: 0;'><option value='106081' selected='selected'>liquidx</option><option value='web'>Search The Web</option></select><input type='image' src='http://rollyo.com/remote/btn-togo.png' alt='Go' style='margin: 12px 0 0 3px; float: left;' /><input type='hidden' name='togo-v' value='1' /></fieldset></form></div>
- </p>
- </div>
-
-
- <div class="clear"> </div>
-
- </div>
-
-
-
- <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
- <script type="text/javascript">
- _uacct = "UA-58117-1";
- urchinTracker();
- </script>
-
-</body>
-</html>
+++ /dev/null
-{% extends "basex.html" %}
-{% load markup %}
-{% block pageid %}code{% endblock %}
-{% block headers %}
-<link href="doc.css" media="screen" rel="stylesheet" type="text/css" />
-{% endblock %}
-{% block title %}PlotKit.SVG{% endblock %}
-
-{% block content %}
-<div class="page doc api">
-{% filter markdown %}
-[PlotKit Home](PlotKit.html) | [<<](PlotKit.Canvas.html) | [>>](PlotKit.SweetCanvas.html)
-
-PlotKit SVG
-===========
-
-PlotKit SVG includes the SVGRenderer which allows chart plotting on SVG capable browsers such as Firefox 1.5 and Opera 9.0. It should support Adobe SVG plugin, but is current untested.
-
-Important Implementation Requirements
--------------------------------------
-
-In order to use the SVG Renderer, the file and webserver must support inline SVG files. This means the following conditions must exist:
-
-###The HTML file must be XHTML compliant.
-
-So it should start off with this:
-
- <?xml version="1.0" encoding="UTF-8"?>
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html
- xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
- xmlns:svg="http://www.w3.org/2000/svg"
- xmlns:xlink="http://www.w3.org/1999/xlink">
- <head>
- <object id="AdobeSVG" classid="clsid:78156a80-c6a1-4bbf-8e6a-3cd390eeb4e2" width="1" height="1"></object>
- <?import namespace="svg" implementation="#AdobeSVG"?>
- ...
-
-###Correct XHTML Mime-Type
-
-Firefox and MSIE are fussy about the mimetype to do in-line
-SVG. Firefox requires that either the URL ends in .html or that the
-file is returned as mime type ``application/xhtml+xml`` in the HTTP
-headers.
-
-However, MSIE does not recognise ``application/xhtml+xml`` and will
-work fine with regular ``text/html`` mimetype for XHTML.
-
-###Non XHTML Compliant javascript includes
-
-You cannot use the autoloading MochiKit.js, but instead include all the JS files individually or use the packed MochiKit. This is because MochiKit's way of autoloading is not XHTML compliant.
-
-An example of this is in the tests.
-
-
-PlotKit SVG Options
--------------------
-
-There are no additional options for the SVG Renderer apart from the default Renderer options.
-
-{% endfilter %}
-</div>
-{% endblock %}
\ No newline at end of file
+++ /dev/null
-
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" >
-<head>
- <title>PlotKit.SweetCanvas | liquidx</title>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link href="http://media.liquidx.net/css/x_general.css" media="screen" rel="Stylesheet" type="text/css" />
- <link href="http://media.liquidx.net/css/x_header.css" media="screen" rel="Stylesheet" type="text/css" />
- <link href="http://media.liquidx.net/css/x_layout.css" media="screen" rel="Stylesheet" type="text/css" />
- <link href="http://media.liquidx.net/css/x_blocks.css" media="screen" rel="Stylesheet" type="text/css" />
- <link rel="icon" href="/favicon.png" type="image/x-png">
- <link rel="shortcut icon" href="/favicon.png" type="image/x-png">
- <!--[if lt IE 7.]>
- <script defer type="text/javascript" src="http://media.liquidx.net/js/pngfix.js"></script>
- <![endif]-->
-
-<link href="doc.css" media="screen" rel="stylesheet" type="text/css" />
-
-</head>
-
-<body>
- <div id="header">
- <div id="logo"><a href="http://www.liquidx.net/"><img src="http://media.liquidx.net/imgx/logo.png" width="256" height="128" alt="liquidx.net" /></a></div>
- <div id="menu-hack">
- <div id="menu-l"><img src="http://media.liquidx.net/imgx/menu_l.png" width="17" height="28" alt="menu cap" /></div><div id="menu-r"><img src="http://media.liquidx.net/imgx/menu_r.png" width="17" height="28" alt="menu cap" /></div>
- <div id="menu-main">
- <ul id="menu" class="code">
- <li class="tab" id="blog"><a href="http://www.liquidx.net/" title="blog/home">blog</a></li>
- <li class="tab" id="code"><a href="http://www.liquidx.net/code/" title="software i have written">software</a></li>
- <li class="tab" id="dev"><a href="http://projects.liquidx.net/" title="source code for my open source projects">dev</a></li>
- <li class="tab" id="photos"><a href="http://al.tse.id.au/gallery/" title="photos and videos">photos</a></li>
- <li class="tab" id="research"><a href="http://al.tse.id.au/research/" title="research profile">research</a></li>
- <li class="tab" id="links"><a href="http://www.liquidx.net/links/" title="my bookmarks">linkblog</a></li>
- <li class="tab" id="stats"><a href="http://stats.liquidx.net/" title="stats for various parts of my website">stats</a></li>
- <li class="tab" id="status"><a href="http://www.liquidx.net/status/" title="weather report for alastair">status</a></li>
- <li class="tab" id="about"><a href="http://al.tse.id.au/" title="about alastair tse">aboutme</a></li>
- </ul>
- </div>
- </div>
- <div id="quickbuttons">
- <span class="quickbutton"><a href="http://www.liquidx.net/albumartwidget/"><img src="http://media.liquidx.net/imgx/quick_widget.png" alt="album art widget" /></a></span>
- <span class="quickbutton"><a href="http://www.liquidx.net/plotkit/"><img src="http://media.liquidx.net/imgx/quick_plotkit.png" alt="plotkit" /></a></span>
- <span class="quickbutton"><a href="http://www.liquidx.net/fruity/"><img src="http://media.liquidx.net/imgx/quick_fruity.png" alt="fruity" /></a></span>
- </div>
-
- </div>
-
- <div id="body">
-<div class="page doc">
-
-<p> <a href="PlotKit.html">PlotKit Home</a> | <a href="PlotKit.SVG.html"><<</a> | <a href="PlotKit.SweetSVG.html">>></a>
-</p>
-
-<h1> PlotKit Sweet Canvas Renderer</h1>
-<p>This renderer is an extension of the basic Canvas Renderer to show off
- what you can do to make graphs pretty without learning any graph
- layout code.
-</p>
-<p>There are no extra methods or options to use. The interface is exactly
- the same as <code>PlotKit.Canvas</code>'s CanvasRenderer.
-</p>
-<p>SweetCanvasRenderer adds a fake shadow around bars, lines and circles
- along with a 2.0 width white outline and a etched light coloured
- background.
-</p>
-
-<h1> Example</h1>
-
-
-</div>
-</div>
-
-
-
-
- <div id="footer">
- <div class="block">
- <h3>Syndication Feeds:</h3>
- <p>
- <ul class="tiny">
- <li><a href="http://www.liquidx.net/blog/feed/atom/" class="feed" title="feed for all posts on liquidx.net"><img src="http://media.liquidx.net/imgx/feed.gif" class="feed" alt="feed" />Atom Feed for the Blog Entries</a></li>
- <li><a href="http://www.liquidx.net/blog/feed/rss/" class="feed" title="feed for all posts on liquidx.net"><img src="http://media.liquidx.net/imgx/feed.gif" class="feed" alt="feed" />RSS Feed for the Blog Entries</a></li>
- <li><a href="http://www.liquidx.net/comments/feed/atom/" class="feed" title="feed for all posts on liquidx.net"><img src="http://media.liquidx.net/imgx/feed.gif" class="feed" alt="feed" />Feed for All Comments</a></li>
- <li><a href="http://www.liquidx.net/links/feed/atom/" class="feed" title="feed for all bookmarked links"><img src="http://media.liquidx.net/imgx/feed.gif" class="feed" alt="feed" />Feed for Links</a></li>
- </ul>
- </p>
- </div>
- <div class="block">
- <h3>About this site:</h3>
- <p>Content on this site is licensed under <a href="http://creativecommons.org/licenses/by/2.5/">CC By Attribution</a> unless otherwise specified.
- Copyright (c) 2002-2006, <a href="http://al.tse.id.au/">Alastair Tse</a>.</p>
- <p>For more information, see <a href="http://al.tse.id.au/">al.tse.id.au</a>.</p>
- <p><script type="text/javascript" src="http://technorati.com/embed/itwctkzez.js"></script></p>
- </div>
- <div class="block">
- <h3>Is Made Possible By:</h3>
- <p>
- <dl>
- <dt><a href="http://ecto.kung-foo.tv/" class="clean">ecto</a>. </dt>
- <dd>Blogging client for Mac</dd>
- <dt><a href="http://djangoproject.com/" class="clean">Django</a>. </dt>
- <dd>Python Web Framework</dd>
- <dt><a href="http://www.lighttpd.net/" class="clean">lighttpd</a>. </dt>
- <dd>Really Fast Web Server</dd>
- <dt><a href="http://www.saddi.com/software/flup/" class="clean">flup</a>. </dt>
- <dd>FastCGI for Python</dd>
- </dl>
- </p>
- </div>
- <div class="block">
- <h3>Search My Sites:</h3>
- <p>
- <div style='margin: 10px; text-align: center; width: 160px;'><form action='http://www.rollyo.com/search.html' ><fieldset style='margin: 0; padding: 4px 0 0 0; height: 60px; border: none; background: url(http://rollyo.com/remote/togo-bg4.png) no-repeat top left;'><div style="position: absolute; float:left; z-index:99; width: 46px; height: 50px;"><a href="http://rollyo.com"><img style="border: none;" height="50" width="46" src="http://rollyo.com/remote/x.gif"></a></div> <input type='text' size='30' style='float: left; width: 90px; margin: 2px 0 0 48px; padding: 0; font-size: 12px;' name='q' value='Search...' onclick='this.value="";' /><br /> <select name='sid' style='float: left; width: 78px; height: 15px; margin: 12px 0 0 46px; font-size: 7pt; padding: 0;'><option value='106081' selected='selected'>liquidx</option><option value='web'>Search The Web</option></select><input type='image' src='http://rollyo.com/remote/btn-togo.png' alt='Go' style='margin: 12px 0 0 3px; float: left;' /><input type='hidden' name='togo-v' value='1' /></fieldset></form></div>
- </p>
- </div>
-
-
- <div class="clear"> </div>
-
- </div>
-
-
-
- <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
- <script type="text/javascript">
- _uacct = "UA-58117-1";
- urchinTracker();
- </script>
-
-</body>
-</html>
+++ /dev/null
-{% extends "basex.html" %}
-{% load markup %}
-{% block pageid %}code{% endblock %}
-{% block headers %}
-<link href="doc.css" media="screen" rel="stylesheet" type="text/css" />
-{% endblock %}
-{% block title %}PlotKit.SweetCanvas{% endblock %}
-
-{% block content %}
-<div class="page doc">
-{% filter markdown %}
-[PlotKit Home](PlotKit.html) | [<<](PlotKit.SVG.html) | [>>](PlotKit.SweetSVG.html)
-
-PlotKit Sweet Canvas Renderer
-=============================
-
-This renderer is an extension of the basic Canvas Renderer to show off
-what you can do to make graphs pretty without learning any graph
-layout code.
-
-There are no extra methods or options to use. The interface is exactly
-the same as ``PlotKit.Canvas``'s CanvasRenderer.
-
-SweetCanvasRenderer adds a fake shadow around bars, lines and circles
-along with a 2.0 width white outline and a etched light coloured
-background.
-
-Example
-=======
-
-{% endfilter %}
-</div>
-{% endblock %}
-
+++ /dev/null
-
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" >
-<head>
- <title>PlotKit.SweetSVG | liquidx</title>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link href="http://media.liquidx.net/css/x_general.css" media="screen" rel="Stylesheet" type="text/css" />
- <link href="http://media.liquidx.net/css/x_header.css" media="screen" rel="Stylesheet" type="text/css" />
- <link href="http://media.liquidx.net/css/x_layout.css" media="screen" rel="Stylesheet" type="text/css" />
- <link href="http://media.liquidx.net/css/x_blocks.css" media="screen" rel="Stylesheet" type="text/css" />
- <link rel="icon" href="/favicon.png" type="image/x-png">
- <link rel="shortcut icon" href="/favicon.png" type="image/x-png">
- <!--[if lt IE 7.]>
- <script defer type="text/javascript" src="http://media.liquidx.net/js/pngfix.js"></script>
- <![endif]-->
-
-<link href="doc.css" media="screen" rel="stylesheet" type="text/css" />
-
-</head>
-
-<body>
- <div id="header">
- <div id="logo"><a href="http://www.liquidx.net/"><img src="http://media.liquidx.net/imgx/logo.png" width="256" height="128" alt="liquidx.net" /></a></div>
- <div id="menu-hack">
- <div id="menu-l"><img src="http://media.liquidx.net/imgx/menu_l.png" width="17" height="28" alt="menu cap" /></div><div id="menu-r"><img src="http://media.liquidx.net/imgx/menu_r.png" width="17" height="28" alt="menu cap" /></div>
- <div id="menu-main">
- <ul id="menu" class="code">
- <li class="tab" id="blog"><a href="http://www.liquidx.net/" title="blog/home">blog</a></li>
- <li class="tab" id="code"><a href="http://www.liquidx.net/code/" title="software i have written">software</a></li>
- <li class="tab" id="dev"><a href="http://projects.liquidx.net/" title="source code for my open source projects">dev</a></li>
- <li class="tab" id="photos"><a href="http://al.tse.id.au/gallery/" title="photos and videos">photos</a></li>
- <li class="tab" id="research"><a href="http://al.tse.id.au/research/" title="research profile">research</a></li>
- <li class="tab" id="links"><a href="http://www.liquidx.net/links/" title="my bookmarks">linkblog</a></li>
- <li class="tab" id="stats"><a href="http://stats.liquidx.net/" title="stats for various parts of my website">stats</a></li>
- <li class="tab" id="status"><a href="http://www.liquidx.net/status/" title="weather report for alastair">status</a></li>
- <li class="tab" id="about"><a href="http://al.tse.id.au/" title="about alastair tse">aboutme</a></li>
- </ul>
- </div>
- </div>
- <div id="quickbuttons">
- <span class="quickbutton"><a href="http://www.liquidx.net/albumartwidget/"><img src="http://media.liquidx.net/imgx/quick_widget.png" alt="album art widget" /></a></span>
- <span class="quickbutton"><a href="http://www.liquidx.net/plotkit/"><img src="http://media.liquidx.net/imgx/quick_plotkit.png" alt="plotkit" /></a></span>
- <span class="quickbutton"><a href="http://www.liquidx.net/fruity/"><img src="http://media.liquidx.net/imgx/quick_fruity.png" alt="fruity" /></a></span>
- </div>
-
- </div>
-
- <div id="body">
-<div class="page doc">
-
-<p> <a href="PlotKit.html">PlotKit Home</a> | <a href="PlotKit.SweetCanvas.html"><<</a> | <a href="PlotKit.EasyPlot.html">>></a>
-</p>
-
-<h1> PlotKit Sweet SVG Renderer</h1>
-<p>This renderer is an extension of the basic SVG Renderer to show off
- what you can do to make graphs pretty without learning any graph
- layout code.
-</p>
-<p>There are no extra methods or options to use. The interface is exactly
- the same as <code>PlotKit.SVG</code>'s SVGRenderer.
-</p>
-<p>SweetSVGRenderer adds a fake shadow around bars, lines and circles
- along with a 2.0 width white outline and a etched light coloured
- background.
-</p>
-
-<h1> Example</h1>
-
-
-</div>
-</div>
-
-
-
-
- <div id="footer">
- <div class="block">
- <h3>Syndication Feeds:</h3>
- <p>
- <ul class="tiny">
- <li><a href="http://www.liquidx.net/blog/feed/atom/" class="feed" title="feed for all posts on liquidx.net"><img src="http://media.liquidx.net/imgx/feed.gif" class="feed" alt="feed" />Atom Feed for the Blog Entries</a></li>
- <li><a href="http://www.liquidx.net/blog/feed/rss/" class="feed" title="feed for all posts on liquidx.net"><img src="http://media.liquidx.net/imgx/feed.gif" class="feed" alt="feed" />RSS Feed for the Blog Entries</a></li>
- <li><a href="http://www.liquidx.net/comments/feed/atom/" class="feed" title="feed for all posts on liquidx.net"><img src="http://media.liquidx.net/imgx/feed.gif" class="feed" alt="feed" />Feed for All Comments</a></li>
- <li><a href="http://www.liquidx.net/links/feed/atom/" class="feed" title="feed for all bookmarked links"><img src="http://media.liquidx.net/imgx/feed.gif" class="feed" alt="feed" />Feed for Links</a></li>
- </ul>
- </p>
- </div>
- <div class="block">
- <h3>About this site:</h3>
- <p>Content on this site is licensed under <a href="http://creativecommons.org/licenses/by/2.5/">CC By Attribution</a> unless otherwise specified.
- Copyright (c) 2002-2006, <a href="http://al.tse.id.au/">Alastair Tse</a>.</p>
- <p>For more information, see <a href="http://al.tse.id.au/">al.tse.id.au</a>.</p>
- <p><script type="text/javascript" src="http://technorati.com/embed/itwctkzez.js"></script></p>
- </div>
- <div class="block">
- <h3>Is Made Possible By:</h3>
- <p>
- <dl>
- <dt><a href="http://ecto.kung-foo.tv/" class="clean">ecto</a>. </dt>
- <dd>Blogging client for Mac</dd>
- <dt><a href="http://djangoproject.com/" class="clean">Django</a>. </dt>
- <dd>Python Web Framework</dd>
- <dt><a href="http://www.lighttpd.net/" class="clean">lighttpd</a>. </dt>
- <dd>Really Fast Web Server</dd>
- <dt><a href="http://www.saddi.com/software/flup/" class="clean">flup</a>. </dt>
- <dd>FastCGI for Python</dd>
- </dl>
- </p>
- </div>
- <div class="block">
- <h3>Search My Sites:</h3>
- <p>
- <div style='margin: 10px; text-align: center; width: 160px;'><form action='http://www.rollyo.com/search.html' ><fieldset style='margin: 0; padding: 4px 0 0 0; height: 60px; border: none; background: url(http://rollyo.com/remote/togo-bg4.png) no-repeat top left;'><div style="position: absolute; float:left; z-index:99; width: 46px; height: 50px;"><a href="http://rollyo.com"><img style="border: none;" height="50" width="46" src="http://rollyo.com/remote/x.gif"></a></div> <input type='text' size='30' style='float: left; width: 90px; margin: 2px 0 0 48px; padding: 0; font-size: 12px;' name='q' value='Search...' onclick='this.value="";' /><br /> <select name='sid' style='float: left; width: 78px; height: 15px; margin: 12px 0 0 46px; font-size: 7pt; padding: 0;'><option value='106081' selected='selected'>liquidx</option><option value='web'>Search The Web</option></select><input type='image' src='http://rollyo.com/remote/btn-togo.png' alt='Go' style='margin: 12px 0 0 3px; float: left;' /><input type='hidden' name='togo-v' value='1' /></fieldset></form></div>
- </p>
- </div>
-
-
- <div class="clear"> </div>
-
- </div>
-
-
-
- <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
- <script type="text/javascript">
- _uacct = "UA-58117-1";
- urchinTracker();
- </script>
-
-</body>
-</html>
+++ /dev/null
-{% extends "basex.html" %}
-{% load markup %}
-{% block pageid %}code{% endblock %}
-{% block headers %}
-<link href="doc.css" media="screen" rel="stylesheet" type="text/css" />
-{% endblock %}
-{% block title %}PlotKit.SweetSVG{% endblock %}
-
-{% block content %}
-<div class="page doc">
-{% filter markdown %}
-[PlotKit Home](PlotKit.html) | [<<](PlotKit.SweetCanvas.html) | [>>](PlotKit.EasyPlot.html)
-
-PlotKit Sweet SVG Renderer
-=============================
-
-This renderer is an extension of the basic SVG Renderer to show off
-what you can do to make graphs pretty without learning any graph
-layout code.
-
-There are no extra methods or options to use. The interface is exactly
-the same as ``PlotKit.SVG``'s SVGRenderer.
-
-SweetSVGRenderer adds a fake shadow around bars, lines and circles
-along with a 2.0 width white outline and a etched light coloured
-background.
-
-Example
-=======
-
-{% endfilter %}
-</div>
-{% endblock %}
-
+++ /dev/null
-
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" >
-<head>
- <title>PlotKit Documentation | liquidx</title>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link href="http://media.liquidx.net/css/x_general.css" media="screen" rel="Stylesheet" type="text/css" />
- <link href="http://media.liquidx.net/css/x_header.css" media="screen" rel="Stylesheet" type="text/css" />
- <link href="http://media.liquidx.net/css/x_layout.css" media="screen" rel="Stylesheet" type="text/css" />
- <link href="http://media.liquidx.net/css/x_blocks.css" media="screen" rel="Stylesheet" type="text/css" />
- <link rel="icon" href="/favicon.png" type="image/x-png">
- <link rel="shortcut icon" href="/favicon.png" type="image/x-png">
- <!--[if lt IE 7.]>
- <script defer type="text/javascript" src="http://media.liquidx.net/js/pngfix.js"></script>
- <![endif]-->
-
-<link href="doc.css" media="screen" rel="stylesheet" type="text/css" />
-
-</head>
-
-<body>
- <div id="header">
- <div id="logo"><a href="http://www.liquidx.net/"><img src="http://media.liquidx.net/imgx/logo.png" width="256" height="128" alt="liquidx.net" /></a></div>
- <div id="menu-hack">
- <div id="menu-l"><img src="http://media.liquidx.net/imgx/menu_l.png" width="17" height="28" alt="menu cap" /></div><div id="menu-r"><img src="http://media.liquidx.net/imgx/menu_r.png" width="17" height="28" alt="menu cap" /></div>
- <div id="menu-main">
- <ul id="menu" class="code">
- <li class="tab" id="blog"><a href="http://www.liquidx.net/" title="blog/home">blog</a></li>
- <li class="tab" id="code"><a href="http://www.liquidx.net/code/" title="software i have written">software</a></li>
- <li class="tab" id="dev"><a href="http://projects.liquidx.net/" title="source code for my open source projects">dev</a></li>
- <li class="tab" id="photos"><a href="http://al.tse.id.au/gallery/" title="photos and videos">photos</a></li>
- <li class="tab" id="research"><a href="http://al.tse.id.au/research/" title="research profile">research</a></li>
- <li class="tab" id="links"><a href="http://www.liquidx.net/links/" title="my bookmarks">linkblog</a></li>
- <li class="tab" id="stats"><a href="http://stats.liquidx.net/" title="stats for various parts of my website">stats</a></li>
- <li class="tab" id="status"><a href="http://www.liquidx.net/status/" title="weather report for alastair">status</a></li>
- <li class="tab" id="about"><a href="http://al.tse.id.au/" title="about alastair tse">aboutme</a></li>
- </ul>
- </div>
- </div>
- <div id="quickbuttons">
- <span class="quickbutton"><a href="http://www.liquidx.net/albumartwidget/"><img src="http://media.liquidx.net/imgx/quick_widget.png" alt="album art widget" /></a></span>
- <span class="quickbutton"><a href="http://www.liquidx.net/plotkit/"><img src="http://media.liquidx.net/imgx/quick_plotkit.png" alt="plotkit" /></a></span>
- <span class="quickbutton"><a href="http://www.liquidx.net/fruity/"><img src="http://media.liquidx.net/imgx/quick_fruity.png" alt="fruity" /></a></span>
- </div>
-
- </div>
-
- <div id="body">
-<div class="page doc">
-
-
-<h1> PlotKit</h1>
-<p> <a href="http://www.liquidx.net/plotkit/">PlotKit</a> is a Javascript graph plotting library. It is aimed at web
- applications that require plotting series of data in modern web
- browsers.
-</p>
-<p>PlotKit requires <a href="http://mochikit.com/">MochiKit</a>. (1.3 or higher)
-</p>
-<p>PlotKit supports both HTML Canvas and SVG, along with an
- <a href="http://me.eae.net/archive/2005/12/29/canvas-in-ie/">emulated canvas for Internet Explorer</a>.
-</p>
-<p>PlotKit is easily extensible to include other rendering engines,
- styles and layouts. Please pursue the documentation for more
- information.
-</p>
-<p>PlotKit is licensed under the BSD License, so you can include it in
- your free or commercial applications without worrying.
-</p>
-
-<h1> PlotKit Components</h1>
-
-<h2> Base Classes</h2>
-<ul>
- <li>
- <a href="PlotKit.Base.html">Base</a> : Common functionality that is used in other classes,
- including default styles.
- </li>
-
- <li>
- <a href="PlotKit.Layout.html">Layout</a> : The default chart layout engine, supports bar, line and
- pie charts.
- </li>
-
- <li>
- <a href="PlotKit.Renderer.html">Renderer</a>: Customising the look of the output
- </li>
-</ul>
-
-<h2> Renderer Specific Implementations</h2>
-<ul>
- <li>
- <a href="PlotKit.Canvas.html">CanvasRenderer</a>: Basic renderer using an HTML Canvas.
- </li>
-
- <li>
- <a href="PlotKit.SVG.html">SVGRenderer</a>: Basic renderer using SVG.
- </li>
-
- <li>
- <a href="PlotKit.SweetCanvas.html">SweetCanvasRenderer</a>: Customised Renderer that builds on CanvasRenderer to provide nicer looking charts.
- </li>
-
- <li>
- <a href="PlotKit.SweetSVG.html">SweetSVGRenderer</a>: Customised renderer that builds on SVGRenderer to provide nicer looking charts.
- </li>
-</ul>
-
-<h2> Utility Classes</h2>
-<ul>
- <li>
- <a href="PlotKit.EasyPlot.html">EasyPlot</a>: Simple Wrapper around classes to provide one-line plotting.
- </li>
-</ul>
-
-<h1> Getting Started</h1>
-<ul>
- <li>
- <a href="PlotKit.QuickStart.html">PlotKit Quick Start</a> - A thorough quick start to getting charts working for Safari, Mozilla, Firefox, Opera and IE.
- </li>
-
- <li>
- <a href="SVGCanvasCompat.html">SVG/Canvas Browser Support Status</a> - Quirks about browser support that you should know about.
- </li>
-
- <li>
- <a href="http://media.liquidx.net/js/plotkit-tests/quickstart.html">Simple Canvas Demo</a> - Very basic Canvas demo all contained in an HTML file.
- </li>
-
- <li>
- <a href="http://media.liquidx.net/js/plotkit-tests/quickstart-svg.html">Simple SVG Demo</a> - Very basic SVG demo all contained in an HTML file.
- </li>
-</ul>
-
-<h1> More Demos</h1>
-<ul>
- <li>
- Unit Tests <a href="http://media.liquidx.net/js/plotkit-tests/basic.html">Canvas</a>, <a href="http://media.liquidx.net/js/plotkit-tests/svg.html">SVG</a>, <a href="http://media.liquidx.net/js/plotkit-tests/sweet.html">SweetCanvas</a>, <a href="http://media.liquidx.net/js/plotkit-tests/sweet-svg.html">SweetSVG</a>.
- </li>
-
- <li>
- <a href="http://media.liquidx.net/js/plotkit-tests/dynamic.html">Dynamic Charting</a>.
- </li>
-
- <li>
- <a href="http://media.liquidx.net/js/plotkit-tests/labels.html">Labels Example</a>. Thanks to Christopher Armstrong.
- </li>
-
- <li>
- <a href="http://media.liquidx.net/js/plotkit-tests/labels-img.html">Labels with Images</a>.
- </li>
-
- <li>
- <a href="http://media.liquidx.net/js/plotkit-tests/axis.html">Axis Restrictions</a>.
- </li>
-</ul>
-
-<h1> Version History</h1>
-
-<h3>PlotKit 0.8</h3>
-<ul>
- <li>
- Total rewrite from <a href="http://www.liquidx.net/canvasgraphjs/">CanvasGraph 0.7</a>
- </li>
-</ul>
-
-<h3>PlotKit 0.9</h3>
-<ul>
- <li>
- Fixed some redraw issues with clear()
- </li>
-
- <li>
- Replaced IECanvas.HTC with ExplorerCanvas
- </li>
-
- <li>
- Added auto import and packed versions just like MochiKit.
- </li>
-
- <li>
- Added horizontal bar chart rendering mode.
- </li>
-
- <li>
- Added awareness of prototype.js and workaround Array/Object mutilation issues with MochiKit.
- </li>
-
- <li>
- Added EasyPlot for single line plotting with Ajax support.
- </li>
-
- <li>
- More tests, <a href="http://media.liquidx.net/js/plotkit-tests/dynamic.html">dynamic charting</a> and quickstart demos.
- </li>
-</ul>
-
-<h3>PlotKit 0.9.1</h3>
-<ul>
- <li>
- Make Sweet{Canvas/SVG}Renderers respect shouldFill.
- </li>
-
- <li>
- Fixed ignoring of maximum x and y values when setting xAxis/yAxis.
- </li>
-
- <li>
- Fixed typo for calculating yrange in Layout.js (thanks to
- HubrisSonic).
- </li>
-
- <li>
- Changed SweetCanvasRenderer to use axisLineColor for drawing lines over
- background (thanks to HubrisSonic).
- </li>
-
- <li>
- Fixed bug in y-axis tick drawing (thanks to Cliff).
- </li>
-
- <li>
- Fixed x-axis calculation bug when xAxisIsZero is false (thanks to
- Loic Jeannin)
- </li>
-
- <li>
- Fixed xTicks drawing that exceed the bounds of the chart (thanks to
- Cliff)
- </li>
-
- <li>
- Fixed barchart drawing with only 2 values (thanks to HubrisSonic)
- </li>
-
- <li>
- Hide pie chart labels of 0% (thanks to Attiks)
- </li>
-
- <li>
- Added optional field to addDatasetFromTable to include x-axis labels.
- </li>
-
- <li>
- Updated excanvas.js version to fix possible printing issues.
- </li>
-</ul>
-
-<h1> Road Map</h1>
-
-<h3>Version 0.9</h3>
-<ul>
- <li>
- AutoSelectRenderer, automatically choose Canvas or SVG by auto detecting browser support.
- </li>
-</ul>
-
-<h3>Version 0.10</h3>
-<ul>
- <li>
- Point plots
- </li>
-
- <li>
- Defined Event System Support
- </li>
-
- <li>
- Animation support.
- </li>
-</ul>
-
-
-</div>
-</div>
-
-
-
-
- <div id="footer">
- <div class="block">
- <h3>Syndication Feeds:</h3>
- <p>
- <ul class="tiny">
- <li><a href="http://www.liquidx.net/blog/feed/atom/" class="feed" title="feed for all posts on liquidx.net"><img src="http://media.liquidx.net/imgx/feed.gif" class="feed" alt="feed" />Atom Feed for the Blog Entries</a></li>
- <li><a href="http://www.liquidx.net/blog/feed/rss/" class="feed" title="feed for all posts on liquidx.net"><img src="http://media.liquidx.net/imgx/feed.gif" class="feed" alt="feed" />RSS Feed for the Blog Entries</a></li>
- <li><a href="http://www.liquidx.net/comments/feed/atom/" class="feed" title="feed for all posts on liquidx.net"><img src="http://media.liquidx.net/imgx/feed.gif" class="feed" alt="feed" />Feed for All Comments</a></li>
- <li><a href="http://www.liquidx.net/links/feed/atom/" class="feed" title="feed for all bookmarked links"><img src="http://media.liquidx.net/imgx/feed.gif" class="feed" alt="feed" />Feed for Links</a></li>
- </ul>
- </p>
- </div>
- <div class="block">
- <h3>About this site:</h3>
- <p>Content on this site is licensed under <a href="http://creativecommons.org/licenses/by/2.5/">CC By Attribution</a> unless otherwise specified.
- Copyright (c) 2002-2006, <a href="http://al.tse.id.au/">Alastair Tse</a>.</p>
- <p>For more information, see <a href="http://al.tse.id.au/">al.tse.id.au</a>.</p>
- <p><script type="text/javascript" src="http://technorati.com/embed/itwctkzez.js"></script></p>
- </div>
- <div class="block">
- <h3>Is Made Possible By:</h3>
- <p>
- <dl>
- <dt><a href="http://ecto.kung-foo.tv/" class="clean">ecto</a>. </dt>
- <dd>Blogging client for Mac</dd>
- <dt><a href="http://djangoproject.com/" class="clean">Django</a>. </dt>
- <dd>Python Web Framework</dd>
- <dt><a href="http://www.lighttpd.net/" class="clean">lighttpd</a>. </dt>
- <dd>Really Fast Web Server</dd>
- <dt><a href="http://www.saddi.com/software/flup/" class="clean">flup</a>. </dt>
- <dd>FastCGI for Python</dd>
- </dl>
- </p>
- </div>
- <div class="block">
- <h3>Search My Sites:</h3>
- <p>
- <div style='margin: 10px; text-align: center; width: 160px;'><form action='http://www.rollyo.com/search.html' ><fieldset style='margin: 0; padding: 4px 0 0 0; height: 60px; border: none; background: url(http://rollyo.com/remote/togo-bg4.png) no-repeat top left;'><div style="position: absolute; float:left; z-index:99; width: 46px; height: 50px;"><a href="http://rollyo.com"><img style="border: none;" height="50" width="46" src="http://rollyo.com/remote/x.gif"></a></div> <input type='text' size='30' style='float: left; width: 90px; margin: 2px 0 0 48px; padding: 0; font-size: 12px;' name='q' value='Search...' onclick='this.value="";' /><br /> <select name='sid' style='float: left; width: 78px; height: 15px; margin: 12px 0 0 46px; font-size: 7pt; padding: 0;'><option value='106081' selected='selected'>liquidx</option><option value='web'>Search The Web</option></select><input type='image' src='http://rollyo.com/remote/btn-togo.png' alt='Go' style='margin: 12px 0 0 3px; float: left;' /><input type='hidden' name='togo-v' value='1' /></fieldset></form></div>
- </p>
- </div>
-
-
- <div class="clear"> </div>
-
- </div>
-
-
-
- <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
- <script type="text/javascript">
- _uacct = "UA-58117-1";
- urchinTracker();
- </script>
-
-</body>
-</html>
+++ /dev/null
-{% extends "basex.html" %}
-{% load markup %}
-{% block pageid %}code{% endblock %}
-{% block title %}PlotKit Documentation{% endblock %}
-{% block headers %}
-<link href="doc.css" media="screen" rel="stylesheet" type="text/css" />
-{% endblock %}
-
-
-{% block content %}
-<div class="page doc">
-{% filter markdown %}
-PlotKit
-=======
-
-[PlotKit][] is a Javascript graph plotting library. It is aimed at web
-applications that require plotting series of data in modern web
-browsers.
-
-PlotKit requires [MochiKit][]. (1.3 or higher)
-
-PlotKit supports both HTML Canvas and SVG, along with an
-[emulated canvas for Internet Explorer][IECanvas].
-
-PlotKit is easily extensible to include other rendering engines,
-styles and layouts. Please pursue the documentation for more
-information.
-
-PlotKit is licensed under the BSD License, so you can include it in
-your free or commercial applications without worrying.
-
-PlotKit Components
-==================
-
-Base Classes
-------------
-
-* [Base][] : Common functionality that is used in other classes,
- including default styles.
-* [Layout][] : The default chart layout engine, supports bar, line and
- pie charts.
-* [Renderer][]: Customising the look of the output
-
-Renderer Specific Implementations
----------------------------------
-
-* [CanvasRenderer][]: Basic renderer using an HTML Canvas.
-* [SVGRenderer][]: Basic renderer using SVG.
-* [SweetCanvasRenderer][]: Customised Renderer that builds on CanvasRenderer to provide nicer looking charts.
-* [SweetSVGRenderer][]: Customised renderer that builds on SVGRenderer to provide nicer looking charts.
-
-Utility Classes
----------------
-
-* [EasyPlot][]: Simple Wrapper around classes to provide one-line plotting.
-
-Getting Started
-===============
-
-* [PlotKit Quick Start][QuickStart] - A thorough quick start to getting charts working for Safari, Mozilla, Firefox, Opera and IE.
-* [SVG/Canvas Browser Support Status][Browser] - Quirks about browser support that you should know about.
-* [Simple Canvas Demo][QuickstartCanvasDemo] - Very basic Canvas demo all contained in an HTML file.
-* [Simple SVG Demo][QuickstartSVGDemo] - Very basic SVG demo all contained in an HTML file.
-
-More Demos
-==========
-
-* Unit Tests [Canvas][CanvasTest], [SVG][SVGTest], [SweetCanvas][SCanvasTest], [SweetSVG][SSVGTest].
-* [Dynamic Charting][DynamicTest].
-* [Labels Example][]. Thanks to Christopher Armstrong.
-* [Labels with Images][].
-* [Axis Restrictions][].
-
-Version History
-===============
-
-
-###PlotKit 0.8
-
-* Total rewrite from [CanvasGraph 0.7][CanvasGraph]
-
-###PlotKit 0.9
-
-* Fixed some redraw issues with clear()
-* Replaced IECanvas.HTC with ExplorerCanvas
-* Added auto import and packed versions just like MochiKit.
-* Added horizontal bar chart rendering mode.
-* Added awareness of prototype.js and workaround Array/Object mutilation issues with MochiKit.
-* Added EasyPlot for single line plotting with Ajax support.
-* More tests, [dynamic charting][DynamicTest] and quickstart demos.
-
-###PlotKit 0.9.1
-
-* Make Sweet{Canvas/SVG}Renderers respect shouldFill.
-* Fixed ignoring of maximum x and y values when setting xAxis/yAxis.
-* Fixed typo for calculating yrange in Layout.js (thanks to
- HubrisSonic).
-* Changed SweetCanvasRenderer to use axisLineColor for drawing lines over
- background (thanks to HubrisSonic).
-* Fixed bug in y-axis tick drawing (thanks to Cliff).
-* Fixed x-axis calculation bug when xAxisIsZero is false (thanks to
- Loic Jeannin)
-* Fixed xTicks drawing that exceed the bounds of the chart (thanks to
- Cliff)
-* Fixed barchart drawing with only 2 values (thanks to HubrisSonic)
-* Hide pie chart labels of 0% (thanks to Attiks)
-* Added optional field to addDatasetFromTable to include x-axis labels.
-* Updated excanvas.js version to fix possible printing issues.
-
-Road Map
-========
-###Version 0.9
-
-* AutoSelectRenderer, automatically choose Canvas or SVG by auto detecting browser support.
-
-###Version 0.10
-
-* Point plots
-* Defined Event System Support
-* Animation support.
-
-[QuickStart]: PlotKit.QuickStart.html
-[CanvasGraph]: http://www.liquidx.net/canvasgraphjs/
-[PlotKit]: http://www.liquidx.net/plotkit/
-[MochiKit]: http://mochikit.com/
-[IECanvas]: http://me.eae.net/archive/2005/12/29/canvas-in-ie/
-[Base]: PlotKit.Base.html
-[Styles]: PlotKit.Styles.html
-[Layout]: PlotKit.Layout.html
-[Renderer]: PlotKit.Renderer.html
-[CanvasRenderer]: PlotKit.Canvas.html
-[SVGRenderer]: PlotKit.SVG.html
-[SweetCanvasRenderer]: PlotKit.SweetCanvas.html
-[SweetSVGRenderer]: PlotKit.SweetSVG.html
-[EasyPlot]: PlotKit.EasyPlot.html
-[Browser]: SVGCanvasCompat.html
-[CanvasTest]: http://media.liquidx.net/js/plotkit-tests/basic.html
-[SVGTest]: http://media.liquidx.net/js/plotkit-tests/svg.html
-[SCanvasTest]: http://media.liquidx.net/js/plotkit-tests/sweet.html
-[SSVGTest]: http://media.liquidx.net/js/plotkit-tests/sweet-svg.html
-[QuickstartCanvasDemo]: http://media.liquidx.net/js/plotkit-tests/quickstart.html
-[QuickstartSVGDemo]: http://media.liquidx.net/js/plotkit-tests/quickstart-svg.html
-[QuickstartEasyDemo]: http://media.liquidx.net/js/plotkit-tests/quickstart-easy.html
-[DynamicTest]: http://media.liquidx.net/js/plotkit-tests/dynamic.html
-[Labels Example]: http://media.liquidx.net/js/plotkit-tests/labels.html
-[Labels with Images]: http://media.liquidx.net/js/plotkit-tests/labels-img.html
-[Axis Restrictions]: http://media.liquidx.net/js/plotkit-tests/axis.html
-
-{% endfilter %}
-</div>
-{% endblock %}
+++ /dev/null
-
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" >
-<head>
- <title>SVG and Canvas Support Status in Various Browsers. | liquidx</title>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link href="http://media.liquidx.net/css/x_general.css" media="screen" rel="Stylesheet" type="text/css" />
- <link href="http://media.liquidx.net/css/x_header.css" media="screen" rel="Stylesheet" type="text/css" />
- <link href="http://media.liquidx.net/css/x_layout.css" media="screen" rel="Stylesheet" type="text/css" />
- <link href="http://media.liquidx.net/css/x_blocks.css" media="screen" rel="Stylesheet" type="text/css" />
- <link rel="icon" href="/favicon.png" type="image/x-png">
- <link rel="shortcut icon" href="/favicon.png" type="image/x-png">
- <!--[if lt IE 7.]>
- <script defer type="text/javascript" src="http://media.liquidx.net/js/pngfix.js"></script>
- <![endif]-->
-
-<link href="doc.css" media="screen" rel="stylesheet" type="text/css" />
-
-</head>
-
-<body>
- <div id="header">
- <div id="logo"><a href="http://www.liquidx.net/"><img src="http://media.liquidx.net/imgx/logo.png" width="256" height="128" alt="liquidx.net" /></a></div>
- <div id="menu-hack">
- <div id="menu-l"><img src="http://media.liquidx.net/imgx/menu_l.png" width="17" height="28" alt="menu cap" /></div><div id="menu-r"><img src="http://media.liquidx.net/imgx/menu_r.png" width="17" height="28" alt="menu cap" /></div>
- <div id="menu-main">
- <ul id="menu" class="code">
- <li class="tab" id="blog"><a href="http://www.liquidx.net/" title="blog/home">blog</a></li>
- <li class="tab" id="code"><a href="http://www.liquidx.net/code/" title="software i have written">software</a></li>
- <li class="tab" id="dev"><a href="http://projects.liquidx.net/" title="source code for my open source projects">dev</a></li>
- <li class="tab" id="photos"><a href="http://al.tse.id.au/gallery/" title="photos and videos">photos</a></li>
- <li class="tab" id="research"><a href="http://al.tse.id.au/research/" title="research profile">research</a></li>
- <li class="tab" id="links"><a href="http://www.liquidx.net/links/" title="my bookmarks">linkblog</a></li>
- <li class="tab" id="stats"><a href="http://stats.liquidx.net/" title="stats for various parts of my website">stats</a></li>
- <li class="tab" id="status"><a href="http://www.liquidx.net/status/" title="weather report for alastair">status</a></li>
- <li class="tab" id="about"><a href="http://al.tse.id.au/" title="about alastair tse">aboutme</a></li>
- </ul>
- </div>
- </div>
- <div id="quickbuttons">
- <span class="quickbutton"><a href="http://www.liquidx.net/albumartwidget/"><img src="http://media.liquidx.net/imgx/quick_widget.png" alt="album art widget" /></a></span>
- <span class="quickbutton"><a href="http://www.liquidx.net/plotkit/"><img src="http://media.liquidx.net/imgx/quick_plotkit.png" alt="plotkit" /></a></span>
- <span class="quickbutton"><a href="http://www.liquidx.net/fruity/"><img src="http://media.liquidx.net/imgx/quick_fruity.png" alt="fruity" /></a></span>
- </div>
-
- </div>
-
- <div id="body">
-<div class="page doc">
-
-
-<h1> State of SVG and Canvas in Modern Browsers</h1>
-<p> <strong>By: Alastair Tse - Last Updated: 27 April 2006</strong>
-</p>
-<p>My friends, just like HTML and CSS, different browsers support
- different subsections of the SVG and Canvas specification. As part of
- my work on PlotKit, the next generation javascript plotting library,
- I've decided to summarise all the quirks in SVG and Canvas support.
-</p>
-
-<h1> Browsers Considered</h1>
-<p>I am looking at browsers that are considered "modern" as of
- March 2006. These include:
-</p>
-<ul>
- <li>
- <a href="http://apple.com/safari/">Safari 2.0.x</a> (W/ <a href="http://www.adobe.com/svg/">Adobe SVG Plugin</a>)
- </li>
-
- <li>
- <a href="http://www.mozilla.com/firefox/">Firefox 1.5.x</a>
- </li>
-
- <li>
- <a href="http://snapshot.opera.com/">Opera 9.0 Preview 2</a>
- </li>
-
- <li>
- <a href="http://www.microsoft.com/windows/ie/">Internet Explorer 6</a> (w/ <a href="http://www.adobe.com/svg/">Adobe SVG Plugin</a>)
- </li>
-</ul>
-<p>I am also looking at some experiemental browsers as of March 2006.
-</p>
-<ul>
- <li>
- <a href="http://www.microsoft.com/windows/IE/ie7/default.mspx">Internet Explorer 7 beta 2 preview + ASV</a>
- </li>
-
- <li>
- <a href="http://nightly.webkit.org/">Safari WebKit+SVG Nightly 2006-03-11</a>
- </li>
-
- <li>
- <a href="http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/">Firefox Deerpark Nightly 2006-03-11</a>
- </li>
-</ul>
-
-<h1> Canvas</h1>
-<ul>
- <li>
- Canvas is defined by the WHATWG in what is known as the
- <a href="http://whatwg.org/specs/web-apps/current-work/">Web Applications 1.0 specification</a>
- </li>
-</ul>
-
-<h2> Supporting Browsers</h2>
-<ul>
- <li>
- Safari 2.0 and above.
- </li>
-
- <li>
- Opera 9.0 and above.
- </li>
-
- <li>
- Firefox 1.5 and above.
- </li>
-</ul>
-
-<h2> Quirks</h2>
-<ul>
- <li><p> <strong>Safari</strong> will forget a path after <code>fill()</code> or <code>stroke()</code> has
- been called. Therefore, if you need to fill and stroke the same
- path, you must draw the path out twice.
-</p>
-
- </li>
-
- <li><p> <strong>Opera</strong> will not obey <code>stroke()</code> for arc paths.
-</p>
-
- </li>
-
- <li><p> <strong>Firefox</strong> and <strong>Opera</strong> will not draw shadows even with
- <code>shadowStyle</code> or <code>shadowOffset</code> is set on the context object.
-</p>
-
- </li>
-</ul>
-
-<h1> SVG</h1>
-<ul>
- <li>
- SVG support is either provided natively, or through the Adobe SVG
- Viewer (ASV).
- </li>
-</ul>
-
-<h2> Supporting Browsers (Inline)</h2>
-<ul>
- <li>
- Safari 2.0 + ASV
- </li>
-
- <li>
- Internet Explorer 6 + ASV
- </li>
-
- <li>
- Safari Webkit+SVG Nightly
- </li>
-
- <li>
- Opera 9.0 and above
- </li>
-
- <li>
- Mozilla Firefox 1.5 and above
- </li>
-</ul>
-
-<h2> Quirks (Inline)</h2>
-<ul>
- <li><p> <strong>Safari Nightly</strong> will not render any <code>text</code> elements when
- inlined. (Will do so if using <code>embed</code>)
-</p>
-
- </li>
-
- <li><p> <strong>Safari 2.0 + ASV</strong> will not respect inlined SVG.
-</p>
-
- </li>
-
- <li><p> <strong>Internet Explorer 6 + ASV</strong> will only parse inlined SVG if the
- following is added to the HTML and all SVG elements are in the
- correct namespace <code>svg:</code>.
-</p>
-
- </li>
-</ul>
-<p> following is added to the HTML and all SVG elements are in the
- correct namespace <code>svg:</code>.
-</p>
-<pre><code><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
-xmlns:svg="http://www.w3.org/2000/svg"
-xmlns:xlink="http://www.w3.org/1999/xlink">
-...
-<body>
-<!-- START Required for IE to support inlined SVG -->
-<object id="AdobeSVG"
-classid="clsid:78156a80-c6a1-4bbf-8e6a-3cd390eeb4e2" width="1"
-height="1"></object>
-<?import namespace="svg" implementation="#AdobeSVG"?>
-<!-- END Required for IE to support inlined SVG -->
-<svg:svg width="300" height="300" baseProfile="full" version="1.1"></svg:svg>
-</body>
-</html>
-</code></pre><ul>
- <li><p> <strong>Mozilla Firefox (1.5 and nightly) on Mac</strong> will not render
- <code>text</code> elements when inlined. Note that it does for Linux and Windows.
-</p>
-
- </li>
-
- <li><p> <strong>Opera 9</strong> will refuse to draw an element if attribute <code>filter</code>
- is defined.
-</p>
-
- </li>
-</ul>
-<p> is defined.
-</p>
-<ul>
- <li>
- <strong>Internet Explorer 7b2p + ASV</strong> will not work with the Adobe SVG Viewer.
- </li>
-</ul>
-
-<h1> Disclaimer</h1>
-<p>The above is presented as-is with my own findings. There may be
- errors. Please do not use this to base your multi-million dollar
- business decisions.
-</p>
-
-<h1> Contact</h1>
-<p>If you have anything to add or modify, please contact me at
- <a href="mailto:alastair@liquidx.net">alastair@liquidx.net</a>.
-</p>
-
-
-</div>
-</div>
-
-
-
-
- <div id="footer">
- <div class="block">
- <h3>Syndication Feeds:</h3>
- <p>
- <ul class="tiny">
- <li><a href="http://www.liquidx.net/blog/feed/atom/" class="feed" title="feed for all posts on liquidx.net"><img src="http://media.liquidx.net/imgx/feed.gif" class="feed" alt="feed" />Atom Feed for the Blog Entries</a></li>
- <li><a href="http://www.liquidx.net/blog/feed/rss/" class="feed" title="feed for all posts on liquidx.net"><img src="http://media.liquidx.net/imgx/feed.gif" class="feed" alt="feed" />RSS Feed for the Blog Entries</a></li>
- <li><a href="http://www.liquidx.net/comments/feed/atom/" class="feed" title="feed for all posts on liquidx.net"><img src="http://media.liquidx.net/imgx/feed.gif" class="feed" alt="feed" />Feed for All Comments</a></li>
- <li><a href="http://www.liquidx.net/links/feed/atom/" class="feed" title="feed for all bookmarked links"><img src="http://media.liquidx.net/imgx/feed.gif" class="feed" alt="feed" />Feed for Links</a></li>
- </ul>
- </p>
- </div>
- <div class="block">
- <h3>About this site:</h3>
- <p>Content on this site is licensed under <a href="http://creativecommons.org/licenses/by/2.5/">CC By Attribution</a> unless otherwise specified.
- Copyright (c) 2002-2006, <a href="http://al.tse.id.au/">Alastair Tse</a>.</p>
- <p>For more information, see <a href="http://al.tse.id.au/">al.tse.id.au</a>.</p>
- <p><script type="text/javascript" src="http://technorati.com/embed/itwctkzez.js"></script></p>
- </div>
- <div class="block">
- <h3>Is Made Possible By:</h3>
- <p>
- <dl>
- <dt><a href="http://ecto.kung-foo.tv/" class="clean">ecto</a>. </dt>
- <dd>Blogging client for Mac</dd>
- <dt><a href="http://djangoproject.com/" class="clean">Django</a>. </dt>
- <dd>Python Web Framework</dd>
- <dt><a href="http://www.lighttpd.net/" class="clean">lighttpd</a>. </dt>
- <dd>Really Fast Web Server</dd>
- <dt><a href="http://www.saddi.com/software/flup/" class="clean">flup</a>. </dt>
- <dd>FastCGI for Python</dd>
- </dl>
- </p>
- </div>
- <div class="block">
- <h3>Search My Sites:</h3>
- <p>
- <div style='margin: 10px; text-align: center; width: 160px;'><form action='http://www.rollyo.com/search.html' ><fieldset style='margin: 0; padding: 4px 0 0 0; height: 60px; border: none; background: url(http://rollyo.com/remote/togo-bg4.png) no-repeat top left;'><div style="position: absolute; float:left; z-index:99; width: 46px; height: 50px;"><a href="http://rollyo.com"><img style="border: none;" height="50" width="46" src="http://rollyo.com/remote/x.gif"></a></div> <input type='text' size='30' style='float: left; width: 90px; margin: 2px 0 0 48px; padding: 0; font-size: 12px;' name='q' value='Search...' onclick='this.value="";' /><br /> <select name='sid' style='float: left; width: 78px; height: 15px; margin: 12px 0 0 46px; font-size: 7pt; padding: 0;'><option value='106081' selected='selected'>liquidx</option><option value='web'>Search The Web</option></select><input type='image' src='http://rollyo.com/remote/btn-togo.png' alt='Go' style='margin: 12px 0 0 3px; float: left;' /><input type='hidden' name='togo-v' value='1' /></fieldset></form></div>
- </p>
- </div>
-
-
- <div class="clear"> </div>
-
- </div>
-
-
-
- <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
- <script type="text/javascript">
- _uacct = "UA-58117-1";
- urchinTracker();
- </script>
-
-</body>
-</html>
+++ /dev/null
-{% extends "basex.html" %}
-{% load markup %}
-{% block pageid %}code{% endblock %}
-{% block title %}SVG and Canvas Support Status in Various Browsers.{% endblock %}
-{% block headers %}
-<link href="doc.css" media="screen" rel="stylesheet" type="text/css" />
-{% endblock %}
-
-
-{% block content %}
-<div class="page doc">
-{% filter markdown %}
-State of SVG and Canvas in Modern Browsers
-==========================================
-
-__By: Alastair Tse - Last Updated: 27 April 2006__
-
-
-My friends, just like HTML and CSS, different browsers support
-different subsections of the SVG and Canvas specification. As part of
-my work on PlotKit, the next generation javascript plotting library,
-I've decided to summarise all the quirks in SVG and Canvas support.
-
-Browsers Considered
-===================
-
-I am looking at browsers that are considered "modern" as of
-March 2006. These include:
-
-* [Safari 2.0.x][Safari] (W/ [Adobe SVG Plugin][ASV])
-* [Firefox 1.5.x][Firefox]
-* [Opera 9.0 Preview 2][OperaSnapshot]
-* [Internet Explorer 6][IE6] (w/ [Adobe SVG Plugin][ASV])
-
-I am also looking at some experiemental browsers as of March 2006.
-
-* [Internet Explorer 7 beta 2 preview + ASV][IE7]
-* [Safari WebKit+SVG Nightly 2006-03-11][WebkitNightly]
-* [Firefox Deerpark Nightly 2006-03-11][FirefoxNightly]
-
-[Safari]: http://apple.com/safari/
-[Firefox]: http://www.mozilla.com/firefox/
-[OperaSnapshot]: http://snapshot.opera.com/
-[IE6]: http://www.microsoft.com/windows/ie/
-[ASV]: http://www.adobe.com/svg/
-[IE7]: http://www.microsoft.com/windows/IE/ie7/default.mspx
-[WebkitNightly]: http://nightly.webkit.org/
-[FirefoxNightly]: http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/
-
-
-Canvas
-======
-
-* Canvas is defined by the WHATWG in what is known as the
- [Web Applications 1.0 specification][WHATWG]
-
-Supporting Browsers
--------------------
-
-* Safari 2.0 and above.
-* Opera 9.0 and above.
-* Firefox 1.5 and above.
-
-Quirks
-------
-
-* __Safari__ will forget a path after ``fill()`` or ``stroke()`` has
- been called. Therefore, if you need to fill and stroke the same
- path, you must draw the path out twice.
-
-* __Opera__ will not obey ``stroke()`` for arc paths.
-
-* __Firefox__ and __Opera__ will not draw shadows even with
- ``shadowStyle`` or ``shadowOffset`` is set on the context object.
-
-SVG
-===
-
-* SVG support is either provided natively, or through the Adobe SVG
- Viewer (ASV).
-
-Supporting Browsers (Inline)
-----------------------------
-
-* Safari 2.0 + ASV
-* Internet Explorer 6 + ASV
-* Safari Webkit+SVG Nightly
-* Opera 9.0 and above
-* Mozilla Firefox 1.5 and above
-
-Quirks (Inline)
----------------
-
-* __Safari Nightly__ will not render any ``text`` elements when
- inlined. (Will do so if using ``embed``)
-
-* __Safari 2.0 + ASV__ will not respect inlined SVG.
-
-* __Internet Explorer 6 + ASV__ will only parse inlined SVG if the
- following is added to the HTML and all SVG elements are in the
- correct namespace ``svg:``.
-
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
- xmlns:svg="http://www.w3.org/2000/svg"
- xmlns:xlink="http://www.w3.org/1999/xlink">
- ...
- <body>
- <!-- START Required for IE to support inlined SVG -->
- <object id="AdobeSVG"
- classid="clsid:78156a80-c6a1-4bbf-8e6a-3cd390eeb4e2" width="1"
- height="1"></object>
- <?import namespace="svg" implementation="#AdobeSVG"?>
- <!-- END Required for IE to support inlined SVG -->
- <svg:svg width="300" height="300" baseProfile="full" version="1.1"></svg:svg>
- </body>
- </html>
-
-* __Mozilla Firefox (1.5 and nightly) on Mac__ will not render
- ``text`` elements when inlined. Note that it does for Linux and Windows.
-
-* __Opera 9__ will refuse to draw an element if attribute ``filter``
- is defined.
-
-* __Internet Explorer 7b2p + ASV__ will not work with the Adobe SVG Viewer.
-
-
-Disclaimer
-==========
-
-The above is presented as-is with my own findings. There may be
-errors. Please do not use this to base your multi-million dollar
-business decisions.
-
-Contact
-=======
-
-If you have anything to add or modify, please contact me at
-<alastair@liquidx.net>.
-
-[WHATWG]: http://whatwg.org/specs/web-apps/current-work/
-
-{% endfilter %}
-</div>
-{% endblock %}
\ No newline at end of file
+++ /dev/null
-.doc h1 {
- color: #335577;
- padding-bottom: 5px;
- border-bottom: 1px solid #ccc;
- display: block;
-}
-
-.doc h2 {
- font-size: medium;
- padding-left: 0;
-}
-
-.doc h3 {
- padding-left: 0;
- font-size: medium;
- color: #666;
-}
-
-.doc ul {
- padding-left: 10px;
- margin-left: 10px;
-}
-
-.api li {
- display: block;
- border: 1px solid #eee;
- background-color: #f9f9f9;
- padding: 2px;
- padding-left: 5px;
- list-style: none;
-}
-
-.doc thead td {
- border-bottom: 1px solid #eee;
-}
-
-.doc thead td, .doc thead th {
- text-align: left;
- font-weight: bold;
-}
-
-.doc tbody th {
- text-align: left;
- font-weight: bold;
-}
-
-.doc th, .doc td {
- vertical-align: top;
- padding: 4px;
- margin: 0;
- font-size: 9px;
-}
-
-.doc pre {
- border: 1px solid #f0f0f0;
- background-color: #f9f9ff;
- padding: 4px;
-}
-
-.doc .demo {
- padding-bottom: 20px;
-}
+++ /dev/null
-#!/usr/bin/python
-
-import sys
-import os
-import re
-sys.path.append('/home/al/sites')
-os.environ['DJANGO_SETTINGS_MODULE'] = '__main__'
-
-DEFAULT_CHARSET = "utf-8"
-TEMPLATE_DEBUG = False
-LANGUAGE_CODE = "en"
-
-INSTALLED_APPS = (
- 'django.contrib.markup',
-)
-
-TEMPLATE_DIRS = (
- '/home/al/sites/liquidx/templates',
- '.'
-)
-
-from django.template import Template, Context, loader
-
-def make(src, dst):
- print '%s -> %s' % (src, dst)
- c = Context({})
- filled = loader.render_to_string(src, {})
- open(dst, 'w').write(filled)
-
-if __name__ == "__main__":
- for dirname, dirs, files in os.walk('.'):
- if re.search('/\.svn', dirname):
- continue
- for f in files:
- if f[-4:] == ".txt":
- newname = f.replace('.txt', '.html')
- make(os.path.join(dirname, f), os.path.join(dirname, newname))
+++ /dev/null
-#!/usr/bin/env python
-#
-# custom_rhino.jar from:
-# http://dojotoolkit.org/svn/dojo/buildscripts/lib/custom_rhino.jar
-#
-
-import os
-import re
-import sys
-import shutil
-import subprocess
-mk = file('PlotKit/PlotKit.js').read()
-if len(sys.argv) > 1:
- outf = sys.stdout
-else:
- outf = file('PlotKit/PlotKit_Packed.js', 'w')
-VERSION = re.search(
- r"""(?mxs)PlotKit.PlotKit.VERSION\s*=\s*['"]([^'"]+)""",
- mk
-).group(1)
-if len(sys.argv) > 1:
- SUBMODULES = sys.argv[1:]
-else:
- SUBMODULES = map(str.strip, re.search(
- r"""(?mxs)PlotKit.PlotKit.SUBMODULES\s*=\s*\[([^\]]+)""",
- mk
- ).group(1).replace(' ', '').replace('"', '').split(','))
-
-alltext = '\n'.join(
- [file('PlotKit/%s.js' % m).read() for m in SUBMODULES])
-
-tf = file('_scratch.js', 'w')
-tf.write(alltext)
-tf.flush()
-
-p = subprocess.Popen(
- ['java', '-jar', 'scripts/custom_rhino.jar', '-c', tf.name],
- stdout=subprocess.PIPE,
-)
-print >>outf, """/***
-
- PlotKit.PlotKit %(VERSION)s : PACKED VERSION
-
- THIS FILE IS AUTOMATICALLY GENERATED. If creating patches, please
- diff against the source tree, not this file.
-
- For more information, <http://www.liquidx.net/plotkit/>.
-
- Copyright (c) 2006. Alastair Tse.
-
-***/
-""" % locals()
-shutil.copyfileobj(p.stdout, outf)
-outf.write('\n')
-outf.flush()
-outf.close()
-tf.close()
-os.remove(tf.name)
+++ /dev/null
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
- <title>PlotKit: Axis Test</title>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link href="/css/page.css" media="screen" rel="Stylesheet"
- type="text/css" />
- <link href="tests.css" media="screen" rel="Stylesheet" type="text/css" />
- <script src="/js/mochi/MochiKit.js" type="text/javascript"></script>
- <script src="/js/plotkit-svn/excanvas.js" type="text/javascript"></script>
- <script src="/js/plotkit-svn/PlotKit_Packed.js" type="text/javascript"></script>
-</head>
-
-
-<body>
- <div id="body">
- <h2>Axis Test</h2>
-
- <div id="example" style="margin: 0 auto 0 auto;" width="400" height="400"></div>
-
- <script type="text/javascript">
- var data = [[0,0], [1,2], [2,3], [3, 7], [4, 8], [5, 6]];
- var options = {"xAxis": [1,4], "yAxis":[1,6]};
- var plotter = EasyPlot("line", options, $("example"),
- [data, "sample.txt"]);
- </script>
- </div>
-
- <div class="footer"><a href="http://www.liquidx.net/plotkit/">PlotKit</a></div>
-</div>
-</body></html>
+++ /dev/null
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
- <title>PlotKit : Basic Unit Tests</title>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link href="/css/page.css" media="screen" rel="Stylesheet"
- type="text/css" />
- <link href="tests.css" media="screen" rel="Stylesheet"
- type="text/css" />
- <script src="/js/mochi/MochiKit.js" type="text/javascript"></script>
- <script src="/js/plotkit-svn/excanvas.js" type="text/javascript"></script>
- <script src="/js/plotkit-svn/PlotKit_Packed.js" type="text/javascript"></script>
- <script src="/js/plotkit-tests/basic.js" type="text/javascript"></script>
-</head>
-
-<body>
- <div id="body">
- <h2>Basic Unit Tests for PlotKit</h2>
-
- <div id="tests">
- </div>
-
- <div class="footer"><a href="http://www.liquidx.net/plotkit/">PlotKit</a></div>
-</div>
-</body></html>
+++ /dev/null
-/* actual tests */
-
-var opts = {
- "IECanvasHTC": "../plotkit/iecanvas.htc",
- "enableEvents": true,
- "strokeColor": null
-};
-
-function alert_val(e) {
- alert("x:" + e.chart.xval + "y:" + e.chart.yval);
-}
-
-function genericTest(num, plotStyle) {
- var l = new PlotKit.Layout(plotStyle, {});
- var success = l.addDatasetFromTable("data" + num, $("test" + num));
- l.evaluate();
- var c = $("test" + num + "canvas");
- var g = new PlotKit.CanvasRenderer(c, l, opts);
- g.render();
-
- // test events
- MochiKit.Signal.connect(g, "onclick", alert_val);
-}
-
-function genericTestAndClear(num, plotStyle) {
- var l = new PlotKit.Layout(plotStyle, {});
- l.addDatasetFromTable("data" + num, $("test" + num));
- l.evaluate();
- var c = $("test" + num + "canvas");
- var g = new PlotKit.CanvasRenderer(c, l, opts);
- g.render();
- g.clear();
-}
-
-function dualDataSet(num, plotStyle) {
- var l = new PlotKit.Layout(plotStyle, {});
- l.addDatasetFromTable("data1." + num, $("test" + num), 0, 1);
- l.addDatasetFromTable("data2." + num, $("test" + num), 0, 2);
- l.evaluate();
- var c = $("test" + num + "canvas");
- var g = new PlotKit.CanvasRenderer(c, l, opts);
- g.render();
-}
-
-
-/* create HTML for tests */
-
-function makeTableRow(list) {
- return TR({}, map(partial(TD, null), list));
-}
-
-function generateTestTable(num, data) {
- var tableid = "test" + num;
- var tablehead = THEAD(null, map(makeTableRow, [["x", "y"]]));
- var tablebody = TBODY(null, map(makeTableRow, data));
-
- var table = TABLE({"class": "data", "id": tableid}, [tablehead, tablebody]);
- return table;
-}
-
-function generateCanvas(num) {
- var canvasid = "test" + num + "canvas";
- var canvas = CANVAS({"id":canvasid, "width": "400", "height": "200"}, "");
- return canvas
-}
-
-function generateUnitTest(num, func, data, type, desc) {
- var table = DIV({"class": "data"}, generateTestTable(num, data));
- var canvas = DIV({"class": "canvas"}, generateCanvas(num));
- var ending = DIV({"class":"ending"}, desc);
-
- addLoadEvent(partial(func, num, type));
-
- return DIV({"class": "unit"}, [table, canvas, ending]);
-}
-
-function generateTests() {
- var tests = $('tests');
-
- // datasets
- var simpleData1 = [[0, 0], [1, 1], [2, 2], [3, 3]];
- var simpleData2 = [[1, 2], [2, 3], [3, 4], [4, 5]];
- var singleData = [[1, 1]];
-
- var ninety = [[1, 9], [2, 1]];
-
- var floatData1 = [[0, 0.5], [1, 0.4], [2, 0.3]];
- var missingData = [[0, 1], [1, 4], [3, 16], [5, 17]];
-
- var dualData = [[0,0,0], [1,2,1], [2,4,4], [3,8,9], [4,16,16], [5,32,25], [6, 64, 36], [7, 128, 49]];
-
- tests.appendChild(H2(null, "Simple Tests"));
-
- tests.appendChild(generateUnitTest(1, genericTest, simpleData1,
- "bar", ""));
-
- tests.appendChild(generateUnitTest(2, genericTest, simpleData1,
- "line", ""));
-
- tests.appendChild(generateUnitTest(3, genericTest, simpleData2,
- "pie", ""));
-
- tests.appendChild(H2(null, "One Value Set"));
-
- tests.appendChild(generateUnitTest(4, genericTest, singleData,
- "bar", ""));
- tests.appendChild(generateUnitTest(5, genericTest, singleData,
- "line", ""));
- tests.appendChild(generateUnitTest(6, genericTest, singleData,
- "pie", ""));
-
- tests.appendChild(H2(null, "Float Values Set"));
- tests.appendChild(generateUnitTest(7, genericTest, floatData1,
- "bar", ""));
- tests.appendChild(generateUnitTest(8, genericTest, floatData1,
- "line", ""));
- tests.appendChild(generateUnitTest(9, genericTest, floatData1,
- "pie", ""));
-
- tests.appendChild(H2(null, "Dual Value Set"));
- tests.appendChild(generateUnitTest(10, dualDataSet, dualData,
- "bar", ""));
- tests.appendChild(generateUnitTest(11, dualDataSet, dualData,
- "line", ""));
-
- tests.appendChild(H2(null, "Drawing and Clearing"));
- tests.appendChild(generateUnitTest(12, genericTest, floatData1,
-"bar", ""));
- tests.appendChild(generateUnitTest(13, genericTestAndClear, floatData1,
-"bar", ""));
- tests.appendChild(generateUnitTest(14, genericTest, floatData1,
- "pie", ""));
- tests.appendChild(generateUnitTest(15, genericTestAndClear, floatData1,
- "pie", ""));
-
- tests.appendChild(H2(null, "Testing Circle Drawing"));
-
- tests.appendChild(generateUnitTest(16, genericTest, ninety,
- "pie", ""));
-
-}
-
-addLoadEvent(generateTests);
+++ /dev/null
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
- <title>PlotKit: Debug</title>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link href="/css/page.css" media="screen" rel="Stylesheet"
- type="text/css" />
- <link href="tests.css" media="screen" rel="Stylesheet" type="text/css" />
- <script src="/js/mochi/MochiKit.js" type="text/javascript"></script>
- <script src="/js/plotkit-svn/excanvas.js" type="text/javascript"></script>
- <script src="/js/plotkit-svn/Base.js" type="text/javascript"></script>
- <script src="/js/plotkit-svn/Layout.js" type="text/javascript"></script>
- <script src="/js/plotkit-svn/Canvas.js" type="text/javascript"></script>
- <script src="/js/plotkit-svn/SweetCanvas.js" type="text/javascript"></script>
-
-</head>
-
-
-<body>
- <div id="body">
- <h2>Debug</h2>
-
- <div style="margin: 0 auto 0 auto; width: 500px;">
- <div><canvas id="chart" width="500" height="300"></canvas></div>
-
- <script type="text/javascript">
- var options = {
- "padding": {left: 20, right: 0, top: 10, bottom: 30},
- "yAxis": [0, 60]
- }
-
- function drawGraph() {
- var layoutOptions = {
- "xAxis" : [1, 4],
- "xOriginIsZero" : false,
- "xTicks" : [ {v: 0}, {v: 1}, {v: 2}, {v: 3}, {v: 4}, {v: 5} ],
- "yAxis" : [1, 4],
- "yOriginIsZero" : false,
- "yTicks" : [ {v: 0}, {v: 1}, {v: 2}, {v: 3}, {v: 4}, {v: 5} ]
- };
- var layout = new PlotKit.Layout("line", layoutOptions);
- layout.addDataset("myDataset", [ [1, 1], [2, 2], [3, 3], [4, 4] ]);
- layout.evaluate();
-
- var canvas = MochiKit.DOM.getElement("chart");
- var plotter = new PlotKit.SweetCanvasRenderer(canvas, layout, options);
- plotter.render();
- }
- MochiKit.DOM.addLoadEvent(drawGraph);
-
- </script>
- </div>
-
- <div class="footer"><a href="http://www.liquidx.net/plotkit/">PlotKit</a></div>
-</div>
-</body></html>
+++ /dev/null
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-<head>
- <object id="AdobeSVG" classid="clsid:78156a80-c6a1-4bbf-8e6a-3cd390eeb4e2"></object>
- <?import namespace="svg" implementation="#AdobeSVG"?>
- <title>PlotKit: SVGRenderer Test</title>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link href="/css/page.css" media="screen" rel="Stylesheet"
- type="text/css" />
- <link href="tests.css" media="screen" rel="Stylesheet" type="text/css" />
-
-<script src="/js/mochi/MochiKit.js" type="text/javascript"></script>
-<script src="/js/plotkit/Base.js" type="text/javascript"></script>
-<script src="/js/plotkit/Layout.js" type="text/javascript"></script>
-<script src="/js/plotkit/SVG.js" type="text/javascript"></script>
-<script src="/js/plotkit-tests/demo-svg.js" type="text/javascript"></script>
-</head>
-
-<body>
- <div id="body">
- <h2>PlotKit Demo Page (SVG)</h2>
-
- <div id="tests">
- <table class="matrix">
- <tr>
- <td><div><svg:svg id="test1" width="220" height="220"></svg:svg></div></td>
- <td><div><svg:svg id="test2" width="220" height="220"></svg:svg></div></td>
- <td><div><svg:svg id="test3" width="220" height="220"></svg:svg></div></td>
- </tr>
- <tr>
- <td><div><svg:svg id="test4" width="220" height="220"></svg:svg></div></td>
- <td><div><svg:svg id="test5" width="220" height="220"></svg:svg></div></td>
- <td><div><svg:svg id="test6" width="220" height="220"></svg:svg></div></td>
- </tr>
- <tr>
- <td><div><svg:svg id="test7" width="220" height="220"></svg:svg></div></td>
- <td><div><svg:svg id="test8" width="220" height="220"></svg:svg></div></td>
- <td><div><svg:svg id="test9" width="220" height="220"></svg:svg></div></td>
- </tr>
- <tr>
- <td><div><svg:svg id="test10" width="220" height="220"></svg:svg></div></td>
- <td><div><svg:svg id="test11" width="220" height="220"></svg:svg></div></td>
- <td><div><svg:svg id="test12" width="220" height="220"></svg:svg></div></td>
- </tr>
- <tr>
- <td><div><svg:svg id="test13" width="220" height="220"></svg:svg></div></td>
- <td><div><svg:svg id="test14" width="220" height="220"></svg:svg></div></td>
- <td><div><svg:svg id="test15" width="220" height="220"></svg:svg></div></td>
- </tr>
-
- </table>
-
- </div>
-
- <div class="footer"><a href="http://www.liquidx.net/plotkit/">PlotKit</a></div>
-</div>
-</body></html>
+++ /dev/null
-/* actual tests */
-
-function drawDemo(element, layout, options) {
- var renderer = new PlotKit.SVGRenderer(element, layout, options);
- renderer.render();
-}
-
-function demoWithStyle(style) {
- // datasets
- var dataset = [
- [0,1],
- [1,4],
- [2,16],
- [3,8],
- [4,16],
- [5,4],
- [6,1]
- ];
-
- var dataset_rev = [
- [6,0],
- [5,1],
- [4,4],
- [3,9],
- [2,16],
- [1,25],
- [0,36]
- ];
-
- var options = {
- "drawBackground": false,
- "shouldFill": true,
- "shouldStroke": true,
- "drawXAxis": true,
- "drawYAxis": true,
- "padding": {left: 40, right: 10, top: 10, bottom: 20},
- "axisLabelUseDiv": false
- };
-
- if (style == "pie") {
- options["padding"] = {left: 50, right: 50, top: 50, bottom: 50}
- }
-
- var layout = new PlotKit.Layout(style, options);
- layout.addDataset("noname", dataset);
- layout.evaluate();
-
- // stroke/fill toggle
- drawDemo($('test1'), layout, options);
- options["shouldFill"] = false;
- drawDemo($('test2'), layout, options);
- options["shouldStroke"] = false;
- options["shouldFill"] = true;
- drawDemo($('test3'), layout, options);
-
- // drawing axis
- options["shouldFill"] = true;
- options["shouldStroke"] = true;
- options["drawXAxis"] = false;
- options["drawYAxis"] = false;
- drawDemo($('test4'), layout, options);
- options["drawXAxis"] = true;
- drawDemo($('test5'), layout, options);
- options["drawYAxis"] = true;
- options["drawXAxis"] = false;
- drawDemo($('test6'), layout, options);
-
- // changing background color and axis color
- options["drawXAxis"] = true;
- options["colorScheme"] = PlotKit.Base.colorScheme().reverse()
- drawDemo($('test7'), layout, options);
- options["drawBackground"] = true;
- options["backgroundColor"] = Color.blueColor().lighterColorWithLevel(0.45);
- drawDemo($('test8'), layout, options);
- options["drawBackground"] = false;
- options["axisLineColor"] = Color.grayColor();
- options["axisLabelColor"] = Color.grayColor();
- options["axisLabelFontSize"] = 9;
- drawDemo($('test9'), layout, options);
-
- // layout customisation
- options["colorScheme"] = PlotKit.Base.colorScheme();
- options["axisLineColor"] = Color.blackColor();
- options["axisLabelColor"] = Color.blackColor();
- options["axisLabelFontSize"] = 9;
- options["yNumberOfTicks"] = 3;
-
- layout.options.yNumberOfTicks = 3;
- layout.evaluate();
- drawDemo($('test10'), layout, options);
-
- layout.options.xNumberOfTicks = 3;
- layout.evaluate();
- drawDemo($('test11'), layout, options);
-
- layout.options.barWidthFillFraction = 0.5;
- layout.evaluate();
- drawDemo($('test12'), layout, options);
-
-
- // custom labels
- layout.options.barWidthFillFraction = 0.75;
- layout.options.yTicks = [{v:10}, {v:20}, {v:30}, {v:40}];
- layout.evaluate();
- drawDemo($('test13'), layout, options);
-
- layout.options.xTicks = [
- {v:1, label:"one"},
- {v:2, label:"two"},
- {v:3, label:"three"},
- {v:4, label:"four"},
- {v:5, label:"five"},
- {v:6, label:"six"}];
- layout.evaluate();
- drawDemo($('test14'), layout, options);
-
- layout.addDataset("reversed", dataset_rev);
- layout.options.yTicks = null;
- layout.options.xTicks = null;
- layout.options.xNumberOfTicks = 10;
- layout.options.yNumberOfTicks = 5;
- layout.options.xTicks = null;
- layout.options.yTicks = null;
- layout.evaluate();
- drawDemo($('test15'), layout, options);
-
-}
-
-function demo() {
- demoWithStyle("bar");
-}
-
-addLoadEvent(demo);
+++ /dev/null
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
- <title>PlotKit : Demo</title>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link href="/css/page.css" media="screen" rel="Stylesheet"
- type="text/css" />
- <link href="tests.css" media="screen" rel="Stylesheet" type="text/css" />
- <script src="/js/mochi/MochiKit.js" type="text/javascript"></script>
- <script src="/js/plotkit/Base.js" type="text/javascript"></script>
- <script src="/js/plotkit/Layout.js" type="text/javascript"></script>
- <script src="/js/plotkit/Canvas.js" type="text/javascript"></script>
- <script src="/js/plotkit/SVG.js" type="text/javascript"></script>
- <script src="/js/plotkit-tests/demo.js" type="text/javascript"></script>
-</head>
-
-<body>
- <div id="body">
- <h2>PlotKit Demo Page</h2>
-
-
-
- <div id="tests">
- <table class="matrix">
- <tr>
- <td><div><canvas id="test1" width="220" height="220"></canvas></div></td>
- <td><div><canvas id="test2" width="220" height="220"></canvas></div></td>
- <td><div><canvas id="test3" width="220" height="220"></canvas></div></td>
- </tr>
- <tr>
- <td><div><canvas id="test4" width="220" height="220"></canvas></div></td>
- <td><div><canvas id="test5" width="220" height="220"></canvas></div></td>
- <td><div><canvas id="test6" width="220" height="220"></canvas></div></td>
- </tr>
- <tr>
- <td><div><canvas id="test7" width="220" height="220"></canvas></div></td>
- <td><div><canvas id="test8" width="220" height="220"></canvas></div></td>
- <td><div><canvas id="test9" width="220" height="220"></canvas></div></td>
- </tr>
- <tr>
- <td><div><canvas id="test10" width="220" height="220"></canvas></div></td>
- <td><div><canvas id="test11" width="220" height="220"></canvas></div></td>
- <td><div><canvas id="test12" width="220" height="220"></canvas></div></td>
- </tr>
- <tr>
- <td><div><canvas id="test13" width="220" height="220"></canvas></div></td>
- <td><div><canvas id="test14" width="220" height="220"></canvas></div></td>
- <td><div><canvas id="test15" width="220" height="220"></canvas></div></td>
- </tr>
-
- </table>
-
- </div>
-
- <div class="footer"><a href="http://www.liquidx.net/plotkit/">PlotKit</a></div>
-</div>
-</body></html>
+++ /dev/null
-/* actual tests */
-
-function drawDemo(element, layout, options) {
- var renderer = new PlotKit.CanvasRenderer(element, layout, options);
- renderer.render();
-}
-
-function demoWithStyle(style) {
- // datasets
- var dataset = [
- [0,1],
- [1,4],
- [2,16],
- [3,8],
- [4,16],
- [5,4],
- [6,1]
- ];
-
- var dataset_rev = [
- [6,0],
- [5,1],
- [4,4],
- [3,9],
- [2,16],
- [1,25],
- [0,36]
- ];
-
-
- var options = {
- "IECanvasHTC": "../plotkit/iecanvas.htc",
- "drawBackground": false,
- "shouldFill": true,
- "shouldStroke": true,
- "drawXAxis": true,
- "drawYAxis": true,
- "padding": {left: 40, right: 10, top: 10, bottom: 20},
- "strokeColor": null,
- "strokeColorTransform": "asStrokeColor"
- };
-
- if (style == "pie") {
- options["padding"] = {left: 50, right: 50, top: 50, bottom: 50}
- }
-
- var layout = new PlotKit.Layout(style, options);
- layout.addDataset("noname", dataset);
- layout.evaluate();
-
- // stroke/fill toggle
- drawDemo($('test1'), layout, options);
- options["shouldFill"] = false;
- drawDemo($('test2'), layout, options);
- options["shouldStroke"] = false;
- options["shouldFill"] = true;
- drawDemo($('test3'), layout, options);
-
- // drawing axis
- options["shouldFill"] = true;
- options["shouldStroke"] = true;
- options["drawXAxis"] = false;
- options["drawYAxis"] = false;
- drawDemo($('test4'), layout, options);
- options["drawXAxis"] = true;
- drawDemo($('test5'), layout, options);
- options["drawYAxis"] = true;
- options["drawXAxis"] = false;
- drawDemo($('test6'), layout, options);
-
- // changing background color and axis color
- options["drawXAxis"] = true;
- options["colorScheme"] = PlotKit.Base.colorScheme().reverse()
- drawDemo($('test7'), layout, options);
- options["drawBackground"] = true;
- options["backgroundColor"] = Color.blueColor().lighterColorWithLevel(0.4);
- drawDemo($('test8'), layout, options);
- options["drawBackground"] = false;
- options["axisLineColor"] = Color.grayColor();
- options["axisLabelColor"] = Color.grayColor();
- options["axisLabelFontSize"] = 8;
- drawDemo($('test9'), layout, options);
-
- // layout customisation
- options["colorScheme"] = PlotKit.Base.colorScheme();
- options["axisLineColor"] = Color.blackColor();
- options["axisLabelColor"] = Color.blackColor();
- options["axisLabelFontSize"] = 9;
- options["yNumberOfTicks"] = 3;
-
- layout.options.yNumberOfTicks = 3;
- layout.evaluate();
- drawDemo($('test10'), layout, options);
-
- layout.options.xNumberOfTicks = 3;
- layout.evaluate();
- drawDemo($('test11'), layout, options);
-
- layout.options.barWidthFillFraction = 0.5;
- layout.evaluate();
- drawDemo($('test12'), layout, options);
-
-
- // custom labels
- layout.options.barWidthFillFraction = 0.75;
- layout.options.yTicks = [{v:10}, {v:20}, {v:30}, {v:40}];
- layout.evaluate();
- drawDemo($('test13'), layout, options);
-
- layout.options.xTicks = [
- {v:1, label:"one"},
- {v:2, label:"two"},
- {v:3, label:"three"},
- {v:4, label:"four"},
- {v:5, label:"five"},
- {v:6, label:"six"}];
- layout.evaluate();
- drawDemo($('test14'), layout, options);
-
- layout.addDataset("reversed", dataset_rev);
- layout.options.yTicks = null;
- layout.options.xTicks = null;
- layout.options.xNumberOfTicks = 10;
- layout.options.yNumberOfTicks = 5;
- layout.options.xTicks = null;
- layout.options.yTicks = null;
- layout.evaluate();
- drawDemo($('test15'), layout, options);
-
-}
-
-function demo() {
- demoWithStyle("pie");
-}
-
-addLoadEvent(demo);
+++ /dev/null
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
- <title>PlotKit : Basic Unit Tests</title>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <script src="/js/mochi/MochiKit.js" type="text/javascript"></script>
- <script src="/js/plotkit-svn/excanvas.js" type="text/javascript"></script>
- <script src="/js/plotkit-svn/PlotKit_Packed.js" type="text/javascript"></script>
- <style type="text/css">
-
- body {
- font-family: Lucida Grande, Verdana, Sans;
- font-size: small;
- }
-
- table#datatable td {
- padding: 2px;
- }
-
- table#datatable thead td {
- border-top: 1px solid #e0e0e0;
- background-color: #d0d0d0;
- border-bottom: 1px solid #c0c0c0;
- padding-left: 10px;
- padding-right: 10px;
- }
-
- table#datatable tbody input {
- border: 1px solid #eee;
- padding: 2px;
- width: 90px;
- }
-
- </style>
-
- <script type="text/javascript">
-
- var dataTable = null;
- var layout = null;
- var renderer = null;
- var options = null;
-
- function initDynamicTable() {
- dataTable = $('datatable');
- options = PlotKit.Base.officeBlue();
- layout = new Layout("line", options);
- renderer = new SweetCanvasRenderer($('canvasTest'), layout, options);
- }
-
- function newRow() {
- var tbody = dataTable.tBodies[0];
- var blankRow = TR({}, [
- TD({}, INPUT({"class":"xvalue", "size":"6", "type":"text", "value":"0"})),
- TD({}, INPUT({"class":"yvalue", "size":"6", "type":"text", "value":"0"}))]);
- tbody.appendChild(blankRow);
- }
-
- function chartReload() {
- var chartStyleSelected = document.forms["options"].chartStyle.selectedIndex;
- var chartStyle = document.forms["options"].chartStyle[chartStyleSelected].value;
-
- var colorSchemeSelected = document.forms["options"].colorScheme.selectedIndex;
- var colorScheme = document.forms["options"].colorScheme[colorSchemeSelected].value;
- // grab values
- var getValue = function(row) {
- var xElem = MochiKit.DOM.getElementsByTagAndClassName("input", "xvalue", row)[0];
- var yElem = MochiKit.DOM.getElementsByTagAndClassName("input", "yvalue", row)[0];
- var xVal = xElem.value;
- var yVal = yElem.value;
-
- if (xVal.length > 0) {
- xVal = parseFloat(xVal);
- }
- else {
- xVal = 0;
- }
-
- if (yVal.length > 0) {
- yVal = parseFloat(yVal);
- }
- else {
- yVal = 0;
- }
- return [xVal, yVal];
- }
-
- var values = MochiKit.Base.map(getValue, dataTable.tBodies[0].rows);
-
- // setup layout options
- var themeName = "office" + colorScheme;
- var theme = PlotKit.Base[themeName]();
- MochiKit.Base.update(options, theme);
-
- layout.style = chartStyle;
- MochiKit.Base.update(layout.options, options);
- MochiKit.Base.update(renderer.options, options);
-
- layout.addDataset("data", values);
-
- // update
- layout.evaluate();
- renderer.clear();
- renderer.render();
-
- }
-
- addLoadEvent(initDynamicTable);
-
- </script>
-</head>
-
-<body>
- <div id="body">
- <h2>PlotKit Dynamic Test</h2>
-
- <div style="padding: 20px;">
- <form name="options">
- Chart Style:
- <select id="chartStyle" name="chartStyle" onChange="chartReload();">
- <option value="line">Line Chart</option>
- <option value="bar">Bar Chart</option>
- <option value="pie">Pie Chart</option>
- </select>
-
- Colors:
- <select id="colorScheme" name="colorScheme" onChange="chartReload();">
- <option value="Blue">Blue</option>
- <option value="Red">Red</option>
- <option value="Green">Green</option>
- <option value="Purple">Purple</option>
- <option value="Cyan">Cyan</option>
- <option value="Orange">Orange</option>
- </select>
-
-
- </form>
- </div>
-
- <div style="float: left; width: 250px;">
- <table id="datatable" cellspacing="0" cellpadding="0">
- <thead>
- <tr><td width="100">X</td><td width="100">Y</td></tr>
- </thead>
- <tbody>
- <tr>
- <td><input class="xvalue" size="6" type="text" value="0"/></td>
- <td><input class="yvalue" size="6" type="text" value="0"/></td>
- </tr>
- </tbody>
- </table>
- <div><a href="#" onclick="newRow(); return false;">add new row</a> <a href="#" onclick="chartReload(); return false;">redraw</a></div>
- </div>
- <div style="float: left; width: 400px;">
- <div><canvas id="canvasTest" width="400" height="400" style="border: 1px solid #eee;"></canvas></div>
- </div>
-
- <div style="clear: both;"> </div>
-
- <div class="footer"><a href="http://www.liquidx.net/plotkit/">PlotKit</a></div>
-</div>
-</body></html>
+++ /dev/null
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
- <title>PlotKit: Image Labels Example</title>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link href="/css/page.css" media="screen" rel="Stylesheet"
- type="text/css" />
- <link href="tests.css" media="screen" rel="Stylesheet" type="text/css" />
- <script src="/js/mochi/MochiKit.js" type="text/javascript"></script>
- <script src="/js/plotkit-svn/excanvas.js" type="text/javascript"></script>
- <script src="/js/plotkit-svn/PlotKit_Packed.js" type="text/javascript"></script>
-</head>
-
-
-<body>
- <div id="body">
- <h2>Image Labels Example.</h2>
-
- <div id="example" style="margin: 0 auto 0 auto;" width="400" height="400"></div>
-
- <script type="text/javascript">
- var data = [[0,0], [1,2], [2,3], [3, 7], [4, 8], [5, 6]];
- var labels = [
- {v:0, label:IMG({src:"img/konqueror.png", width:16, height:16})},
- {v:1, label:IMG({src:"img/opera.ico", width:16, height:16})},
- {v:2, label:IMG({src:"img/msie.gif", width:16, height:16})},
- {v:3, label:IMG({src:"img/safari.gif", width:16, height:16})},
- {v:4, label:IMG({src:"img/firefox.png", width:16,height:16})},
- {v:5, label:IMG({src:"img/mozilla.ico", width:16, height:16})}
- ];
- var plotter = EasyPlot("bar", {"xTicks":labels}, $("example"),
- [data, "sample.txt"]);
- </script>
- </div>
-
- <div class="footer"><a href="http://www.liquidx.net/plotkit/">PlotKit</a></div>
-</div>
-</body></html>
+++ /dev/null
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
- <title>PlotKit: X Label Demo</title>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link href="/css/page.css" media="screen" rel="Stylesheet"
- type="text/css" />
- <link href="tests.css" media="screen" rel="Stylesheet" type="text/css" />
- <script src="/js/mochi/MochiKit.js" type="text/javascript"></script>
- <script src="/js/plotkit-svn/excanvas.js" type="text/javascript"></script>
- <script src="/js/plotkit-svn/Base.js" type="text/javascript"></script>
- <script src="/js/plotkit-svn/Layout.js" type="text/javascript"></script>
- <script src="/js/plotkit-svn/Canvas.js" type="text/javascript"></script>
- <script src="/js/plotkit-svn/SweetCanvas.js" type="text/javascript"></script>
-
-</head>
-
-
-<body>
- <div id="body">
- <h2>Label Demo</h2>
-
- <div style="margin: 0 auto 0 auto; width: 500px;">
- <div><canvas id="chart" width="500" height="300"></canvas></div>
-
- <script type="text/javascript">
- var xTicks = [{label: "13:00", v: 0}, {label: "14:00", v: 1},
- {label: "14:00", v: 2}, {label: "15:00", v: 3},
- {label: "16:00", v: 4}];
- var layout = new Layout("line", {"xTicks": xTicks} );
- layout.addDataset("yay", [[0, 0], [1, 1], [2, 4], [3, 9], [4, 16]]);
- layout.addDataset("dataset2", [[0, 4], [1, 3], [2, 3], [3, 1], [4, 8]]);
- layout.evaluate();
-
- var chart = new SweetCanvasRenderer($("chart"), layout);
- chart.render();
-
- </script>
- </div>
-
- <div class="footer"><a href="http://www.liquidx.net/plotkit/">PlotKit</a></div>
-</div>
-</body></html>
+++ /dev/null
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
- <title>PlotKit: SweetCanvasRenderer Test</title>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link href="/css/page.css" media="screen" rel="Stylesheet"
- type="text/css" />
- <link href="tests.css" media="screen" rel="Stylesheet" type="text/css" />
- <script src="http://al.tse.id.au/gallery/lightbox/js/prototype.js" type="text/javascript"></script>
- <script src="/js/mochi/MochiKit.js" type="text/javascript"></script>
- <script src="/js/plotkit-svn/excanvas.js" type="text/javascript"></script>
- <script src="/js/plotkit-svn/Base.js" type="text/javascript"></script>
- <script src="/js/plotkit-svn/Layout.js" type="text/javascript"></script>
- <script src="/js/plotkit-svn/Canvas.js" type="text/javascript"></script>
- <script src="/js/plotkit-svn/SweetCanvas.js" type="text/javascript"></script>
- <script src="/js/plotkit-tests/sweet.js" type="text/javascript"></script>
-</head>
-
-<body>
- <div id="body">
- <h2>Sweet Canvas Renderer Tests</h2>
-
- <div id="tests">
- </div>
-
- <div class="footer"><a href="http://www.liquidx.net/plotkit/">PlotKit</a></div>
-</div>
-</body></html>
+++ /dev/null
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
- <title>PlotKit: Quickstart Demo</title>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link href="/css/page.css" media="screen" rel="Stylesheet"
- type="text/css" />
- <link href="tests.css" media="screen" rel="Stylesheet" type="text/css" />
- <script src="/js/mochi/MochiKit.js" type="text/javascript"></script>
- <script src="/js/plotkit-svn/excanvas.js" type="text/javascript"></script>
- <script src="/js/plotkit-svn/PlotKit_Packed.js" type="text/javascript"></script>
-</head>
-
-
-<body>
- <div id="body">
- <h2>Quickstart EasyPlot Demo</h2>
-
- <div id="example" style="margin: 0 auto 0 auto;" width="400" height="400"></div>
-
- <script type="text/javascript">
- var data = [[0,0], [1,2], [2,3], [3, 7], [4, 8], [5, 6]];
- var plotter = EasyPlot("line", {}, $("example"), [data, "sample.txt"]);
- </script>
- </div>
-
- <div class="footer"><a href="http://www.liquidx.net/plotkit/">PlotKit</a></div>
-</div>
-</body></html>
+++ /dev/null
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
- <title>PlotKit: Quickstart Demo</title>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link href="/css/page.css" media="screen" rel="Stylesheet"
- type="text/css" />
- <link href="tests.css" media="screen" rel="Stylesheet" type="text/css" />
-
- <script src="/js/mochi/MochiKit.js" type="text/javascript"></script>
- <script src="/js/plotkit-svn/excanvas.js" type="text/javascript"></script>
- <script src="/js/plotkit-svn/PlotKit_Packed.js" type="text/javascript"></script>
-</head>
-
-
-<body>
- <div id="body">
- <h2>Quickstart Demo</h2>
-
- <div style="margin: 0 auto 0 auto; width: 500px;">
- <div><canvas id="chart" width="500" height="300"></canvas></div>
-
- <br/>
-
- <table id="values" class="data">
- <thead>
- <tr><td>x</td><td>y1</td><td>y2</td></tr>
- </thead>
- <tbody>
- <tr><td>0</td><td>0</td><td>3</td></tr>
- <tr><td>1</td><td>10</td><td>20</td></tr>
- <tr><td>2</td><td>5</td><td>10</td></tr>
- <tr><td>3</td><td>6</td><td>7</td></tr>
- <tr><td>4</td><td>7</td><td>8</td></tr>
- <tr><td>5</td><td>6</td><td>7</td></tr>
- <tr><td>6</td><td>7</td><td>8</td></tr>
- </tbody>
- </table>
-
- <script type="text/javascript">
- var layout = new Layout("bar", {"barOrientation": "horizontal"});
- layout.addDatasetFromTable("dataset2", $("values"), xcol = 0, ycol = 2);
- layout.addDatasetFromTable("dataset1", $("values"), xcol = 0, ycol = 1);
- layout.evaluate();
-
- var chart = new SweetCanvasRenderer($("chart"), layout);
- chart.render();
- </script>
- </div>
-
- <div class="footer"><a href="http://www.liquidx.net/plotkit/">PlotKit</a></div>
-</div>
-</body></html>
+++ /dev/null
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
- <title>PlotKit: Quickstart Demo</title>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link href="/css/page.css" media="screen" rel="Stylesheet"
- type="text/css" />
- <link href="tests.css" media="screen" rel="Stylesheet" type="text/css" />
- <script src="/js/mochi/MochiKit.js" type="text/javascript"></script>
- <script src="/js/plotkit-svn/excanvas.js" type="text/javascript"></script>
- <script src="/js/plotkit-svn/PlotKit_Packed.js" type="text/javascript"></script>
-</head>
-
-
-<body>
- <div id="body">
- <h2>Quickstart EasyPlot Demo</h2>
-
- <div id="example" style="margin: 0 auto 0 auto;" width="400" height="400"></div>
-
- <script type="text/javascript">
- var data = [[0,0], [1,-2], [2,3], [3, -7], [4, 8], [5, -6]];
- var plotter = EasyPlot("line", {yOriginIsZero: false}, $("example"), [data]);
- </script>
- </div>
-
- <div class="footer"><a href="http://www.liquidx.net/plotkit/">PlotKit</a></div>
-</div>
-</body></html>
+++ /dev/null
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html
-xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
-xmlns:svg="http://www.w3.org/2000/svg"
-xmlns:xlink="http://www.w3.org/1999/xlink">
-<head>
- <object id="AdobeSVG" width="1" height="1" classid="clsid:78156a80-c6a1-4bbf-8e6a-3cd390eeb4e2"></object>
- <?import namespace="svg" implementation="#AdobeSVG"?>
- <title>PlotKit: Quickstart SVG Demo</title>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link href="/css/page.css" media="screen" rel="Stylesheet"
- type="text/css" />
- <link href="tests.css" media="screen" rel="Stylesheet" type="text/css" />
- <script src="/js/mochi/MochiKit.js" type="text/javascript"></script>
- <script src="/js/plotkit-svn/excanvas.js" type="text/javascript"></script>
- <script src="/js/plotkit-svn/PlotKit_Packed.js" type="text/javascript"></script>
-</head>
-
-<body>
- <div id="body">
- <h2>Quickstart SVG Demo</h2>
-
- <div style="margin: 0 auto 0 auto; width: 500px;">
- <div id="svgcontainer" style="width: 500px; height:300px;"></div>
- <br/>
-
- <table id="values" class="data">
- <thead>
- <tr><td>x</td><td>y1</td><td>y2</td></tr>
- </thead>
- <tbody>
- <tr><td>0</td><td>0</td><td>3</td></tr>
- <tr><td>1</td><td>10</td><td>20</td></tr>
- <tr><td>2</td><td>5</td><td>10</td></tr>
- <tr><td>3</td><td>6</td><td>7</td></tr>
- <tr><td>4</td><td>7</td><td>8</td></tr>
- <tr><td>5</td><td>6</td><td>7</td></tr>
- <tr><td>6</td><td>7</td><td>8</td></tr>
- </tbody>
- </table>
-
- <p><em>Note: With SVG, the most compatible way is NOT to put in SVG tags, but create the SVG element with Javascript. Therefore, instead of adding <svg> tag, we just have a <div> container and create the SVG element using SVGRenderer.SVG().</em></p>
-
- <script type="text/javascript">
- var layout = new Layout("line");
- layout.addDatasetFromTable("dataset2", $("values"), xcol = 0, ycol = 2);
- layout.addDatasetFromTable("dataset1", $("values"), xcol = 0, ycol = 1);
- layout.evaluate();
-
- var svg = SVGRenderer.SVG({"width": 500, "height": 300, "id":"chart"});
- $('svgcontainer').appendChild(svg);
- var chart = new SweetSVGRenderer(svg, layout);
- chart.render();
- </script>
- </div>
-
- <div class="footer"><a href="http://www.liquidx.net/plotkit/">PlotKit</a></div>
-</div>
-</body></html>
+++ /dev/null
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
- <title>PlotKit: Quickstart Demo</title>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link href="/css/page.css" media="screen" rel="Stylesheet"
- type="text/css" />
- <link href="tests.css" media="screen" rel="Stylesheet" type="text/css" />
- <script src="/js/mochi/MochiKit.js" type="text/javascript"></script>
- <script src="/js/plotkit-svn/excanvas.js" type="text/javascript"></script>
- <script src="/js/plotkit-svn/Base.js" type="text/javascript"></script>
- <script src="/js/plotkit-svn/Layout.js" type="text/javascript"></script>
- <script src="/js/plotkit-svn/Canvas.js" type="text/javascript"></script>
- <script src="/js/plotkit-svn/SweetCanvas.js" type="text/javascript"></script>
-
-</head>
-
-
-<body>
- <div id="body">
- <h2>Quickstart Demo</h2>
-
- <div style="margin: 0 auto 0 auto; width: 500px;">
- <div><canvas id="chart" width="500" height="300"></canvas></div>
-
- <br/>
-
- <table id="values" class="data">
- <thead>
- <tr><td>x</td><td>y1</td><td>y2</td></tr>
- </thead>
- <tbody>
- <tr><td>0</td><td>0</td><td>3</td></tr>
- <tr><td>1</td><td>10</td><td>20</td></tr>
- <tr><td>2</td><td>5</td><td>10</td></tr>
- <tr><td>3</td><td>6</td><td>7</td></tr>
- <tr><td>4</td><td>7</td><td>8</td></tr>
- <tr><td>5</td><td>6</td><td>7</td></tr>
- <tr><td>6</td><td>7</td><td>8</td></tr>
- </tbody>
- </table>
-
- <script type="text/javascript">
- var layout = new Layout("line");
- layout.addDatasetFromTable("dataset2", $("values"), xcol = 0, ycol = 2);
- layout.addDatasetFromTable("dataset1", $("values"), xcol = 0, ycol = 1);
- layout.evaluate();
-
- var chart = new SweetCanvasRenderer($("chart"), layout);
- chart.render();
-
- </script>
- </div>
-
- <div class="footer"><a href="http://www.liquidx.net/plotkit/">PlotKit</a></div>
-</div>
-</body></html>
+++ /dev/null
-0,0
-1,1
-2,4
-3,8
-4,7
-5,8
+++ /dev/null
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-<head>
-<title>PlotKit: SVGRenderer Test</title>
-<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-<link href="/css/page.css" media="screen" rel="Stylesheet" type="text/css" />
-<link href="tests.css" media="screen" rel="Stylesheet" type="text/css" />
-<script src="/js/mochi/MochiKit.js" type="text/javascript"></script>
-<script src="/js/plotkit/Base.js" type="text/javascript"></script>
-<script src="/js/plotkit/Layout.js" type="text/javascript"></script>
-<script src="/js/plotkit/SVG.js" type="text/javascript"></script>
-<script src="/js/plotkit/SweetSVG.js" type="text/javascript"></script>
-<script src="/js/plotkit-tests/svg-sweet.js" type="text/javascript"></script>
-
-<!-- START Required for IE to support inlined SVG -->
-<object id="AdobeSVG" classid="clsid:78156a80-c6a1-4bbf-8e6a-3cd390eeb4e2" width="1" height="1"></object>
-<?import namespace="svg" implementation="#AdobeSVG"?>
-<!-- END Required for IE to support inlined SVG -->
-
-</head>
-
-<body>
- <div id="body">
- <h2>SVG Renderer Tests</h2>
- <div id="tests"></div>
- <div class="footer"><a href="http://www.liquidx.net/plotkit/">PlotKit</a></div>
-</div>
-</body></html>
+++ /dev/null
-/* actual tests */
-
-var options = {
- "axisLabelUseDiv": false
-};
-MochiKit.Base.update(options, PlotKit.Base.officeBlue());
-
-
-function genericTest(num, plotStyle) {
- var l = new PlotKit.Layout(plotStyle, {});
- var success = l.addDatasetFromTable("data" + num, $("test" + num));
- l.evaluate();
- var c = $("test" + num + "canvas");
- var g = new PlotKit.SweetSVGRenderer(c, l, options);
- g.render();
-}
-
-function genericTestAndClear(num, plotStyle) {
- var l = new PlotKit.Layout(plotStyle, {});
- l.addDatasetFromTable("data" + num, $("test" + num));
- l.evaluate();
- var c = $("test" + num + "canvas");
- var g = new PlotKit.SweetSVGRenderer(c, l, options);
- g.render();
- g.clear();
-}
-
-function dualDataSet(num, plotStyle) {
- var l = new PlotKit.Layout(plotStyle, {});
- l.addDatasetFromTable("data1." + num, $("test" + num), 0, 1);
- l.addDatasetFromTable("data2." + num, $("test" + num), 0, 2);
- l.evaluate();
- var c = $("test" + num + "canvas");
- var g = new PlotKit.SweetSVGRenderer(c, l, options);
- g.render();
-}
-
-
-/* create HTML for tests */
-
-function makeTableRow(list) {
- return TR({}, map(partial(TD, null), list));
-}
-
-function generateTestTable(num, data) {
- var tableid = "test" + num;
- var tablehead = THEAD(null, map(makeTableRow, [["x", "y"]]));
- var tablebody = TBODY(null, map(makeTableRow, data));
-
- var table = TABLE({"class": "data", "id": tableid}, [tablehead, tablebody]);
- return table;
-}
-
-function generateCanvas(num) {
- var canvasid = "test" + num + "canvas";
- var canvasopts = {
- "id": canvasid,
- "width": 400,
- "height": 200,
- "version": "1.1",
- "baseProfile": "full"
- };
-
- var canvas = PlotKit.SVGRenderer.SVG(canvasopts, "");
- return canvas
-}
-
-function generateUnitTest(num, func, data, type, desc) {
- var table = DIV({"class": "data"}, generateTestTable(num, data));
- var canvas = DIV({"class": "canvas"}, generateCanvas(num));
- var ending = DIV({"class":"ending"}, desc);
-
- addLoadEvent(partial(func, num, type));
-
- return DIV({"class": "unit"}, [table, canvas, ending]);
- return DIV({"class": "unit"}, [table, ending]);
-}
-
-function generateTests() {
- var tests = $('tests');
-
- // datasets
- var simpleData1 = [[0, 0], [1, 1], [2, 2], [3, 3]];
- var simpleData2 = [[1, 2], [2, 3], [3, 4], [4, 5]];
- var singleData = [[1, 1]];
-
- var ninety = [[1, 9], [2, 1]];
-
- var floatData1 = [[0, 0.5], [1, 0.4], [2, 0.3]];
- var missingData = [[0, 1], [1, 4], [3, 16], [5, 17]];
-
- var dualData = [[0,0,0], [1,2,1], [2,4,4], [3,8,9], [4,16,16], [5,32,25], [6, 64, 36], [7, 128, 49]];
-
- tests.appendChild(H2(null, "Simple Tests"));
-
- tests.appendChild(generateUnitTest(1, genericTest, simpleData1, "bar", ""));
- tests.appendChild(generateUnitTest(2, genericTest, simpleData1,
- "line", ""));
- tests.appendChild(generateUnitTest(3, genericTest, simpleData2,
- "pie", ""));
-
- tests.appendChild(H2(null, "One Value Set"));
-
- tests.appendChild(generateUnitTest(4, genericTest, singleData,
- "bar", ""));
- tests.appendChild(generateUnitTest(5, genericTest, singleData,
- "line", ""));
- tests.appendChild(generateUnitTest(6, genericTest, singleData,
- "pie", ""));
-
- tests.appendChild(H2(null, "Float Values Set"));
- tests.appendChild(generateUnitTest(7, genericTest, floatData1,
- "bar", ""));
- tests.appendChild(generateUnitTest(8, genericTest, floatData1,
- "line", ""));
- tests.appendChild(generateUnitTest(9, genericTest, floatData1,
- "pie", ""));
-
- tests.appendChild(H2(null, "Dual Value Set"));
- tests.appendChild(generateUnitTest(10, dualDataSet, dualData,
- "bar", ""));
- tests.appendChild(generateUnitTest(11, dualDataSet, dualData,
- "line", ""));
-
- tests.appendChild(H2(null, "Drawing and Clearing"));
- tests.appendChild(generateUnitTest(12, genericTest, floatData1,
- "bar", ""));
- tests.appendChild(generateUnitTest(13, genericTestAndClear, floatData1,
- "bar", ""));
- tests.appendChild(generateUnitTest(14, genericTest, floatData1,
- "pie", ""));
- tests.appendChild(generateUnitTest(15, genericTestAndClear, floatData1,
- "pie", ""));
-
- tests.appendChild(H2(null, "Testing Circle Drawing"));
-
- tests.appendChild(generateUnitTest(16, genericTest, ninety,
- "pie", ""));
-}
-
-addLoadEvent(generateTests);
+++ /dev/null
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-<head>
-<title>PlotKit: SVGRenderer Test</title>
-<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-<link href="/css/page.css" media="screen" rel="Stylesheet" type="text/css" />
-<link href="tests.css" media="screen" rel="Stylesheet" type="text/css" />
-<script src="/js/mochi/MochiKit.js" type="text/javascript"></script>
-<script src="/js/plotkit-svn/PlotKit_Packed.js" type="text/javascript"></script>
-<script src="/js/plotkit-tests/svg.js" type="text/javascript"></script>
-
-<!-- START Required for IE to support inlined SVG -->
-<object id="AdobeSVG" classid="clsid:78156a80-c6a1-4bbf-8e6a-3cd390eeb4e2" width="1" height="1"></object>
-<?import namespace="svg" implementation="#AdobeSVG"?>
-<!-- END Required for IE to support inlined SVG -->
-
-</head>
-
-<body>
- <div id="body">
- <h2>SVG Renderer Tests</h2>
- <div id="tests"></div>
- <div class="footer"><a href="http://www.liquidx.net/plotkit/">PlotKit</a></div>
-</div>
-</body></html>
+++ /dev/null
-/* actual tests */
-
-var options = {
- "axisLineWidth": 2.0,
- "axisLabelColor": Color.grayColor(),
- "axisLineColor": Color.blackColor(),
- "padding": {top: 5, bottom: 20, left: 40, right: 10},
- "backgroundColor": Color.whiteColor(),
- "strokeColor": null,
- "axisLabelUseDiv": false
-};
-
-function genericTest(num, plotStyle) {
- var l = new PlotKit.Layout(plotStyle, {});
- var success = l.addDatasetFromTable("data" + num, $("test" + num));
- l.evaluate();
- var c = $("test" + num + "canvas");
- var g = new PlotKit.SVGRenderer(c, l, options);
- g.render();
-}
-
-function genericTestAndClear(num, plotStyle) {
- var l = new PlotKit.Layout(plotStyle, {});
- l.addDatasetFromTable("data" + num, $("test" + num));
- l.evaluate();
- var c = $("test" + num + "canvas");
- var g = new PlotKit.SVGRenderer(c, l, {});
- g.render();
- g.clear();
-}
-
-function dualDataSet(num, plotStyle) {
- var l = new PlotKit.Layout(plotStyle, {});
- l.addDatasetFromTable("data1." + num, $("test" + num), 0, 1);
- l.addDatasetFromTable("data2." + num, $("test" + num), 0, 2);
- l.evaluate();
- var c = $("test" + num + "canvas");
- var g = new PlotKit.SVGRenderer(c, l, options);
- g.render();
-}
-
-
-/* create HTML for tests */
-
-function makeTableRow(list) {
- return TR({}, map(partial(TD, null), list));
-}
-
-function generateTestTable(num, data) {
- var tableid = "test" + num;
- var tablehead = THEAD(null, map(makeTableRow, [["x", "y"]]));
- var tablebody = TBODY(null, map(makeTableRow, data));
-
- var table = TABLE({"class": "data", "id": tableid}, [tablehead, tablebody]);
- return table;
-}
-
-function generateCanvas(num) {
- var canvasid = "test" + num + "canvas";
- var canvasopts = {
- "id": canvasid,
- "width": 400,
- "height": 200,
- "version": "1.1",
- "baseProfile": "full"
- };
-
- var canvas = PlotKit.SVGRenderer.SVG(canvasopts, "");
- return canvas
-}
-
-function generateUnitTest(num, func, data, type, desc) {
- var table = DIV({"class": "data"}, generateTestTable(num, data));
- var canvas = DIV({"class": "canvas"}, generateCanvas(num));
- var ending = DIV({"class":"ending"}, desc);
-
- addLoadEvent(partial(func, num, type));
-
- return DIV({"class": "unit"}, [table, canvas, ending]);
- return DIV({"class": "unit"}, [table, ending]);
-}
-
-function generateTests() {
- var tests = $('tests');
-
- // datasets
- var simpleData1 = [[0, 0], [1, 1], [2, 2], [3, 3]];
- var simpleData2 = [[1, 2], [2, 3], [3, 4], [4, 5]];
- var singleData = [[1, 1]];
-
- var ninety = [[1, 9], [2, 1]];
-
- var floatData1 = [[0, 0.5], [1, 0.4], [2, 0.3]];
- var missingData = [[0, 1], [1, 4], [3, 16], [5, 17]];
-
- var dualData = [[0,0,0], [1,2,1], [2,4,4], [3,8,9], [4,16,16], [5,32,25], [6, 64, 36], [7, 128, 49]];
-
- tests.appendChild(H2(null, "Simple Tests"));
-
- tests.appendChild(generateUnitTest(1, genericTest, simpleData1, "bar", ""));
-
- tests.appendChild(generateUnitTest(2, genericTest, simpleData1,
- "line", ""));
- tests.appendChild(generateUnitTest(3, genericTest, simpleData2,
- "pie", ""));
-
- tests.appendChild(H2(null, "One Value Set"));
-
- tests.appendChild(generateUnitTest(4, genericTest, singleData,
- "bar", ""));
- tests.appendChild(generateUnitTest(5, genericTest, singleData,
- "line", ""));
- tests.appendChild(generateUnitTest(6, genericTest, singleData,
- "pie", ""));
-
- tests.appendChild(H2(null, "Float Values Set"));
- tests.appendChild(generateUnitTest(7, genericTest, floatData1,
- "bar", ""));
- tests.appendChild(generateUnitTest(8, genericTest, floatData1,
- "line", ""));
- tests.appendChild(generateUnitTest(9, genericTest, floatData1,
- "pie", ""));
-
- tests.appendChild(H2(null, "Dual Value Set"));
- tests.appendChild(generateUnitTest(10, dualDataSet, dualData,
- "bar", ""));
- tests.appendChild(generateUnitTest(11, dualDataSet, dualData,
- "line", ""));
-
- tests.appendChild(H2(null, "Drawing and Clearing"));
- tests.appendChild(generateUnitTest(12, genericTest, floatData1,
- "bar", ""));
- tests.appendChild(generateUnitTest(13, genericTestAndClear, floatData1,
- "bar", ""));
- tests.appendChild(generateUnitTest(14, genericTest, floatData1,
- "pie", ""));
- tests.appendChild(generateUnitTest(15, genericTestAndClear, floatData1,
- "pie", ""));
-
- tests.appendChild(H2(null, "Testing Circle Drawing"));
-
- tests.appendChild(generateUnitTest(16, genericTest, ninety,
- "pie", ""));
-
-}
-
-addLoadEvent(generateTests);
+++ /dev/null
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
- <title>PlotKit: SweetCanvasRenderer Test</title>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link href="/css/page.css" media="screen" rel="Stylesheet"
- type="text/css" />
- <link href="tests.css" media="screen" rel="Stylesheet" type="text/css" />
- <script src="/js/mochi/MochiKit.js" type="text/javascript"></script>
- <script src="/js/plotkit-svn/excanvas.js" type="text/javascript"></script>
- <script src="/js/plotkit-svn/PlotKit_Packed.js" type="text/javascript"></script>
- <script src="/js/plotkit-tests/sweet.js" type="text/javascript"></script>
-</head>
-
-<body>
- <div id="body">
- <h2>Sweet Canvas Renderer Tests</h2>
-
- <div id="tests">
- </div>
-
- <div class="footer"><a href="http://www.liquidx.net/plotkit/">PlotKit</a></div>
-</div>
-</body></html>
+++ /dev/null
-/* actual tests */
-
-var opts = {
- "enableEvents": false
-};
-
-function genericTest(num, plotStyle) {
- var l = new PlotKit.Layout(plotStyle, {});
- var success = l.addDatasetFromTable("data" + num, $("test" + num));
- l.evaluate();
- var c = $("test" + num + "canvas");
- var g = new PlotKit.SweetCanvasRenderer(c, l, opts);
- g.render();
-}
-
-function dualDataSet(num, plotStyle) {
- var l = new PlotKit.Layout(plotStyle, {});
- l.addDatasetFromTable("data1." + num, $("test" + num), 0, 1);
- l.addDatasetFromTable("data2." + num, $("test" + num), 0, 2);
- l.evaluate();
- var c = $("test" + num + "canvas");
- var g = new PlotKit.SweetCanvasRenderer(c, l, opts);
- g.render();
-}
-
-
-/* create HTML for tests */
-
-function makeTableRow(list) {
- return TR({}, map(partial(TD, null), list));
-}
-
-function generateTestTable(num, data) {
- var tableid = "test" + num;
- var tablehead = THEAD(null, map(makeTableRow, [["x", "y"]]));
- var tablebody = TBODY(null, map(makeTableRow, data));
-
- var table = TABLE({"class": "data", "id": tableid}, [tablehead, tablebody]);
- return table;
-}
-
-function generateCanvas(num) {
- var canvasid = "test" + num + "canvas";
- var canvas = CANVAS({"id":canvasid, "width": "400", "height": "200"}, "");
- return canvas
-}
-
-function generateUnitTest(num, func, data, type, desc) {
- var table = DIV({"class": "data"}, generateTestTable(num, data));
- var canvas = DIV({"class": "canvas"}, generateCanvas(num));
- var ending = DIV({"class":"ending"}, desc);
-
- addLoadEvent(partial(func, num, type));
-
- return DIV({"class": "unit"}, [table, canvas, ending]);
-
-}
-
-function generateTests() {
- var tests = $('tests');
-
- // datasets
- var simpleData1 = [[0, 0], [1, 1], [2, 2], [3, 3]];
- var simpleData2 = [[1, 2], [2, 3], [3, 4], [4, 5]];
- var singleData = [[1, 1]];
-
- var floatData1 = [[0, 0.5], [1, 0.4], [2, 0.3]];
- var missingData = [[0, 1], [1, 4], [3, 16], [5, 17]];
-
- var dualData = [[0,0,0], [1,2,1], [2,4,4], [3,8,9], [4,16,16], [5,32,25], [6, 64, 36], [7, 128, 49]];
-
- tests.appendChild(H2(null, "Simple Tests"));
-
- tests.appendChild(generateUnitTest(1, genericTest, simpleData1,
- "bar", ""));
- tests.appendChild(generateUnitTest(2, dualDataSet, dualData,
- "bar", ""));
-
- tests.appendChild(generateUnitTest(3, genericTest, simpleData1,
- "line", ""));
- tests.appendChild(generateUnitTest(4, dualDataSet, dualData,
- "line", ""));
-
- tests.appendChild(generateUnitTest(5, genericTest, simpleData1,
- "pie", ""));
-
-}
-
-addLoadEvent(generateTests);
+++ /dev/null
-table#dynamicTable {
- margin: 10px auto 10px auto;
-}
-
-table.data td {
- margin: 5px;
- padding: 5px;
- width: 50px;
-}
-
-table.data thead td {
- background-color: #eee;
-}
-
-table.data thead th {
- background-color: #eee;
- border-bottom: 1px solid #ddd;
- padding: 5px;
- text-align: left;
-}
-
-table.data tbody td {
- padding: 5px;
- vertical-align: top;
- text-align: left;
- border-bottom: 1px solid #eee;
-}
-
-table.data {
- width: 200px;
-}
-
-.center {
- margin-left: auto;
- margin-right: auto;
-}
-
-h3 {
- font-size: large;
- color: #666;
- background-color: #eee;
- border-bottom: 1px solid #ddd;
- padding: 3px;
-}
-
-h4 {
- font-size: medium;
- margin: 5px;
-}
-
-div.data, div.canvas {
- float: left;
- margin: 5px;
-}
-
-div.ending {
- clear: both;
- margin: 10px;
-}
-
-div.unit {
- border: 1px solid #eee;
- margin: 10px;
- padding: 10px;
-}
-
+++ /dev/null
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-<head>
- <object id="AdobeSVG" classid="clsid:78156a80-c6a1-4bbf-8e6a-3cd390eeb4e2"></object>
- <?import namespace="svg" implementation="#AdobeSVG"?>
- <title>SVG Test</title>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link href="/css/page.css" media="screen" rel="Stylesheet" type="text/css" />
-
-
-<script src="testsvg.js" type="text/javascript"></script>
-<script type="text/javascript">
-alert(testsvg());
-</script>
-</head>
-
-<body>
-</body>
-</html>
+++ /dev/null
-function testsvg() {
- var isOpera = (navigator.userAgent.toLowerCase().indexOf("opera") != -1);
- var ieVersion = navigator.appVersion.match(/MSIE (\d\.\d)/);
- var safariVersion = navigator.userAgent.match(/AppleWebKit\/(\d+)/);
- var operaVersion = navigator.userAgent.match(/Opera\/(\d*\.\d*)/);
- var mozillaVersion = navigator.userAgent.match(/rv:(\d*\.\d*).*Gecko/);
-
-
- if (ieVersion && (ieVersion[1] >= 6) && !isOpera) {
- var dummysvg = document.createElement('<svg:svg width="1" height="1" baseProfile="full" version="1.1" id="dummy">');
- try {
- dummysvg.getSVGDocument();
- dummysvg = null;
- return true;
- }
- catch (e) {
- return false;
- }
- }
-
- if (safariVersion && (safariVersion[1] > 419))
- return true;
-
- if (operaVersion && (operaVersion[1] > 8.9))
- return true
-
- if (mozillaVersion && (mozillaVersion > 1.7))
- return true;
-
- return false;
-}
\ No newline at end of file
projects / dygraphs.git / commitdiff
