JPLTedCas commited on
Commit
df81100
·
verified ·
1 Parent(s): 8192462

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +80 -20
index.html CHANGED
@@ -193,26 +193,86 @@
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: { labels: cityNames, datasets: [{ label: 'Remote Connections', data: connectionsData, backgroundColor: categoryColorsData }] }
208
- });
209
-
210
- var ctx2 = document.getElementById('supportTimeChart').getContext('2d');
211
- chart2 = new Chart(ctx2, {
212
- type: 'bar',
213
- data: { labels: cityNames, datasets: [{ label: 'Average Monthly Support Time (hrs)', data: avgSupportTimeData, backgroundColor: categoryColorsData }] }
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>