d3 with multiple charts reading separate files in two different divs - d3.js

Question

i'm trying to generate multiple charts into multiple divs, as i try to duplicate the barchart in another div , the second barchart goes out of position and generates the chart at random location
i have posted js in two script tags
<script>
function intermediate(selected){
console.log(selected);
d3.select("svg").remove();
var metric = selected;
console.log(metric);
var dataFile = metric + '.csv';
d3.csv(dataFile,function(data){
console.log(data);
updateData(data);
});
}
var dataFile="SP_Sterling.csv";
d3.csv(dataFile,function(data){
// console.log(data);
updateData(data);
})
function updateData(data){
var margin = {top: 20, right: 20, bottom: 30, left: 80},
padding = {top: 60, right: 60, bottom: 60, left: 60},
width = 860 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var svg = d3.select("#groupedbarchart").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 + ")");
// Update the bar chart
//i'm trying to Update the bar chart based on array objects and it seems that my bar is not getting refreshed
var x0 = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var x1 = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var y = d3.scale.linear()
.range([height, 0]);
var color = d3.scale.ordinal()
.range(["#00a65a", "#f56954"]);
var xAxis = d3.svg.axis()
.scale(x0)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickFormat(d3.format(".2s"));
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d,i) {
return "<strong>Count:</strong> <span style='color:red';>" + d.value + "</span>";
});
var monthvalues = d3.keys(data[0]).filter(function(key) { return key !== "Month"; });
data.forEach(function(d) {
d.monthdata = monthvalues.map(function(name) { return {name: name, value: +d[name]}; });
});
x0.domain(data.map(function(d) { return d.Month; }));
x1.domain(monthvalues).rangeRoundBands([0, x0.rangeBand()]);
y.domain([0, d3.max(data, function(d) { return d3.max(d.monthdata, function(d) { return d.value; }); })]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Count");
svg.call(tip);
//enter
var bar = svg.selectAll(".bar")
.data(data);
bar.enter()
.append("g")
.attr("class", "bar")
.attr("transform", function(d) { return "translate(" + x0(d.Month) + ",0)"; });
//update()
bar.selectAll("rect")
.data(function(d) { return d.monthdata; })
.enter()
.append("rect")
.attr("width", x1.rangeBand())
.attr("x", function(d) { return x1(d.name); })
.attr("y", function(d) { return y(d.value); })
.attr("height", function(d) { return height - y(d.value); })
.on('mouseover', tip.show)
.on('mouseout', tip.hide)
.style("fill", function(d) { return color(d.name); });
//remove()
var legend = svg.selectAll(".legend")
.data(monthvalues.slice().reverse())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
legend.append("rect")
.attr("x", width - 18)
.attr("width", 18)
.attr("height", 18)
.style("fill", color)
.append("rect");
legend.append("text")
.attr("x", width - 24)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function(d) { return d; });
}
</script>
<script>
function longrunning(selected){
console.log(selected);
d3.select("svg").remove();
var metric = selected;
console.log(metric);
var dataFile1 = metric +'_long' + '.csv';
console.log(dataFile1);
d3.csv(dataFile1,function(data){
console.log(data);
updateData(data);
});
}
var dataFile1="SP_Sterling_long.csv";
d3.csv(dataFile1,function(data){
// console.log(data);
updateData(data);
})
function updateData(data){
var margin = {top: 20, right: 20, bottom: 30, left: 80},
padding = {top: 60, right: 60, bottom: 60, left: 60},
width = 860 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var svg = d3.select("#barchart").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 + ")");
// Update the bar chart
//i'm trying to Update the bar chart based on array objects and it seems that my bar is not getting refreshed
var x0 = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var x1 = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var y = d3.scale.linear()
.range([height, 0]);
var color = d3.scale.ordinal()
.range(["#00a65a", "#f56954"]);
var xAxis = d3.svg.axis()
.scale(x0)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickFormat(d3.format(".2s"));
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d,i) {
return "<strong>Count:</strong> <span style='color:red';>" + d.value + "</span>";
});
var monthvalues = d3.keys(data[0]).filter(function(key) { return key !== "Month"; });
data.forEach(function(d) {
d.monthdata = monthvalues.map(function(name) { return {name: name, value: +d[name]}; });
});
x0.domain(data.map(function(d) { return d.Month; }));
x1.domain(monthvalues).rangeRoundBands([0, x0.rangeBand()]);
y.domain([0, d3.max(data, function(d) { return d3.max(d.monthdata, function(d) { return d.value; }); })]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Count");
svg.call(tip);
//enter
var bar = svg.selectAll("barchart")
.data(data);
bar.enter()
.append("g")
.attr("class", "bar")
.attr("transform", function(d) { return "translate(" + x0(d.Month) + ",0)"; });
//update()
bar.selectAll("rect")
.data(function(d) { return d.monthdata; })
.enter()
.append("rect")
.attr("width", x1.rangeBand())
.attr("x", function(d) { return x1(d.name); })
.attr("y", function(d) { return y(d.value); })
.attr("height", function(d) { return height - y(d.value); })
.on('mouseover', tip.show)
.on('mouseout', tip.hide)
.style("fill", function(d) { return color(d.name); });
//remove()
var legend = svg.selectAll(".legend")
.data(monthvalues.slice().reverse())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
legend.append("rect")
.attr("x", width - 18)
.attr("width", 18)
.attr("height", 18)
.style("fill", color)
.append("rect");
legend.append("text")
.attr("x", width - 24)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function(d) { return d; });
}
</script>
<div class="groupedbarchart;visible-*-block" id="groupedbarchart" style="height: 600px;border: red 2px solid;">
<select class="selectpicker" data-live-search="false" data-size="7">
<option>SP_Sterling</option>
<option>IWH</option>
<option>IWH_BreakFix</option>
</select>
</div>
<div class="barchart;visible-*-block" id="barchart" style="height: 500px; border:red solid 2px;">
<select class="longrunning" data-live-search="false" data-size="7">
<option>SP_Sterling</option>
<option>IWH</option>
<option>IWH_BreakFix</option>
</select>
</div>

Answer 1

Ok, so I fixed it so you can have multiple barcharts which different id attributes. They will have the same functionality. I am sorry to say, but I really hate the jsbin editor, as it seems to very crowded and not really easy to use. Therefor, i have made a plunker, just so I could faster figure out your code. You can find it here.
Let me explain what I did:
First, i added the functionality of the select box in your html to another barchart container. Here I added the select to the div with id "bar-chart":
<div class="box-body chart-responsive">
<div class="chart" id="bar-chart" style="height: 500px;">
<select class="selectpicker" data-live-search="false" data-size="7">
<option>SP_Sterling</option>
<option>IWH</option>
<option>IWH_BreakFix</option>
</select>
</div>
</div>
Then I changed the calling function at the end of your html, the one where you build charts on the change events:
$('.selectpicker').on('change', function(){
var parent = $(this).parent();
console.log(parent);
var selected = $(this).find("option:selected").val();
//alert(selected);
intermediate(selected, parent);
});
As you can see, I am looking for the parent here (the parent of each select picker is the div to which you want to append your chart, I noticed). I pass that element as parameter to your intermediate function.
Then as last, I have changed the intermediate function. I will only show the beginning, as that is where i did my changes:
function intermediate(data, element){
d3.select("svg").remove();
var newData=[
{
"Month": "Feb",
"Success_Count": 49,
"Failure_Count": 20
},
{
"Month": "Jan",
"Success_Count": 35,
"Failure_Count": 3
}
];
updateData(newData, element);
}
function updateData(data, element){
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 760 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var selection = d3.select(element);
console.log("d3 selection", element[0]);
var svg = d3.select(element[0]).append("svg") // THIS IS VERY IMPORTANT!!
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
So basically, I have added a new parameter to your functions (the one which will pass the parent element). Then I also cleaned up your "old data". For this example, you don't need it.
Then, and this is the most important part, I have changed the d3 selection. The plunk works, if you have more questions, shoot! :-)
************* EDIT ****************
I did notice that the charts do not really update the way they should and if you change one barchart, the other one disappears. I have fixed that now. The plunker code has been update (the link should still be the same).
What have I changed:
d3.select("svg").remove();
This has been removed from the code. You don't need it.
Then, I also had to change the update data function:
function updateData(data, element){
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 760 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var svg;
//check if there already is an svg element
if(d3.select(element[0]).select("svg").empty()) {
svg = d3.select(element[0]).append("svg") // THIS IS VERY IMPORTANT!!
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
As you can see, it now checks if there is already an svg. If so, it just updates the data and the graph if necessary. You also need this:
...
else {
svg = d3.select(element[0]).select("svg");
}
in case there already is an svg element. The graph and its axes is created entirely in that first "if" statement.
This whole thing of enter selections, updating and the exit selection might look very complicated. I have written about it in a previous post, which you can find here. If you have more questions, please let me know!