This repository has been archived by the owner on Dec 7, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
area.html
102 lines (91 loc) · 2.92 KB
/
area.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chart generator</title>
<link rel="stylesheet" href="css/styles.css">
<script src="javascript/menu.js"></script>
<script src="javascript/chartGenerator.js"></script>
<script src="javascript/utils.js"></script>
<script src="javascript/convertCSVtoJSON.js"></script>
</head>
<body>
<div class="header">
<h1>Chart generator</h1>
</div>
<div id="navbar">
<a href="home.html">Home</a>
<a href="info.html">Info</a>
</div>
<h2 id="home">Welcome to our chart generator</h2>
<br>
<div id="content">
<fieldset id="radioFieldset">
<legend>Select required columns</legend>
</fieldset>
</div>
<label for="numberColumnsSlider">Select number of rows:</label><br>
<input id="numberColumnsSlider" type="range" min="1" onchange="changeSlider()">
<label id="sliderLabel"></label>
<br>
<button onclick="showChart()">generate</button>
<div class="chart-container" style="position: relative; height:40vh; width:50vw; margin-left: 20%; margin-right: 20%">
<canvas id="myChart"></canvas>
</div>
<br>
<br>
<div class="footer">
2018, FMI, Web Technologies 10th edition, Denis Duev, Mihaela Chakova
</div>
<script src="javascript/wizard.js"></script>
<script src="node_modules/chart.js/dist/Chart.js"></script>
<script>
function displayChart(aData) {
function getFirstColumn(oObject) {
for(var x in oObject){
return x;
}
}
var chart = createChart();
var numOfRows = getNumberOfRows();
chart.onInit("area");
chart.addLabels(getLabelsForColumn(aData, getFirstColumn(aData[0]), numOfRows));
var columns = aData[0];
var index = 0;
for (var key in columns) {
var input = document.getElementById(key);
if (input.checked) {
chart.addDataset(
index,
getDataForColumn(aData, key, numOfRows),
aData[0][key],
1,
getRandomColor(),
getRandomColor());
index++;
}
}
chart.addChartIn("myChart");
}
var sFileName = getFileName();
if (sFileName.endsWith(".csv")){
convert(sFileName, callBack);
} else {
getJsonFile(sFileName, callBack);
}
function callBack(aTestData) {
visualizeCheckboxColumns(aTestData);
setMaxValueSlider(aTestData);
}
document.getElementById("home").innerText = "Generate your area chart";
function showChart() {
var sFileName = getFileName();
if (sFileName.endsWith(".csv")) {
convert("testData/" + sFileName, displayChart)
} else {
getJsonFile("testData/" + sFileName, displayChart);
}
}
</script>
</body>
</html>