Starte implementing bar style (showing top surface already)

josdejong · josdejong · commit 587fc5e5a8d3 · 2014-05-12T11:21:23.000+02:00
diff --git a/js/src/graph3d/examples/example14_bar.html b/js/src/graph3d/examples/example14_bar.html
@@ -1,7 +1,7 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
-    <title>Graph 3D bar chart demo</title>
+    <title>Graph 3D bar style</title>
 
     <style>
         body {font: 10pt arial;}
@@ -47,10 +47,7 @@
                 width:  "600px",
                 height: "600px",
                 style: "bar",
-                xMin: -1,
-                xMax: 11,
-                yMin: -1,
-                yMax: 11,
+                barWidth: 1,
                 showPerspective: true,
                 showGrid: true,
                 showShadow: false,
diff --git a/js/src/graph3d/examples/example15_dot-line.html b/js/src/graph3d/examples/example15_dot-line.html
@@ -0,0 +1,75 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+    <title>Graph 3D dot-line style</title>
+
+    <style>
+        body {font: 10pt arial;}
+    </style>
+
+    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
+    <script type="text/javascript" src="../graph3d.js"></script>
+
+    <script type="text/javascript">
+        var data = null;
+        var graph = null;
+
+        google.load("visualization", "1");
+
+        // Set callback to run when API is loaded
+        google.setOnLoadCallback(drawVisualization);
+
+        function custom(x, y) {
+            return (Math.sin(x/Math.PI) * Math.cos(y/Math.PI) * 50 + 50);
+        }
+
+        // Called when the Visualization API is loaded.
+        function drawVisualization() {
+            // Create and populate a data table.
+            data = new google.visualization.DataTable();
+            data.addColumn('number', 'x');
+            data.addColumn('number', 'y');
+            data.addColumn('number', 'z');
+
+            // create some nice looking data with sin/cos
+            var steps = 20;  // 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 value = custom(x,y);
+                    data.addRow([x, y, value]);
+                }
+            }
+
+            // specify options
+            var options = {
+                width:  "600px",
+                height: "600px",
+                style: "dot-line",
+                xMin: -1,
+                xMax: 11,
+                yMin: -1,
+                yMax: 11,
+                showPerspective: true,
+                showGrid: true,
+                showShadow: false,
+                keepAspectRatio: true,
+                verticalRatio: 0.5
+            };
+
+            // Instantiate our graph object.
+            graph = new links.Graph3d(document.getElementById('mygraph'));
+
+            // Draw our graph with the created data and options
+            graph.draw(data, options);
+        }
+    </script>
+</head>
+
+<body>
+<div id="mygraph"></div>
+
+<div id="info"></div>
+</body>
+</html>
diff --git a/js/src/graph3d/examples/index.html b/js/src/graph3d/examples/index.html
@@ -21,6 +21,7 @@ <h1>Examples</h1>
     <p><a href="example12_datastream.html">example12_datastream.html</a></p>
     <p><a href="example13_mobile.html">example13_mobile.html</a></p>
     <p><a href="example14_bar.html">example14_bar.html</a></p>
+    <p><a href="example15_dot-line.html">example15_dot-line.html</a></p>
 
 </div>
 </body>
diff --git a/js/src/graph3d/graph3d.js b/js/src/graph3d/graph3d.js
