%PDF-
%PDF-
Mini Shell
Mini Shell
<div class="content-wrapper">
<section class="content-header">
<h1>Dashboard</h1>
</section>
<section class="content">
<div class="row">
<div class="col-lg-4 col-xs-6">
<div class="small-box bg-yellow">
<div class="inner">
<h3><?=$details;?></h3>
<p>Orders</p>
</div>
<div class="icon">
<i class="ion ion-person-add"></i>
</div>
<a href="<?=base_url();?>emp/" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
</div>
</div>
<div class="col-lg-4 col-xs-6">
<div class="small-box bg-green">
<div class="inner">
<h3><?=$hot_leads;?></h3>
<p>Hot Leads</p>
</div>
<div class="icon">
<i class="fa fa-tag"></i>
</div>
<a href="<?=base_url();?>user" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
</div>
</div>
<div class="col-lg-4 col-xs-6">
<div class="small-box bg-blue">
<div class="inner">
<h3><?=$closed_leads;?></h3>
<p>Hot Leads</p>
</div>
<div class="icon">
<i class="fa fa-shopping-cart"></i>
</div>
<a href="<?=base_url();?>user" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<!-- AREA CHART -->
<div class="card card-primary">
<div class="card-header">
<h3 class="card-title">Area Chart</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
</button>
<button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i></button>
</div>
</div>
<div class="card-body">
<div class="chart">
<canvas id="areaChart" style="height:250px; min-height:250px"></canvas>
</div>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
<!-- DONUT CHART -->
<div class="card card-danger">
<div class="card-header">
<h3 class="card-title">Enquiry Source Chart</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
</button>
<button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i></button>
</div>
</div>
<div class="card-body">
<canvas id="donutChart" style="height:230px; min-height:230px"></canvas>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
<!-- PIE CHART -->
<div class="card card-danger">
<div class="card-header">
<h3 class="card-title">Pie Chart</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
</button>
<button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i></button>
</div>
</div>
<div class="card-body">
<canvas id="pieChart" style="height:230px; min-height:230px"></canvas>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.col (LEFT) -->
<div class="col-md-6">
<!-- LINE CHART -->
<div class="card card-info">
<div class="card-header">
<h3 class="card-title">Line Chart</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
</button>
<button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i></button>
</div>
</div>
<div class="card-body">
<div class="chart">
<canvas id="lineChart" style="height:250px; min-height:250px"></canvas>
</div>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
<!-- BAR CHART -->
<div class="card card-success">
<div class="card-header">
<h3 class="card-title">Bar Chart</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
</button>
<button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i></button>
</div>
</div>
<div class="card-body">
<div class="chart">
<canvas id="barChart" style="height:230px; min-height:230px"></canvas>
</div>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.col (RIGHT) -->
</div>
<div clas="row">
hello
<div class="chart-container">
<div class="bar-chart-container">
<canvas id="bar-chart"></canvas>
</div>
</div>
<!-- javascript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(function(){
//get the bar chart canvas
var cData = JSON.parse(`<?php echo $chart_data; ?>`);
var ctx = $("#bar-chart");
//bar chart data
var data = {
labels: cData.label,
datasets: [
{
label: cData.label,
data: cData.data,
backgroundColor: [
"#DEB887",
"#A9A9A9",
"#DC143C",
"#F4A460",
"#2E8B57",
"#1D7A46",
"#CDA776",
"#CDA776",
"#989898",
"#CB252B",
"#E39371",
],
borderColor: [
"#CDA776",
"#989898",
"#CB252B",
"#E39371",
"#1D7A46",
"#F4A460",
"#CDA776",
"#DEB887",
"#A9A9A9",
"#DC143C",
"#F4A460",
"#2E8B57",
],
borderWidth: [1, 1, 1, 1, 1,1,1,1, 1, 1, 1,1,1]
}
]
};
//options
var options = {
responsive: true,
title: {
display: true,
position: "top",
text: "Monthly Registered Users Count",
fontSize: 18,
fontColor: "#111"
},
legend: {
display: true,
position: "bottom",
labels: {
fontColor: "#333",
fontSize: 16
}
}
};
//create bar Chart class object
var chart1 = new Chart(ctx, {
type: "bar",
data: data,
options: options
});
});
</script>
</div>
</section>
</div>
<script src="<?php echo base_url().'assets/';?>plugins/chart.js/Chart.min.js"></script>
<!-- AdminLTE App -->
<script src=".<?php echo base_url().'assets/';?>dist/js/adminlte.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="<?php echo base_url().'assets/';?>dist/js/demo.js"></script>
<script src="<?php echo base_url().'assets/';?>plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="<?php echo base_url().'assets/';?>plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- page script -->
<?php $hi=10;?>
<script>
$(function () {
/* ChartJS
* -------
* Here we will create a few charts using ChartJS
*/
//--------------
//- AREA CHART -
//--------------
// Get context with jQuery - using jQuery's .get() method.
var areaChartCanvas = $('#areaChart').get(0).getContext('2d')
var areaChartData = {
labels : ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'July','Aug'],
datasets: [
{
label : 'Digital Goods',
backgroundColor : 'rgba(60,141,188,0.9)',
borderColor : 'rgba(60,141,188,0.8)',
pointRadius : false,
pointColor : '#3b8bba',
pointStrokeColor : 'rgba(60,141,188,1)',
pointHighlightFill : '#fff',
pointHighlightStroke: 'rgba(60,141,188,1)',
data : chart_Data
},
{
label : 'Electronics',
backgroundColor : 'rgba(210, 214, 222, 1)',
borderColor : 'rgba(210, 214, 222, 1)',
pointRadius : false,
pointColor : 'rgba(210, 214, 222, 1)',
pointStrokeColor : '#c1c7d1',
pointHighlightFill : '#fff',
pointHighlightStroke: 'rgba(220,220,220,1)',
data : [0, 0, 0, 0, 0, 0, 0,55]
},
]
}
var areaChartOptions = {
maintainAspectRatio : false,
responsive : true,
legend: {
display: false
},
scales: {
xAxes: [{
gridLines : {
display : false,
}
}],
yAxes: [{
gridLines : {
display : false,
}
}]
}
}
// This will get the first returned node in the jQuery collection.
var areaChart = new Chart(areaChartCanvas, {
type: 'line',
data: areaChartData,
options: areaChartOptions
})
//-------------
//- LINE CHART -
//--------------
var lineChartCanvas = $('#lineChart').get(0).getContext('2d')
var lineChartOptions = jQuery.extend(true, {}, areaChartOptions)
var lineChartData = jQuery.extend(true, {}, areaChartData)
lineChartData.datasets[0].fill = false;
lineChartData.datasets[1].fill = false;
lineChartOptions.datasetFill = false
var lineChart = new Chart(lineChartCanvas, {
type: 'line',
data: lineChartData,
options: lineChartOptions
})
//-------------
//- DONUT CHART -
//-------------
// Get context with jQuery - using jQuery's .get() method.
var donutChartCanvas = $('#donutChart').get(0).getContext('2d')
var donutData = {
labels: [
'Showroom Walk In',
'Kiosk',
'Mela',
'Safari',
],
datasets: [
{
data: [700,500,400,600],
backgroundColor : ['#f56954', '#00a65a', '#f39c12', '#00c0ef'],
}
]
}
var donutOptions = {
maintainAspectRatio : false,
responsive : true,
}
//Create pie or douhnut chart
// You can switch between pie and douhnut using the method below.
var donutChart = new Chart(donutChartCanvas, {
type: 'doughnut',
data: donutData,
options: donutOptions
})
//-------------
//- PIE CHART -
//-------------
// Get context with jQuery - using jQuery's .get() method.
var pieChartCanvas = $('#pieChart').get(0).getContext('2d')
var pieData = donutData;
var pieOptions = {
maintainAspectRatio : false,
responsive : true,
}
//Create pie or douhnut chart
// You can switch between pie and douhnut using the method below.
var pieChart = new Chart(pieChartCanvas, {
type: 'pie',
data: pieData,
options: pieOptions
})
//-------------
//- BAR CHART -
//-------------
var barChartCanvas = $('#barChart').get(0).getContext('2d')
var barChartData = jQuery.extend(true, {}, areaChartData)
var temp0 = areaChartData.datasets[0]
var temp1 = areaChartData.datasets[1]
barChartData.datasets[0] = temp1
barChartData.datasets[1] = temp0
var barChartOptions = {
responsive : true,
maintainAspectRatio : false,
datasetFill : false
}
var barChart = new Chart(barChartCanvas, {
type: 'bar',
data: barChartData,
options: barChartOptions
})
//---------------------
//- STACKED BAR CHART -
//---------------------
var stackedBarChartCanvas = $('#stackedBarChart').get(0).getContext('2d')
var stackedBarChartData = jQuery.extend(true, {}, barChartData)
var stackedBarChartOptions = {
responsive : true,
maintainAspectRatio : false,
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
}
var stackedBarChart = new Chart(stackedBarChartCanvas, {
type: 'bar',
data: stackedBarChartData,
options: stackedBarChartOptions
})
})
</script>
Zerion Mini Shell 1.0