Scribd
Upload
17 views

Testeafzal

Uploaded by

maylaamadeh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
17 views

Testeafzal

Uploaded by

maylaamadeh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 10

2.

a)
<!DOCTYPE html>
<html>
<head>
<title>Gráfico de Barras em Tempo Real</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<canvas id="myChart" width="400" height="200"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var chartData = {
labels: ["neyjr10", "Mayla" , "Aldina", "Henkel"],
datasets: [{
label: 'Dados em Tempo Real',
data: [2, 19 , 5, 6 ],
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}]
};

var myChart = new Chart(ctx, {


type: 'bar',
data: chartData,
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true
}
}
}
});

function updateChartData() {

myChart.data.labels.push(newData.label);
myChart.data.datasets[0].data.push(newData.value);

if (myChart.data.labels.length > 10) {


myChart.data.labels.shift();
myChart.data.datasets[0].data.shift();
}

myChart.update();
}

setInterval(updateChartData, 1000);
</script>
</body>
</html>

2.b)
<!DOCTYPE html>
<html>
<head>
<title>Grafico Barras de Vendas Mensais</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<canvas id="graficoVenda" width="400" height="200"></canvas>
<script>

var dadosdeVendasMensais = {
labels: ["Janeiro", "Fevereiro", "Marco", "Abril", "Maio", "Junho"],
datasets: [{
label: "Vendas Mensais",
backgroundColor: ["purple", "pink", "purple", "pink", "purple", "pink"],
borderColor: "rgba(75, 192, 192, 1)",
borderWidth: 1,
data: [1000, 1200, 800, 1500, 2000, 1700]
}]
};

var ctx = document.getElementById("graficoVenda").getContext("2d");


var graficoVenda = new Chart(ctx, {
type: "line",
data: dadosdeVendasMensais,
options: {
scales: {
y: {
beginAtZero: true
}
}

}
});
</script>
</body>
</html>.

2.c)
<!DOCTYPE html>
<html>
<head>
<title>Gráfico de Pizza de Distribuição de Vendas por Categoria</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<canvas id="salesChart" width="400" height="200"></canvas>
<script>
var categorySalesData = {
labels: ["Eletrônicos", "Roupas", "Alimentos", "Livros", "Outros"],
datasets: [{
data: [3000, 2000, 5000, 1500, 1000],
backgroundColor: [
'rgba(255, 99, 132, 0.6)',
'rgba(54, 162, 235, 0.6)',
'rgba(255, 206, 86, 0.6)',
'rgba(75, 192, 192, 0.6)',
'rgba(153, 102, 255, 0.6)'
]
}]
};

var ctx = document.getElementById("salesChart").getContext("2d");


var salesChart = new Chart(ctx, {
type: "pie",
data: categorySalesData,
options: {
responsive: true,
}
});
</script>
</body>
</html>

2.d)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gráfico de Vendas</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<div style="width: 80%; margin: 0 auto;">
<canvas id="myChart"></canvas>
</div>

<script>

const data = {
labels: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio'],
datasets: [{
label: 'Vendas',
data: [50, 60, 70, 55, 80],
borderColor: 'blue',
borderWidth: 2,
fill: false
}]
};

const config = {
type: 'line',
data: data,
options: {
scales: {
y: {
beginAtZero: true
}
}
}
};

const ctx = document.getElementById('myChart').getContext('2d');


new Chart(ctx, config);
</script>
</body>
</html>

2.e)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gráfico de Radar</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<div style="width: 80%; margin: 0 auto;">
<canvas id="myRadarChart"></canvas>
</div>

<script>
const data = {
labels: ['Ataque', 'Defesa', 'Agilidade', 'Estratégia', 'Sorte'],
datasets: [{
label: 'Pontuações do Jogador',
data: [80, 65, 90, 75, 70],
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 2
}]
};

const config = {
type: 'radar',
data: data,
options: {
scales: {
r: {
beginAtZero: true,
max: 100
}
}
}
};

const ctx = document.getElementById('myRadarChart').getContext('2d');


new Chart(ctx, config);
</script>
</body>
</html>

2.f)<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gráfico de Dispersão</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<div style="width: 80%; margin: 0 auto;">
<canvas id="myScatterChart"></canvas>
</div>

<script>

const data = {
datasets: [{
label: 'Altura vs. Peso',
data: [
{ x: 160, y: 60 },
{ x: 165, y: 70 },
{ x: 170, y: 75 },
{ x: 175, y: 80 },
{ x: 180, y: 85 },
{ x: 185, y: 90 },
],
backgroundColor: 'rgba(75, 192, 192, 0.5)',
borderColor: 'rgba(75, 192, 192, 1)',
pointRadius: 8,
pointHoverRadius: 10
}]
};

const config = {
type: 'scatter',
data: data,
options: {
scales: {
x: {
type: 'linear',
position: 'bottom'
},
y: {
min: 50,
max: 100,
type: 'linear',
position: 'left'
}
}
}
};

const ctx = document.getElementById('myScatterChart').getContext('2d');


new Chart(ctx, config);
</script>
</body>
</html>

2.g<!DOCTYPE html>
<html>
<head>
<title>Gráfico de Área Empilhada</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<canvas id="stackedAreaChart" width="800" height="400"></canvas>
<script>

var data = {
labels: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio'],
datasets: [
{
label: 'Produto A',
data: [1000, 1200, 900, 1100, 950],
backgroundColor: 'rgba(255, 99, 132, 0.5)'
},
{
label: 'Produto B',
data: [800, 1100, 850, 1050, 900],
backgroundColor: 'rgba(54, 162, 235, 0.5)'
},
{
label: 'Produto C',
data: [1200, 900, 1100, 1000, 1150],
backgroundColor: 'rgba(255, 206, 86, 0.5)'
}
]
};

var ctx = document.getElementById('stackedAreaChart').getContext('2d');


var stackedAreaChart = new Chart(ctx, {
type: 'line',
data: data,
options: {
scales: {
x: [{
stacked: true,
}],
y: [{
stacked: true,
ticks: {
beginAtZero: true,
stepSize: 200
}
}]
}
}
});
</script>
</body>
</html>

2.h)<!DOCTYPE html>
<html>
<head>
<title>Mapa Interativo</title>
<link rel="stylesheet"
href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
</head>
<body>
<div id="map" style="width: 800px; height: 600px;"></div>
<script>
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a
href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var marker = L.marker([51.5, -0.09]).addTo(map);

marker.bindPopup("<b>Local marcado!</b><br>Este é um local de


exemplo.").openPopup();
</script>
</body>
</html>

2.i)<!DOCTYPE html>
<html>
<head>
<title>Mapa de Calor de Temperatura</title>
<link rel="stylesheet"
href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<link rel="stylesheet"
href="https://unpkg.com/[email protected]/plugins/leaflet-heatmap/leaflet-
heatmap.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script
src="https://unpkg.com/[email protected]/plugins/leaflet-heatmap/leaflet-
heatmap.js"></script>
</head>
<body>
<div id="map" style="width: 800px; height: 600px;"></div>
<script>
// Crie um mapa Leaflet no elemento 'map' e defina as coordenadas iniciais
e o nível de zoom.
var map = L.map('map').setView([51.505, -0.09], 13);

// Adicione um mapa base, como o OpenStreetMap.


L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a
href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

// Crie uma matriz de dados de temperatura (exemplo).


var data = [
[51.505, -0.09, 1], // [latitude, longitude, temperatura]
[51.51, -0.1, 0.5],
[51.49, -0.1, 2],
// Adicione mais dados de temperatura aqui...
];

// Crie um objeto de mapa de calor.


var heat = L.heatLayer(data, { radius: 25 }).addTo(map);
</script>
</body>
</html>

2.j)<!DOCTYPE html>
<html>
<head>
<title>Gráfico de Dispersão com Bolhas Coloridas</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<canvas id="bubbleChart" width="800" height="400"></canvas>
<script>
// Dados de exemplo (substitua pelos seus próprios dados)
var data = {
datasets: [
{
label: 'Categoria A',
data: [
{ x: 10, y: 20, r: 10 },
{ x: 15, y: 25, r: 15 },
{ x: 30, y: 40, r: 20 },
],
backgroundColor: 'rgba(255, 99, 132, 0.5)'
},
{
label: 'Categoria B',
data: [
{ x: 25, y: 35, r: 12 },
{ x: 40, y: 50, r: 18 },
{ x: 55, y: 65, r: 24 },
],
backgroundColor: 'rgba(54, 162, 235, 0.5)'
},
{
label: 'Categoria C',
data: [
{ x: 35, y: 15, r: 8 },
{ x: 50, y: 30, r: 14 },
{ x: 65, y: 45, r: 22 },
],
backgroundColor: 'rgba(255, 206, 86, 0.5)'
}
]
};

var ctx = document.getElementById('bubbleChart').getContext('2d');


var bubbleChart = new Chart(ctx, {
type: 'bubble',
data: data,
options: {
scales: {
x: {
beginAtZero: true,
max: 80
},
y: {
beginAtZero: true,
max: 80
}
}
}
});
</script>
</body>
</html>
2.k)<!DOCTYPE html>
<html>
<head>
<title>Cubo 3D Rotativo</title>
</head>
<body>
<div id="canvas-container"></div>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
<script>
// Configuração da cena
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth /
window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('canvas-
container').appendChild(renderer.domElement);

// Criar um cubo
var geometry = new THREE.BoxGeometry();
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// Posicionamento da câmera
camera.position.z = 5;

// Função de animação
var animate = function () {
requestAnimationFrame(animate);

// Gire o cubo
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;

renderer.render(scene, camera);
};

// Iniciar a animação
animate();
</script>
</body>
</html>

2..c
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Evolução das Ações de uma Empresa</title>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
<style>
canvas {
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<div style="width: 80%; margin: 0 auto;">
<canvas id="stockChart"></canvas>
</div>

<script>
// Dados de exemplo: substitua pelos dados reais de evolução das ações
const stockData = {
labels: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set',
'Out', 'Nov', 'Dez'],
datasets: [{
label: 'Preço das Ações',
data: [100, 110, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210],
borderColor: 'blue',
backgroundColor: 'rgba(0, 0, 255, 0.1)',
borderWidth: 2,
pointRadius: 0, // Oculta os pontos
}]
};

const ctx = document.getElementById('stockChart').getContext('2d');


const stockChart = new Chart(ctx, {
type: 'line',
data: stockData,
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
x: {
beginAtZero: true
},
y: {
beginAtZero: true
}
},
animation: {
duration: 2000, // Duração da animação em milissegundos
easing: 'easeInOutQuart' // Tipo de animação (opcional)
}
}
});
</script>
</body>
</html>

You might also like