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 |
|
15 | function drawVisualization() {
|
16 |
|
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 |
|
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>
|