12 - Inline Js to External

Author: codingforentrepreneurs

src/analytics/templates/analytics/sales.html

@@ -1,71 +1,6 @@
 {% extends "base.html" %}
 
 
-{% block javascript %}
-
-<script>
-
-$(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)'
-                }
-            });
-    }
-
-    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 %}
-
-
-
 {% block content %}
 
 

src/static_my_proj/js/ecommerce.sales.js

@@ -0,0 +1,54 @@
+
+$(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)'
+                }
+            });
+    }
+
+    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'))
+        }
+        
+    })
+    
+})

src/templates/base/js.html

@@ -24,6 +24,9 @@
 <!-- Django Secure AJAX JS -->
 <script src='{% static "js/csrf.ajax.js" %}'></script>
 
+<!-- eCommerce Sales Data JS -->
+<script src='{% static "js/ecommerce.sales.js" %}'></script>
+
 <!-- eCommerce Custom JS -->
 <script src='{% static "js/ecommerce.js" %}'></script>