Update index.html
Browse files- index.html +80 -20
index.html
CHANGED
@@ -193,26 +193,86 @@
|
|
193 |
}
|
194 |
|
195 |
function updateCharts(filteredLocations) {
|
196 |
-
|
197 |
-
|
198 |
-
|
199 |
-
|
200 |
-
|
201 |
-
|
202 |
-
|
203 |
-
|
204 |
-
|
205 |
-
|
206 |
-
|
207 |
-
|
208 |
-
|
209 |
-
|
210 |
-
|
211 |
-
|
212 |
-
|
213 |
-
|
214 |
-
|
215 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
216 |
|
217 |
updateMarkers();
|
218 |
</script>
|
|
|
193 |
}
|
194 |
|
195 |
function updateCharts(filteredLocations) {
|
196 |
+
var cityNames = filteredLocations.map(location => location.name);
|
197 |
+
var connectionsData = filteredLocations.map(location => location.connections);
|
198 |
+
var avgSupportTimeData = filteredLocations.map(location => location.avgSupportTime);
|
199 |
+
var categoryColorsData = filteredLocations.map(location => categoryColors[location.category]);
|
200 |
+
|
201 |
+
if (chart1) chart1.destroy();
|
202 |
+
if (chart2) chart2.destroy();
|
203 |
+
|
204 |
+
var ctx1 = document.getElementById('connectionsChart').getContext('2d');
|
205 |
+
chart1 = new Chart(ctx1, {
|
206 |
+
type: 'bar',
|
207 |
+
data: {
|
208 |
+
labels: cityNames,
|
209 |
+
datasets: [{
|
210 |
+
label: 'Remote Connections',
|
211 |
+
data: connectionsData,
|
212 |
+
backgroundColor: categoryColorsData,
|
213 |
+
borderColor: '#333',
|
214 |
+
borderWidth: 1,
|
215 |
+
borderRadius: 5,
|
216 |
+
hoverBackgroundColor: 'rgba(0, 0, 0, 0.2)'
|
217 |
+
}]
|
218 |
+
},
|
219 |
+
options: {
|
220 |
+
plugins: {
|
221 |
+
legend: { display: false }
|
222 |
+
},
|
223 |
+
scales: {
|
224 |
+
x: {
|
225 |
+
ticks: { color: '#333' },
|
226 |
+
grid: { display: false }
|
227 |
+
},
|
228 |
+
y: {
|
229 |
+
ticks: { color: '#333' },
|
230 |
+
grid: { color: 'rgba(0,0,0,0.1)' }
|
231 |
+
}
|
232 |
+
},
|
233 |
+
animation: {
|
234 |
+
duration: 1000,
|
235 |
+
easing: 'easeInOutBounce'
|
236 |
+
}
|
237 |
+
}
|
238 |
+
});
|
239 |
+
|
240 |
+
var ctx2 = document.getElementById('supportTimeChart').getContext('2d');
|
241 |
+
chart2 = new Chart(ctx2, {
|
242 |
+
type: 'bar',
|
243 |
+
data: {
|
244 |
+
labels: cityNames,
|
245 |
+
datasets: [{
|
246 |
+
label: 'Average Monthly Support Time (hrs)',
|
247 |
+
data: avgSupportTimeData,
|
248 |
+
backgroundColor: categoryColorsData,
|
249 |
+
borderColor: '#333',
|
250 |
+
borderWidth: 1,
|
251 |
+
borderRadius: 5,
|
252 |
+
hoverBackgroundColor: 'rgba(0, 0, 0, 0.2)'
|
253 |
+
}]
|
254 |
+
},
|
255 |
+
options: {
|
256 |
+
plugins: {
|
257 |
+
legend: { display: false }
|
258 |
+
},
|
259 |
+
scales: {
|
260 |
+
x: {
|
261 |
+
ticks: { color: '#333' },
|
262 |
+
grid: { display: false }
|
263 |
+
},
|
264 |
+
y: {
|
265 |
+
ticks: { color: '#333' },
|
266 |
+
grid: { color: 'rgba(0,0,0,0.1)' }
|
267 |
+
}
|
268 |
+
},
|
269 |
+
animation: {
|
270 |
+
duration: 1000,
|
271 |
+
easing: 'easeInOutBounce'
|
272 |
+
}
|
273 |
+
}
|
274 |
+
});
|
275 |
+
}
|
276 |
|
277 |
updateMarkers();
|
278 |
</script>
|