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">
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">
12 font-family: Lucida Grande, Verdana, Sans;
20 table#datatable thead td {
21 border-top:
1px solid #e0e0e0;
22 background-color: #d0d0d0;
23 border-bottom:
1px solid #c0c0c0;
28 table#datatable tbody input {
29 border:
1px solid #eee;
36 <script type=
"text/javascript">
43 function initDynamicTable() {
44 dataTable = $('datatable');
45 options = PlotKit.Base.officeBlue();
46 layout = new Layout(
"line", options);
47 renderer = new SweetCanvasRenderer($('canvasTest'), layout, options);
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);
58 function chartReload() {
59 var chartStyleSelected = document.forms[
"options"].chartStyle.selectedIndex;
60 var chartStyle = document.forms[
"options"].chartStyle[chartStyleSelected].value;
62 var colorSchemeSelected = document.forms[
"options"].colorScheme.selectedIndex;
63 var colorScheme = document.forms[
"options"].colorScheme[colorSchemeSelected].value;
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;
71 if (xVal.length
> 0) {
72 xVal = parseFloat(xVal);
78 if (yVal.length
> 0) {
79 yVal = parseFloat(yVal);
87 var values = MochiKit.Base.map(getValue, dataTable.tBodies[
0].rows);
89 // setup layout options
90 var themeName =
"office" + colorScheme;
91 var theme = PlotKit.Base[themeName]();
92 MochiKit.Base.update(options, theme);
94 layout.style = chartStyle;
95 MochiKit.Base.update(layout.options, options);
96 MochiKit.Base.update(renderer.options, options);
98 layout.addDataset(
"data", values);
107 addLoadEvent(initDynamicTable);
114 <h2>PlotKit Dynamic Test
</h2>
116 <div style=
"padding: 20px;">
117 <form name=
"options">
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>
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>
139 <div style=
"float: left; width: 250px;">
140 <table id=
"datatable" cellspacing=
"0" cellpadding=
"0">
142 <tr><td width=
"100">X
</td><td width=
"100">Y
</td></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>
151 <div><a href=
"#" onclick=
"newRow(); return false;">add new row
</a> <a href=
"#" onclick=
"chartReload(); return false;">redraw
</a></div>
153 <div style=
"float: left; width: 400px;">
154 <div><canvas id=
"canvasTest" width=
"400" height=
"400" style=
"border: 1px solid #eee;"></canvas></div>
157 <div style=
"clear: both;"> </div>
159 <div class=
"footer"><a href=
"http://www.liquidx.net/plotkit/">PlotKit
</a></div>