Ajax Russia : Аякс по-русски

Как Вы думаете, при помощи какой программы построен этот график? Excel? DPlot? Какой нибудь PHP скрипт? Нет, этот график сделан при помощи JavaScript и CSS. Называется этот JavaScript - Canvas 3D Graph.

Использовать этот замечательный скрипт очень просто.

1. Подгружаем 2 JS файла. (excanvas.js нужен для IE, который не поддерживает тэг <canvas>)
   PLAIN TEXT
   HTML:

   1. <!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
   2. <script src="canvas3DGraph.js" type="text/javascript"></script>

2. Создаём пару DIV-ов и нужный нам тэг CANVAS.
   PLAIN TEXT
   HTML:

   1. <div id="g-holder">
   2.     <div id="canvasDiv">
   3.         <canvas id="graph" width="600" height="600"></canvas>
   4.         <div id="gInfo"></div>
   5.     </div>
   6.     <div id="controls">
   7.     <!-- (put your controls here, if you need any) -->
   8.     </div>
   9. </div>

3. Добавляем немного CSS.
   PLAIN TEXT
   CSS:

   1. #g-holder {
   2.     height:620px;
   3.     position:relative;
   4. }
   5.  
   6. #canvasDiv{
   7.     border:solid 1px #e1e1e1;
   8.     width:600px;
   9.     height:600px;
   10.     position:absolute;
   11.     top:0px; left:0px;
   12.     z-index:10;
   13. }
   14. #x-label{
   15.     position:absolute;
   16.     z-index:2;
   17.     top:340px;
   18.     left:580px;
   19. }
   20.  
   21. #y-label{
   22.     position:absolute;
   23.     z-index:2;
   24.     top:10px;
   25.     left:220px;
   26. }
   27.  
   28. #z-label{
   29.     position:absolute;
   30.     z-index:2;
   31.     top:540px;
   32.     left:10px;
   33. }
   34.  
   35. #gInfo div.gText{
   36.     position:absolute;
   37.     z-index:-1;
   38.     font:normal 10px Arial;
   39. }

4. Готово. Теперь создаём объект и даём ему координаты того, что нужно нарисовать.
   PLAIN TEXT
   HTML:

   1. <script type="text/javascript">
   2.  
   3.     window.onload=function(){
   4.            
   5.         //Initialise Graph
   6.         var g = new canvasGraph('graph');
   7.                
   8.         //define some data
   9.         gData=new Array();
   10.                
   11.         gData[0]={x:500,y:500,z:500};
   12.         gData[1]={x:500,y:400,z:600};
   13.         gData[2]={x:500,y:300,z:700};
   14.         gData[3]={x:500,y:200,z:800};
   15.         gData[4]={x:500,y:100,z:900};
   16.  
   17.         // sort data - draw farest elements first      
   18.         gData.sort(sortNumByZ);
   19.                
   20.         //draw graph
   21.         g.drawGraph(gData); 
   22.  
   23.     }
   24. </script>

Можно придумать очень много сценариев для использования этой полезной библиотеки с аяксом. Например показывать на графике в реальном времени посещения web сайта. Нужно всего лишь периодически запрашивать сервер, есть ли новые данные о посетителях, и если есть - дополнять график.