TracBrowser: dynamic.html

File dynamic.html, 5.3 kB (added by anonymous, 2 years ago)
Line 
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>