Milinda Saranga
Milinda Saranga

Reputation: 205

How to display time in Y axis of C3 chart

Is it possible to display time in y axis of c3 chart.Im using below code but y axis time is not display.X axis should be category and y axis should time.

var chart2 = c3.generate({
              bindto: '#predPerformance',
              data: {
                columns: [
                  ['01-11-2015', 1448287450, 1448287450, 1448287450, 1448287450, 1448287450, 1448287450, 1448287450 ],
                  ['02-11-2015', 1448291104, 1448291104, 1448291104, 1448291104, 1448291104, 1448291104, 1448291104 ]
                ]
              },
              axis: {
                x: {
                  categories: ['ABC', 'PQR', 'WWW', 'POINT', 'ETA','RTA','BLY'],
                  type: 'categorized'
                }
              },              
            axis: {
                y: {
                    type: 'timeseries'
                }
            }
            });  

Upvotes: 4

Views: 1068

Answers (2)

Milinda Saranga
Milinda Saranga

Reputation: 205

I have formatted y axis and disable tooltip because minute range is 0-59 but still y axis is value range (0-99).So I have used customized tooltip to convert value range to time range.

var chart = c3.generate({
    data: {
        columns: [
            ['data1',201510210120, 201510210150, 201510210120, 201510210130,201510210135,201510210150],
            ['data2',201510210125, 201510210200, 201510210130, 201510210140,201510210155,201510210150],
            ['data3',201510210130, 201510210140, 201510210140, 201510210150,201510210125,201510210200]
        ]
    },
    size: {
            height: 320
          },
    axis: {

        x: {
            type: 'category',
            categories: ['ABC', 'PQR', 'WWW', 'POINT', 'ETA','RTA']
        },
        y: {
            tick: {
            //format: d3.format('$,')
            format: function (d) { return d.toString().substr(8, 2) + ':' + d.toString().substr(10, 2); }
            },
            max: 201510212300,
                    min: 201510210100
        }
    },
    tooltip: {
      show: false
    }
});

Upvotes: 0

Chetan
Chetan

Reputation: 2756

Try axis:rotated property as show in the code below:-

axis: {
  rotated: true
}

http://c3js.org/samples/timeseries.html

Upvotes: 1

Related Questions