-
Notifications
You must be signed in to change notification settings - Fork 0
/
commuterPieGraph.html
127 lines (116 loc) · 3.08 KB
/
commuterPieGraph.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
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var yearlyChart = new CanvasJS.Chart("yearlyChartContainer", {
animationEnabled: true,
title: {
text: "Yearly Commuter Trends"
},
data: [{
type: "pie",
startAngle: 240,
yValueFormatString: "##0.00\"%\"",
indexLabel: "{label} {number}",
dataPoints: [
{y: 61.57, label: "Monthly Users", number: 81304},
{y: 31.22, label: "Walk-Up Users", number: 41224},
{y: 7.21, label: "Flex Pass Users", number: 9517},
]
}]
});
var winterChart = new CanvasJS.Chart("winterChartContainer", {
animationEnabled: true,
title: {
text: "Winter Commuter Trends"
},
data: [{
type: "pie",
startAngle: 240,
yValueFormatString: "##0.00\"%\"",
indexLabel: "{label} {number}",
dataPoints: [
{y: 62.49, label: "Monthly Users", number: 19732},
{y: 31.06, label: "Walk-Up Users", number: 9809},
{y: 6.43, label: "Flex Pass Users", number: 2032},
]
}]
});
var springChart = new CanvasJS.Chart("springChartContainer", {
animationEnabled: true,
title: {
text: "Spring Commuter Trends"
},
data: [{
type: "pie",
startAngle: 240,
yValueFormatString: "##0.00\"%\"",
indexLabel: "{label} {number}",
dataPoints: [
{y: 59.57, label: "Monthly Users", number: 3016},
{y: 32.37, label: "Walk-Up Users", number: 1639},
{y: 8.06, label: "Flex Pass Users", number: 408},
]
}]
});
var summerChart = new CanvasJS.Chart("summerChartContainer", {
animationEnabled: true,
title: {
text: "Summer Commuter Trends"
},
data: [{
type: "pie",
startAngle: 240,
yValueFormatString: "##0.00\"%\"",
indexLabel: "{label} {number}",
dataPoints: [
{y: 60.45, label: "Monthly Users", number: 30606},
{y: 31.35, label: "Walk-Up Users", number: 15877},
{y: 8.19, label: "Flex Pass Users", number: 4146},
]
}]
});
var fallChart = new CanvasJS.Chart("fallChartContainer", {
animationEnabled: true,
title: {
text: "Fall Commuter Trends"
},
data: [{
type: "pie",
startAngle: 240,
yValueFormatString: "##0.00\"%\"",
indexLabel: "{label} {number}",
dataPoints: [
{y: 62.42, label: "Monthly Users", number: 27950},
{y: 31.03, label: "Walk-Up Users", number: 13899},
{y: 6.55, label: "Flex Pass Users", number: 2931},
]
}]
});
yearlyChart.render();
winterChart.render();
springChart.render();
summerChart.render();
fallChart.render();
}
</script>
</head>
<body style = "background: #00c4a7">
<nav class="navbar is-transparent">
<div id="navbarExampleTransparentExample" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" href="data_visualizations.html">
￩ Back
</a>
</div>
</div>
</nav>
<div id="yearlyChartContainer" style="height: 300px; width: 100%;"></div>
<div id="winterChartContainer" style="height: 300px; width: 100%;"></div>
<div id="springChartContainer" style="height: 300px; width: 100%;"></div>
<div id="summerChartContainer" style="height: 300px; width: 100%;"></div>
<div id="fallChartContainer" style="height: 300px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>