-
Notifications
You must be signed in to change notification settings - Fork 2
/
myChart.js
478 lines (432 loc) · 18 KB
/
myChart.js
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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
$(document).ready(function () {
var today = moment().format("YYYY MMM Do");
var arr = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
var avgArr = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
var labels = ["", "", "", "", "", "", "", "", "", "", "Live"];
var labels2 = ["", "", "", "", "", "", "", "", "", "", "Live"];
var liveInterval;
var historicalInterval;
var globalIntervalNum;
var globalIntervalString;
var globalCoin;
var myChart = document.getElementById("myChart").getContext("2d");
$(".mui-btn--primary").css("background-color", "#446684");
$("#submitEmail").css("background-color", "#446684");
const toggleSwitch = document.querySelector(
'.theme-switch input[type="checkbox"]'
);
var podcastResponse;
var podPlayer;
var carouselIndex = 0;
// aos function animate
AOS.init();
// Dark Mode Retrieval
var savedTheme = localStorage.getItem("theme");
// console.log(savedTheme);
if (savedTheme === "dark") {
toggleSwitch.checked = true;
}
// object with description about coins
var aboutCoin = {
bitcoin:
"Bitcoin is a cryptocurrency which isn’t managed by a bank or agency but in which transactions are recorded in the blockchain that is public and contains records of each and every transaction that takes place. The cryptocurrency is traded by individuals with cryptographic keys that act as wallets. Bitcoin was first invented in 2009 by an anonymous founder known as Satoshi Nakamoto. Bitcoins are moved in blocks every 10 minutes on a decentralized ledger that connects blocks into a coherent chain dating back to the first genesis block. It was originally described as a peer-to-peer electronic cash but the technology has evolved to emphasize being a settlement layer rather than a payment network. This has left integrated second layer solutions, like Lightning Network, to prioritize that use case. It has remained the largest cryptocurrency by market cap.",
ethereum:
"Ethereum is a software system which is part of a decentralised system meaning it is not controlled by any single entity. Ethereum is different to Bitcoin because it expands on its technologies to create a completely new network including an internet browser, coding language and payment system – 'in short, Ethereum is a public, open-source, Blockchain based distributed software platform that allows developers to build and deploy decentralised applications'. The platform’s currency is called Ether. The platform was founded in 2014 by Vitalik Buterin and a team of other developers. The currency is just one aspect/component of Ethereum yet can be mined by individuals more easily than Bitcoin.",
dash:
"Dash is derivative of Litecoin, which is a derivative of Bitcoin and was created by Evan Duffield in January of 2014. It was originally known as Darkcoin but later rebranded as Dash in March of 2015. It uses a mix of miners and masternodes to validate transactions. A unique feature of Dash, is that it has has masternodes that stake at least 1000 DASH that have the ability to instantly confirm transactions. Transaction speed can be increased through masternode only validation which excludes miners. Privacy can also be enabled through 'PrivateSend' transactions that mix units. Dash has a voting system in place that can enable quick changes in governance if required rather than having a hard fork",
eos:
"EOS is similar to Ethereum in that it is a blockchain platform which allows decentralised apps to be created and developed. The platform should effectively provide its own operating system including cloud storage and has the ability to process one million transactions per second without any fees. A notable distinction is that transaction confirmation is done through a democracy like system where block producers are chosen by the entire EOS ecosystem through voting known as delegated proof of stake (DPoS). Block.one created EOS in September 2017 and it now has over 100 decentralised apps (dapps) with at most 6,000 daily active users.",
["bitcoin-cash"]:
"Bitcoin Cash is a fork of Bitcoin that prioritizes onchain scaling and utility as a peer-to-peer electronic cash system. The 1 megabyte limit on bitcoin blocks meant that there was often a significant delay between transactions being initiated and completing, as well as increased fees due to the limited supply per block. Bitcoin Cash increased and will continue to increase block sizes which thereby increase the potential volume of transactions on the network. On August 1, 2017, Amaury Séchet released the first Bitcoin Cash software implementation. Miners running this software were able to validate a new kind transaction to create a new chain, BCH. This process is known as a 'hard fork' since it created a new version of the BTC chain that followed BCH rules. Today, BCH and BTC share the exact same transaction history up to that point.",
waves:
"Waves is a Blockchain platform developed to provide users with the opportunity of creating their own new custom token. Those tokens may be used for loyalty programs, in-app currency creation, and for ICO founding. ... The new token can be traded on Waves decentralized exchange.",
litecoin:
"For all intents and purposes, the function of Litecoin is almost identical to that of Bitcoin – it is a decentralised digital currency. It reduced the 10 min block confirmation time to 2.5 minutes which enables faster processing. The currency was created by Charlie Lee in October 2011 as an attempt to make Bitcoin more scalable and quick. During the period of high BTC fees of late 2017, observers suggested users were utilizing LTC as a second layer to send transactions.",
["binance-coin"]:
"Binance Coin is the crypto-coin issued by Binance exchange, and trades with the BNB symbol. Binance coin runs on the Ethereum blockchain with ERC 20 standard, and has a strict limit of maximum 200 million BNB tokens.",
};
// Global Options for my chart
Chart.defaults.global.defaultFontFamily = "Helvetica";
Chart.defaults.global.defaultFontSize = 18;
Chart.defaults.global.defaultFontColor = "black";
// CHART.JS
let massPopChart = new Chart(myChart, {
type: "line", // bar, horizontalBar, pie, line, doughnut, radar, polarArea
data: {
labels: labels,
datasets: [
{
label: "Price USD",
fill: false,
data: arr,
borderWidth: 1,
borderColor: "green",
backgroundColor: "green",
hoverBorderWidth: 7,
hoverBorderColor: "red",
},
{
label: "5 candle Average",
fill: false,
data: avgArr,
borderWidth: 1,
borderColor: "grey",
backgroundColor: "grey",
hoverBorderWidth: 7,
hoverBorderColor: "orange",
},
],
},
options: {
scales: {
xAxes: [
{
display: false, //this will remove all the x-axis grid lines
},
],
},
title: {
display: true,
text: "",
fontSize: 25,
fontColor: "goldenrod",
},
legend: {
display: true,
position: "bottom",
labels: {
fontColor: "#000",
},
},
layout: {
padding: {
left: 0,
right: 0,
bottom: 0,
top: 0,
},
},
tooltips: {
enabled: true,
},
},
});
var configPrice = function (coin, intervalString, intervalNum) {
globalCoin = coin;
globalIntervalString = intervalString;
globalIntervalNum = intervalNum;
//set description
$("#description").html(aboutCoin[coin]);
// title for coins
massPopChart.options.title.text = coin.toUpperCase();
var currentTime = Date.now();
var startTime = currentTime - 600000 * intervalNum * 2;
var queryHistorical =
"https://api.coincap.io/v2/assets/" +
coin +
"/history?interval=" +
intervalString +
"&start=" +
startTime +
"&end=" +
currentTime;
var queryLive = "https://api.coincap.io/v2/rates/" + coin;
getHistorical(queryHistorical);
getLivePrice(queryLive);
getNews(coin);
clearInterval(historicalInterval);
clearInterval(liveInterval);
historicalInterval = setInterval(function () {
getHistorical(queryHistorical);
}, intervalNum * 60000);
liveInterval = setInterval(function () {
getLivePrice(queryLive);
}, 5000);
};
configPrice("bitcoin", "m1", 1);
// generalPurpose();
// function getting historical data price
function getHistorical(queryURL) {
$.ajax({
url: queryURL,
method: "GET",
}).then(function (response) {
var data = response.data;
var delta = data.length - arr.length;
var i = delta;
for (i; i < data.length; i++) {
var price = parseFloat(parseFloat(data[i].priceUsd).toFixed(3));
arr[i - delta - 1] = price;
//avgArr[i - delta - 1] = price-10;
labels[i - delta - 1] = globalCoin;
}
movingAvg(data);
massPopChart.update();
});
}
// function for live price
function getLivePrice(queryURL) {
$.ajax({
url: queryURL,
method: "GET",
}).then(function (response) {
var price = parseFloat(parseFloat(response.data.rateUsd).toFixed(3));
// console.log(price);
$("#realTimePrice").html(
"<i class='fas fa-coins'></i> Live price: $" + price
);
arr[arr.length - 1] = price;
// for moving average live
if (arr[0] != 0) {
avgArr[avgArr.length - 1] = (
(arr[arr.length - 1] +
arr[arr.length - 2] +
arr[arr.length - 3] +
arr[arr.length - 4] +
arr[arr.length - 5]) /
5
).toFixed(3);
}
massPopChart.update();
});
}
// function for moving average
function movingAvg(data) {
var delta = data.length - avgArr.length;
var i = delta;
for (i; i < data.length; i++) {
var price1 = parseFloat(parseFloat(data[i].priceUsd).toFixed(3));
var price2 = parseFloat(parseFloat(data[i - 1].priceUsd).toFixed(3));
var price3 = parseFloat(parseFloat(data[i - 2].priceUsd).toFixed(3));
var price4 = parseFloat(parseFloat(data[i - 3].priceUsd).toFixed(3));
var price5 = parseFloat(parseFloat(data[i - 4].priceUsd).toFixed(3));
avgArr[i - delta - 1] = (
(price1 + price2 + price3 + price4 + price5) /
5
).toFixed(3);
$("#average").html(
'<i class="fa fa-bar-chart" aria-hidden="true"></i> Average: $' +
avgArr[i - delta - 1]
);
}
avgArr[avgArr.length - 1] = (
(arr[arr.length - 1] +
arr[arr.length - 2] +
arr[arr.length - 3] +
arr[arr.length - 4] +
arr[arr.length - 5]) /
5
).toFixed(3);
}
// function to for testing APi
function generalPurpose() {
var queryURL = "https://api.coincap.io/v2/rates";
$.ajax({
url: queryURL,
method: "GET",
}).then(function (response) {
//console.log(response.data)
for (assets of response.data) {
if (assets.type == "crypto") {
// console.log(assets.id);
}
}
});
}
// Retrieves last viewed currency and duration
if (localStorage.getItem("time0")) {
configPrice(
localStorage.getItem("time0"),
localStorage.getItem("time1"),
localStorage.getItem("time2")
);
configPrice(
localStorage.getItem("coin0"),
localStorage.getItem("coin1"),
localStorage.getItem("coin2")
);
}
// listener for time duration menu
$("#timeDropdown").click(function (event) {
var intervalNum = event.target.value;
var intervalString = event.target.id;
configPrice(globalCoin, intervalString, intervalNum);
localStorage.setItem("time0", globalCoin);
localStorage.setItem("time1", intervalString);
localStorage.setItem("time2", intervalNum);
});
// listener for coin name
$("#currentCoin").click(function (event) {
var coin = event.target.id;
configPrice(coin, globalIntervalString, globalIntervalNum);
localStorage.setItem("coin0", coin);
localStorage.setItem("coin1", globalIntervalString);
localStorage.setItem("coin2", globalIntervalNum);
});
// ajax request for contact us form with formspree
$("#submitEmail").click(function (e) {
var name = $("#inputName").val();
var email = $("#inputEmail").val();
var message = $("#inputMessage").val();
if (name == "" || email == "" || message == "") {
// console.log("fail");
return false;
} else {
e.preventDefault();
var status = document.getElementById("my-form-status");
var url = "https://formspree.io/xwkrpzap";
var method = "POST";
var data = new FormData();
data.append("email", email);
data.append("name", name);
data.append("message", message);
var xhr = new XMLHttpRequest();
xhr.open(method, url);
xhr.setRequestHeader("Accept", "application/json");
xhr.onreadystatechange = function () {
if (xhr.readyState !== XMLHttpRequest.DONE) return;
if (xhr.status === 200) {
// console.log("success");
status.innerHTML = "Thanks! Your message was send.";
} else {
// console.log("error");
status.innerHTML =
"Oops! There was a problem. Please enter a valid email address";
}
};
xhr.send(data);
}
});
// API for news
function getNews(coin) {
var urlNews =
"https://cors-anywhere.herokuapp.com/" +
"https://newsapi.org/v2/everything?language=en&q=" +
coin +
"+crypto" +
"&from=" +
today +
"&sortBy=publishedAt&apiKey=46f225ffb36d463dbf82d74ee65a1700";
// var urlNews = 'https://cors-anywhere.herokuapp.com/' + 'http://newsapi.org/v2/top-headlines?' +
// 'country=ca&' +
// 'apiKey=46f225ffb36d463dbf82d74ee65a1700';
$.ajax({
url: urlNews,
method: "GET",
}).then(function (response) {
//console.log(response)
for (i = 0; i < 6; i++) {
var articles = response.articles;
// console.log(articles)
var title = response.articles[i].title;
var description = response.articles[i].description;
var explore = response.articles[i].url;
var image = response.articles[i].urlToImage;
// console.log(explore)
$("#title" + i).text(title);
$("#des" + i).text(description);
$("#link-button" + i).attr("href", explore);
$("#card-img" + i).attr("src", image);
}
});
}
// GMAIL News Modal
$("#newsBtn").on("click", function (event) {
event.preventDefault();
var key = "c7607f7ed4342aee28bd3bb885a9faac";
var key2 = "f0307841dc1bad77a771b46d5faa4fbc";
var search = massPopChart.options.title.text;
switch (search) {
case "WAVES":
search += " Enterprise Blockchain";
break;
case "EOS":
search += " Blockchain";
break;
}
var queryURL = `https://gnews.io/api/v3/search?q=${search}&token=${key2}`;
$.ajax({
url: queryURL,
method: "GET",
}).then(function (response) {
// console.log(response)
var results = response;
$(results.articles).each(function (index) {
var title = response.articles[index].title;
var webUrl = response.articles[index].url;
var source = response.articles[index].source.name;
var newsLink = $("<a>");
var dateLine = $("<p>");
var articleContainer = $("<div>");
newsLink.attr("href", webUrl);
newsLink.attr("target", "_blank");
newsLink.text(title);
dateLine.text("Date: " + response.articles[index].publishedAt);
dateLine.attr("class", "modal-dates");
articleContainer.append(newsLink);
articleContainer.append("<br>", "Source: ", source, dateLine);
articleContainer.attr("data-aos", "fade-left");
articleContainer.attr("data-aos-anchor", "#newsModal");
$("#modal-links").append(articleContainer, "<hr>");
});
$("#newsModal").css("display", "block");
});
});
$("#close-modal").on("click", function (event) {
event.preventDefault();
$("#newsModal").css("display", "none");
$("#modal-links").empty();
});
$(window).on("click", function (event) {
if (event.target.id == "newsModal") {
$("#newsModal").hide();
$("#modal-links").empty();
}
});
// Podcast Ajax Call
function podcast() {
var queryURL = "https://api.spreaker.com/v2/search?type=shows&q=crypto";
$.ajax({
url: queryURL,
method: "GET",
}).then(function (response) {
podcastResponse = response.response.items.slice(0, 5);
// console.log(response);
// console.log(podcastResponse)
darkMode();
});
}
podcast();
// Podcast Carousel Options
$(".carousel").carousel({
fullWidth: true,
dist: 0,
indicators: true,
onCycleTo: function (ele) {
carouselIndex = $(ele).index();
// console.log(carouselIndex)
},
});
// Podcast widget load (doesnt work without window.onload)
window.onload = function () {
podPlayer = SP.getWidget("podPlayer");
podPlayer.iframe.src =
"https://widget.spreaker.com/player?show_id=1242925&theme=" +
savedTheme +
"&playlist=show&playlist-continuous=true&playlist-loop=false&playlist-autoupdate=true&autoplay=false&live-autoplay=false&chapters-image=true&episode_image_position=right&hide-likes=false&hide-comments=false&hide-sharing=false&hide-logo=false&hide-download=true&hide-episode-description=false&hide-playlist-images=false&hide-playlist-descriptions=false&gdpr-consent=null";
};
// Podcast doubleclick function
$(".carousel-item").dblclick(podcastUpdate);
// Podcast update function
function podcastUpdate() {
podShow = podcastResponse[carouselIndex].show_id;
podImage = podcastResponse[carouselIndex].image_url;
podPlayer.iframe.src =
"https://widget.spreaker.com/player?show_id=" +
podShow +
"&theme=" +
savedTheme +
"&playlist=show&chapters-image=true";
// "&cover_image_url=" + podImage;
}
});