358 lines
23 KiB
HTML
358 lines
23 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
@@include("partials/title-meta.html", {"title": "Peity Charts"})
|
|
|
|
@@include('./partials/head-css.html')
|
|
|
|
</head>
|
|
|
|
<body class="loading">
|
|
|
|
<!-- Begin page -->
|
|
<div id="wrapper">
|
|
|
|
@@include('./partials/left-sidebar.html')
|
|
|
|
<!-- ============================================================== -->
|
|
<!-- Start Page Content here -->
|
|
<!-- ============================================================== -->
|
|
|
|
<div class="content-page">
|
|
<div class="content">
|
|
|
|
@@include('./partials/topbar.html')
|
|
|
|
<!-- Start Content-->
|
|
<div class="container-fluid">
|
|
|
|
<!-- start page title -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="page-title-box">
|
|
<h4 class="page-title">Peity Charts</h4>
|
|
<div class="page-title-right">
|
|
<ol class="breadcrumb m-0">
|
|
<li class="breadcrumb-item"><a href="javascript: void(0);">Minton</a></li>
|
|
<li class="breadcrumb-item"><a href="javascript: void(0);">Charts</a></li>
|
|
<li class="breadcrumb-item active">Peity</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end page title -->
|
|
|
|
<div class="row">
|
|
<div class="col-xl-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="header-title mb-3">Pie Charts</h4>
|
|
|
|
<table class="table table-borderless table-centered mb-0">
|
|
<thead class="thead-light">
|
|
<tr>
|
|
<th>Graph</th>
|
|
<th>Code</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<span data-plugin="peity-pie" data-colors="#3bafda,#ebeff2" data-width="30" data-height="30">1/5</span>
|
|
</td>
|
|
<td>
|
|
<code><span data-plugin="peity-pie" data-colors="#3bafda,#ebeff2" data-width="30" data-height="30">1/5</span></code>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<span data-plugin="peity-pie" data-colors="#3bafda,#ebeff2" data-width="30" data-height="30">226/360</span>
|
|
</td>
|
|
<td>
|
|
<code><span data-plugin="peity-pie" data-colors="#3bafda,#ebeff2" data-width="30" data-height="30">226/360</span></code>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<span class="pie" data-plugin="peity-pie" data-colors="#3bafda,#ebeff2" data-width="30" data-height="30">0.52/1.561</span>
|
|
</td>
|
|
<td>
|
|
<code><span data-plugin="peity-pie" data-colors="#3bafda,#ebeff2" data-width="30" data-height="30">0.52/1.561</span></code>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<span class="pie" data-plugin="peity-pie" data-colors="#3bafda,#ebeff2" data-width="30" data-height="30">1,4</span>
|
|
</td>
|
|
<td>
|
|
<code><span data-plugin="peity-pie" data-colors="#3bafda,#ebeff2" data-width="30" data-height="30">1,4</span></code>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<span class="pie" data-plugin="peity-pie" data-colors="#3bafda,#ebeff2" data-width="30" data-height="30">226,134</span>
|
|
</td>
|
|
<td>
|
|
<code><span data-plugin="peity-pie" data-colors="#3bafda,#ebeff2" data-width="30" data-height="30">226,134</span></code>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<span class="pie" data-plugin="peity-pie" data-colors="#3bafda,#ebeff2" data-width="30" data-height="30">0.52,1.041</span>
|
|
</td>
|
|
<td>
|
|
<code><span data-plugin="peity-pie" data-colors="#3bafda,#ebeff2" data-width="30" data-height="30">0.52,1.041</span></code>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div> <!-- end card -->
|
|
</div>
|
|
<!-- end col-->
|
|
|
|
<div class="col-xl-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="header-title mb-3">Donut Charts</h4>
|
|
|
|
<table class="table table-borderless table-centered mb-0">
|
|
<thead class="thead-light">
|
|
<tr>
|
|
<th>Graph</th>
|
|
<th>Code</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<span class="donut" data-plugin="peity-donut" data-colors="#1abc9c,#ebeff2" data-width="30" data-height="30">1/5</span>
|
|
</td>
|
|
<td>
|
|
<code><span data-plugin="peity-donut" data-colors="#1abc9c,#ebeff2" data-width="30" data-height="30">1/5</span></code>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<span class="donut" data-plugin="peity-donut" data-colors="#1abc9c,#ebeff2" data-width="30" data-height="30">226/360</span>
|
|
</td>
|
|
<td>
|
|
<code><span data-plugin="peity-donut" data-colors="#1abc9c,#ebeff2" data-width="30" data-height="30">226/360</span></code>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<span class="donut" data-plugin="peity-donut" data-colors="#1abc9c,#ebeff2" data-width="30" data-height="30">0.52/1.561</span>
|
|
</td>
|
|
<td>
|
|
<code><span data-plugin="peity-donut" data-colors="#1abc9c,#ebeff2" data-width="30" data-height="30">0.52/1.561</span></code>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<span class="donut" data-plugin="peity-donut" data-colors="#1abc9c,#ebeff2" data-width="30" data-height="30">1,4</span>
|
|
</td>
|
|
<td>
|
|
<code><span data-plugin="peity-donut" data-colors="#1abc9c,#ebeff2" data-width="30" data-height="30">1/4</span></code>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<span class="donut" data-plugin="peity-donut" data-colors="#1abc9c,#ebeff2" data-width="30" data-height="30">226,134</span>
|
|
</td>
|
|
<td>
|
|
<code><span data-plugin="peity-donut" data-colors="#1abc9c,#ebeff2" data-width="30" data-height="30">226,134</span></code>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<span class="donut" data-plugin="peity-donut" data-colors="#1abc9c,#ebeff2" data-width="30" data-height="30">1,2,3,2,2</span>
|
|
</td>
|
|
<td>
|
|
<code><span data-plugin="peity-donut" data-colors="#1abc9c,#ebeff2" data-width="30" data-height="30">1,2,3,2,2</span></code>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div> <!-- end card-->
|
|
</div> <!-- end col -->
|
|
</div>
|
|
<!-- end row -->
|
|
|
|
<div class="row">
|
|
<div class="col-xl-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="header-title mb-3">Line and Bars Charts</h4>
|
|
|
|
<table class="table table-borderless table-centered mb-0">
|
|
<thead class="thead-light">
|
|
<tr>
|
|
<th>Graph</th>
|
|
<th>Code</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<span data-diameter="40" class="updating-chart">5,3,9,6,5,9,7,3,5,2,5,3,9,6,5,9,7,3,5,2</span>
|
|
</td>
|
|
<td>
|
|
<code><span class="updating-chart">5,3,9,6,5,9,7,3,5,2</span></code>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<span data-plugin="peity-line" data-fill="#3bafda" data-stroke="#3bafda" data-width="120" data-height="40">5,3,9,6,5,9,7,3,5,2</span>
|
|
</td>
|
|
<td>
|
|
<code><span data-plugin="peity-line" data-fill="#3bafda" data-stroke="#3bafda" data-width="100" data-height="40">5,3,9,6,5,9,7,3,5,2</span></code>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<span data-plugin="peity-line" data-fill="#3bafda" data-stroke="#3bafda" data-width="120" data-height="40">5,3,2,-1,-3,-2,2,3,5,2</span>
|
|
</td>
|
|
<td>
|
|
<code><span data-plugin="peity-line" data-fill="#3bafda" data-stroke="#3bafda" data-width="100" data-height="100">5,3,2,-1,-3,-2,2,3,5,2</span></code>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<span data-plugin="peity-line" data-fill="#3bafda" data-stroke="#3bafda" data-width="120" data-height="40">0,-3,-6,-4,-5,-4,-7,-3,-5,-2</span>
|
|
</td>
|
|
<td>
|
|
<code><span data-plugin="peity-line" data-fill="#3bafda" data-stroke="#3bafda" data-width="100" data-height="100">0,-3,-6,-4,-5,-4,-7,-3,-5,-2</span></code>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<span data-plugin="peity-bar" data-colors="#3bafda,#ebeff2" data-width="100" data-height="30">5,3,9,6,5,9,7,3,5,2</span>
|
|
</td>
|
|
<td>
|
|
<code><span data-plugin="peity-bar" data-colors="#3bafda,#ebeff2" data-width="100" data-height="30">5,3,9,6,5,9,7,3,5,2</span></code>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<span data-plugin="peity-bar" data-colors="#3bafda,#ebeff2" data-width="100" data-height="30">5,3,2,-1,-3,-2,2,3,5,2</span>
|
|
</td>
|
|
<td>
|
|
<code><span data-plugin="peity-bar" data-colors="#3bafda,#ebeff2" data-width="100" data-height="30">5,3,2,-1,-3,-2,2,3,5,2</span></code>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div> <!-- end card -->
|
|
</div> <!-- end col -->
|
|
|
|
<div class="col-xl-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="header-title mb-3">Data-attributes charts</h4>
|
|
|
|
<table class="table table-borderless table-centered mb-0">
|
|
<thead class="thead-light">
|
|
<tr>
|
|
<th>Graph</th>
|
|
<th>Code</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<span data-plugin="peity-donut-alt" data-peity='{ "fill": ["#4c5667", "#ebeff2"], "innerRadius": 24, "radius": 30 }'>6/7</span>
|
|
</td>
|
|
<td>
|
|
<code>
|
|
<span data-plugin="peity-donut-alt" data-peity='{ "fill": ["#4c5667", "#ebeff2"], "innerRadius": 24, "radius": 30 }'">6/7</span>
|
|
</code>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<span data-plugin="peity-donut-alt" data-peity='{ "fill": ["#3bafda", "#ebeff2"], "innerRadius": 18, "radius": 28 }'>4/7</span>
|
|
</td>
|
|
<td>
|
|
<code>
|
|
<span data-plugin="peity-donut-alt" data-peity='{ "fill": ["#3bafda", "#ebeff2"], "innerRadius": 18, "radius": 28 }'">4/7</span>
|
|
</code>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>
|
|
<span data-plugin="peity-donut-alt" data-peity='{ "fill": ["#5d9cec", "#ebeff2"], "innerRadius": 20, "radius": 24 }'>5/7</span>
|
|
</td>
|
|
<td>
|
|
<code>
|
|
<span data-plugin="peity-donut-alt" data-peity='{ "fill": ["#5d9cec", "#ebeff2"], "innerRadius": 20, "radius": 24 }'">5/7</span>
|
|
</code>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<span data-plugin="peity-donut-alt" data-peity='{ "fill": ["#f672a7", "#ebeff2"], "innerRadius": 18, "radius": 20 }'>6/7</span>
|
|
</td>
|
|
<td>
|
|
<code>
|
|
<span data-plugin="peity-donut-alt" data-peity='{ "fill": ["#f672a7", "#ebeff2"], "innerRadius": 18, "radius": 20 }'">6/7</span>
|
|
</code>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<span data-plugin="peity-donut-alt" data-peity='{ "fill": ["#6559cc", "#ebeff2"], "innerRadius": 18, "radius": 20 }'>5/7</span>
|
|
</td>
|
|
<td>
|
|
<code>
|
|
<span data-plugin="peity-donut-alt" data-peity='{ "fill": ["#6559cc", "#ebeff2"], "innerRadius": 18, "radius": 20 }'">5/7</span>
|
|
</code>
|
|
</td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div> <!-- end card -->
|
|
</div> <!-- end col -->
|
|
</div>
|
|
<!-- end row -->
|
|
|
|
</div> <!-- container -->
|
|
|
|
</div> <!-- content -->
|
|
|
|
@@include('./partials/footer.html')
|
|
|
|
</div>
|
|
|
|
<!-- ============================================================== -->
|
|
<!-- End Page content -->
|
|
<!-- ============================================================== -->
|
|
|
|
|
|
</div>
|
|
<!-- END wrapper -->
|
|
|
|
@@include('./partials/right-sidebar.html')
|
|
|
|
<!-- Vendor js -->
|
|
<script src="../assets/js/vendor.min.js"></script>
|
|
|
|
<!-- Peity chart-->
|
|
<script src="../assets/libs/peity/jquery.peity.min.js"></script>
|
|
|
|
<!-- Init js-->
|
|
<script src="../assets/js/pages/peity.init.js"></script>
|
|
|
|
<!-- App js -->
|
|
<script src="../assets/js/app.min.js"></script>
|
|
|
|
</body>
|
|
</html> |