Chart.js/samples/polar-area.html

<!doctype html>
<html>

<head>
    <title>Polar Area Chart</title>
    <script src="../Chart.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>

<body>
    <div id="canvas-holder" style="width:100%">
        <canvas id="chart-area"></canvas>
    </div>
    <button id="randomizeData">Randomize Data</button>
    <button id="addData">Add Data</button>
    <button id="removeData">Remove Data</button>
    <div>
        <h3>Legend</h3>
        <div id="legendContainer">

        </div>
    </div>
    <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 = {
        data: {
            datasets: [{
                data: [
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor(),
                ],
                backgroundColor: [
                    "#F7464A",
                    "#46BFBD",
                    "#FDB45C",
                    "#949FB1",
                    "#4D5360",
                ],
                label: 'My dataset' // for legend
            }],
            labels: [
                "Red",
                "Green",
                "Yellow",
                "Grey",
                "Dark Grey"
            ]
        },
        options: {
            responsive: true,
            legend: {
                position: 'top',
            },
            title: {
                display: true,
                text: 'Our Favorite Dataset'
            },
            scale: {
              ticks: {
                beginAtZero: true
              },
              reverse: false
            },
            animateRotate:false
        }
    };

    window.onload = function() {
        var ctx = document.getElementById("chart-area");
        window.myPolarArea = Chart.PolarArea(ctx, config);
        updateLegend();
    };

    function updateLegend() {
        $legendContainer = $('#legendContainer');
        $legendContainer.empty();
        $legendContainer.append(window.myPolarArea.generateLegend());
    }

    $('#randomizeData').click(function() {
        $.each(config.data.datasets, function(i, piece) {
            $.each(piece.data, function(j, value) {
                config.data.datasets[i].data[j] = randomScalingFactor();
                config.data.datasets[i].backgroundColor[j] = randomColor();
            });
        });
        window.myPolarArea.update();
        updateLegend();
    });

    $('#addData').click(function() {
        if (config.data.datasets.length > 0) {
            config.data.labels.push('dataset #' + config.data.labels.length);

            $.each(config.data.datasets, function(i, dataset) {
                dataset.backgroundColor.push(randomColor());
                dataset.data.push(randomScalingFactor());
            });

            window.myPolarArea.update();
            updateLegend();
        }
    });

    $('#removeData').click(function() {
        config.data.labels.pop(); // remove the label first

        $.each(config.data.datasets, function(i, dataset) {
            dataset.backgroundColor.pop();
            dataset.data.pop();
        });

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

</html>
Add in new chart samples 2014-06-29 19:36:04 +02:00			`<!doctype html>`
			`<html>`

Polar Area deep data 2015-05-27 06:02:41 +02:00			`<head>`
			`<title>Polar Area Chart</title>`
			`<script src="../Chart.js"></script>`
			`<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>`
			`</head>`
Add in new chart samples 2014-06-29 19:36:04 +02:00
Polar Area deep data 2015-05-27 06:02:41 +02:00			`<body>`
Doughnut, polar area, and radar samples should use the same canvas style 2015-11-12 01:06:36 +01:00			`<div id="canvas-holder" style="width:100%">`
Polar area legends 2015-07-05 20:48:04 +02:00			`<canvas id="chart-area"></canvas>`
Polar Area deep data 2015-05-27 06:02:41 +02:00			`</div>`
			`<button id="randomizeData">Randomize Data</button>`
Tooltip Title width now accurately measured 2015-06-19 20:36:22 +02:00			`<button id="addData">Add Data</button>`
			`<button id="removeData">Remove Data</button>`
Polar area legends 2015-07-05 20:48:04 +02:00			`<div>`
			`<h3>Legend</h3>`
			`<div id="legendContainer">`
Update remainder of tables for radar, polar, and pie. 2015-11-24 01:32:38 +01:00
Polar area legends 2015-07-05 20:48:04 +02:00			`</div>`
			`</div>`
Polar Area deep data 2015-05-27 06:02:41 +02:00			`<script>`
			`var randomScalingFactor = function() {`
			`return Math.round(Math.random() * 100);`
			`};`
			`var randomColorFactor = function() {`
			`return Math.round(Math.random() * 255);`
			`};`
Tooltip Title width now accurately measured 2015-06-19 20:36:22 +02:00			`var randomColor = function(opacity) {`
			`return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity \|\| '.3') + ')';`
			`};`
Add in new chart samples 2014-06-29 19:36:04 +02:00
Polar Area deep data 2015-05-27 06:02:41 +02:00			`var config = {`
			`data: {`
Polar Area 2015-06-03 22:45:40 +02:00			`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: 'My dataset' // for legend`
Polar Area 2015-06-03 22:45:40 +02:00			`}],`
Polar Area Draws, but has scale resizing issues 2015-06-16 08:39:04 +02:00			`labels: [`
			`"Red",`
			`"Green",`
			`"Yellow",`
			`"Grey",`
			`"Dark Grey"`
			`]`
Polar Area deep data 2015-05-27 06:02:41 +02:00			`},`
			`options: {`
Reverse scale on radar/polar area 2015-09-02 23:14:12 +02:00			`responsive: true,`
Add legends to sample files 2015-12-04 04:03:39 +01:00			`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,`
			`text: 'Our Favorite Dataset'`
Add legends to sample files 2015-12-04 04:03:39 +01:00			`},`
Reverse scale on radar/polar area 2015-09-02 23:14:12 +02:00			`scale: {`
Update remainder of tables for radar, polar, and pie. 2015-11-24 01:32:38 +01:00			`ticks: {`
			`beginAtZero: true`
			`},`
			`reverse: false`
			`},`
			`animateRotate:false`
Polar Area deep data 2015-05-27 06:02:41 +02:00			`}`
			`};`
Updated Samples Samples now include a “Randomize Data” button which utilizes the latest changes. 2015-01-08 18:13:14 +01:00
Polar Area deep data 2015-05-27 06:02:41 +02:00			`window.onload = function() {`
Fixed polar-area sample 2015-06-16 08:20:46 +02:00			`var ctx = document.getElementById("chart-area");`
Create interfaces similar to the old interfaces. Ensure that scales always have IDs before controllers are built. 2015-06-17 01:20:26 +02:00			`window.myPolarArea = Chart.PolarArea(ctx, config);`
Polar area legends 2015-07-05 20:48:04 +02:00			`updateLegend();`
Polar Area deep data 2015-05-27 06:02:41 +02:00			`};`
Add in new chart samples 2014-06-29 19:36:04 +02:00
Polar area legends 2015-07-05 20:48:04 +02:00			`function updateLegend() {`
			`$legendContainer = $('#legendContainer');`
			`$legendContainer.empty();`
			`$legendContainer.append(window.myPolarArea.generateLegend());`
			`}`

Polar Area deep data 2015-05-27 06:02:41 +02:00			`$('#randomizeData').click(function() {`
Polar Area 2015-06-03 22:45:40 +02:00			`$.each(config.data.datasets, function(i, piece) {`
			`$.each(piece.data, function(j, value) {`
			`config.data.datasets[i].data[j] = randomScalingFactor();`
Tooltip Title width now accurately measured 2015-06-19 20:36:22 +02:00			`config.data.datasets[i].backgroundColor[j] = randomColor();`
Polar Area 2015-06-03 22:45:40 +02:00			`});`
Polar Area deep data 2015-05-27 06:02:41 +02:00			`});`
			`window.myPolarArea.update();`
Polar area legends 2015-07-05 20:48:04 +02:00			`updateLegend();`
Polar Area deep data 2015-05-27 06:02:41 +02:00			`});`
Tooltip Title width now accurately measured 2015-06-19 20:36:22 +02:00
			`$('#addData').click(function() {`
			`if (config.data.datasets.length > 0) {`
			`config.data.labels.push('dataset #' + config.data.labels.length);`

Update samples to no longer use old functions and instead modify the data directly 2015-09-22 03:00:58 +02:00			`$.each(config.data.datasets, function(i, dataset) {`
			`dataset.backgroundColor.push(randomColor());`
			`dataset.data.push(randomScalingFactor());`
			`});`
Polar area legends 2015-07-05 20:48:04 +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.myPolarArea.update();`
Polar area legends 2015-07-05 20:48:04 +02:00			`updateLegend();`
Tooltip Title width now accurately measured 2015-06-19 20:36:22 +02:00			`}`
			`});`

			`$('#removeData').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.labels.pop(); // remove the label first`
Tooltip Title width now accurately measured 2015-06-19 20:36: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			`$.each(config.data.datasets, function(i, dataset) {`
			`dataset.backgroundColor.pop();`
			`dataset.data.pop();`
Tooltip Title width now accurately measured 2015-06-19 20:36:22 +02:00			`});`
Polar area legends 2015-07-05 20:48:04 +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.myPolarArea.update();`
Polar area legends 2015-07-05 20:48:04 +02:00			`updateLegend();`
Tooltip Title width now accurately measured 2015-06-19 20:36:22 +02:00			`});`
Polar Area deep data 2015-05-27 06:02:41 +02:00			`</script>`
			`</body>`
Add in new chart samples 2014-06-29 19:36:04 +02:00
			`</html>`