diff --git a/frontend/frontend.js b/frontend/frontend.js
index 2ef2926..0104c39 100644
--- a/frontend/frontend.js
+++ b/frontend/frontend.js
@@ -1,4 +1,9 @@
-$('#update').click(updateData);
+var globalObject;
+$('#update').click(function () {
+  updateData(globalObject);
+  fillTable(globalObject, $('table'));
+  graphSpectralData(globalObject, $('#spectrogram'));
+});
 // jQuery event binder
 
 function updateData (obj) {
@@ -10,10 +15,24 @@ function updateData (obj) {
   });
 }
 
-function applyData (obj, dom) {
+function fillTable (obj, dom) {
   // applies data in obj[0] to HTML tags with the obj's key as ID.
   // useful mostly for slapping spectrometer JSON into HTML tables.
   for (var i in obj[0]) {
     $(dom).find('#' + i).text(obj[0][i]);
   }
 }
+
+function graphSpectralData(obj, dom) {
+  // graphs the data from obj[0] into canvas at dom
+  var chart = new Chart(dom, {
+    type: 'line',
+    data: {
+      labels: obj[0].keys(),
+      datasets: [{
+        label: 'Spectrometer data',
+        data: obj[0].values()
+      }]
+    }
+  });
+}
diff --git a/frontend/index.html b/frontend/index.html
index e3c1fff..702cbc4 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -120,6 +120,7 @@
   </div>
   <script src="lib/bootstrap.bundle.min.js"></script>
   <script src="lib/jquery-3.3.1.min.js"></script>
+  <script src="lib/chart.bundle.js"></script>
   <script src="frontend.js"></script>
 </body>