How to include js file in Flask?

D

Dasha_PROgrammer2021-06-16 09:15:57

Flask

Dasha_PROgrammer, 2021-06-16 09:15:57

Flask framework project.
I'm trying to include the diagr.js file, but for some reason it doesn't work.
Here is the project structure:

flask
//static
////css
////js
//////diagr.js

//templates
////graph.html

//app.py

diagr.js:

var ctx = document.getElementById("lineChart").getContext("2d");
        var lineChart = new Chart(ctx, {
            type: "line",
            data: {
                labels: {{ labels | safe }},
                datasets: [
                    {
                        label: "Курс валюты",
                        data: {{ values | safe }},
                        fill: false,
                        borderColor: "rgb(75, 192, 192)",
                        lineTension: 0.5
                    }
                ]
            },
            options: {
                responsive: false
                }
        });

graph.html:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0">
    <title>Sample chart</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js"></script>
</head>
<body>
<canvas id="lineChart" width="900" height="400"></canvas>
<script src="{{ url_for('static', filename='js/diagr.js') }}"></script>
</body>
</html>

app.py:

from flask import Flask, render_template, redirect

app = Flask(__name__)


@app.route("/")
def home():
    data = [
        ("01-01-2020", 1597),
        ("02-01-2020", 1456),
        ("03-01-2020", 1908),
        ("04-01-2020", 896),
        ("05-01-2020", 755),
        ("06-01-2020", 453),
        ("07-01-2020", 1100),
        ("08-01-2020", 1235),
        ("09-01-2020", 1478)
    ]

    labels = [row[0] for row in data]
    values = [row[1] for row in data]

    return render_template('graph.html', labels=labels, values=values)


if __name__ == "__main__":
    app.run(debug=True)

Why is the chart from diagr.js not showing up?
Thanks in advance

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

S

soremix, 2021-06-16
@Dasha_PROgrammer

You have a file called diaghr.js, and connectdiagr.js