client-freqwatch/Chart.js/samples/pie-customTooltips.html

   1 <!doctype html>
   2 <html>
   3
   4 <head>
   5     <title>Pie Chart with Custom Tooltips</title>
   6     <script src="../Chart.js"></script>
   7     <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
   8
   9     <style>
  10     #canvas-holder {
  11         width: 100%;
  12         margin-top: 50px;
  13         text-align: center;
  14     }
  15     #chartjs-tooltip {
  16         opacity: 1;
  17         position: absolute;
  18         background: rgba(0, 0, 0, .7);
  19         color: white;
  20         padding: 3px;
  21         border-radius: 3px;
  22         -webkit-transition: all .1s ease;
  23         transition: all .1s ease;
  24         pointer-events: none;
  25         -webkit-transform: translate(-50%, 0);
  26         transform: translate(-50%, 0);
  27     }
  28     #chartjs-tooltip.below {
  29         -webkit-transform: translate(-50%, 0);
  30         transform: translate(-50%, 0);
  31     }
  32     #chartjs-tooltip.below:before {
  33         border: solid;
  34         border-color: #111 transparent;
  35         border-color: rgba(0, 0, 0, .8) transparent;
  36         border-width: 0 8px 8px 8px;
  37         bottom: 1em;
  38         content: "";
  39         display: block;
  40         left: 50%;
  41         position: absolute;
  42         z-index: 99;
  43         -webkit-transform: translate(-50%, -100%);
  44         transform: translate(-50%, -100%);
  45     }
  46     #chartjs-tooltip.above {
  47         -webkit-transform: translate(-50%, -100%);
  48         transform: translate(-50%, -100%);
  49     }
  50     #chartjs-tooltip.above:before {
  51         border: solid;
  52         border-color: #111 transparent;
  53         border-color: rgba(0, 0, 0, .8) transparent;
  54         border-width: 8px 8px 0 8px;
  55         bottom: 1em;
  56         content: "";
  57         display: block;
  58         left: 50%;
  59         top: 100%;
  60         position: absolute;
  61         z-index: 99;
  62         -webkit-transform: translate(-50%, 0);
  63         transform: translate(-50%, 0);
  64     }
  65     </style>
  66 </head>
  67
  68 <body>
  69     <div id="canvas-holder">
  70         <canvas id="chart-area1" width="50" height="50" />
  71     </div>
  72     <div id="canvas-holder">
  73         <canvas id="chart-area2" width="300" height="300" />
  74     </div>
  75
  76     <div id="chartjs-tooltip"></div>
  77
  78
  79     <script>
  80     Chart.defaults.global.customTooltips = function(tooltip) {
  81
  82         // Tooltip Element
  83         var tooltipEl = $('#chartjs-tooltip');
  84
  85         // Hide if no tooltip
  86         if (!tooltip) {
  87             tooltipEl.css({
  88                 opacity: 0
  89             });
  90             return;
  91         }
  92
  93         // Set caret Position
  94         tooltipEl.removeClass('above below');
  95         tooltipEl.addClass(tooltip.yAlign);
  96
  97         // Set Text
  98         tooltipEl.html(tooltip.text);
  99
 100         // Find Y Location on page
 101         var top;
 102         if (tooltip.yAlign == 'above') {
 103             top = tooltip.y - tooltip.caretHeight - tooltip.caretPadding;
 104         } else {
 105             top = tooltip.y + tooltip.caretHeight + tooltip.caretPadding;
 106         }
 107
 108         // Display, position, and set styles for font
 109         tooltipEl.css({
 110             opacity: 1,
 111             left: tooltip.chart.canvas.offsetLeft + tooltip.x + 'px',
 112             top: tooltip.chart.canvas.offsetTop + top + 'px',
 113             fontFamily: tooltip.fontFamily,
 114             fontSize: tooltip.fontSize,
 115             fontStyle: tooltip.fontStyle,
 116         });
 117     };
 118
 119     var pieData = [{
 120         value: 300,
 121         color: "#F7464A",
 122         highlight: "#FF5A5E",
 123         label: "Red"
 124     }, {
 125         value: 50,
 126         color: "#46BFBD",
 127         highlight: "#5AD3D1",
 128         label: "Green"
 129     }, {
 130         value: 100,
 131         color: "#FDB45C",
 132         highlight: "#FFC870",
 133         label: "Yellow"
 134     }, {
 135         value: 40,
 136         color: "#949FB1",
 137         highlight: "#A8B3C5",
 138         label: "Grey"
 139     }, {
 140         value: 120,
 141         color: "#4D5360",
 142         highlight: "#616774",
 143         label: "Dark Grey"
 144     }];
 145
 146     window.onload = function() {
 147         var ctx1 = document.getElementById("chart-area1").getContext("2d");
 148         window.myPie = new Chart(ctx1).Pie(pieData);
 149
 150         var ctx2 = document.getElementById("chart-area2").getContext("2d");
 151         window.myPie = new Chart(ctx2).Pie(pieData);
 152     };
 153     </script>
 154 </body>
 155
 156 </html>