plotkit_v091/doc/PlotKit.html

   1
   2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   3 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" >
   4 <head>
   5         <title>PlotKit Documentation | liquidx</title>
   6         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   7         <link href="http://media.liquidx.net/css/x_general.css" media="screen" rel="Stylesheet" type="text/css" />
   8         <link href="http://media.liquidx.net/css/x_header.css" media="screen" rel="Stylesheet" type="text/css" />
   9         <link href="http://media.liquidx.net/css/x_layout.css" media="screen" rel="Stylesheet" type="text/css" />
  10         <link href="http://media.liquidx.net/css/x_blocks.css" media="screen" rel="Stylesheet" type="text/css" />
  11         <link rel="icon" href="/favicon.png" type="image/x-png">
  12         <link rel="shortcut icon" href="/favicon.png" type="image/x-png">
  13         <!--[if lt IE 7.]>
  14         <script defer type="text/javascript" src="http://media.liquidx.net/js/pngfix.js"></script>
  15         <![endif]-->
  16
  17 <link href="doc.css" media="screen" rel="stylesheet" type="text/css" />
  18
  19 </head>
  20
  21 <body>
  22     <div id="header">
  23         <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>
  24                 <div id="menu-hack">
  25                         <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>
  26             <div id="menu-main">
  27                         <ul id="menu" class="code">
  28                         <li class="tab" id="blog"><a href="http://www.liquidx.net/" title="blog/home">blog</a></li>
  29                         <li class="tab" id="code"><a href="http://www.liquidx.net/code/" title="software i have written">software</a></li>
  30                         <li class="tab" id="dev"><a href="http://projects.liquidx.net/" title="source code for my open source projects">dev</a></li>
  31                         <li class="tab" id="photos"><a href="http://al.tse.id.au/gallery/" title="photos and videos">photos</a></li>
  32                         <li class="tab" id="research"><a href="http://al.tse.id.au/research/" title="research profile">research</a></li>
  33                         <li class="tab" id="links"><a href="http://www.liquidx.net/links/" title="my bookmarks">linkblog</a></li>
  34                         <li class="tab" id="stats"><a href="http://stats.liquidx.net/" title="stats for various parts of my website">stats</a></li>
  35                         <li class="tab" id="status"><a href="http://www.liquidx.net/status/" title="weather report for alastair">status</a></li>
  36                         <li class="tab" id="about"><a href="http://al.tse.id.au/" title="about alastair tse">aboutme</a></li>
  37                         </ul>
  38                 </div>
  39         </div>
  40                 <div id="quickbuttons">
  41                         <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>
  42                         <span class="quickbutton"><a href="http://www.liquidx.net/plotkit/"><img src="http://media.liquidx.net/imgx/quick_plotkit.png" alt="plotkit" /></a></span>
  43                         <span class="quickbutton"><a href="http://www.liquidx.net/fruity/"><img src="http://media.liquidx.net/imgx/quick_fruity.png" alt="fruity" /></a></span>
  44                 </div>
  45
  46         </div>
  47
  48     <div id="body">
  49 <div class="page doc">
  50
  51
  52 <h1> PlotKit</h1>
  53 <p> <a href="http://www.liquidx.net/plotkit/">PlotKit</a> is a Javascript graph plotting library. It is aimed at web
  54    applications that require plotting series of data in modern web
  55    browsers.
  56 </p>
  57 <p>PlotKit requires <a href="http://mochikit.com/">MochiKit</a>. (1.3 or higher)
  58 </p>
  59 <p>PlotKit supports both HTML Canvas and SVG, along with an
  60    <a href="http://me.eae.net/archive/2005/12/29/canvas-in-ie/">emulated canvas for Internet Explorer</a>.
  61 </p>
  62 <p>PlotKit is easily extensible to include other rendering engines,
  63    styles and layouts. Please pursue the documentation for more
  64    information.
  65 </p>
  66 <p>PlotKit is licensed under the BSD License, so you can include it in
  67    your free or commercial applications without worrying.
  68 </p>
  69
  70 <h1> PlotKit Components</h1>
  71
  72 <h2> Base Classes</h2>
  73 <ul>
  74  <li>
  75       <a href="PlotKit.Base.html">Base</a> : Common functionality that is used in other classes,
  76   including default styles.
  77  </li>
  78
  79  <li>
  80       <a href="PlotKit.Layout.html">Layout</a> : The default chart layout engine, supports bar, line and
  81            pie charts.
  82  </li>
  83
  84  <li>
  85       <a href="PlotKit.Renderer.html">Renderer</a>: Customising the look of the output
  86  </li>
  87 </ul>
  88
  89 <h2> Renderer Specific Implementations</h2>
  90 <ul>
  91  <li>
  92       <a href="PlotKit.Canvas.html">CanvasRenderer</a>: Basic renderer using an HTML Canvas.
  93  </li>
  94
  95  <li>
  96       <a href="PlotKit.SVG.html">SVGRenderer</a>: Basic renderer using SVG.
  97  </li>
  98
  99  <li>
 100       <a href="PlotKit.SweetCanvas.html">SweetCanvasRenderer</a>: Customised Renderer that builds on CanvasRenderer to provide nicer looking charts.
 101  </li>
 102
 103  <li>
 104       <a href="PlotKit.SweetSVG.html">SweetSVGRenderer</a>: Customised renderer that builds on SVGRenderer to provide nicer looking charts.
 105  </li>
 106 </ul>
 107
 108 <h2> Utility Classes</h2>
 109 <ul>
 110  <li>
 111       <a href="PlotKit.EasyPlot.html">EasyPlot</a>: Simple Wrapper around classes to provide one-line plotting.
 112  </li>
 113 </ul>
 114
 115 <h1> Getting Started</h1>
 116 <ul>
 117  <li>
 118       <a href="PlotKit.QuickStart.html">PlotKit Quick Start</a> - A thorough quick start to getting charts working for Safari, Mozilla, Firefox, Opera and IE.
 119  </li>
 120
 121  <li>
 122       <a href="SVGCanvasCompat.html">SVG/Canvas Browser Support Status</a> - Quirks about browser support that you should know about.
 123  </li>
 124
 125  <li>
 126       <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.
 127  </li>
 128
 129  <li>
 130       <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.
 131  </li>
 132 </ul>
 133
 134 <h1> More Demos</h1>
 135 <ul>
 136  <li>
 137      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>.
 138  </li>
 139
 140  <li>
 141       <a href="http://media.liquidx.net/js/plotkit-tests/dynamic.html">Dynamic Charting</a>.
 142  </li>
 143
 144  <li>
 145       <a href="http://media.liquidx.net/js/plotkit-tests/labels.html">Labels Example</a>. Thanks to Christopher Armstrong.
 146  </li>
 147
 148  <li>
 149       <a href="http://media.liquidx.net/js/plotkit-tests/labels-img.html">Labels with Images</a>.
 150  </li>
 151
 152  <li>
 153       <a href="http://media.liquidx.net/js/plotkit-tests/axis.html">Axis Restrictions</a>.
 154  </li>
 155 </ul>
 156
 157 <h1> Version History</h1>
 158
 159 <h3>PlotKit 0.8</h3>
 160 <ul>
 161  <li>
 162      Total rewrite from <a href="http://www.liquidx.net/canvasgraphjs/">CanvasGraph 0.7</a>
 163  </li>
 164 </ul>
 165
 166 <h3>PlotKit 0.9</h3>
 167 <ul>
 168  <li>
 169      Fixed some redraw issues with clear()
 170  </li>
 171
 172  <li>
 173      Replaced IECanvas.HTC with ExplorerCanvas
 174  </li>
 175
 176  <li>
 177      Added auto import and packed versions just like MochiKit.
 178  </li>
 179
 180  <li>
 181      Added horizontal bar chart rendering mode.
 182  </li>
 183
 184  <li>
 185      Added awareness of prototype.js and workaround Array/Object mutilation issues with MochiKit.
 186  </li>
 187
 188  <li>
 189      Added EasyPlot for single line plotting with Ajax support.
 190  </li>
 191
 192  <li>
 193      More tests, <a href="http://media.liquidx.net/js/plotkit-tests/dynamic.html">dynamic charting</a> and quickstart demos.
 194  </li>
 195 </ul>
 196
 197 <h3>PlotKit 0.9.1</h3>
 198 <ul>
 199  <li>
 200      Make Sweet{Canvas/SVG}Renderers respect shouldFill.
 201  </li>
 202
 203  <li>
 204      Fixed ignoring of maximum x and y values when setting xAxis/yAxis.
 205  </li>
 206
 207  <li>
 208      Fixed typo for calculating yrange in Layout.js (thanks to
 209      HubrisSonic).
 210  </li>
 211
 212  <li>
 213      Changed SweetCanvasRenderer to use axisLineColor for drawing lines over
 214      background (thanks to HubrisSonic).
 215  </li>
 216
 217  <li>
 218      Fixed bug in y-axis tick drawing (thanks to Cliff).
 219  </li>
 220
 221  <li>
 222      Fixed x-axis calculation bug when xAxisIsZero is false (thanks to
 223      Loic Jeannin)
 224  </li>
 225
 226  <li>
 227      Fixed xTicks drawing that exceed the bounds of the chart (thanks to
 228      Cliff)
 229  </li>
 230
 231  <li>
 232      Fixed barchart drawing with only 2 values (thanks to HubrisSonic)
 233  </li>
 234
 235  <li>
 236      Hide pie chart labels of 0% (thanks to Attiks)
 237  </li>
 238
 239  <li>
 240      Added optional field to addDatasetFromTable to include x-axis labels.
 241  </li>
 242
 243  <li>
 244      Updated excanvas.js version to fix possible printing issues.
 245  </li>
 246 </ul>
 247
 248 <h1> Road Map</h1>
 249
 250 <h3>Version 0.9</h3>
 251 <ul>
 252  <li>
 253      AutoSelectRenderer, automatically choose Canvas or SVG by auto detecting browser support.
 254  </li>
 255 </ul>
 256
 257 <h3>Version 0.10</h3>
 258 <ul>
 259  <li>
 260      Point plots
 261  </li>
 262
 263  <li>
 264      Defined Event System Support
 265  </li>
 266
 267  <li>
 268      Animation support.
 269  </li>
 270 </ul>
 271
 272
 273 </div>
 274 </div>
 275
 276
 277
 278
 279     <div id="footer">
 280                 <div class="block">
 281                         <h3>Syndication Feeds:</h3>
 282                         <p>
 283                                 <ul class="tiny">
 284                                         <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>
 285                                         <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>
 286                                         <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>
 287                                         <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>
 288                                 </ul>
 289                         </p>
 290                 </div>
 291                 <div class="block">
 292                         <h3>About this site:</h3>
 293                         <p>Content on this site is licensed under <a href="http://creativecommons.org/licenses/by/2.5/">CC By Attribution</a> unless otherwise specified.
 294                         Copyright (c) 2002-2006, <a href="http://al.tse.id.au/">Alastair Tse</a>.</p>
 295                         <p>For more information, see <a href="http://al.tse.id.au/">al.tse.id.au</a>.</p>
 296                         <p><script type="text/javascript" src="http://technorati.com/embed/itwctkzez.js"></script></p>
 297                 </div>
 298                 <div class="block">
 299                         <h3>Is Made Possible By:</h3>
 300                         <p>
 301                         <dl>
 302                                 <dt><a href="http://ecto.kung-foo.tv/" class="clean">ecto</a>. </dt>
 303                                 <dd>Blogging client for Mac</dd>
 304                                 <dt><a href="http://djangoproject.com/" class="clean">Django</a>. </dt>
 305                                 <dd>Python Web Framework</dd>
 306                                 <dt><a href="http://www.lighttpd.net/" class="clean">lighttpd</a>. </dt>
 307                                 <dd>Really Fast Web Server</dd>
 308                                 <dt><a href="http://www.saddi.com/software/flup/" class="clean">flup</a>. </dt>
 309                                 <dd>FastCGI for Python</dd>
 310                         </dl>
 311                         </p>
 312                 </div>
 313         <div class="block">
 314             <h3>Search My Sites:</h3>
 315             <p>
 316            <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>
 317                </p>
 318           </div>
 319
 320
 321                 <div class="clear">&nbsp;</div>
 322
 323     </div>
 324
 325
 326
 327    <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
 328    <script type="text/javascript">
 329    _uacct = "UA-58117-1";
 330    urchinTracker();
 331    </script>
 332
 333 </body>
 334 </html>