<!doctype html> <html> <head> <title>Doughnut Chart</title> <script src="js/Chart.min.js"></script> <script src="js/utils.js"></script> <style> canvas { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } </style> </head> <body> <div id="canvas-holder" style="width:30%"> <canvas id="chart-area"></canvas> </div> <button id="changeCircleSize">Semi/Full Circle</button> <script> var randomScalingFactor = function() { return Math.round(Math.random() * 100); }; var config = { type: 'doughnut', data: { datasets: [{ data: [ randomScalingFactor(), randomScalingFactor(), ], backgroundColor: [ window.chartColors.blue, window.chartColors.white, ], label: 'Dataset 1' }], labels: [ 'humidity', ] }, options: { responsive: true, legend: { position: 'top', }, title: { display: true, text: 'humidity in % ' }, animation: { animateScale: true, animateRotate: true } } }; window.onload = function() { var ctx = document.getElementById('chart-area').getContext('2d'); window.myDoughnut = new Chart(ctx, config); }; /* document.getElementById('randomizeData').addEventListener('click', function() { config.data.datasets.forEach(function(dataset) { dataset.data = dataset.data.map(function() { return randomScalingFactor(); }); }); window.myDoughnut.update(); }); var colorNames = Object.keys(window.chartColors); document.getElementById('addDataset').addEventListener('click', function() { var newDataset = { backgroundColor: [], data: [], label: 'New dataset ' + config.data.datasets.length, }; for (var index = 0; index < config.data.labels.length; ++index) { newDataset.data.push(randomScalingFactor()); var colorName = colorNames[index % colorNames.length]; var newColor = window.chartColors[colorName]; newDataset.backgroundColor.push(newColor); } config.data.datasets.push(newDataset); window.myDoughnut.update(); }); document.getElementById('addData').addEventListener('click', function() { if (config.data.datasets.length > 0) { config.data.labels.push('data #' + config.data.labels.length); var colorName = colorNames[config.data.datasets[0].data.length % colorNames.length]; var newColor = window.chartColors[colorName]; config.data.datasets.forEach(function(dataset) { dataset.data.push(randomScalingFactor()); dataset.backgroundColor.push(newColor); }); window.myDoughnut.update(); } }); document.getElementById('removeDataset').addEventListener('click', function() { config.data.datasets.splice(0, 1); window.myDoughnut.update(); }); document.getElementById('removeData').addEventListener('click', function() { config.data.labels.splice(-1, 1); // remove the label first config.data.datasets.forEach(function(dataset) { dataset.data.pop(); dataset.backgroundColor.pop(); }); window.myDoughnut.update(); }); */ document.getElementById('changeCircleSize').addEventListener('click', function() { if (window.myDoughnut.options.circumference === Math.PI) { window.myDoughnut.options.circumference = 2 * Math.PI; window.myDoughnut.options.rotation = -Math.PI; } else { window.myDoughnut.options.circumference = Math.PI; window.myDoughnut.options.rotation = -Math.PI / 2; } window.myDoughnut.update(); }); </script> </body> </html>