review-automation-server/user/templates/location-wise-reviews.html

{% extends 'user-base.html' %}

{% block content %}

<canvas class="my-4" id="myChart" width="900" height="300"></canvas>
<!--<div class="row">-->
<!--  <canvas class="my-4" id="googleLineChart" width="900" height="300"></canvas>-->
<!--  <canvas class="my-4" id="googlePieChart" width="900" height="300"></canvas>-->
<!--</div>-->

<div style="display: flex">
    <div id="bar-chart-container" style="position: relative; width: 70%;">
      <canvas id="googleLineChart" width="900" height="300"></canvas>
    </div>
    <div id="pie-chart-container" style="position: relative; width: 30%;">
      <canvas id="googlePieChart" width="200" height="150"></canvas>
    </div>
</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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>

<script>
  var ctx = document.getElementById("myChart");
  var google_line_ctx = document.getElementById("googleLineChart");
  var google_pie_ctx = document.getElementById("googlePieChart");
  var location_id = document.getElementById("location_id").value;
  console.log(location_id.value)
  var endpoint = '/user/api/analytics/all-platform';
  params = {
      "location_id":location_id.trim()
  }
  console.log(params)
  $.ajax({
        type: "get",
        url: endpoint,
        data: params,
        dataType: 'json',
        success: function(data) {
        console.log(data)

        // All data together in a bar chart..
          var myBarChart = new Chart(ctx, {
          type: 'bar',
          data: {
              labels: data.google.labels,
              datasets: [
                  {
                    label: 'Google',
                    data: data.google.total_review,
                    borderColor: 'rgb(255, 204, 0)',
                    backgroundColor: 'rgb(255, 204, 0)',
                    borderWidth: 1,
                    fill: false
                },
                {
                    label: 'Facebook',
                    data: data.facebook.total_review,
                    borderColor: 'rgb(0, 51, 204)',
                    backgroundColor: 'rgb(0, 51, 204)',
                    borderWidth: 1,
                    fill: false
                },
                {
                    label: 'Yelp',
                    data: data.yelp.total_review,
                    borderColor: 'rgb(204, 51, 0)',
                    backgroundColor: 'rgb(204, 51, 0)',
                    borderWidth: 1,
                    fill: false
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }],
                    xAxes: [{
                        gridLines: {
                            drawOnChartArea:false
                        }
                    }]
                },
                title: {
                    display: true,
                    fontSize: 16,
                    text: "Review of this month in all platforms."
                }
            }
        });

        // Google review charts
        // Google line chart
        var myGoogleLineChart = new Chart(google_line_ctx, {
          type: 'line',
          data: {
              labels: data.google.labels,
              datasets: [
                  {
                    label: '1*',
                    data: data.google.star_rating[0],
                    borderColor: 'rgb(255, 204, 0)',
                    backgroundColor: 'rgb(255, 204, 0)',
                    borderWidth: 1,
                    lineTension: 0,
                    fill: false
                },
                {
                    label: '2*',
                    data: data.google.star_rating[1],
                    borderColor: 'rgb(0, 51, 204)',
                    backgroundColor: 'rgb(0, 51, 204)',
                    borderWidth: 1,
                    lineTension: 0,
                    fill: false
                },
                {
                    label: '3*',
                    data: data.google.star_rating[2],
                    borderColor: 'rgb(204, 51, 0)',
                    backgroundColor: 'rgb(204, 51, 0)',
                    borderWidth: 1,
                    lineTension: 0,
                    fill: false
                },
                {
                    label: '4*',
                    data: data.google.star_rating[3],
                    borderColor: 'rgb(0, 51, 204)',
                    backgroundColor: 'rgb(0, 51, 204)',
                    borderWidth: 1,
                    lineTension: 0,
                    fill: false
                },
                {
                    label: '5*',
                    data: data.google.star_rating[4],
                    borderColor: 'rgb(204, 51, 0)',
                    backgroundColor: 'rgb(204, 51, 0)',
                    borderWidth: 1,
                    lineTension: 0,
                    fill: false,

                }]
            },
            options: {
                borderJoinStyle: "bevel",
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }],
                    xAxes: [{
                        gridLines: {
                            drawOnChartArea:false
                        }
                    }]
                },
                title: {
                    display: true,
                    fontSize: 16,
                    text: "Monthly review in Google."
                }
            }
        });

        // Google pie chart
        var myGooglePieChart = new Chart(google_pie_ctx, {
          type: 'pie',
          data: {
              labels: data.google.curr_month.label,
              datasets: [
                  {
                    data: data.google.curr_month.total,
                    backgroundColor: [
                        'rgb(255, 99, 132)',
                        'rgb(255, 159, 64)',
                        'rgb(153, 102, 255)',
                        'rgb(54, 162, 235)',
                        'rgb(75, 192, 192)'
                    ]
                }]
            },
            options: {
              title: {
                display: true,
                fontSize: 16,
                text: 'This is google reviews'
              }
            }
        });
    },

    error: function(error_data) {
       console.log(error_data);
    }
  });
</script>

{% endblock content %}