title: vis.js Graph3d Bar graph- Possible Bug?
body: <p>I am using the vis.js Graph3d library to plot 3D graphs with my data. Let's say the X-axis represent my nodes, Y-axis represent the last 5 hours and Z-axis represent the value. There can be hours when there are no readings for a node which I want to be represented as empty spaces. This works as expected if the first node has data for all the hours and the consequent nodes have data missing for some hours.</p>
  
  <p><a href="http://jsfiddle.net/xrakvgrw/4/" rel="nofollow">This</a> example fiddle demonstrates it considering only 2 nodes.</p>
  
  <p>Now if the first node is missing data, the rendering get's screwed up with bars overlapping each other while rotating the graph.</p>
  
  <p><a href="http://jsfiddle.net/xrakvgrw/3/" rel="nofollow">This</a> fiddle demonstrates the same. The same is embedded to the post.</p>
  
  <p>The weird part if that if you modify the data population and instead of skipping the data for the 2nd hour, skip it for any other hour, the graph renders perfectly. For example <a href="http://jsfiddle.net/xrakvgrw/5/" rel="nofollow">this</a> fiddle.</p>
  
  <p>Could someone tell me what's happening here?</p>
  
  <p>I have made a temporary workaround by having an extra dummy node in the beginning where all values for the z-axis are set to 0. Would be glad if someone suggests a fix instead.</p>
  
  <p>Thanks in advance.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var data = null;
      var graph = null;
  
   /**
    * Returns a random number between min (inclusive) and max (exclusive)
    */
   function getRandomArbitrary(min, max) {
    return Math.random() * (max - min) + min;
   }
   
      // Called when the Visualization API is loaded.
      function drawVisualization() {
        var style = 'bar';
        // Create and populate a data table.
        data = new vis.DataSet();
     
     //Poppulating the data
        for (var y = 1; y &lt;= 5; y++) {
          if(y==2) {
            continue;
          }
          var z = getRandomArbitrary(1,5);
          data.add({x:1, y:y, z:z});
        }
        for (var y = 1; y &lt;= 5; y++) {
          var z = getRandomArbitrary(1,5);
          data.add({x:2, y:y, z:z});
        }
  
        // specify options
        var options = {
          width:  '700px',
          height: '700px',
          style: style,
          showPerspective: true,
          showGrid: true,
          showShadow: false,
      verticalRatio: 0.5,
      zMin: 0,
      zMax: 5,
      xStep: 1,
      xCenter: '50%',
          yCenter: '30%',
  
          // 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: &lt;b&gt;' + point.z + '&lt;/b&gt;';
          },
  
          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
     
     var pos = {horizontal: 1.0, vertical: 0.5, distance: 2};
        graph.setCameraPosition(pos);
      }
  
  drawVisualization();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body {font: 10pt arial;
     padding: 0;
        margin: 0;
        width: 100%;
        height: 100%;
     }
   
   #mygraph {
     padding: 0;
        margin: 0;
        width: 100%;
        height: 100%;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;script src="http://cdnjs.cloudflare.com/ajax/libs/vis/3.6.4/vis.min.js"&gt;
  &lt;/script&gt;
  
  &lt;body&gt;
    &lt;div id="mygraph"&gt;&lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>