|
- <!doctype html>
- <html>
-
- <head>
- <title>Doughnut Chart</title>
- <script src="../dist/Chart.bundle.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-holder" style="width:75%">
- <canvas id="chart-area" />
- </div>
- <button id="randomizeData">Randomize Data</button>
- <button id="addDataset">Add Dataset</button>
- <button id="removeDataset">Remove Dataset</button>
- <button id="addData">Add Data</button>
- <button id="removeData">Remove Data</button>
- <script>
- var randomScalingFactor = function() {
- return Math.round(Math.random() * 100);
- };
- var randomColorFactor = function() {
- return Math.round(Math.random() * 255);
- };
- var randomColor = function(opacity) {
- return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')';
- };
-
- var config = {
- type: 'doughnut',
- data: {
- datasets: [{
- data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- ],
- backgroundColor: [
- "#F7464A",
- "#46BFBD",
- "#FDB45C",
- "#949FB1",
- "#4D5360",
- ],
- label: 'Dataset 1'
- }, {
- hidden: true,
- data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- ],
- backgroundColor: [
- "#F7464A",
- "#46BFBD",
- "#FDB45C",
- "#949FB1",
- "#4D5360",
- ],
- label: 'Dataset 2'
- }, {
- data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- ],
- backgroundColor: [
- "#F7464A",
- "#46BFBD",
- "#FDB45C",
- "#949FB1",
- "#4D5360",
- ],
- label: 'Dataset 3'
- }],
- labels: [
- "Red",
- "Green",
- "Yellow",
- "Grey",
- "Dark Grey"
- ]
- },
- options: {
- responsive: true,
- legend: {
- position: 'top',
- },
- title: {
- display: true,
- text: 'Chart.js Doughnut Chart'
- },
- animation: {
- animateScale: true,
- animateRotate: true
- }
- }
- };
-
- window.onload = function() {
- var ctx = document.getElementById("chart-area").getContext("2d");
- window.myDoughnut = new Chart(ctx, config);
- };
-
- $('#randomizeData').click(function() {
- $.each(config.data.datasets, function(i, dataset) {
- dataset.data = dataset.data.map(function() {
- return randomScalingFactor();
- });
-
- dataset.backgroundColor = dataset.backgroundColor.map(function() {
- return randomColor(0.7);
- });
- });
-
- window.myDoughnut.update();
- });
-
- $('#addDataset').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());
- newDataset.backgroundColor.push(randomColor(0.7));
- }
-
- config.data.datasets.push(newDataset);
- window.myDoughnut.update();
- });
-
- $('#addData').click(function() {
- if (config.data.datasets.length > 0) {
- config.data.labels.push('data #' + config.data.labels.length);
-
- $.each(config.data.datasets, function(index, dataset) {
- dataset.data.push(randomScalingFactor());
- dataset.backgroundColor.push(randomColor(0.7));
- });
-
- window.myDoughnut.update();
- }
- });
-
- $('#removeDataset').click(function() {
- config.data.datasets.splice(0, 1);
- window.myDoughnut.update();
- });
-
- $('#removeData').click(function() {
- config.data.labels.splice(-1, 1);
-
- config.data.datasets.forEach(function(dataset, datasetIndex) {
- dataset.data.pop();
- dataset.backgroundColor.pop();
- });
-
- window.myDoughnut.update();
- });
- </script>
- </body>
-
- </html>
|