Chart.js/samples/doughnut.html

<!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'
            }
        }
    };

    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); // remove the label first

        config.data.datasets.forEach(function(dataset, datasetIndex) {
            dataset.data.pop();
            dataset.backgroundColor.pop();
        });

        window.myDoughnut.update();
    });
    </script>
</body>

</html>
First commit. Version 0.1 Examples of the six charts that can be created, and the Chart.js library. 2013-03-18 00:57:50 +01:00			`<!doctype html>`
			`<html>`

Prettified, and half way through doughut 2015-05-16 04:54:01 +02:00			`<head>`
			`<title>Doughnut Chart</title>`
Updated Samples 2016-02-12 07:45:25 +01:00			`<script src="../dist/Chart.bundle.js"></script>`
Prettified, and half way through doughut 2015-05-16 04:54:01 +02:00			`<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>`
			`<style>`
improve doughnut sample - set title - set same size canvas as other samples - remove user select from canvas - remove html legend - remove logs 2016-02-28 09:15:18 +01:00			`canvas {`
			`-moz-user-select: none;`
			`-webkit-user-select: none;`
			`-ms-user-select: none;`
Prettified, and half way through doughut 2015-05-16 04:54:01 +02:00			`}`
			`</style>`
			`</head>`
First commit. Version 0.1 Examples of the six charts that can be created, and the Chart.js library. 2013-03-18 00:57:50 +01:00
Prettified, and half way through doughut 2015-05-16 04:54:01 +02:00			`<body>`
improve doughnut sample - set title - set same size canvas as other samples - remove user select from canvas - remove html legend - remove logs 2016-02-28 09:15:18 +01:00			`<div id="canvas-holder" style="width:75%">`
Doughnut, polar area, and radar samples should use the same canvas style 2015-11-12 01:06:36 +01:00			`<canvas id="chart-area" />`
Prettified, and half way through doughut 2015-05-16 04:54:01 +02:00			`</div>`
			`<button id="randomizeData">Randomize Data</button>`
Update doughnut sample to support adding and removing datasets 2015-06-17 04:12:59 +02:00			`<button id="addDataset">Add Dataset</button>`
			`<button id="removeDataset">Remove Dataset</button>`
addData is now supported by the doughnut chart + updated the sample to match. 2015-06-20 01:51:28 +02:00			`<button id="addData">Add Data</button>`
			`<button id="removeData">Remove Data</button>`
Prettified, and half way through doughut 2015-05-16 04:54:01 +02:00			`<script>`
			`var randomScalingFactor = function() {`
Pie Chart 2015-06-03 22:14:23 +02:00			`return Math.round(Math.random() * 100);`
Prettified, and half way through doughut 2015-05-16 04:54:01 +02:00			`};`
			`var randomColorFactor = function() {`
Pie Chart 2015-06-03 22:14:23 +02:00			`return Math.round(Math.random() * 255);`
Prettified, and half way through doughut 2015-05-16 04:54:01 +02:00			`};`
Update doughnut sample to support adding and removing datasets 2015-06-17 04:12:59 +02:00			`var randomColor = function(opacity) {`
Update radar sample + use the same colour functions in all samples 2015-06-17 04:21:40 +02:00			`return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity \|\| '.3') + ')';`
Update doughnut sample to support adding and removing datasets 2015-06-17 04:12:59 +02:00			`};`
First commit. Version 0.1 Examples of the six charts that can be created, and the Chart.js library. 2013-03-18 00:57:50 +01:00
Pie Chart 2015-06-03 22:14:23 +02:00			`var config = {`
Generate label strings using an option function. This allows new chart types to override 2015-12-06 18:53:45 +01:00			`type: 'doughnut',`
Pie Chart 2015-06-03 22:14:23 +02:00			`data: {`
			`datasets: [{`
			`data: [`
			`randomScalingFactor(),`
			`randomScalingFactor(),`
			`randomScalingFactor(),`
			`randomScalingFactor(),`
			`randomScalingFactor(),`
			`],`
			`backgroundColor: [`
			`"#F7464A",`
			`"#46BFBD",`
			`"#FDB45C",`
			`"#949FB1",`
			`"#4D5360",`
			`],`
Label polar area and doughnut datasets 2015-12-05 02:32:18 +01:00			`label: 'Dataset 1'`
Doughnut/Pie Chart refactor 2015-05-16 06:34:08 +02:00			`}, {`
Update samples with some hidden datasets 2015-10-08 01:54:53 +02:00			`hidden: true,`
Pie Chart 2015-06-03 22:14:23 +02:00			`data: [`
			`randomScalingFactor(),`
			`randomScalingFactor(),`
			`randomScalingFactor(),`
			`randomScalingFactor(),`
			`randomScalingFactor(),`
			`],`
			`backgroundColor: [`
			`"#F7464A",`
			`"#46BFBD",`
			`"#FDB45C",`
			`"#949FB1",`
			`"#4D5360",`
			`],`
Label polar area and doughnut datasets 2015-12-05 02:32:18 +01:00			`label: 'Dataset 2'`
Doughnut/Pie Chart refactor 2015-05-16 06:34:08 +02:00			`}, {`
Pie Chart 2015-06-03 22:14:23 +02:00			`data: [`
			`randomScalingFactor(),`
			`randomScalingFactor(),`
			`randomScalingFactor(),`
			`randomScalingFactor(),`
			`randomScalingFactor(),`
			`],`
			`backgroundColor: [`
			`"#F7464A",`
			`"#46BFBD",`
			`"#FDB45C",`
			`"#949FB1",`
			`"#4D5360",`
			`],`
Label polar area and doughnut datasets 2015-12-05 02:32:18 +01:00			`label: 'Dataset 3'`
Pie Chart 2015-06-03 22:14:23 +02:00			`}],`
			`labels: [`
			`"Red",`
			`"Green",`
			`"Yellow",`
			`"Grey",`
			`"Dark Grey"`
			`]`
			`},`
			`options: {`
Add legends to sample files 2015-12-04 04:03:39 +01:00			`responsive: true,`
			`legend: {`
			`position: 'top',`
			`},`
Split legend and title block functionality into 2 separate blocks. This allows the title to be on the top of the chart while the legend is on the bottom 2015-12-06 16:20:38 +01:00			`title: {`
			`display: true,`
fix title 2016-02-28 09:16:09 +01:00			`text: 'Chart.js Doughnut Chart'`
Split legend and title block functionality into 2 separate blocks. This allows the title to be on the top of the chart while the legend is on the bottom 2015-12-06 16:20:38 +01:00			`}`
Pie Chart 2015-06-03 22:14:23 +02:00			`}`
Doughnut/Pie Chart refactor 2015-05-16 06:34:08 +02:00			`};`
Add in new chart samples 2014-06-29 19:36:04 +02:00
Prettified, and half way through doughut 2015-05-16 04:54:01 +02:00			`window.onload = function() {`
			`var ctx = document.getElementById("chart-area").getContext("2d");`
Generate label strings using an option function. This allows new chart types to override 2015-12-06 18:53:45 +01:00			`window.myDoughnut = new Chart(ctx, config);`
Prettified, and half way through doughut 2015-05-16 04:54:01 +02:00			`};`
First commit. Version 0.1 Examples of the six charts that can be created, and the Chart.js library. 2013-03-18 00:57:50 +01:00
Prettified, and half way through doughut 2015-05-16 04:54:01 +02:00			`$('#randomizeData').click(function() {`
addData is now supported by the doughnut chart + updated the sample to match. 2015-06-20 01:51:28 +02:00			`$.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);`
example fixes 2015-06-03 23:18:42 +02:00			`});`
Prettified, and half way through doughut 2015-05-16 04:54:01 +02:00			`});`
addData is now supported by the doughnut chart + updated the sample to match. 2015-06-20 01:51:28 +02:00
Prettified, and half way through doughut 2015-05-16 04:54:01 +02:00			`window.myDoughnut.update();`
			`});`
Update doughnut sample to support adding and removing datasets 2015-06-17 04:12:59 +02:00
			`$('#addDataset').click(function() {`
			`var newDataset = {`
addData is now supported by the doughnut chart + updated the sample to match. 2015-06-20 01:51:28 +02:00			`backgroundColor: [],`
			`data: [],`
Label polar area and doughnut datasets 2015-12-05 02:32:18 +01:00			`label: 'New dataset ' + config.data.datasets.length,`
Update doughnut sample to support adding and removing datasets 2015-06-17 04:12:59 +02:00			`};`

addData is now supported by the doughnut chart + updated the sample to match. 2015-06-20 01:51:28 +02:00			`for (var index = 0; index < config.data.labels.length; ++index) {`
			`newDataset.data.push(randomScalingFactor());`
			`newDataset.backgroundColor.push(randomColor(0.7));`
			`}`

Update samples to no longer use old functions and instead modify the data directly 2015-09-22 03:00:58 +02:00			`config.data.datasets.push(newDataset);`
			`window.myDoughnut.update();`
Update doughnut sample to support adding and removing datasets 2015-06-17 04:12:59 +02:00			`});`

addData is now supported by the doughnut chart + updated the sample to match. 2015-06-20 01:51:28 +02:00			`$('#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) {`
Update samples to no longer use old functions and instead modify the data directly 2015-09-22 03:00:58 +02:00			`dataset.data.push(randomScalingFactor());`
			`dataset.backgroundColor.push(randomColor(0.7));`
addData is now supported by the doughnut chart + updated the sample to match. 2015-06-20 01:51:28 +02:00			`});`
Doughnut legends (only makes sense for first dataset). 2015-07-05 20:56:22 +02:00
Update samples to no longer use old functions and instead modify the data directly 2015-09-22 03:00:58 +02:00			`window.myDoughnut.update();`
addData is now supported by the doughnut chart + updated the sample to match. 2015-06-20 01:51:28 +02:00			`}`
			`});`

Update doughnut sample to support adding and removing datasets 2015-06-17 04:12:59 +02:00			`$('#removeDataset').click(function() {`
Update samples to no longer use old functions and instead modify the data directly 2015-09-22 03:00:58 +02:00			`config.data.datasets.splice(0, 1);`
			`window.myDoughnut.update();`
Update doughnut sample to support adding and removing datasets 2015-06-17 04:12:59 +02:00			`});`
addData is now supported by the doughnut chart + updated the sample to match. 2015-06-20 01:51:28 +02:00
			`$('#removeData').click(function() {`
			`config.data.labels.splice(-1, 1); // remove the label first`

			`config.data.datasets.forEach(function(dataset, datasetIndex) {`
Update samples to no longer use old functions and instead modify the data directly 2015-09-22 03:00:58 +02:00			`dataset.data.pop();`
			`dataset.backgroundColor.pop();`
addData is now supported by the doughnut chart + updated the sample to match. 2015-06-20 01:51:28 +02:00			`});`
Doughnut legends (only makes sense for first dataset). 2015-07-05 20:56:22 +02:00
Update samples to no longer use old functions and instead modify the data directly 2015-09-22 03:00:58 +02:00			`window.myDoughnut.update();`
addData is now supported by the doughnut chart + updated the sample to match. 2015-06-20 01:51:28 +02:00			`});`
Prettified, and half way through doughut 2015-05-16 04:54:01 +02:00			`</script>`
			`</body>`
Add in new chart samples 2014-06-29 19:36:04 +02:00
First commit. Version 0.1 Examples of the six charts that can be created, and the Chart.js library. 2013-03-18 00:57:50 +01:00			`</html>`