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.
127 lines
5.1 KiB
127 lines
5.1 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>Portal - Bootstrap 5 Admin Dashboard Template For Developers</title>
|
|
|
|
<!-- Meta -->
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<meta name="description" content="Portal - Bootstrap 5 Admin Dashboard Template For Developers">
|
|
<meta name="author" content="Celestino Rey" >
|
|
<link rel="shortcut icon" href="favicon.ico">
|
|
|
|
<!-- FontAwesome JS-->
|
|
<script defer src="assets/plugins/fontawesome/js/all.min.js"></script>
|
|
|
|
<!-- App CSS -->
|
|
<link id="theme-style" rel="stylesheet" href="assets/css/portal.css">
|
|
|
|
</head>
|
|
|
|
<body class="app">
|
|
|
|
<?php include './templates/header.php';?>
|
|
|
|
|
|
<div class="app-wrapper">
|
|
|
|
<div class="app-content pt-3 p-md-3 p-lg-4">
|
|
<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>assets/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-->
|
|
|
|
<?php include './templates/footer.php';?>
|
|
|
|
</div><!--//app-wrapper-->
|
|
|
|
|
|
<!-- Javascript -->
|
|
<script src="assets/plugins/popper.min.js"></script>
|
|
<script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
|
|
|
|
|
|
|
|
<!-- Charts JS -->
|
|
<script src="assets/plugins/chart.js/chart.min.js"></script>
|
|
<script src="assets/js/charts-demo.js"></script>
|
|
|
|
<!-- Page Specific JS -->
|
|
<script src="assets/js/app.js"></script>
|
|
|
|
</body>
|
|
</html>
|
|
|