--- /dev/null
+<!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>
projects / soho-sigint.git / blobdiff