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

   1 /*
   2  * g.Raphael 0.5 - Charting library, based on Raphaël
   3  *
   4  * Copyright (c) 2009 Dmitry Baranovskiy (http://g.raphaeljs.com)
   5  * Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license.
   6  */
   7 Raphael = typeof(Raphael) != 'undefined' ? Raphael :  (imports ? imports.seed.Raphael.Raphael : {});
   8 Roo = typeof(Roo) != 'undefined' ? Roo:  (imports ? imports.seed.Roo.Roo: {});
   9 //chartinst = typeof(chartinst) != 'undefined' ? chartinst:  (imports ? imports.chartinst.chartinst : {});
  10
  11
  12
  13 (function () {
  14
  15     /**
  16      * @param {Raphael} paper to draw on
  17      * @param {int} cx - centre X
  18      * @param {int} cy - centre Y
  19      * @param {int} r - radius
  20      * @param {Array} values
  21      * @param {Object} opts options
  22      *   top (number) : top padding
  23      *   bottom (number) : bottom padding
  24      *   left (number) : left padding
  25      *   right (number) : right padding
  26      *   background (string) : background color
  27      *   borderstlye (string) : border style of empty bars
  28      *   bordercolor (string): border color of empty bars
  29      *   barwidth (number) : width of the bars
  30      *   color (string) : color of the bars
  31      *   indicatorwidth (number): width of indicator
  32      *   indicatorheight (number): height of indicator
  33      *   indicatorcolor (string): color of indicator
  34      *   labelfont (string) : font family of labels
  35      *   labelsize (number) : font size of labels
  36      *   labelweight (string)(number) : font weight of labels
  37      *   labelcolor (string) : font color of the labels
  38      *   legendfont (string) : font family of the legend labels
  39      *   legendfontsize (number) : font size of the legend labels
  40      *   legendfontweight (string)(number) : font weight of the legend labels
  41      *   legendfontcolor (string) : font color of the legend colors
  42      *
  43      */
  44
  45     function Barsplitchart(paper, width, height, values, opts) {
  46
  47         opts = opts || {};
  48
  49         var chartinst = this,
  50             chart = paper.set(),
  51             top = opts.top || 50,
  52             bottom = opts.bottom || 50,
  53             left = opts.left || 20,
  54             right = opts.right || 20,
  55             borderColor = opts.bordercolor || '#CCCCCC',
  56             borderStyle = opts.borderstyle || '--',
  57             barWidth = opts.barwidth || 100,
  58             Color = opts.color || '#0A2BC4',
  59             indicatorWidth = opts.indicatorwidth || barWidth / 2,
  60             indicatorHeight = opts.indicatorheight || 30,
  61             indicatorColor = opts.indicatorcolor || '#0C014D',
  62             labelFont = opts.labelfont || "'Fontin Sans', Fontin-Sans, sans-serif",
  63             labelSize = opts.labelsize || 16,
  64             labelWeight = opts.labelweight || 'bold',
  65             labelColor = opts.labelcolor || '#FFFFFF',
  66             legendFont = opts.legendfont || "'Fontin Sans', Fontin-Sans, sans-serif",
  67             legendFontSize = opts.legendfontsize || 22,
  68             legendFontWeight = opts.legendfontweight || 'bold',
  69             legendFontColor = opts.legendfontcolor || '#0C024B';
  70
  71         paper.rect(0, 0, width, height).attr({ stroke: "none", fill: (opts.background || "#F0F4F7") });
  72
  73         var cw = width - left - right,
  74             ch = height - top - bottom;
  75
  76         paper.rect(left, top, barWidth, ch).attr({ stroke: borderColor, "stroke-dasharray": borderStyle });
  77         paper.rect(left + cw / 2, top, barWidth, ch).attr({ stroke: borderColor, "stroke-dasharray": borderStyle });
  78
  79         values.forEach(function(v,k)  {
  80             v = Math.min(100, v);
  81             var bh = v * ch / 100,
  82                 bx = (k == 0) ? left : left + cw / 2,
  83                 by = top + ch - bh;
  84
  85             paper.rect(bx, by, barWidth, bh).attr({ stroke: "none", fill: Color });
  86
  87             paper.rect(bx + (barWidth - indicatorWidth) / 2 , by - 20 - indicatorHeight, indicatorWidth, indicatorHeight, 5).attr({ stroke: "none", fill: indicatorColor });
  88             paper.path(["M", bx + (barWidth - indicatorWidth) / 2 + (indicatorWidth - 10) / 2, by - 20, "l", 5, 10, "l", 5, -10]).attr({ stroke: "none", fill: indicatorColor });
  89
  90             paper.text(bx + barWidth / 2, by - 20 - indicatorHeight / 2, v + '%').attr({
  91                 "font-size": labelSize,
  92                 "font-family": labelFont,
  93                 "font-weight": labelWeight,
  94                 "text-anchor": "middle",
  95                 fill : labelColor
  96             });
  97
  98             paper.text(bx + barWidth + 25, top + 50, opts.legend[k]).attr({
  99                 "font-size": legendFontSize,
 100                 "font-family": legendFont,
 101                 "font-weight": legendFontWeight,
 102                 "text-anchor": "start",
 103                 fill : legendFontColor
 104             });
 105         });
 106
 107         return chart;
 108     };
 109
 110     //inheritance
 111     var F = function() {};
 112     F.prototype = Raphael.g;
 113     Barsplitchart.prototype = new F;
 114
 115     //public
 116     Raphael.fn.barsplitchart = function(width, height, values, opts) {
 117         return new Barsplitchart(this, width, height, values, opts);
 118     }
 119
 120 })();