Self hosting chart.js

This commit is contained in:
Yarne Coppens 2024-08-12 08:27:10 +02:00
parent 141f533af6
commit 8036276187
4 changed files with 53 additions and 3 deletions

File diff suppressed because one or more lines are too long

View file

@ -148,7 +148,7 @@ async function loadStatistics(){
new Chart(overtimechart, { new Chart(overtimechart, {
type: 'bar', type: 'bar',
data: { data: {
labels: Object.keys(games_over_time_statistic.result),//['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], labels: Object.keys(games_over_time_statistic.result),
datasets: [{ datasets: [{
label: '# of Games', label: '# of Games',
data: Object.values(games_over_time_statistic.result), data: Object.values(games_over_time_statistic.result),
@ -163,6 +163,9 @@ async function loadStatistics(){
} }
} }
}); });
$("#overtimechartname").text(games_over_time_statistic.name)
} }
async function loadGame() { async function loadGame() {

View file

@ -13,7 +13,7 @@
<script src="{{ url_for('static', filename='javascript/jquery/jquery-3.7.1.min.js') }}" defer></script> <script src="{{ url_for('static', filename='javascript/jquery/jquery-3.7.1.min.js') }}" defer></script>
<script src="{{ url_for('static', filename='javascript/datatables/datatables.min.js') }}" defer></script> <script src="{{ url_for('static', filename='javascript/datatables/datatables.min.js') }}" defer></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script src="{{ url_for('static', filename='javascript/chart/chart.js') }}"></script>
<script src="{{ url_for('static', filename='javascript/main.js') }}" defer></script> <script src="{{ url_for('static', filename='javascript/main.js') }}" defer></script>
</head> </head>

View file

@ -5,7 +5,34 @@
<body onload="loadStatistics()"> <body onload="loadStatistics()">
<canvas id="overtimechart"></canvas> <div class="row">
<div class="col">
<div class="card">
<canvas id="overtimechart"></canvas>
<div class="card-body">
<h4 class="card-title" id="overtimechartname"></h4>
</div>
</div>
</div>
<div class="col">
<div class="card">
<canvas id="overtimechart"></canvas>
<div class="card-body">
<h4 class="card-title" id="overtimechartname"></h4>
</div>
</div>
</div>
<div class="col">
<div class="card">
<canvas id="overtimechart"></canvas>
<div class="card-body">
<h4 class="card-title" id="overtimechartname"></h4>
</div>
</div>
</div>
</div>
</body> </body>