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
Unified 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> | |||||