-
Notifications
You must be signed in to change notification settings - Fork 0
/
twitch-top.js
87 lines (82 loc) · 1.6 KB
/
twitch-top.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
var url = '/twitch/api2.php';
var chart;
renderLoading(true);
// Create initial graph
$.get(url, function(json) {
chart = c3.generate({
data: {
x: 'date',
xFormat: '%Y-%m-%d %H:%M:%S',
json: json.top,
keys: {
x: 'date',
value: json.games,
}
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%H:%M:%S',
}
},
y: {
label: 'Viewers',
}
},
point: {
show: false,
},
grid: {
x: {
show: true,
},
y: {
show: true,
}
},
tooltip: {
format: {
value: d3.format(','),
}
},
onresize: function() {
chart.resize({
height: resizeChart()
});
}
});
renderLoading(false);
});
// Load new graph data every 10 minutes
const SECOND = 1000;
const MINUTE = 60 * SECOND;
setInterval(function() {
$.get(url, function(json) {
console.log(json.top);
chart.load({
x: 'date',
xFormat: '%Y-%m-%d %H:%M:%S',
json: json.top,
keys: {
x: 'date',
value: json.games,
}
});
});
}, 10 * MINUTE);
// Hide or display the loading message
function renderLoading(isLoading) {
if (isLoading) {
$('#loading').show();
} else {
$('#loading').hide();
}
}
// Set the height of the C3 chart to fit browser window
function resizeChart() {
var chartHeight = window.innerHeight - document.getElementById('header').offsetHeight - 3;
document.getElementById('chart').setAttribute("style","height:" + chartHeight + "px");
return chartHeight;
}
resizeChart();