1 
  2 /**
  3  * @fileoverview Simple bubble chart implementation.
  4  * @version 1.0.1
  5  * @link http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml
  6  * @link https://developers.google.com/closure/compiler/docs/js-for-compiler
  7  */
  8 
  9 
 10 
 11 /**
 12  * FunnelChart constructor.
 13  * @param {string|Element} container The HTML container.
 14  * @constructor
 15  * @extends {charts.BubbleChart} charts.BubbleChart
 16  * @example
 17  * <b>var</b> chart = <b>new</b> charts.FunnelChart('container_id');
 18  * chart.draw([['ID',   'Temperature'],
 19  *             ['USA',            120],
 20  *             ['CAN',             50],
 21  *             ['RUS',             80],
 22  *             ['GBR',             40]
 23  * ]);
 24  *
 25  * <div id="chart-container"
 26  *      style="width: 560px; height: 300px; margin-left: 20px;"></div>
 27  * <script src="http://datamart.github.io/Greylock/greylock.js"></script>
 28  * <script>
 29  *   var chart = new charts.FunnelChart('chart-container');
 30  *   chart.draw([['ID',   'Temperature'],
 31  *               ['USA',            120],
 32  *               ['CAN',             50],
 33  *               ['RUS',             80],
 34  *               ['GBR',             40]
 35  *   ]);
 36  * </script>
 37  */
 38 charts.FunnelChart = function(container) {
 39   charts.BubbleChart.apply(this, arguments);
 40 
 41   /**
 42    * Saved reference to charts.BubbleChart.draw method.
 43    * @type {!function(!Array.<Array>, Object=)}
 44    * @private
 45    */
 46   var draw_ = this.draw;
 47 
 48   /**
 49    * Draws the chart based on <code>data</code> and <code>opt_options</code>.
 50    * @param {!Array.<Array>} data A chart data.
 51    * @param {Object=} opt_options A optional chart's configuration options.
 52    * @override
 53    */
 54   this.draw = function(data, opt_options) {
 55     opt_options = getOptions_(opt_options);
 56 
 57     /** @type {number} */ var index = (data[0] && data[0].length - 1) || 0;
 58     /** @type {!Array.<number>} */
 59     var range = self_.getDataRange(data, index);
 60 
 61     /** @type {number} */ var width = self_.container.offsetWidth || 200;
 62     /** @type {number} */ var height = self_.container.offsetHeight || width;
 63     /** @type {number} */ var limit = Math.min(width, height) / 2;
 64 
 65     /** @type {!Array.<Array>} */
 66     var result = getBubbleChartData_(data, range[1], limit, index, width / 2);
 67     draw_(result, opt_options);
 68   };
 69 
 70   // Export for closure compiler.
 71   this['draw'] = this.draw;
 72 
 73   /**
 74    * @param {!Array.<Array>} data A chart data.
 75    * @param {number} maxValue The max value.
 76    * @param {number} limit The radius limit.
 77    * @param {number} index The value column index.
 78    * @param {number} center The center X coordinate.
 79    * @return {!Array.<Array>} Returns data converted to BubbleChart data format.
 80    * @private
 81    */
 82   function getBubbleChartData_(data, maxValue, limit, index, center) {
 83     /** @type {!Array.<Array>} */
 84     var result = [[data[0][0], '', '', data[0][index]]];
 85     for (/** @type {number} */ var i = 1; i < data.length; i++) {
 86       /** @type {Array} */ var row = data[i];
 87       /** @type {number} */ var value = row[index];
 88       /** @type {number} */ var y = Math.sqrt(value / Math.PI) /
 89           Math.sqrt(maxValue / Math.PI) * limit;
 90           value && result.push([row[0], center, y, value]);
 91     }
 92     return result;
 93   }
 94 
 95   /**
 96    * Gets chart's options merged with defaults chart's options.
 97    * @param {Object=} opt_options A optional chart's configuration options.
 98    * @return {!Object.<string, *>} A map of name/value pairs.
 99    * @private
100    */
101   function getOptions_(opt_options) {
102     opt_options = opt_options || {};
103     opt_options['hAxis'] = false;
104     opt_options['vAxis'] = false;
105     opt_options['limit'] = 100; // Radius limit in percents.
106     opt_options['funnel'] = true;
107     return opt_options;
108     // return self_.getOptions(opt_options);
109   }
110 
111   /**
112    * The reference to current class instance. Used in private methods.
113    * @type {!charts.FunnelChart}
114    * @private
115    */
116   var self_ = this;
117 };
118 
119 // Export for closure compiler.
120 charts['FunnelChart'] = charts.FunnelChart;
121