git.roojs.org Git - roojs1/blob - docs/symbols/src/Roo_bootstrap_Graph.js.html

   1 <html><head><title>../roojs1/Roo/bootstrap/Graph.js</title><link rel="stylesheet" type="text/css" href="../../../css/highlight-js.css"/></head><body class="highlightpage"><code class="jsdoc-pretty">    <span class="jsdoc-comment">/*
   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 &gt; 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 </span><span class="jsdoc-var">Roo.bootstrap.Graph </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">){
  46     </span><span class="jsdoc-var">Roo.bootstrap.Graph.superclass.constructor.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
  47
  48     </span><span class="jsdoc-var">this.addEvents</span><span class="jsdoc-syntax">({
  49         </span><span class="jsdoc-comment">// img events
  50         /**
  51          * @event click
  52          * The img click event for the img.
  53          * @param {Roo.EventObject} e
  54          */
  55         </span><span class="jsdoc-string">&quot;click&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
  56     </span><span class="jsdoc-syntax">});
  57 };
  58
  59 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.bootstrap.Graph</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.bootstrap.Component</span><span class="jsdoc-syntax">,  {
  60
  61     </span><span class="jsdoc-var">sm</span><span class="jsdoc-syntax">: 4,
  62     </span><span class="jsdoc-var">md</span><span class="jsdoc-syntax">: 5,
  63     </span><span class="jsdoc-var">graphtype</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'bar'</span><span class="jsdoc-syntax">,
  64     </span><span class="jsdoc-var">g_height</span><span class="jsdoc-syntax">: 250,
  65     </span><span class="jsdoc-var">g_width</span><span class="jsdoc-syntax">: 650,
  66     </span><span class="jsdoc-var">g_x</span><span class="jsdoc-syntax">: 50,
  67     </span><span class="jsdoc-var">g_y</span><span class="jsdoc-syntax">: 50,
  68     </span><span class="jsdoc-var">g_r</span><span class="jsdoc-syntax">: 30,
  69     </span><span class="jsdoc-var">opts</span><span class="jsdoc-syntax">:{
  70         </span><span class="jsdoc-comment">//g_colors: this.colors,
  71         </span><span class="jsdoc-var">g_type</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'soft'</span><span class="jsdoc-syntax">,
  72         </span><span class="jsdoc-var">g_gutter</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'20%'
  73
  74     </span><span class="jsdoc-syntax">},
  75
  76     </span><span class="jsdoc-var">getAutoCreate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
  77
  78         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cfg </span><span class="jsdoc-syntax">= {
  79             </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
  80             </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">null
  81         </span><span class="jsdoc-syntax">}
  82
  83
  84         </span><span class="jsdoc-keyword">return  </span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">;
  85     },
  86
  87     </span><span class="jsdoc-var">onRender </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ct</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">){
  88         </span><span class="jsdoc-var">Roo.bootstrap.Graph.superclass.onRender.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">ct</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">);
  89         </span><span class="jsdoc-var">this.raphael </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Raphael</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el.dom</span><span class="jsdoc-syntax">);
  90
  91                     </span><span class="jsdoc-comment">// 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: &quot;12px 'Fontin Sans', Fontin-Sans, sans-serif&quot; };
  95                 /*
  96                 r.text(160, 10, &quot;Single Series Chart&quot;).attr(txtattr);
  97                 r.text(480, 10, &quot;Multiline Series Chart&quot;).attr(txtattr);
  98                 r.text(160, 250, &quot;Multiple Series Stacked Chart&quot;).attr(txtattr);
  99                 r.text(480, 250, 'Multiline Series Stacked Vertical Chart. Type &quot;round&quot;').attr(txtattr);
 100
 101                 r.barchart(10, 10, 300, 220, [[55, 20, 13, 32, 5, 1, 2, 10]], 0, {type: &quot;sharp&quot;});
 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: &quot;round&quot;});
 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 : &quot;0 0 1 1&quot;,
 111                 //     axisxlabels :  xdata
 112                 //     //yvalues : cols,
 113
 114                 // });
 115         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">xdata </span><span class="jsdoc-syntax">= [55, 20, 13, 32, 5, 1, 2, 10,5 , 10];
 116
 117         </span><span class="jsdoc-var">this.load</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">xdata</span><span class="jsdoc-syntax">,{
 118                 </span><span class="jsdoc-var">axis </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;0 0 1 1&quot;</span><span class="jsdoc-syntax">,
 119                 </span><span class="jsdoc-var">axisxlabels </span><span class="jsdoc-syntax">:  </span><span class="jsdoc-var">xdata
 120                 </span><span class="jsdoc-syntax">});
 121
 122     },
 123
 124     </span><span class="jsdoc-var">load </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">graphtype</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">xdata</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">opts</span><span class="jsdoc-syntax">){
 125         </span><span class="jsdoc-var">this.raphael.clear</span><span class="jsdoc-syntax">();
 126         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">graphtype</span><span class="jsdoc-syntax">) {
 127             </span><span class="jsdoc-var">graphtype </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.graphtype</span><span class="jsdoc-syntax">;
 128         }
 129         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">opts</span><span class="jsdoc-syntax">){
 130             </span><span class="jsdoc-var">opts </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.opts</span><span class="jsdoc-syntax">;
 131         }
 132         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">chart_title </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
 133                     </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.raphael</span><span class="jsdoc-syntax">,
 134                     </span><span class="jsdoc-var">fin </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">() {
 135                         </span><span class="jsdoc-var">this.flag </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">r.popup</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.bar.x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.bar.y</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.bar.value </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-string">&quot;0&quot;</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.insertBefore</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 136                     },
 137                     </span><span class="jsdoc-var">fout </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">() {
 138                         </span><span class="jsdoc-var">this.flag.animate</span><span class="jsdoc-syntax">({</span><span class="jsdoc-var">opacity</span><span class="jsdoc-syntax">: 0}, 300, </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">() {</span><span class="jsdoc-var">this.remove</span><span class="jsdoc-syntax">();});
 139                     };
 140         </span><span class="jsdoc-keyword">switch</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">graphtype</span><span class="jsdoc-syntax">){
 141             </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'bar'</span><span class="jsdoc-syntax">:
 142                 </span><span class="jsdoc-var">this.raphael.barchart</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.g_x</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">this.g_y</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">this.g_width</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">this.g_height</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">xdata</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">opts</span><span class="jsdoc-syntax">);
 143                 </span><span class="jsdoc-var">chart_title </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'This is Vertical Barchart'</span><span class="jsdoc-syntax">;
 144                 </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 145             </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'hbar'</span><span class="jsdoc-syntax">:
 146                 </span><span class="jsdoc-var">this.raphael.hbarchart</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.g_x</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">this.g_y</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">this.g_width</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">this.g_height</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">xdata</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">opts</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.hover</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fin</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">fout</span><span class="jsdoc-syntax">);
 147                 </span><span class="jsdoc-var">chart_title </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'This is Horizontal Barchart'</span><span class="jsdoc-syntax">;
 148                 </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 149             </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'pie'</span><span class="jsdoc-syntax">:
 150                 </span><span class="jsdoc-var">opts </span><span class="jsdoc-syntax">= { </span><span class="jsdoc-var">legend</span><span class="jsdoc-syntax">: [</span><span class="jsdoc-string">&quot;%% - Enterprise Users&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;% - ddd&quot;</span><span class="jsdoc-syntax">,</span><span class="jsdoc-string">&quot;Chrome Users&quot;</span><span class="jsdoc-syntax">], </span><span class="jsdoc-var">legendpos</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;west&quot;</span><span class="jsdoc-syntax">,
 151                 </span><span class="jsdoc-var">href</span><span class="jsdoc-syntax">: [</span><span class="jsdoc-string">&quot;http://raphaeljs.com&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;http://g.raphaeljs.com&quot;</span><span class="jsdoc-syntax">]};
 152                     </span><span class="jsdoc-var">this.raphael.piechart</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.g_x</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">this.g_y</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">this.g_r</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">xdata</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">opts</span><span class="jsdoc-syntax">);
 153                 </span><span class="jsdoc-var">chart_title </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'This is Piechart'</span><span class="jsdoc-syntax">;
 154                 </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 155
 156         }
 157         </span><span class="jsdoc-var">this.raphael.text</span><span class="jsdoc-syntax">(150,50,</span><span class="jsdoc-var">chart_title</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.attr</span><span class="jsdoc-syntax">({ </span><span class="jsdoc-var">font</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;20px 'Fontin Sans', Fontin-Sans, sans-serif&quot; </span><span class="jsdoc-syntax">});
 158     },
 159
 160     </span><span class="jsdoc-var">initEvents</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
 161
 162         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.href</span><span class="jsdoc-syntax">){
 163             </span><span class="jsdoc-var">this.el.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'click'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onClick</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 164         }
 165     },
 166
 167     </span><span class="jsdoc-var">onClick </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">)
 168     {
 169         </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'img onclick'</span><span class="jsdoc-syntax">);
 170         </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'click'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
 171     }
 172
 173 });
 174
 175
 176 </span></code></body></html>