plotkit_v091/tests/dynamic.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   3 <head>
   4    <title>PlotKit : Basic Unit Tests</title>
   5    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   6    <script src="/js/mochi/MochiKit.js" type="text/javascript"></script>
   7    <script src="/js/plotkit-svn/excanvas.js" type="text/javascript"></script>
   8    <script src="/js/plotkit-svn/PlotKit_Packed.js" type="text/javascript"></script>
   9    <style type="text/css">
  10
  11    body {
  12        font-family: Lucida Grande, Verdana, Sans;
  13        font-size: small;
  14    }
  15
  16     table#datatable td {
  17         padding: 2px;
  18     }
  19
  20     table#datatable thead td {
  21         border-top: 1px solid #e0e0e0;
  22         background-color: #d0d0d0;
  23         border-bottom: 1px solid #c0c0c0;
  24         padding-left: 10px;
  25         padding-right: 10px;
  26     }
  27
  28     table#datatable tbody input {
  29         border: 1px solid #eee;
  30         padding: 2px;
  31         width: 90px;
  32     }
  33
  34    </style>
  35
  36    <script type="text/javascript">
  37
  38    var dataTable = null;
  39    var layout = null;
  40    var renderer = null;
  41    var options = null;
  42
  43    function initDynamicTable() {
  44        dataTable = $('datatable');
  45        options = PlotKit.Base.officeBlue();
  46        layout = new Layout("line", options);
  47        renderer = new SweetCanvasRenderer($('canvasTest'), layout, options);
  48    }
  49
  50    function newRow() {
  51        var tbody = dataTable.tBodies[0];
  52        var blankRow = TR({}, [
  53                 TD({}, INPUT({"class":"xvalue", "size":"6", "type":"text", "value":"0"})),
  54                 TD({}, INPUT({"class":"yvalue", "size":"6", "type":"text", "value":"0"}))]);
  55         tbody.appendChild(blankRow);
  56    }
  57
  58    function chartReload() {
  59         var chartStyleSelected = document.forms["options"].chartStyle.selectedIndex;
  60         var chartStyle = document.forms["options"].chartStyle[chartStyleSelected].value;
  61
  62         var colorSchemeSelected = document.forms["options"].colorScheme.selectedIndex;
  63         var colorScheme = document.forms["options"].colorScheme[colorSchemeSelected].value;
  64         // grab values
  65         var getValue = function(row) {
  66            var xElem = MochiKit.DOM.getElementsByTagAndClassName("input", "xvalue", row)[0];
  67            var yElem = MochiKit.DOM.getElementsByTagAndClassName("input", "yvalue", row)[0];
  68            var xVal = xElem.value;
  69            var yVal = yElem.value;
  70
  71            if (xVal.length > 0) {
  72                xVal = parseFloat(xVal);
  73            }
  74            else {
  75                xVal = 0;
  76            }
  77
  78            if (yVal.length > 0) {
  79                yVal = parseFloat(yVal);
  80            }
  81            else {
  82                yVal = 0;
  83            }
  84            return [xVal, yVal];
  85         }
  86
  87         var values = MochiKit.Base.map(getValue, dataTable.tBodies[0].rows);
  88
  89         // setup layout options
  90         var themeName = "office" + colorScheme;
  91         var theme = PlotKit.Base[themeName]();
  92         MochiKit.Base.update(options, theme);
  93
  94         layout.style = chartStyle;
  95         MochiKit.Base.update(layout.options, options);
  96         MochiKit.Base.update(renderer.options, options);
  97
  98         layout.addDataset("data", values);
  99
 100         // update
 101         layout.evaluate();
 102         renderer.clear();
 103         renderer.render();
 104
 105    }
 106
 107    addLoadEvent(initDynamicTable);
 108
 109    </script>
 110 </head>
 111
 112 <body>
 113     <div id="body">
 114     <h2>PlotKit Dynamic Test</h2>
 115
 116     <div style="padding: 20px;">
 117         <form name="options">
 118             Chart Style:
 119             <select id="chartStyle" name="chartStyle" onChange="chartReload();">
 120                 <option value="line">Line Chart</option>
 121                 <option value="bar">Bar Chart</option>
 122                 <option value="pie">Pie Chart</option>
 123             </select>
 124
 125             Colors:
 126             <select id="colorScheme" name="colorScheme" onChange="chartReload();">
 127                 <option value="Blue">Blue</option>
 128                 <option value="Red">Red</option>
 129                 <option value="Green">Green</option>
 130                 <option value="Purple">Purple</option>
 131                 <option value="Cyan">Cyan</option>
 132                 <option value="Orange">Orange</option>
 133             </select>
 134
 135
 136         </form>
 137     </div>
 138
 139     <div style="float: left; width: 250px;">
 140         <table id="datatable" cellspacing="0" cellpadding="0">
 141             <thead>
 142                 <tr><td width="100">X</td><td width="100">Y</td></tr>
 143             </thead>
 144             <tbody>
 145                 <tr>
 146                     <td><input class="xvalue" size="6" type="text" value="0"/></td>
 147                     <td><input class="yvalue" size="6" type="text" value="0"/></td>
 148                 </tr>
 149             </tbody>
 150         </table>
 151         <div><a href="#" onclick="newRow(); return false;">add new row</a> <a href="#" onclick="chartReload(); return false;">redraw</a></div>
 152     </div>
 153     <div style="float: left; width: 400px;">
 154         <div><canvas id="canvasTest" width="400" height="400" style="border: 1px solid #eee;"></canvas></div>
 155     </div>
 156
 157     <div style="clear: both;">&nbsp;</div>
 158
 159     <div class="footer"><a href="http://www.liquidx.net/plotkit/">PlotKit</a></div>
 160 </div>
 161 </body></html>