You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

234 lines
8.9 KiB

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