Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

doc and tests now maintained on gh-pages branch

GitHub pages is a very convenient way of serving a website for a
project; they can automatically generate HTML from markdown, have syntax
highlighting, etc. and it's all updated automatically when you push to
the gh-pages branch.

I've also put the tests there, but made them reference the latest
version of the PlotKit javascript on the master branch. This will enable
us to start having continuous integration tests, since a push to the
repository is all that is needed to bring everything up-to-date.
  • Loading branch information...
commit 78381e380cbb99b1c1ec0c1c9ce6ddab657e5d13 1 parent 4c80406
Martin Kleppmann authored
Showing with 0 additions and 6,383 deletions.
  1. +0 −2  doc/MochiKitAdditions.html
  2. +0 −2  doc/MochiKitAdditions.txt
  3. +0 −300 doc/PlotKit.Base.html
  4. +0 −139 doc/PlotKit.Base.txt
  5. +0 −170 doc/PlotKit.Canvas.html
  6. +0 −81 doc/PlotKit.Canvas.txt
  7. +0 −153 doc/PlotKit.EasyPlot.html
  8. +0 −50 doc/PlotKit.EasyPlot.txt
  9. +0 −426 doc/PlotKit.Layout.html
  10. +0 −332 doc/PlotKit.Layout.txt
  11. +0 −366 doc/PlotKit.QuickStart.html
  12. +0 −256 doc/PlotKit.QuickStart.txt
  13. +0 −434 doc/PlotKit.Renderer.html
  14. +0 −299 doc/PlotKit.Renderer.txt
  15. +0 −157 doc/PlotKit.SVG.html
  16. +0 −64 doc/PlotKit.SVG.txt
  17. +0 −129 doc/PlotKit.SweetCanvas.html
  18. +0 −34 doc/PlotKit.SweetCanvas.txt
  19. +0 −129 doc/PlotKit.SweetSVG.html
  20. +0 −34 doc/PlotKit.SweetSVG.txt
  21. +0 −352 doc/PlotKit.html
  22. +0 −159 doc/PlotKit.txt
  23. +0 −302 doc/SVGCanvasCompat.html
  24. +0 −144 doc/SVGCanvasCompat.txt
  25. BIN  doc/barsample.png
  26. BIN  doc/black.png
  27. BIN  doc/blue.png
  28. BIN  doc/cyan.png
  29. +0 −64 doc/doc.css
  30. +0 −39 doc/generate.py
  31. BIN  doc/green.png
  32. BIN  doc/orange.png
  33. BIN  doc/piesample.png
  34. BIN  doc/purple.png
  35. BIN  doc/red.png
  36. +0 −29 tests/axis.html
  37. +0 −22 tests/basic.html
  38. +0 −159 tests/basic.js
  39. +0 −30 tests/bignums.html
  40. +0 −54 tests/debug.html
  41. +0 −56 tests/demo-svg.html
  42. +0 −133 tests/demo-svg.js
  43. +0 −55 tests/demo.html
  44. +0 −136 tests/demo.js
  45. +0 −161 tests/dynamic.html
  46. BIN  tests/img/firefox.png
  47. BIN  tests/img/konqueror.png
  48. BIN  tests/img/mozilla.ico
  49. BIN  tests/img/msie.gif
  50. BIN  tests/img/opera.ico
  51. BIN  tests/img/safari.gif
  52. +0 −36 tests/labels-img.html
  53. +0 −40 tests/labels.html
  54. +0 −32 tests/multiline.html
  55. +0 −26 tests/prototype_compat.html
  56. +0 −27 tests/quickstart-easy.html
  57. +0 −51 tests/quickstart-horiz.html
  58. +0 −27 tests/quickstart-neg.html
  59. +0 −59 tests/quickstart-svg.html
  60. +0 −54 tests/quickstart.html
  61. +0 −6 tests/sample.txt
  62. +0 −28 tests/svg-sweet.html
  63. +0 −141 tests/svg-sweet.js
  64. +0 −25 tests/svg.html
  65. +0 −147 tests/svg.js
  66. +0 −24 tests/sweet.html
  67. +0 −89 tests/sweet.js
  68. +0 −70 tests/tests.css
  69. +0 −18 tests/testsvg.html
  70. +0 −31 tests/testsvg.js
View
2  doc/MochiKitAdditions.html
@@ -1,2 +0,0 @@
-.. title: MochiKit Additions
-
View
2  doc/MochiKitAdditions.txt
@@ -1,2 +0,0 @@
-.. title: MochiKit Additions
-
View
300 doc/PlotKit.Base.html
@@ -1,300 +0,0 @@
-
-<!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 rel="icon" href="/favicon.png" type="image/x-png">
- <link rel="shortcut icon" href="/favicon.png" type="image/x-png">
- <link href="http://media.liquidx.net/css/x_general.css" rel="Stylesheet" type="text/css" />
- <link href="http://media.liquidx.net/css/x_header.css" rel="Stylesheet" type="text/css" />
- <link href="http://media.liquidx.net/css/x_layout.css" rel="Stylesheet" type="text/css" />
- <link href="http://media.liquidx.net/css/x_blocks.css" rel="Stylesheet" type="text/css" />
- <!--[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://flists.com/life/liquidx/" 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">&gt;&gt;</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]] --&gt; [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(&quot;bar&quot;, 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">&nbsp;</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>
View
139 doc/PlotKit.Base.txt
@@ -1,139 +0,0 @@
-{% 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: ![bluecolors](blue.png)
-
-* ``officeRed()``
-
- Red colors: ![redcolors](red.png)
-
-* ``officeGreen()``
-
- Green colors: ![greencolors](green.png)
-
-* ``officePurple()``
-
- Purple colors: ![purplecolors](purple.png)
-
-* ``officeCyan()``
-
- Cyan colors: ![cyancolors](cyan.png)
-
-* ``officeOrange()``
-
- Orange colors: ![orangecolors](orange.png)
-
-* ``officeBlack()``
-
- Black colors: ![blackcolors](black.png)
-
-Usage
------
-
- ``var layout = PlotKit.Layout("bar", officeOrange());``
-
-{% endfilter %}
-</div>
-{% endblock %}
View
170 doc/PlotKit.Canvas.html
@@ -1,170 +0,0 @@
-
-<!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 rel="icon" href="/favicon.png" type="image/x-png">
- <link rel="shortcut icon" href="/favicon.png" type="image/x-png">
- <link href="http://media.liquidx.net/css/x_general.css" rel="Stylesheet" type="text/css" />
- <link href="http://media.liquidx.net/css/x_header.css" rel="Stylesheet" type="text/css" />
- <link href="http://media.liquidx.net/css/x_layout.css" rel="Stylesheet" type="text/css" />
- <link href="http://media.liquidx.net/css/x_blocks.css" rel="Stylesheet" type="text/css" />
- <!--[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://flists.com/life/liquidx/" 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">&lt;&lt;</a> | <a href="PlotKit.SVG.html">&gt;&gt;</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 = {
- &quot;drawsBackground&quot;: true,
- &quot;drawYAxis&quot;: false,
- &quot;IECanvasHTC&quot;: &quot;contrib/iecanvas.htc&quot;
-};
-
-var layout = new Layout(&quot;bar&quot;, {});
-layout.addDataset(&quot;squares&quot;, [[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">&nbsp;</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>
View
81 doc/PlotKit.Canvas.txt
@@ -1,81 +0,0 @@
-{% 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 %}
View
153 doc/PlotKit.EasyPlot.html
@@ -1,153 +0,0 @@
-
-<!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 rel="icon" href="/favicon.png" type="image/x-png">
- <link rel="shortcut icon" href="/favicon.png" type="image/x-png">
- <link href="http://media.liquidx.net/css/x_general.css" rel="Stylesheet" type="text/css" />
- <link href="http://media.liquidx.net/css/x_header.css" rel="Stylesheet" type="text/css" />
- <link href="http://media.liquidx.net/css/x_layout.css" rel="Stylesheet" type="text/css" />
- <link href="http://media.liquidx.net/css/x_blocks.css" rel="Stylesheet" type="text/css" />
- <!--[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://flists.com/life/liquidx/" 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">&lt;&lt;</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>&lt;div id=&quot;example&quot; style=&quot;margin: 0 auto 0 auto;&quot; width=&quot;400&quot; height=&quot;400&quot;&gt;&lt;/div&gt;
-
-&lt;script type=&quot;text/javascript&quot;&gt;
-var data = [[0,0], [1,2], [2,3], [3, 7], [4, 8], [5, 6]];
-var plotter = EasyPlot(&quot;line&quot;, {}, $(&quot;example&quot;), [data, &quot;sample.txt&quot;]);
-&lt;/script&gt;
-</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 &quot;sample.txt&quot;. 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">&nbsp;</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>
View
50 doc/PlotKit.EasyPlot.txt
@@ -1,50 +0,0 @@
-{% 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 %}
View
426 doc/PlotKit.Layout.html
@@ -1,426 +0,0 @@
-
-<!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 rel="icon" href="/favicon.png" type="image/x-png">
- <link rel="shortcut icon" href="/favicon.png" type="image/x-png">
- <link href="http://media.liquidx.net/css/x_general.css" rel="Stylesheet" type="text/css" />
- <link href="http://media.liquidx.net/css/x_header.css" rel="Stylesheet" type="text/css" />
- <link href="http://media.liquidx.net/css/x_layout.css" rel="Stylesheet" type="text/css" />
- <link href="http://media.liquidx.net/css/x_blocks.css" rel="Stylesheet" type="text/css" />
- <!--[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://flists.com/life/liquidx/" 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">&lt;&lt;</a> | <a href="PlotKit.Renderer.html">&gt;&gt;</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">&nbsp;</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>
View
332 doc/PlotKit.Layout.txt
@@ -1,332 +0,0 @@
-{% 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.
- Can be just a number, or an array defining a range [min, max].</td>
- <td>integer or array of integer</td>
- <td>[8, 12]</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.
- Can be just a number, or an array defining a range [min, max].</td>
- <td>integer or array of integer</td>
- <td>[5, 8]</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 %}
-
-
-
View
366 doc/PlotKit.QuickStart.html
@@ -1,366 +0,0 @@
-
-<!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 rel="icon" href="/favicon.png" type="image/x-png">
- <link rel="shortcut icon" href="/favicon.png" type="image/x-png">
- <link href="http://media.liquidx.net/css/x_general.css" rel="Stylesheet" type="text/css" />
- <link href="http://media.liquidx.net/css/x_header.css" rel="Stylesheet" type="text/css" />
- <link href="http://media.liquidx.net/css/x_layout.css" rel="Stylesheet" type="text/css" />
- <link href="http://media.liquidx.net/css/x_blocks.css" rel="Stylesheet" type="text/css" />
- <!--[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://flists.com/life/liquidx/" 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>&lt;script type=&quot;text/javascript&quot; src=&quot;/mochikit/MochiKit.js&quot;&gt;&lt;/script&gt;
-&lt;script type=&quot;text/javascript&quot; src=&quot;/plotkit/Base.js&quot;&gt;&lt;/script&gt;
-&lt;script type=&quot;text/javascript&quot; src=&quot;/plotkit/Layout.js&quot;&gt;&lt;/script&gt;
-&lt;script type=&quot;text/javascript&quot; src=&quot;/plotkit/Canvas.js&quot;&gt;&lt;/script&gt;
-&lt;script type=&quot;text/javascript&quot; src=&quot;/plotkit/SweetCanvas.js&quot;&gt;&lt;/script&gt;
-</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>&lt;canvas&gt;</code> tag to where we want the graph to
- appear. Note PlotKit <strong>requires</strong> the <code>&lt;canvas&gt;</code> tag is enclosed
- inside a <div> tags for labels to work.
-</p>
-<pre><code> &lt;div&gt;&lt;canvas id=&quot;graph&quot; height=&quot;300&quot; width=&quot;300&quot;&gt;&lt;/canvas&gt;&lt;/div&gt;
-</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(&quot;bar&quot;, {});
-layout.addDataset(&quot;sqrt&quot;, [[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(&quot;bar&quot;, {});</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(&quot;sqrt&quot;, [[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(&quot;graph&quot;);
- var plotter = new PlotKit.SweetCanvasRenderer(canvas, layout, {});
- plotter.render();
-</code></pre><ol>
- <li><p> <code>var canvas = MochiKit.DOM.getElement(&quot;graph&quot;);</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(&quot;bar&quot;, {});
- layout.addDataset(&quot;sqrt&quot;, [[0, 0], [1, 1], [2, 1.414], [3, 1.73], [4, 2]]);
- layout.evaluate();
- var canvas = MochiKit.DOM.getElement(&quot;graph&quot;);
- 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 = {
- &quot;IECanvasHTC&quot;: &quot;/plotkit/iecanvas.htc&quot;,
- &quot;colorScheme&quot;: PlotKit.Base.palette(PlotKit.Base.baseColors()[0]),
- &quot;padding&quot;: {left: 0, right: 0, top: 10, bottom: 30},
- &quot;xTicks&quot;: [{v:0, label:&quot;zero&quot;},
- {v:1, label:&quot;one&quot;},
- {v:2, label:&quot;two&quot;},
- {v:3, label:&quot;three&quot;},
- {v:4, label:&quot;four&quot;}],
- &quot;drawYAxis&quot;: false
-};
-
-function drawGraph() {
- var layout = new PlotKit.Layout(&quot;bar&quot;, options);
- layout.addDataset(&quot;sqrt&quot;, [[0, 0], [1, 1], [2, 1.414], [3, 1.73], [4, 2]]);
- layout.evaluate();
- var canvas = MochiKit.DOM.getElement(&quot;graph&quot;);
- 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;">&nbsp</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;">&nbsp</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">&nbsp;</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>
View
256 doc/PlotKit.QuickStart.txt
@@ -1,256 +0,0 @@
-{% 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.