diff options
Diffstat (limited to 'www/lib/Chart.js/samples/pie-customTooltips.html')
| -rw-r--r-- | www/lib/Chart.js/samples/pie-customTooltips.html | 156 |
1 files changed, 0 insertions, 156 deletions
diff --git a/www/lib/Chart.js/samples/pie-customTooltips.html b/www/lib/Chart.js/samples/pie-customTooltips.html deleted file mode 100644 index 732317de..00000000 --- a/www/lib/Chart.js/samples/pie-customTooltips.html +++ /dev/null @@ -1,156 +0,0 @@ -<!doctype html> -<html> - -<head> - <title>Pie Chart with Custom Tooltips</title> - <script src="../Chart.js"></script> - <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> - - <style> - #canvas-holder { - width: 100%; - margin-top: 50px; - text-align: center; - } - #chartjs-tooltip { - opacity: 1; - position: absolute; - background: rgba(0, 0, 0, .7); - color: white; - padding: 3px; - border-radius: 3px; - -webkit-transition: all .1s ease; - transition: all .1s ease; - pointer-events: none; - -webkit-transform: translate(-50%, 0); - transform: translate(-50%, 0); - } - #chartjs-tooltip.below { - -webkit-transform: translate(-50%, 0); - transform: translate(-50%, 0); - } - #chartjs-tooltip.below:before { - border: solid; - border-color: #111 transparent; - border-color: rgba(0, 0, 0, .8) transparent; - border-width: 0 8px 8px 8px; - bottom: 1em; - content: ""; - display: block; - left: 50%; - position: absolute; - z-index: 99; - -webkit-transform: translate(-50%, -100%); - transform: translate(-50%, -100%); - } - #chartjs-tooltip.above { - -webkit-transform: translate(-50%, -100%); - transform: translate(-50%, -100%); - } - #chartjs-tooltip.above:before { - border: solid; - border-color: #111 transparent; - border-color: rgba(0, 0, 0, .8) transparent; - border-width: 8px 8px 0 8px; - bottom: 1em; - content: ""; - display: block; - left: 50%; - top: 100%; - position: absolute; - z-index: 99; - -webkit-transform: translate(-50%, 0); - transform: translate(-50%, 0); - } - </style> -</head> - -<body> - <div id="canvas-holder"> - <canvas id="chart-area1" width="50" height="50" /> - </div> - <div id="canvas-holder"> - <canvas id="chart-area2" width="300" height="300" /> - </div> - - <div id="chartjs-tooltip"></div> - - - <script> - Chart.defaults.global.customTooltips = function(tooltip) { - - // Tooltip Element - var tooltipEl = $('#chartjs-tooltip'); - - // Hide if no tooltip - if (!tooltip) { - tooltipEl.css({ - opacity: 0 - }); - return; - } - - // Set caret Position - tooltipEl.removeClass('above below'); - tooltipEl.addClass(tooltip.yAlign); - - // Set Text - tooltipEl.html(tooltip.text); - - // Find Y Location on page - var top; - if (tooltip.yAlign == 'above') { - top = tooltip.y - tooltip.caretHeight - tooltip.caretPadding; - } else { - top = tooltip.y + tooltip.caretHeight + tooltip.caretPadding; - } - - // Display, position, and set styles for font - tooltipEl.css({ - opacity: 1, - left: tooltip.chart.canvas.offsetLeft + tooltip.x + 'px', - top: tooltip.chart.canvas.offsetTop + top + 'px', - fontFamily: tooltip.fontFamily, - fontSize: tooltip.fontSize, - fontStyle: tooltip.fontStyle, - }); - }; - - var pieData = [{ - value: 300, - color: "#F7464A", - highlight: "#FF5A5E", - label: "Red" - }, { - value: 50, - color: "#46BFBD", - highlight: "#5AD3D1", - label: "Green" - }, { - value: 100, - color: "#FDB45C", - highlight: "#FFC870", - label: "Yellow" - }, { - value: 40, - color: "#949FB1", - highlight: "#A8B3C5", - label: "Grey" - }, { - value: 120, - color: "#4D5360", - highlight: "#616774", - label: "Dark Grey" - }]; - - window.onload = function() { - var ctx1 = document.getElementById("chart-area1").getContext("2d"); - window.myPie = new Chart(ctx1).Pie(pieData); - - var ctx2 = document.getElementById("chart-area2").getContext("2d"); - window.myPie = new Chart(ctx2).Pie(pieData); - }; - </script> -</body> - -</html> |
