Как использовать данные из БД (flask_sqlalchemy) для отображения их в графике зависимости через js
приложение написано на flask на странице должен быть график зависимости: сколько потрачено денег (article.price) и даты этой траты (article.date.date()), все это находится в БД, но нужно использовать все эти данные в JS для построения графика. Пытался просто вставить данные через jinja но она ругается. попытка:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
<script>
let ctx = document.querySelector('#myChart').getContext('2d');
function data(data_price){
console.log(data_price);
}
let myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [{{article.date.date()}}],
datasets: [{
label: 'заголовок',
data: [{{article.price}}],
backgroundColor: [
'white'
],
borderColor: [
'#000',
'#000',
'#000',
'#000',
'#000'
],
borderWidth: 4
}]
},
options: {},
})
</script>
График строится с помощью CDN и находится в HTML документе index.html:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
<script>
let ctx = document.querySelector('#myChart').getContext('2d');
function data(data_price){
console.log(data_price);
}
let myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['ТУТ ДОЛЖНЫ БЫТЬ ДАТЫ (article.date.date())'],
datasets: [{
label: 'заголовок',
data: ['ТУТ ДОЛЖНЫ БЫТЬ ТРАТЫ (article.price)'],
backgroundColor: [
'white'
],
borderColor: [
'#000',
'#000',
'#000',
'#000',
'#000'
],
borderWidth: 4
}]
},
options: {},
})
</script>
вот функция вызова страницы:
# функция основной страницы
@app.route('/')
def index():
article = Article.query.order_by(Article.date.desc()).all()
return render_template("index.html", article=article)
вот БД, на всякий случай:
class Article(db.Model):
"""
Создаю БД для внесения продуктов и их цен
"""
id = db.Column(db.Integer, primary_key=True)
date = db.Column(db.DateTime, default=datetime.utcnow)
product = db.Column(db.String(50), nullable=True)
price = db.Column(db.Integer)
def __repr__(self) -> str:
return '<Article %r>' % self.id