Unable to view chart as a seperate webpage

25 views
Skip to first unread message

Sagar T

unread,
Aug 1, 2018, 9:45:24 AM8/1/18
to Django users
details_page.html : 

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
{% load staticfiles %}
<html>
<head>

    <script>
        var randomColorGenerator = function () {
            return '#' + (Math.random().toString(16) + '0000000').slice(2, 8);
        };
        var options = {
            responsive: true,
            maintainAspectRatio: true,
            legend: {
                position: 'left'
            },
            title: {
                display: true
            },
            animation: {
                animateScale: true,
                animateRotate: true
            }
        };
        window.onload = function () {
            var ctx = document.getElementById("gender-chart");
            {% regroup cl.queryset|dictsort:"gender" by get_gender_display as gender_list %}
            var lineChart = new Chart(ctx, {
                type: 'doughnut',
                data: {
                    labels: [{% for gender in gender_list %}'{{ gender.grouper }}',{% endfor %}],
                    datasets: [{
                        data: [{% for gender in gender_list %}'{{ gender.list|length }}',{% endfor %}],
                        backgroundColor: [{% for gender in gender_list %}randomColorGenerator(),{% endfor %}]
                    }]
                },
                options: options
            });
            ctx = document.getElementById("size-chart");
            {% regroup cl.queryset|dictsort:"teesize" by get_teesize_display as size_list %}
            lineChart = new Chart(ctx, {
                type: 'doughnut',
                data: {
                    labels: [{% for teesize in size_list %}'{{ teesize.grouper }}',{% endfor %}],
                    datasets: [{
                        data: [{% for teesize in size_list %}'{{ teesize.list|length }}',{% endfor %}],
                        backgroundColor: [{% for teesize in size_list %}randomColorGenerator(),{% endfor %}]
                    }]
                }, options: options
            });
        }

    </script>
<title> Charts </title>
</head>
<body>
    <h1> Graphs </h1>
    <div class="row">
        <div class="col-sm-4">
            <canvas id="gender-chart" style="width: 100px"></canvas>
        </div>
        <div class="col-sm-4">
            <canvas id="size-chart" style="width: 100px"></canvas>
        </div>
    </div>
</body>
</html>

views.py:

def details(request):
    
    return render(request,"details_chart.html" , { })

models.py:

from django.db import models


GENDER = (
    ('m', 'MALE'),
    ('f', 'FEMALE'),
    ('o', 'OTHER')
)

TEE_SIZE = (
    ('xs', 'XS'),
    ('s' , 'S'),
    ('m' , 'M'),
    ('l' , 'L'),
    ('xl', 'XL')
    )

class Register(models.Model):

    phno = models.CharField(max_length=20)
    username = models.CharField(max_length=100, null=True)
    emailid = models.EmailField(max_length=50, null=True)
    gender = models.CharField(max_length=100, choices=GENDER)
    dob = models.DateField(null=True, blank=True)
    location = models.CharField(max_length=200,null=True)
    teesize = models.CharField(max_length=100, choices=TEE_SIZE)
    prevruns = models.IntegerField(null=True, blank=True)
    bibno = models.IntegerField(null=True, blank=True)


    def __str__(self):
        return self.username

    def get_data(self):
        return self.gender

Please let me know what changes has to be done in the HTML file to make it work.
Reply all
Reply to author
Forward
0 new messages