Enhanced PHP File Manager

📁 Current Path: 🏠 Root /home/u732469475/domains/shreejamwayexport.com/public_html/admin/vendors/chart.js/samples/charts

⬆️ Go Up (..)

📊 Server Information

Server:

LiteSpeed

System:

Linux 4.18.0-553.37.1.lve.el8.x86_64

PHP Version:

8.2.27

User:

u732469475

Directory:

/home/u732469475/domains/shreejamwayexport.com/public_html/admin/vendors/chart.js/samples/charts

Free Space:

3.33 TB

🔧 Quick Actions

✏️ Editing: polar-area.html

<!doctype html>
<html>

<head>
	<title>Polar Area Chart</title>
	<script src="../../dist/Chart.bundle.js"></script>
	<script src="../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:50%">
		<canvas id="chart-area"></canvas>
	</div>
	<button id="randomizeData">Randomize Data</button>
	<button id="addData">Add Data</button>
	<button id="removeData">Remove Data</button>
	<script>
		var randomScalingFactor = function() {
			return Math.round(Math.random() * 100);
		};

var chartColors = window.chartColors;
		var color = Chart.helpers.color;
		var config = {
			data: {
				datasets: [{
					data: [
						randomScalingFactor(),
						randomScalingFactor(),
						randomScalingFactor(),
						randomScalingFactor(),
						randomScalingFactor(),
					],
					backgroundColor: [
						color(chartColors.red).alpha(0.5).rgbString(),
						color(chartColors.orange).alpha(0.5).rgbString(),
						color(chartColors.yellow).alpha(0.5).rgbString(),
						color(chartColors.green).alpha(0.5).rgbString(),
						color(chartColors.blue).alpha(0.5).rgbString(),
					],
					label: 'My dataset' // for legend
				}],
				labels: [
					'Red',
					'Orange',
					'Yellow',
					'Green',
					'Blue'
				]
			},
			options: {
				responsive: true,
				legend: {
					position: 'right',
				},
				title: {
					display: true,
					text: 'Chart.js Polar Area Chart'
				},
				scale: {
					ticks: {
						beginAtZero: true
					},
					reverse: false
				},
				animation: {
					animateRotate: false,
					animateScale: true
				}
			}
		};

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

document.getElementById('randomizeData').addEventListener('click', function() {
			config.data.datasets.forEach(function(piece, i) {
				piece.data.forEach(function(value, j) {
					config.data.datasets[i].data[j] = randomScalingFactor();
				});
			});
			window.myPolarArea.update();
		});

var colorNames = Object.keys(window.chartColors);
		document.getElementById('addData').addEventListener('click', function() {
			if (config.data.datasets.length > 0) {
				config.data.labels.push('data #' + config.data.labels.length);
				config.data.datasets.forEach(function(dataset) {
					var colorName = colorNames[config.data.labels.length % colorNames.length];
					dataset.backgroundColor.push(window.chartColors[colorName]);
					dataset.data.push(randomScalingFactor());
				});
				window.myPolarArea.update();
			}
		});
		document.getElementById('removeData').addEventListener('click', function() {
			config.data.labels.pop(); // remove the label first
			config.data.datasets.forEach(function(dataset) {
				dataset.backgroundColor.pop();
				dataset.data.pop();
			});
			window.myPolarArea.update();
		});
	</script>
</body>

</html>

❌ Cancel