CODEWITHSUNDEEP
pythondjangocharts
Nadja Kraemer
Nadja Kraemer

Reputation: 13

How to integrate Chart.js in Django?

So first of all, I am a bloody beginner at Django and Chart.js. What I want to do: I want to display a pie chart. I know that with the syntax {{content}} a .html template can get dynamic data but it doesn't work for my piechart template.

What I have: I have my pie chart ready as a .html template for my app. It already works perfectly fine when I directly code the data into the template.

my view:


    def index(request):

    return render(
        request, 
        "mep/chart.html",
        {
            labels: ['F', 'M'],
            data: [52, 82],
            colors: ["#FF4136", "#0074D9"]
            }

        )

my template:


    <!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    <title>Geschlechtsverteilung Patientendaten </title>
</head>
<body>
    <div class="container">
        <canvas id="myChart"></canvas>
    </div>

    <script>
        var ctx = document.getElementById('myChart').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'pie',// bar, horizontalBar, pie, line, doughnut, radar, polarArea

            data: {
                labels: {{labels}},
                datasets: [{
                    data: {{data}},
                    backgroundColor: {{colors}}
                }]
            },
            options: {
                title: {
                    display: true,
                    text: 'Geschlechtsverteilung Patientendaten',
                },
                legend: {
                    disblay: true,
                    position: 'right',
                    labels: {
                        fontColor: '#000'
                    }
                }

            }


        });

    </script>
</body>
</html>

So as you can see I am TRYING to pass the data for the template in my views.py but it doesn't work. When I specified the data directly in the chart.html it worked

Any solutions???

Upvotes: 1

Views: 3514

Answers (3)

drec4s
drec4s

Reputation: 8077

You have two problems in your code. First, you need to correct your views.py.

You need to use strings as keys in your context dictionary, so you need to change it to:

def index(request):

    return render(
        request, 
        "base/chart.html",
        {
            'labels': ['F', 'M'],
            'data': [52, 82],
            'colors': ["#FF4136", "#0074D9"]
            }

        )

And then you need to specify inside the django template, that these variables are safe to render:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    <title>Geschlechtsverteilung Patientendaten </title>
</head>
<body>
    <div class="container">
        <canvas id="myChart"></canvas>
    </div>

    <script>
        var ctx = document.getElementById('myChart').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'pie',// bar, horizontalBar, pie, line, doughnut, radar, polarArea

            data: {
                labels: {{labels|safe}},
                datasets: [{
                    data: {{data|safe}},
                    backgroundColor: {{colors|safe}}
                }]
            },
            options: {
                title: {
                    display: true,
                    text: 'Geschlechtsverteilung Patientendaten',
                },
                legend: {
                    disblay: true,
                    position: 'right',
                    labels: {
                        fontColor: '#000'
                    }
                }

            }


        });

    </script>
</body>
</html>

Upvotes: 2

pe.kne
pe.kne

Reputation: 684

You have a typo in the code, that could be an issue. Substitute disblay with the correct display in options -> title -> display in Chart initialization. Could you please provide your javascript console output if this fix doesn't work?

Upvotes: 0

HenryM
HenryM

Reputation: 5793

I think you need to output into the html by iterating through the items. So, for example, change labels: {{labels}}, to

labels: [{% for label in labels %}{{ label }}{% endfor %}]

Upvotes: 0

Related Questions