first commit
This commit is contained in:
aschwarz
125
chart/samples/tooltips/dataPoints-customTooltips.html
Executable file
125
chart/samples/tooltips/dataPoints-customTooltips.html
Executable file
@ -0,0 +1,125 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Custom Tooltips using Data Points</title>
|
||||
<script src="../../Chart.bundle.js"></script>
|
||||
<script src="../utils.js"></script>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
|
||||
<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);
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.chartjs-tooltip-key {
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="canvas-holder1" style="width:75%;">
|
||||
<canvas id="chart1"></canvas>
|
||||
</div>
|
||||
<div class="chartjs-tooltip" id="tooltip-0"></div>
|
||||
<div class="chartjs-tooltip" id="tooltip-1"></div>
|
||||
<script>
|
||||
var customTooltips = function (tooltip) {
|
||||
$(this._chart.canvas).css("cursor", "pointer");
|
||||
|
||||
$(".chartjs-tooltip").css({
|
||||
opacity: 0,
|
||||
});
|
||||
|
||||
if (!tooltip || !tooltip.opacity) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (tooltip.dataPoints.length > 0) {
|
||||
tooltip.dataPoints.forEach(function (dataPoint) {
|
||||
var content = [dataPoint.xLabel, dataPoint.yLabel].join(": ");
|
||||
var $tooltip = $("#tooltip-" + dataPoint.datasetIndex);
|
||||
|
||||
$tooltip.html(content);
|
||||
$tooltip.css({
|
||||
opacity: 1,
|
||||
top: dataPoint.y + "px",
|
||||
left: dataPoint.x + "px",
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
var color = Chart.helpers.color;
|
||||
var lineChartData = {
|
||||
labels: ["January", "February", "March", "April", "May", "June", "July"],
|
||||
datasets: [{
|
||||
label: "My First dataset",
|
||||
backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(),
|
||||
borderColor: window.chartColors.red,
|
||||
pointBackgroundColor: window.chartColors.red,
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
]
|
||||
}, {
|
||||
label: "My Second dataset",
|
||||
backgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(),
|
||||
borderColor: window.chartColors.blue,
|
||||
pointBackgroundColor: window.chartColors.blue,
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
]
|
||||
}]
|
||||
};
|
||||
|
||||
window.onload = function() {
|
||||
var chartEl = document.getElementById("chart1");
|
||||
var chart = new Chart(chartEl, {
|
||||
type: "line",
|
||||
data: lineChartData,
|
||||
options: {
|
||||
title:{
|
||||
display: true,
|
||||
text: "Chart.js - Custom Tooltips using Data Points"
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
mode: 'index',
|
||||
intersect: false,
|
||||
custom: customTooltips
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
125
chart/samples/tooltips/interaction-modes.html
Executable file
125
chart/samples/tooltips/interaction-modes.html
Executable file
@ -0,0 +1,125 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Tooltip Interaction Modes</title>
|
||||
<script src="../../Chart.bundle.js"></script>
|
||||
<script src="../utils.js"></script>
|
||||
<style>
|
||||
canvas {
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
.chart-container {
|
||||
width: 500px;
|
||||
margin-left: 40px;
|
||||
margin-right: 40px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
</div>
|
||||
<script>
|
||||
function createConfig(mode, intersect) {
|
||||
return {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ["January", "February", "March", "April", "May", "June", "July"],
|
||||
datasets: [{
|
||||
label: "My First dataset",
|
||||
borderColor: window.chartColors.red,
|
||||
backgroundColor: window.chartColors.red,
|
||||
data: [10, 30, 46, 2, 8, 50, 0],
|
||||
fill: false,
|
||||
}, {
|
||||
label: "My Second dataset",
|
||||
borderColor: window.chartColors.blue,
|
||||
backgroundColor: window.chartColors.blue,
|
||||
data: [7, 49, 46, 13, 25, 30, 22],
|
||||
fill: false,
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
title:{
|
||||
display: true,
|
||||
text: 'Mode: ' + mode + ', intersect = ' + intersect
|
||||
},
|
||||
tooltips: {
|
||||
mode: mode,
|
||||
intersect: intersect,
|
||||
},
|
||||
hover: {
|
||||
mode: mode,
|
||||
intersect: intersect
|
||||
},
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
window.onload = function() {
|
||||
var container = document.querySelector('.container');
|
||||
|
||||
[{
|
||||
mode: 'index',
|
||||
intersect: true,
|
||||
}, {
|
||||
mode: 'index',
|
||||
intersect: false,
|
||||
}, {
|
||||
mode: 'dataset',
|
||||
intersect: true,
|
||||
}, {
|
||||
mode: 'dataset',
|
||||
intersect: false,
|
||||
}, {
|
||||
mode: 'point',
|
||||
intersect: true,
|
||||
}, {
|
||||
mode: 'point',
|
||||
intersect: false,
|
||||
}, {
|
||||
mode: 'nearest',
|
||||
intersect: true,
|
||||
}, {
|
||||
mode: 'nearest',
|
||||
intersect: false,
|
||||
}, {
|
||||
mode: 'x',
|
||||
intersect: true
|
||||
}, {
|
||||
mode: 'x',
|
||||
intersect: false
|
||||
}, {
|
||||
mode: 'y',
|
||||
intersect: true
|
||||
}, {
|
||||
mode: 'y',
|
||||
intersect: false
|
||||
}].forEach(function(details) {
|
||||
var div = document.createElement('div');
|
||||
div.classList.add('chart-container');
|
||||
|
||||
var canvas = document.createElement('canvas');
|
||||
div.appendChild(canvas);
|
||||
container.appendChild(div);
|
||||
|
||||
var ctx = canvas.getContext('2d');
|
||||
var config = createConfig(details.mode, details.intersect);
|
||||
new Chart(ctx, config);
|
||||
})
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
165
chart/samples/tooltips/line-customTooltips.html
Executable file
165
chart/samples/tooltips/line-customTooltips.html
Executable file
@ -0,0 +1,165 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Line Chart with Custom Tooltips</title>
|
||||
<script src="../../Chart.bundle.js"></script>
|
||||
<script src="../utils.js"></script>
|
||||
<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%;">
|
||||
<canvas id="chart"/>
|
||||
</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';
|
||||
tooltipEl.innerHTML = "<table></table>"
|
||||
document.body.appendChild(tooltipEl);
|
||||
}
|
||||
|
||||
// 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;
|
||||
style += '; border-width: 2px';
|
||||
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;
|
||||
}
|
||||
|
||||
var position = this._chart.canvas.getBoundingClientRect();
|
||||
|
||||
// Display, position, and set styles for font
|
||||
tooltipEl.style.opacity = 1;
|
||||
tooltipEl.style.left = position.left + tooltip.caretX + 'px';
|
||||
tooltipEl.style.top = position.top + tooltip.caretY + 'px';
|
||||
tooltipEl.style.fontFamily = tooltip._fontFamily;
|
||||
tooltipEl.style.fontSize = tooltip.fontSize;
|
||||
tooltipEl.style.fontStyle = tooltip._fontStyle;
|
||||
tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px';
|
||||
};
|
||||
|
||||
var lineChartData = {
|
||||
labels: ["January", "February", "March", "April", "May", "June", "July"],
|
||||
datasets: [{
|
||||
label: "My First dataset",
|
||||
borderColor: window.chartColors.red,
|
||||
pointBackgroundColor: window.chartColors.red,
|
||||
fill: false,
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
]
|
||||
}, {
|
||||
label: "My Second dataset",
|
||||
borderColor: window.chartColors.blue,
|
||||
pointBackgroundColor: window.chartColors.blue,
|
||||
fill: false,
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
]
|
||||
}]
|
||||
};
|
||||
|
||||
window.onload = function() {
|
||||
var chartEl = document.getElementById("chart");
|
||||
window.myLine = new Chart(chartEl, {
|
||||
type: 'line',
|
||||
data: lineChartData,
|
||||
options: {
|
||||
title:{
|
||||
display:true,
|
||||
text:'Chart.js Line Chart - Custom Tooltips'
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
mode: 'index',
|
||||
position: 'nearest',
|
||||
custom: customTooltips
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
146
chart/samples/tooltips/pie-customTooltips.html
Executable file
146
chart/samples/tooltips/pie-customTooltips.html
Executable file
@ -0,0 +1,146 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Pie Chart with Custom Tooltips</title>
|
||||
<script src="../../Chart.bundle.js"></script>
|
||||
<script src="../utils.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;
|
||||
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-holder" style="width: 300px;">
|
||||
<canvas id="chart-area" width="300" height="300" />
|
||||
</div>
|
||||
|
||||
<div id="chartjs-tooltip">
|
||||
<table></table>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
Chart.defaults.global.tooltips.custom = function(tooltip) {
|
||||
// Tooltip Element
|
||||
var tooltipEl = document.getElementById('chartjs-tooltip');
|
||||
|
||||
// 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;
|
||||
style += '; border-width: 2px';
|
||||
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;
|
||||
}
|
||||
|
||||
var position = this._chart.canvas.getBoundingClientRect();
|
||||
|
||||
// Display, position, and set styles for font
|
||||
tooltipEl.style.opacity = 1;
|
||||
tooltipEl.style.left = position.left + tooltip.caretX + 'px';
|
||||
tooltipEl.style.top = position.top + tooltip.caretY + 'px';
|
||||
tooltipEl.style.fontFamily = tooltip._fontFamily;
|
||||
tooltipEl.style.fontSize = tooltip.fontSize;
|
||||
tooltipEl.style.fontStyle = tooltip._fontStyle;
|
||||
tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px';
|
||||
};
|
||||
|
||||
var config = {
|
||||
type: 'pie',
|
||||
data: {
|
||||
datasets: [{
|
||||
data: [300, 50, 100, 40, 10],
|
||||
backgroundColor: [
|
||||
window.chartColors.red,
|
||||
window.chartColors.orange,
|
||||
window.chartColors.yellow,
|
||||
window.chartColors.green,
|
||||
window.chartColors.blue,
|
||||
],
|
||||
}],
|
||||
labels: [
|
||||
"Red",
|
||||
"Orange",
|
||||
"Yellow",
|
||||
"Green",
|
||||
"Blue"
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
window.onload = function() {
|
||||
var ctx = document.getElementById("chart-area").getContext("2d");
|
||||
window.myPie = new Chart(ctx, config);
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
86
chart/samples/tooltips/position-modes.html
Executable file
86
chart/samples/tooltips/position-modes.html
Executable file
@ -0,0 +1,86 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Tooltip Interaction Modes</title>
|
||||
<script src="../../Chart.bundle.js"></script>
|
||||
<script src="../utils.js"></script>
|
||||
<style>
|
||||
canvas {
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
.chart-container {
|
||||
width: 500px;
|
||||
margin-left: 40px;
|
||||
margin-right: 40px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
</div>
|
||||
<script>
|
||||
function createConfig(position) {
|
||||
return {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ["January", "February", "March", "April", "May", "June", "July"],
|
||||
datasets: [{
|
||||
label: "My First dataset",
|
||||
borderColor: window.chartColors.red,
|
||||
backgroundColor: window.chartColors.red,
|
||||
data: [10, 30, 46, 2, 8, 50, 0],
|
||||
fill: false,
|
||||
}, {
|
||||
label: "My Second dataset",
|
||||
borderColor: window.chartColors.blue,
|
||||
backgroundColor: window.chartColors.blue,
|
||||
data: [7, 49, 46, 13, 25, 30, 22],
|
||||
fill: false,
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
title:{
|
||||
display: true,
|
||||
text: 'Tooltip Position: ' + position
|
||||
},
|
||||
tooltips: {
|
||||
position: position,
|
||||
mode: 'index',
|
||||
intersect: false,
|
||||
},
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
window.onload = function() {
|
||||
var container = document.querySelector('.container');
|
||||
|
||||
['average', 'nearest'].forEach(function(position) {
|
||||
var div = document.createElement('div');
|
||||
div.classList.add('chart-container');
|
||||
|
||||
var canvas = document.createElement('canvas');
|
||||
div.appendChild(canvas);
|
||||
container.appendChild(div);
|
||||
|
||||
var ctx = canvas.getContext('2d');
|
||||
var config = createConfig(position);
|
||||
new Chart(ctx, config);
|
||||
})
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
107
chart/samples/tooltips/tooltip-callbacks.html
Executable file
107
chart/samples/tooltips/tooltip-callbacks.html
Executable file
@ -0,0 +1,107 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Tooltip Hooks</title>
|
||||
<script src="../../Chart.bundle.js"></script>
|
||||
<script src="../utils.js"></script>
|
||||
<style>
|
||||
canvas {
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div style="width:75%;">
|
||||
<canvas id="canvas"></canvas>
|
||||
</div>
|
||||
<script>
|
||||
var config = {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ["January", "February", "March", "April", "May", "June", "July"],
|
||||
datasets: [{
|
||||
label: "My First dataset",
|
||||
borderColor: window.chartColors.red,
|
||||
backgroundColor: window.chartColors.red,
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
],
|
||||
fill: false,
|
||||
}, {
|
||||
label: "My Second dataset",
|
||||
borderColor: window.chartColors.blue,
|
||||
backgroundColor: window.chartColors.blue,
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
],
|
||||
fill: false,
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
title:{
|
||||
display: true,
|
||||
text: "Chart.js Line Chart - Custom Information in Tooltip"
|
||||
},
|
||||
tooltips: {
|
||||
mode: 'index',
|
||||
callbacks: {
|
||||
// Use the footer callback to display the sum of the items showing in the tooltip
|
||||
footer: function(tooltipItems, data) {
|
||||
var sum = 0;
|
||||
|
||||
tooltipItems.forEach(function(tooltipItem) {
|
||||
sum += data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
|
||||
});
|
||||
return 'Sum: ' + sum;
|
||||
},
|
||||
},
|
||||
footerFontStyle: 'normal'
|
||||
},
|
||||
hover: {
|
||||
mode: 'index',
|
||||
intersect: true
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: true,
|
||||
scaleLabel: {
|
||||
show: true,
|
||||
labelString: 'Month'
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
display: true,
|
||||
scaleLabel: {
|
||||
show: true,
|
||||
labelString: 'Value'
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
window.onload = function() {
|
||||
var ctx = document.getElementById("canvas").getContext("2d");
|
||||
window.myLine = new Chart(ctx, config);
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user