review-automation-server/analytics/templates/charts.html

{% extends 'analytics.html' %}
<script>
    {% 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,
        "time_interval": time_interval
    }
    $.ajax({
        type: "get",
        url: endpoint,
        data: params,
        dataType: 'json',
        success: function(data) {
            $('#barChart').remove();
            $('#bar-chart-container').append('<canvas id="barChart" width="200" height="120" class="mt-2"></canvas>');

            $('#pieChart').remove();
            $('#pie-chart-container').append('<canvas id="pieChart" width="100" height="80" class="mt-2"></canvas>');

            $('#lineChart').remove();
            $('#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 ctxPie = document.getElementById('pieChart').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: {
                    labels: data.label,
                    datasets: [
                    {
                        label: '5 Star',
                        data: data.five_star,
                        borderColor: 'rgb(75, 192, 192)',
                        backgroundColor: 'rgb(75, 192, 192)',
                        borderWidth: 3,
                        pointRadius: 3,
                        pointStyle: 'rect',
                        fill: false
                    },
                    {
                        label: '4 Star',
                        data: data.four_star,
                        borderColor: 'rgb(54, 162, 235)',
                        backgroundColor: 'rgb(54, 162, 235)',
                        borderWidth: 3,
                        pointRadius: 2,
                        fill: false
                    },
                    {
                        label: '3 Star',
                        data: data.three_star,
                        borderColor: 'rgb(153, 102, 255)',
                        backgroundColor: 'rgb(153, 102, 255)',
                        borderWidth: 3,
                        pointRadius: 2,
                        fill: false
                    },
                    {
                        label: '2 Star',
                        data: data.two_star,
                        borderColor: 'rgb(255, 159, 64)',
                        backgroundColor: 'rgb(255, 159, 64)',
                        borderWidth: 3,
                        pointRadius: 3,
                        pointStyle: 'rectRot',
                        fill: false
                    },
                    {
                        label: '1 Star',
                        data: data.one_star,
                        borderColor: 'rgb(255, 99, 132)',
                        backgroundColor: 'rgb(255, 99, 132)',
                        borderWidth: 3,
                        pointRadius: 3,
                        pointStyle: 'rect',
                        fill: false
                    },
                ]
                },
                options: {
                    scales: {
                        xAxes: [{
                            gridLines: {
                                drawOnChartArea:false
                            }
                        }],
                        yAxes: [{
                            ticks: {
                                beginAtZero: true
                            }
                        }]
                    },
                    title: {
                        display: true,
                        fontSize: 20,
                        text: "One Year's Total Star Rating  - " + ' ' + location_name
                    }
                }
            });
            var myBarChart = new Chart(ctxBar, {
                type: 'bar',
                data: {
                    labels: data.label,
                    datasets: [
                    {
                        label: 'All Reviews',
                        data: data.total_reviews,
                        borderColor: 'rgb(45, 63, 94)',
                        backgroundColor: 'rgb(158, 181, 222)',
                        borderWidth: 1,
                        fill: false
                    }]
                },
                options: {
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: true
                            }
                        }],
                        xAxes: [{
                            gridLines: {
                                drawOnChartArea:false
                            }
                        }]
                    },
                    title: {
                        display: true,
                        fontSize: 16,
                        text: "One Year's Total Review  - " + ' ' +location_name
                    }
                }
            });
            var myPieChart = new Chart(ctxPie, {
                type: 'pie',
                data: {
                    labels: ['1*', '2*', '3*', '4*', '5*'],
                    datasets: [{
                        data: data.this,
                        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 '+time_interval+'  - ' + ' ' + location_name
                    }
                }
            });
        },

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