Back to index

Real 3D bar chart with animation

// initialize var myCanvas = $('#3dcanvas').scene3d({ width:"400px", height:"400px", sceneAnimation: true, background: "#eeffee", fontFamily: 'Arial', fontSize: .4, ViewpointOrientation: '0.1,-0.4,-0.3,-0.1', ViewpointPosition: '0,0,10', }); // add a title myCanvas.addText ({y:2.2,z:1,fontFamily:'Tahoma',fontColor:'#000080',fontSize:.9,text: 'Projected Sales'}); // make some random sales figures for (var i = -2; i < 2; i++) { // foreground graph var h = (Math.random() * (3 - 1)) + 1; myCanvas.addBox ({ x:i,y:-2+h/2,z:3,width:0.8,depth:.5,height:h, color:'#'+Math.floor(Math.random()*16777215).toString(16), label:'$'+h.toString().substring(0,3)+'M',labeloffset:.5}); // background graph h = (Math.random() * (4 - 2)) + 2; myCanvas.addCylinder ({ x:i,y:-1+h/2,z:0,radius:.4,height:h, color:'#'+Math.floor(Math.random()*16777215).toString(16), label:'$'+h.toString().substring(0,3)+'M',labeloffset:.5}); }