10 * @class Roo.bootstrap.Graph
11 * @extends Roo.bootstrap.Component
12 * Bootstrap Graph class
16 @cfg {String} graphtype bar | vbar | pie
17 @cfg {number} g_x coodinator | centre x (pie)
18 @cfg {number} g_y coodinator | centre y (pie)
19 @cfg {number} g_r radius (pie)
20 @cfg {number} g_height height of the chart (respected by all elements in the set)
21 @cfg {number} g_width width of the chart (respected by all elements in the set)
22 @cfg {String} title The title of this graph
23 @cfg {number} t_x postition x of title (default 150)
24 @cfg {number} t_y postition y of title (default 50)
27 -opts (object) options for the chart
29 o type (string) type of endings of the bar. Default: 'square'. Other options are: 'round', 'sharp', 'soft'.
30 o gutter (number)(string) default '20%' (WHAT DOES IT DO?)
32 o colors (array) colors be used repeatedly to plot the bars. If multicolumn bar is used each sequence of bars with use a different color.
33 o stacked (boolean) whether or not to tread values as in a stacked bar chart
37 -opts (object) options for the pie
46 * @param {Object} config The config object
49 Roo.bootstrap.Graph = function(config){
50 Roo.bootstrap.Graph.superclass.constructor.call(this, config);
56 * The img click event for the img.
57 * @param {Roo.EventObject} e
63 Roo.extend(Roo.bootstrap.Graph, Roo.bootstrap.Component, {
76 //g_colors: this.colors,
83 getAutoCreate : function(){
94 onRender : function(ct,position){
95 Roo.bootstrap.Graph.superclass.onRender.call(this,ct,position);
96 this.raphael = Raphael(this.el.dom);
98 // data1 = [[55, 20, 13, 32, 5, 1, 2, 10], [10, 2, 1, 5, 32, 13, 20, 55], [12, 20, 30]],
99 // data2 = [[55, 20, 13, 32, 5, 1, 2, 10], [10, 2, 1, 5, 32, 13, 20, 55], [12, 20, 30]],
100 // data3 = [[55, 20, 13, 32, 5, 1, 2, 10], [10, 2, 1, 5, 32, 13, 20, 55], [12, 20, 30]],
101 // txtattr = { font: "12px 'Fontin Sans', Fontin-Sans, sans-serif" };
103 r.text(160, 10, "Single Series Chart").attr(txtattr);
104 r.text(480, 10, "Multiline Series Chart").attr(txtattr);
105 r.text(160, 250, "Multiple Series Stacked Chart").attr(txtattr);
106 r.text(480, 250, 'Multiline Series Stacked Vertical Chart. Type "round"').attr(txtattr);
108 r.barchart(10, 10, 300, 220, [[55, 20, 13, 32, 5, 1, 2, 10]], 0, {type: "sharp"});
109 r.barchart(330, 10, 300, 220, data1);
110 r.barchart(10, 250, 300, 220, data2, {stacked: true});
111 r.barchart(330, 250, 300, 220, data3, {stacked: true, type: "round"});
114 // var xdata = [55, 20, 13, 32, 5, 1, 2, 10,5 , 10];
115 // r.barchart(30, 30, 560, 250, xdata, {
116 // labels : [55, 20, 13, 32, 5, 1, 2, 10,5 , 10],
118 // axisxlabels : xdata
122 var xdata = [55, 20, 13, 32, 5, 1, 2, 10,5 , 10];
124 this.load(null,xdata,{
131 load : function(graphtype,xdata,opts){
132 this.raphael.clear();
134 graphtype = this.graphtype;
139 var r = this.raphael,
141 this.flag = r.popup(this.bar.x, this.bar.y, this.bar.value || "0").insertBefore(this);
144 this.flag.animate({opacity: 0}, 300, function () {this.remove();});
149 this.raphael.barchart(this.g_x,this.g_y,this.g_width,this.g_height,xdata,opts).hover(fin,fout);
150 this.title = this.title || 'This is Vertical Barchart';
153 this.raphael.hbarchart(this.g_x,this.g_y,this.g_width,this.g_height,xdata,opts).hover(fin,fout);
154 this.title = this.title || 'This is Horizontal Barchart';
157 opts = { legend: ["%% - Enterprise Users", "% - ddd","Chrome Users"], legendpos: "west",
158 href: ["http://raphaeljs.com", "http://g.raphaeljs.com"]};
160 this.raphael.piechart(this.g_x,this.g_y,this.g_r,xdata,opts);
162 this.title = this.title || 'This is Piechart';
166 // this.raphael.text(this.t_x, this.t_y, this.title).attr({ font: "20px 'Fontin Sans', Fontin-Sans, sans-serif" });
169 setTitle: function(str) {
173 initEvents: function() {
176 this.el.on('click', this.onClick, this);
180 onClick : function(e)
182 Roo.log('img onclick');
183 this.fireEvent('click', this, e);