9 - Using Ajax to Render Charts

Author: codingforentrepreneurs

src/analytics/templates/analytics/sales.html

@@ -4,29 +4,63 @@
 {% block javascript %}
 
 <script>
-var ctx = document.getElementById("myChart").getContext('2d');
-var myChart = new Chart(ctx, {
-    type: 'line',
-    data: {
-        labels: ["Monday", "Tues", "Wed", "Thurs", "Friday", "Sat", "Sun"],
-        datasets: [{
-            label: 'Sales Per Day',
-            data: [12, 19, 3, 5, 2, 3, 49],
-           backgroundColor: 'rgba(0, 158, 29, 0.45)',
-            borderColor:'rgba(0, 158, 29, 1)',
-        }]
-    },
-    options: {
-        scales: {
-            yAxes: [{
-                ticks: {
-                    beginAtZero:true
+
+$(document).ready(function(){
+    function renderChart(id, data, labels){
+        // var ctx = document.getElementById("myChart").getContext('2d');
+        var ctx = $('#' + id)
+            var myChart = new Chart(ctx, {
+                type: 'line',
+                data: {
+                    labels: labels,
+                    datasets: [{
+                        label: 'Sales',
+                        data: data,
+                       backgroundColor: 'rgba(0, 158, 29, 0.45)',
+                        borderColor:'rgba(0, 158, 29, 1)',
+                    }]
+                },
+                options: {
+                    scales: {
+                        yAxes: [{
+                            ticks: {
+                                beginAtZero:true
+                            }
+                        }]
+                    },
+                    backgroundColor: 'rgba(75, 192, 192, 1)'
                 }
-            }]
-        },
-        backgroundColor: 'rgba(75, 192, 192, 1)'
+            });
+    }
+
+    function getSalesData(id, type){
+        var url = '/analytics/sales/data/'
+        var method = 'GET'
+        var data = {"type": type}
+        $.ajax({
+            url: url,
+            method: method,
+            data: data,
+            success: function(responseData){
+                renderChart(id, responseData.data, responseData.labels)
+            }, error: function(error){
+                $.alert("An error occurred")
+            }
+        })
     }
-});
+    var chartsToRender = $('.cfe-render-chart')
+    $.each(chartsToRender, function(index, html){
+        var $this = $(this)
+        if ( $this.attr('id') && $this.attr('data-type')){
+            getSalesData($this.attr('id'), $this.attr('data-type'))
+        }
+        
+    })
+    
+})
+
+
+
 </script>
 {% endblock %}
 
@@ -69,7 +103,7 @@ <h3>This week's sales</h3>
     </div>
 
     <div class='col'>
-       <canvas id="myChart" width="400" height="400"></canvas>
+       <canvas class='cfe-render-chart' id="thisWeekSales" data-type='week' width="400" height="400"></canvas>
     </div>
 </div>
 
@@ -83,13 +117,12 @@ <h1>Previous 4 weeks</h1>
     </div>
     <div class='col'>
         <p>Orders Total: ${{ last_four_weeks.recent_data.total__sum }}</p>
-    </div>
-    <div class='col'>
-        <p>Shipped Total: {% if last_four_weeks.shipped_data.total__sum %}
-            ${{ last_four_weeks.shipped_data.total__sum }} {% endif %}</p>
-    </div>
-    <div class='col'>
+        <p>Shipped Total: {% if last_four_weeks.shipped_data.total__sum %}${{ last_four_weeks.shipped_data.total__sum }} {% endif %}</p>
         <p>Paid Totals: ${{ last_four_weeks.paid_data.total__sum }}</p>
+
+    </div>
+     <div class='col'>
+       <canvas class='cfe-render-chart' id="fourWeekSales" data-type='4weeks' width="400" height="400"></canvas>
     </div>
 </div>
 

src/analytics/views.py

@@ -1,15 +1,30 @@
 import datetime
 from django.contrib.auth.mixins import LoginRequiredMixin
 from django.db.models import Count, Sum, Avg
-from django.http import HttpResponse
-from django.views.generic import TemplateView
+from django.http import HttpResponse, JsonResponse
+from django.views.generic import TemplateView, View
 from django.shortcuts import render
 
 from django.utils import  timezone
 
 
 from orders.models import Order
 
+class SalesAjaxView(View):
+    def get(self, request, *args, **kwargs):
+        data = {}
+        print(request.user)
+        if request.user.is_staff:
+            if request.GET.get('type') == 'week':
+                data['labels'] = ["Mon", "Tues", "Weds", "Thurs", "Fri","Sat", "Sun"]
+                data['data'] = [123, 131, 232, 12, 323,313, 3193]
+            if request.GET.get('type') == '4weeks':
+                data['labels'] = ["Last Week", "Two Weeks Ago", "Three Weeks Ago", "Four Weeks Ago"]
+                data['data'] = [123, 131, 343, 13231]
+        return JsonResponse(data)
+
+
+
 class SalesView(LoginRequiredMixin, TemplateView):
     template_name = 'analytics/sales.html'
 

src/ecommerce/urls.py

@@ -31,7 +31,7 @@
     checkout_address_create_view, 
     checkout_address_reuse_view
     )
-from analytics.views import SalesView
+from analytics.views import SalesView, SalesAjaxView
 from billing.views import payment_method_view, payment_method_createview
 from carts.views import cart_detail_api_view
 from marketing.views import MarketingPreferenceUpdateView, MailchimpWebhookView
@@ -51,6 +51,7 @@
     url(r'^addresses/create/$', AddressCreateView.as_view(), name='address-create'),
     url(r'^addresses/(?P<pk>\d+)/$', AddressUpdateView.as_view(), name='address-update'),
     url(r'^analytics/sales/$', SalesView.as_view(), name='sales-analytics'),
+    url(r'^analytics/sales/data/$', SalesAjaxView.as_view(), name='sales-analytics-data'),
     url(r'^contact/$', contact_page, name='contact'),
     url(r'^login/$', LoginView.as_view(), name='login'),
     url(r'^checkout/address/create/$', checkout_address_create_view, name='checkout_address_create'),