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 (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 there is a selection or drag event of any sort make the graph selectable.
 							if (this.selectable) this.makeSelectable(vis);
 							if (this.selectable) this.makeSelectable(vis);
+							vis.render();
+						} else {
+							this.renderHasNoData();
 						}
 						}
 				}.bind(this));
 				}.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() {
 		initializeData: function() {
 				this.series = [];
 				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));
 				}.bind(this));
 				if(this.options.dates.x) {
 				if(this.options.dates.x) {
 						//If the xProperty is a date property, prepare the dates for sorting
 						//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,
 		Extends: HueChart.Box,
 
 
 		options: {
 		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) {
 		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
 				//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.
 				//through the series and adding a line using each series for its data points.
 				for (var itemIndex = 0; itemIndex < this.series.length; itemIndex++) {
 				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.
 						//Add a line to the visualization, connecting points produced from the data object.
 						vis.add(pv.Line)
 						vis.add(pv.Line)
 								//Using as data, this.data.getObjects.
 								//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.
 								//Closures used because the function argument isn't executed until the render phase.
 								//Color the line, based on the color returned by the colorManager.
 								//Color the line, based on the color returned by the colorManager.
 								.strokeStyle(function(itemIndex) {
 								.strokeStyle(function(itemIndex) {
@@ -57,7 +60,11 @@ HueChart.Line = new Class({
 										}.bind(this);
 										}.bind(this);
 								}.bind(this)(itemIndex))
 								}.bind(this)(itemIndex))
 								//Make the line's width 3 pixels.
 								//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,
 				  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,
 				  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,*/
 				  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);
 						.height(this.height);
 				this.vis.$dom = this.element.empty();
 				this.vis.$dom = this.element.empty();
 				this.fireEvent('setupChart', this.vis);
 				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
 		//Returns selected data index
@@ -373,6 +389,12 @@ HueChart.Data = new Class({
 		getRelativeTicks: function(maxTickCount, dateProperty, startMs, endMs) {
 		getRelativeTicks: function(maxTickCount, dateProperty, startMs, endMs) {
 			return this._getTicks(maxTickCount, dateProperty, false, 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 --
 		/* getTicks --
 				Returns an array of data objects to be marked as ticks on the domain (x) axis.
 				Returns an array of data objects to be marked as ticks on the domain (x) axis.