base for 3d graph dashboard widget

In this example below you will see how to do a base for 3d graph dashboard widget with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Loreno, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Loreno ©
  • HTML
  • CSS
  • JavaScript
    <body onload="draw3DGraph();">
  <div id="3d_graph"></div>
</body>

/*Downloaded from https://www.codeseek.co/Loreno/base-for-3d-graph-dashboard-widget-WGmJmz */
    


/*Downloaded from https://www.codeseek.co/Loreno/base-for-3d-graph-dashboard-widget-WGmJmz */
    function generateDataSet(x_array, y_array, z_array) {
  var graphData = new vis.DataSet();
  for (var i = 0; i < x_array.length; i++) {
    graphData.add({
      x: x_array[i],
      y: y_array[i],
      z: z_array[i],
      style: z_array[i]
    });
  }
  return graphData;
}

var data;
var options;

function draw3DGraph() {
  var x_array = [0,0,0,0,1,1,1,1,2,2,2,2,3,3,3,3];
  var y_array = [0,1,2,3,0,1,2,3,0,1,2,3,0,1,2,3];
  var z_array = [1,2,1,4,3,1,8,2,4,4,1,2,2,1,9,5];

  data = generateDataSet(x_array, y_array, z_array);
  // data = new vis.DataSet();
  //       data.add({
  //         x: 0,
  //         y: 0,
  //         z: 0,
  //         style: 0
  //     });
  options = {
    width: '300px',
    height: '300px',
    style: 'bar',
    showPerspective: true,
    showGrid: true,
    showShadow: false,
    keepAspectRatio: true,
    verticalRatio: 0.5,
    tooltip: true,
    backgroundColor: '#bfccd7',
    axisColor: '#4D4D4D',
    dataColor: {fill: 'green', stroke: '#3267D2', strokeWidth: 1}
  };

}

var container = document.getElementById('3d_graph');

draw3DGraph();
graph3d = new vis.Graph3d(container, data, options);
//graph3d.setOptions({xBarWidth: 10});
graph3d.setOptions({xBarWidth: 1});
//CHANGING SIZE:
//graph3d.setSize('400px', '400px');

// //SETTING NEW DATA:
// var x1_array = [2, 3, 4, 5];
// var y1_array = [4, 5, 6, 7];
// var z1_array = [8, 9, 10, 11];

//var newData = generateDataSet(x1_array, y1_array, z1_array);

//graph3d.setData(newData);

Comments