Multi-chart slider and colors for individual bars

RangeSlider now works with multiple charts and a single slider, by using an array with the graph variables: var slider_three = new Rickshaw.Graph.RangeSlider({ element: document.querySelector('#slider-range'), graph: [graph_one, graph_two, graph_three] }); The bar chart renderer now looks for a proposed color for each individual bar, it will default to the chart-specific color if no color is declared: var data = [{ data: [{ x: -1893456000, y: 29389330}, { x: -1577923200, y: 33125803}, { x: -1262304000, y: 37857633, color:'#06f'}, { x: -946771200, y: 41665901, color:'#0cf'} ], color: 'shutterstock#222' }]
bohan · Aug 23, 2016 · 632d1fb · 632d1fb
1 parent 08d9544
commit 632d1fb
Show file tree

Hide file tree

Showing 2 changed files with 83 additions and 31 deletions.
diff --git a/src/js/Rickshaw.Graph.RangeSlider.js b/src/js/Rickshaw.Graph.RangeSlider.js
@@ -23,40 +23,91 @@ Rickshaw.Graph.RangeSlider = Rickshaw.Class.create({
 		var domain = graph.dataDomain();
 		var self = this;
 
-		$( function() {
-			$(element).slider( {
-				range: true,
-				min: domain[0],
-				max: domain[1],
-				values: [ 
-					domain[0],
-					domain[1]
-				],
-				slide: function( event, ui ) {
-
-					if (ui.values[1] <= ui.values[0]) return;
-
-					graph.window.xMin = ui.values[0];
-					graph.window.xMax = ui.values[1];
-					graph.update();
-
-					var domain = graph.dataDomain();
-
-					// if we're at an extreme, stick there
-					if (domain[0] == ui.values[0]) {
-						graph.window.xMin = undefined;
+		if (graph.constructor === Array) {
+			$(function() {
+				$(element).slider({
+
+					range: true,
+					min: graph[0].dataDomain()[0],
+					max: graph[0].dataDomain()[1],
+					values: [
+						graph[0].dataDomain()[0],
+						graph[0].dataDomain()[1]
+					],
+					slide: function(event, ui) {
+
+						for (var i = 0; i < graph.length; i++) {
+							graph[i].window.xMin = ui.values[0];
+							graph[i].window.xMax = ui.values[1];
+							graph[i].update();
+
+							// if we're at an extreme, stick there
+							if (graph[i].dataDomain()[0] == ui.values[0]) {
+								graph[i].window.xMin = undefined;
+							}
+							if (graph[i].dataDomain()[1] == ui.values[1]) {
+								graph[i].window.xMax = undefined;
+							}
+						}
 					}
+				});
+			});
 
-					if (domain[1] == ui.values[1]) {
-						graph.window.xMax = undefined;
-					}
+			element[0].style.width = graph.width + 'px';
+
+			graph[0].onUpdate(function() {
+
+				var values = $(element).slider('option', 'values');
+
+				$(element).slider('option', 'min', graph[0].dataDomain()[0]);
+				$(element).slider('option', 'max', graph[0].dataDomain()[1]);
 
-					self.slideCallbacks.forEach(function(callback) {
-						callback(graph, graph.window.xMin, graph.window.xMax);
-					});
+				if (graph[0].window.xMin === undefined) {
+					values[0] = graph[0].dataDomain()[0];
 				}
-			} );
-		} );
+				if (graph[0].window.xMax === undefined) {
+					values[1] = graph[0].dataDomain()[1];
+				}
+
+				$(element).slider('option', 'values', values);
+
+			});
+		} else {
+			$(function() {
+				$(element).slider({
+					range: true,
+					min: domain[0],
+					max: domain[1],
+					values: [
+						domain[0],
+						domain[1]
+					],
+					slide: function(event, ui) {
+
+						if (ui.values[1] <= ui.values[0]) return;
+
+						graph.window.xMin = ui.values[0];
+						graph.window.xMax = ui.values[1];
+						graph.update();
+
+						var domain = graph.dataDomain();
+
+						// if we're at an extreme, stick there
+						if (domain[0] == ui.values[0]) {
+							graph.window.xMin = undefined;
+						}
+
+						if (domain[1] == ui.values[1]) {
+							graph.window.xMax = undefined;
+						}
+
+						self.slideCallbacks.forEach(function(callback) {
+							callback(graph, graph.window.xMin, graph.window.xMax);
+						});
+					}
+				});
+			});
+		}
 
 		$(element)[0].style.width = graph.width + 'px';
 

diff --git a/src/js/Rickshaw.Graph.Renderer.Bar.js b/src/js/Rickshaw.Graph.Renderer.Bar.js
@@ -78,7 +78,8 @@ Rickshaw.Graph.Renderer.Bar = Rickshaw.Class.create( Rickshaw.Graph.Renderer, {
 				.attr("opacity", series.opacity)
 				.attr("transform", transform);
 
-			Array.prototype.forEach.call(nodes[0], function(n) {
+			Array.prototype.forEach.call(nodes[0], function(n, i) {
+				series.color = series.data[i].color || series.color;
 				n.setAttribute('fill', series.color);
 			} );