2

The timeseries chart for my CSV data generates overlapping bars. Is there an issue with the library? Attaching the image, my code and my CSV data (Which is parsed into a JSON final_data before using in code).

enter image description here

var chart = c3.generate({
    bindto: '#chart',
    data: {
        x: 'date',
        xFormat: '%m/%d/%y %I:%M %p',
        json: final_data,
        keys: {
            x: 'date',
            value: values
        },
        type: 'bar',
        groups: val
    },
    axis: {
        x: {
            type: 'timeseries',
            tick: {
                format: '%b %d',
                centered: true,
                fit: true
            }
        }
    },
    zoom: {
        enabled: true
    },
    color: {
        pattern: colors
    }
});

Here's the CSV data I have.

Time Series,Category,Duration
6/24/15 12:00 AM,Post Processor,0
6/24/15 12:00 AM,Response Processing,8
6/24/15 12:00 AM,External Calls,168
6/24/15 12:00 AM,Internal Processing,16
6/24/15 12:00 AM,Pre Processor,0
10/1/14 12:00 AM,Post Processor,0
10/1/14 12:00 AM,Response Processing,0
10/1/14 12:00 AM,External Calls,0
10/1/14 12:00 AM,Internal Processing,5
10/1/14 12:00 AM,Pre Processor,0
5/15/15 12:00 AM,Post Processor,0
5/15/15 12:00 AM,Response Processing,0
5/15/15 12:00 AM,External Calls,0
5/15/15 12:00 AM,Internal Processing,5
5/15/15 12:00 AM,Pre Processor,0
Vishal Sharma
  • 2,550
  • 1
  • 23
  • 40

3 Answers3

1

use bar with, after the data like

bar: {
        //width: {
           // ratio: 0.3 // this makes bar width 50% of length between ticks
      //  }
     
        width: 15 // this makes bar width 100px
    },

you can refer this http://c3js.org/samples/chart_bar.html

Ravikumar K
  • 85
  • 2
  • 11
1

I had the same issue, you can solve in the next way:

var time = ['6/24/15 12:00', '6/24/15 12:00', ...]
var chart = c3.generate({
bindto: '#chart',
    data: {
        columns: [
            ['bar1', 3, 4, 5, 6, 7],
            ['bar2', 2, 3, 4, 5, 6],
            ['bar3', 1, 2, 3, 4, 5]
        ],
        type: 'bar'
    },
    bar: {
        width: {
            ratio: 0.8
        }
    },
    axis: {
        x: {
            tick: {
                count: time.length,
                format: (i) => time[i]
            }
        }
    },
...
});

The main point is not to use timeseries at all, and instead of it use tick property and return value for each bar stack by index.

Vladyslav Sheruda
  • 1,856
  • 18
  • 26
0

It seems like a bug, timeseries step mus be constant. You can add null values to go around it.

Aiphee
  • 8,904
  • 3
  • 18
  • 16