I am currently working on customizing the Line Plus Bar chart from nvd3 in a way that allows the chart to switch to data from a different day of the week (Sun-Sat) when a button is clicked.
At present, I am facing some difficulties as the chart is displaying data for all days of the week instead of just one. Below is my code snippet:
d3.json("employee_data.json",function(error,data) {
if(error) return console.warn(error);
nv.addGraph(function() {
var chart = nv.models.linePlusBarChart()
.margin({top: 30, right: 60, bottom: 50, left: 70})
//We can set x data accessor to use index. Reason? So the bars all appear evenly spaced.
.x(function(d,i) {
console.log(i)
return i })
.y(function(d,i) {
return d[1] })
;
chart.xAxis.tickFormat(function(d,i) {
var dx = data[0].values[i] && data[0].values[i][0] || 0;
return 'Sun' + dx
});
chart.y1Axis
.tickFormat(d3.format(',f'));
chart.y2Axis
.tickFormat(function(d) { return d3.format(',f')(d) });
chart.bars.forceY([0]);
d3.select('#chart svg')
.datum(data)
.transition()
.duration(0)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
});
The structure of the JSON file resembles:
[
{
"key" : "Sun_Employees",
"bar" : true,
"color" : "#ccf",
"values" : [[0,2],[1,2],[3,2],[4,3],...,[23,1]]
},
{
"key": "Sun_Tasks",
"color" : "#333",
"values" : [[0,5],[1,6],[2,5],[3,7],...,[23,2]]
},
{
"key" : "Mon_Employees",
"bar" : true,
"color" : "#ccf",
"values" : [[0,2],[1,2],[3,2],[4,3],...,[23,1]]
},
{
"key": "Mon_Tasks",
"color" : "#333",
"values" : [[0,5],[1,6],[2,5],[3,7],...,[23,2]]
}
}
I suspect the issue lies with the .x(function(d,i) { return i}) line, but I'm uncertain about limiting it correctly.