UNPKG

7.47 kBHTMLView Raw
1<!doctype html>
2<html>
3
4<head>
5 <title>Graph 3D - Playground</title>
6
7 <script type="text/javascript" src="../../../dist/vis-graph3d.min.js"></script>
8
9 <script type="text/javascript" src="playground.js"></script>
10 <script type="text/javascript" src="csv2array.js"></script>
11 <link rel='stylesheet' href='playground.css' type='text/css'>
12
13 <script type="text/javascript">
14 // Called when the Visualization API is loaded.
15 function drawVisualization() {
16 // TODO
17 }
18 </script>
19
20</head>
21
22<body onload="load();">
23
24<h1>Graph 3D - Playground</h1>
25
26<table style="width:100%;">
27<col width="50%">
28<col width="50%">
29
30<tr>
31 <td>
32 <h2>Data</h2>
33 <p>
34 Graph 3D expects a data table with first three to five columns:
35 colums <code>x</code>, <code>y</code>, <code>z</code> (optional),
36 <code>style</code>, <code>filter</code> (optional).
37 </p>
38
39 <table>
40 <tr>
41 <td style="white-space: nowrap">
42 <input type="radio" name="datatype" id="datatypeCsv" onclick="selectDataType();" checked value="csv">Csv
43 </td>
44 <td>
45 <div id="csv">
46 <textarea id="csvTextarea"></textarea>
47 <p>
48 <a href="javascript: loadCsvExample();" title="Load an example">Simple example</a>
49 <a href="javascript: loadCsvLineExample();" title="Load an example">Line example</a>
50 <a href="javascript: loadCsvAnimationExample();" title="Load an example">Animation example</a>
51 <a href="javascript: loadCsvMovingDotsExample();" title="Load an example">Moving dots example</a>
52 <a href="javascript: loadCsvColoredDotsExample();" title="Load an example">Colored dots example</a>
53 <a href="javascript: loadCsvSizedDotsExample();" title="Load an example">Sized dots example</a>
54 </p>
55 </div>
56 </td>
57 </tr>
58 <!-- TODO: add JSON examples -->
59 </table>
60
61 <br>
62 </td>
63 <td rowspan=2>
64 <h2>Graph</h2>
65 <p>
66 <input type="button" value="Draw graph" onclick="draw();" id="draw">
67 </p>
68
69 <div id="graph"></div>
70 </td>
71</tr>
72<tr>
73 <td>
74 <h2>Options</h2>
75
76 <table>
77 <tr>
78 <th>Option</th>
79 <th>Value</th>
80 </tr>
81
82 <tr>
83 <td>width</td>
84 <td><input type="text" id="width" value="100%" /> <span class="info">for example "500px" or "100%"</span></td>
85 </tr>
86 <tr>
87 <td>height</td>
88 <td><input type="text" id="height" value="100%" /> <span class="info">for example "500px" or "100%"</span></td>
89 </tr>
90 <tr>
91 <td>style</td>
92 <td>
93 <select id="style">
94 <option value="bar" >bar
95 <option value="bar-color" >bar-color
96 <option value="bar-size" >bar-size
97 <option value="dot" >dot
98 <option value="dot-color" >dot-color
99 <option value="dot-size" >dot-size
100 <option value="dot-line" >dot-line
101 <option value="line" >line
102 <option value="grid" >grid
103 <option value="surface" selected>surface
104 </select>
105 </tr>
106
107 <tr>
108 <td>showAnimationControls</td>
109 <td><input type="checkbox" id="showAnimationControls" checked /></td>
110 </tr>
111 <tr>
112 <td>showGrid</td>
113 <td><input type="checkbox" id="showGrid" checked /></td>
114 </tr>
115 <tr>
116 <td>showXAxis</td>
117 <td><input type="checkbox" id="showXAxis" checked /></td>
118 </tr>
119 <tr>
120 <td>showYAxis</td>
121 <td><input type="checkbox" id="showYAxis" checked /></td>
122 </tr>
123 <tr>
124 <td>showZAxis</td>
125 <td><input type="checkbox" id="showZAxis" checked /></td>
126 </tr>
127
128 <tr>
129 <td>showPerspective</td>
130 <td><input type="checkbox" id="showPerspective" checked /></td>
131 </tr>
132 <tr>
133 <td>showLegend</td>
134 <td><input type="checkbox" id="showLegend" checked /></td>
135 </tr>
136 <tr>
137 <td>showShadow</td>
138 <td><input type="checkbox" id="showShadow" /></td>
139 </tr>
140
141 <tr>
142 <td>keepAspectRatio</td>
143 <td><input type="checkbox" id="keepAspectRatio" checked /></td>
144 </tr>
145 <tr>
146 <td>verticalRatio</td>
147 <td><input type="text" id="verticalRatio" value="0.5" /> <span class="info">a value between 0.1 and 1.0</span></td>
148 </tr>
149
150 <tr>
151 <td>animationInterval</td>
152 <td><input type="text" id="animationInterval" value="1000" /> <span class="info">in milliseconds</span></td>
153 </tr>
154 <tr>
155 <td>animationPreload</td>
156 <td><input type="checkbox" id="animationPreload" /></td>
157 </tr>
158 <tr>
159 <td>animationAutoStart</td>
160 <td><input type="checkbox" id="animationAutoStart" /></td>
161 </tr>
162
163 <tr><td>xCenter</td><td><input type="text" id="xCenter" value="55%" /></td></tr>
164 <tr><td>yCenter</td><td><input type="text" id="yCenter" value="45%" /></td></tr>
165
166 <tr><td>xMin</td><td><input type="text" id="xMin" /></td></tr>
167 <tr><td>xMax</td><td><input type="text" id="xMax" /></td></tr>
168 <tr><td>xStep</td><td><input type="text" id="xStep" /></td></tr>
169
170 <tr><td>yMin</td><td><input type="text" id="yMin" /></td></tr>
171 <tr><td>yMax</td><td><input type="text" id="yMax" /></td></tr>
172 <tr><td>yStep</td><td><input type="text" id="yStep" /></td></tr>
173
174 <tr><td>zMin</td><td><input type="text" id="zMin" /></td></tr>
175 <tr><td>zMax</td><td><input type="text" id="zMax" /></td></tr>
176 <tr><td>zStep</td><td><input type="text" id="zStep" /></td></tr>
177
178 <tr><td>valueMin</td><td><input type="text" id="valueMin" /></td></tr>
179 <tr><td>valueMax</td><td><input type="text" id="valueMax" /></td></tr>
180
181 <tr><td>xBarWidth</td><td><input type="text" id="xBarWidth" /></td></tr>
182 <tr><td>yBarWidth</td><td><input type="text" id="yBarWidth" /></td></tr>
183
184 <tr><td>xLabel</td><td><input type="text" id="xLabel" value="x"/></td></tr>
185 <tr><td>yLabel</td><td><input type="text" id="yLabel" value="y"/></td></tr>
186 <tr><td>zLabel</td><td><input type="text" id="zLabel" value="z"/></td></tr>
187 <tr><td>filterLabel</td><td><input type="text" id="filterLabel" value="time"/></td></tr>
188 <tr><td>legendLabel</td><td><input type="text" id="legendLabel" value="value"/></td></tr>
189
190 </table>
191
192 </td>
193</tr>
194</table>
195
196</body>