Post
Ask Question

Client Side Chart Widget in HTML 5: Part 8 (Pie 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, Radar Charts and Line Chart with a custom tooltip. Please see the following links.
Now we will explain a client Pie 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> Pie 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>     
    Include UI Elements
    1. <div id="canvas-holder">    
    2.     <canvas id="chart-area1" width="50" height="50" />    
    3. </div>    
    4. <div id="canvas-holder">    
    5.     <canvas id="chart-area2" width="300" height="300" />    
    6. </div>    
    7. <div id="chartjs-tooltip"></div>  
    Call the Chart Function
    1. window.onload = function () {    
    2.     var ctx1 = document.getElementById("chart-area1").getContext("2d");    
    3.     window.myPie = new Chart(ctx1).Pie(pieData);    
    4.     
    5.     var ctx2 = document.getElementById("chart-area2").getContext("2d");    
    6.     window.myPie = new Chart(ctx2).Pie(pieData);    
    7. ;     
      Here we are loading the chart in the chart-area1 and chart-area2.
       
      As you can see in the preceding code, pieData is the data we will load into the chart.
      1. var pieData = [{    
      2.            value: 300,    
      3.            color: "#F7464A",    
      4.            highlight: "#FF5A5E",    
      5.            label: "Monday"    
      6.        }, {    
      7.            value: 50,    
      8.            color: "#46BFBD",    
      9.            highlight: "#5AD3D1",    
      10.            label: "Tuesday"    
      11.        }, {    
      12.            value: 100,    
      13.            color: "#FDB45C",    
      14.            highlight: "#FFC870",    
      15.            label: "Wednesday"    
      16.        }, {    
      17.            value: 40,    
      18.            color: "#949FB1",    
      19.            highlight: "#A8B3C5",    
      20.            label: "Thursday"    
      21.        }, {    
      22.            value: 120,    
      23.            color: "#4D5360",    
      24.            highlight: "#616774",    
      25.            label: "Friday"    
      26.        }];   
        Properties
        • Value
        • Color
        • Highlight
        • Label
        Here you can change the properties as you want.
         
        Now add the following style.
        1. <style>    
        2.         #canvas-holder {    
        3.             width: 100%;    
        4.             margin-top: 50px;    
        5.             text-align: center;    
        6.         }    
        7.   
        8.         #chartjs-tooltip {    
        9.             opacity: 1;    
        10.             position: absolute;    
        11.             background: rgba(0, 0, 0, .7);    
        12.             color: white;    
        13.             padding: 3px;    
        14.             border-radius: 3px;    
        15.             -webkit-transition: all .1s ease;    
        16.             transition: all .1s ease;    
        17.             pointer-events: none;    
        18.             -webkit-transform: translate(-50%, 0);    
        19.             transform: translate(-50%, 0);    
        20.         }    
        21.   
        22.             #chartjs-tooltip.below {    
        23.                 -webkit-transform: translate(-50%, 0);    
        24.                 transform: translate(-50%, 0);    
        25.             }    
        26.   
        27.                 #chartjs-tooltip.below:before {    
        28.                     border: solid;    
        29.                     border-color: #111 transparent;    
        30.                     border-color: rgba(0, 0, 0, .8) transparent;    
        31.                     border-width: 0 8px 8px 8px;    
        32.                     bottom: 1em;    
        33.                     content: "";    
        34.                     display: block;    
        35.                     left: 50%;    
        36.                     position: absolute;    
        37.                     z-index: 99;    
        38.                     -webkit-transform: translate(-50%, -100%);    
        39.                     transform: translate(-50%, -100%);    
        40.                 }    
        41.   
        42.             #chartjs-tooltip.above {    
        43.                 -webkit-transform: translate(-50%, -100%);    
        44.                 transform: translate(-50%, -100%);    
        45.             }    
        46.   
        47.                 #chartjs-tooltip.above:before {    
        48.                     border: solid;    
        49.                     border-color: #111 transparent;    
        50.                     border-color: rgba(0, 0, 0, .8) transparent;    
        51.                     border-width: 8px 8px 0 8px;    
        52.                     bottom: 1em;    
        53.                     content: "";    
        54.                     display: block;    
        55.                     left: 50%;    
        56.                     top: 100%;    
        57.                     position: absolute;    
        58.                     z-index: 99;    
        59.                     -webkit-transform: translate(-50%, 0);    
        60.                     transform: translate(-50%, 0);    
        61.                 }    
        62. </style>   
        Load the tooltip
         
         You can include the tooltip as follows.
        1. Chart.defaults.global.customTooltips = function (tooltip) {    
        2.     
        3.             // Tooltip Element    
        4.             var tooltipEl = $('#chartjs-tooltip');    
        5.     
        6.             // Hide if no tooltip    
        7.             if (!tooltip) {    
        8.                 tooltipEl.css({    
        9.                     opacity: 0    
        10.                 });    
        11.                 return;    
        12.             }    
        13.     
        14.             // Set caret Position    
        15.             tooltipEl.removeClass('above below');    
        16.             tooltipEl.addClass(tooltip.yAlign);    
        17.     
        18.             // Set Text    
        19.             tooltipEl.html(tooltip.text);    
        20.     
        21.             // Find Y Location on page    
        22.             var top;    
        23.             if (tooltip.yAlign == 'above') {    
        24.                 top = tooltip.y - tooltip.caretHeight - tooltip.caretPadding;    
        25.             } else {    
        26.                 top = tooltip.y + tooltip.caretHeight + tooltip.caretPadding;    
        27.             }    
        28.     
        29.             // Display, position, and set styles for font    
        30.             tooltipEl.css({    
        31.                 opacity: 1,    
        32.                 left: tooltip.chart.canvas.offsetLeft + tooltip.x + 'px',    
        33.                 top: tooltip.chart.canvas.offsetTop + top + 'px',    
        34.                 fontFamily: tooltip.fontFamily,    
        35.                 fontSize: tooltip.fontSize,    
        36.                 fontStyle: tooltip.fontStyle,    
        37.             });    
        38.         };   
          Please note that you can change your tooltip as needed.
           
          Complete HTML
          1. <!doctype html>    
          2. <html>    
          3. <head>    
          4.     <title>Pie 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-holder {    
          9.             width: 100%;    
          10.             margin-top: 50px;    
          11.             text-align: center;    
          12.         }    
          13.   
          14.         #chartjs-tooltip {    
          15.             opacity: 1;    
          16.             position: absolute;    
          17.             background: rgba(0, 0, 0, .7);    
          18.             color: white;    
          19.             padding: 3px;    
          20.             border-radius: 3px;    
          21.             -webkit-transition: all .1s ease;    
          22.             transition: all .1s ease;    
          23.             pointer-events: none;    
          24.             -webkit-transform: translate(-50%, 0);    
          25.             transform: translate(-50%, 0);    
          26.         }    
          27.   
          28.             #chartjs-tooltip.below {    
          29.                 -webkit-transform: translate(-50%, 0);    
          30.                 transform: translate(-50%, 0);    
          31.             }    
          32.   
          33.                 #chartjs-tooltip.below:before {    
          34.                     border: solid;    
          35.                     border-color: #111 transparent;    
          36.                     border-color: rgba(0, 0, 0, .8) transparent;    
          37.                     border-width: 0 8px 8px 8px;    
          38.                     bottom: 1em;    
          39.                     content: "";    
          40.                     display: block;    
          41.                     left: 50%;    
          42.                     position: absolute;    
          43.                     z-index: 99;    
          44.                     -webkit-transform: translate(-50%, -100%);    
          45.                     transform: translate(-50%, -100%);    
          46.                 }    
          47.   
          48.             #chartjs-tooltip.above {    
          49.                 -webkit-transform: translate(-50%, -100%);    
          50.                 transform: translate(-50%, -100%);    
          51.             }    
          52.   
          53.                 #chartjs-tooltip.above:before {    
          54.                     border: solid;    
          55.                     border-color: #111 transparent;    
          56.                     border-color: rgba(0, 0, 0, .8) transparent;    
          57.                     border-width: 8px 8px 0 8px;    
          58.                     bottom: 1em;    
          59.                     content: "";    
          60.                     display: block;    
          61.                     left: 50%;    
          62.                     top: 100%;    
          63.                     position: absolute;    
          64.                     z-index: 99;    
          65.                     -webkit-transform: translate(-50%, 0);    
          66.                     transform: translate(-50%, 0);    
          67.                 }    
          68.     </style>    
          69. </head>    
          70. <body>    
          71.     Pie Chart With Custom Tooltip @ <a href="www.sibeeshpassion.com">www.sibeeshpassion.com</a>    
          72.     <div id="canvas-holder">    
          73.         <canvas id="chart-area1" width="50" height="50" />    
          74.     </div>    
          75.     <div id="canvas-holder">    
          76.         <canvas id="chart-area2" width="300" height="300" />    
          77.     </div>    
          78.     <div id="chartjs-tooltip"></div>    
          79.     
          80.     <script>    
          81.         Chart.defaults.global.customTooltips = function (tooltip) {    
          82.     
          83.             // Tooltip Element    
          84.             var tooltipEl = $('#chartjs-tooltip');    
          85.     
          86.             // Hide if no tooltip    
          87.             if (!tooltip) {    
          88.                 tooltipEl.css({    
          89.                     opacity: 0    
          90.                 });    
          91.                 return;    
          92.             }    
          93.     
          94.             // Set caret Position    
          95.             tooltipEl.removeClass('above below');    
          96.             tooltipEl.addClass(tooltip.yAlign);    
          97.     
          98.             // Set Text    
          99.             tooltipEl.html(tooltip.text);    
          100.     
          101.             // Find Y Location on page    
          102.             var top;    
          103.             if (tooltip.yAlign == 'above') {    
          104.                 top = tooltip.y - tooltip.caretHeight - tooltip.caretPadding;    
          105.             } else {    
          106.                 top = tooltip.y + tooltip.caretHeight + tooltip.caretPadding;    
          107.             }    
          108.     
          109.             // Display, position, and set styles for font    
          110.             tooltipEl.css({    
          111.                 opacity: 1,    
          112.                 left: tooltip.chart.canvas.offsetLeft + tooltip.x + 'px',    
          113.                 top: tooltip.chart.canvas.offsetTop + top + 'px',    
          114.                 fontFamily: tooltip.fontFamily,    
          115.                 fontSize: tooltip.fontSize,    
          116.                 fontStyle: tooltip.fontStyle,    
          117.             });    
          118.         };    
          119.     
          120.         var pieData = [{    
          121.             value: 300,    
          122.             color: "#F7464A",    
          123.             highlight: "#FF5A5E",    
          124.             label: "Monday"    
          125.         }, {    
          126.             value: 50,    
          127.             color: "#46BFBD",    
          128.             highlight: "#5AD3D1",    
          129.             label: "Tuesday"    
          130.         }, {    
          131.             value: 100,    
          132.             color: "#FDB45C",    
          133.             highlight: "#FFC870",    
          134.             label: "Wednesday"    
          135.         }, {    
          136.             value: 40,    
          137.             color: "#949FB1",    
          138.             highlight: "#A8B3C5",    
          139.             label: "Thursday"    
          140.         }, {    
          141.             value: 120,    
          142.             color: "#4D5360",    
          143.             highlight: "#616774",    
          144.             label: "Friday"    
          145.         }];    
          146.     
          147.         window.onload = function () {    
          148.             var ctx1 = document.getElementById("chart-area1").getContext("2d");    
          149.             window.myPie = new Chart(ctx1).Pie(pieData);    
          150.     
          151.             var ctx2 = document.getElementById("chart-area2").getContext("2d");    
          152.             window.myPie = new Chart(ctx2).Pie(pieData);    
          153.         };    
          154.     </script>    
          155. </body>    
          156. </html>  

          Conclusion

           
          I hope you can now create your own chart. That is all for today. Please provide your valuable suggestions.
           
          Please download the source code for more info.
           
          Output
           
          pie chart
          piechart
           
           
          Kindest Regards,
           
          Sibeesh Venu


          Similar Articles