Search code examples
javascriptd3.jstooltipc3.js

Use string column as tooltip in c3js

I have a CSV file which looks like this:

date,size,time,hash
"2016-07-26T17:01:49","0","108.99","c3262c23c3538fd5b9b0f28fb3cbd239e466bb10"
"2016-07-26T18:04:28","0","267.30","58f584d2c58d41f12667538e6a32ad2ce2975bf6"
"2016-07-26T19:02:14","0","133.23","58f584d2c58d41f12667538e6a32ad2ce2975bf6"
"2016-07-26T20:01:32","0","92.50","58f584d2c58d41f12667538e6a32ad2ce2975bf6"
"2016-07-26T21:02:02","0","121.96","a5251ee2a52824ef69fc28b801bdb825c73308f4"
"2016-07-26T22:01:39","0","98.96","a5251ee2a52824ef69fc28b801bdb825c73308f4"

I want to add the last column(hash) which is a string as a tooltip when I hover on the line chart.

The following code is able to generate the graph, but I am unable to add "hash" column as tooltip.

function generateChart(div, data){
        var chart = c3.generate({
            bindto: div,

            data: {
                x: 'date',
                xFormat: '%Y-%m-%dT%H:%M:%S',
                json: data,
                type: 'line',
                keys: {
                    x: 'date',
                    value: ['size', 'time']
                }
            },
            axis:{
                x: {
                    type: 'timeseries', //date format in CSV file needs to be 2000-06-14
                    tick: {
                        format: '%m-%d %H:00'
                    }
                }
            },
            zoom: {
                enabled: true
            },
            subchart: {
                show: true
            }
        }); 
    }
}

Can you please help me in adding the last column as tooltip for all data points on graph?

Solution

  • Try tooltip.format.value to get this working. Provide a callback function which indexes the data, formats and returns the value to show in tooltip overlay, as shown below.

    Please copy and paste below code in the c3.js example code

    enter image description here

    var data = [
{'date': "2016-07-26T17:01:49",'size': "0",'time': "108.99",'hash': "c3262c23c3538fd5b9b0f28fb3cbd239e466bb10"},
{'date': "2016-07-26T18:04:28",'size': "0",'time': "267.30",'hash': "58f584d2c58d41f12667538e6a32ad2ce2975bf6"},
{'date': "2016-07-26T19:02:14",'size': "38",'time': "133.23",'hash': "58f584d2c58d41f12667538e6a32ad2ce2975bf6"},
{'date': "2016-07-26T20:01:32",'size': "0",'time': "92.50",'hash': "58f584d2c58d41f12667538e6a32ad2ce2975bf6"},
{'date': "2016-07-26T21:02:02",'size': "0",'time': "121.96",'hash': "a5251ee2a52824ef69fc28b801bdb825c73308f4"},
{'date': "2016-07-26T22:01:39",'size': "0",'time': "98.96",'hash': "a5251ee2a52824ef69fc28b801bdb825c73308f4"}];


var chart = c3.generate({
    //bindto: div,
    data: {
        x: 'date',
        xFormat: '%Y-%m-%dT%H:%M:%S',
        json: data,
        type: 'line',
        keys: {
            x: 'date',
            value: ['size', 'time']
        }
    },
    axis:{
        x: {
            type: 'timeseries', //date format in CSV file needs to be 2000-06-14
            tick: {
                format: '%m-%d %H:00'
            }
        }
    },
    tooltip: {
        grouped: false,
        format: {
            //title: function (d) { return 'Data ' + d; },
            value: function (value, ratio, id, index) {
                //var format = id === 'data1' ? d3.format(',') : d3.format('$');
                //console.log('index '+index+' ,value '+value+' ,tooltip'+data[index]);
                //return format(value); 
                return data[index]['hash'];
            }
            // value: d3.format(',') // apply this format to both y and y2
        }
    },
    zoom: {
        enabled: false
    },
    subchart: {
        show: false
    }
});