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

   1 <!doctype html>
   2 <html>
   3
   4 <head>
   5     <title>Line 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-holder1 {
  11         width: 300px;
  12         margin: 20px auto;
  13     }
  14     #canvas-holder2 {
  15         width: 50%;
  16         margin: 20px 25%;
  17     }
  18     #chartjs-tooltip {
  19         opacity: 1;
  20         position: absolute;
  21         background: rgba(0, 0, 0, .7);
  22         color: white;
  23         padding: 3px;
  24         border-radius: 3px;
  25         -webkit-transition: all .1s ease;
  26         transition: all .1s ease;
  27         pointer-events: none;
  28         -webkit-transform: translate(-50%, 0);
  29         transform: translate(-50%, 0);
  30     }
  31         .chartjs-tooltip-key{
  32                 display:inline-block;
  33                 width:10px;
  34                 height:10px;
  35         }
  36     </style>
  37 </head>
  38
  39 <body>
  40     <div id="canvas-holder1">
  41         <canvas id="chart1" width="300" height="30" />
  42     </div>
  43     <div id="canvas-holder2">
  44         <canvas id="chart2" width="450" height="600" />
  45     </div>
  46
  47     <div id="chartjs-tooltip"></div>
  48
  49
  50     <script>
  51
  52     Chart.defaults.global.pointHitDetectionRadius = 1;
  53     Chart.defaults.global.customTooltips = function(tooltip) {
  54
  55         var tooltipEl = $('#chartjs-tooltip');
  56
  57         if (!tooltip) {
  58             tooltipEl.css({
  59                 opacity: 0
  60             });
  61             return;
  62         }
  63
  64         tooltipEl.removeClass('above below');
  65         tooltipEl.addClass(tooltip.yAlign);
  66
  67         var innerHtml = '';
  68         for (var i = tooltip.labels.length - 1; i >= 0; i--) {
  69                 innerHtml += [
  70                         '<div class="chartjs-tooltip-section">',
  71                         '       <span class="chartjs-tooltip-key" style="background-color:' + tooltip.legendColors[i].fill + '"></span>',
  72                         '       <span class="chartjs-tooltip-value">' + tooltip.labels[i] + '</span>',
  73                         '</div>'
  74                 ].join('');
  75         }
  76         tooltipEl.html(innerHtml);
  77
  78         tooltipEl.css({
  79             opacity: 1,
  80             left: tooltip.chart.canvas.offsetLeft + tooltip.x + 'px',
  81             top: tooltip.chart.canvas.offsetTop + tooltip.y + 'px',
  82             fontFamily: tooltip.fontFamily,
  83             fontSize: tooltip.fontSize,
  84             fontStyle: tooltip.fontStyle,
  85         });
  86     };
  87     var randomScalingFactor = function() {
  88         return Math.round(Math.random() * 100);
  89     };
  90     var lineChartData = {
  91         labels: ["January", "February", "March", "April", "May", "June", "July"],
  92         datasets: [{
  93             label: "My First dataset",
  94             fillColor: "rgba(220,220,220,0.2)",
  95             strokeColor: "rgba(220,220,220,1)",
  96             pointColor: "rgba(220,220,220,1)",
  97             pointStrokeColor: "#fff",
  98             pointHighlightFill: "#fff",
  99             pointHighlightStroke: "rgba(220,220,220,1)",
 100             data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
 101         }, {
 102             label: "My Second dataset",
 103             fillColor: "rgba(151,187,205,0.2)",
 104             strokeColor: "rgba(151,187,205,1)",
 105             pointColor: "rgba(151,187,205,1)",
 106             pointStrokeColor: "#fff",
 107             pointHighlightFill: "#fff",
 108             pointHighlightStroke: "rgba(151,187,205,1)",
 109             data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
 110         }]
 111     };
 112
 113     window.onload = function() {
 114         var ctx1 = document.getElementById("chart1").getContext("2d");
 115         window.myLine = new Chart(ctx1).Line(lineChartData, {
 116                 showScale: false,
 117                 pointDot : true,
 118             responsive: true
 119         });
 120
 121         var ctx2 = document.getElementById("chart2").getContext("2d");
 122         window.myLine = new Chart(ctx2).Line(lineChartData, {
 123             responsive: true
 124         });
 125     };
 126     </script>
 127 </body>
 128
 129 </html>