| Current File : /home/digitaw/Ycof/admin/.history/clients_20230504153443.php |
<?php
include "menu.php";
?>
<!-- ========== section start ========== -->
<section class="section">
<div class="container-fluid">
<!-- ========== title-wrapper start ========== -->
<div class="title-wrapper pt-30">
<div class="row align-items-center">
<div class="col-md-6">
<div class="title mb-30">
<h2>Tableau de bord Admin</h2>
</div>
</div>
<!-- end col -->
</div>
<!-- end row -->
</div>
<!-- ========== title-wrapper end ========== -->
<div class="row">
<div class="col-xl-3 col-lg-4 col-sm-6">
<div class="icon-card mb-30">
<div class="icon purple">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-airplane" viewBox="0 0 16 16">
<path d="M6.428 1.151C6.708.591 7.213 0 8 0s1.292.592 1.572 1.151C9.861 1.73 10 2.431 10 3v3.691l5.17 2.585a1.5 1.5 0 0 1 .83 1.342V12a.5.5 0 0 1-.582.493l-5.507-.918-.375 2.253 1.318 1.318A.5.5 0 0 1 10.5 16h-5a.5.5 0 0 1-.354-.854l1.319-1.318-.376-2.253-5.507.918A.5.5 0 0 1 0 12v-1.382a1.5 1.5 0 0 1 .83-1.342L6 6.691V3c0-.568.14-1.271.428-1.849Zm.894.448C7.111 2.02 7 2.569 7 3v4a.5.5 0 0 1-.276.447l-5.448 2.724a.5.5 0 0 0-.276.447v.792l5.418-.903a.5.5 0 0 1 .575.41l.5 3a.5.5 0 0 1-.14.437L6.708 15h2.586l-.647-.646a.5.5 0 0 1-.14-.436l.5-3a.5.5 0 0 1 .576-.411L15 11.41v-.792a.5.5 0 0 0-.276-.447L9.276 7.447A.5.5 0 0 1 9 7V3c0-.432-.11-.979-.322-1.401C8.458 1.159 8.213 1 8 1c-.213 0-.458.158-.678.599Z"/>
</svg>
</div>
<div class="content">
<h6 class="mb-3">Assurance Voyage</h6>
<h3 class="text-bold mb-10">34567</h3>
</div>
</div>
<!-- End Icon Cart -->
</div>
<!-- End Col -->
<div class="col-xl-3 col-lg-4 col-sm-6">
<div class="icon-card mb-30">
<div class="icon success">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-car-front" viewBox="0 0 16 16">
<path d="M4 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm10 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM6 8a1 1 0 0 0 0 2h4a1 1 0 1 0 0-2H6ZM4.862 4.276 3.906 6.19a.51.51 0 0 0 .497.731c.91-.073 2.35-.17 3.597-.17 1.247 0 2.688.097 3.597.17a.51.51 0 0 0 .497-.731l-.956-1.913A.5.5 0 0 0 10.691 4H5.309a.5.5 0 0 0-.447.276Z"/>
<path d="M2.52 3.515A2.5 2.5 0 0 1 4.82 2h6.362c1 0 1.904.596 2.298 1.515l.792 1.848c.075.175.21.319.38.404.5.25.855.715.965 1.262l.335 1.679c.033.161.049.325.049.49v.413c0 .814-.39 1.543-1 1.997V13.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-1.338c-1.292.048-2.745.088-4 .088s-2.708-.04-4-.088V13.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-1.892c-.61-.454-1-1.183-1-1.997v-.413a2.5 2.5 0 0 1 .049-.49l.335-1.68c.11-.546.465-1.012.964-1.261a.807.807 0 0 0 .381-.404l.792-1.848ZM4.82 3a1.5 1.5 0 0 0-1.379.91l-.792 1.847a1.8 1.8 0 0 1-.853.904.807.807 0 0 0-.43.564L1.03 8.904a1.5 1.5 0 0 0-.03.294v.413c0 .796.62 1.448 1.408 1.484 1.555.07 3.786.155 5.592.155 1.806 0 4.037-.084 5.592-.155A1.479 1.479 0 0 0 15 9.611v-.413c0-.099-.01-.197-.03-.294l-.335-1.68a.807.807 0 0 0-.43-.563 1.807 1.807 0 0 1-.853-.904l-.792-1.848A1.5 1.5 0 0 0 11.18 3H4.82Z"/>
</svg>
</div>
<div class="content">
<h6 class="mb-3">Assurance Automobile</h6>
<h3 class="text-bold mb-10">74,567</h3>
</div>
</div>
<!-- End Icon Cart -->
</div>
<!-- End Col -->
<div class="col-xl-3 col-lg-4 col-sm-6">
<div class="icon-card mb-30">
<div class="icon primary">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-house-door-fill" viewBox="0 0 16 16">
<path d="M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z"/>
</svg>
</div>
<div class="content">
<h6 class="mb-3">Assurance Habitation</h6>
<h3 class="text-bold mb-10">24,567</h3>
<p class="text-sm text-danger">
</div>
</div>
<!-- End Icon Cart -->
</div>
<!-- End Col -->
<div class="col-xl-3 col-lg-4 col-sm-6">
<div class="icon-card mb-30">
<div class="icon orange">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-lungs" viewBox="0 0 16 16">
<path d="M8.5 1.5a.5.5 0 1 0-1 0v5.243L7 7.1V4.72C7 3.77 6.23 3 5.28 3c-.524 0-1.023.27-1.443.592-.431.332-.847.773-1.216 1.229-.736.908-1.347 1.946-1.58 2.48-.176.405-.393 1.16-.556 2.011-.165.857-.283 1.857-.241 2.759.04.867.233 1.79.838 2.33.67.6 1.622.556 2.741-.004l1.795-.897A2.5 2.5 0 0 0 7 11.264V10.5a.5.5 0 0 0-1 0v.764a1.5 1.5 0 0 1-.83 1.342l-1.794.897c-.978.489-1.415.343-1.628.152-.28-.25-.467-.801-.505-1.63-.037-.795.068-1.71.224-2.525.157-.82.357-1.491.491-1.8.19-.438.75-1.4 1.44-2.25.342-.422.703-.799 1.049-1.065.358-.276.639-.385.833-.385a.72.72 0 0 1 .72.72v3.094l-1.79 1.28a.5.5 0 0 0 .58.813L8 7.614l3.21 2.293a.5.5 0 1 0 .58-.814L10 7.814V4.72a.72.72 0 0 1 .72-.72c.194 0 .475.11.833.385.346.266.706.643 1.05 1.066.688.85 1.248 1.811 1.439 2.249.134.309.334.98.491 1.8.156.814.26 1.73.224 2.525-.038.829-.224 1.38-.505 1.63-.213.19-.65.337-1.628-.152l-1.795-.897A1.5 1.5 0 0 1 10 11.264V10.5a.5.5 0 0 0-1 0v.764a2.5 2.5 0 0 0 1.382 2.236l1.795.897c1.12.56 2.07.603 2.741.004.605-.54.798-1.463.838-2.33.042-.902-.076-1.902-.24-2.759-.164-.852-.38-1.606-.558-2.012-.232-.533-.843-1.571-1.579-2.479-.37-.456-.785-.897-1.216-1.229C11.743 3.27 11.244 3 10.72 3 9.77 3 9 3.77 9 4.72V7.1l-.5-.357V1.5Z"/>
</svg>
</div>
<div class="content">
<h6 class="mb-3">Assurance Santé</h6>
<h3 class="text-bold mb-10">34567</h3>
</div>
</div>
<!-- End Icon Cart -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
<div class="row">
<div class="col-lg-7">
<div class="card-style mb-30">
<div class="title d-flex flex-wrap justify-content-between">
<div class="left">
<h6 class="text-medium mb-10">Yearly Stats</h6>
<h3 class="text-bold">245,479</h3>
</div>
<div class="right">
<div class="select-style-1">
<div class="select-position select-sm">
<select class="light-bg">
<option value="">Yearly</option>
<option value="">Monthly</option>
<option value="">Weekly</option>
</select>
</div>
</div>
<!-- end select -->
</div>
</div>
<!-- End Title -->
<div class="chart">
<canvas
id="Chart1"
style="width: 100%; height: 400px"
></canvas>
</div>
<!-- End Chart -->
</div>
</div>
<div class="col-lg-5" >
<div class="card-style calendar-card pb-5">
<div id="calendar-mini"></div>
</div>
</div>
</div>
<!-- End Col -->
<div class="col-lg-12">
<div class="card-style mb-30">
<div
class="title d-flex flex-wrap align-items-center justify-content-between"
>
<div class="left">
<h6 class="text-medium mb-30">Sales History</h6>
</div>
<div class="right">
<div class="select-style-1">
<div class="select-position select-sm">
<select class="light-bg">
<option value="">Today</option>
<option value="">Yesterday</option>
</select>
</div>
</div>
<!-- end select -->
</div>
</div>
<!-- End Title -->
<div class="table-responsive">
<table class="table top-selling-table">
<thead>
<tr>
<th>
<h6 class="text-sm text-medium">Products</h6>
</th>
<th class="min-width">
<h6 class="text-sm text-medium">
Category <i class="lni lni-arrows-vertical"></i>
</h6>
</th>
<th class="min-width">
<h6 class="text-sm text-medium">
Revenue <i class="lni lni-arrows-vertical"></i>
</h6>
</th>
<th class="min-width">
<h6 class="text-sm text-medium">
Status <i class="lni lni-arrows-vertical"></i>
</h6>
</th>
<th>
<h6 class="text-sm text-medium text-end">
Actions <i class="lni lni-arrows-vertical"></i>
</h6>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="product">
<div class="image">
<img
src="/images/products/product-mini-1.jpg"
alt=""
/>
</div>
<p class="text-sm">Bedroom</p>
</div>
</td>
<td>
<p class="text-sm">Interior</p>
</td>
<td>
<p class="text-sm">$345</p>
</td>
<td>
<span class="status-btn close-btn">Pending</span>
</td>
<td>
<div class="action justify-content-end">
<button class="edit">
<i class="lni lni-pencil"></i>
</button>
<button
class="more-btn ml-10 dropdown-toggle"
id="moreAction1"
data-bs-toggle="dropdown"
aria-expanded="false"
>
<i class="lni lni-more-alt"></i>
</button>
<ul
class="dropdown-menu dropdown-menu-end"
aria-labelledby="moreAction1"
>
<li class="dropdown-item">
<a href="#0" class="text-gray">Remove</a>
</li>
<li class="dropdown-item">
<a href="#0" class="text-gray">Edit</a>
</li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div class="product">
<div class="image">
<img
src="/images/products/product-mini-2.jpg"
alt=""
/>
</div>
<p class="text-sm">Arm Chair</p>
</div>
</td>
<td>
<p class="text-sm">Interior</p>
</td>
<td>
<p class="text-sm">$345</p>
</td>
<td>
<span class="status-btn warning-btn">Refund</span>
</td>
<td>
<div class="action justify-content-end">
<button class="edit">
<i class="lni lni-pencil"></i>
</button>
<button
class="more-btn ml-10 dropdown-toggle"
id="moreAction1"
data-bs-toggle="dropdown"
aria-expanded="false"
>
<i class="lni lni-more-alt"></i>
</button>
<ul
class="dropdown-menu dropdown-menu-end"
aria-labelledby="moreAction1"
>
<li class="dropdown-item">
<a href="#0" class="text-gray">Remove</a>
</li>
<li class="dropdown-item">
<a href="#0" class="text-gray">Edit</a>
</li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div class="product">
<div class="image">
<img
src="/images/products/product-mini-3.jpg"
alt=""
/>
</div>
<p class="text-sm">Sofa</p>
</div>
</td>
<td>
<p class="text-sm">Interior</p>
</td>
<td>
<p class="text-sm">$345</p>
</td>
<td>
<span class="status-btn success-btn">Completed</span>
</td>
<td>
<div class="action justify-content-end">
<button class="edit">
<i class="lni lni-pencil"></i>
</button>
<button
class="more-btn ml-10 dropdown-toggle"
id="moreAction1"
data-bs-toggle="dropdown"
aria-expanded="false"
>
<i class="lni lni-more-alt"></i>
</button>
<ul
class="dropdown-menu dropdown-menu-end"
aria-labelledby="moreAction1"
>
<li class="dropdown-item">
<a href="#0" class="text-gray">Remove</a>
</li>
<li class="dropdown-item">
<a href="#0" class="text-gray">Edit</a>
</li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div class="product">
<div class="image">
<img
src="/images/products/product-mini-4.jpg"
alt=""
/>
</div>
<p class="text-sm">Kitchen</p>
</div>
</td>
<td>
<p class="text-sm">Interior</p>
</td>
<td>
<p class="text-sm">$345</p>
</td>
<td>
<span class="status-btn close-btn">Canceled</span>
</td>
<td>
<div class="action justify-content-end">
<button class="edit">
<i class="lni lni-pencil"></i>
</button>
<button
class="more-btn ml-10 dropdown-toggle"
id="moreAction1"
data-bs-toggle="dropdown"
aria-expanded="false"
>
<i class="lni lni-more-alt"></i>
</button>
<ul
class="dropdown-menu dropdown-menu-end"
aria-labelledby="moreAction1"
>
<li class="dropdown-item">
<a href="#0" class="text-gray">Remove</a>
</li>
<li class="dropdown-item">
<a href="#0" class="text-gray">Edit</a>
</li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
<!-- End Table -->
</div>
</div>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- end container -->
</section>
<!-- ========== section end ========== -->
<!-- ============ Theme Option End ============= -->
<!-- ========= All Javascript files linkup ======== -->
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/Chart.min.js"></script>
<script src="js/apexcharts.min.js"></script>
<script src="js/dynamic-pie-chart.js"></script>
<script src="js/moment.min.js"></script>
<script src="js/fullcalendar.js"></script>
<script src="js/jvectormap.min.js"></script>
<script src="js/world-merc.js"></script>
<script src="js/polyfill.js"></script>
<script src="js/quill.min.js"></script>
<script src="js/datatable.js"></script>
<script src="js/Sortable.min.js"></script>
<script src="js/main.js"></script>
<script>
// ======== jvectormap activation
var markers = [{
name: "Egypt",
coords: [26.8206, 30.8025]
},
{
name: "Russia",
coords: [61.524, 105.3188]
},
{
name: "Canada",
coords: [56.1304, -106.3468]
},
{
name: "Greenland",
coords: [71.7069, -42.6043]
},
{
name: "Brazil",
coords: [-14.235, -51.9253]
},
];
var jvm = new jsVectorMap({
map: "world_merc",
selector: "#map",
zoomButtons: true,
regionStyle: {
initial: {
fill: "#d1d5db",
},
},
labels: {
markers: {
render: (marker) => marker.name,
},
},
markersSelectable: true,
selectedMarkers: markers.map((marker, index) => {
var name = marker.name;
if (name === "Russia" || name === "Brazil") {
return index;
}
}),
markers: markers,
markerStyle: {
initial: {
fill: "#4A6CF7"
},
selected: {
fill: "#ff5050"
},
},
markerLabelStyle: {
initial: {
fontWeight: 400,
fontSize: 14,
},
},
});
// ====== calendar activation
document.addEventListener("DOMContentLoaded", function() {
var calendarMiniEl = document.getElementById("calendar-mini");
var calendarMini = new FullCalendar.Calendar(calendarMiniEl, {
initialView: "dayGridMonth",
headerToolbar: {
end: "today prev,next",
},
});
calendarMini.render();
});
// =========== chart one start
const ctx1 = document.getElementById("Chart1").getContext("2d");
const chart1 = new Chart(ctx1, {
// The type of chart we want to create
type: "line", // also try bar or other graph types
// The data for our dataset
data: {
labels: [
"Jan",
"Fab",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec",
],
// Information about the dataset
datasets: [{
label: "",
backgroundColor: "transparent",
borderColor: "#4A6CF7",
data: [
600, 800, 750, 880, 940, 880, 900, 770, 920, 890, 976, 1100,
],
pointBackgroundColor: "transparent",
pointHoverBackgroundColor: "#4A6CF7",
pointBorderColor: "transparent",
pointHoverBorderColor: "#fff",
pointHoverBorderWidth: 5,
pointBorderWidth: 5,
pointRadius: 8,
pointHoverRadius: 8,
}, ],
},
// Configuration options
defaultFontFamily: "Inter",
options: {
tooltips: {
callbacks: {
labelColor: function(tooltipItem, chart) {
return {
backgroundColor: "#ffffff",
};
},
},
intersect: false,
backgroundColor: "#f9f9f9",
titleFontFamily: "Inter",
titleFontColor: "#8F92A1",
titleFontColor: "#8F92A1",
titleFontSize: 12,
bodyFontFamily: "Inter",
bodyFontColor: "#171717",
bodyFontStyle: "bold",
bodyFontSize: 16,
multiKeyBackground: "transparent",
displayColors: false,
xPadding: 30,
yPadding: 10,
bodyAlign: "center",
titleAlign: "center",
},
title: {
display: false,
},
legend: {
display: false,
},
scales: {
yAxes: [{
gridLines: {
display: false,
drawTicks: false,
drawBorder: false,
},
ticks: {
padding: 35,
max: 1200,
min: 500,
},
}, ],
xAxes: [{
gridLines: {
drawBorder: false,
color: "rgba(143, 146, 161, .1)",
zeroLineColor: "rgba(143, 146, 161, .1)",
},
ticks: {
padding: 20,
},
}, ],
},
},
});
// =========== chart one end
// =========== chart two start
const ctx2 = document.getElementById("Chart2").getContext("2d");
const chart2 = new Chart(ctx2, {
// The type of chart we want to create
type: "bar", // also try bar or other graph types
// The data for our dataset
data: {
labels: [
"Jan",
"Fab",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec",
],
// Information about the dataset
datasets: [{
label: "",
backgroundColor: "#4A6CF7",
barThickness: 6,
maxBarThickness: 8,
data: [
600, 700, 1000, 700, 650, 800, 690, 740, 720, 1120, 876, 900,
],
}, ],
},
// Configuration options
options: {
borderColor: "#F3F6F8",
borderWidth: 15,
backgroundColor: "#F3F6F8",
tooltips: {
callbacks: {
labelColor: function(tooltipItem, chart) {
return {
backgroundColor: "rgba(104, 110, 255, .0)",
};
},
},
backgroundColor: "#F3F6F8",
titleFontColor: "#8F92A1",
titleFontSize: 12,
bodyFontColor: "#171717",
bodyFontStyle: "bold",
bodyFontSize: 16,
multiKeyBackground: "transparent",
displayColors: false,
xPadding: 30,
yPadding: 10,
bodyAlign: "center",
titleAlign: "center",
},
title: {
display: false,
},
legend: {
display: false,
},
scales: {
yAxes: [{
gridLines: {
display: false,
drawTicks: false,
drawBorder: false,
},
ticks: {
padding: 35,
max: 1200,
min: 0,
},
}, ],
xAxes: [{
gridLines: {
display: false,
drawBorder: false,
color: "rgba(143, 146, 161, .1)",
zeroLineColor: "rgba(143, 146, 161, .1)",
},
ticks: {
padding: 20,
},
}, ],
},
},
});
// =========== chart two end
// =========== chart three start
const ctx3 = document.getElementById("Chart3").getContext("2d");
const chart3 = new Chart(ctx3, {
// The type of chart we want to create
type: "line", // also try bar or other graph types
// The data for our dataset
data: {
labels: [
"Jan",
"Fab",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec",
],
// Information about the dataset
datasets: [{
label: "Revenue",
backgroundColor: "transparent",
borderColor: "#4a6cf7",
data: [80, 120, 110, 100, 130, 150, 115, 145, 140, 130, 160, 210],
pointBackgroundColor: "transparent",
pointHoverBackgroundColor: "#4a6cf7",
pointBorderColor: "transparent",
pointHoverBorderColor: "#fff",
pointHoverBorderWidth: 3,
pointBorderWidth: 5,
pointRadius: 5,
pointHoverRadius: 8,
},
{
label: "Profit",
backgroundColor: "transparent",
borderColor: "#9b51e0",
data: [
120, 160, 150, 140, 165, 210, 135, 155, 170, 140, 130, 200,
],
pointBackgroundColor: "transparent",
pointHoverBackgroundColor: "#9b51e0",
pointBorderColor: "transparent",
pointHoverBorderColor: "#fff",
pointHoverBorderWidth: 3,
pointBorderWidth: 5,
pointRadius: 5,
pointHoverRadius: 8,
},
{
label: "Order",
backgroundColor: "transparent",
borderColor: "#f2994a",
data: [180, 110, 140, 135, 100, 90, 145, 115, 100, 110, 115, 150],
pointBackgroundColor: "transparent",
pointHoverBackgroundColor: "#f2994a",
pointBorderColor: "transparent",
pointHoverBorderColor: "#fff",
pointHoverBorderWidth: 3,
pointBorderWidth: 5,
pointRadius: 5,
pointHoverRadius: 8,
},
],
},
// Configuration options
options: {
tooltips: {
intersect: false,
backgroundColor: "#fbfbfb",
titleFontColor: "#8F92A1",
titleFontSize: 16,
titleFontFamily: "Inter",
titleFontStyle: "400",
bodyFontFamily: "Inter",
bodyFontColor: "#171717",
bodyFontSize: 16,
multiKeyBackground: "transparent",
displayColors: false,
xPadding: 30,
yPadding: 15,
borderColor: "rgba(143, 146, 161, .1)",
borderWidth: 1,
title: false,
},
title: {
display: false,
},
layout: {
padding: {
top: 0,
},
},
legend: false,
scales: {
yAxes: [{
gridLines: {
display: false,
drawTicks: false,
drawBorder: false,
},
ticks: {
padding: 35,
max: 300,
min: 50,
},
}, ],
xAxes: [{
gridLines: {
drawBorder: false,
color: "rgba(143, 146, 161, .1)",
zeroLineColor: "rgba(143, 146, 161, .1)",
},
ticks: {
padding: 20,
},
}, ],
},
},
});
// =========== chart three end
// ================== chart four start
const ctx4 = document.getElementById("Chart4").getContext("2d");
const chart4 = new Chart(ctx4, {
// The type of chart we want to create
type: "bar", // also try bar or other graph types
// The data for our dataset
data: {
labels: ["Jan", "Fab", "Mar", "Apr", "May", "Jun"],
// Information about the dataset
datasets: [{
label: "",
backgroundColor: "#4A6CF7",
barThickness: "flex",
maxBarThickness: 8,
data: [600, 700, 1000, 700, 650, 800],
},
{
label: "",
backgroundColor: "#d50100",
barThickness: "flex",
maxBarThickness: 8,
data: [690, 740, 720, 1120, 876, 900],
},
],
},
// Configuration options
options: {
borderColor: "#F3F6F8",
borderWidth: 15,
backgroundColor: "#F3F6F8",
tooltips: {
callbacks: {
labelColor: function(tooltipItem, chart) {
return {
backgroundColor: "rgba(104, 110, 255, .0)",
};
},
},
backgroundColor: "#F3F6F8",
titleFontColor: "#8F92A1",
titleFontSize: 12,
bodyFontColor: "#171717",
bodyFontStyle: "bold",
bodyFontSize: 16,
multiKeyBackground: "transparent",
displayColors: false,
xPadding: 30,
yPadding: 10,
bodyAlign: "center",
titleAlign: "center",
},
title: {
display: false,
},
legend: {
display: false,
},
scales: {
yAxes: [{
gridLines: {
display: false,
drawTicks: false,
drawBorder: false,
},
ticks: {
padding: 35,
max: 1200,
min: 0,
},
}, ],
xAxes: [{
gridLines: {
display: false,
drawBorder: false,
color: "rgba(143, 146, 161, .1)",
zeroLineColor: "rgba(143, 146, 161, .1)",
},
ticks: {
padding: 20,
},
}, ],
},
},
});
// =========== chart four end
</script>
<?php
include "menu.php";
?>