add title to the graph

analytics/templates/analytics.html

@@ -15,14 +15,12 @@
     </div>
 <br>
     <div id="bar-chart-container">
-        <h4 id="bar-chart-header" style="text-align:center" class="mt-4">Total Review in Last One Year</h4>
-        <canvas id="barChart" width="400" height="100" class="mt-2"></canvas>
+<!--        <canvas id="barChart" width="400" height="150" class="mt-2"></canvas>-->
     </div>
 <br>
 <br>
     <div id="line-chart-container">
-        <h4 style="text-align:center" class="mt-4">Total Star ratings in Last One Year</h4>
-        <canvas id="lineChart" width="400" height="100" class="mt-4"></canvas>
+<!--        <canvas id="lineChart" width="400" height="150" class="mt-4"></canvas>-->
     </div>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js" integrity="sha256-TQq84xX6vkwR0Qs1qH5ADkP+MvH0W+9E7TdHJsoIQiM=" crossorigin="anonymous"></script>
@@ -34,10 +32,10 @@
          $('#applyBtn').click();
 
          $("#location").on("change", function(){
-            $('#applyBtn').click();
+             $('#applyBtn').click();
          });
          $("#timeInterval").on("change", function(){
-            $('#applyBtn').click();
+             $('#applyBtn').click();
 
          });
      });

analytics/templates/charts.html

@@ -3,6 +3,7 @@
     {% block jquery %}
     var location_id = document.getElementById("location").value;
     var time_interval = document.getElementById("timeInterval").value;
+
     var endpoint = '/analytics/analytic-data';
     params = {
         "location_id": location_id,
@@ -14,15 +15,16 @@
         data: params,
         dataType: 'json',
         success: function(data) {
-
             $('#barChart').remove();
-            $('#bar-chart-container').append('<canvas id="barChart" width="400" height="100" class="mt-2"></canvas>');
+            $('#bar-chart-container').append('<canvas id="barChart" width="400" height="120" class="mt-2"></canvas>');
 
             $('#lineChart').remove();
-            $('#line-chart-container').append('<canvas id="lineChart" width="400" height="100" class="mt-2"></canvas>');
+            $('#line-chart-container').append('<canvas id="lineChart" width="400" height="120" class="mt-2"></canvas>');
 
             var ctx = document.getElementById('lineChart').getContext('2d');
             var ctxBar = document.getElementById('barChart').getContext('2d');
+            var location_sel = document.getElementById("location")
+            var location_name = location_sel.options[location_sel.selectedIndex].text;
             var myLineChart = new Chart(ctx, {
                 type: 'line',
                 data: {
@@ -34,6 +36,8 @@
                         borderColor: 'rgb(75, 192, 192)',
                         backgroundColor: 'rgb(75, 192, 192)',
                         borderWidth: 3,
+                        pointRadius: 3,
+                        pointStyle: 'rect',
                         fill: false
                     },
                     {
@@ -42,6 +46,7 @@
                         borderColor: 'rgb(54, 162, 235)',
                         backgroundColor: 'rgb(54, 162, 235)',
                         borderWidth: 3,
+                        pointRadius: 2,
                         fill: false
                     },
                     {
@@ -50,6 +55,7 @@
                         borderColor: 'rgb(153, 102, 255)',
                         backgroundColor: 'rgb(153, 102, 255)',
                         borderWidth: 3,
+                        pointRadius: 2,
                         fill: false
                     },
                     {
@@ -58,6 +64,8 @@
                         borderColor: 'rgb(255, 159, 64)',
                         backgroundColor: 'rgb(255, 159, 64)',
                         borderWidth: 3,
+                        pointRadius: 3,
+                        pointStyle: 'rectRot',
                         fill: false
                     },
                     {
@@ -66,6 +74,8 @@
                         borderColor: 'rgb(255, 99, 132)',
                         backgroundColor: 'rgb(255, 99, 132)',
                         borderWidth: 3,
+                        pointRadius: 3,
+                        pointStyle: 'rect',
                         fill: false
                     },
                 ]
@@ -82,6 +92,11 @@
                                 beginAtZero: true
                             }
                         }]
+                    },
+                    title: {
+                        display: true,
+                        fontSize: 20,
+                        text: 'Total Star Rating  - ' + location_name
                     }
                 }
             });
@@ -111,6 +126,11 @@
                                 drawOnChartArea:false
                             }
                         }]
+                    },
+                    title: {
+                        display: true,
+                        fontSize: 20,
+                        text: 'Total Review  - ' + location_name
                     }
                 }
             });

dashboard/templates/dashboard.html

@@ -14,15 +14,16 @@
             <span style="color: #a41515; float: right">{% for star in "x"|ljust:review.star_rating %} &#9733; {% endfor %}</span>
         </div>
         {% if review.comment %}
-            <a class="article-link" href="{% url 'predict' review.review_id %}" style="text-decoration: none; color: #232a31">
-                <p class="article-content">{{ review.comment }}</p>
-            </a>
+<!--            <a class="article-link" href="{% url 'predict' review.review_id %}" style="text-decoration: none; color: #232a31">-->
+                <p class="article-content" onclick="">{{ review.comment }}</p>
+<!--            </a>-->
         {% endif %}
         <form method="post" class="form" action="{% url 'un-replied-review' %}">
             {% csrf_token %}
                 {{ form|crispy }}
             <input type="hidden" value="{{ review.review_id }}" name="review_id">
             <input class="btn btn-primary ml-2" style="float: right" type="submit", value="Submit"/>
+            <a href="{% url 'predict' review.review_id %}" class="btn btn-info">Analyze</a>
         </form>
         </div>