plotkit_v091/doc/PlotKit.Base.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.Base | 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 api">
  50
  51 <p> <a href="PlotKit.html">PlotKit Home</a> | <a href="PlotKit.Layout.html">&gt;&gt;</a>
  52 </p>
  53
  54 <h1> PlotKit Base</h1>
  55 <p>PlotKit Base contains a number of simple functions that are needed for the rest of the PlotKit libraries.
  56 </p>
  57
  58 <h2> PlotKit.Base Functions</h2>
  59 <ul>
  60  <li>
  61       <code>collapse()</code>
  62  </li>
  63 </ul>
  64 <p>   Given an array, it will collapse all the values from the passed array into one big array.
  65 </p>
  66 <p> <code>[[1,2], [3,4], [5,6]] --&gt; [1, 2, 3, 4, 5, 6]</code>
  67 </p>
  68 <ul>
  69  <li>
  70       <code>findPosX(element)</code>
  71  </li>
  72 </ul>
  73 <p>  Returns the X value of the element relative to the document in a browser independent way.
  74 </p>
  75 <ul>
  76  <li>
  77       <code>findPosY(element)</code>
  78  </li>
  79 </ul>
  80 <p>  Returns the Y value of the element relative to the document in a browser independent way.
  81 </p>
  82 <ul>
  83  <li>
  84       <code>palette(baseColor, fromLevel = -0.2, toLevel = 0.2, increment = 0.1)</code>
  85  </li>
  86 </ul>
  87 <p>  Takes in a base colour and generates a palette of colours based on the intensive levels.
  88 </p>
  89 <ul>
  90  <li>
  91       <code>roundInterval(value, precision)</code>
  92  </li>
  93 </ul>
  94 <p>  Rounds a number to a specified precision. <strong>TODO: make more robust</strong>
  95 </p>
  96 <ul>
  97  <li>
  98       <code>uniq(array)</code>
  99  </li>
 100 </ul>
 101 <p>  Acts like the UNIX uniq, takes a sorted array and returns a new array that only contains uniq elements.
 102 </p>
 103 <ul>
 104  <li>
 105       <code>isFuncLike(obj)</code> (PlotKit 0.9+)
 106  </li>
 107 </ul>
 108 <p>  Returns true if it is of type <code>function</code>.
 109 </p>
 110 <ul>
 111  <li>
 112       <code>usingPrototype()</code>  (PlotKit 0.9+)
 113  </li>
 114 </ul>
 115 <p>  Checks whether the javascript runtime is polluted by prototype.js
 116 </p>
 117 <ul>
 118  <li>
 119       <code>items(lst)</code>  (PlotKit 0.9+)
 120  </li>
 121 </ul>
 122 <p>  A version of <code>MochiKit.Base.items()</code> that is aware of prototype.js
 123 </p>
 124 <ul>
 125  <li>
 126       <code>keys(lst)</code>  (PlotKit 0.9+)
 127  </li>
 128 </ul>
 129 <p>  A version of <code>MochiKit.Base.keys()</code> that is aware of prototype.js
 130 </p>
 131 <ul>
 132  <li>
 133       <code>map(fn, lst)</code>  (PlotKit 0.9+)
 134  </li>
 135 </ul>
 136 <p>  A version of <code>MochiKit.Base.map()</code> that is aware of prototype.js
 137 </p>
 138
 139 <h1> Preset Styles</h1>
 140
 141 <h2> Color Schemes</h2>
 142 <p>There are some colour schemes, which are an array of
 143    MochiKit.Color.Colors.
 144 </p>
 145 <ul>
 146  <li>
 147       <code>colorScheme()</code>
 148  </li>
 149 </ul>
 150 <p>A default colour scheme that consists of red, orange, yellow, green, cyan, blue, purple and magenta.
 151 </p>
 152 <ul>
 153  <li>
 154       <code>baseDarkPrimaryColors()</code>
 155  </li>
 156 </ul>
 157 <p>A set of five dark colours.
 158 </p>
 159 <ul>
 160  <li>
 161       <code>basePrimaryColors()</code>
 162  </li>
 163 </ul>
 164 <p>A set of five bright primary colours.
 165 </p>
 166 <ul>
 167  <li>
 168       <code>baseBlueColors()</code>
 169  </li>
 170 </ul>
 171 <p>Three colour set that have a nice professional blue hue.
 172 </p>
 173
 174 <h2> Office Style</h2>
 175 <p>These are base styles that were inspired by charts in Office 12. The
 176    color schemes are fairly similar to those found in screenshots of
 177    charts available online.
 178 </p>
 179 <ul>
 180  <li>
 181       <code>officeBaseStyle</code>
 182  </li>
 183 </ul>
 184 <p>  Contains the basic style independent of colours.
 185 </p>
 186 <ul>
 187  <li>
 188       <code>officeBlue()</code>
 189  </li>
 190 </ul>
 191 <p>  Blue colors: <img src="blue.png" alt="bluecolors"/>
 192 </p>
 193 <ul>
 194  <li>
 195       <code>officeRed()</code>
 196  </li>
 197 </ul>
 198 <p>  Red colors: <img src="red.png" alt="redcolors"/>
 199 </p>
 200 <ul>
 201  <li>
 202       <code>officeGreen()</code>
 203  </li>
 204 </ul>
 205 <p>  Green colors: <img src="green.png" alt="greencolors"/>
 206 </p>
 207 <ul>
 208  <li>
 209       <code>officePurple()</code>
 210  </li>
 211 </ul>
 212 <p>  Purple colors: <img src="purple.png" alt="purplecolors"/>
 213 </p>
 214 <ul>
 215  <li>
 216       <code>officeCyan()</code>
 217  </li>
 218 </ul>
 219 <p>  Cyan colors: <img src="cyan.png" alt="cyancolors"/>
 220 </p>
 221 <ul>
 222  <li>
 223       <code>officeOrange()</code>
 224  </li>
 225 </ul>
 226 <p>  Orange colors: <img src="orange.png" alt="orangecolors"/>
 227 </p>
 228 <ul>
 229  <li>
 230       <code>officeBlack()</code>
 231  </li>
 232 </ul>
 233 <p>  Black colors: <img src="black.png" alt="blackcolors"/>
 234 </p>
 235
 236 <h2> Usage</h2>
 237 <p>  <code>var layout = PlotKit.Layout(&quot;bar&quot;, officeOrange());</code>
 238 </p>
 239
 240
 241 </div>
 242 </div>
 243
 244
 245
 246
 247     <div id="footer">
 248                 <div class="block">
 249                         <h3>Syndication Feeds:</h3>
 250                         <p>
 251                                 <ul class="tiny">
 252                                         <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>
 253                                         <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>
 254                                         <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>
 255                                         <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>
 256                                 </ul>
 257                         </p>
 258                 </div>
 259                 <div class="block">
 260                         <h3>About this site:</h3>
 261                         <p>Content on this site is licensed under <a href="http://creativecommons.org/licenses/by/2.5/">CC By Attribution</a> unless otherwise specified.
 262                         Copyright (c) 2002-2006, <a href="http://al.tse.id.au/">Alastair Tse</a>.</p>
 263                         <p>For more information, see <a href="http://al.tse.id.au/">al.tse.id.au</a>.</p>
 264                         <p><script type="text/javascript" src="http://technorati.com/embed/itwctkzez.js"></script></p>
 265                 </div>
 266                 <div class="block">
 267                         <h3>Is Made Possible By:</h3>
 268                         <p>
 269                         <dl>
 270                                 <dt><a href="http://ecto.kung-foo.tv/" class="clean">ecto</a>. </dt>
 271                                 <dd>Blogging client for Mac</dd>
 272                                 <dt><a href="http://djangoproject.com/" class="clean">Django</a>. </dt>
 273                                 <dd>Python Web Framework</dd>
 274                                 <dt><a href="http://www.lighttpd.net/" class="clean">lighttpd</a>. </dt>
 275                                 <dd>Really Fast Web Server</dd>
 276                                 <dt><a href="http://www.saddi.com/software/flup/" class="clean">flup</a>. </dt>
 277                                 <dd>FastCGI for Python</dd>
 278                         </dl>
 279                         </p>
 280                 </div>
 281         <div class="block">
 282             <h3>Search My Sites:</h3>
 283             <p>
 284            <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>
 285                </p>
 286           </div>
 287
 288
 289                 <div class="clear">&nbsp;</div>
 290
 291     </div>
 292
 293
 294
 295    <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
 296    <script type="text/javascript">
 297    _uacct = "UA-58117-1";
 298    urchinTracker();
 299    </script>
 300
 301 </body>
 302 </html>