Chart.js/samples/charts/pie.html

<!doctype html>
<html>

<head>
    <title>Pie Chart</title>
    <script src="../../dist/Chart.bundle.js"></script>
    <script src="../utils.js"></script>
</head>

<body>
    <div id="canvas-holder" style="width:40%">
        <canvas id="chart-area" />
    </div>
    <button id="randomizeData">Randomize Data</button>
    <button id="addDataset">Add Dataset</button>
    <button id="removeDataset">Remove Dataset</button>
    <script>
    var randomScalingFactor = function() {
        return Math.round(Math.random() * 100);
    };

    var config = {
        type: 'pie',
        data: {
            datasets: [{
                data: [
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor(),
                ],
                backgroundColor: [
                    window.chartColors.red,
                    window.chartColors.orange,
                    window.chartColors.yellow,
                    window.chartColors.green,
                    window.chartColors.blue,
                ],
                label: 'Dataset 1'
            }],
            labels: [
                "Red",
                "Orange",
                "Yellow",
                "Green",
                "Blue"
            ]
        },
        options: {
            responsive: true
        }
    };

    window.onload = function() {
        var ctx = document.getElementById("chart-area").getContext("2d");
        window.myPie = 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.myPie.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.myPie.update();
    });

    document.getElementById('removeDataset').addEventListener('click', function() {
        config.data.datasets.splice(0, 1);
        window.myPie.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>`

Pie Chart 2015-06-03 22:14:23 +02:00			`<head>`
			`<title>Pie Chart</title>`
Reorganize samples and list them in index.html (#4043) 2017-03-21 01:40:44 +01:00			`<script src="../../dist/Chart.bundle.js"></script>`
			`<script src="../utils.js"></script>`
Pie Chart 2015-06-03 22:14:23 +02:00			`</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
Pie Chart 2015-06-03 22:14:23 +02:00			`<body>`
Reorganized sample files into sub directories. Added a helper containing colours that should be used by all samples. I added new samples to explain behaviour and modified all samples to have consistent styling. In updating the samples, I removed the use of jQuery and instead use standard methods. For the custom tooltip samples, I updated the styling to show color boxes like the regular tooltips. 2016-10-21 05:12:10 +02:00			`<div id="canvas-holder" style="width:40%">`
			`<canvas id="chart-area" />`
Pie Chart 2015-06-03 22:14:23 +02:00			`</div>`
			`<button id="randomizeData">Randomize Data</button>`
Update pie sample file to support add and remove datasets 2015-06-17 04:16:28 +02:00			`<button id="addDataset">Add Dataset</button>`
			`<button id="removeDataset">Remove Dataset</button>`
Pie Chart 2015-06-03 22:14:23 +02:00			`<script>`
			`var randomScalingFactor = function() {`
			`return Math.round(Math.random() * 100);`
			`};`
Updated Samples Samples now include a “Randomize Data” button which utilizes the latest changes. 2015-01-08 18:13:14 +01:00
example fixes 2015-06-03 23:18:42 +02:00			`var config = {`
Pie used new doughnut controller 2015-06-16 06:47:20 +02:00			`type: 'pie',`
example fixes 2015-06-03 23:18:42 +02:00			`data: {`
			`datasets: [{`
			`data: [`
			`randomScalingFactor(),`
			`randomScalingFactor(),`
			`randomScalingFactor(),`
			`randomScalingFactor(),`
			`randomScalingFactor(),`
			`],`
			`backgroundColor: [`
Reorganized sample files into sub directories. Added a helper containing colours that should be used by all samples. I added new samples to explain behaviour and modified all samples to have consistent styling. In updating the samples, I removed the use of jQuery and instead use standard methods. For the custom tooltip samples, I updated the styling to show color boxes like the regular tooltips. 2016-10-21 05:12:10 +02:00			`window.chartColors.red,`
			`window.chartColors.orange,`
			`window.chartColors.yellow,`
			`window.chartColors.green,`
			`window.chartColors.blue,`
example fixes 2015-06-03 23:18:42 +02:00			`],`
Reorganized sample files into sub directories. Added a helper containing colours that should be used by all samples. I added new samples to explain behaviour and modified all samples to have consistent styling. In updating the samples, I removed the use of jQuery and instead use standard methods. For the custom tooltip samples, I updated the styling to show color boxes like the regular tooltips. 2016-10-21 05:12:10 +02:00			`label: 'Dataset 1'`
example fixes 2015-06-03 23:18:42 +02:00			`}],`
			`labels: [`
			`"Red",`
Reorganized sample files into sub directories. Added a helper containing colours that should be used by all samples. I added new samples to explain behaviour and modified all samples to have consistent styling. In updating the samples, I removed the use of jQuery and instead use standard methods. For the custom tooltip samples, I updated the styling to show color boxes like the regular tooltips. 2016-10-21 05:12:10 +02:00			`"Orange",`
example fixes 2015-06-03 23:18:42 +02:00			`"Yellow",`
Reorganized sample files into sub directories. Added a helper containing colours that should be used by all samples. I added new samples to explain behaviour and modified all samples to have consistent styling. In updating the samples, I removed the use of jQuery and instead use standard methods. For the custom tooltip samples, I updated the styling to show color boxes like the regular tooltips. 2016-10-21 05:12:10 +02:00			`"Green",`
			`"Blue"`
example fixes 2015-06-03 23:18:42 +02:00			`]`
			`},`
			`options: {`
			`responsive: true`
Pie Chart 2015-06-03 22:14:23 +02:00			`}`
example fixes 2015-06-03 23:18:42 +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			`window.onload = function() {`
			`var ctx = document.getElementById("chart-area").getContext("2d");`
Pie used new doughnut controller 2015-06-16 06:47:20 +02:00			`window.myPie = new Chart(ctx, config);`
Pie Chart 2015-06-03 22:14:23 +02:00			`};`
Add in new chart samples 2014-06-29 19:36:04 +02:00
Reorganized sample files into sub directories. Added a helper containing colours that should be used by all samples. I added new samples to explain behaviour and modified all samples to have consistent styling. In updating the samples, I removed the use of jQuery and instead use standard methods. For the custom tooltip samples, I updated the styling to show color boxes like the regular tooltips. 2016-10-21 05:12:10 +02:00			`document.getElementById('randomizeData').addEventListener('click', function() {`
			`config.data.datasets.forEach(function(dataset) {`
			`dataset.data = dataset.data.map(function() {`
			`return randomScalingFactor();`
example fixes 2015-06-03 23:18:42 +02:00			`});`
Pie Chart 2015-06-03 22:14:23 +02:00			`});`
Reorganized sample files into sub directories. Added a helper containing colours that should be used by all samples. I added new samples to explain behaviour and modified all samples to have consistent styling. In updating the samples, I removed the use of jQuery and instead use standard methods. For the custom tooltip samples, I updated the styling to show color boxes like the regular tooltips. 2016-10-21 05:12:10 +02:00
Pie Chart 2015-06-03 22:14:23 +02:00			`window.myPie.update();`
			`});`
Update pie sample file to support add and remove datasets 2015-06-17 04:16:28 +02:00
Reorganized sample files into sub directories. Added a helper containing colours that should be used by all samples. I added new samples to explain behaviour and modified all samples to have consistent styling. In updating the samples, I removed the use of jQuery and instead use standard methods. For the custom tooltip samples, I updated the styling to show color boxes like the regular tooltips. 2016-10-21 05:12:10 +02:00			`var colorNames = Object.keys(window.chartColors);`
			`document.getElementById('addDataset').addEventListener('click', function() {`
Update pie sample file to support add and remove datasets 2015-06-17 04:16:28 +02:00			`var newDataset = {`
Reorganized sample files into sub directories. Added a helper containing colours that should be used by all samples. I added new samples to explain behaviour and modified all samples to have consistent styling. In updating the samples, I removed the use of jQuery and instead use standard methods. For the custom tooltip samples, I updated the styling to show color boxes like the regular tooltips. 2016-10-21 05:12:10 +02:00			`backgroundColor: [],`
			`data: [],`
			`label: 'New dataset ' + config.data.datasets.length,`
Update pie sample file to support add and remove datasets 2015-06-17 04:16:28 +02:00			`};`

Reorganized sample files into sub directories. Added a helper containing colours that should be used by all samples. I added new samples to explain behaviour and modified all samples to have consistent styling. In updating the samples, I removed the use of jQuery and instead use standard methods. For the custom tooltip samples, I updated the styling to show color boxes like the regular tooltips. 2016-10-21 05:12:10 +02:00			`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);`
			`}`

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.myPie.update();`
Update pie sample file to support add and remove datasets 2015-06-17 04:16:28 +02:00			`});`

Reorganized sample files into sub directories. Added a helper containing colours that should be used by all samples. I added new samples to explain behaviour and modified all samples to have consistent styling. In updating the samples, I removed the use of jQuery and instead use standard methods. For the custom tooltip samples, I updated the styling to show color boxes like the regular tooltips. 2016-10-21 05:12:10 +02:00			`document.getElementById('removeDataset').addEventListener('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.myPie.update();`
Update pie sample file to support add and remove datasets 2015-06-17 04:16:28 +02:00			`});`
Pie Chart 2015-06-03 22:14:23 +02:00			`</script>`
			`</body>`
Updated Samples Samples now include a “Randomize Data” button which utilizes the latest changes. 2015-01-08 18:13:14 +01: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>`