C3 / D3 horizontal scrolling
I am working on creating a c3 chart where each bar represents the number of people who have joined the program that week. The data is just an array of objects with [{week, # of people}, {week, # of people}, etc.]
Ideally, I want the last 6 weeks to be shown on the chart, but I want to be able to scroll horizontally to see the past weeks.
I saw one answer to this ( DTCjs scrolling histogram ), but in this case the axis did not stay visible when scrolling - which is what I would like to do.
Any help would be much appreciated.
source to share
c3.js allows you to create a "Sub Chart", which is essentially the same as a stock chart like the ones you see in Google Finance.
I suspect you would be better off letting Sub Chart be your scrolling engine than trying to implement a css scrollbar.
One of the nice things about subframe c3 is how it allows you to set a "default size" for a subcategory. What you could do is use the default degree for a limited number of weeks, and from there the user can manipulate the subclass slider / brush as they see fit. Here's a simple implementation / dummy example:
axis.x.extent
http://c3js.org/reference.html
... Set default size for subtitle and scaling.
c3 Subcategory
http://c3js.org/samples/options_subchart.html
working example at jsfiddle
http://jsfiddle.net/y6tns4mt/1/
Html
<div class="container">
<div class="row">
<div class="col-md-12">
<p>My Chart Title</p>
<div>
<div id="my-chart"></div>
</div>
</div>
</div>
</div>
JavaScript for c3 chart
var chart = c3.generate({
bindto: '#my-chart',
data: {
columns: [
['people', 30, 200, 100, 400, 150, 250, 40, 50, 70, 80, 90, 100, 17, 47, 51, 141]
],
type: 'bar'
},
subchart: {
show: true
},
axis: {
x: {
extent: [13, 16]
}
},
tooltip: {
format: {
title: function (d) {
return 'Week ' + d;
}
}
}
});
source to share