CODEWITHSUNDEEP
d3.jsjavascriptc3.js
dayuloli
dayuloli

Reputation: 17021

c3js - change the initial date label in x-axis

I have a c3js line graph of type timeseries.

My axis tables are currently like this:

Showing the x-axis 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.

Upvotes: 1

Views: 3733

Answers (1)

dayuloli
dayuloli

Reputation: 17021

This 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.

Upvotes: 7

Related Questions