hft-informatik/geovisualisierung
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Implement project 1

Browse Source
This commit is contained in:
Marcel Schwarz 2020-10-17 21:46:49 +02:00
parent 9d348f3e48
commit 7ba385dea4
2 changed files with 161 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
projects/project1/index.html Normal file
View File

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>GeoVis - Project 1</title>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container m-5">
<div class="row justify-content-center">
<div id="piechartYear" class="col-lg-6"></div>
<div id="piechartMonth" class="col-lg-6"></div>
</div>
<div id="linechart"></div>
<div id="scatterchart"></div>
<div id="bubblechart"></div>
</div>
</body>
</html>

139
projects/project1/script.js Normal file
View File

@ -0,0 +1,139 @@
let dataset = {
2012: [128.52, 187.54, 63.16, 72.18, 0, 0, 0, 0, 6, 68.58, 84.54, 120.51], //Month from Jan to Dec
2013: [144.44, 133.07, 121.78, 38.27, 35.53, 18.57, 0, 0, 16.56, 48.53, 91.88, 115.2], //Month from Jan to Dec
2014: [113.77, 96.17, 77.74, 38.27, 29.79, 11.6, 0, 0, 16.85, 36.14, 67.55, 138] //Month from Jan to Dec
}
function lookupMonth(num, short = false) {
if (short) {
return ["Jan", "Feb", "Mrz", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"][num]
}
return ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"][num]
}
function drawPieChartYear() {
let pieChartData = google.visualization.arrayToDataTable([
["Jahr", "MWh"],
["2012", dataset["2012"].reduce((acc, curr) => acc + curr)],
["2013", dataset["2013"].reduce((acc, curr) => acc + curr)],
["2014", dataset["2014"].reduce((acc, curr) => acc + curr)]
])
let chart = new google.visualization.PieChart(document.getElementById("piechartYear"))
chart.draw(pieChartData, {
title: "Wärmebedarf 2012 - 2014 (in MWh)",
colors: ["#0040ff", "#ff0000", "#155a00"],
height: 300,
width: 800
})
}
function drawPieChartMonth() {
let parsedData = []
for (let i = 0; i < 12; i++) {
parsedData.push([lookupMonth(i), dataset["2012"][i] + dataset["2013"][i] + dataset["2014"][i]])
}
let pieChartData = google.visualization.arrayToDataTable([
["Monat", "MWh"],
...parsedData
])
let chart = new google.visualization.PieChart(document.getElementById("piechartMonth"))
chart.draw(pieChartData, {
title: "Akkumulierter Wärmebedarf 2012 - 2014 pro Monat (in MWh)",
height: 300,
width: 800
})
}
function drawLineChart() {
let parsedData = []
for (let i = 0; i < 12; i++) {
parsedData.push([lookupMonth(i), dataset["2012"][i], dataset["2013"][i], dataset["2014"][i]])
}
let lineChartData = google.visualization.arrayToDataTable([
["Monat", "2012", "2013", "2014"],
...parsedData
])
let chart = new google.visualization.LineChart(document.getElementById("linechart"))
chart.draw(lineChartData, {
title: "Wärmebedarf 2012 - 2014 (in MWh)",
colors: ["#0040ff", "#ff0000", "#155a00"],
height: 300,
width: 800
})
}
function drawScatterChart() {
let parsedData = []
for (let i = 0; i < 12; i++) {
parsedData.push([lookupMonth(i), dataset["2012"][i], dataset["2013"][i], dataset["2014"][i]])
}
let data = new google.visualization.arrayToDataTable([
["Monat", "2012", "2013", "2014"],
...parsedData
])
let options = {
chart: {
title: "Wärmebedarf 2012 - 2014 (in MWh)"
},
colors: ["#0040ff", "#ff0000", "#155a00"],
vAxis: {title: "MWh"},
hAxix: {title: "Month"},
height: 300,
width: 800
}
let chart = new google.charts.Scatter(document.getElementById("scatterchart"))
chart.draw(data, google.charts.Scatter.convertOptions(options))
}
function drawBubbleChart() {
let parsedData = []
for (let year in dataset) {
let complete = dataset[year].reduce((acc, curr) => acc + curr)
dataset[year].forEach((value, idx) => {
parsedData.push([
lookupMonth(idx, true), idx + 1, (value / complete) * 100, year, value
])
})
}
let data = google.visualization.arrayToDataTable([
//BubbleName, X-Axis, Y-Axis, Series/Color, BubbleSize
["Monat", "Monat", "Prozent des Jahresverbrauchs", "Jahr", "MWh"],
...parsedData
]);
let options = {
title: "Wärmebedarf 2012 - 2014 (in MWh)",
hAxis: {
title: "Monat",
ticks: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]
},
vAxis: {
title: "Prozentualer MWh Anteil"
},
colors: ["#0040ff", "#ff0000", "#155a00"],
bubble: {textStyle: {fontSize: 11}},
height: 300,
width: 800
};
let chart = new google.visualization.BubbleChart(document.getElementById("bubblechart"));
chart.draw(data, options);
}
google.charts.load("current", {packages: ["corechart", "scatter"]})
google.charts.setOnLoadCallback(drawPieChartYear)
google.charts.setOnLoadCallback(drawPieChartMonth)
google.charts.setOnLoadCallback(drawLineChart)
google.charts.setOnLoadCallback(drawScatterChart)
google.charts.setOnLoadCallback(drawBubbleChart)