|
@@ -25,14 +25,14 @@
|
|
|
<canvas id="facebookPieChart" width="200" height="150"></canvas>
|
|
|
</div>
|
|
|
</div>
|
|
|
-<!-- <div class="graph-card graph-card-shadow graph-container">-->
|
|
|
-<!-- <div style="position: relative; width: 70%;">-->
|
|
|
-<!-- <canvas id="yelpLineChart" width="900" height="300"></canvas>-->
|
|
|
-<!-- </div>-->
|
|
|
-<!-- <div style="position: relative; width: 30%;">-->
|
|
|
-<!-- <canvas id="yelpPieChart" width="200" height="150"></canvas>-->
|
|
|
-<!-- </div>-->
|
|
|
-<!-- </div>-->
|
|
|
+ <div class="graph-card graph-card-shadow graph-container">
|
|
|
+ <div style="position: relative; width: 70%;">
|
|
|
+ <canvas id="yelpLineChart" width="900" height="300"></canvas>
|
|
|
+ </div>
|
|
|
+ <div style="position: relative; width: 30%;">
|
|
|
+ <canvas id="yelpPieChart" 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>
|
|
@@ -44,6 +44,8 @@
|
|
|
var google_pie_ctx = document.getElementById("googlePieChart");
|
|
|
var facebook_line_ctx = document.getElementById("facebookLineChart");
|
|
|
var facebook_pie_ctx = document.getElementById("facebookPieChart");
|
|
|
+ var yelp_line_ctx = document.getElementById("yelpLineChart");
|
|
|
+ var yelp_pie_ctx = document.getElementById("yelpPieChart");
|
|
|
var location_id = document.getElementById("location_id").value;
|
|
|
console.log(location_id)
|
|
|
var endpoint = '/user/api/analytics/all-platform';
|
|
@@ -80,6 +82,14 @@
|
|
|
backgroundColor: 'rgb(0, 51, 204)',
|
|
|
borderWidth: 1,
|
|
|
fill: false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: 'Yelp',
|
|
|
+ data: data.yelp.total_review,
|
|
|
+ borderColor: 'rgb(255, 51, 51)',
|
|
|
+ backgroundColor: 'rgb(204, 0, 0)',
|
|
|
+ borderWidth: 1,
|
|
|
+ fill: false
|
|
|
}]
|
|
|
},
|
|
|
options: {
|
|
@@ -205,6 +215,118 @@
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ // Yelp review charts
|
|
|
+ // Yelp line chart
|
|
|
+ var myYelpLineChart = new Chart(yelp_line_ctx, {
|
|
|
+ type: 'line',
|
|
|
+ data: {
|
|
|
+ labels: data.yelp.labels,
|
|
|
+ datasets: [
|
|
|
+ {
|
|
|
+ label: '1*',
|
|
|
+ data: data.yelp.star_rating[0],
|
|
|
+ borderColor: 'rgb(204, 0, 17)',
|
|
|
+ backgroundColor: 'rgb(204, 0, 17)',
|
|
|
+ borderWidth: 1,
|
|
|
+ lineTension: 0,
|
|
|
+ fill: false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '2*',
|
|
|
+ data: data.yelp.star_rating[1],
|
|
|
+ borderColor: 'rgb(255, 119, 0)',
|
|
|
+ backgroundColor: 'rgb(255, 119, 0)',
|
|
|
+ borderWidth: 1,
|
|
|
+ lineTension: 0,
|
|
|
+ fill: false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '3*',
|
|
|
+ data: data.yelp.star_rating[2],
|
|
|
+ borderColor: 'rgb(219, 208, 0)',
|
|
|
+ backgroundColor: 'rgb(219, 208, 0)',
|
|
|
+ borderWidth: 1,
|
|
|
+ lineTension: 0,
|
|
|
+ fill: false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '4*',
|
|
|
+ data: data.yelp.star_rating[3],
|
|
|
+ borderColor: 'rgb(0, 157, 166)',
|
|
|
+ backgroundColor: 'rgb(0, 157, 166)',
|
|
|
+ borderWidth: 1,
|
|
|
+ lineTension: 0,
|
|
|
+ fill: false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '5*',
|
|
|
+ data: data.yelp.star_rating[4],
|
|
|
+ borderColor: 'rgb(0, 97, 0)',
|
|
|
+ backgroundColor: 'rgb(0, 97, 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."
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // Yelp pie chart
|
|
|
+ var myYelpPieChart = new Chart(yelp_pie_ctx, {
|
|
|
+ type: 'pie',
|
|
|
+ data: {
|
|
|
+ labels: data.yelp.curr_month.label,
|
|
|
+ datasets: [
|
|
|
+ {
|
|
|
+ data: data.yelp.curr_month.total,
|
|
|
+ backgroundColor: [
|
|
|
+ 'rgb(0, 97, 0)',
|
|
|
+ 'rgb(0, 157, 166)',
|
|
|
+ 'rgb(219, 208, 0)',
|
|
|
+ 'rgb(255, 119, 0)',
|
|
|
+ 'rgb(204, 0, 17)'
|
|
|
+ ]
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ options: {
|
|
|
+ title: {
|
|
|
+ display: true,
|
|
|
+ fontSize: 12,
|
|
|
+ // position: 'bottom',
|
|
|
+ text: 'All reviews of this month'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
// Facebook review charts
|
|
|
// Facebook line chart
|
|
|
var myFacebookLineChart = new Chart(facebook_line_ctx, {
|