<iframe srcdoc="<!DOCTYPE html>
<html>
<head>
<script src='https://cdn.jsdelivr.net/npm/chart.js'></script>
<script src='https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0'></script>
<style>body,html{margin:0;padding:0;overflow:hidden;}</style>
</head>
<body>
<canvas id='myChart'></canvas>
<script>
function getUrlParams() {
return new URLSearchParams(window.parent.location.search);
}
const params = getUrlParams();
const ctx = document.getElementById('myChart').getContext('2d');
Chart.register(ChartDataLabels);
const defaultColors = [
'rgba(255, 99, 132, 0.8)',
'rgba(54, 162, 235, 0.8)',
'rgba(255, 206, 86, 0.8)',
'rgba(75, 192, 192, 0.8)',
'rgba(153, 102, 255, 0.8)',
'rgba(255, 159, 64, 0.8)',
'rgba(199, 199, 199, 0.8)',
'rgba(83, 102, 255, 0.8)',
'rgba(40, 159, 64, 0.8)',
'rgba(210, 199, 199, 0.8)'
];
const data = params.get('data') ? params.get('data').split(',').map(Number) : [];
const labels = params.get('labels') ? params.get('labels').split(',') : [];
const chartType = params.get('type') || 'bar'; // Default to 'bar' if not specified
const colors = data.map((_, index) => defaultColors[index % defaultColors.length]);
new Chart(ctx, {
type: chartType,
data: {
labels: labels,
datasets: [{
data: data,
backgroundColor: colors,
borderColor: chartType === 'bar' ? 'rgba(0, 0, 0, 0.1)' : 'white',
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: chartType === 'pie',
position: 'right'
},
title: {
display: true,
text: params.get('title') || 'Chart Title',
font: {
size: 16
}
},
datalabels: {
color: '#fff',
formatter: function(value, context) {
return value.toString();
},
display: function(context) {
return context.dataset.data[context.dataIndex] > 5; // Only show label if value > 5
}
}
},
scales: {
x: {
display: chartType === 'bar'
},
y: {
display: chartType === 'bar',
beginAtZero: true
}
}
}
});
</script>
</body>
</html>" width="100%" height="100%" style="border:none;"></iframe>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Iframe Loader with Rounded Corners Option</title>
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
#iframe-container {
width: 100%;
height: 100vh;
}
iframe {
width: 100%;
height: 100%;
border: none;
}
.rounded {
border-radius: 8px;
overflow: hidden;
}
</style>
</head>
<body>
<div id="iframe-container"></div>
<script>
function getUrlParameter(name) {
name = name.replace(/["]+/g, '\\"');
var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
var results = regex.exec(location.search);
return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
}
var iframeUrl = getUrlParameter('iframe');
var roundCorners = getUrlParameter('round').toLowerCase() === 'yes';
if (iframeUrl) {
var iframe = document.createElement('iframe');
iframe.src = iframeUrl;
if (roundCorners) {
iframe.classList.add('rounded');
}
document.getElementById('iframe-container').appendChild(iframe);
} else {
document.getElementById('iframe-container').innerHTML = '<p>Nothing Here yet.</p>';
}
</script>
</body>
</html>
Dynamic Embed
Transcendence Media
Created on September 30, 2024
Start designing with a free template
Discover more than 1500 professional designs like these:
View
Essential Business Proposal
View
Project Roadmap Timeline
View
Step-by-Step Timeline: How to Develop an Idea
View
Artificial Intelligence History Timeline
View
Mothers Days Card
View
Momentum: First Operational Steps
View
Momentum: Employee Introduction Presentation
Explore all templates
Transcript
<iframe srcdoc="<!DOCTYPE html> <html> <head> <script src='https://cdn.jsdelivr.net/npm/chart.js'></script> <script src='https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0'></script> <style>body,html{margin:0;padding:0;overflow:hidden;}</style> </head> <body> <canvas id='myChart'></canvas> <script> function getUrlParams() { return new URLSearchParams(window.parent.location.search); } const params = getUrlParams(); const ctx = document.getElementById('myChart').getContext('2d'); Chart.register(ChartDataLabels); const defaultColors = [ 'rgba(255, 99, 132, 0.8)', 'rgba(54, 162, 235, 0.8)', 'rgba(255, 206, 86, 0.8)', 'rgba(75, 192, 192, 0.8)', 'rgba(153, 102, 255, 0.8)', 'rgba(255, 159, 64, 0.8)', 'rgba(199, 199, 199, 0.8)', 'rgba(83, 102, 255, 0.8)', 'rgba(40, 159, 64, 0.8)', 'rgba(210, 199, 199, 0.8)' ]; const data = params.get('data') ? params.get('data').split(',').map(Number) : []; const labels = params.get('labels') ? params.get('labels').split(',') : []; const chartType = params.get('type') || 'bar'; // Default to 'bar' if not specified const colors = data.map((_, index) => defaultColors[index % defaultColors.length]); new Chart(ctx, { type: chartType, data: { labels: labels, datasets: [{ data: data, backgroundColor: colors, borderColor: chartType === 'bar' ? 'rgba(0, 0, 0, 0.1)' : 'white', borderWidth: 1 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: chartType === 'pie', position: 'right' }, title: { display: true, text: params.get('title') || 'Chart Title', font: { size: 16 } }, datalabels: { color: '#fff', formatter: function(value, context) { return value.toString(); }, display: function(context) { return context.dataset.data[context.dataIndex] > 5; // Only show label if value > 5 } } }, scales: { x: { display: chartType === 'bar' }, y: { display: chartType === 'bar', beginAtZero: true } } } }); </script> </body> </html>" width="100%" height="100%" style="border:none;"></iframe>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Responsive Iframe Loader with Rounded Corners Option</title> <style> body, html { margin: 0; padding: 0; height: 100%; overflow: hidden; } #iframe-container { width: 100%; height: 100vh; } iframe { width: 100%; height: 100%; border: none; } .rounded { border-radius: 8px; overflow: hidden; } </style> </head> <body> <div id="iframe-container"></div> <script> function getUrlParameter(name) { name = name.replace(/["]+/g, '\\"'); var regex = new RegExp('[\\?&]' + name + '=([^&#]*)'); var results = regex.exec(location.search); return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' ')); } var iframeUrl = getUrlParameter('iframe'); var roundCorners = getUrlParameter('round').toLowerCase() === 'yes'; if (iframeUrl) { var iframe = document.createElement('iframe'); iframe.src = iframeUrl; if (roundCorners) { iframe.classList.add('rounded'); } document.getElementById('iframe-container').appendChild(iframe); } else { document.getElementById('iframe-container').innerHTML = '<p>Nothing Here yet.</p>'; } </script> </body> </html>