testeafzal

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>
</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>
</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>
</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>
<title>Gráfico de Radar</title>
</head>
<body>
<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],
borderWidth: 2
}]
};
const config = {
type: 'radar',
data: data,
options: {
scales: {
r: {
beginAtZero: true,
max: 100
}
}
}
};
const ctx = document.getElementById('myRadarChart').getContext('2d');

</script>
</body>
</html>
2.f)<!DOCTYPE html>
<html lang="en">
<head>
<title>Gráfico de Dispersão</title>
</head>
<body>
<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 },
],
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');

</script>
</body>
</html>
2.g<!DOCTYPE html>
<html>
<head>
<title>Gráfico de Área Empilhada</title>
</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],
},
{
label: 'Produto C',
data: [1200, 900, 1100, 1000, 1150],
}
]
};
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/leaflet@1.7.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.7.1/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: '© <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>
href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
href="https://unpkg.com/heatmap.js@2.0.3/plugins/leaflet-heatmap/leaflet-
heatmap.css" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script
src="https://unpkg.com/heatmap.js@2.0.3/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: '© <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>
</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 },
],
},
{
label: 'Categoria B',
data: [
{ x: 25, y: 35, r: 12 },
{ x: 40, y: 50, r: 18 },
{ x: 55, y: 65, r: 24 },
],
},
{
label: 'Categoria C',
data: [
{ x: 35, y: 15, r: 8 },
{ x: 50, y: 30, r: 14 },
{ x: 65, y: 45, r: 22 },
],
}
]
};
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>
<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>
<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',
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>

testeafzal

Uploaded by

Copyright:

Available Formats

You might also like

testeafzal

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

testeafzal

Uploaded by

Copyright:

Available Formats

2.

var myChart = new Chart(ctx, {

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

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

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

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

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

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

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

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

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

// Adicione um mapa base, como o OpenStreetMap.

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

// Crie um objeto de mapa de calor.

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

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

You might also like