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" >
5 <title>PlotKit.Canvas | 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">
14 <script defer
type=
"text/javascript" src=
"http://media.liquidx.net/js/pngfix.js"></script>
17 <link href=
"doc.css" media=
"screen" rel=
"stylesheet" type=
"text/css" />
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>
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>
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>
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>
49 <div class=
"page doc api">
51 <p> <a href=
"PlotKit.html">PlotKit Home
</a> |
<a href=
"PlotKit.Renderer.html"><<</a> |
<a href=
"PlotKit.SVG.html">>></a>
54 <h1> PlotKit Canvas
</h1>
55 <p>This contains the CanvasRenderer, the default renderer and most well supported one used in PlotKit.
57 <p>It supports Safari
2, Firefox
1.5, Opera
9 and IE
6. Note that for IE6
58 support, you will need iecanvas.htc which is included with PlotKit.
60 <p>Please see the
<a href=
"SVGCanvasCompat.html">Canvas/SVG Browser Support Status
</a> for bugs
61 with the Canvas implementation on different browsers.
64 <h2> PlotKit Canvas Extra Options
</h2>
65 <p>In addition to the options outlined in
<a href=
"PlotKit.Renderer.html">PlotKit.Renderer
</a>, here are additional options that the CanvasRenderer supports.
69 <tr><td>Option name
</td><td>Description
</td><td>Type
</td><td>Default
</td></tr>
74 <td>Path relative to the HTML document of the iecanvas.htc file.
</td>
82 <h2> PlotKit Canvas Example
</h2>
83 <pre><code>var options = {
84 "drawsBackground
": true,
85 "drawYAxis
": false,
86 "IECanvasHTC
":
"contrib/iecanvas.htc
"
89 var layout = new Layout(
"bar
", {});
90 layout.addDataset(
"squares
", [[
0,
0], [
1,
1], [
2,
4], [
3,
9], [
4,
16]]);
92 var renderer = new CanvasRenderer($('canvas'), layout, options);
95 <h2> PlotKit Canvas Events/Signals
</h2>
96 <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
99 <h2> PlotKit Canvas Notes
</h2>
102 <p>IE Support is done thanks to webfx's great iecanvas.htc which emulates
103 part of the WHATWG canvas specification. Note that alpha values and
104 clear() does not work in IE.
106 <p>Remember that iecanvas.htc
<strong>must
</strong> reside on the same domain as the
119 <h3>Syndication Feeds:
</h3>
122 <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>
123 <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>
124 <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>
125 <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>
130 <h3>About this site:
</h3>
131 <p>Content on this site is licensed under
<a href=
"http://creativecommons.org/licenses/by/2.5/">CC By Attribution
</a> unless otherwise specified.
132 Copyright (c)
2002-
2006,
<a href=
"http://al.tse.id.au/">Alastair Tse
</a>.
</p>
133 <p>For more information, see
<a href=
"http://al.tse.id.au/">al.tse.id.au
</a>.
</p>
134 <p><script type=
"text/javascript" src=
"http://technorati.com/embed/itwctkzez.js"></script></p>
137 <h3>Is Made Possible By:
</h3>
140 <dt><a href=
"http://ecto.kung-foo.tv/" class=
"clean">ecto
</a>.
</dt>
141 <dd>Blogging client for Mac
</dd>
142 <dt><a href=
"http://djangoproject.com/" class=
"clean">Django
</a>.
</dt>
143 <dd>Python Web Framework
</dd>
144 <dt><a href=
"http://www.lighttpd.net/" class=
"clean">lighttpd
</a>.
</dt>
145 <dd>Really Fast Web Server
</dd>
146 <dt><a href=
"http://www.saddi.com/software/flup/" class=
"clean">flup
</a>.
</dt>
147 <dd>FastCGI for Python
</dd>
152 <h3>Search My Sites:
</h3>
154 <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>
159 <div class=
"clear"> </div>
165 <script src=
"http://www.google-analytics.com/urchin.js" type=
"text/javascript"></script>
166 <script type=
"text/javascript">
167 _uacct =
"UA-58117-1";