Post
Ask Question

Client Side Chart Widget in HTML 5: Part 7 (Line Chart With Custom ToolTip)

Introduction

 
I hope you have read my first two articles in this series that explains the loading of Bar Charts, Pie Charts, Line Charts, Doughnut Charts, Polar Area Charts, and Radar Charts. Please see the following links.
Now we will explain a client Line Chart widget with custom tooltip in HTML5.
 
Background
 
Please download the necessary files here.
 
Using the code
 
A simple HTML
  1. <!DOCTYPE html>     
  2.    <html xmlns="http://www.w3.org/1999/xhtml">     
  3.       <head>     
  4.          <title> Line Chart widget with custom tooltip Using Chart.js</title>     
  5.       </head>     
  6.       <body></body>     
  7.    </html>    
    Included JavaScript file
    1. <script src="Chart.js"></script>     
    2. <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>   
      Call the Chart Function
      1. window.onload = function () {    
      2.    var ctx1 = document.getElementById("myChart").getContext("2d");    
      3.    window.myLine = new Chart(ctx1).Line(lineChartData, {    
      4.       showScale: false,    
      5.       pointDot: true,    
      6.       responsive: true    
      7.    });    
      8. };    
      Here we are loading the chart in the myChart.
       
      As you can see in the preceding code, lineChartData is the data we will load into the chart.
      1. var lineChartData = {    
      2.     labels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],    
      3.     datasets: [{    
      4.         label: "My First dataset",    
      5.         fillColor: "rgba(220,220,220,0.2)",    
      6.         strokeColor: "rgba(220,220,220,1)",    
      7.         pointColor: "rgba(220,220,220,1)",    
      8.         pointStrokeColor: "#fff",    
      9.         pointHighlightFill: "#fff",    
      10.         pointHighlightStroke: "rgba(220,220,220,1)",    
      11.         data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]    
      12.     }, {    
      13.         label: "My Second dataset",    
      14.         fillColor: "rgba(151,187,205,0.2)",    
      15.         strokeColor: "rgba(151,187,205,1)",    
      16.         pointColor: "rgba(151,187,205,1)",    
      17.         pointStrokeColor: "#fff",    
      18.         pointHighlightFill: "#fff",    
      19.         pointHighlightStroke: "rgba(151,187,205,1)",    
      20.         data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]    
      21.     }]    
      22.        };    
        Properties  
        • Labels
        • Datasets
          1. label ( label for your dataset)
          2. fillColor
          3. strokeColor
          4. pointColor
          5. pointStrokeColor
          6. pointHighlightFill
          7. pointHighlightStroke
          8. data
        Here you can change the properties as you want.
         
        Now add the following style for our tooltip:
        1. <style>    
        2.     #chartjs-tooltip {    
        3.         opacity: 1;    
        4.         position: absolute;    
        5.         background: rgba(0, 0, 0, .7);    
        6.         color: white;    
        7.         padding: 3px;    
        8.         border-radius: 3px;    
        9.         -webkit-transition: all .1s ease;    
        10.         transition: all .1s ease;    
        11.         pointer-events: none;    
        12.         -webkit-transform: translate(-50%, 0);    
        13.         transform: translate(-50%, 0);    
        14.     }    
        15.     
        16.     .chartjs-tooltip-key {    
        17.         display: inline-block;    
        18.         width: 10px;    
        19.         height: 10px;    
        20.     }    
        21. </style>   
          Load the tooltip
           
          You can include the tooltip as follows.
          1. Chart.defaults.global.pointHitDetectionRadius = 1;    
          2. Chart.defaults.global.customTooltips = function (tooltip) {    
          3.     
          4.     var tooltipEl = $('#chartjs-tooltip');    
          5.     
          6.     if (!tooltip) {    
          7.         tooltipEl.css({    
          8.             opacity: 0    
          9.         });    
          10.         return;    
          11.     }    
          12.     
          13.     tooltipEl.removeClass('above below');    
          14.     tooltipEl.addClass(tooltip.yAlign);    
          15.     
          16.     var innerHtml = '';    
          17.     for (var i = tooltip.labels.length - 1; i >= 0; i--) {    
          18.         innerHtml += [    
          19.             '<div class="chartjs-tooltip-section">',    
          20.             '   <span class="chartjs-tooltip-key" style="background-color:' + tooltip.legendColors[i].fill + '"></span>',    
          21.             '   <span class="chartjs-tooltip-value">' + 'My Custom Tooltip : '+ tooltip.labels[i] + '</span>',    
          22.             '</div>'    
          23.         ].join('');    
          24.     }    
          25.     tooltipEl.html(innerHtml);    
          26.     
          27.     tooltipEl.css({    
          28.         opacity: 1,    
          29.         left: tooltip.chart.canvas.offsetLeft + tooltip.x + 'px',    
          30.         top: tooltip.chart.canvas.offsetTop + tooltip.y + 'px',    
          31.         fontFamily: tooltip.fontFamily,    
          32.         fontSize: tooltip.fontSize,    
          33.         fontStyle: tooltip.fontStyle,    
          34.     });    
          35. };   
            Please note that you can change your tooltip as needed.
             
            Complete HTML
            1. <!doctype html>    
            2. <html>    
            3. <head>    
            4.     <title>Line Chart with Custom Tooltips</title>    
            5.     <script src="Chart.js"></script>    
            6.     <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>    
            7.     <style>    
            8.         #canvas-holder1 {    
            9.             width: 300px;    
            10.             margin: 20px auto;    
            11.         }    
            12.    
            13.         #chartjs-tooltip {    
            14.             opacity: 1;    
            15.             position: absolute;    
            16.             background: rgba(0, 0, 0, .7);    
            17.             color: white;    
            18.             padding: 3px;    
            19.             border-radius: 3px;    
            20.             -webkit-transition: all .1s ease;    
            21.             transition: all .1s ease;    
            22.             pointer-events: none;    
            23.             -webkit-transform: translate(-50%, 0);    
            24.             transform: translate(-50%, 0);    
            25.         }    
            26.     
            27.         .chartjs-tooltip-key {    
            28.             display: inline-block;    
            29.             width: 10px;    
            30.             height: 10px;    
            31.         }    
            32.     </style>    
            33. </head>    
            34. <body>    
            35.     <div>    
            36.         Line Chart With Custom Tooltip @ <a href="www.sibeeshpassion.com">www.sibeeshpassion.com</a>    
            37.         <canvas id="myChart"></canvas>    
            38.     </div>    
            39.     <div id="chartjs-tooltip"></div>    
            40.     
            41.     <script>    
            42.     
            43.         Chart.defaults.global.pointHitDetectionRadius = 1;    
            44.         Chart.defaults.global.customTooltips = function (tooltip) {    
            45.     
            46.             var tooltipEl = $('#chartjs-tooltip');    
            47.     
            48.             if (!tooltip) {    
            49.                 tooltipEl.css({    
            50.                     opacity: 0    
            51.                 });    
            52.                 return;    
            53.             }    
            54.     
            55.             tooltipEl.removeClass('above below');    
            56.             tooltipEl.addClass(tooltip.yAlign);    
            57.     
            58.             var innerHtml = '';    
            59.             for (var i = tooltip.labels.length - 1; i >= 0; i--) {    
            60.                 innerHtml += [    
            61.                     '<div class="chartjs-tooltip-section">',    
            62.                     '   <span class="chartjs-tooltip-key" style="background-color:' + tooltip.legendColors[i].fill + '"></span>',    
            63.                     '   <span class="chartjs-tooltip-value">' + 'My Custom Tooltip : '+ tooltip.labels[i] + '</span>',    
            64.                     '</div>'    
            65.                 ].join('');    
            66.             }    
            67.             tooltipEl.html(innerHtml);    
            68.     
            69.             tooltipEl.css({    
            70.                 opacity: 1,    
            71.                 left: tooltip.chart.canvas.offsetLeft + tooltip.x + 'px',    
            72.                 top: tooltip.chart.canvas.offsetTop + tooltip.y + 'px',    
            73.                 fontFamily: tooltip.fontFamily,    
            74.                 fontSize: tooltip.fontSize,    
            75.                 fontStyle: tooltip.fontStyle,    
            76.             });    
            77.         };    
            78.         var randomScalingFactor = function () {    
            79.             return Math.round(Math.random() * 100);    
            80.         };    
            81.         var lineChartData = {    
            82.             labels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],    
            83.             datasets: [{    
            84.                 label: "My First dataset",    
            85.                 fillColor: "rgba(220,220,220,0.2)",    
            86.                 strokeColor: "rgba(220,220,220,1)",    
            87.                 pointColor: "rgba(220,220,220,1)",    
            88.                 pointStrokeColor: "#fff",    
            89.                 pointHighlightFill: "#fff",    
            90.                 pointHighlightStroke: "rgba(220,220,220,1)",    
            91.                 data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]    
            92.             }, {    
            93.                 label: "My Second dataset",    
            94.                 fillColor: "rgba(151,187,205,0.2)",    
            95.                 strokeColor: "rgba(151,187,205,1)",    
            96.                 pointColor: "rgba(151,187,205,1)",    
            97.                 pointStrokeColor: "#fff",    
            98.                 pointHighlightFill: "#fff",    
            99.                 pointHighlightStroke: "rgba(151,187,205,1)",    
            100.                 data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]    
            101.             }]    
            102.         };    
            103.     
            104.         window.onload = function () {    
            105.             var ctx1 = document.getElementById("myChart").getContext("2d");    
            106.             window.myLine = new Chart(ctx1).Line(lineChartData, {    
            107.                 showScale: false,    
            108.                 pointDot: true,    
            109.                 responsive: true    
            110.             });    
            111.         };    
            112.     </script>    
            113. </body>    
            114. </html>   

              Conclusion

               
              I hope you can now create your own chart. That is all for today. Please provide your valuable suggestions.
               
              Output
               
              Line Chart
               
              Kindest Regards
               
              Sibeesh 
               


              Similar Articles