I have a c3js line graph of type timeseries.
My axis tables are currently like this:
11/10.....05/11.....11/11.....05/12.....11/12.....05/13.....11/13
and it want it to be
.12/10.....06/11.....12/11.....06/12.....12/12.....06/13.....
where each dot indicates a month, note that the datapoint at 11/10 is still kept and displayed, only the axis labelling has changed. FYI, The increment is not set directly but hacked using culling.
Is there any way to alter the starting label to 12/10 (with all subsequent labels increasing in 6-months intervals)?
UPDATE (14NOV14): I have added a working jsFiddle for you to tinker with. Any help is appreciated! UPDATE (14NOV14): I have tried using functions for this. But I want the 'pop-up' box to show the grey heading all the time.
I have a c3js line graph of type timeseries.
My axis tables are currently like this:
11/10.....05/11.....11/11.....05/12.....11/12.....05/13.....11/13
and it want it to be
.12/10.....06/11.....12/11.....06/12.....12/12.....06/13.....
where each dot indicates a month, note that the datapoint at 11/10 is still kept and displayed, only the axis labelling has changed. FYI, The increment is not set directly but hacked using culling.
Is there any way to alter the starting label to 12/10 (with all subsequent labels increasing in 6-months intervals)?
UPDATE (14NOV14): I have added a working jsFiddle for you to tinker with. Any help is appreciated! UPDATE (14NOV14): I have tried using functions for this. But I want the 'pop-up' box to show the grey heading all the time.
Share Improve this question edited Nov 14, 2014 at 2:45 dayuloli asked Nov 12, 2014 at 2:07 dayulolidayuloli 17.1k18 gold badges75 silver badges132 bronze badges 7- can you put a plunkr together to understand what you are doing better? – Sebastian Piu Commented Nov 13, 2014 at 9:19
- @Sebastian Plu - I'm trying to make one...but not so much luck - plnkr.co/edit/yASPgG76uA7WDsZz2Au4?p=preview and jsfiddle/ew9kpx3r – dayuloli Commented Nov 13, 2014 at 9:59
- @Sebastian Plu - If you look at c3js/samples/timeseries.html, the equivalent to what I want is for the x-axis to only start labelling the axis at '2013-01-02', and have a label every 2 days. So it will miss out '2013-01-01', '2013-01-03'... even though the data point is still there. – dayuloli Commented Nov 13, 2014 at 10:02
- do you have it in jsfiddle with the culling hack? – anoop Commented Nov 14, 2014 at 2:45
- @anoop Culling isn't a hack I want to follow, since if the client adds a different/new date I'm minced meat. Please see my latest jsFiddle (in the update). Thanks for your interest and help! – dayuloli Commented Nov 14, 2014 at 2:46
1 Answer
Reset to default 7This was a painfully long learning process, for a very badly-documented library. But I had to use a function for the format option for the tick, and then format the title again for the tooltip. Here's the final, working copy.
HTML (Include the d3.js, c3.js, and c3.css scripts too)
<body>
<div id="chartContainer"></div>
</body>
JS
var chart = c3.generate({
bindto: '#chartContainer',
data: {
x: 'x',
columns: [
['x', '2013-04-01', '2013-05-02', '2013-06-03', '2013-07-04', '2013-08-05', '2013-09-06'],
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 340, 200, 500, 250, 350]
]
},
axis: {
x: {
type: 'timeseries',
tick: {
format: function (x) {
if((x.getMonth()+1) % 6 === 0) {
return ('0' + (x.getMonth()+1)).slice(-2) + '/' + x.getFullYear().toString().substr(2,2);
}
}
}
}
},
tooltip: {
format: {
title: function (d) {
var format = d3.time.format('%m/%y');
return format(d)
}
}
}
});
N.B. Also be aware that culling might interfere with this. I had to set culling: {max: 100} to ensure any built in incrementations are not applied.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745047749a4608199.html
评论列表（0条）