<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/rozklad/pen/wPvRgW" />
<style class="cp-pen-styles">body {
background-color: #f3f5f7;
font-family: 'Helvetica Neue', Arial, sans-serif;
}
.card {
background-color: #fff;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 300px;
height: 375px;
border-radius: 10px;
overflow: hidden;
}
.card .about {
height: 150px;
padding: 20px;
box-sizing: border-box;
}
.card .about h3,
.card .about .lead {
font-weight: 300;
margin: 0;
}
.card .about h3 {
font-size: 24px;
}
.card .about .lead {
color: #aaa;
}
#tooltip-canvas {
position: absolute;
top: 200px;
left: 75px;
}
.btn-reload {
position: absolute;
top: 280px;
left: 50%;
width: 30px;
margin-left: -15px;
-webkit-appearance: none;
appearance: none;
border: 0;
background: transparent;
outline: none;
cursor: pointer;
opacity: 0.6;
transition: opacity 0.3s;
}
.btn-reload:hover {
opacity: 1;
}
</style></head><body>
<div class="card">
<!-- Custom information -->
<div class="about">
<h3>Chart.js</h3>
<p class="lead">Smooth doughnut</p>
</div>
<!-- Canvas for Chart.js -->
<canvas id="canvas" height="200"></canvas>
<!-- Custom tooltip canvas -->
<canvas id="tooltip-canvas" width="150" height="100"></canvas>
<!-- Reload button -->
<button type="button" id="reload" class="btn-reload">
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 71.4 61.2"><style>.st0{fill:#AAAAAA;}</style><title>59 all</title><path class="st0" d="M57.6 0h8.7c2.8 0 5 2.2 5 5v51.1c0 2.8-2.2 5-5 5h-8.7c-2.8 0-5-2.2-5-5V5c0-2.7 2.2-5 5-5zM5 24.9h8.7c2.8 0 5 2.2 5 5v26.2c0 2.8-2.2 5-5 5H5c-2.8 0-5-2.2-5-5V29.9c0-2.8 2.2-5 5-5zM31.4 17.8h8.7c2.8 0 5 2.2 5 5v33.4c0 2.8-2.2 5-5 5h-8.7c-2.8 0-5-2.2-5-5V22.8c0-2.8 2.3-5 5-5z"/></svg>
</button>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.js'></script>
<script >var canvas = document.getElementById("canvas");
var tooltipCanvas = document.getElementById("tooltip-canvas");
var gradientBlue = canvas.getContext('2d').createLinearGradient(0, 0, 0, 150);
gradientBlue.addColorStop(0, '#5555FF');
gradientBlue.addColorStop(1, '#9787FF');
var gradientRed = canvas.getContext('2d').createLinearGradient(0, 0, 0, 150);
gradientRed.addColorStop(0, '#FF55B8');
gradientRed.addColorStop(1, '#FF8787');
var gradientGrey = canvas.getContext('2d').createLinearGradient(0, 0, 0, 150);
gradientGrey.addColorStop(0, '#888888');
gradientGrey.addColorStop(1, '#AAAAAA');
window.arcSpacing = 0.15;
window.segmentHovered = false;
function textInCenter(value, label) {
var ctx = tooltipCanvas.getContext('2d');
ctx.clearRect(0, 0, tooltipCanvas.width, tooltipCanvas.height)
ctx.restore();
// Draw value
ctx.fillStyle = '#333333';
ctx.font = '24px sans-serif';
ctx.textBaseline = 'middle';
// Define text position
var textPosition = {
x: Math.round((tooltipCanvas.width - ctx.measureText(value).width) / 2),
y: tooltipCanvas.height / 2,
};
ctx.fillText(value, textPosition.x, textPosition.y);
// Draw label
ctx.fillStyle = '#AAAAAA';
ctx.font = '8px sans-serif';
// Define text position
var labelTextPosition = {
x: Math.round((tooltipCanvas.width - ctx.measureText(label).width) / 2),
y: tooltipCanvas.height / 2,
};
ctx.fillText(label, labelTextPosition.x, labelTextPosition.y - 20);
ctx.save();
}
Chart.elements.Arc.prototype.draw = function() {
var ctx = this._chart.ctx;
var vm = this._view;
var sA = vm.startAngle;
var eA = vm.endAngle;
ctx.beginPath();
ctx.arc(vm.x, vm.y, vm.outerRadius, sA + window.arcSpacing, eA - window.arcSpacing);
ctx.strokeStyle = vm.backgroundColor;
ctx.lineWidth = vm.borderWidth;
ctx.lineCap = 'round';
ctx.stroke();
ctx.closePath();
};
var config = {
type: 'doughnut',
data: {
labels: ['Pink', 'Grey', 'Blue'],
datasets: [
{
data: [400, 540, 290],
backgroundColor: [
gradientRed,
gradientGrey,
gradientBlue,
],
}
]
},
options: {
cutoutPercentage: 80,
elements: {
arc: {
borderWidth: 12,
},
},
legend: {
display: false,
},
animation: {
onComplete: function(animation) {
if (!window.segmentHovered) {
var value = this.config.data.datasets[0].data.reduce(function(a, b) {
return a + b;
}, 0);
var label = 'T O T A L';
textInCenter(value, label);
}
},
},
tooltips: {
enabled: false,
custom: function(tooltip) {
if (tooltip.body) {
var line = tooltip.body[0].lines[0],
parts = line.split(': ');
textInCenter(parts[1], parts[0].split('').join(' ').toUpperCase());
window.segmentHovered = true;
} else {
window.segmentHovered = false;
}
},
},
},
};
window.chart = new Chart(canvas, config);
function addData(chart, label, data) {
chart.data.labels.push(label);
chart.data.datasets.forEach((dataset) => {
dataset.data.push(data);
});
chart.update();
}
document.getElementById('reload').addEventListener('click', function() {
addData(window.chart, 'TEST', 300);
});
//# sourceURL=pen.js
</script>
</body></html>
