git.roojs.org Git - g.raphael/blob - g.bar.overlay.js

   1 /*!
   2  * g.Raphael 0.51 - Charting library, based on Raphaël
   3  *
   4  * Copyright (c) 2009-2012 Dmitry Baranovskiy (http://g.raphaeljs.com)
   5  * Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license.
   6  */
   7
   8 if (typeof(Raphael) == 'undefined') {
   9     // support for seed/simple browser usage
  10     importz = imports['seed/importz.js'].importz;
  11
  12     Raphael = importz('Raphael');
  13     Roo = importz('Roo');
  14 }
  15
  16 (function () {
  17
  18     function clearAr(ar) {
  19         var ret = new Array();
  20         //Roo.log(JSON.stringify(ar));
  21         for (var i = 0; i < ar.length; i++) {
  22             //print(typeof(ar[i]));
  23             if (Raphael.is(ar[i], "object")) {
  24                 ret.push(clearAr(ar[i]));
  25                 continue;
  26             }
  27             ret.push(parseInt(ar[i]));
  28         }
  29         return ret;
  30     }
  31
  32
  33 /*\
  34  * Paper.vbarchart
  35  [ method ]
  36  **
  37  * Creates a vertical bar chart
  38  **
  39  > Parameters
  40  **
  41  - x (number) x coordinate of the chart
  42  - y (number) y coordinate of the chart
  43  - width (number) width of the chart (respected by all elements in the set)
  44  - height (number) height of the chart (respected by all elements in the set)
  45  - values (array) values
  46  - opts (object) options for the chart
  47  o {
  48  o type (string) type of endings of the bar. Default: 'square'. Other options are: 'round', 'sharp', 'soft'.
  49  o gutter (number)(string) default '20%' (WHAT DOES IT DO?)
  50  o vgutter (number)
  51  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.
  52  o stacked (boolean) whether or not to tread values as in a stacked bar chart
  53  o to
  54  o stretch (boolean)
  55  o }
  56  **
  57  = (object) path element of the popup
  58  > Usage
  59  | r.vbarchart(0, 0, 620, 260, [[76, 70], [67, 71]], {})
  60  \*/
  61
  62
  63     function MVBarchart(paper, x, y, width, height, values, opts) {
  64         opts = opts || {};
  65         values = clearAr(values);
  66
  67         var chartinst = this,
  68             chart = paper.set(),
  69             bars = paper.set(),
  70             covers = paper.set(),
  71             barsteps = opts.barsteps || 20,
  72             colors = opts.colors || chartinst.colors,
  73             max = 3000;
  74
  75         opts.axis = opts.axis || "";
  76         opts.baroffset = opts.baroffset || 50;
  77         opts.asixxheight = opts.asixxheight || 100;
  78         opts.asixywidth = opts.asixywidth || 100;
  79         opts.axisxlabels = opts.axisxlabels || [];
  80
  81         // background
  82         paper.rect(0, 0, width, height).attr({ stroke: "none", fill: (opts.background || "#F0F4F7") });
  83 //        background.toBack();
  84
  85         // bar border
  86         var barwidth = Math.floor((width - x - opts.asixywidth - opts.baroffset) / barsteps);
  87         var barheight = height - y - opts.asixxheight || 100;
  88         var path = ["M", x + 1, y, "l", 0, barheight]
  89
  90         for (var i = 0; i < barsteps; i++) {
  91             path = path.concat(["M", x + (i * barwidth), y + 1, "l", barwidth, 0, "l", 0, barheight]);
  92         }
  93
  94         paper.path(path).attr({ stroke: "#fff", "stroke-width": 2 });
  95
  96         //bars
  97         var unit = barheight / max;
  98         var indicator = [];
  99         values.forEach((value,i) => {
 100             if (!Raphael.is(values[0], "array")) {
 101                 value = [value];
 102             }
 103
 104             value.forEach((v,k) => {
 105                 paper.rect(x + 1 + (k * barwidth) , y + (max - v) * unit, barwidth - 2, v * unit).attr({ stroke: "none", fill: colors[i%colors.length] });
 106                 paper.rect(x + 1 + (k * barwidth) + barwidth / 4 , y + (max - v) * unit - 42, barwidth / 2, 30, 5).attr({ stroke: "none", fill: "#0C014D" });
 107                 indicator = indicator.concat(["M", x + 1 + (k * barwidth) + barwidth / 4 + 10, y + (max - v) * unit - 12, "l", 5, 10, "l", 5, -10]);
 108                 paper.text(x + 1 + (k * barwidth) + barwidth / 2, y + (max - v)  * unit - 28, Roo.util.Format.number(v, 0)).attr({
 109                     "font-size": "16",
 110                     "font-family": "'Fontin Sans', Fontin-Sans, sans-serif",
 111                     "font-weight": "bold",
 112                     fill : "#fff"
 113                 });
 114             });
 115
 116         });
 117
 118         paper.path(indicator).attr({ stroke: "none", fill: "#0C014D" });
 119
 120         var ax = (opts.axis + "").split(/[,\s]+/),
 121             axis = paper.set();
 122
 123         // right axis
 124         +ax[1] && axis.push(
 125             chartinst.rightAxis(
 126                 x + width - opts.asixywidth ,
 127                 y + height - opts.asixxheight,
 128                 height - y - opts.asixxheight,
 129                 max,
 130                 opts.axisystep || 10,
 131                 opts.asixywidth,
 132                 paper
 133             )
 134         );
 135
 136         // bottom axis
 137         +ax[2] && axis.push(
 138             chartinst.bottomAxis(
 139                 x ,
 140                 height - opts.asixxheight,
 141                 width,
 142                 opts.axisxlabels.length,
 143                 opts.axisxlabels,
 144                 barwidth,
 145                 opts.asixxheight,
 146                 paper
 147             )
 148         );
 149
 150         chart.push(bars, covers);
 151         chart.bars = bars;
 152         chart.covers = covers;
 153         return chart;
 154     };
 155
 156     //inheritance
 157     var F = function() {};
 158     F.prototype = Raphael.g;
 159     MVBarchart.prototype = new F; //prototype reused by hbarchart
 160
 161     Raphael.fn.mbarchart = function(x, y, width, height, values, opts) {
 162         return new MVBarchart(this, x, y, width, height, values, opts);
 163     };
 164
 165     MVBarchart.prototype.rightAxis = function (x, y, length, max, steps, ewidth, paper)
 166     {
 167 //        Roo.log('Right Axis');
 168 //        Roo.log([x, y, length, max, steps, ewidth]);
 169
 170         var path = [],
 171             color = "#bababa",
 172             text = paper.set(),
 173             d = Math.ceil(max / steps);
 174
 175         var label = 0,
 176             dx = length / steps;
 177
 178         var Y = y;
 179
 180         for(var i = 0; i <= steps; i++) {
 181
 182             if(i != 0) {
 183                 paper.text(x + (ewidth / 2), Y + 15, label).attr({
 184                     "font-size": "20",
 185                     "font-family": "'Fontin Sans', Fontin-Sans, sans-serif",
 186                     "font-weight": "bold",
 187                     "text-anchor": "end",
 188                     fill : color
 189                 });
 190                 path = path.concat(["M", x, Y, "l", (ewidth / 2), 0]);
 191
 192             }
 193
 194             label += d;
 195             Y -= dx;
 196         }
 197
 198         var res = paper.path(path).attr({ stroke: color, "stroke-width": 2 });
 199
 200         res.text = text;
 201         res.all = paper.set([res, text]);
 202         res.remove = function () {
 203             this.text.remove();
 204             this.constructor.prototype.remove.call(this);
 205         };
 206
 207         return res;
 208     }
 209
 210     MVBarchart.prototype.bottomAxis = function (x, y, length, steps, labels, barwidth, eheight, paper)
 211     {
 212 //        Roo.log('Bottom Axis');
 213 //        Roo.log([x, y, length, steps, labels, barwidth]);
 214
 215         var path = ["M", x, y, "l", length, 0],
 216             color = "#bababa",
 217             text = paper.set(),
 218             offset = Math.round(barwidth / 2);
 219
 220         labels.forEach((v,k) => {
 221             paper.text(x + (k * barwidth) + offset, y + (eheight / 2), v).attr({
 222                 "font-size": "20",
 223                 "font-family": "'Fontin Sans', Fontin-Sans, sans-serif",
 224                 "font-weight": "bold",
 225                 fill : color
 226             });
 227         });
 228
 229         var res = paper.path(path).attr({ stroke: color, "stroke-width": 2 });
 230
 231         res.text = text;
 232         res.all = paper.set([res, text]);
 233         res.remove = function () {
 234             this.text.remove();
 235             this.constructor.prototype.remove.call(this);
 236         };
 237
 238         return res;
 239     }
 240
 241 })();