Best practices for plotting data to C3

Question

I've already spent days trying to figure out ways to format data in such a way that C3.js is happy with it, and I've tried many things, like row by row aggregations, inner and outer joins (thanks to some of you lovely people who've helped), and similar such endeavours. I still haven't found a good way and it's all a big pain. I can't imagine that there isn't an easier way, that I'm sure I just haven't figured out yet.

An example. I want a line chart that contains one line for each year. The x-axis is the month (from 1 to 12) and the y axis is the revenue.

I have this data:

{"YEAR":"2009","MONTH":"1","REVENUE":"7533"},{"YEAR":"2009","MONTH":"1","REVENUE":"8406"},{"YEAR":"2009","MONTH":"1","REVENUE":"799"},{"YEAR":"2009","MONTH":"3","REVENUE":"11099"}

And have aggregated it so that the Revenue is calculated for each year+month, to turn it into this:

[{"year":"2009","month":"1","revenue":16739},{"year":"2009","month":"2","revenue":1406},{"year":"2009","month":"3","revenue":11099},{"year":"2009","month":"4","revenue":7055}]

Now I know I have to get it into this format for C3 js to work with it in the way I want:

    [{"month":"1","revenue2009":16739,"revenue2010":16739},{"month":"2","revenue2010":1406},{"month":"3","revenue2009":11099,"revenue2010":16739},{"month":"4","revenue2011":7055}]

Also, I have to trick around somehow around c3 so as to get the YEAR displayed as the names of the corresponding lines as well - functionality which in my mind is default for a chart.

Such a small transformation is already giving me headaches and hast cost way more time than I believed possible. Any help on how to do it? Also, is this transformation necessary, or is there an easier way to integrate one of the two first-mentioned datasets into c3 without this transformation? Can you please give me some best practices as to how to handle this data? Thanks!

Answer 1

You have two options in this case.

You can set up a custom x axis composed of 12 ticks and then add the data.

http://jsfiddle.net/fokcat28/

var chart = c3.generate({
    bindto: '#chart',
    data: {
        x: 'x',
        columns: [
            ["x", "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
            ["Revenue 2009", 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
            ["Revenue 2010", 16, 16, 17, 18, 20, 20, 20, 23, 23, 23, 24, 27],
            ["Revenue 2011", 23, 23, 23, 23, 24, 24, 24, 24, 24, 24, 24, 20]
        ]
    },
    axis: {
        x: {
            type: 'category' // this needed to load string x value
        }
    }
});

The trick is in the type:'category' setting, which allows you to use strings to name each tick.

You can also place a year (eg.2013) in the x axis, and then add date for each of its months:

https://jsfiddle.net/dbpngfuf/1/

 var chart = c3.generate({
        data: {
            x: 'x',
            columns: [
                ['x', '2013-01-01', '2013-02-01', '2013-03-01', '2013-04-01', '2013-05-01', '2013-06-01', '2013-07-01', '2013-08-01', '2013-09-01', '2013-10-01', '2013-11-01', '2013-12-01'],
                ['Revenue 2008', 30, 200, 100, 400, 150, 250],
                ['Revenue 2010', 130, 340, 200, 500, 250, 350]
            ]
        },
        axis: {
            x: {
                type: 'timeseries',
                tick: {
                    format: '%Y-%m'
                }
            }
        }
    });