testing chart plain vanilla

app/assets/javascripts/show.js

@@ -0,0 +1,24 @@
+(function (window) {
+
+    const ctx = document.getElementById('myChart');
+
+    new Chart(ctx, {
+        type: 'bar',
+        data: {
+        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
+        datasets: [{
+            label: '# of Votes',
+            data: [12, 19, 3, 5, 2, 3],
+            borderWidth: 1
+        }]
+        },
+        options: {
+        scales: {
+            y: {
+            beginAtZero: true
+            }
+        }
+        }
+    });
+
+})(window);

app/templates/admin_template.html

@@ -24,6 +24,7 @@
     <meta property="og:image" content="{{ asset_url('images/notify-og-image.png') }}">
   {% endblock %}
   <script type="text/javascript" src="{{ asset_url('js/gtm_head.js') }}"></script>
+  <script type="text/javascript" src="{{ asset_url('js/chart.js') }}"></script>
 {% endblock %}
 
 {% block pageTitle %}
@@ -291,10 +292,12 @@
 
 {% block bodyEnd %}
   {% block extra_javascripts %}
+
   {% endblock %}
   <!--[if gt IE 8]><!-->
   <script type="text/javascript" src="{{ asset_url('javascripts/all.js') }}"></script>
   <script type="text/javascript" src="{{ asset_url('js/uswds.min.js') }}"></script>
+
   <!--<![endif]-->
 
 {% endblock %}

app/templates/views/dashboard/dashboard.html

@@ -21,6 +21,7 @@
     <h2 class="font-body-2xl line-height-sans-2 margin-0">
       Messages sent
     </h2>
+    <canvas id="myChart" width="900" height="400"></canvas>
 
     {{ ajax_block(partials, updates_url, 'inbox') }}
 

gulpfile.js

@@ -56,6 +56,10 @@ const copy = {
   gtm: () => {
     return src(paths.src + 'js/gtm_head.js')
       .pipe(dest(paths.dist + 'js/'));
+  },
+  chart: () => {
+    return src(paths.src + 'js/chart.js')
+      .pipe(dest(paths.dist + 'js/'));
   }
 };
 
@@ -125,6 +129,7 @@ const javascripts = () => {
     paths.src + 'javascripts/date.js',
     paths.src + 'javascripts/loginAlert.js',
     paths.src + 'javascripts/main.js',
+    paths.src + 'javascripts/show.js',
   ])
     .pipe(plugins.prettyerror())
     .pipe(plugins.babel({
@@ -200,7 +205,8 @@ const defaultTask = parallel(
     ),
     uswds.compile,
     uswds.copyAssets,
-    copy.gtm
+    copy.gtm,
+    copy.chart
   )
 );