You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
79 lines
3.8 KiB
79 lines
3.8 KiB
{% extends 'base.html' %}
|
|
|
|
{% block content %}
|
|
<div class="container-xl">
|
|
|
|
<h1 class="app-page-title">Charts</h1>
|
|
<div class="app-card shadow-sm mb-4 border-left-decoration">
|
|
<div class="inner">
|
|
<div class="app-card-body p-4">
|
|
<div class="row gx-5 gy-3">
|
|
<div class="col-12 col-lg-9">
|
|
|
|
<div>You can use <a href="https://www.chartjs.org/" target="_blank">Chart.js</a> to create charts for your app. To configure the charts on this page you can edit the relevant JavaScript file: <code>js/charts-demo.js</code> </div>
|
|
</div><!--//col-->
|
|
<div class="col-12 col-lg-3">
|
|
<a class="btn app-btn-primary" href="https://www.chartjs.org/docs/latest/" target="_blank"><svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-arrow-up-right-square me-2" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
|
<path fill-rule="evenodd" d="M14 1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
|
|
<path fill-rule="evenodd" d="M5.172 10.828a.5.5 0 0 0 .707 0l4.096-4.096V9.5a.5.5 0 1 0 1 0V5.525a.5.5 0 0 0-.5-.5H6.5a.5.5 0 0 0 0 1h2.768l-4.096 4.096a.5.5 0 0 0 0 .707z"/>
|
|
</svg>Learn More</a>
|
|
</div><!--//col-->
|
|
</div><!--//row-->
|
|
|
|
</div><!--//app-card-body-->
|
|
|
|
</div><!--//inner-->
|
|
</div><!--//app-card-->
|
|
<div class="row g-4 mb-4">
|
|
<div class="col-12 col-lg-6">
|
|
<div class="app-card app-card-chart h-100 shadow-sm">
|
|
<div class="app-card-header p-3 border-0">
|
|
<h4 class="app-card-title">Area Line Chart Demo</h4>
|
|
</div><!--//app-card-header-->
|
|
<div class="app-card-body p-4">
|
|
<div class="chart-container">
|
|
<canvas id="chart-line" ></canvas>
|
|
</div>
|
|
</div><!--//app-card-body-->
|
|
</div><!--//app-card-->
|
|
</div><!--//col-->
|
|
<div class="col-12 col-lg-6">
|
|
<div class="app-card app-card-chart h-100 shadow-sm">
|
|
<div class="app-card-header p-3 border-0">
|
|
<h4 class="app-card-title">Bar Chart Demo</h4>
|
|
</div><!--//app-card-header-->
|
|
<div class="app-card-body p-4">
|
|
<div class="chart-container">
|
|
<canvas id="chart-bar" ></canvas>
|
|
</div>
|
|
</div><!--//app-card-body-->
|
|
</div><!--//app-card-->
|
|
</div><!--//col-->
|
|
<div class="col-12 col-lg-6">
|
|
<div class="app-card app-card-chart h-100 shadow-sm">
|
|
<div class="app-card-header p-3 border-0">
|
|
<h4 class="app-card-title">Pie Chart Demo</h4>
|
|
</div><!--//app-card-header-->
|
|
<div class="app-card-body p-4">
|
|
<div class="chart-container">
|
|
<canvas id="chart-pie" ></canvas>
|
|
</div>
|
|
</div><!--//app-card-body-->
|
|
</div><!--//app-card-->
|
|
</div><!--//col-->
|
|
<div class="col-12 col-lg-6">
|
|
<div class="app-card app-card-chart h-100 shadow-sm">
|
|
<div class="app-card-header p-3 border-0">
|
|
<h4 class="app-card-title">Doughnut Chart Demo</h4>
|
|
</div><!--//app-card-header-->
|
|
<div class="app-card-body p-4">
|
|
<div class="chart-container">
|
|
<canvas id="chart-doughnut" ></canvas>
|
|
</div>
|
|
</div><!--//app-card-body-->
|
|
</div><!--//app-card-->
|
|
</div><!--//col-->
|
|
</div><!--//row-->
|
|
</div><!--//container-fluid-->
|
|
</div><!--//app-content-->
|
|
{% endblock %}
|