chartjs-plugin-funnel
Version:
The funnel plugin for Chart.js
73 lines (69 loc) • 2.09 kB
HTML
<html>
<head>
<title>Funnel Chart</title>
<script src="../dist/chart.funnel.bundled.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;
}
</style>
</head>
<body>
<div id="canvas-keep-left" style="width:400px;">
<canvas id="chart-area-keep-left" height="250"></canvas>
</div>
<div id="canvas-keep-right" style="width:400px;">
<canvas id="chart-area-keep-right" height="250"></canvas>
</div>
<script>
var config = {
type: 'funnel',
data: {
datasets: [{
data: [10, 20, 90],
backgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
],
hoverBackgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
]
}],
labels: [
"Red",
"Blue",
"Yellow"
]
},
options: {
responsive: true,
//keep: 'left',
legend: {
position: 'top'
},
title: {
display: true,
text: 'Chart.js Funnel Chart'
},
animation: {
animateScale: true,
animateRotate: true
}
}
};
window.onload = function() {
var ctxLeft = document.getElementById("chart-area-keep-left").getContext("2d");
window.myDoughnut = new Chart(ctxLeft, $.extend(true, config, {options: {keep: 'left'}}));
var ctxRight = document.getElementById("chart-area-keep-right").getContext("2d");
window.myDoughnut = new Chart(ctxRight, $.extend(true, config, {options: {keep: 'right'}}));
};
</script>
</body>
</html>