A line chart, initially a time series.
// setup the chart generator
var line = Bridle.LineChart()
.duration(1000) // Duration of animations
.width(800) // The width of the chart
.title("Apples or Oranges?") // A title for the chart
.yAxisTitle("Label your axes") // A label for the Y-Axis
.legend(Bridle.LegendBox().height(100).nameAccessor(function(d) {return d.type})) // setting up a legend
.margin({top:50, bottom:30, left:100, right:200}) // Margins
.xValue(function (d) {
return new Date (d.z) // An accessor for the x values
})
.yValue(function (d) {
return d.v // An accessor for the y values
})
.nameValue(function (d) {
return d.type // An accessor for the type values
});
// render the chart
d3.select('.chartContainer')
.datum(lineData)
.call(line);
var lineData = [
{
"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()}
]
}
];