-
Notifications
You must be signed in to change notification settings - Fork 1
/
page2.html
144 lines (137 loc) · 5.97 KB
/
page2.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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>24ToCode Energy Challenge</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="home.css">
<link rel="shortcut icon" type="image/x-icon" href="Images/favicon.ico" />
<script src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<script>
window.onload = function () {
var dataPoints = [];
//Replace text file's path according to your requirement.
$.get("DATA.txt", function (data) {
var x = 0;
var allLines = data.split('\n');
if (allLines.length > 0) {
for (var i = 0; i < allLines.length; i++) {
dataPoints.push({
x: x,
y: parseInt(allLines[i])
setTimeout(log(),2000)
});
setTimeout(chartDisplay(dataPoints), 2000)
x++
}
}
})
}
function chartDisplay(dataPoints) {
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "Chart using Text File Data"
},
data: [{
type: "line",
dataPoints: dataPoints,
}]
});
chart.render();
}
function log() {
console.log("test")
}
</script>
</script>
</head>
<body>
<div class="headerSec2">
<img class="rockPic" src="Images/RockwellLogo2.png">
<h1 class="headerText">The Bowtie Boyz -- Energy Management Toolkit </h1>
</div>
<div class="leftHalf">
<h1 class="graphHeader">Real Power Demand</h1>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
</div>
<div class="rightHalf">
<h1 class="graphHeader">Cost Over Time</h1>
</div>
<div class="valueSection">
<h5 class="valueHeader">Valuable Components</h5>
<div class="money">
<img class="statIcon" src="Images/warning.png">
<h5 class="statDesc">Real-Time Alerts to Facility Operators</h5>
</div>
<div class="earth">
<img class="statIcon" src="Images/monitor.png">
<h5 class="statDesc">24/7 Energy Monitoring and Predictions</h5>
</div>
<div class="government">
<img class="statIcon" src="Images/marketing.png">
<h5 class="statDesc">Cost-Savings & Increased Profitability</h5>
</div>
</div>
<h5 class="dataHeader2">Our Process:</h5>
<div class="leftHalf2">
<h5 class="dataHeader">Our Data:</h5>
<img class="data" src="Images/data.PNG">
</div>
<div class="rightHalf2">
<h5 class="dataHeader">Our Filters:</h5>
<div class="infoButtons">
<div id="The peak real power usage for any given hour in the Mequon facility." class="infoButton">
<h5 class="info">Peak Real Power</h5>
</div>
<div id="The net total of Reactive (Wasted) Energy in any given hour (Mequon)." class="infoButton">
<h5 class="info">Reactive Energy</h5>
</div>
<div id="The net total of Real (Used) Energy in any given hour (Mequon)." class="infoButton">
<h5 class="info">Real Energy Net</h5>
</div>
<div id="The percentage of energy that is being used effectively (Mequon)." class="infoButton">
<h5 class="info">Efficiency</h5>
</div>
<div id="The data the subset of date ranges was collected from." class="infoButton">
<h5 class="info">Date</h5>
</div>
</div>
<div class="infoButtons">
<div id="The max temperature at the facility on any given day." class="infoButton infoWide">
<h5 class="info">Max Temp (MKE)</h5>
</div>
<div id="The min temperature at the facility on any given day." class="infoButton infoWide">
<h5 class="info">Min Temp (MKE)</h5>
</div>
<div id="The average temperature at the facility on any given day." class="infoButton infoWide">
<h5 class="info">Average Temp</h5>
</div>
<div id="The average stock value of all the energy titans at the time." class="infoButton infoWide">
<h5 class="info">Avg. Energy Stock</h5>
</div>
</div>
<div class="infoButtons">
<div id="Price of Rockwell's Stock at the time -- correlates with orders." class="infoButton infoWide">
<h5 class="info">Rockwell Stock</h5>
</div>
<div id="Max cost of electricy per KwH across energy distributors." class="infoButton infoWide">
<h5 class="info">High - $ per KwH</h5>
</div>
<div id="Min cost of electricity per KwH across energy distributors." class="infoButton infoWide">
<h5 class="info">Low - $ per KwH</h5>
</div>
<div id="Avg. cost of electricity per KwH across energy distributors." class="infoButton infoWide">
<h5 class="info">Average - $ per KwH</h5>
</div>
</div>
<h5 class="infoHeader">Click the icons above to learn more about our data!</h5>
</div>
<div class="thanksSec">
<h5 class="thanksHeader">Thank You!</h5>
</div>
<script src="home.js"></script>
<script src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
</body>
</html>