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

Improve design project 1

Browse Source
This commit is contained in:
Marcel Schwarz 2020-10-18 18:38:22 +02:00
parent b158cf81ec
commit e59f78adea
2 changed files with 36 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
projects/project-1/index.html
View File

@ -4,22 +4,45 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>GeoVis - Project 1</title> <title>GeoVis - Project 1</title>
<script src="https://www.gstatic.com/charts/loader.js"></script> <!-- Google Charts--> <script src="https://www.gstatic.com/charts/loader.js"></script> <!-- Google Charts-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"> </script> <!-- Tree Maps--> <script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script> <!-- Tree Maps-->
<script src="js/tree.js"></script> <!-- Tree Maps--> <script src="js/tree.js"></script> <!-- Tree Maps-->
<script src="script.js"></script> <script src="script.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" <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"> integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head> </head>
<body> <body>
<h1 class="m-5">Aufgabe 1</h1> <div class="m-5">
<div class="container m-5">
<div class="row"> <div class="row">
<div id="piechartYear" class="col-lg-6"></div> <h1 class="col">Aufgabe 1</h1>
<div id="piechartMonth" class="col-lg-6"></div> </div>
<div class="row">
<figure class="col-xl-6 col-sm figure border border-primary">
<div id="piechartYear" class="pr-3"></div>
<figcaption class="figure-caption">Kreisdiagramm 1</figcaption>
</figure>
<figure class="col-xl-6 col-sm figure border border-primary">
<div id="piechartMonth"></div>
<figcaption class="figure-caption">Kreisdiagramm 2</figcaption>
</figure>
</div>
<div class="row justify-content-center">
<figure class="col figure border border-primary">
<div id="linechart" class=""></div>
<figcaption class="figure-caption">Liniendiagramm</figcaption>
</figure>
</div>
<div class="row justify-content-center">
<figure class="col figure border border-primary">
<div id="scatterchart"></div>
<figcaption class="figure-caption">Punktdiagramm</figcaption>
</figure>
</div>
<div class="row justify-content-center">
<figure class="col figure border border-primary">
<div id="bubblechart"></div>
<figcaption class="figure-caption">Blasendiagramm</figcaption>
</figure>
</div> </div>
<div id="linechart"></div>
<div id="scatterchart"></div>
<div id="bubblechart"></div>
</div> </div>
<h1 class="m-5">Aufgabe 2</h1> <h1 class="m-5">Aufgabe 2</h1>
<div id="foldermap" class="m-5"></div> <div id="foldermap" class="m-5"></div>

15
projects/project-1/script.js
View File

@ -23,8 +23,7 @@ function drawPieChartYear() {
chart.draw(pieChartData, { chart.draw(pieChartData, {
title: "Wärmebedarf 2012 - 2014 (in MWh)", title: "Wärmebedarf 2012 - 2014 (in MWh)",
colors: ["#0040ff", "#ff0000", "#155a00"], colors: ["#0040ff", "#ff0000", "#155a00"],
height: 300, height: 400
width: 800
}) })
} }
@ -42,8 +41,7 @@ function drawPieChartMonth() {
let chart = new google.visualization.PieChart(document.getElementById("piechartMonth")) let chart = new google.visualization.PieChart(document.getElementById("piechartMonth"))
chart.draw(pieChartData, { chart.draw(pieChartData, {
title: "Akkumulierter Wärmebedarf 2012 - 2014 pro Monat (in MWh)", title: "Akkumulierter Wärmebedarf 2012 - 2014 pro Monat (in MWh)",
height: 300, height: 400
width: 800
}) })
} }
@ -64,8 +62,7 @@ function drawLineChart() {
title: "Wärmebedarf 2012 - 2014 (in MWh)", title: "Wärmebedarf 2012 - 2014 (in MWh)",
colors: ["#0040ff", "#ff0000", "#155a00"], colors: ["#0040ff", "#ff0000", "#155a00"],
explorer: {}, explorer: {},
height: 300, height: 400
width: 800
}) })
} }
@ -89,8 +86,7 @@ function drawScatterChart() {
vAxis: {title: "MWh"}, vAxis: {title: "MWh"},
hAxix: {title: "Month"}, hAxix: {title: "Month"},
explorer: {}, explorer: {},
height: 300, height: 400
width: 800
} }
let chart = new google.charts.Scatter(document.getElementById("scatterchart")) let chart = new google.charts.Scatter(document.getElementById("scatterchart"))
chart.draw(data, google.charts.Scatter.convertOptions(options)) chart.draw(data, google.charts.Scatter.convertOptions(options))
@ -116,6 +112,7 @@ function drawBubbleChart() {
let options = { let options = {
title: "Wärmebedarf 2012 - 2014 (in MWh)", title: "Wärmebedarf 2012 - 2014 (in MWh)",
height: 400,
hAxis: { hAxis: {
title: "Monat", title: "Monat",
ticks: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13] ticks: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]
@ -126,8 +123,6 @@ function drawBubbleChart() {
colors: ["#0040ff", "#ff0000", "#155a00"], colors: ["#0040ff", "#ff0000", "#155a00"],
explorer: {}, explorer: {},
bubble: {textStyle: {fontSize: 11}}, bubble: {textStyle: {fontSize: 11}},
height: 300,
width: 800
}; };
let chart = new google.visualization.BubbleChart(document.getElementById("bubblechart")); let chart = new google.visualization.BubbleChart(document.getElementById("bubblechart"));