async? async!

frontend/frontend.js

@@ -1,8 +1,6 @@
 var globalObject;
 $('#update').click(function () {
   updateData();
-  fillTable(globalObject, $('table'));
-  graphSpectralData(globalObject, $('#spectrogram'));
 });
 // jQuery event binder
 
@@ -12,7 +10,10 @@ function updateData () {
   // I understand how bad this line looks. Please don't judge me...
   $.get(url, function (data, status) { // standard jQuery AJAX
     globalObject = data;
-    console.log(data);
+  })
+    .done(function () {
+      fillTable(globalObject, $('table'));
+      graphSpectralData(globalObject, $('#spectrogram'));
     });
 }
 
@@ -29,10 +30,10 @@ function graphSpectralData(obj, dom) {
   var chart = new Chart(dom, {
     type: 'line',
     data: {
-      labels: obj[0].keys(),
+      labels: Object.keys(obj[0]),
       datasets: [{
         label: 'Spectrometer data',
-        data: obj[0].values()
+        data: Object.values(obj[0])
       }]
     }
   });

frontend/index.html

@@ -17,6 +17,7 @@
     <button id="update" class="btn btn-primary m-1 float-right">Get data</button>
     <p id="debug">
     </p>
+    <canvas id="spectrogram" width="720" height="720"></canvas>
     <table class="table table-sm">
       <thead class="thead-dark">
         <tr>