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