Renamed event `camerapositionchange` to `cameraPositionChange`

docs/graph3d.html

@@ -62,7 +62,7 @@
   // Called when the Visualization API is loaded.
   function drawVisualization() {
     // Create and populate a data table.
-    var data = [];
+    var data = new vis.DataSet();
     // create some nice looking data with sin/cos
     var steps = 50;  // number of datapoints will be steps*steps
     var axisMax = 314;
@@ -70,7 +70,7 @@
     for (var x = 0; x < axisMax; x+=axisStep) {
       for (var y = 0; y < axisMax; y+=axisStep) {
         var value = custom(x, y);
-        data.push({
+        data.add({
           x: x,
           y: y,
           z: value,
@@ -98,7 +98,7 @@
     graph3d.draw(data, options);
 
     // subscribe to event
-    graph3d.on("camerapositionchange", function(event) {console.log(event);});
+    graph3d.on("cameraPositionChange", function(event) {console.log(event);});
   }
   </script>
   </head>
@@ -131,8 +131,10 @@
 
 <h2 id="Data_Format">Data Format</h2>
 <p>
-  Graph3d requires a vis DataSet. JSON objects are added to this DataSet by using the <code>add()</code> function.
-  These JSON objects have 5 fields, of which 2 are optional. These are described below.
+  Graph3d can load data from an <code>Array</code>, a <code>DataSet</code> or a <code>DataView</code>.
+  JSON objects are added to this DataSet by using the <code>add()</code> function.
+  Data points must have properties <code>x</code>, <code>y</code>, and <code>z</code>,
+  and can optionally have a property <code>style</code> and <code>filter</code>.
 
 <h3>Definition</h3>
 <p>
@@ -174,7 +176,7 @@
   </tr>
   <tr>
     <td>filter</td>
-    <td>anytype</td>
+    <td>*</td>
     <td>no</td>
     <td>Filter values used for the animation.
       This column may have any type, such as a number, string, or Date.</td>
@@ -586,18 +588,18 @@ options = {
 <p>
   Graph3d fires events after the camera position has been changed.
   The event can be catched by creating a listener.
-  Here an example on how to catch a <code>camerapositionchange</code> event.
+  Here an example on how to catch a <code>cameraPositionChange</code> event.
 </p>
 
 <pre class="prettyprint lang-js">
-function oncamerapositionchange(event) {
+function onCameraPositionChange(event) {
   alert("The camera position changed to:\n" +
         "Horizontal: " + event.horizontal + "\n" +
         "Vertical: " + event.vertical + "\n" +
         "Distance: " + event.distance);
 }
 // assuming var graph3d = new vis.Graph3d(document.getElementById('mygraph'));
-graph3d.on("camerapositionchange",oncamerapositionchange);
+graph3d.on("cameraPositionChange", onCameraPositionChange);
 </pre>
 
 <p>
@@ -616,7 +618,7 @@ graph3d.on("camerapositionchange",oncamerapositionchange);
   </tr>
 
   <tr>
-    <td>camerapositionchange</td>
+    <td>cameraPositionChange</td>
     <td>The camera position changed. Fired after the user modified the camera position
       by moving (dragging) the graph, or by zooming (scrolling),
       but not after a call to <code>setCameraPosition</code> method.

examples/graph3d/example01_basis.html

@@ -20,7 +20,7 @@
     // Called when the Visualization API is loaded.
     function drawVisualization() {
       // Create and populate a data table.
-      var data = [];
+      var data = new vis.DataSet();
       // create some nice looking data with sin/cos
       var steps = 50;  // number of datapoints will be steps*steps
       var axisMax = 314;
@@ -28,7 +28,7 @@
       for (var x = 0; x < axisMax; x+=axisStep) {
         for (var y = 0; y < axisMax; y+=axisStep) {
           var value = custom(x,y);
-          data.push({x:x,y:y,z:value,style:value});
+          data.add({x:x,y:y,z:value,style:value});
         }
       }
 

examples/graph3d/example02_camera.html

@@ -19,7 +19,7 @@
     }
 
     // callback function, called when the camera position has changed
-    function oncamerapositionchange() {
+    function onCameraPositionChange() {
       // adjust the values of startDate and endDate
       var pos = graph.getCameraPosition();
       document.getElementById('horizontal').value = parseFloat(pos.horizontal.toFixed(3));
@@ -28,7 +28,7 @@
     }
 
     // set the camera position
-    function setcameraposition() {
+    function setCameraPosition() {
       var horizontal = parseFloat(document.getElementById('horizontal').value);
       var vertical = parseFloat(document.getElementById('vertical').value);
       var distance = parseFloat(document.getElementById('distance').value);
@@ -39,7 +39,7 @@
       graph.setCameraPosition(pos);
 
       // retrieve the camera position again, to get the applied values
-      oncamerapositionchange();
+      onCameraPositionChange();
     }
 
     // Called when the Visualization API is loaded.
@@ -76,7 +76,7 @@
 
       // Draw our graph with the created data and options
       graph.draw(data, options);
-      graph.on("camerapositionchange", oncamerapositionchange);
+      graph.on("cameraPositionChange", onCameraPositionChange);
       //graph.redraw();
     }
   </script>
@@ -99,7 +99,7 @@
   </tr>
   <tr>
     <td></td>
-    <td><input type="button" value="Set" onclick="setcameraposition();"></td>
+    <td><input type="button" value="Set" onclick="setCameraPosition();"></td>
   </tr>
 </table>
 

examples/graph3d/example10_styles.html

@@ -26,7 +26,7 @@
       var withValue = ['bar-color', 'bar-size', 'dot-size', 'dot-color'].indexOf(style) != -1;
 
       // Create and populate a data table.
-      var data = new vis.DataSet();
+      var data = [];
 
       // create some nice looking data with sin/cos
       var steps = 5;  // number of datapoints will be steps*steps
@@ -37,10 +37,10 @@
           var z = custom(x,y);
           if (withValue) {
             var value = (y - x);
-            data.add({x:x, y:y, z: z, style:value});
+            data.push({x:x, y:y, z: z, style:value});
           }
           else {
-            data.add({x:x, y:y, z: z});
+            data.push({x:x, y:y, z: z});
           }
         }
       }

src/graph3d/graph3d.js → src/graph3d/Graph3d.js

@@ -556,8 +556,7 @@ Graph3d.prototype.getColumnRange = function(data,column) {
 /**
  * Initialize the data from the data table. Calculate minimum and maximum values
  * and column index values
- * @param {DataSet} data   The data containing the events
- *                        for the Graph.
+ * @param {Array | DataSet | DataView} rawData   The data containing the items for the Graph.
  * @param {Number}     style   Style Number
  */
 Graph3d.prototype._dataInitialize = function (rawData, style) {
@@ -565,10 +564,17 @@ Graph3d.prototype._dataInitialize = function (rawData, style) {
   if (rawData === undefined)
     return;
 
+  if (Array.isArray(rawData)) {
+    rawData = new DataSet(rawData);
+  }
+
   var data;
-  if (rawData instanceof DataSet) {
+  if (rawData instanceof DataSet || rawData instanceof DataView) {
     data = rawData.get();
   }
+  else {
+    throw new Error('Array, DataSet, or DataView expected');
+  }
 
   if (data.length == 0)
     return;
@@ -665,7 +671,7 @@ Graph3d.prototype._dataInitialize = function (rawData, style) {
 
 /**
  * Filter the data based on the current filter
- * @param {DataSet} data
+ * @param {Array} data
  * @return {Array} dataPoints   Array with point objects which can be drawn on screen
  */
 Graph3d.prototype._getDataPoints = function (data) {
@@ -985,7 +991,7 @@ Graph3d.prototype._readData = function(data) {
 /**
  * Redraw the Graph. This needs to be executed after the start and/or
  * end time are changed, or when data is added or removed dynamically.
- * @param {DataSet} data  Optional, new data table
+ * @param {DataSet} [data]  Optional, new data table
  */
 Graph3d.prototype.redraw = function(data) {
   // load the data if needed
@@ -2002,9 +2008,9 @@ Graph3d.prototype._onMouseMove = function (event) {
   this.camera.setArmRotation(horizontalNew, verticalNew);
   this.redraw();
 
-  // fire an oncamerapositionchange event
+  // fire a cameraPositionChange event
   var parameters = this.getCameraPosition();
-  this.emit('camerapositionchange', parameters);
+  this.emit('cameraPositionChange', parameters);
 
   G3DpreventDefault(event);
 };
@@ -2143,9 +2149,9 @@ Graph3d.prototype._onWheel = function(event) {
     this._hideTooltip();
   }
 
-  // fire an oncamerapositionchange event
+  // fire a cameraPositionChange event
   var parameters = this.getCameraPosition();
-  this.emit('camerapositionchange', parameters);
+  this.emit('cameraPositionChange', parameters);
 
   // Prevent default actions caused by mouse wheel.
   // That might be ugly, but we handle scrolls somehow
@@ -2534,6 +2540,11 @@ function Filter (data, column, graph) {
   // read all distinct values and select the first one
   this.values = graph.getDistinctValues(data.get(), this.column);
 
+  // sort both numeric and string values correctly
+  this.values.sort(function (a, b) {
+    return a > b ? 1 : a < b ? -1 : 0;
+  });
+
   if (this.values.length > 0) {
     this.selectValue(0);
   }