score:1

Accepted answer

customized multiline tooltip in chartjs:

<!doctype html>
                <!--
                homt.html
                -->
                <html>
                    <head>
                        <title>customised tooltip</title>
                        <!--chartjs-->
                        <script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.4.0/chart.min.js"></script>
                        <!--chartjs-->
                        <style>
                div {
                  height: 600px;
                  width: 700px;
                }
                </style>
                    </head>
                    <body>
                        <div id="mycan" >
                            <canvas id="bar"></canvas>
                        </div>
                    </body>
                    <script type="text/javascript">
                        var datajason = {
                    "meth": [{
                        "tech": "css", "avg": 3, "count": 80, "sum": 53
                    },
                    {
                        "tech": "ccs", "avg": 9, "count": 70, "sum": 25
                    },
                    {
                        "tech": "csc", "avg": 7, "count": 50, "sum": 66
                    }]
                };

                var techdata = [];
                var countdata = [];
                var avgdata = [];
                var sumdata = [];
                function techdata(){
                    var jdata = datajason.meth;
                    var jl = jdata.length;
                    for(var i = 0; i < jl; i++){
                        techdata.push(datajason.meth[i].tech);
                        countdata.push(datajason.meth[i].count);
                        avgdata.push(datajason.meth[i].avg);
                        sumdata.push(datajason.meth[i].sum);
                    }
                }

                var colorcode = ['#5dade2','#f1c40f','#00ffff','#a569bd','#f5b041','#566573'];

                function init(){
                    techdata();
                    var ctx1 = document.getelementbyid("bar").getcontext('2d');
                    var mychart1 = new chart(ctx1, {
                                type: 'bar',  
                            options: {
                                legend: {
                                display: false
                            },
                                tooltips: {
                                    callbacks: {
                                        beforelabel: function(tooltipitem, data){
                                            var dataset = data.datasets[tooltipitem.datasetindex];
                                            return data.datasets[tooltipitem.datasetindex].label+ ' : '+dataset.data[tooltipitem.index]+"%";
                                        },
                                        label: function(tooltipitem, data) {
                                            var avg = "avg: "+avgdata[tooltipitem.index];
                                            return avg;
                                        },
                                        afterlabel: function(tooltipitem, data){
                                            var sum = "sum: "+sumdata[tooltipitem.index];
                                            return sum;
                                        }
                                    }
                                }, 
                                scales: {
                                    yaxes: [{
                                        ticks: {
                                            beginatzero: true, steps: 10, stepvalue: 5, max: 100
                                        }
                                    }]
                                }
                            }, 
                            data: {
                                labels: techdata, datasets: [{
                                    backgroundcolor: colorcode, label: 'method covered', data: countdata
                                }]
                            }
                       }
                   );
                }

                window.onload = function(){
                  init();  
                };

                    </script>
                </html>

******output******

score:2

the graph with custom tool tip using chartjs.

tooltipgraph

javascript code.

//
// appcharts.js

//alert("tooltips");
//var countdatat = [80, 70, 50];
//var techdatat = ["css", "ccs", "csc"];
//var avgdatat = [3, 9, 7];
//var sumdatat = [53, 25, 66];
var datajason = {
    "meth": [{
        "tech": "css", "avg": 3, "count": 80, "sum": 53
    },
    {
        "tech": "ccs", "avg": 9, "count": 70, "sum": 25
    },
    {
        "tech": "csc", "avg": 7, "count": 50, "sum": 66
    }]
};

var techdata = [];
var countdata = [];
var avgdata = [];
var sumdata = [];
function techdata(){
    var jdata = datajason.meth;
    var jl = jdata.length;
    for(var i = 0; i < jl; i++){
        techdata.push(datajason.meth[i].tech);
        countdata.push(datajason.meth[i].count);
        avgdata.push(datajason.meth[i].avg);
        sumdata.push(datajason.meth[i].sum);
    }
}

var colorcode = [
    'rgba(255, 99, 132, 0.2)',
    'rgba(54, 162, 235, 0.2)',
    'rgba(255, 206, 86, 0.2)',
    'rgba(75, 192, 192, 0.2)',
    'rgba(153, 102, 255, 0.2)',
    'rgba(255, 159, 64, 0.2)'
];

function init(){
    techdata();
    var ctx1 = document.getelementbyid("bar").getcontext('2d');
    var mychart1 = new chart(ctx1, {
                type: 'bar', legend: {
                display: true
            }, 
            options: {
                tooltips: {
                    callbacks: {
                        label: function(tooltipitem, data) {
                            var avg = ", avg: "+avgdata[tooltipitem.index];
                            var sum = ", sum: "+sumdata[tooltipitem.index];
                            var dataset = data.datasets[tooltipitem.datasetindex];
                            return data.datasets[tooltipitem.datasetindex].label+ ' : '+dataset.data[tooltipitem.index]+"%"+avg+sum;
                        }
                    }
                }, 
                scales: {
                    yaxes: [{
                        ticks: {
                            beginatzero: true, steps: 10, stepvalue: 5, max: 100
                        }
                    }]
                }
            }, 
            data: {
                labels: techdata, datasets: [{
                    backgroundcolor: colorcode, label: 'method covered', data: countdata
                }]
            }
       }
   );
}

window.onload = function(){
  init();  
};

//alert("done");

//

html code.

<!doctype html>
<!--
index.html
-->
<html>
    <head>
        <title>custom tooltip</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="lib/charts/chart.bundle.js"></script>
        <script src="js/appcharts.js"></script>
    </head>
    <body>
        <br><hr><br>
        <div id="mycan">
            <canvas id="bar" width="100" height="100"></canvas>
        </div>
        <br><hr><br>
    </body>
</html>

enjoy.



Related Query

More Query from same tag