D3 toggle stacked to grouped on multiple bar charts - d3.js

Question

I'm trying to run multiple "stacked-to-grouped" d3 bar charts on one page. I can get the charts to render, but have not been successful in getting the two charts to toggle between the options in unison.
I'm guessing that this might have to do with calling the "change" function more than once (since I'm calling it in the rendering of both charts), but I'm not sure how to place it outside of the charts and enable it to have access to what it needs. Thought it might have something to do with "each", but I'm not sure.
Here's a link to the jsfiddle that I've created: http://jsfiddle.net/1amsknh2/
And here's the js for the charts:
$( document ).ready(function() {
chart1();
});
function chart1(){
var stack = d3.layout.stack(),
layers = [
[
{"x":0,"y":1.5,"y0":0,"name":"cat1","color":"#B7A4DB"},
{"x":1,"y":1.5,"y0":0,"name":"cat2","color":"#B7A4DB"},
{"x":2,"y":1.5,"y0":0,"name":"cat3","color":"#B7A4DB"}
],
[
{"x":0,"y":2.5,"y0":1.5,"name":"cat1","color":"#85E6B5"},
{"x":1,"y":1.5,"y0":1.5,"name":"cat2","color":"#85E6B5"},
{"x":2,"y":1.0,"y0":1.5,"name":"cat3","color":"#85E6B5"}
]
];
n = 2, // number of layers
m = layers.length, // number of samples per layer
mb = ['cat1', 'cat2', 'cat3']
yGroupMax = d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.y; }); }),
yStackMax = d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.y0 + d.y; }); });
var margin = {top: 40, right: 10, bottom: 20, left: 40},
width = 400 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.domain(mb)
.rangeRoundBands([0, width], .08);
var y = d3.scale.linear()
.domain([0, yStackMax])
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.tickSize(0)
.tickPadding(6)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickFormat(d3.format(".2s"));
var svg = d3.select("#chart1").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var layer = svg.selectAll(".layer")
.data(layers)
.enter().append("g")
.attr("class", "layer");
// .style("fill", function(d) { return x(d.color); });
var rect = layer.selectAll("rect")
.data(function(d) { return d; })
.enter().append("rect")
.attr("x", function(d) { return x(d.name); })
.attr("y", height)
.attr("width", x.rangeBand())
.attr("height", 0)
.style("fill", function(d) { return d.color; });
rect.transition()
.delay(function(d, i) { return i * 10; })
.attr("y", function(d) { return y(d.y0 + d.y); })
.attr("height", function(d) { return y(d.y0) - y(d.y0 + d.y); })
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.select("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
// .attr("y", 6)
.attr("dy", ".71em")
// .style("text-anchor", "middle")
.text("Amount");
d3.selectAll("input").on("change", change);
var timeout = setTimeout(function() {
d3.select("input[value=\"grouped\"]").property("checked", true).each(change);
}, 2000);
function change() {
clearTimeout(timeout);
console.log(1)
if (this.value === "grouped") transitionGrouped();
else transitionStacked();
svg.select("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
// .attr("y", 6)
.attr("dy", ".71em")
// .style("text-anchor", "middle")
.text("Contribution Amount");
}
function transitionGrouped() {
y.domain([0, yGroupMax]);
rect.transition()
.duration(500)
.delay(function(d, i) { return i * 10; })
.attr("x", function(d, i, j) { return x(d.name) + x.rangeBand() / n * j; })
.attr("width", x.rangeBand() / n)
.transition()
.attr("y", function(d) { return y(d.y); })
.attr("height", function(d) { return height - y(d.y); });
}
function transitionStacked() {
y.domain([0, yStackMax]);
rect.transition()
.duration(500)
.delay(function(d, i) { return i * 10; })
.attr("y", function(d) { return y(d.y0 + d.y); })
.attr("height", function(d) { return y(d.y0) - y(d.y0 + d.y); })
.transition()
.attr("x", function(d) { return x(d.name); })
.attr("width", x.rangeBand());
}
chart2();
}
function chart2(){
var stack = d3.layout.stack(),
layers = [
[
{"x":0,"y":0.5,"y0":0,"name":"cat1","color":"#B7A4DB"},
{"x":1,"y":1.5,"y0":0,"name":"cat2","color":"#B7A4DB"},
{"x":2,"y":1.0,"y0":0,"name":"cat3","color":"#B7A4DB"}
],
[
{"x":0,"y":2.5,"y0":0.5,"name":"cat1","color":"#85E6B5"},
{"x":1,"y":1.5,"y0":1.5,"name":"cat2","color":"#85E6B5"},
{"x":2,"y":1.0,"y0":1.0,"name":"cat3","color":"#85E6B5"}
]
];
n = 2, // number of layers
m = layers.length, // number of samples per layer
mb = ['cat1', 'cat2', 'cat3']
yGroupMax = d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.y; }); }),
yStackMax = d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.y0 + d.y; }); });
var margin = {top: 40, right: 10, bottom: 20, left: 40},
width = 400 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.domain(mb)
.rangeRoundBands([0, width], .08);
var y = d3.scale.linear()
.domain([0, yStackMax])
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.tickSize(0)
.tickPadding(6)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickFormat(d3.format(".2s"));
var svg = d3.select("#chart2").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var layer = svg.selectAll(".layer")
.data(layers)
.enter().append("g")
.attr("class", "layer");
var rect = layer.selectAll("rect")
.data(function(d) { return d; })
.enter().append("rect")
.attr("x", function(d) { return x(d.name); })
.attr("y", height)
.attr("width", x.rangeBand())
.attr("height", 0)
.style("fill", function(d) { return d.color; });
rect.transition()
.delay(function(d, i) { return i * 10; })
.attr("y", function(d) { return y(d.y0 + d.y); })
.attr("height", function(d) { return y(d.y0) - y(d.y0 + d.y); })
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.select("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
// .attr("y", 6)
.attr("dy", ".71em")
// .style("text-anchor", "middle")
.text("Contribution Amount");
d3.selectAll("input").on("change", change);
function change() {
console.log(2);
if (this.value === "grouped") transitionGrouped();
else transitionStacked();
svg.select("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
// .attr("y", 6)
.attr("dy", ".71em")
// .style("text-anchor", "middle")
.text("Amount");
}
function transitionGrouped() {
y.domain([0, yGroupMax]);
rect.transition()
.duration(500)
.delay(function(d, i) { return i * 10; })
.attr("x", function(d, i, j) { return x(d.name) + x.rangeBand() / n * j; })
.attr("width", x.rangeBand() / n)
.transition()
.attr("y", function(d) { return y(d.y); })
.attr("height", function(d) { return height - y(d.y); });
}
function transitionStacked() {
y.domain([0, yStackMax]);
rect.transition()
.duration(500)
.delay(function(d, i) { return i * 10; })
.attr("y", function(d) { return y(d.y0 + d.y); })
.attr("height", function(d) { return y(d.y0) - y(d.y0 + d.y); })
.transition()
.attr("x", function(d) { return x(d.name); })
.attr("width", x.rangeBand());
}
}

Answer 1

After struggling here and there, finally I made one fiddle for you.check it once.I hope you are looking for this http://jsfiddle.net/jxbyf82u/
In this fiddle Observe these line
d3.selectAll("input").on("change", change1);
chart1.change1 = change1;
and I'm calling this function from chart2()'s change() function by passing input value i.e. like below
chart1.change1(this.value);
If it is not what you are looking for, then ask what you want.Okay