Browse Source
Merge pull request #340 from fabriziofortino/develop
graph3d: added support for custom axis ticks labelsv3_develop
Jos de Jong
10 years ago
3 changed files with 121 additions and 2 deletions
Split View
Diff Options
-
+111 -0examples/graph3d/example12_ticks.html
-
+1 -0examples/graph3d/index.html
-
+9 -2lib/graph3d/Graph3d.js
+ 111
- 0
examples/graph3d/example12_ticks.html
View File
| @ -0,0 +1,111 @@ | |||
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> | |||
| <html> | |||
| <head> | |||
| <title>Graph 3D Axis Ticks</title> | |||
| <style> | |||
| body {font: 10pt arial;} | |||
| </style> | |||
| <script type="text/javascript" src="../../dist/vis.js"></script> | |||
| <script type="text/javascript"> | |||
| var data = null; | |||
| var graph = null; | |||
| function custom(x, y) { | |||
| return (-Math.sin(x/Math.PI) * Math.cos(y/Math.PI) * 10 + 10); | |||
| } | |||
| // Called when the Visualization API is loaded. | |||
| function drawVisualization() { | |||
| var style = document.getElementById('style').value; | |||
| var withValue = ['bar-color', 'bar-size', 'dot-size', 'dot-color'].indexOf(style) != -1; | |||
| // Create and populate a data table. | |||
| data = new vis.DataSet(); | |||
| // create some nice looking data with sin/cos | |||
| var steps = 5; // number of datapoints will be steps*steps | |||
| var axisMax = 10; | |||
| var axisStep = axisMax / steps; | |||
| for (var x = 0; x <= axisMax; x+=axisStep) { | |||
| for (var y = 0; y <= axisMax; y+=axisStep) { | |||
| var z = custom(x,y); | |||
| if (withValue) { | |||
| var value = (y - x); | |||
| data.add({x:x, y:y, z: z, style:value}); | |||
| } | |||
| else { | |||
| data.add({x:x, y:y, z: z}); | |||
| } | |||
| } | |||
| } | |||
| // specify options | |||
| var options = { | |||
| width: '600px', | |||
| height: '600px', | |||
| style: style, | |||
| showPerspective: true, | |||
| showGrid: true, | |||
| showShadow: false, | |||
| // Option tooltip can be true, false, or a function returning a string with HTML contents | |||
| //tooltip: true, | |||
| tooltip: function (point) { | |||
| // parameter point contains properties x, y, z | |||
| return 'value: <b>' + point.z + '</b>'; | |||
| }, | |||
| xValueLabel: function(value) { | |||
| return vis.moment().add(value, 'days').format('DD MMM'); | |||
| }, | |||
| yValueLabel: function(value) { | |||
| return value * 10 + '%'; | |||
| }, | |||
| keepAspectRatio: true, | |||
| verticalRatio: 0.5 | |||
| }; | |||
| var camera = graph ? graph.getCameraPosition() : null; | |||
| // create our graph | |||
| var container = document.getElementById('mygraph'); | |||
| graph = new vis.Graph3d(container, data, options); | |||
| if (camera) graph.setCameraPosition(camera); // restore camera position | |||
| document.getElementById('style').onchange = drawVisualization; | |||
| } | |||
| </script> | |||
| </head> | |||
| <body onload="drawVisualization()"> | |||
| <p> | |||
| <label for="style"> Style: | |||
| <select id="style"> | |||
| <option value="bar">bar</option> | |||
| <option value="bar-color">bar-color</option> | |||
| <option value="bar-size">bar-size</option> | |||
| <option value="dot">dot</option> | |||
| <option value="dot-line">dot-line</option> | |||
| <option value="dot-color">dot-color</option> | |||
| <option value="dot-size">dot-size</option> | |||
| <option value="grid">grid</option> | |||
| <option value="line">line</option> | |||
| <option value="surface">surface</option> | |||
| </select> | |||
| </label> | |||
| </p> | |||
| <div id="mygraph"></div> | |||
| <div id="info"></div> | |||
| </body> | |||
| </html> | |||