review-automation-server/manager/templates/_positive_review_graph.html

<div class="container-fluid">
  <canvas id="myPosChart" width="960" height="320"></canvas>
  <canvas id="myNegChart" width="960" height="120"></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>

<script>
  var ctx = document.getElementById("myPosChart");
  var neg_ctx = document.getElementById("myNegChart");
  var endpoint = 'http://178.128.152.51:8000/managers/graphs/review-analysis';
  $.ajax({
        type: "get",
        url: endpoint,
        dataType: 'json',
        success: function(data) {
          var myBarChart = new Chart(ctx, {
          type: 'bar',
          data: {
              labels: data.labels,
              datasets: [
                  {
                    label: data.weeks[0],
                    data: data.pos_data[0],
                    borderColor: 'rgb(24, 106, 59)',
                    backgroundColor: 'rgb(24, 106, 59)',
                    borderWidth: 1,
                    fill: false
                },
                {
                    label: data.weeks[1],
                    data: data.pos_data[1],
                    borderColor: 'rgb(25, 111, 61)',
                    backgroundColor: 'rgb(25, 111, 61)',
                    borderWidth: 1,
                    fill: false
                },
                {
                    label: data.weeks[2],
                    data: data.pos_data[2],
                    borderColor: 'rgb(30, 132, 73)',
                    backgroundColor: 'rgb(30, 132, 73)',
                    borderWidth: 1,
                    fill: false
                },
                {
                    label: data.weeks[3],
                    data: data.pos_data[3],
                    borderColor: 'rgb(34, 153, 84)',
                    backgroundColor: 'rgb(34, 153, 84)',
                    borderWidth: 1,
                    fill: false
                },
                {
                    label: data.weeks[4],
                    data: data.pos_data[4],
                    borderColor: 'rgb(39, 174, 96)',
                    backgroundColor: 'rgb(39, 174, 96)',
                    borderWidth: 1,
                    fill: false
                },
                {
                    label: data.weeks[5],
                    data: data.pos_data[5],
                    borderColor: 'rgb(125, 206, 160)',
                    backgroundColor: 'rgb(125, 206, 160)',
                    borderWidth: 1,
                    fill: false
                },
                {
                    label: data.weeks[6],
                    data: data.pos_data[6],
                    borderColor: 'rgb(130, 224, 170)',
                    backgroundColor: 'rgb(130, 224, 170)',
                    borderWidth: 1,
                    fill: false
                },
                {
                    label: data.weeks[7],
                    data: data.pos_data[7],
                    borderColor: 'rgb(171, 235, 198)',
                    backgroundColor: 'rgb(171, 235, 198)',
                    borderWidth: 1,
                    fill: false
                },
                {
                    label: data.weeks[8],
                    data: data.pos_data[8],
                    borderColor: 'rgb(130, 224, 170)',
                    backgroundColor: 'rgb(130, 224, 170)',
                    borderWidth: 1,
                    fill: false
                },
                {
                    label: data.weeks[9],
                    data: data.pos_data[9],
                    borderColor: 'rgb(171, 235, 198)',
                    backgroundColor: 'rgb(171, 235, 198)',
                    borderWidth: 1,
                    fill: false
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        display: true,
                        scaleLabel: {
                          display: true,
                          fontSize: 16,
                          fontStyle: 'italic',
                          labelString: 'Total review count'
                        },
                        ticks: {
                            beginAtZero: true,
                            stepSize: 1
                        }
                    }],
                    xAxes: [{
                        display: true,
                            scaleLabel: {
                              display: true,
                              fontSize: 16,
                              fontStyle: 'italic',
                              labelString: 'Location'
                            },
                          ticks: {
                          autoSkip: false
                        },
                        gridLines: {
                            drawOnChartArea:false
                        }
                    }]
                },
                title: {
                    display: true,
                    fontSize: 16,
                    text: "Review of this month in all platforms."
                }
            }
        });

    var myNegBarChart = new Chart(neg_ctx, {
          type: 'bar',
          data: {
              labels: data.labels,
              datasets: [
                  {
                    label: data.weeks[0],
                    data: data.neg_data[0],
                    borderColor: 'rgb(117, 3, 0)',
                    backgroundColor: 'rgb(117, 3, 0)',
                    borderWidth: 1,
                    fill: false
                },
                {
                    label: data.weeks[1],
                    data: data.neg_data[1],
                    borderColor: 'rgb(164, 8, 4)',
                    backgroundColor: 'rgb(164, 8, 4)',
                    borderWidth: 1,
                    fill: false
                },
                {
                    label: data.weeks[2],
                    data: data.neg_data[2],
                    borderColor: 'rgb(178, 5, 0)',
                    backgroundColor: 'rgb(178, 5, 0)',
                    borderWidth: 1,
                    fill: false
                },
                {
                    label: data.weeks[3],
                    data: data.neg_data[3],
                    borderColor: 'rgb(220, 6, 0)',
                    backgroundColor: 'rgb(220, 6, 0)',
                    borderWidth: 1,
                    fill: false
                },
                {
                    label: data.weeks[4],
                    data: data.neg_data[4],
                    borderColor: 'rgb(216, 59, 54)',
                    backgroundColor: 'rgb(216, 59, 54)',
                    borderWidth: 1,
                    fill: false
                },
                {
                    label: data.weeks[5],
                    data: data.neg_data[5],
                    borderColor: 'rgb(241, 8, 1)',
                    backgroundColor: 'rgb(241, 8, 1)',
                    borderWidth: 1,
                    fill: false
                },
                {
                    label: data.weeks[6],
                    data: data.neg_data[6],
                    borderColor: 'rgb(233, 61, 56)',
                    backgroundColor: 'rgb(233, 61, 56)',
                    borderWidth: 1,
                    fill: false
                },
                {
                    label: data.weeks[7],
                    data: data.neg_data[7],
                    borderColor: 'rgb(232, 83, 78)',
                    backgroundColor: 'rgb(232, 83, 78)',
                    borderWidth: 1,
                    fill: false
                },
                {
                    label: data.weeks[8],
                    data: data.neg_data[8],
                    borderColor: 'rgb(235, 119, 116)',
                    backgroundColor: 'rgb(235, 119, 116)',
                    borderWidth: 1,
                    fill: false
                },
                {
                    label: data.weeks[9],
                    data: data.neg_data[9],
                    borderColor: 'rgb(255, 157, 154)',
                    backgroundColor: 'rgb(255, 157, 154)',
                    borderWidth: 1,
                    fill: false
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        display: true,
                        scaleLabel: {
                          display: true,
                          fontSize: 16,
                          fontStyle: 'italic',
                          labelString: 'Total review count'
                        },
                        ticks: {
                            beginAtZero: true,
                            stepSize: 1
                        }
                    }],
                    xAxes: [{
                        display: true,
                          ticks: {
                          autoSkip: false
                        },
                        gridLines: {
                            drawOnChartArea:false
                        }
                    }]
                },
            }
        });
    },
    error: function(error_data) {
       console.log(error_data);
    }
  });
</script>