Skip to content
Snippets Groups Projects
Commit 8d7f4bf7 authored by okafon99's avatar okafon99
Browse files

Delete index1.html

parent 47721e73
Branches main
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 0 additions and 144 deletions
index1.html deleted 100644 → 0
+ 0
− 144
View file @ 47721e73
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style type="text/css">
.chartBox {
width: 700px;
padding: 20px;
}
</style>
</head>
<body>
<h2>Übersicht: weltweit</h2>
<div class = "chartBox">
<canvas id="myChart"></canvas>
</div>
<div class ="selectBox">
<select id="da">
<option value="0">CO2 Emission</option>
<option value="1">Luftverkehr</option>
</select>
</div>
<h2>Übersicht: Länder mit Emissionsabnahme </h2>
<div class = "chartBox">
<canvas id="myChart1"></canvas>
</div>
<div class ="selectBox">
<select id="fallend">
<option value="0">Luftverkehr</option>
<option value="1">Population</option>
</select>
</div>
<div class = "chartBox">
<canvas id="myChart2"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
var x = {{content|tojson}};
var x_2 = {{content3|tojson}};
var dat = [x, x_2];
var label_ = ["CO2 Emission in Tonnen", "Flüge"]
var y= {{content4|tojson}};
var y1 = {{content5|tojson}};
var dat2 = [y,y1];
var label_1 = ["Flüge", "Population"]
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: {{content2|tojson}} ,
datasets: [{
label: 'CO2 Emission in Tonnen',
data: {{content|tojson}},
backgroundColor: [
'rgba(255, 99, 132, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: false
}
}
}
});
const ctx1 = document.getElementById('myChart1').getContext('2d');
const myChart1 = new Chart(ctx1, {
type: 'line',
data: {
labels: {{content2|tojson}} ,
datasets: [{
label: 'Flüge',
data: {{content4|tojson}} ,
backgroundColor: [
'rgb(54, 162, 235)'
],
borderColor: [
'rgb(54, 162, 235)'
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: false
}
}
}
});
const ctx2 = document.getElementById('myChart2').getContext('2d');
const myChart2 = new Chart(ctx2, {
type: 'pie',
data: {
labels: ['Länder mit Emmissionszunahme','Länder mit Emissionsabnahme: Austria, Yemen, Lithuania, Bulgaria, Croatia, Aruba, Palestine, Poland, Greenland, Andorra, Venezuela, Luxembourg, Czech Republic, Sweden, Jordan, Ireland, Macedonia, Uzbekistan, Portugal, Finland, Malta, Ukraine, Latvia, North Korea, France, Slovakia, Syria, Iceland, Hong Kong, United States, Cyprus, Belarus, Wallis and Futuna Islands, Netherlands, Dominica, Serbia, Faeroe Islands, Spain, Belgium, Taiwan, Italy, United Kingdom, Germany, Canada, Barbados, Saint Vincent and the Grenadines, Bermuda, Liechtenstein, Slovenia, Greece, Estonia, South Africa, Japan, Macao, Denmark, Jamaica, Trinidad and Tobago, Switzerland, Seychelles, New Zealand, Hungary, Norway, Romania'
],
datasets: [{
label: '',
data: {{content6|tojson}} ,
backgroundColor: [
'rgb(255, 99, 132)',
'rgb(54, 162, 235)'
],
hoverOffset: 4
}]
},
}
);
const da = document.getElementById('da');
da.addEventListener('change', visual);
function visual () {
console.log(da.value);
myChart.data.datasets[0].data = dat[parseInt(da.value)];
myChart.data.datasets[0].label = label_[parseInt(da.value)];
myChart.update();
}
const fallend = document.getElementById('fallend');
fallend.addEventListener('change', visual2);
function visual2 () {
myChart1.data.datasets[0].data = dat2[parseInt(fallend.value)];
myChart1.data.datasets[0].label = label_1[parseInt(fallend.value)];
myChart1.update();
}
</script>
</body>
</html>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment