Mirrors/Chart.js
1
0
Fork 0
mirror of https://github.com/chartjs/Chart.js.git synced 2024-10-06 20:29:12 +02:00
Code Issues Packages Projects Releases Wiki Activity
87e44fa360
Chart.js/samples/tooltips/custom-line.html

167 lines
4.2 KiB
HTML
Raw Normal View History

Reorganized sample files into sub directories. Added a helper containing colours that should be used by all samples. I added new samples to explain behaviour and modified all samples to have consistent styling. In updating the samples, I removed the use of jQuery and instead use standard methods. For the custom tooltip samples, I updated the styling to show color boxes like the regular tooltips.
2016-10-21 05:12:10 +02:00
<!doctype html>
<html>
<head>
<title>Line Chart with Custom Tooltips</title>
<script src="../../dist/Chart.bundle.js"></script>
Update chartColors.js to utils.js and move randomScalingFactor function there
2016-10-23 20:04:00 +02:00
<script src="../utils.js"></script>
Reorganized sample files into sub directories. Added a helper containing colours that should be used by all samples. I added new samples to explain behaviour and modified all samples to have consistent styling. In updating the samples, I removed the use of jQuery and instead use standard methods. For the custom tooltip samples, I updated the styling to show color boxes like the regular tooltips.
2016-10-21 05:12:10 +02:00
<style>
canvas{
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
#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);
}
.chartjs-tooltip-key {
display: inline-block;
width: 10px;
height: 10px;
margin-right: 10px;
}
</style>
</head>
<body>
<div id="canvas-holder1" style="width:75%;">
Setup HTML and JS linters for samples (#5195)
2018-02-03 13:28:54 +01:00
<canvas id="chart"></canvas>
Reorganized sample files into sub directories. Added a helper containing colours that should be used by all samples. I added new samples to explain behaviour and modified all samples to have consistent styling. In updating the samples, I removed the use of jQuery and instead use standard methods. For the custom tooltip samples, I updated the styling to show color boxes like the regular tooltips.
2016-10-21 05:12:10 +02:00
</div>
<script>
Chart.defaults.global.pointHitDetectionRadius = 1;
var customTooltips = function(tooltip) {
// Tooltip Element
var tooltipEl = document.getElementById('chartjs-tooltip');
if (!tooltipEl) {
tooltipEl = document.createElement('div');
tooltipEl.id = 'chartjs-tooltip';
Setup HTML and JS linters for samples (#5195)
2018-02-03 13:28:54 +01:00
tooltipEl.innerHTML = '<table></table>';
Update line-customTooltips.html (Re issue #4038 ) Add window scroll position to tooltip position calculation so they show up in the intended place instead of potentially off-screen! Moved tooltips inside the canvas parent container since they are being positioned in terms of its location
2017-03-22 11:35:50 +01:00
this._chart.canvas.parentNode.appendChild(tooltipEl);
Reorganized sample files into sub directories. Added a helper containing colours that should be used by all samples. I added new samples to explain behaviour and modified all samples to have consistent styling. In updating the samples, I removed the use of jQuery and instead use standard methods. For the custom tooltip samples, I updated the styling to show color boxes like the regular tooltips.
2016-10-21 05:12:10 +02:00
}
// Hide if no tooltip
if (tooltip.opacity === 0) {
tooltipEl.style.opacity = 0;
return;
}
// Set caret Position
tooltipEl.classList.remove('above', 'below', 'no-transform');
if (tooltip.yAlign) {
tooltipEl.classList.add(tooltip.yAlign);
} else {
tooltipEl.classList.add('no-transform');
}
function getBody(bodyItem) {
return bodyItem.lines;
}
// Set Text
if (tooltip.body) {
var titleLines = tooltip.title || [];
var bodyLines = tooltip.body.map(getBody);
var innerHtml = '<thead>';
titleLines.forEach(function(title) {
innerHtml += '<tr><th>' + title + '</th></tr>';
});
innerHtml += '</thead><tbody>';
bodyLines.forEach(function(body, i) {
var colors = tooltip.labelColors[i];
var style = 'background:' + colors.backgroundColor;
style += '; border-color:' + colors.borderColor;
Setup HTML and JS linters for samples (#5195)
2018-02-03 13:28:54 +01:00
style += '; border-width: 2px';
Reorganized sample files into sub directories. Added a helper containing colours that should be used by all samples. I added new samples to explain behaviour and modified all samples to have consistent styling. In updating the samples, I removed the use of jQuery and instead use standard methods. For the custom tooltip samples, I updated the styling to show color boxes like the regular tooltips.
2016-10-21 05:12:10 +02:00
var span = '<span class="chartjs-tooltip-key" style="' + style + '"></span>';
innerHtml += '<tr><td>' + span + body + '</td></tr>';
});
innerHtml += '</tbody>';
var tableRoot = tooltipEl.querySelector('table');
tableRoot.innerHTML = innerHtml;
}
Update line-customTooltips.html (Re issue #4038 ) Add window scroll position to tooltip position calculation so they show up in the intended place instead of potentially off-screen! Moved tooltips inside the canvas parent container since they are being positioned in terms of its location
2017-03-22 11:35:50 +01:00
var positionY = this._chart.canvas.offsetTop;
var positionX = this._chart.canvas.offsetLeft;
Reorganized sample files into sub directories. Added a helper containing colours that should be used by all samples. I added new samples to explain behaviour and modified all samples to have consistent styling. In updating the samples, I removed the use of jQuery and instead use standard methods. For the custom tooltip samples, I updated the styling to show color boxes like the regular tooltips.
2016-10-21 05:12:10 +02:00
// Display, position, and set styles for font
tooltipEl.style.opacity = 1;
Update line-customTooltips.html (Re issue #4038 ) Add window scroll position to tooltip position calculation so they show up in the intended place instead of potentially off-screen! Moved tooltips inside the canvas parent container since they are being positioned in terms of its location
2017-03-22 11:35:50 +01:00
tooltipEl.style.left = positionX + tooltip.caretX + 'px';
tooltipEl.style.top = positionY + tooltip.caretY + 'px';
Update custom tooltip documentation and samples (#5166)
2018-01-21 22:47:50 +01:00
tooltipEl.style.fontFamily = tooltip._bodyFontFamily;
tooltipEl.style.fontSize = tooltip.bodyFontSize + 'px';
tooltipEl.style.fontStyle = tooltip._bodyFontStyle;
Reorganized sample files into sub directories. Added a helper containing colours that should be used by all samples. I added new samples to explain behaviour and modified all samples to have consistent styling. In updating the samples, I removed the use of jQuery and instead use standard methods. For the custom tooltip samples, I updated the styling to show color boxes like the regular tooltips.
2016-10-21 05:12:10 +02:00
tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px';
};
Update chartColors.js to utils.js and move randomScalingFactor function there
2016-10-23 20:04:00 +02:00
Reorganized sample files into sub directories. Added a helper containing colours that should be used by all samples. I added new samples to explain behaviour and modified all samples to have consistent styling. In updating the samples, I removed the use of jQuery and instead use standard methods. For the custom tooltip samples, I updated the styling to show color boxes like the regular tooltips.
2016-10-21 05:12:10 +02:00
var lineChartData = {
Setup HTML and JS linters for samples (#5195)
2018-02-03 13:28:54 +01:00
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
Reorganized sample files into sub directories. Added a helper containing colours that should be used by all samples. I added new samples to explain behaviour and modified all samples to have consistent styling. In updating the samples, I removed the use of jQuery and instead use standard methods. For the custom tooltip samples, I updated the styling to show color boxes like the regular tooltips.
2016-10-21 05:12:10 +02:00
datasets: [{
Setup HTML and JS linters for samples (#5195)
2018-02-03 13:28:54 +01:00
label: 'My First dataset',
Reorganized sample files into sub directories. Added a helper containing colours that should be used by all samples. I added new samples to explain behaviour and modified all samples to have consistent styling. In updating the samples, I removed the use of jQuery and instead use standard methods. For the custom tooltip samples, I updated the styling to show color boxes like the regular tooltips.
2016-10-21 05:12:10 +02:00
borderColor: window.chartColors.red,
pointBackgroundColor: window.chartColors.red,
fill: false,
data: [
Setup HTML and JS linters for samples (#5195)
2018-02-03 13:28:54 +01:00
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
Reorganized sample files into sub directories. Added a helper containing colours that should be used by all samples. I added new samples to explain behaviour and modified all samples to have consistent styling. In updating the samples, I removed the use of jQuery and instead use standard methods. For the custom tooltip samples, I updated the styling to show color boxes like the regular tooltips.
2016-10-21 05:12:10 +02:00
randomScalingFactor()
]
}, {
Setup HTML and JS linters for samples (#5195)
2018-02-03 13:28:54 +01:00
label: 'My Second dataset',
Reorganized sample files into sub directories. Added a helper containing colours that should be used by all samples. I added new samples to explain behaviour and modified all samples to have consistent styling. In updating the samples, I removed the use of jQuery and instead use standard methods. For the custom tooltip samples, I updated the styling to show color boxes like the regular tooltips.
2016-10-21 05:12:10 +02:00
borderColor: window.chartColors.blue,
pointBackgroundColor: window.chartColors.blue,
fill: false,
data: [
Setup HTML and JS linters for samples (#5195)
2018-02-03 13:28:54 +01:00
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
Reorganized sample files into sub directories. Added a helper containing colours that should be used by all samples. I added new samples to explain behaviour and modified all samples to have consistent styling. In updating the samples, I removed the use of jQuery and instead use standard methods. For the custom tooltip samples, I updated the styling to show color boxes like the regular tooltips.
2016-10-21 05:12:10 +02:00
randomScalingFactor()
]
}]
};
window.onload = function() {
Setup HTML and JS linters for samples (#5195)
2018-02-03 13:28:54 +01:00
var chartEl = document.getElementById('chart');
Reorganized sample files into sub directories. Added a helper containing colours that should be used by all samples. I added new samples to explain behaviour and modified all samples to have consistent styling. In updating the samples, I removed the use of jQuery and instead use standard methods. For the custom tooltip samples, I updated the styling to show color boxes like the regular tooltips.
2016-10-21 05:12:10 +02:00
window.myLine = new Chart(chartEl, {
type: 'line',
data: lineChartData,
options: {
Setup HTML and JS linters for samples (#5195)
2018-02-03 13:28:54 +01:00
title: {
display: true,
text: 'Chart.js Line Chart - Custom Tooltips'
Reorganized sample files into sub directories. Added a helper containing colours that should be used by all samples. I added new samples to explain behaviour and modified all samples to have consistent styling. In updating the samples, I removed the use of jQuery and instead use standard methods. For the custom tooltip samples, I updated the styling to show color boxes like the regular tooltips.
2016-10-21 05:12:10 +02:00
},
tooltips: {
enabled: false,
mode: 'index',
position: 'nearest',
custom: customTooltips
}
}
});
};
</script>
</body>
</html>
Reference in New Issue Copy Permalink