A stacked bar chart with transitions and categories. Click on the legend circles to hide/show categories.
// setup the chart
var bar = Bridle.BarChart()
.duration(1000)
.mode("stacked")
.width(700)
.title("Apples or Oranges?")
.yAxisTitle("Label your axes")
.margin({top:50, bottom:30, left:100, right:200})
.legend(Bridle.LegendBox().height(100).nameAccessor(function(d) {return d.type}))
.xValue(function (d) {return new Date (d.z)})
.yValue(function (d) {return d.v})
.nameValue(function(d) {return d.type});
// create the chart
d3.select('#bar-chart')
.datum(barData)
.call(bar);
var barData = [
{
"type": "apples",
"values": [
{ "z": '2012-01-01', "v": 100*Math.random()},
{ "z": '2012-01-02', "v": 100*Math.random()},
{ "z": '2012-01-03', "v": 100*Math.random()},
{ "z": '2012-01-04', "v": 100*Math.random()},
{ "z": '2012-01-05', "v": 100*Math.random()},
{ "z": '2012-01-06', "v": 100*Math.random()},
{ "z": '2012-01-07', "v": 100*Math.random()},
{ "z": '2012-01-08', "v": 100*Math.random()},
{ "z": '2012-01-09', "v": 100*Math.random()},
{ "z": '2012-01-10', "v": 100*Math.random()},
{ "z": '2012-01-11', "v": 100*Math.random()},
{ "z": '2012-01-12', "v": 100*Math.random()},
{ "z": '2012-01-13', "v": 100*Math.random()},
{ "z": '2012-01-14', "v": 100*Math.random()},
{ "z": '2012-01-15', "v": 100*Math.random()},
{ "z": '2012-01-16', "v": 100*Math.random()},
{ "z": '2012-01-17', "v": 100*Math.random()},
{ "z": '2012-01-18', "v": 100*Math.random()},
{ "z": '2012-01-19', "v": 100*Math.random()}
]
},
{
"type": "oranges",
"values": [
{ "z": '2012-01-01', "v": 100*Math.random()},
{ "z": '2012-01-02', "v": 100*Math.random()},
{ "z": '2012-01-03', "v": 100*Math.random()},
{ "z": '2012-01-04', "v": 100*Math.random()},
{ "z": '2012-01-05', "v": 100*Math.random()},
{ "z": '2012-01-06', "v": 100*Math.random()},
{ "z": '2012-01-07', "v": 100*Math.random()},
{ "z": '2012-01-08', "v": 100*Math.random()},
{ "z": '2012-01-09', "v": 100*Math.random()},
{ "z": '2012-01-10', "v": 100*Math.random()},
{ "z": '2012-01-11', "v": 100*Math.random()},
{ "z": '2012-01-12', "v": 100*Math.random()},
{ "z": '2012-01-13', "v": 100*Math.random()},
{ "z": '2012-01-14', "v": 100*Math.random()},
{ "z": '2012-01-15', "v": 100*Math.random()},
{ "z": '2012-01-16', "v": 100*Math.random()},
{ "z": '2012-01-17', "v": 100*Math.random()},
{ "z": '2012-01-18', "v": 100*Math.random()},
{ "z": '2012-01-19', "v": 100*Math.random()}
]
}
];