Диаграмма Google не отображается на Django
Итак, я отправляю эти данные на фронтенд из моего представления:
data = [["Name", "Ammount"],
["x", 0],
["y", 2],
["z", 1]]
И я пытаюсь показать это как гистограмму моему пользователю, но ничего не отображается (буквально, пусто там, где должен был быть график).
Мой html выглядит следующим образом:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<!-- Favicon-->
<link rel="icon" type="image/x-icon" href={% static "assets/icon.ico" %} />
<!-- Core theme CSS (includes Bootstrap)-->
<link href={% static "css/styles.css" %} rel="stylesheet" />
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart_decision_type);
function drawChart_decision_type() {
var data3 = google.visualization.arrayToDataTable({{ my_data|safe }});
var options3 = {
chart: {
title: 'Stuff',
subtitle: 'Test',
},
backgroundColor: '#FFFFFF',
bars: 'horizontal' // Required for Material Bar Charts.
};
var chart3 = new google.charts.Bar(document.getElementById('barchart_materia'));
chart3.draw(data3, google.charts.Bar.convertOptions(options3));
}
</script>
</head>
<body>
<div class="card_view">
<div id="barchart_material" style="width: 700px; height: 300px;"></div>
</div>
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Core theme JS-->
<script src={% static "js/scripts.js" %} ></script>
</body>
</html>
В моем html-коде есть и другие вещи, но ничего, что пришло бы на ум как важное. Просто некоторые гиперссылки, которые соединяют пользователя с другими страницами, не должны сильно влиять на эту проблему в одиночку.
Есть идеи, что я делаю неправильно?