c3 - JSON data with timeseries and date filter
Display only the first of the month
HTML
<script src="https://rawgit.com/masayuki0812/c3/master/c3.js"></script>
<link rel="stylesheet" href="https://rawgit.com/masayuki0812/c3/master/c3.css">
<div id="chart"></div>
JavaScript
var chart = c3.generate({
bindto: '#chart',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
],
type:'bar'
},
axis: {
rotated: true
}
});
var arrayOfLinks = [
"http://lorempixel.com/40/40/abstract",
"http://lorempixel.com/40/40/animal",
"http://lorempixel.com/40/40/business",
"http://lorempixel.com/40/40/cats",
"http://lorempixel.com/40/40/sports",
"http://lorempixel.com/40/40/food"
];
d3.selectAll('.c3-axis-x .tick tspan')
.each(function(d,i){
// augment tick contents with link
var self = d3.select(this);
var text = self.text();
self.html("<A xlink:href='"+arrayOfLinks[i]+"'>"+text+"</A>");
});