<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Dashboard | Union Assessment and Certification LLC</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content="" />
<meta content="Indev Consultancy Pvt. Ltd." name="author" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="shortcut icon" href="assets/images/fav.png">
<link href="assets/css/app.min.css" id="app-stylesheet" rel="stylesheet" type="text/css" />
</head>
<body  data-topbar="light">
<div id="wrapper">
<?php include("include/header.php");?>
<div class="content-page">
<div class="content">
<div class="page-title-box">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="d-flex d-title-box-block align-items-center justify-content-between">
<h4 class="page-title"><b>Survey Dashboard</b>: Agriculture Based Census Survey</h4>

<div class="page-title-right">
<ol class="breadcrumb m-0">
<li class="breadcrumb-item"><a href="dashboard.php">Home</a></li>
<li class="breadcrumb-item ">Survey Listing</li>
<li class="breadcrumb-item active">Dashboard</li>
</ol>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid">


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" integrity="sha256-mmgLkCYLUQbXn0B1SRqzHar6dCnv9oZFPEC1g1cwlkk=" crossorigin="anonymous" />
<style>
.card {
    background-color: #fff;
    border-radius: 10px;
    border: none;
    position: relative;
    margin-bottom: 30px;
    box-shadow: 0 0.46875rem 2.1875rem rgba(90,97,105,0.1), 0 0.9375rem 1.40625rem rgba(90,97,105,0.1), 0 0.25rem 0.53125rem rgba(90,97,105,0.12), 0 0.125rem 0.1875rem rgba(90,97,105,0.1);
}
.l-bg-cherry {
    background: linear-gradient(to right, #493240, #f09) !important;
    color: #fff;
}

.l-bg-blue-dark {
    background: linear-gradient(to right, #373b44, #4286f4) !important;
    color: #fff;
}

.l-bg-green-dark {
    background: linear-gradient(to right, #0a504a, #38ef7d) !important;
    color: #fff;
}

.l-bg-orange-dark {
    background: linear-gradient(to right, #a86008, #ffba56) !important;
    color: #fff;
}

.card .card-statistic-3 .card-icon-large .fas, .card .card-statistic-3 .card-icon-large .far, .card .card-statistic-3 .card-icon-large .fab, .card .card-statistic-3 .card-icon-large .fal {
    font-size: 70px;
}

.card .card-statistic-3 .card-icon {
    text-align: center;
    line-height: 50px;
    margin-left: 15px;
    color: #000;
    position: absolute;
    right: 10px;
    top: 20px;
    opacity: 0.1;
}
.card-title { color:#fcf5f5;}
.maincount {    font-size: 30px;
    font-weight: 700;
    color: #fff;}
.l-bg-cyan {
    background: linear-gradient(135deg, #289cf5, #84c0ec) !important;
    color: #fff;
}

.l-bg-green {
    background: linear-gradient(135deg, #23bdb8 0%, #43e794 100%) !important;
    color: #fff;
}

.l-bg-orange {
    background: linear-gradient(to right, #f9900e, #ffba56) !important;
    color: #fff;
}

.l-bg-cyan {
    background: linear-gradient(135deg, #289cf5, #84c0ec) !important;
    color: #fff;
}
#container {
		  height:250px; 
		}
#container11 {
		  height:175px; 
		}
#container1 {
		  height:250px; 
		}
.mb-4, .my-4 {
    margin-bottom: 0.25rem!important;
}
.my-card
{
    position:absolute;
    left:40%;
    top:-20px;
    border-radius:50%;
}
.list-group-item {
    border: 1px solid #fcfcfc;
    border-left: none;
    border-right: none;
    background-color: antiquewhite;
}
#containermap {
    height: 500px; 
    min-width: 310px; 
    max-width: 800px; 
    margin: 0 auto; 
}
.loading {
    margin-top: 10em;
    text-align: center;
    color: gray;
}

</style>

    <div class="row ">
        <div class="col-xl-3 col-lg-6">
            <div class="card l-bg-cherry">
                <div class="card-statistic-3 p-4">
                    <div class="card-icon card-icon-large"><i class="fas fa-layer-group"></i></div>
                    <div class="mb-4">
                        <h5 class="card-title mb-0">States</h5>
                    </div>
                    <div class="row align-items-center mb-2 d-flex">
                        <div class="col-8">
                            <h2 class="d-flex align-items-center mb-0 maincount">
                                3
                            </h2>
                        </div>
                        
                    </div>
                    <div class="progress mt-1 " data-height="8" style="height: 8px;">
                        <div class="progress-bar l-bg-cyan" role="progressbar" data-width="25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%;"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-lg-6">
            <div class="card l-bg-blue-dark">
                <div class="card-statistic-3 p-4">
                    <div class="card-icon card-icon-large"><i class="fas fa-bezier-curve"></i></div>
                    <div class="mb-4">
                        <h5 class="card-title mb-0">District</h5>
                    </div>
                    <div class="row align-items-center mb-2 d-flex">
                        <div class="col-8">
                            <h2 class="d-flex align-items-center mb-0 maincount">
                                13
                            </h2>
                        </div>
                        
                    </div>
                    <div class="progress mt-1 " data-height="8" style="height: 8px;">
                        <div class="progress-bar l-bg-green" role="progressbar" data-width="25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%;"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-lg-6">
            <div class="card l-bg-green-dark">
                <div class="card-statistic-3 p-4">
                    <div class="card-icon card-icon-large"><i class="fas fa-users"></i></div>
                    <div class="mb-4">
                        <h5 class="card-title mb-0">Surveyor</h5>
                    </div>
                    <div class="row align-items-center mb-2 d-flex">
                        <div class="col-8">
                            <h2 class="d-flex align-items-center mb-0 maincount">
                                64
                            </h2>
                        </div>
                       
                    </div>
                    <div class="progress mt-1 " data-height="8" style="height: 8px;">
                        <div class="progress-bar l-bg-orange" role="progressbar" data-width="25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%;"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-lg-6">
            <div class="card l-bg-orange-dark">
                <div class="card-statistic-3 p-4">
                    <div class="card-icon card-icon-large"><i class="fas fa-chart-bar"></i></div>
                    <div class="mb-4">
                        <h5 class="card-title mb-0">Data Collected</h5>
                    </div>
                    <div class="row align-items-center mb-2 d-flex">
                        <div class="col-8">
                            <h2 class="d-flex align-items-center mb-0 maincount">
                                <?=number_format("8239")?>
                            </h2>
                        </div>
                        
                    </div>
                    <div class="progress mt-1 " data-height="8" style="height: 8px;">
                        <div class="progress-bar l-bg-cyan" role="progressbar" data-width="25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
	
	

<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
			<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/in/custom/in-all-disputed.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>

<div class="row">         
    <div class="col-xl-4">
        <div class="card-box heading-design">
            <h4 class="header-title mt-0 design-1">Coverage</h4>
            <div id="container1" class="text-center" style="min-height:250px">
            </div>
			
        </div>
    </div>
     <div class="col-xl-8">
        <div class="card-box heading-design">
            <h4 class="header-title mt-0 design-1">Daily Survey Data </h4>
            <div id="container" class="widget-chart text-center" style="min-height:250px">
            </div>
        </div>
    </div>
</div>
<div class="row">         
    <div class="col-xl-7">
        <div class="card-box heading-design">
            <h4 class="header-title mt-0 design-1">State Wise Status</h4>
            <div  id="containerdrilldown" class="widget-chart text-center" style="min-height:250px">
			 </div>
        </div>
	<div class="col-xl-12">
        <div class="card-box heading-design">
            
            <div id="container11" class="widget-chart text-center" style="min-height:170px">
            </div>
        </div>
    </div>
    </div>
	
     <div class="col-xl-5">
        <div class="card-box heading-design">
            <h4 class="header-title mt-0 design-1">Map</h4>

            <div id="containermap" class="widget-chart text-center" style="min-height:250px">
			
            </div>
        </div>
    </div>
	
</div>
</div>
</div>
<?php include("include/footer.php");?>
</div>
</div>
<script src="assets/js/vendor.min.js"></script>
<script src="assets/js/app.min.js"></script>
<script src="assets/libs/select2/select2.full.min.js"></script>
<script src="assets/libs/moment/moment.js"></script>
<script src="assets/libs/multiselect/jquery.multi-select.js"></script>
<script src="assets/libs/select2/select2.full.min.js"></script>
<script src="assets/libs/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
<script src="assets/libs/bootstrap-daterangepicker/daterangepicker.js"></script>
<script src="assets/libs/jquery-mask-plugin/jquery.mask.min.js"></script>
<script src="assets/libs/dropify/dropify.min.js"></script>
<script src="assets/js/custom.js"></script>  
<script>
Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  title: {
    text: ''
  },
  xAxis: {
    type: 'category',
    labels: {
      rotation: -45,
      style: {
        fontSize: '13px',
        fontFamily: 'Verdana, sans-serif'
      }
    }
  },
  yAxis: {
    min: 0,
    title: {
      text: 'Total Survey'
    }
  },
  legend: {
    enabled: false
  },
  tooltip: {
    pointFormat: 'Survey: <b>{point.y:.0f} Survey</b>'
  },
  series: [{
    name: 'Population',
    data: [
	      ['26-Jul', 129],
      ['24-Jul', 72],
      ['23-Jul', 108],
      ['22-Jul', 44],
      ['19-Jul', 167],
      ['17-Jul', 87],
      ['16-Jul', 59],
      ['15-Jul', 77],
      ['14-Jul', 94],
      ['13-Jul', 103],
      ['12-Jul', 81],
      ['10-Jul', 40],
      ['09-Jul', 38],
      ['08-Jul', 13],
      ['07-Jul', 3],
      
    ],
    dataLabels: {
      enabled: true,
      rotation: 0,
      color: '#FFFFFF',
      align: 'right',
      format: '{point.y:.0f}', // one decimal
      y: 10, // 10 pixels down from the top
      style: {
        fontSize: '13px',
        fontFamily: 'Verdana, sans-serif'
      }
    }
  }]
});

Highcharts.chart('container11', {
  chart: {
    type: 'column'
  },
  title: {
    text: 'District Wise Status'
  },
  xAxis: {
    type: 'category',
    labels: {
      rotation: -45,
      style: {
        fontSize: '13px',
        fontFamily: 'Verdana, sans-serif'
      }
    }
  },
  yAxis: {
    min: 0,
    title: {
      text: 'Total Survey'
    }
  },
  legend: {
    enabled: false
  },
  tooltip: {
    pointFormat: 'Survey: <b>{point.y:.0f} Survey</b>'
  },
  series: [{
    name: 'Population',
    data: [
	      ['Saran', 129],
      ['Bardhman', 72],
      ['Asansol', 108],
      ['Gajapati', 44],
      ['Rayagada', 167],
      ['Betiya', 87],
      ['Gopalganj', 59],
      ['Durgapur', 77],
      ['Puri', 94],
      
    ],
    dataLabels: {
      enabled: true,
      rotation: 0,
      color: '#FFFFFF',
      align: 'right',
      format: '{point.y:.0f}', // one decimal
      y: 10, // 10 pixels down from the top
      style: {
        fontSize: '13px',
        fontFamily: 'Verdana, sans-serif'
      }
    }
  }]
});


Highcharts.chart('container1', {
  chart: {
    plotBackgroundColor: null,
    plotBorderWidth: null,
    plotShadow: false,
    type: 'pie'
  },
  title: {
    text: ''
  },
  tooltip: {
    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
  },
  accessibility: {
    point: {
      valueSuffix: '%'
    }
  },
  plotOptions: {
    pie: {
      allowPointSelect: true,
      cursor: 'pointer',
      dataLabels: {
        enabled: false
      },
      showInLegend: true
    }
  },
  series: [{
    name: 'Survey',
    colorByPoint: true,
    data: [{
      name: 'Bihar',
      y: 61.41,
      sliced: true,
      selected: true
    }, {
      name: 'West Bengal',
      y: 11.84
    }, {
      name: 'Odisha',
      y: 10.85
    }]
  }]
});
</script>
<script>
			var data = [
    ['madhya pradesh', 0],
    ['uttar pradesh', 0],
    ['karnataka', 0],
    ['nagaland', 0],
    ['bihar', 4915],
    ['lakshadweep', 0],
    ['andaman and nicobar', 0],
    ['assam', 0],
    ['west bengal', 3356],
    ['puducherry', 0],
    ['daman and diu', 0],
    ['gujarat', 0],
    ['rajasthan', 0],
    ['dadara and nagar havelli', 0],
    ['chhattisgarh', 0],
    ['tamil nadu', 0],
    ['chandigarh', 0],
    ['punjab', 0],
    ['haryana', 0],
    ['andhra pradesh', 0],
    ['maharashtra', 0],
    ['himachal pradesh', 0],
    ['meghalaya', 0],
    ['kerala', 0],
    ['telangana', 0],
    ['mizoram', 0],
    ['tripura', 0],
    ['manipur', 0],
    ['arunanchal pradesh', 0],
    ['jharkhand', 0],
    ['goa', 0],
    ['nct of delhi', 0],
    ['odisha', 4332],
    ['jammu and kashmir', 0],
    ['sikkim', 0],
    ['uttarakhand', 0]
];

// Create the chart
Highcharts.mapChart('containermap', {
    chart: {
        map: 'countries/in/custom/in-all-disputed'
    },

    title: {
        text: ''
    },

    subtitle: {
        text: ''
    },

    mapNavigation: {
        enabled: true,
        buttonOptions: {
            verticalAlign: 'bottom'
        }
    },

    colorAxis: {
        min: 0
    },

    series: [{
        data: data,
        name: 'Survey Data',
        states: {
            hover: {
                color: '#BADA55'
            }
        },
        dataLabels: {
            enabled: true,
            format: '{point.name}'
        }
    }]
});

Highcharts.chart('containerdrilldown', {
    chart: {
        type: 'column'
    },
    title: {
        text: ''
    },
    xAxis: {
        type: 'category'
    },

    legend: {
        enabled: false
    },

    plotOptions: {
        series: {
            borderWidth: 0,
            dataLabels: {
                enabled: true
            }
        }
    },

    series: [{
        name: 'States',
        colorByPoint: true,
        data: [{
            name: 'Bihar',
            y: 4342,
            drilldown: 'animals'
        }, {
            name: 'West Bengal',
            y: 1256,
            drilldown: 'fruits'
        }, {
            name: 'Odisha',
            y: 4670,
            drilldown: 'cars'
        }]
    }],
    drilldown: {
        series: [{
            id: 'animals',
            data: [
                ['Survey Done', 4342],
                ['Enumurators', 13],
                ['District Coverage',6],
                ['Supervisor', 2]
            ]
        }, {
            id: 'fruits',
            data: [
                ['Survey Done', 1256],
                ['Enumurators', 4],
                ['District Coverage', 5],
                ['Supervisor', 1]
            ]
        }, {
            id: 'cars',
            data: [
                ['Survey Done', 4670],
                ['Enumurators', 11],
                ['District Coverage', 9],
                ['Supervisor', 2]
            ]
        }]
    }
});
			</script>

</body>
</html>