remove debugging code

[roojs1] / Roo / bootstrap / Graph.js

diff --git a/Roo/bootstrap/Graph.js b/Roo/bootstrap/Graph.js
index 1daf2ac..9d8e8f7 100644 (file)
--- a/Roo/bootstrap/Graph.js
+++ b/Roo/bootstrap/Graph.js
@@ -19,6 +19,8 @@
  @cfg {number} g_r radius (pie)
  @cfg {number} g_height height of the chart (respected by all elements in the set)
  @cfg {number} g_width width of the chart (respected by all elements in the set)
+ @cfg {Object} title The title of the chart
+    
  -{Array}  values
  -opts (object) options for the chart 
      o {
@@ -62,7 +64,7 @@ Roo.extend(Roo.bootstrap.Graph, Roo.bootstrap.Component,  {
     md: 5,
     graphtype: 'bar',
     g_height: 250,
-    g_width: 650,
+    g_width: 400,
     g_x: 50,
     g_y: 50,
     g_r: 30,
@@ -72,22 +74,31 @@ Roo.extend(Roo.bootstrap.Graph, Roo.bootstrap.Component,  {
         g_gutter: '20%'
 
     },
+    title : false,
 
     getAutoCreate : function(){
         
         var cfg = {
             tag: 'div',
             html : null
-        }
+        };
         
         
         return  cfg;
     },
 
     onRender : function(ct,position){
+        
+        
         Roo.bootstrap.Graph.superclass.onRender.call(this,ct,position);
+        
+        if (typeof(Raphael) == 'undefined') {
+            Roo.bootstrap.MessageBox.alert("Error","Raphael is not availabe");
+            return;
+        }
+        
         this.raphael = Raphael(this.el.dom);
-
+        
                     // data1 = [[55, 20, 13, 32, 5, 1, 2, 10], [10, 2, 1, 5, 32, 13, 20, 55], [12, 20, 30]],
                     // data2 = [[55, 20, 13, 32, 5, 1, 2, 10], [10, 2, 1, 5, 32, 13, 20, 55], [12, 20, 30]],
                     // data3 = [[55, 20, 13, 32, 5, 1, 2, 10], [10, 2, 1, 5, 32, 13, 20, 55], [12, 20, 30]],
@@ -112,16 +123,17 @@ Roo.extend(Roo.bootstrap.Graph, Roo.bootstrap.Component,  {
                 //     //yvalues : cols,
                    
                 // });
-        var xdata = [55, 20, 13, 32, 5, 1, 2, 10,5 , 10];
-        
-        this.load(null,xdata,{
-                axis : "0 0 1 1",
-                axisxlabels :  xdata
-                });
+//        var xdata = [55, 20, 13, 32, 5, 1, 2, 10,5 , 10];
+//        
+//        this.load(null,xdata,{
+//                axis : "0 0 1 1",
+//                axisxlabels :  xdata
+//                });
 
     },
 
-    load : function(graphtype,xdata,opts){
+    load : function(graphtype,xdata,opts)
+    {
         this.raphael.clear();
         if(!graphtype) {
             graphtype = this.graphtype;
@@ -129,33 +141,58 @@ Roo.extend(Roo.bootstrap.Graph, Roo.bootstrap.Component,  {
         if(!opts){
             opts = this.opts;
         }
-        var chart_title = '',
-                    r = this.raphael,
-                    fin = function () {
-                        this.flag = r.popup(this.bar.x, this.bar.y, this.bar.value || "0").insertBefore(this);
-                    },
-                    fout = function () {
-                        this.flag.animate({opacity: 0}, 300, function () {this.remove();});
-                    };
-        
+        var r = this.raphael,
+            fin = function () {
+                this.flag = r.popup(this.bar.x, this.bar.y, this.bar.value || "0").insertBefore(this);
+            },
+            fout = function () {
+                this.flag.animate({opacity: 0}, 300, function () {this.remove();});
+            },
+            pfin = function() {
+                this.sector.stop();
+                this.sector.scale(1.1, 1.1, this.cx, this.cy);
+
+                if (this.label) {
+                    this.label[0].stop();
+                    this.label[0].attr({ r: 7.5 });
+                    this.label[1].attr({ "font-weight": 800 });
+                }
+            },
+            pfout = function() {
+                this.sector.animate({ transform: 's1 1 ' + this.cx + ' ' + this.cy }, 500, "bounce");
+
+                if (this.label) {
+                    this.label[0].animate({ r: 5 }, 500, "bounce");
+                    this.label[1].attr({ "font-weight": 400 });
+                }
+            };
+
         switch(graphtype){
             case 'bar':
-                this.raphael.barchart(this.g_x,this.g_y,this.g_width,this.g_height,xdata,opts);
-                chart_title = 'This is Vertical Barchart';
+                this.raphael.barchart(this.g_x,this.g_y,this.g_width,this.g_height,xdata,opts).hover(fin,fout);
                 break;
             case 'hbar':
                 this.raphael.hbarchart(this.g_x,this.g_y,this.g_width,this.g_height,xdata,opts).hover(fin,fout);
-                chart_title = 'This is Horizontal Barchart';
                 break;
             case 'pie':
-                opts = { legend: ["%% - Enterprise Users", "% - ddd","Chrome Users"], legendpos: "west", 
-                href: ["http://raphaeljs.com", "http://g.raphaeljs.com"]};
-                    this.raphael.piechart(this.g_x,this.g_y,this.g_r,xdata,opts);
-                chart_title = 'This is Piechart';
+//                opts = { legend: ["%% - Enterprise Users", "% - ddd","Chrome Users"], legendpos: "west", 
+//                href: ["http://raphaeljs.com", "http://g.raphaeljs.com"]};
+//            
+                this.raphael.piechart(this.g_x,this.g_y,this.g_r,xdata,opts).hover(pfin, pfout);
+                
                 break;
 
         }
-        this.raphael.text(150,50,chart_title).attr({ font: "20px 'Fontin Sans', Fontin-Sans, sans-serif" });
+        
+        if(this.title){
+            this.raphael.text(this.title.x, this.title.y, this.title.text).attr(this.title.attr);
+        }
+        
+    },
+    
+    setTitle: function(o)
+    {
+        this.title = o;
     },
     
     initEvents: function() {