Begin implementing charts

core/templates/ui/drilldown.html

@@ -1,7 +1,8 @@
 {% extends "base.html" %}
 {% load static %}
 {% block content %}
-
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
   <div class="box">
     <form method="POST">
       {% csrf_token %}
@@ -139,6 +140,41 @@
         </div>
       </div>
     </div>
+
+    <div class="columns">
+      <div class="column is-half">
+        <div class="box">
+          <label class="label">Volume</label>
+          <canvas id="volumeChart"></canvas>
+          
+          <script type="text/javascript">
+            $.post('{% url "chart_volume_json" %}', { name: "John", time: "2pm" }, function(data) {
+                var ctx = $("#volumeChart").get(0).getContext("2d");
+                new Chart(ctx, {
+                  type: 'line', data: data
+                });
+            });
+          </script>
+          
+        </div>
+      </div>
+      <div class="column">
+        <div class="box">
+          <label class="label">Sentiment</label>
+          <canvas id="sentimentChart"></canvas>
+          <script type="text/javascript">
+            $.post('{% url "chart_sentiment_json" %}', { name: "John", time: "2pm" }, function(data) {
+                var ctx = $("#sentimentChart").get(0).getContext("2d");
+                new Chart(ctx, {
+                  type: 'line', data: data
+                });
+            });
+          </script>
+          
+        </div>
+      </div>
+    </div>
+
   {% endif %}
 
 {% endblock %}