|
@@ -0,0 +1,261 @@
|
|
|
|
+<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://127.0.0.1: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>
|