C3: Formatting for yyyy-MM-dd HH:mm:ss for the timeseries

This simple step in C3 cracked my head a bit, therefore i like to write it down for future reference. Basically, I have a piece of json data containing the following two fields:

• date
• rate

I like the x axis of a C3 time series chart to display the date values in the json, the format of the date values is as follows:

yyyy-MM-dd HH:mm:ss

My original javascript looks like the following:

<link href="./c3.min.css" rel="stylesheet" type="text/css">
<script src="./d3.min.js"></script>
<script src="./c3.min.js"></script>
<script src="./d3.tip.v0.6.3.js"></script>
<script src="./jquery-1.8.3.min.js"></script>

<script type="text/javascript">
 $(function(){
$.ajax({
            url        : "jsonData.php",
            type       : "GET",
            data       : post_data,
            dataType : "json",
            success    : function(returned_data)
            {
                console.log(returned_data);
               
                var column_date = returned_data.date;
                var column_val = returned_data.sample;
               
                console.log(column_date);
                console.log(column_val);
               
                column_date.unshift('date');
                column_val.unshift('sample');
               
                var chart = c3.generate({
                    data: {
                        x : 'date',
                        columns : [
                            column_date,
                            column_val
                        ]
                    },
                    bindto: '#timeSeriesChart',
                    axis: {
                        x: {
                            type: 'timeseries',
                        }
                    }                });
            }
        });
});
</script>

After trying out various configuration that do not work, i finally stumbled on one solution that works, which is to add a "xFormat : '%Y-%m-%d %H:%M:%S'", that is as follows:

$(function(){
$.ajax({
            url        : "jsonData.php",
            type       : "GET",
            data       : post_data,
            dataType : "json",
            success    : function(returned_data)
            {
                console.log(returned_data);
               
                var column_date = returned_data.date;
                var column_val = returned_data.sample;
               
                console.log(column_date);
                console.log(column_val);
               
                column_date.unshift('date');
                column_val.unshift('sample');
               
                var chart = c3.generate({
                    data: {
                        x : 'date',
                        xFormat : '%Y-%m-%d %H:%M:%S',
                        columns : [
                            column_date,
                            column_val
                        ]
                    },
                    bindto: '#timeSeriesChart',
                    axis: {
                        x: {
                            type: 'timeseries',
                        }
                    }                });
            }
        });
}); 

Another thing to note is that the settings of x axis tick label can be done by adding the following to the "axis" element (if the time value is too long, you can add a "rotate: 45" to the "tick" below):

 tick: {
        format: '%H:%M:%S'
 }

for example:

 
$(function(){
$.ajax({
            url        : "jsonData.php",
            type       : "GET",
            data       : post_data,
            dataType : "json",
            success    : function(returned_data)
            {
                console.log(returned_data);
               
                var column_date = returned_data.date;
                var column_val = returned_data.sample;
               
                console.log(column_date);
                console.log(column_val);
               
                column_date.unshift('date');
                column_val.unshift('sample');
               
                var chart = c3.generate({
                    data: {
                        x : 'date',
                        xFormat : '%Y-%m-%d %H:%M:%S',
                        columns : [
                            column_date,
                            column_val
                        ]
                    },
                    bindto: '#timeSeriesChart',
                    axis: {
                        x: {
                            type: 'timeseries',

 tick: {
        format: '%H:%M:%S'
 }

                        }
                    }                });
            }
        });
});