C3js: custom date for each line

Question

Is it possible to build data in this way?

['2013-01-01', 'redline', 120], 
['2013-01-02', 'greenline', 160], 
['2013-01-02', 'blueline', 200], 
['2013-01-04', 'greenline', 160],

There is "n" count of different lines and each of them have different dates... How can I draw them with C3js? I will be really very appresiate any help

do you have multiple dates for each new color? or line -- however you look at it.\ — Todd, Dec 26 '14 at 17:12
also, can you be more specific in what you're wanting, if not narrow it down to a single-ish question entirely. — Todd, Dec 26 '14 at 17:13
I need to build timeseries chart like this http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/spline-irregular-time/. Here I can to set any date/value for each line. ` name: 'Blue Line', data: [ [Date.UTC(1970, 9, 27), 0], ] },` How can I do this with c3js? — wpanin, Dec 26 '14 at 18:29
That is highcharts example on jsfiddle and I need do to the same with c3js. Is it possible? — wpanin, Dec 27 '14 at 19:57
Do you need these lines to be specific colours? Is that the issue? — JasTonAChair, Dec 27 '14 at 23:29
The issue is in installing different date values for each lines... FOR EXAMPLE: LINE NAME - DATE - POINT VALUE — wpanin, Dec 28 '14 at 10:45

JasTonAChair · Accepted Answer · 2014-12-30T12:12:16.260

What you need is a line chart with multiple x axes, like this:

enter image description here

To use a multiple x chart in c3js, you must declare several xs values.

I guessed you would need to add dates here and there, so I made the arrays containing data and dates global.

The function at bottom pushes new dates and data to the arrays.

To load those variables into c3js, use the concat function.

//Declare three x axes, and a dataset for each axis.
var periodOne = ['2013-01-01', '2013-01-04', '2013-01-07','2013-01-11','2013-01-15'];
var periodTwo = ['2013-01-02', '2013-01-04', '2013-01-06','2013-01-08', '2013-01-10','2013-01-13', '2013-01-15','2013-01-18', '2013-01-22'];
var periodThr = ['2013-01-05', '2013-01-10', '2013-01-15','2013-01-20', '2013-01-25'];
var xOne = [12,31,14,13,34];
var xTwo = [11,13,14,23,63,27,21,19,15];
var xThr = [12,32,13,13,23];

var chart = c3.generate({
        data: {
            xs:{
                //Declare the axes
                'Winter 08,09': 'x1',
                'Winter 09,10': 'x2',
                'Winter 10,11': 'x3'
            },
            columns: [
                ['x1'].concat(periodOne),
                ['x2'].concat(periodTwo),
                ['x3'].concat(periodThr),
                ['Winter 08,09'].concat(xOne),
                ['Winter 09,10'].concat(xTwo),
                ['Winter 10,11'].concat(xThr)
            ]
        },
        axis: {
            x: {
                type: 'timeseries'
            }
        }
    });
//You don't need this for multiple x axes, it's just to push data to arrays
function push(oneValue, oneDate, twoValue, twoDate, thrValue, thrDate){
    periodOne[periodOne.length] = oneDate;
    xOne[xOne.length] = oneValue;
    periodTwo[periodTwo.length] = twoDate;
    xTwo[xTwo.length] = twoValue;
    periodThr[periodThr.length] = thrDate;
    xThr[xThr.length] = thrValue;
    chart.load({
        columns: [
            ['x1'].concat(periodOne),
            ['x2'].concat(periodTwo),
            ['x3'].concat(periodThr),
            ['Winter 08,09'].concat(xOne),
            ['Winter 09,10'].concat(xTwo),
            ['Winter 10,11'].concat(xThr)
        ]
    });
}
//Use this function to push new data
push(13, '2013-01-19', 23, '2013-01-24', 17, '2013-01-30');

THANK YOU !!! It works great. Do you know how to set max axes value from 45 to 43? — wpanin, Dec 30 '14 at 17:08
Setting axis range can be done this way - http://c3js.org/samples/api_axis_range.html and this way - http://c3js.org/samples/axes_y_range.html — JasTonAChair, Dec 30 '14 at 21:43

C3js: custom date for each line

1 Answers1