{% extends "base.html" %} {% block title %}Furizon 2023 Stats{% endblock %} {% block main %} <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <main class="container"> <header> <picture> <source srcset="/res/furizon.png" media="(prefers-color-scheme:dark)"> <img src="/res/furizon-light.png" style="height:4rem;text-align:center;"> </picture> </header> <h2>Countries</h2> <div style="margin: 0 auto;"> <canvas id="countries"></canvas> </div> <script> const ctx = document.getElementById('countries'); new Chart(ctx, { type: 'bar', data: { labels: {{stats['countries'].keys()|list|safe}}, datasets: [{ label: '# of Attendees', data: {{stats['countries'].values()|list|safe}}, borderWidth: 0 }] }, options: { scales: { y: {beginAtZero: true} } } }); </script> <h2>Sponsors</h2> <div style="max-width:20em;margin: 0 auto;"> <canvas id="sponsors"></canvas> </div> <script> const ctx2 = document.getElementById('sponsors'); new Chart(ctx2, { type: 'pie', data: { labels: {{stats['sponsors'].keys()|list|safe}}, datasets: [{ label: '# of Attendees', data: {{stats['sponsors'].values()|list|safe}}, borderWidth: 0 }] } }); </script> </main> {% endblock %}