Merge pull request #10 from OOcharts/bar-charts

Added bar charts for Issue #9 (Feature Request)
tshaddix · Aug 11, 2013 · 41b9728 · 41b9728
2 parents e59fc7f + 1478a8a
commit 41b9728
Show file tree

Hide file tree

Showing 5 changed files with 145 additions and 3 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+.c9revisions
diff --git a/examples/bar.html b/examples/bar.html
@@ -0,0 +1,35 @@
+<html>
+	<head>
+	</head>
+	<body>
+		<h3>With JS</h3>
+		<div id='chart'></div>
+
+		<h3>With HTML Attributes</h3>
+		<div data-oochart='bar' data-oochart-start-date='30d' data-oochart-metrics='ga:visits,Visits,ga:newVisits,New Visits' data-oochart-dimension='ga:continent' data-oochart-profile='{{ YOUR PROFILE ID }}'></div>
+
+		<script src='../oocharts.js'></script>
+		<script type="text/javascript">
+
+			window.onload = function(){
+
+				oo.setAPIKey("{{ YOUR API KEY }}");
+
+				oo.load(function(){
+
+					var bar = new oo.Bar("{{ YOUR PROFILE ID }}", "30d");
+
+					bar.addMetric("ga:visits", "Visits");
+
+					bar.addMetric("ga:newVisits", "New Visits");
+
+					bar.setDimension("ga:continent");
+
+					bar.draw('chart');
+
+				});
+			};
+
+		</script>
+	</body>
+</html>
diff --git a/examples/metric.html b/examples/metric.html
@@ -6,7 +6,7 @@ <h3>With JS</h3>
 		Visits : <span id='metric'></span>
 
 		<h3>With HTML Attributes</h3>
-		New Visits : <span data-oochart='metric' data-oochart-metric='ga:newVisits' data-oochart-start-date='30d' data-oochart-profile='{{ YOUR PROFILE ID }}'></span>
+		Visits : <span data-oochart='metric' data-oochart-metric='ga:visits' data-oochart-start-date='30d' data-oochart-profile='{{ YOUR PROFILE ID }}'></span>
 
 		<script src='../oocharts.js'></script>
 		<script type="text/javascript">

diff --git a/oocharts.js b/oocharts.js
@@ -9,6 +9,8 @@ var oo = (function(document){
 
 	var _defaultTableOptions = {};
 
+	var _defaultBarOptions = {};
+
 	/*
 	 * Binds OOcharts Objects to DOM Elements based on HTML attributes
 	 */
@@ -63,6 +65,22 @@ var oo = (function(document){
 
 				timeline.draw(_element);
 
+			} else if (type.toLowerCase() === 'bar' ) {
+				var bar = new _Bar(profile, startDate, endDate);
+
+				var metricsString = _element.getAttribute('data-oochart-metrics');
+				var metrics = metricsString.split(',');
+
+				for(var m = 0; m < metrics.length; m++){
+					bar.addMetric(metrics[m], metrics[m+1]);
+					m=m+1;
+				}
+
+				var dimension = _element.getAttribute('data-oochart-dimension');
+
+				bar.setDimension(dimension);
+
+				bar.draw(_element);
 			//if pie
 			} else if (type.toLowerCase() === 'pie'){
 				var pie = new _Pie(profile, startDate, endDate);
@@ -527,6 +545,93 @@ var oo = (function(document){
 			}
 		});
 	};
+
+	/*------------------------------------------------------------
+	Bar
+	-------------------------------------------------------------*/
+
+	/*
+	 * Bar constructor
+	 * @param {String} profile
+	 * @param {Date or String} startDate
+	 * @param {Date or String} endDate
+	 */
+	var _Bar = function(profile, startDate, endDate){
+		this.query = new _Query(profile, startDate, endDate);
+
+		this.metricLabels = [];
+
+		this.options = _defaultBarOptions;
+	};
+
+	/*
+	 * Override default options
+	 * @param {Object} opts
+	 */
+	_Bar.prototype.setOptions = function(opts){
+		this.options = opts;
+	};
+
+	/*
+	 * Adds a metric to Bar
+	 * @param {String} metric
+	 * @param {String} label
+	 */
+	_Bar.prototype.addMetric = function(metric, label){
+		this.metricLabels.push(label);
+		this.query.addMetric(metric);
+	};
+
+	/*
+	 * Set dimension of Bar
+	 * @param {String} dimension
+	 */
+	_Bar.prototype.setDimension = function(dimension){
+		this.query.clearDimensions();
+		this.query.dimensions.push(dimension);
+		this.dimensionLabel = dimension;
+	};
+
+	/*
+	 * Draws Bar in container element
+	 * @param {Element or String} container (or id of container element)
+	 * @param {Function} fn
+	 */
+	_Bar.prototype.draw = function(container, fn){
+		var b = this;
+
+		this.query.execute(function (response) {
+
+			var data = response.rows;
+
+			var dt = new google.visualization.DataTable();
+
+			dt.addColumn('string', b.dimensionLabel);
+
+			// Add data column labels
+			for (var l = 0; l < b.metricLabels.length; l++) {
+				dt.addColumn('number', b.metricLabels[l]);
+			}
+
+			// add data
+			dt.addRows(data);
+
+			var element;
+
+			if(typeof container === 'string'){
+				element = document.getElementById(container);
+			} else {
+				element = container;
+			}
+
+			var chart = new google.visualization.BarChart(element);
+			chart.draw(dt, b.options);
+
+			if (typeof fn != 'undefined') {
+				fn();
+			}
+		});
+	};
 
 	/*------------------------------------------------------------
 	Pie
@@ -707,6 +812,7 @@ var oo = (function(document){
 	return {
 		Query : _Query,
 		Timeline : _Timeline,
+		Bar : _Bar,
 		Metric : _Metric,
 		Pie : _Pie,
 		Table : _Table,
@@ -795,4 +901,4 @@ var JSONP = (function (document) {
          */
         callbacks: callbacks
     };
-})(document);
+}(document));
diff --git a/oocharts.min.js b/oocharts.min.js