c3js / c3

:bar_chart: A D3-based reusable chart library
http://c3js.org
MIT License
9.35k stars 1.39k forks source link

issue of xAxis "timeseries" not work with format '%Y-%m' and '%Y' (format of data is json) #1119

Open yuemma opened 9 years ago

yuemma commented 9 years ago

Bonjour masayuki,

I use c3.js to create three stacked bar charts. C3.js works well with the xAxis "timeseries" in the formats '%Y-%m-%d' , but nor work with the format '%Y-%m' and '%Y'.

I debug the code of C3.js , and I found a solution: In file c3.js, add the code :

 data_xFormat2: '%Y-%m',

then I modifies un function

    c3_chart_internal_fn.parseDate = function (date) {
        var $$ = this, parsedDate;
        if (date instanceof Date) {
            parsedDate = date;
        } else if (typeof date === 'string') {
            parsedDate = $$.dataTimeFormat($$.config.data_xFormat).parse(date);
        } else if (typeof date === 'number' || !isNaN(date)) {
            parsedDate = new Date(+date);
        }
        if (!parsedDate || isNaN(+parsedDate)) {
            window.console.error("Failed to parse x '" + date + "' to Date object");
        }
        return parsedDate;
    };

to

    c3_chart_internal_fn.parseDate = function (date) {
        var $$ = this, parsedDate;
        if (date instanceof Date) {
            parsedDate = date;
        } else if (typeof date === 'string') {
            parsedDate = $$.dataTimeFormat($$.config.data_xFormat).parse(date);
            //emma add this code to solve problem in stacked barchart
            if (!parsedDate || isNaN(+parsedDate)){
            parsedDate = $$.dataTimeFormat($$.config.data_xFormat2).parse(date);}
            //code end
        } else if (typeof date === 'number' || !isNaN(date)) {
            parsedDate = new Date(+date);
        }
        if (!parsedDate || isNaN(+parsedDate)) {
            window.console.error("Failed to parse x '" + date + "' to Date object");
        }
        return parsedDate;
    };
yuemma commented 9 years ago

In the situation above, I use the code following to generate barchat

function tw_timeline_monthly(data_path, div_id) {

    function generateChart(jsondata) {
        var chart = c3.generate({
          bindto: div_id,
          data: {
            type: 'bar',
            groups:  [['Manager_Reply', 'Manager_Tweet','User_Reply', 'User_Tweet']],
            json: jsondata,
            keys: {
              x: 'time',
              value: ['Manager_Reply', 'Manager_Tweet','User_Reply', 'User_Tweet'],
            }
          },
          legend: {
                position: 'right'
          },
          subchart: {
                show: true
          },
          axis: {
              x: {
                    type: 'timeseries',
                    tick: {
                        count: 30,
                        format: '%Y-%m',
                        rotate: 30,
                        multiline: true
                    },
                }
          }

        }); 
     }
      d3.json(data_path, generateChart);     

}

after I check the c3.js I find another way to solve the problem without changing the code in c3.js

function tw_timeline_monthly(data_path, div_id) {

    function generateChart(jsondata) {
        var chart = c3.generate({
          bindto: div_id,
          data: {
            xFormat: '%Y-%m',
            type: 'bar',
            groups:  [['Manager_Reply', 'Manager_Tweet','User_Reply', 'User_Tweet']],
            json: jsondata,
            keys: {
              x: 'time',
              value: ['Manager_Reply', 'Manager_Tweet','User_Reply', 'User_Tweet'],
            }
          },
          legend: {
                position: 'right'
          },
          subchart: {
                show: true
          },
          axis: {
              x: {
                    type: 'timeseries',
                    tick: {
                        count: 30,
                        format: '%Y-%m',
                        rotate: 30,
                        multiline: true
                    },
                }
          }

        }); 
     }
      d3.json(data_path, generateChart);     

}

Just add

xFormat: '%Y-%m',

and

format: '%Y-%m',

in the same time