Javascript examples for Chart.js:Doughnut Chart
Implement concentric doughnut charts using Chart.js
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <script type="text/javascript" src="https://rawgit.com/nnnick/Chart.js/2.0.0-alpha3/Chart.js"></script> <script type="text/javascript"> window.onload=function(){//from ww w . j a v a2s.com var randomScalingFactor = function() { return Math.round(Math.random() * 100); }; var randomColorFactor = function() { return Math.round(Math.random() * 255); }; var config = { type: 'doughnut', data: { datasets: [{ data: [ randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), ], backgroundColor: [ "#F7464A", "#46BFBD", "#FDB45C", "#949FB1", "#4D5360", ], }, { data: [ randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), ], backgroundColor: [ "#F7464A", "#46BFBD", "#FDB45C", "#949FB1", "#4D5360", ], }, { data: [ randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), ], backgroundColor: [ "#F7464A", "#46BFBD", "#FDB45C", "#949FB1", "#4D5360", ], }], labels: [ "Red", "Green", "Yellow", "Grey", "Dark Grey" ] }, options: { responsive: true } }; var ctx = document.getElementById("chart-area").getContext("2d"); var myDoughnut = new Chart(ctx, config); } </script> </head> <body> <div id="canvas-holder" style="width:100%"> <canvas id="chart-area" width="500" height="500"></canvas> </div> </body> </html>