ok
Mini Shell
<?php include "header.php";
$statement = $pdo->prepare("SELECT * FROM customer");
$statement->execute();
$total_customer= $statement->rowCount();
$statement = $pdo->prepare("SELECT * FROM supplier");
$statement->execute();
$total_supplier= $statement->rowCount();
$statement = $pdo->prepare("SELECT * FROM product");
$statement->execute();
$total_product= $statement->rowCount();
$statement = $pdo->prepare("SELECT * FROM product where weight_type=1");
$statement->execute();
$total_product1= $statement->rowCount();
$statement = $pdo->prepare("SELECT * FROM product where weight_type=2");
$statement->execute();
$total_product2= $statement->rowCount();
?>
<style>
/* h2{
text-align:center;
padding: 20px;
}*/
/* Slider */
.slick-slide {
margin: 0px 20px;
}
.slick-slide img {
width: 100%;
}
.slick-slider
{
position: relative;
display: block;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list
{
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}
.slick-list:focus
{
outline: none;
}
.slick-list.dragging
{
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list
{
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track
{
position: relative;
top: 0;
left: 0;
display: block;
}
.slick-track:before,
.slick-track:after
{
display: table;
content: '';
}
.slick-track:after
{
clear: both;
}
.slick-loading .slick-track
{
visibility: hidden;
}
.slick-slide
{
display: none;
float: left;
height: 100%;
min-height: 1px;
}
[dir='rtl'] .slick-slide
{
float: right;
}
.slick-slide img
{
display: block;
}
.slick-slide.slick-loading img
{
display: none;
}
.slick-slide.dragging img
{
pointer-events: none;
}
.slick-initialized .slick-slide
{
display: block;
}
.slick-loading .slick-slide
{
visibility: hidden;
}
.slick-vertical .slick-slide
{
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}
body{
background :#f4f0f0e6 !important;
}
</style>
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">-->
<div class="row" style="margin-top:5%;padding:20px;">
<a href="product.php">
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="info-box">
<span class="info-box-icon bg-aqua" style="background: #df4646 !important;"><i class="fa fa-product-hunt" style="margin-top:22px;display:block;"></i></span>
<div class="info-box-content">
<span class="info-box-text" style="margin-top:20px;font-weight:bolder;">Total Products</span>
<span class="info-box-number"><?=$total_product?></span>
</div>
</div>
</div>
</a>
<a href="product.php">
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="info-box">
<span class="info-box-icon bg-aqua" style="background:#b12d2d !important;"><i class="fa fa-product-hunt" style="margin-top:22px;display:block;"></i></span>
<div class="info-box-content">
<span class="info-box-text" style="margin-top:20px;font-weight:bolder;">Total Pieces Product</span>
<span class="info-box-number"><?=$total_product1?></span>
</div>
</div>
</div>
</a>
<a href="product.php">
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="info-box">
<span class="info-box-icon bg-aqua" style="background: #6278cd !important;"><i class="fa fa-product-hunt" style="margin-top:22px;display:block;"></i></span>
<div class="info-box-content">
<span class="info-box-text" style="margin-top:20px;font-weight:bolder;">Total Weight Product</span>
<span class="info-box-number"><?=$total_product2?></span>
</div>
</div>
</div>
</a>
<a href="customers.php">
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="info-box">
<span class="info-box-icon bg-aqua" style="background: #46cddf !important;"><i class="fa fa-users" style="margin-top:22px;display:block;"></i></span>
<div class="info-box-content">
<span class="info-box-text" style="margin-top:20px;font-weight:bolder;">Total Customers</span>
<span class="info-box-number"><?=$total_customer?></span>
</div>
</div>
</div>
</a>
<a href="supplier.php">
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="info-box">
<span class="info-box-icon bg-aqua" style="background: #df46a4 !important;"><i class="fa fa-user" style="margin-top:22px;display:block;"></i></span>
<div class="info-box-content">
<span class="info-box-text" style="margin-top:20px;font-weight:bolder;">Total Suppliers</span>
<span class="info-box-number"><?=$total_supplier?></span>
</div>
</div>
</div>
</a>
<a href="#">
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="info-box">
<span class="info-box-icon bg-aqua" style="background: #f39c12 !important;"><i class="fa fa-inr" style="margin-top:22px;display:block;"></i></span>
<div class="info-box-content">
<span class="info-box-text" style="margin-top:20px;font-weight:bolder;">Total Amount</span>
<span class="info-box-number"> ₹ 10000</span>
</div>
</div>
</div>
</a>
<a href="#">
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="info-box">
<span class="info-box-icon bg-aqua" style="background: #df4646 !important;"><i class="fa fa-inr" style="margin-top:22px;display:block;"></i></span>
<div class="info-box-content">
<span class="info-box-text" style="margin-top:20px;font-weight:bolder;">Total Profit</span>
<span class="info-box-number"> ₹ 10000</span>
</div>
</div>
</div>
</a>
</div>
<div class="row" style="margin-top:1%;">
<div class="col-md-6">
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
</div>
<div class="col-md-6">
<div id="chartContainer1" style="height: 300px; width: 100%;"></div>
</div>
</div>
<div class="row" style="margin-top:2%">
<div class="col-md-12">
<div id="chartContainer2" style="height: 500px; width: 100%;"></div>
</div>
</div>
<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
<script>
$(document).ready(function(){
$('.customer-logos').slick({
slidesToShow: 6,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 1500,
arrows: false,
dots: false,
pauseOnHover: false,
responsive: [{
breakpoint: 768,
settings: {
slidesToShow: 4
}
}, {
breakpoint: 520,
settings: {
slidesToShow: 3
}
}]
});
});
</script>
<script>
window.onload = function () {
var options = {
title: {
text: "Product Sell Report Of "
},
subtitles: [{
text: "This Year"
}],
animationEnabled: true,
data: [{
type: "pie",
startAngle: 40,
toolTipContent: "<b>{label}</b>: {y} Gram",
showInLegend: "true",
legendText: "{label}",
indexLabelFontSize: 16,
indexLabel: "{label} - {y} Gram",
dataPoints: [
{ y: 30, label: "Bangles " },
{ y: 70, label: "Rings" },
{ y: 50, label: "Ear Rings" },
{ y: 100, label: "Bracelet" },
{ y: 200, label: "Kunguma Chimil " },
{ y: 10, label: "Deer Heart Necklace" },
{ y: 20, label: "Kamatchi Diya " },
{ y: 5, label: "Watch" }
]
}]
};
$("#chartContainer").CanvasJSChart(options);
var optionsstart = {
animationEnabled: true,
theme: "dark1",
title:{
text: "Product Total Sell Chart 2016-17"
},
axisY :{
includeZero: false,
prefix: "₹",
lineThickness: 0
},
toolTip: {
shared: true
},
legend: {
fontSize: 13
},
data: [{
type: "splineArea",
showInLegend: true,
name: "Total Amount",
yValueFormatString: "$#,##0",
xValueFormatString: "MMM YYYY",
dataPoints: [
{ x: new Date(2016, 2), y: 28000 },
{ x: new Date(2016, 3), y: 31500 },
{ x: new Date(2016, 4), y: 28500 },
{ x: new Date(2016, 5), y: 30400 },
{ x: new Date(2016, 6), y: 26900 },
{ x: new Date(2016, 7), y: 31400 },
{ x: new Date(2016, 8), y: 31400 },
{ x: new Date(2016, 9), y: 31000 },
{ x: new Date(2016, 10), y: 33000 },
{ x: new Date(2016, 11), y: 35000 },
{ x: new Date(2017, 0), y: 37900 },
{ x: new Date(2017, 1), y: 38000 }
]
},
{
type: "splineArea",
showInLegend: true,
name: "Profit",
yValueFormatString: "$#,##0",
dataPoints: [
{ x: new Date(2016, 2), y: 18100 },
{ x: new Date(2016, 3), y: 15000 },
{ x: new Date(2016, 4), y: 14000 },
{ x: new Date(2016, 5), y: 18500 },
{ x: new Date(2016, 6), y: 18500 },
{ x: new Date(2016, 7), y: 21800 },
{ x: new Date(2016, 8), y: 20000 },
{ x: new Date(2016, 9), y: 23000 },
{ x: new Date(2016, 10), y: 22000 },
{ x: new Date(2016, 11), y: 24000 },
{ x: new Date(2017, 0), y: 23000 },
{ x: new Date(2017, 1), y: 20500 }
]
},
{
type: "splineArea",
showInLegend: true,
name: "Maintanance",
yValueFormatString: "$#,##0",
dataPoints: [
{ x: new Date(2016, 2), y: 13100 },
{ x: new Date(2016, 3), y: 8000 },
{ x: new Date(2016, 4), y: 5400 },
{ x: new Date(2016, 5), y: 4000 },
{ x: new Date(2016, 6), y: 7000 },
{ x: new Date(2016, 7), y: 7500 },
{ x: new Date(2016, 8), y: 6200 },
{ x: new Date(2016, 9), y: 8500 },
{ x: new Date(2016, 10), y: 11300 },
{ x: new Date(2016, 11), y: 12500 },
{ x: new Date(2017, 0), y: 10500 },
{ x: new Date(2017, 1), y: 9500 }
]
},
{
type: "splineArea",
showInLegend: true,
yValueFormatString: "$#,##0",
name: "Loss",
dataPoints: [
{ x: new Date(2016, 2), y: 1900 },
{ x: new Date(2016, 3), y: 2300 },
{ x: new Date(2016, 4), y: 1650 },
{ x: new Date(2016, 5), y: 1860 },
{ x: new Date(2016, 6), y: 1200 },
{ x: new Date(2016, 7), y: 1000 },
{ x: new Date(2016, 8), y: 1200 },
{ x: new Date(2016, 9), y: 4500 },
{ x: new Date(2016, 10), y: 1300 },
{ x: new Date(2016, 11), y: 3700 },
{ x: new Date(2017, 0), y: 2700 },
{ x: new Date(2017, 1), y: 2300 }
]
}]
};
$("#chartContainer1").CanvasJSChart(optionsstart);
var chart = new CanvasJS.Chart("chartContainer2", {
animationEnabled: true,
theme: "light2",
title: {
text: "Monthly Sales Data"
},
axisX: {
valueFormatString: "MMM"
},
axisY: {
prefix: "₹",
labelFormatter: addSymbols
},
toolTip: {
shared: true
},
legend: {
cursor: "pointer",
itemclick: toggleDataSeries
},
data: [
{
type: "column",
name: "Actual Sales",
showInLegend: true,
xValueFormatString: "MMMM YYYY",
yValueFormatString: "$#,##0",
dataPoints: [
{ x: new Date(2016, 0), y: 20000 },
{ x: new Date(2016, 1), y: 30000 },
{ x: new Date(2016, 2), y: 25000 },
{ x: new Date(2016, 3), y: 70000, indexLabel: "High Renewals" },
{ x: new Date(2016, 4), y: 50000 },
{ x: new Date(2016, 5), y: 35000 },
{ x: new Date(2016, 6), y: 30000 },
{ x: new Date(2016, 7), y: 43000 },
{ x: new Date(2016, 8), y: 35000 },
{ x: new Date(2016, 9), y: 30000},
{ x: new Date(2016, 10), y: 40000 },
{ x: new Date(2016, 11), y: 50000 }
]
},
{
type: "line",
name: "Expected Sales",
showInLegend: true,
yValueFormatString: "$#,##0",
dataPoints: [
{ x: new Date(2016, 0), y: 40000 },
{ x: new Date(2016, 1), y: 42000 },
{ x: new Date(2016, 2), y: 45000 },
{ x: new Date(2016, 3), y: 45000 },
{ x: new Date(2016, 4), y: 47000 },
{ x: new Date(2016, 5), y: 43000 },
{ x: new Date(2016, 6), y: 42000 },
{ x: new Date(2016, 7), y: 43000 },
{ x: new Date(2016, 8), y: 41000 },
{ x: new Date(2016, 9), y: 45000 },
{ x: new Date(2016, 10), y: 42000 },
{ x: new Date(2016, 11), y: 50000 }
]
},
{
type: "area",
name: "Profit",
markerBorderColor: "white",
markerBorderThickness: 2,
showInLegend: true,
yValueFormatString: "$#,##0",
dataPoints: [
{ x: new Date(2016, 0), y: 5000 },
{ x: new Date(2016, 1), y: 7000 },
{ x: new Date(2016, 2), y: 6000},
{ x: new Date(2016, 3), y: 30000 },
{ x: new Date(2016, 4), y: 20000 },
{ x: new Date(2016, 5), y: 15000 },
{ x: new Date(2016, 6), y: 13000 },
{ x: new Date(2016, 7), y: 20000 },
{ x: new Date(2016, 8), y: 15000 },
{ x: new Date(2016, 9), y: 10000},
{ x: new Date(2016, 10), y: 19000 },
{ x: new Date(2016, 11), y: 22000 }
]
}]
});
chart.render();
function addSymbols(e) {
var suffixes = ["", "K", "M", "B"];
var order = Math.max(Math.floor(Math.log(Math.abs(e.value)) / Math.log(1000)), 0);
if(order > suffixes.length - 1)
order = suffixes.length - 1;
var suffix = suffixes[order];
return CanvasJS.formatNumber(e.value / Math.pow(1000, order)) + suffix;
}
function toggleDataSeries(e) {
if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
} else {
e.dataSeries.visible = true;
}
e.chart.render();
}
}
</script>
<?php include "footer.php";?>
Zerion Mini Shell 1.0