Tooltip C3JS - Add a row in the table

Question

I'm trying to add a footer on the table displayed in the tooltip. Inside this row I would like to show a particular data loaded from a json file.

Chart:

<script>
    var scene;
    $.getJSON('assets/json/chartc3.json', function (data) {
        scene = data;
        var chart = c3.generate({
            bindto: '#chartc3',
            data:
                {
                    json: scene,
                    keys:
                    {
                        x: 'round',
                        value: ['Marketable', 'Total Requested Capacity', 'Your Bid'],
                    },
                    types: {
                        Marketable: 'area'
                    },
                    colors: {
                        Marketable: '#A09FA2',
                        'Total Requested Capacity': '#272E80',
                        'Your Bid': '#8EBF60'
                    }
                },
            axis:
            {
                x: {
                    tick:
                    {
                        culling:
                        {
                            max: 10
                        }
                    },
                    type: 'category'
                },
                y:
                {
                    min: 0,
                    padding: {
                        bottom: 0
                    },
                    tick:
                    {
                        values: [[0], [d3.max(d3.values(scene))]],

                        format: function (d) { return d3.format(',f')(d) + ' kWh/h' }
                        //or format: function (d) { return '$' + d; }
                    }
                }
            },
            tooltip: {
                contents: function (d, defaultTitleFormat, defaultValueFormat, color) {
                    var $$ = this, config = $$.config, CLASS = $$.CLASS,
        titleFormat = config.tooltip_format_title || defaultTitleFormat,
        nameFormat = config.tooltip_format_name || function (name) { return name; },
        valueFormat = config.tooltip_format_value || defaultValueFormat,
        text, i, title, value, name, bgcolor;

                    // You can access all of data like this:
                    for (i = 0; i < d.length; i++) {
                        if (!(d[i] && (d[i].value || d[i].value === 0))) { continue; }

                        // ADD
                        if (d[i].name === 'data2') { continue; }


                        if (!text) {
                            title = 'MY TOOLTIP'
                            text = "<table class='" + CLASS.tooltip + "'>" + (title || title === 0 ? "<tr><th colspan='2'>" + title + "</th></tr>" : "");
                        }

                        name = nameFormat(d[i].name);
                        value = valueFormat(d[i].value, d[i].ratio, d[i].id, d[i].index);
                        bgcolor = $$.levelColor ? $$.levelColor(d[i].value) : color(d[i].id);

                        text += "<tr class='" + CLASS.tooltipName + "-" + d[i].id + "'>";
                        text += "<td class='name'><span style='background-color:" + bgcolor + "; border-radius: 5px;'></span>" + name + "</td>";
                        text += "<td class='value'>" + value + "</td>";
                        text += "</tr>";
                    }

                    **var surchargedata;
                    $.getJSON('assets/json/surcharge.json', function(data)
                    {
                        console.log("Prima"+text);
                        surchargedata=data;
                        text += "<tr class='" + CLASS.tooltipName + "-Surcharge" + "'>";
                        text += "<td class='name'>" + surchargedata[i].Surcharge+ "</td>";
                        text += "<td class='value'>" + surchargedata[i].Surcharge+ "</td>";
                        text += "</tr></table>";
                        console.log(text);
                    })**

                    return text;
                }
            }
        });
    });
</script>

I printed the log and the table seems generated well but if you have a look at the tooltip :

I can't see the last row.

Here the log for the table generated:

    <table class='c3-tooltip'>
    <tr>
        <th colspan='2'>MY TOOLTIP</th>
    </tr>
    <tr class='c3-tooltip-name-Marketable'>
        <td class='name'><span style='background-color:#A09FA2; border-radius: 5px;'>
            </span>Marketable
        </td>
        <td class='value'>5,220,593 kWh/h</td>
    </tr>
    <tr class='c3-tooltip-name-Total Requested Capacity'>
        <td class='name'><span style='background-color:#272E80; border-radius: 5px;'>
            </span>Total Requested Capacity
        </td>
        <td class='value'>16,449,051 kWh/h</td>
    </tr>
    <tr class='c3-tooltip-name-Your Bid'>
        <td class='name'>
            <span style='background-color:#8EBF60; border-radius: 5px;'>
            </span>Your Bid
        </td>
        <td class='value'>100,000 kWh/h
        </td>
    </tr>
    <tr class='c3-tooltip-name-Surcharge'>
        <td class='name'>50.38</td>
        <td class='value'>50.38</td>
    </tr>
</table> 

Answer 1

You are loading the surcharge data using $.getJSON when you generate your tooltip. And your surcharge line is added to the text that you are generating for the tooltip in the callback. By this time, the actual tooltip function has returned with whatever text was generated before the $.getJSON call.

The easiest way to fix this would be to load your surcharge data first by moving your surcharge $.getJSON to wrap around your original script.

Here is the updated script.

<script>
    var surchargedata;
    $.getJSON('assets/json/surcharge.json', function (data) {
        surchargedata = data;

        var scene;
        $.getJSON('assets/json/chartc3.json', function (data) {
            scene = data;
            var chart = c3.generate({
                bindto: '#chartc3',
                data:
                    {
                        json: scene,
                        keys:
                        {
                            x: 'round',
                            value: ['Marketable', 'Total Requested Capacity', 'Your Bid'],
                        },
                        types: {
                            Marketable: 'area'
                        },
                        colors: {
                            Marketable: '#A09FA2',
                            'Total Requested Capacity': '#272E80',
                            'Your Bid': '#8EBF60'
                        }
                    },
                axis:
                {
                    x: {
                        tick:
                        {
                            culling:
                            {
                                max: 10
                            }
                        },
                        type: 'category'
                    },
                    y:
                    {
                        min: 0,
                        padding: {
                            bottom: 0
                        },
                        tick:
                        {
                            values: [[0], [d3.max(d3.values(scene))]],

                            format: function (d) { return d3.format(',f')(d) + ' kWh/h' }
                            //or format: function (d) { return '$' + d; }
                        }
                    }
                },
                tooltip: {
                    contents: function (d, defaultTitleFormat, defaultValueFormat, color) {
                        var $$ = this, config = $$.config, CLASS = $$.CLASS,
            titleFormat = config.tooltip_format_title || defaultTitleFormat,
            nameFormat = config.tooltip_format_name || function (name) { return name; },
            valueFormat = config.tooltip_format_value || defaultValueFormat,
            text, i, title, value, name, bgcolor;
                        console.log(JSON.stringify(d))
                        // You can access all of data like this:
                        for (i = 0; i < d.length; i++) {
                            if (!(d[i] && (d[i].value || d[i].value === 0))) { continue; }

                            // ADD
                            if (d[i].name === 'data2') { continue; }


                            if (!text) {
                                title = 'MY TOOLTIP'
                                text = "<table class='" + CLASS.tooltip + "'>" + (title || title === 0 ? "<tr><th colspan='2'>" + title + "</th></tr>" : "");
                            }

                            name = nameFormat(d[i].name);
                            value = valueFormat(d[i].value, d[i].ratio, d[i].id, d[i].index);
                            bgcolor = $$.levelColor ? $$.levelColor(d[i].value) : color(d[i].id);

                            text += "<tr class='" + CLASS.tooltipName + "-" + d[i].id + "'>";
                            text += "<td class='name'><span style='background-color:" + bgcolor + "; border-radius: 5px;'></span>" + name + "</td>";
                            text += "<td class='value'>" + value + "</td>";
                            text += "</tr>";
                        }

                        console.log("Prima" + text);
                        text += "<tr class='" + CLASS.tooltipName + "-Surcharge" + "'>";
                        text += "<td class='name'>" + surchargedata[i].Surcharge + "</td>";
                        text += "<td class='value'>" + surchargedata[i].Surcharge + "</td>";
                        text += "</tr></table>";
                        console.log(text);

                        return text;
                    }
                }
            });
        });
    })
</script>