0

New to C3 here. I am trying to make a simple scatter plot. I thought this would work (c3_test.csv is the same data set from samples.)

var chart = c3.generate({
        data: {
            url: 'c3_test.csv',       
        x: 'data1',
        columns: ['data2']
        type: 'scatter'
        }
    });

but looks like this is not the way to go. This works, 

var chart = c3.generate({
        data: {
            url: 'c3_test.csv',       
            filter: function (d) {
                return d.id !== 'data1';
            },
            x:'data2',
            type: 'scatter'
        },

however, it would be helpful to know how to make the first method also give the desired output. Also, I am trying to load a tsv file; based on this, I thought I could just use the url interface, however, that doesn't seem to work. Again, I would appreciate any help on this as well. I am using https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.js. My csv(tsv) file is below.

TIA,  
C.S.N  

data1,data2,data3  
20,180,400  
40,150,310  
70,120,470  
50,170,400  
80  200 380
e1s
  • 335
  • 4
  • 22
transmogrifier
  • 1
  • 2

2 Answers2

1

You can load from TSV files now. In order to do so you need to add the mimetype property to the data object as tsv.

Here's an example:

function glucoseInit() {
    var chart = bb.generate({
        bindto: '#divGlucoseScores',
        data: {
            url: 'glucoseScores.tsv',
            mimeType: 'tsv',
            x: 'date',
            xFormat: '%Y-%m-%d %H:%M:%S', // how the date is parsed
            y: 'score',
            names: {
                date: 'Date',
                score: 'Blood glucose (mg/dL)'
            }
        },
        axis: {
            x: {
                type: 'timeseries',
                tick: {
                    format: '%m/%d/%Y'
                }
            }
        }
    });
}

See this post on github. It looks like this was added in September of 2014.

Taylor C. White
  • 836
  • 1
  • 12
  • 30
0

If you are looking to use data1 for the x axis, data2 for y, and ignore data3, you can use this:

var chart = c3.generate({
    data: {
        url: 'c3_test.csv',
        x: 'data1',
        type: 'scatter',
        hide: ['data3']
    },
    legend: {
        hide: ['data3']
    }
});

After a little playing around I wasn't able to get a TSV file to load using the url option either, but you could use base D3 to parse the TSV and feed it to the chart object.

skaiser
  • 13
  • 4