static/tm.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   3 <head>
   4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   5 <title>Treemap - TreeMap with on-demand nodes</title>
   6
   7 <!-- CSS Files -->
   8 <link type="text/css" href="css/base.css" rel="stylesheet" />
   9 <link type="text/css" href="css/Treemap.css" rel="stylesheet" />
  10
  11 <!--[if IE]><script language="javascript" type="text/javascript" src="excanvas.js"></script><![endif]-->
  12
  13 <!-- JIT Library File -->
  14 <script language="javascript" type="text/javascript" src="jit.js"></script>
  15
  16 <!-- Example File -->
  17 <script language="javascript" type="text/javascript" src="tm.js"></script>
  18 </head>
  19
  20 <body onload="init();">
  21 <div id="container">
  22
  23 <div id="left-container">
  24
  25
  26
  27 <div class="text">
  28 <h4>
  29 TreeMap with on-demand nodes
  30 </h4>
  31
  32             This example shows how you can use the <b>request</b> controller method to create a TreeMap with on demand nodes<br /><br />
  33             This example makes use of native Canvas text and shadows, but can be easily adapted to use HTML like the other examples.<br /><br />
  34             There should be only one level shown at a time.<br /><br />
  35             Clicking on a band should show a new TreeMap with its most listened albums.<br /><br />
  36
  37 </div>
  38
  39 <div id="id-list">
  40 <table>
  41     <tr>
  42         <td>
  43             <label for="r-sq">Squarified </label>
  44         </td>
  45         <td>
  46             <input type="radio" id="r-sq" name="layout" checked="checked" value="left" />
  47         </td>
  48     </tr>
  49     <tr>
  50          <td>
  51             <label for="r-st">Strip </label>
  52          </td>
  53          <td>
  54             <input type="radio" id="r-st" name="layout" value="top" />
  55          </td>
  56     <tr>
  57          <td>
  58             <label for="r-sd">SliceAndDice </label>
  59           </td>
  60           <td>
  61             <input type="radio" id="r-sd" name="layout" value="bottom" />
  62           </td>
  63     </tr>
  64 </table>
  65 </div>
  66
  67 <a id="back" href="#" class="theme button white">Go to Parent</a>
  68
  69
  70 <div style="text-align:center;"><a href="example2.js">See the Example Code</a></div>
  71 </div>
  72
  73 <div id="center-container">
  74     <div id="infovis"></div>
  75 </div>
  76
  77 <div id="right-container">
  78
  79 <div id="inner-details"></div>
  80
  81 </div>
  82
  83 <div id="log"></div>
  84 </div>
  85 </body>
  86 </html>