git.roojs.org Git - roojs1/blob - Roo/bootstrap/Graph.js

   1     /*
   2  * - LGPL
   3  *
   4  * Graph
   5  *
   6  */
   7
   8
   9 /**
  10  * @class Roo.bootstrap.Graph
  11  * @extends Roo.bootstrap.Component
  12  * Bootstrap Graph class
  13 > Prameters
  14  -sm {number} sm 4
  15  -md {number} md 5
  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 {Object} title The title of the chart
  23
  24  -{Array}  values
  25  -opts (object) options for the chart
  26      o {
  27      o type (string) type of endings of the bar. Default: 'square'. Other options are: 'round', 'sharp', 'soft'.
  28      o gutter (number)(string) default '20%' (WHAT DOES IT DO?)
  29      o vgutter (number)
  30      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.
  31      o stacked (boolean) whether or not to tread values as in a stacked bar chart
  32      o to
  33      o stretch (boolean)
  34      o }
  35  -opts (object) options for the pie
  36      o{
  37      o cut
  38      o startAngle (number)
  39      o endAngle (number)
  40      }
  41  *
  42  * @constructor
  43  * Create a new Input
  44  * @param {Object} config The config object
  45  */
  46
  47 Roo.bootstrap.Graph = function(config){
  48     Roo.bootstrap.Graph.superclass.constructor.call(this, config);
  49
  50     this.addEvents({
  51         // img events
  52         /**
  53          * @event click
  54          * The img click event for the img.
  55          * @param {Roo.EventObject} e
  56          */
  57         "click" : true
  58     });
  59 };
  60
  61 Roo.extend(Roo.bootstrap.Graph, Roo.bootstrap.Component,  {
  62
  63     sm: 4,
  64     md: 5,
  65     graphtype: 'bar',
  66     g_height: 250,
  67     g_width: 400,
  68     g_x: 50,
  69     g_y: 50,
  70     g_r: 30,
  71     opts:{
  72         //g_colors: this.colors,
  73         g_type: 'soft',
  74         g_gutter: '20%'
  75
  76     },
  77     title : false,
  78
  79     getAutoCreate : function(){
  80
  81         var cfg = {
  82             tag: 'div',
  83             html : null
  84         };
  85
  86
  87         return  cfg;
  88     },
  89
  90     onRender : function(ct,position){
  91
  92
  93         Roo.bootstrap.Graph.superclass.onRender.call(this,ct,position);
  94
  95         if (typeof(Raphael) == 'undefined') {
  96             Roo.bootstrap.MessageBox.alert("Error","Raphael is not availabe");
  97             return;
  98         }
  99
 100         this.raphael = Raphael(this.el.dom);
 101
 102                     // data1 = [[55, 20, 13, 32, 5, 1, 2, 10], [10, 2, 1, 5, 32, 13, 20, 55], [12, 20, 30]],
 103                     // data2 = [[55, 20, 13, 32, 5, 1, 2, 10], [10, 2, 1, 5, 32, 13, 20, 55], [12, 20, 30]],
 104                     // data3 = [[55, 20, 13, 32, 5, 1, 2, 10], [10, 2, 1, 5, 32, 13, 20, 55], [12, 20, 30]],
 105                     // txtattr = { font: "12px 'Fontin Sans', Fontin-Sans, sans-serif" };
 106                 /*
 107                 r.text(160, 10, "Single Series Chart").attr(txtattr);
 108                 r.text(480, 10, "Multiline Series Chart").attr(txtattr);
 109                 r.text(160, 250, "Multiple Series Stacked Chart").attr(txtattr);
 110                 r.text(480, 250, 'Multiline Series Stacked Vertical Chart. Type "round"').attr(txtattr);
 111
 112                 r.barchart(10, 10, 300, 220, [[55, 20, 13, 32, 5, 1, 2, 10]], 0, {type: "sharp"});
 113                 r.barchart(330, 10, 300, 220, data1);
 114                 r.barchart(10, 250, 300, 220, data2, {stacked: true});
 115                 r.barchart(330, 250, 300, 220, data3, {stacked: true, type: "round"});
 116                 */
 117
 118                 // var xdata = [55, 20, 13, 32, 5, 1, 2, 10,5 , 10];
 119                 // r.barchart(30, 30, 560, 250,  xdata, {
 120                 //    labels : [55, 20, 13, 32, 5, 1, 2, 10,5 , 10],
 121                 //     axis : "0 0 1 1",
 122                 //     axisxlabels :  xdata
 123                 //     //yvalues : cols,
 124
 125                 // });
 126 //        var xdata = [55, 20, 13, 32, 5, 1, 2, 10,5 , 10];
 127 //
 128 //        this.load(null,xdata,{
 129 //                axis : "0 0 1 1",
 130 //                axisxlabels :  xdata
 131 //                });
 132
 133     },
 134
 135     load : function(graphtype,xdata,opts)
 136     {
 137         this.raphael.clear();
 138         if(!graphtype) {
 139             graphtype = this.graphtype;
 140         }
 141         if(!opts){
 142             opts = this.opts;
 143         }
 144         var r = this.raphael,
 145             fin = function () {
 146                 this.flag = r.popup(this.bar.x, this.bar.y, this.bar.value || "0").insertBefore(this);
 147             },
 148             fout = function () {
 149                 this.flag.animate({opacity: 0}, 300, function () {this.remove();});
 150             },
 151             pfin = function() {
 152                 this.sector.stop();
 153                 this.sector.scale(1.1, 1.1, this.cx, this.cy);
 154
 155                 if (this.label) {
 156                     this.label[0].stop();
 157                     this.label[0].attr({ r: 7.5 });
 158                     this.label[1].attr({ "font-weight": 800 });
 159                 }
 160             },
 161             pfout = function() {
 162                 this.sector.animate({ transform: 's1 1 ' + this.cx + ' ' + this.cy }, 500, "bounce");
 163
 164                 if (this.label) {
 165                     this.label[0].animate({ r: 5 }, 500, "bounce");
 166                     this.label[1].attr({ "font-weight": 400 });
 167                 }
 168             };
 169
 170         switch(graphtype){
 171             case 'bar':
 172                 this.raphael.barchart(this.g_x,this.g_y,this.g_width,this.g_height,xdata,opts).hover(fin,fout);
 173                 break;
 174             case 'hbar':
 175                 this.raphael.hbarchart(this.g_x,this.g_y,this.g_width,this.g_height,xdata,opts).hover(fin,fout);
 176                 break;
 177             case 'pie':
 178 //                opts = { legend: ["%% - Enterprise Users", "% - ddd","Chrome Users"], legendpos: "west",
 179 //                href: ["http://raphaeljs.com", "http://g.raphaeljs.com"]};
 180 //
 181                 this.raphael.piechart(this.g_x,this.g_y,this.g_r,xdata,opts).hover(pfin, pfout);
 182
 183                 break;
 184
 185         }
 186
 187         if(this.title){
 188             this.raphael.text(this.title.x, this.title.y, this.title.text).attr(this.title.attr);
 189         }
 190
 191     },
 192
 193     setTitle: function(o)
 194     {
 195         this.title = o;
 196     },
 197
 198     initEvents: function() {
 199
 200         if(!this.href){
 201             this.el.on('click', this.onClick, this);
 202         }
 203     },
 204
 205     onClick : function(e)
 206     {
 207         Roo.log('img onclick');
 208         this.fireEvent('click', this, e);
 209     }
 210
 211 });
 212
 213