<html>
<head>
- <title>Line 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>
+ <title>Line 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-holder1 {
- width: 300px;
- margin: 20px auto;
+ width: 300px;
+ margin: 20px auto;
}
-
+
#canvas-holder2 {
- width: 50%;
- margin: 20px 25%;
+ width: 50%;
+ margin: 20px 25%;
}
-
+
#chartjs-tooltip {
- opacity: 1;
- position: absolute;
- background: rgba(0, 0, 0, .7);
- color: white;
- border-radius: 3px;
- -webkit-transition: all .1s ease;
- transition: all .1s ease;
- pointer-events: none;
- -webkit-transform: translate(-50%, 0);
- transform: translate(-50%, 0);
+ opacity: 1;
+ position: absolute;
+ background: rgba(0, 0, 0, .7);
+ color: white;
+ 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-key {
- display: inline-block;
- width: 10px;
- height: 10px;
+ display: inline-block;
+ width: 10px;
+ height: 10px;
}
- </style>
+ </style>
</head>
<body>
-
<div id="canvas-holder1">
- <canvas id="chart1" width="300" height="30" />
- </div>
- <script>
+ <div id="canvas-holder1">
+ <canvas id="chart1" width="300" height="30" />
+ </div>
+ <script>
Chart.defaults.global.pointHitDetectionRadius = 1;
var customTooltips = function(tooltip) {
- console.log(tooltip._view);
+ console.log(tooltip.opacity);
- // Tooltip Element
- var tooltipEl = $('#chartjs-tooltip');
+ // Tooltip Element
+ var tooltipEl = $('#chartjs-tooltip');
- if (!tooltipEl[0]) {
-
$('body').append('<div id="chartjs-tooltip"></div>');
- tooltipEl = $('#chartjs-tooltip');
- }
+ if (!tooltipEl[0]) {
+ $('body').append('<div id="chartjs-tooltip"></div>');
+ tooltipEl = $('#chartjs-tooltip');
+ }
- // Hide if no tooltip
- if (!tooltip._view.opacity) {
- tooltipEl.css({
- opacity: 0
- });
- $('.chartjs-wrap canvas')
- .each(function(index, el) {
- $(el).css('cursor', 'default');
- });
- return;
- }
+ // Hide if no tooltip
+ if (!tooltip.opacity) {
+ tooltipEl.css({
+ opacity: 0
+ });
+ $('.chartjs-wrap canvas')
+ .each(function(index, el) {
+ $(el).css('cursor', 'default');
+ });
+ return;
+ }
- $(tooltip._chart.canvas).css('cursor', 'pointer');
+ $(this._chart.canvas).css('cursor', 'pointer');
- // Set caret Position
- tooltipEl.removeClass('above below no-transform');
- if (tooltip._view.yAlign) {
- tooltipEl.addClass(tooltip._view.yAlign);
- } else {
- tooltipEl.addClass('no-transform');
- }
+ // Set caret Position
+ tooltipEl.removeClass('above below no-transform');
+ if (tooltip.yAlign) {
+ tooltipEl.addClass(tooltip.yAlign);
+ } else {
+ tooltipEl.addClass('no-transform');
+ }
- // Set Text
- if (tooltip._view.text) {
- tooltipEl.html(tooltip._view.text);
- } else if (tooltip._view.labels) {
- var innerHtml = '<div class="title">' + tooltip._view.title + '</div>';
- for (var i = 0; i < tooltip._view.labels.length; i++) {
- innerHtml += [
- '<div class="section">',
- ' <span class="key" style="background-color:' + tooltip._view.legendColors[i].fill + '"></span>',
- ' <span class="value">' + tooltip._view.labels[i] + '</span>',
- '</div>'
- ].join('');
- }
- tooltipEl.html(innerHtml);
- }
+ // Set Text
+ if (tooltip.body) {
+ var innerHtml = [
+ (tooltip.beforeTitle || []).join('\n'), (tooltip.title || []).join('\n'), (tooltip.afterTitle || []).join('\n'), (tooltip.beforeBody || []).join('\n'), (tooltip.body || []).join('\n'), (tooltip.afterBody || []).join('\n'), (tooltip.beforeFooter || [])
+ .join('\n'), (tooltip.footer || []).join('\n'), (tooltip.afterFooter || []).join('\n')
+ ];
+ tooltipEl.html(innerHtml.join('\n'));
+ }
- // Find Y Location on page
- var top = 0;
- if (tooltip._view.yAlign) {
- if (tooltip._view.yAlign == 'above') {
- top = tooltip._view.y - tooltip._view.caretHeight - tooltip._view.caretPadding;
- } else {
- top = tooltip._view.y + tooltip._view.caretHeight + tooltip._view.caretPadding;
- }
+ // Find Y Location on page
+ var top = 0;
+ if (tooltip.yAlign) {
+ if (tooltip.yAlign == 'above') {
+ top = tooltip.y - tooltip.caretHeight - tooltip.caretPadding;
+ } else {
+ top = tooltip.y + tooltip.caretHeight + tooltip.caretPadding;
}
+ }
- var offset = $(tooltip._chart.canvas).offset();
+ var offset = $(this._chart.canvas).offset();
- // Display, position, and set styles for font
- tooltipEl.css({
- opacity: 1,
- width: tooltip._view.width ? (tooltip._view.width + 'px') : 'auto',
- left: offset.left + tooltip._view.x + 'px',
- top: offset.top + top + 'px',
- fontFamily: tooltip._view._fontFamily,
- fontSize: tooltip._view.fontSize,
- fontStyle: tooltip._view._fontStyle,
- padding: tooltip._view.yPadding + 'px ' + tooltip._view.xPadding + 'px',
- });
+ // Display, position, and set styles for font
+ tooltipEl.css({
+ opacity: 1,
+ width: tooltip.width ? (tooltip.width + 'px') : 'auto',
+ left: offset.left + tooltip.x + 'px',
+ top: offset.top + top + 'px',
+ fontFamily: tooltip._fontFamily,
+ fontSize: tooltip.fontSize,
+ fontStyle: tooltip._fontStyle,
+ padding: tooltip.yPadding + 'px ' + tooltip.xPadding + 'px',
+ });
};
var randomScalingFactor = function() {
- return Math.round(Math.random() * 100);
+ return Math.round(Math.random() * 100);
};
var lineChartData = {
- labels: ["January", "February", "March", "April", "May", "June", "July"],
- datasets: [{
- label: "My First dataset",
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
- }, {
- label: "My Second dataset",
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
- }]
+ labels: ["January", "February", "March", "April", "May", "June", "July"],
+ datasets: [{
+ label: "My First dataset",
+ data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
+ }, {
+ label: "My Second dataset",
+ data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
+ }]
};
window.onload = function() {
- var chartEl = document.getElementById("chart1");
- window.myLine = new Chart(chartEl, {
- type: 'line',
- data: lineChartData,
- options: {
- tooltips: {
- enabled: false,
- custom: customTooltips
- }
- }
- });
+ var chartEl = document.getElementById("chart1");
+ window.myLine = new Chart(chartEl, {
+ type: 'line',
+ data: lineChartData,
+ options: {
+ tooltips: {
+ enabled: false,
+ custom: customTooltips
+ }
+ }
+ });
};
- </script>
+ </script>
</body>
</html>
projects / thirdparty / Chart.js.git / commitdiff
