Browse Source

HUE-412. Allow HueChart to deal with no data and pull out appropriate arrays representative of data series which are in the data object.

Marcus McLaughlin 15 years ago
parent
commit
b2b24d0be6

+ 15 - 2
desktop/core/static/js/Source/Hue/HueChart.Box.js

@@ -137,14 +137,27 @@ HueChart.Box = new Class({
 							if (this.hasEvent('pointMouseOut') && this.hasEvent('pointMouseOver') || this.hasEvent('pointClick') || this.options.showPointValue) this.addMouseEvents(vis);
 							//If there is a selection or drag event of any sort make the graph selectable.
 							if (this.selectable) this.makeSelectable(vis);
+							vis.render();
+						} else {
+							this.renderHasNoData();
 						}
 				}.bind(this));
 		},
+		
+		//Redefining to reflect the fact that one data point is not sufficient to render a line
+		hasData: function() {
+			return this.getData().getLength() > 1;
+		},
 
 		initializeData: function() {
 				this.series = [];
-				Hash.each(this.getData(true).getObjects()[0], function(value, key) {
-					if (!this.series.contains(key) && key != this.options.xProperty) this.series.push(key);
+				//Initialize dataSeries
+				dataObjs = this.getData(true).getObjects();
+				//Iterate through the data objects to create a list of the data series.
+				dataObjs.each(function(obj) {
+					Hash.each(obj, function(value, key) {
+						if (!this.series.contains(key) && key != this.options.xProperty) this.series.push(key);
+					}.bind(this));
 				}.bind(this));
 				if(this.options.dates.x) {
 						//If the xProperty is a date property, prepare the dates for sorting

+ 10 - 3
desktop/core/static/js/Source/Hue/HueChart.Line.js

@@ -23,7 +23,8 @@ HueChart.Line = new Class({
 		Extends: HueChart.Box,
 
 		options: {
-				lineWidth: 3 //Width of the lines in the chart
+				lineWidth: 3, //Width of the lines in the chart
+				showDot: false //Show a dot on each point of the line
 		},
 
 		initialize: function(element, options) {
@@ -36,10 +37,12 @@ HueChart.Line = new Class({
 				//In effort to maintain same data structure for lines and stacked charts, iterating
 				//through the series and adding a line using each series for its data points.
 				for (var itemIndex = 0; itemIndex < this.series.length; itemIndex++) {
+						var series = this.series[itemIndex];
+						var dataSeries = this.getData(true).getDataSeries(series);
 						//Add a line to the visualization, connecting points produced from the data object.
 						vis.add(pv.Line)
 								//Using as data, this.data.getObjects.
-								.data(this.getData(true).getObjects())
+								.data($lambda(dataSeries))
 								//Closures used because the function argument isn't executed until the render phase.
 								//Color the line, based on the color returned by the colorManager.
 								.strokeStyle(function(itemIndex) {
@@ -57,7 +60,11 @@ HueChart.Line = new Class({
 										}.bind(this);
 								}.bind(this)(itemIndex))
 								//Make the line's width 3 pixels.
-								.lineWidth(this.options.lineWidth);
+								.lineWidth(this.options.lineWidth)
+							.add(pv.Dot)
+							.strokeStyle('gray')
+							.size(this.options.showDot ? 5 : 0)
+							.lineWidth(1);
 				}
 		}
 });

+ 24 - 2
desktop/core/static/js/Source/Hue/HueChart.js

@@ -73,7 +73,8 @@ HueChart = new Class({
 				  topPadding: 0, // the padding between the top of the element, and the left of the graph,
 				  leftPadding: 0, // the padding between the left of the element, and the left of the graph,
 				  rightPadding: 0, // the padding between the right of the element, and the right of the graph,*/
-				  url: "noUrl" //the url of the page. this will be used as a key in the colorManager
+				  url: "noUrl", //the url of the page. this will be used as a key in the colorManager,
+				  noDataText: 'There is not enough data to render a chart.' //The text that will be displayed in the case that there is not enough data to display a chart.
 		},
 
 
@@ -126,7 +127,22 @@ HueChart = new Class({
 						.height(this.height);
 				this.vis.$dom = this.element.empty();
 				this.fireEvent('setupChart', this.vis);
-				this.vis.render();
+		},
+
+		renderHasNoData: function() {
+			this.element.setStyles({
+				width: this.width,
+				height: this.height
+			});
+			var emptyElement = new Element('div', {
+				text: this.options.noDataText,
+				styles: {
+					textAlign: 'center',
+					top: this.height/2,
+					fontSize: '16px',
+					fontWeight: 'bold'
+				}
+			}).inject(this.element);
 		},
 		
 		//Returns selected data index
@@ -373,6 +389,12 @@ HueChart.Data = new Class({
 		getRelativeTicks: function(maxTickCount, dateProperty, startMs, endMs) {
 			return this._getTicks(maxTickCount, dateProperty, false, startMs, endMs);
 		},
+		
+		getDataSeries: function(series) {
+			return this.dataObjects.filter(function (dataObj) {
+				return Hash.has(dataObj, series);
+			});
+		},
 
 		/* getTicks --
 				Returns an array of data objects to be marked as ticks on the domain (x) axis.