scripts/jquery/jqplot1.0/plugins/jqplot.blockRenderer.js

   1 /**
   2  * jqPlot
   3  * Pure JavaScript plotting plugin using jQuery
   4  *
   5  * Version: 1.0.4
   6  * Revision: 1120
   7  *
   8  * Copyright (c) 2009-2012 Chris Leonello
   9  * jqPlot is currently available for use in all personal or commercial projects
  10  * under both the MIT (http://www.opensource.org/licenses/mit-license.php) and GPL
  11  * version 2.0 (http://www.gnu.org/licenses/gpl-2.0.html) licenses. This means that you can
  12  * choose the license that best suits your project and use it accordingly.
  13  *
  14  * Although not required, the author would appreciate an email letting him
  15  * know of any substantial use of jqPlot.  You can reach the author at:
  16  * chris at jqplot dot com or see http://www.jqplot.com/info.php .
  17  *
  18  * If you are feeling kind and generous, consider supporting the project by
  19  * making a donation at: http://www.jqplot.com/donate.php .
  20  *
  21  * sprintf functions contained in jqplot.sprintf.js by Ash Searle:
  22  *
  23  *     version 2007.04.27
  24  *     author Ash Searle
  25  *     http://hexmen.com/blog/2007/03/printf-sprintf/
  26  *     http://hexmen.com/js/sprintf.js
  27  *     The author (Ash Searle) has placed this code in the public domain:
  28  *     "This code is unrestricted: you are free to use it however you like."
  29  *
  30  */
  31 (function($) {
  32     /**
  33      * Class: $.jqplot.BlockRenderer
  34      * Plugin renderer to draw a x-y block chart.  A Block chart has data points displayed as
  35      * colored squares with a text label inside.  Data must be supplied in the form:
  36      *
  37      * > [[x1, y1, "label 1", {css}], [x2, y2, "label 2", {css}], ...]
  38      *
  39      * The label and css object are optional.  If the label is ommitted, the
  40      * box will collapse unless a css height and/or width is specified.
  41      *
  42      * The css object is an object specifying css properties
  43      * such as:
  44      *
  45      * > {background:'#4f98a5', border:'3px solid gray', padding:'1px'}
  46      *
  47      * Note that css properties specified with the data point override defaults
  48      * specified with the series.
  49      *
  50      */
  51     $.jqplot.BlockRenderer = function(){
  52         $.jqplot.LineRenderer.call(this);
  53     };
  54
  55     $.jqplot.BlockRenderer.prototype = new $.jqplot.LineRenderer();
  56     $.jqplot.BlockRenderer.prototype.constructor = $.jqplot.BlockRenderer;
  57
  58     // called with scope of a series
  59     $.jqplot.BlockRenderer.prototype.init = function(options) {
  60         // Group: Properties
  61         //
  62         // prop: css
  63         // default css styles that will be applied to all data blocks.
  64         // these values will be overridden by css styles supplied with the
  65         // individulal data points.
  66         this.css = {padding:'2px', border:'1px solid #999', textAlign:'center'};
  67         // prop: escapeHtml
  68         // true to escape html in the box label.
  69         this.escapeHtml = false;
  70         // prop: insertBreaks
  71         // true to turn spaces in data block label into html breaks <br />.
  72         this.insertBreaks = true;
  73         // prop: varyBlockColors
  74         // true to vary the color of each block in this series according to
  75         // the seriesColors array.  False to set each block to the color
  76         // specified on this series.  This has no effect if a css background color
  77         // option is specified in the renderer css options.
  78         this.varyBlockColors = false;
  79         $.extend(true, this, options);
  80         if (this.css.backgroundColor) {
  81             this.color = this.css.backgroundColor;
  82         }
  83         else if (this.css.background) {
  84             this.color = this.css.background;
  85         }
  86         else if (!this.varyBlockColors) {
  87             this.css.background = this.color;
  88         }
  89         this.canvas = new $.jqplot.BlockCanvas();
  90         this.shadowCanvas =  new $.jqplot.BlockCanvas();
  91         this.canvas._plotDimensions = this._plotDimensions;
  92         this.shadowCanvas._plotDimensions = this._plotDimensions;
  93         this._type = 'block';
  94
  95         // group: Methods
  96         //
  97         // Method: moveBlock
  98         // Moves an individual block.  More efficient than redrawing
  99         // the whole series by calling plot.drawSeries().
 100         // Properties:
 101         // idx - the 0 based index of the block or point in this series.
 102         // x - the x coordinate in data units (value on x axis) to move the block to.
 103         // y - the y coordinate in data units (value on the y axis) to move the block to.
 104         // duration - optional parameter to create an animated movement.  Can be a
 105         // number (higher is slower animation) or 'fast', 'normal' or 'slow'.  If not
 106         // provided, the element is moved without any animation.
 107         this.moveBlock = function (idx, x, y, duration) {
 108             // update plotData, stackData, data and gridData
 109             // x and y are in data coordinates.
 110             var el = this.canvas._elem.children(':eq('+idx+')');
 111             this.data[idx][0] = x;
 112             this.data[idx][1] = y;
 113             this._plotData[idx][0] = x;
 114             this._plotData[idx][1] = y;
 115             this._stackData[idx][0] = x;
 116             this._stackData[idx][1] = y;
 117             this.gridData[idx][0] = this._xaxis.series_u2p(x);
 118             this.gridData[idx][1] = this._yaxis.series_u2p(y);
 119             var w = el.outerWidth();
 120             var h = el.outerHeight();
 121             var left = this.gridData[idx][0] - w/2 + 'px';
 122             var top = this.gridData[idx][1] - h/2 + 'px';
 123             if (duration) {
 124                 if (parseInt(duration, 10)) {
 125                     duration = parseInt(duration, 10);
 126                 }
 127                 el.animate({left:left, top:top}, duration);
 128             }
 129             else {
 130                 el.css({left:left, top:top});
 131             }
 132             el = null;
 133         };
 134     };
 135
 136     // called with scope of series
 137     $.jqplot.BlockRenderer.prototype.draw = function (ctx, gd, options) {
 138         if (this.plugins.pointLabels) {
 139             this.plugins.pointLabels.show = false;
 140         }
 141         var i, el, d, gd, t, css, w, h, left, top;
 142         var opts = (options != undefined) ? options : {};
 143         var colorGenerator = new $.jqplot.ColorGenerator(this.seriesColors);
 144         this.canvas._elem.empty();
 145         for (i=0; i<this.gridData.length; i++) {
 146             d = this.data[i];
 147             gd = this.gridData[i];
 148             t = '';
 149             css = {};
 150             if (typeof d[2] == 'string') {
 151                 t = d[2];
 152             }
 153             else if (typeof d[2] == 'object') {
 154                 css = d[2];
 155             }
 156             if (typeof d[3] ==  'object') {
 157                 css = d[3];
 158             }
 159             if (this.insertBreaks){
 160                 t = t.replace(/ /g, '<br />');
 161             }
 162             css = $.extend(true, {}, this.css, css);
 163             // create a div
 164             el = $('<div style="position:absolute;margin-left:auto;margin-right:auto;"></div>');
 165             this.canvas._elem.append(el);
 166             // set text
 167             this.escapeHtml ? el.text(t) : el.html(t);
 168             // style it
 169             // remove styles we don't want overridden.
 170             delete css.position;
 171             delete css.marginRight;
 172             delete css.marginLeft;
 173             if (!css.background && !css.backgroundColor && !css.backgroundImage){
 174                 css.background = colorGenerator.next();
 175             }
 176             el.css(css);
 177             w = el.outerWidth();
 178             h = el.outerHeight();
 179             left = gd[0] - w/2 + 'px';
 180             top = gd[1] - h/2 + 'px';
 181             el.css({left:left, top:top});
 182             el = null;
 183         }
 184     };
 185
 186     $.jqplot.BlockCanvas = function() {
 187         $.jqplot.ElemContainer.call(this);
 188         this._ctx;
 189     };
 190
 191     $.jqplot.BlockCanvas.prototype = new $.jqplot.ElemContainer();
 192     $.jqplot.BlockCanvas.prototype.constructor = $.jqplot.BlockCanvas;
 193
 194     $.jqplot.BlockCanvas.prototype.createElement = function(offsets, clss, plotDimensions) {
 195         this._offsets = offsets;
 196         var klass = 'jqplot-blockCanvas';
 197         if (clss != undefined) {
 198             klass = clss;
 199         }
 200         var elem;
 201         // if this canvas already has a dom element, don't make a new one.
 202         if (this._elem) {
 203             elem = this._elem.get(0);
 204         }
 205         else {
 206             elem = document.createElement('div');
 207         }
 208         // if new plotDimensions supplied, use them.
 209         if (plotDimensions != undefined) {
 210             this._plotDimensions = plotDimensions;
 211         }
 212
 213         var w = this._plotDimensions.width - this._offsets.left - this._offsets.right + 'px';
 214         var h = this._plotDimensions.height - this._offsets.top - this._offsets.bottom + 'px';
 215         this._elem = $(elem);
 216         this._elem.css({ position: 'absolute', width:w, height:h, left: this._offsets.left, top: this._offsets.top });
 217
 218         this._elem.addClass(klass);
 219         return this._elem;
 220     };
 221
 222     $.jqplot.BlockCanvas.prototype.setContext = function() {
 223         this._ctx = {
 224             canvas:{
 225                 width:0,
 226                 height:0
 227             },
 228             clearRect:function(){return null;}
 229         };
 230         return this._ctx;
 231     };
 232
 233 })(jQuery);
 234
 235