Canvas 3DGraph

Download & links

• Official blog post
• canvas3DGraph.js

Info

Canvas 3D Graph is a special type of bar graph that plot numbers in 3D

This first started as PHP-GD project, but soon I realized that there is not much sense in generating complex graph like this on server side (script worked really fast, though)

How to use

First include canvas3DGraph.js and excanvas.js in your HTML page. <!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]--> <script type="text/javascript" src="canvas3DGraph.js"></script> Put DIV containing canvas tag and info DIV (used for text over canvas) on your page <div id="g-holder"> <div id="canvasDiv"> <canvas id="graph" width="600" height="600" ></canvas> <div id="gInfo"></div> </div> <div id="controls"> <!-- (put your controls here, if you need any) --> </div> </div> Apply this CSS code
(You may wanna adjust it to your needs) #g-holder { height:620px; position:relative; } #canvasDiv{ border:solid 1px #e1e1e1; width:600px; height:600px; position:absolute; top:0px; left:0px; z-index:10; } #x-label{ position:absolute; z-index:2; top:340px; left:580px; } #y-label{ position:absolute; z-index:2; top:10px; left:220px; } #z-label{ position:absolute; z-index:2; top:540px; left:10px; } #gInfo div.gText{ position:absolute; z-index:-1; font:normal 10px Arial; } And finaly, provide data and draw graph. <script type="text/javascript"> window.onload=function(){ //Initialise Graph var g = new canvasGraph('graph'); //define some data gData=new Array(); gData[0]={x:500,y:500,z:500}; gData[1]={x:500,y:400,z:600}; gData[2]={x:500,y:300,z:700}; gData[3]={x:500,y:200,z:800}; gData[4]={x:500,y:100,z:900}; // sort data - draw farest elements first gData.sort(sortNumByZ); //draw graph g.drawGraph(gData); } </script>