Source: chart.js

  1. /*
  2.  * JBoss, Home of Professional Open Source
  3.  * Copyright ${year}, Red Hat, Inc. and individual contributors
  4.  * by the @authors tag. See the copyright.txt in the distribution for a
  5.  * full listing of individual contributors.
  6.  *
  7.  * This is free software; you can redistribute it and/or modify it
  8.  * under the terms of the GNU Lesser General Public License as
  9.  * published by the Free Software Foundation; either version 2.1 of
  10.  * the License, or (at your option) any later version.
  11.  *
  12.  * This software is distributed in the hope that it will be useful,
  13.  * but WITHOUT ANY WARRANTY; without even the implied warranty of
  14.  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
  15.  * Lesser General Public License for more details.
  16.  *
  17.  * You should have received a copy of the GNU Lesser General Public
  18.  * License along with this software; if not, write to the Free
  19.  * Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA
  20.  * 02110-1301 USA, or see the FSF site: http://www.fsf.org.
  21.  */
  23. (function ($, rf) {
  24. 	var defaultOptions = {
  26. 	      /**
  27. 	       * Specifies the type of chart.
  28. 	       * According to this property and xtypex ytype, proper default options corresponding to chart type
  29. 	       * are applied and data are transformed to the format expected by flot.
  30. 	       * Following values are supported: `line`,`bar`,`pie`
  31. 	       * Options is not required. If it is not used the options and data format remains the same as flot uses by default.
  32. 	       * @property charttype
  33. 	       * @default null
  34. 	       */
  35. 	      charttype: '',
  37. 	      /**
  38. 	       * Specify the data type of values plotted on x-axis
  39. 	       * Following options are supported: number,string,date
  40. 	       * @property xtype
  41. 	       * @default null
  42. 	       */
  43. 	      xtype: '',
  45. 	      /**
  46. 	       * Specify the data type of values plotted on x-axis
  47. 	       * Following options are supported: number,string,date
  48. 	       * @property xtype
  49. 	       * @default null
  50. 	       */
  51. 	      ytype: '',
  53. 	      /**
  54. 	       * Allows to zoom the chart. Supported only when line chart is used. Requires charttype to be set.
  55. 	       * @property zoom
  56. 	       * @default false
  57. 	       */
  58. 	      zoom: false,
  62. 	     /**
  63. 	      * Options customizing the chart grid.
  64. 	      * @type Object
  65. 	      * @default {clickable:true, hoverable:true}
  66. 	      * @property grid
  67. 	      *   @property clickable {boolean}
  68. 	      *   Grid accepts click events.
  69. 	      *   @property hoverable {boolean}
  70. 	      *   Grid fires mouseover event. Necessary for tooltip to work.
  71. 	      *
  72. 	      */
  73. 	     grid: {
  74. 	        clickable: true,
  75. 	        hoverable: true
  76. 	      },
  78. 	      /**
  79. 	       * Turns on tooltip (text shown when mouse points to a part of a chart)
  80. 	       * @property tooltip
  81. 	       * @type boolean
  82. 	       * @default true
  83. 	       */
  84. 	      tooltip: true,
  86. 	      /**
  87. 	       * Customizes the tooltip.
  88. 	       * @type Object
  89. 	       * @default { content: '%s [%x,%y]'}
  90. 	       * @property tooltipOpts
  91. 	       *    @property content {string}
  92. 	       *    Specify the tooltip format. Use %s for series label, %x for X values, %y for Y value
  93. 	       *    @property defaultTheme
  94. 	       */
  95. 	      tooltipOpts: {
  96. 	        content: '%s  [%x,%y]',
  97. 	        shifts: {
  98. 	          x: 20,
  99. 	          y: 0
  100. 	        },
  101. 	        defaultTheme: false
  102. 	      },
  104. 	      /**
  105. 	       * Legend properties
  106. 	       * @type Object
  107. 	       * @default {postion:'ne', sorted: 'ascending'}
  108. 	       * @property legend
  109. 	       *    @property position {string}
  110. 	       *    Defines the placement of the legend in the grid. One of ne,nw,se,sw
  111. 	       *    @property sorted {string}
  112. 	       *    Defines the order of labels in the legend. One of ascending,descending,false.
  113. 	       */
  114. 	      legend: {
  115. 	        postion:'ne',
  116. 	        sorted: 'ascending'
  117. 	      },
  119. 	      /**
  120. 	       * Customizes the horizontal axis
  121. 	       * @type Object
  122. 	       * @default {min: null, max: null,autoscaleMargin: null, axisLabel: ''}
  123. 	       * @property xaxis
  124. 	       *   @property min {number}
  125. 	       *   Minimal value shown on axis
  126. 	       *   @property max {number}
  127. 	       *   Maximal values show on axis
  128. 	       *   @property autoscaleMargin {number}
  129. 	       *   It's the fraction of margin that the scaling algorithm will add
  130. 	       *   to avoid that the outermost points ends up on the grid border
  131. 	       *   @property axisLabel {string}
  132. 	       *   Axis description
  133. 	       */
  134. 	      xaxis:{
  135. 	        min: null,
  136. 	        max: null,
  137. 	        autoscaleMargin: null,
  138. 	        axisLabel: ''
  139. 	      },
  141. 	      /**
  142. 	       * Customizes the vertical axis
  143. 	       * @type Object
  144. 	       * @default {min: null, max: null,autoscaleMargin: 0.2,axisLabel: ''}
  145. 	       * @property yaxis
  146. 	       *   @property min {number}
  147. 	       *   Minimal value shown on axis
  148. 	       *   @property max {number}
  149. 	       *   Maximal values show on axis
  150. 	       *   @property autoscaleMargin {number}
  151. 	       *   It's the fraction of margin that the scaling algorithm will add to
  152. 	       *   avoid that the outermost points ends up on the grid border.
  153. 	       *   @property axisLabel {string}
  154. 	       *   Axis description
  155. 	       */
  156. 	      yaxis:{
  157. 	        min: null,
  158. 	        max: null,
  159. 	        autoscaleMargin: 0.2,
  160. 	        axisLabel: ''
  161. 	      },
  166. 	      /**
  167. 	       * Data to be plotted. The format is the same used by flot. The format may differ if the charttype
  168. 	       * option is set to pie or bar.
  169. 	       * @property data
  170. 	       * @default []
  171. 	       */
  172. 	      data:[]
  174. 	    };
  175. 	    
  176. 	var pieDefaults = {
  177. 	      series: {
  178. 	          pie: {
  179. 	            show: true
  180. 	          }
  181. 	        },
  182. 	        tooltipOpts: {
  183. 	          content: ' %p.0%, %s'
  184. 	        }
  185. 	      };
  186. 	 var _plotClickServerSide = function (event, clientId) {
  187. 	      var params = {};
  188. 	      params[clientId + 'name'] = "plotclick";
  189. 	      params[clientId + 'seriesIndex'] = event.data.seriesIndex;
  190. 	      params[clientId + 'dataIndex'] = event.data.dataIndex;
  191. 	      params[clientId + 'x'] = event.data.x;
  192. 	      params[clientId + 'y'] = event.data.y;
  194. 	      rf.ajax(clientId, event, {
  195. 	        parameters: params,
  196. 	        incId: 1
  197. 	      });
  199. 	    };
  201.         var handleStringTicks = function(options) {
  202.         /*
  203.          * data transformation:
  204.          * data: [["label1", value1], ["label2", value2"], …]
  205.          * 
  206.          * =>
  207.          * 
  208.          * data: [[0, value1], [1, value2], …] 
  209.          * ticks: [[0, "label1"], [1, "label2"], …]
  210.          *
  211.          */
  212.         options.xaxis.tickLength = 0;
  214.         var seriesLength,
  215.             seriesTotal = options.data.length,
  216.             _tickNames = {},
  217.             _tickTotal = 0,
  218.             _currTickNumber,
  219.             _currItem;
  221.         if (options.charttype === 'bar') {
  222.             options.bars = options.bars || {};
  223.             options.bars.barWidth = 1 / (seriesTotal + 1);
  224.         }
  225.         for (var i = 0; i < seriesTotal; i++) {
  226.             seriesLength = options.data[i].data.length;
  228.             if (options.charttype === 'bar') {
  229.                 options.data[i].bars.order = i;
  230.             }
  231.             for (var j = 0; j < seriesLength; j++) { 
  232.                 _currItem = options.data[i].data[j];
  233.                 _currTickNumber = _tickNames[_currItem[0]];
  235.                 if (_currTickNumber == undefined) {
  236.                     _currTickNumber = _tickTotal++;
  237.                     _tickNames[_currItem[0]] = _currTickNumber;
  238.                 }
  240.                 _currItem[0] = _currTickNumber;
  241.             }
  242.         }
  244.         options.xaxis.ticks = [];
  245.         for (tick in _tickNames) {
  246.             options.xaxis.ticks.push([_tickNames[tick],tick]);
  247.         }
  248.     };
  250.     rf.ui = rf.ui || {};
  252.     rf.ui.Chart = rf.BaseComponent.extendClass({
  253.             // class name
  254.             name:"Chart",
  256.             /**
  257.              * Backing object for rich:chart
  258.              * 
  259.              * @extends RichFaces.BaseComponent
  260.              * @memberOf! RichFaces.ui
  261.              * @constructs RichFaces.ui.Chart
  262.              * 
  263.              * @param componentId
  264.              * @param options
  265.              */
  266.             init : function (componentId, options) {
  267.             	$super.constructor.call(this, componentId, options);
  269.                 this.namespace = this.namespace || "." + RichFaces.Event.createNamespace(this.name, this.id);
  270.                 this.attachToDom();
  271.             	this.options = $.extend(true,{},defaultOptions,options);
  272.             	
  273.             	this.element = $(document.getElementById(componentId));
  274.                 this.chartElement = this.element.find(".chart");
  275.             	
  276.             	if (this.options.charttype === 'pie') {
  277.                     this.options = $.extend(true,{},this.options,pieDefaults);
  278.                     //transform data from
  279.                     // [[{data:1, label:"label1"},{data:2,label:"label2"},...]]
  280.                     //to
  281.                     // [{data:1, label:"label1"},{data:2,label:"label2"},...]
  282.                     this.options.data = this.options.data[0]; //pie chart data should not be in a collection
  283.                 }
  284.                 else if (this.options.charttype === 'bar') {
  285.                     if (this.options.xtype === 'string') {
  286.                         handleStringTicks(this.options);
  287.                     }
  288.                   }
  289.                   else if (options.charttype === 'line') {
  290.                     if (this.options.xtype === 'string') {
  291.                         handleStringTicks(this.options);
  292.                     }
  293.                     if (options.zoom) {
  294.                       this.options.selection = {mode: 'xy'};
  295.                     }
  296.                     if (this.options.xtype === 'date') {
  297.                       this.options = $.extend({},this.options, dateDefaults);
  298.                       if (this.options.xaxis.format) {
  299.                         this.options.xaxis.timeformat = this.options.xaxis.format;
  300.                       }
  301.                     }
  302.                   }
  303.             	
  304.                 this.plot = $.plot(this.chartElement,this.options.data,this.options);
  305.                 this.__bindEventHandlers(this.chartElement,this.options);
  306.             },
  308.             /***************************** Public Methods  ****************************************************************/
  310.             /**
  311.              * Returns chart object
  312.              *
  313.              * @method
  314.              * @name RichFaces.ui.Chart#getPlotObject
  315.              * @return {Plot} chart object
  316.              */
  317.             getPlotObject: function () {
  318.               return this.plot;
  319.             },
  321.             /**
  322.              * Highlights the point in chart selected by seriesIndex or point index. Does not work for pie charts.
  323.              * 
  324.              * @method
  325.              * @name RichFaces.ui.Chart#highlight
  326.              * @param seriesIndex {int} index of the series
  327.              * @param pointIndex {int} index of the point
  328.              */
  329.             highlight: function(seriesIndex,pointIndex){
  330.                this.plot.highlight(seriesIndex,pointIndex);
  331.             },
  332.             /**
  333.              * Removes highlighting of point. If method is called without parameters it unhighlights all points.
  334.              * 
  335.              * @method
  336.              * @name RichFaces.ui.Chart#unhighlight
  337.              * @param seriesIndex {int} index of the series
  338.              * @param pointIndex {int} index of the point
  339.              */
  340.             unhighlight: function(seriesIndex,pointIndex){
  341.                this.plot.unhighlight(seriesIndex,pointIndex);
  342.             },
  344.             /***************************** Private Methods ********************************************************/
  345.             __bindEventHandlers:function(element,options){
  346.             	
  347.                 element.on('plotclick', this._getPlotClickHandler(options, element.get(0), _plotClickServerSide));
  348.                 element.on('plothover', this._getPlotHoverHandler(options, element.get(0)));
  349.             	if (options.handlers && options.handlers.onmouseout) {
  350.                     element.on('mouseout', options.handlers.onmouseout);
  351.                 }
  353.                 if (options.zoom) {
  354.                     element.on('plotselected', $.proxy(this._zoomFunction, this));
  355.                 }
  356.                 
  357.             },
  358.           //function handles plotclick event. it calls server-side, client-side and particular series handlers if set.
  359.             _getPlotClickHandler: function (options, element, serverSideHandler) {
  360.             	
  361.               var clickHandler = options.handlers['onplotclick'];	
  362.               var particularClickHandlers= options.particularSeriesHandlers['onplotclick'];
  363.               var clientId = this.element.attr('id');
  364.               return function (event, pos, item) {
  365.                 if (item !== null) {
  366.                   //point in a chart clicked
  367.                   event.data = {
  368.                     seriesIndex: item.seriesIndex,
  369.                     dataIndex: item.dataIndex,
  370.                     x: item.datapoint[0],
  371.                     y: item.datapoint[1],
  372.                     item: item
  373.                   };
  374.                   if(options.charttype=="pie"){
  375.                 	  event.data.x = options.data[item.seriesIndex].label;
  376.                 	  event.data.y = item.datapoint[1][0][1];
  377.                   }
  378.                   else if(options.charttype=="bar" && options.xtype=="string"){
  379.                     event.data.x = options.xaxis.ticks[item.dataIndex][1];
  381.                   }
  382.                 } else {
  383.                     event.data = {
  384.                         x: pos.x,
  385.                         y: pos.y
  386.                     };
  387.                 }
  388.                   //sent request only if a server-side listener attached
  389.                   if (options.serverSideListener) {
  390.                     //server-side
  391.                     if (serverSideHandler) {
  392.                       serverSideHandler(event, clientId);
  393.                     }
  394.                   }
  396.                   //client-side
  397.                   if (clickHandler) {
  398.                 	 clickHandler.call(element, event);
  399.                   }
  400.                   //client-side particular series handler
  401.                   if (particularClickHandlers[event.data.seriesIndex]) {
  402.                 	  particularClickHandlers[event.data.seriesIndex].call(element, event);
  403.                   }
  404.               };
  405.             },
  406.             
  407.             //function handles plothover event. it calls client-side and particular series handlers if set.
  408.             _getPlotHoverHandler: function (options, element) {
  409.               var hoverHandler = options.handlers['onplothover'];	
  410.               var particularHoverHandlers =	options.particularSeriesHandlers['onplothover']; 
  411.               
  412.               return function (event, pos, item) {
  413.                 if (item !== null) {
  414.                   //point in a chart clicked
  415.                   event.data = {
  416.                     seriesIndex: item.seriesIndex,
  417.                     dataIndex: item.dataIndex,
  418.                     x: item.datapoint[0],
  419.                     y: item.datapoint[1],
  420.                     item: item
  421.                   };
  422.                 } else {
  423.                     event.data = {
  424.                         x: pos.x,
  425.                         y: pos.y
  426.                     };
  427.                 }
  428.                   //client-side
  429.                   if (hoverHandler) {
  430.                     hoverHandler.call(element, event);
  431.                   }
  433.                   //client-side particular series handler
  434.                   if (particularHoverHandlers[event.data.seriesIndex]) {
  435.                 	  particularHoverHandlers[event.data.seriesIndex].call(element, event);
  436.                   }
  437.                 
  438.               };
  439.             },
  441.             _zoomFunction: function (event, ranges) {
  442.                 var plot = this.getPlotObject();
  443.                 $.each(plot.getXAxes(), function(_, axis) {
  444.                     var opts = axis.options;
  445.                     opts.min = ranges.xaxis.from;
  446.                     opts.max = ranges.xaxis.to;
  447.                 });
  448.                 plot.setupGrid();
  449.                 plot.draw();
  450.                 plot.clearSelection();
  451.             },
  453.             /**
  454.              * Reset the zoom level
  455.              *
  456.              * @method
  457.              * @name RichFaces.ui.Chart#resetZoom
  458.              */
  459.             resetZoom: function () {
  460.                 this.plot = $.plot(this.chartElement,this.options.data,this.options);
  461.             },
  463.             destroy: function () {
  464.                 rf.Event.unbindById(this.id, "." + this.namespace);
  465.                 $super.destroy.call(this);
  466.             }
  467.         });
  469.     // define super class link
  470.     var $super = rf.ui.Chart.$super;
  471. })(RichFaces.jQuery, RichFaces);