Search code examples
javascriptareac3.js

C3JS - Group dates correctly

I'm using the library c3js to show an area chart. I've a problem with my dates data. I've a lot of dates (+/- 1000) and I want to group correctly my dates.

Here is my actuel render : [1]

You can see that some dates appear two time on x axis.

Here is the code of my chart :

var usedList = JSON.parse(usedList);
        var format = informations[0];
        var counts = informations[1];

        var amounts = new Array('Evolution');
        var dates = new Array("x");

        for (var i = 0; i < usedList.length; i++)
        {
            amounts.push(usedList[i].price);
            dates.push(usedList[i].date);
        }

var chart = c3.generate({
            bindto : '#js-chart',
            size : {
                height : 220
            },
            area: {
                  zerobased: false
                },
            data : {
                selection : {
                    draggable : false
                },
                x : 'x',
                columns : [ dates, amounts ],
                types : {
                    Evolution : 'area'
                },
                colors : {
                    Evolution : '#143FB4'
                }
            },
            axis : {
                x : {
                    type : 'timeseries',
                    tick : {
                        fit: true,
                        format : format
                    },
                    padding: {
                      left: 0,
                      right: 0,
                    }
                }
            },
            point : {
                r : 0
            },
            grid : {
                y : {
                    show : true
                }
            }

        });

How do you think I can do to regroup date in order to have just one repetition of each month ?

Thank you, David

Solution

  • What if push only one date for a month?

        for (var i = 0; i < usedList.length; i++)
    {
        amounts.push(usedList[i].price);

        // replacing existing dates with empty string, keeping array size
        var d = usedList[i].date;
        dates.push(dates.indexOf(d) == -1 ? d : '');
    }

    This should work if dates are stored as 'MM/YYYY'. If dates are stored in a different format, different check is needed. But general idea stays the same - only one date for a month at x-axis.