@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 {String} title The title of this graph
- @cfg {number} t_x postition x of title (default 150)
- @cfg {number} t_y postition y of title (default 50)
+ @cfg {Object} title The title of the chart
-{Array} values
-opts (object) options for the chart
g_x: 50,
g_y: 50,
g_r: 30,
- t_x : 150,
- t_y : 50,
opts:{
//g_colors: this.colors,
g_type: 'soft',
g_gutter: '20%'
},
- title : '',
+ 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]],
// //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;
},
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).hover(fin,fout);
- this.title = this.title || 'This is Vertical Barchart';
break;
case 'hbar':
this.raphael.hbarchart(this.g_x,this.g_y,this.g_width,this.g_height,xdata,opts).hover(fin,fout);
- this.title = this.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);
+// 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);
- this.title = this.title || 'This is Piechart';
break;
}
- this.raphael.text(this.t_x, this.t_y, this.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(str) {
- this.title = str;
+ setTitle: function(o)
+ {
+ this.title = o;
},
initEvents: function() {