<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Dashboard | International Solar Alliance</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" />
<link href="assets/libs/magnific-popup/magnific-popup.css" rel="stylesheet" type="text/css" />
</head>
<body data-layout="horizontal" data-topbar="light">
<div id="wrapper">
<?php include("include/header.php");?>
<div class="content-page">
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-12">
<div class="filter-form mb-3">
<form method="get">
<div class="row">
<div class="col-sm col-12">
<div class="form-group">
<select class="form-control">
<option value="">Select State</option>
</select>
</div>
</div>
<div class="col-sm col-12">
<div class="form-group">
<select class="form-control" placeholder="" name="district_id">
<option value="">Select District</option>
</select>
</div>
</div>

<div class="col-sm col-12">
<div class="form-group">
<select class="form-control" placeholder="" name="village_id" id="village_id">
<option value="">Select Village</option>
</select>
</div>
</div>
<div class="col-sm col-12">
<div class="form-group">
<select class="form-control" placeholder="" name="farmers">
<option value="">Select Farmers</option>
</select>
</div>
</div>
<div class="col-sm col-12">
<button type="submit" class="btn btn-secondary width-md waves-effect waves-light" name="search">Search</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-2 col-md-6">
<a href="state_list.php">
<div class="card-box small-dash-box">
<h4 class="header-title mt-0 mb-1">Total States</h4>
<div class="widget-inner">
<div class="widget-icon primary">
<i class="fa fa-globe"></i>
</div>
<div class="widget-chart">
<div class="widget-detail text-right">
<h2 class="font-weight-normal mb-1"> 25 </h2>
<p class="text-muted mb-1">Registered</p>
</div>
</div>
</div>
</div>
</a>
</div>
<div class="col-xl-2 col-md-6">
<a href="district_list.php">
<div class="card-box small-dash-box">
<h4 class="header-title mt-0 mb-1">Total Districts</h4>
<div class="widget-inner">
<div class="widget-icon float-left">
<i class="fa fa-city"></i>
</div>
<div class="widget-chart">
<div class="widget-detail text-right">
<h2 class="font-weight-normal mb-1"> 12352 </h2>
<p class="text-muted mb-1">Registered</p>
</div>
</div>
</div>
</div>
</a>
</div>
<div class="col-xl-2 col-md-6">
<a href="farmer-list.php">
<div class="card-box small-dash-box">
<h4 class="header-title mt-0 mb-1">Total Villages</h4>
<div class="widget-inner">
<div class="widget-icon float-left secondary">
<i class="fa fa-vihara"></i>
</div>
<div class="widget-chart">
<div class="widget-detail text-right">
<h2 class="font-weight-normal mb-1">  600</h2>
<p class="text-muted mb-1">Registered</p>
</div>
</div>
</div>
</div>
</a>
</div>
<div class="col-xl-2 col-md-6">
<a href="supplier-list.php">
<div class="card-box small-dash-box">
<h4 class="header-title mt-0 mb-1">Total Farmers</h4>
<div class="widget-inner">
<div class="widget-icon red float-left">
<i class="fa fa-home"></i>
</div>
<div class="widget-chart">
<div class="widget-detail text-right">
<h2 class="font-weight-normal mb-1"> 1300 </h2>
<p class="text-muted mb-1">Registered</p>
</div>
</div>
</div>
</div>
</a>
</div>
<div class="col-xl-2 col-md-6">
<a href="#">
<div class="card-box small-dash-box">
<h4 class="header-title mt-0 mb-1">Total SGH</h4>
<div class="widget-inner">
<div class="widget-icon float-left">
<i class="fa fa-hotel"></i>
</div>
<div class="widget-chart">
<div class="widget-detail text-right">
<h2 class="font-weight-normal mb-1"> 50 </h2>
<p class="text-muted mb-1">Registered</p>
</div>
</div>
</div>
</div>
</a>
</div>
<div class="col-xl-2 col-md-6">
<a href="land_holding.php">
<div class="card-box small-dash-box">
<h4 class="header-title mt-0 mb-1">No. of Users</h4>
<div class="widget-inner">
<div class="widget-icon yellow float-left">
<i class="fa fa-users"></i>
</div>
<div class="widget-chart">
<div class="widget-detail text-right">
<h2 class="font-weight-normal mb-1"> 120 </h2>
<p class="text-muted mb-1">Registered</p>
</div>
</div>
</div>
</div>
</a>
</div>
</div>
	<style type="text/css">
	#chartdiv1 {
	  width: 100%;
	  height: 400px
	}
	#infograph {
		height: 300px;
	}

	.highcharts-figure,
	.highcharts-data-table table {
		min-width: 320px;
		max-width: 700px;
		margin: 1em auto;
	}

	.highcharts-data-table table {
		font-family: Verdana, sans-serif;
		border-collapse: collapse;
		border: 1px solid #ebebeb;
		margin: 10px auto;
		text-align: center;
		width: 100%;
		max-width: 500px;
	}

	.highcharts-data-table caption {
		padding: 1em 0;
		font-size: 1.2em;
		color: #555;
	}

	.highcharts-data-table th {
		font-weight: 600;
		padding: 0.5em;
	}

	.highcharts-data-table td,
	.highcharts-data-table th,
	.highcharts-data-table caption {
		padding: 0.5em;
	}

	.highcharts-data-table thead tr,
	.highcharts-data-table tr:nth-child(even) {
		background: #f8f8f8;
	}

	.highcharts-data-table tr:hover {
		background: #f1f7ff;
	}
		
		
	#map1 {
		min-width: 320px;
		max-width: 800px;
		height: 370px;
		margin: 1em auto;
	}

	.animated-line {
		stroke-dasharray: 8;
		stroke-dashoffset: 10;
		animation: dash 5s linear infinite;
	}

	@keyframes dash {
		from {
			stroke-dashoffset: 100;
		}

		to {
			stroke-dashoffset: 20;
		}
	}
	</style>
<div class="row">         
    <div class="col-xl-4">
        <div class="card-box heading-design">
            <h4 class="header-title mt-0 design-1">EODS Countries</h4>
            <div class="widget-chart text-center" style="min-height:300px">
            	<div id="chartdiv1"></div>
            </div>
        </div>
		<div class="card-box heading-design">
            <h4 class="header-title mt-0 design-1">7 Key Drivers</h4>
            <div class="widget-chart text-center" style="min-height:300px">
            	<figure class="highcharts-figure">
					<div id="infograph"></div>
				</figure>
            </div>
        </div>
		
    </div>
     <div class="col-xl-8">
        <div class="card-box heading-design">
            <h4 class="header-title mt-0 design-1">Regional Highlights</h4>
            <div class="widget-chart text-center" style="min-height:250px">
            	<div id="map1"></div>
            </div>
        </div>
		 <div class="card-box heading-design">
            <h4 class="header-title mt-0 design-1">How Progressive & Potential countries</h4>
            <div class="widget-chart text-center" style="min-height:250px">
            	<img src="assets/images/chart2.png" class="img-fluid"/>
            </div>
        </div>
		 
		 
    </div>
</div>
<?php /*?><div class="row">         
    <div class="col-xl-7">
        <div class="card-box heading-design">
            <h4 class="header-title mt-0 design-1">Sector Wise</h4>
            <div class="widget-chart text-center" style="min-height:250px">
            	<img src="assets/images/chart2.png" class="img-fluid"/>
            </div>
        </div>
    </div>
     <div class="col-xl-5">
        <div class="card-box heading-design">
            <h4 class="header-title mt-0 design-1">Cluster Profile on Map</h4>
            <div class="widget-chart text-center" style="min-height:250px">
            	<img src="assets/images/map.jpg" class="img-fluid"/>
            </div>
        </div>
    </div>
</div><?php */?>
</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/libs/magnific-popup/jquery.magnific-popup.min.js"></script>
<script src="assets/js/jquery.stickytableheaders.js"></script>
<script src="assets/js/custom.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/maps/modules/offline-exporting.js">
</script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
	
	
<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
<script src="https://cdn.amcharts.com/lib/5/radar.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/variable-pie.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
	
	


<script>
	/**
 * ---------------------------------------
 * This demo was created using amCharts 5.
 * 
 * For more information visit:
 * https://www.amcharts.com/
 * 
 * Documentation is available at:
 * https://www.amcharts.com/docs/v5/
 * ---------------------------------------
 */

// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
var root = am5.Root.new("chartdiv1");


// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([
  am5themes_Animated.new(root)
]);


// Create chart
// https://www.amcharts.com/docs/v5/charts/xy-chart/
var chart = root.container.children.push(am5radar.RadarChart.new(root, {
  panX: true,
  panY: true,
  wheelX: "none",
  wheelY: "none",
  innerRadius:am5.percent(40)
}));

// We don't want zoom-out button to appear while animating, so we hide it
chart.zoomOutButton.set("forceHidden", true);


// Create axes
// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
var xRenderer = am5radar.AxisRendererCircular.new(root, {
  minGridDistance: 30
});

xRenderer.grid.template.set("visible", false);

var xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
  maxDeviation: 0.3,
  categoryField: "country",
  renderer: xRenderer
}));

var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
  maxDeviation: 0.3,
  min: 0,
  renderer: am5radar.AxisRendererRadial.new(root, {})
}));


// Add series
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
var series = chart.series.push(am5radar.RadarColumnSeries.new(root, {
  name: "Series 1",
  xAxis: xAxis,
  yAxis: yAxis,
  valueYField: "value",
  categoryXField: "country"
}));

// Rounded corners for columns
series.columns.template.setAll({
  cornerRadius: 5,
  tooltipText:"{categoryX}: {valueY} Countries"
});

// Make each column to be of a different color
series.columns.template.adapters.add("fill", function (fill, target) {
  return chart.get("colors").getIndex(series.columns.indexOf(target ));
});

series.columns.template.adapters.add("stroke", function (stroke, target) {
  return chart.get("colors").getIndex(series.columns.indexOf(target ));
});

// Set data
var data = [{
  "country": "2019",
  "value": 4
}, {
  "country": "2020",
  "value": 80
}, {
  "country": "2021",
  "value": 98
}, {
  "country": "2022",
  "value": 107
}];

xAxis.data.setAll(data);
series.data.setAll(data);

// update data with random values each 1.5 sec
setInterval(function () {
  updateData();
}, 1500)




// Get series item by category
function getSeriesItem(category) {
  for (var i = 0; i < series.dataItems.length; i++) {
    var dataItem = series.dataItems[i];
    if (dataItem.get("categoryX") == category) {
      return dataItem;
    }
  }
}


// Axis sorting
function sortCategoryAxis() {

  // Sort by value
  series.dataItems.sort(function (x, y) {
    return y.get("valueY") - x.get("valueY"); // descending
    //return y.get("valueY") - x.get("valueY"); // ascending
  })

  // Go through each axis item
  am5.array.each(xAxis.dataItems, function (dataItem) {
    // get corresponding series item
    var seriesDataItem = getSeriesItem(dataItem.get("category"));

    if (seriesDataItem) {
      // get index of series data item
      var index = series.dataItems.indexOf(seriesDataItem);
      // calculate delta position
      var deltaPosition = (index - dataItem.get("index", 0)) / series.dataItems.length;
      // set index to be the same as series data item index
      dataItem.set("index", index);
      // set deltaPosition instanlty
      dataItem.set("deltaPosition", -deltaPosition);
      // animate delta position to 0
      dataItem.animate({
        key: "deltaPosition",
        to: 0,
        duration: 1000,
        easing: am5.ease.out(am5.ease.cubic)
      })
    }
  });

  // Sort axis items by index.
  // This changes the order instantly, but as deltaPosition is set,
  // they keep in the same places and then animate to true positions.
  xAxis.dataItems.sort(function (x, y) {
    return x.get("index") - y.get("index");
  });
}


// Make stuff animate on load
// https://www.amcharts.com/docs/v5/concepts/animations/
series.appear(1000);
chart.appear(1000, 100);
	
	
	
	
	
	
	
	// Data retrieved from https://worldpopulationreview.com/country-rankings/countries-by-density
Highcharts.chart('infograph', {
    chart: {
        type: 'variablepie'
    },
     exporting: {
       enabled: false
     },
    title: {
        text: '',
        align: 'left'
    },
    tooltip: {
		enabled:false,
        headerFormat: '',
//        pointFormat: '<span style="color:{point.color}">\u25CF</span> <b> {point.name}</b><br/>' +
//            'Area (square km): <b>{point.y}</b><br/>' +
//            'Population density (people per square km): <b>{point.z}</b><br/>'
    },
    series: [{
        minPointSize: 10,
        innerSize: '20%',
        zMin: 0,
		distance:0,
        name: 'countries',
        borderRadius: 5,
        data: [{
            name: 'Infrastructure',
            y: 100,
            z: 40
        }, {
            name: 'Financing Ecosystem',
            y: 100,
            z: 50
        }, {
            name: 'Energy Imperatives',
            y: 100,
            z: 60
        }, {
            name: 'Market Maturity',
            y: 100,
            z: 70
        }, {
            name: 'Technological Feasibility',
            y: 100,
            z: 80
        }, {
            name: 'Policy Enablers',
            y: 100,
            z: 90
        }, {
            name: 'Macroeconomy',
            y: 100,
            z: 100
        }],
        colors: [
            '#f9ce06',
            '#f8901f',
            '#f05624',
            '#9e4098',
            '#645ca7',
            '#4165b1',
            '#1b907e'
        ]
    }]
});
	
	
(async () => {
    const topology = await fetch(
        'https://code.highcharts.com/mapdata/custom/world-highres.topo.json'
    ).then(response => response.json());

    const data = [
        {
            'hc-key': 'ye',
            color: '#ffa500',
            info: 'Yemen is where coffee took off.'
        },
        {
            'hc-key': 'br',
            color: '#c0ffd5',
            info: 'Coffee came from La Reunion.'
        },
        {
            'hc-key': 'fr',
            color: '#c0ffd5',
            info: 'Coffee came from Java.'
        },
        {
            'hc-key': 'gb',
            color: '#c0ffd5',
            info: 'Coffee came from Java.'
        },
        {
            'hc-key': 'id',
            color: '#c0ffd5',
            info: 'Coffee came from Yemen.'
        },
        {
            'hc-key': 'nl',
            color: '#c0ffd5',
            info: 'Coffee came from Java.'
        },
        {
            'hc-key': 'gu',
            color: '#c0ffd5',
            info: 'Coffee came from France.'
        },
        {
            'hc-key': 're',
            color: '#c0ffd5',
            info: 'Coffee came from Yemen.'
        },
        {
            'hc-key': 'in',
            color: '#c0ffd5',
            info: 'Coffee came from Yemen.'
        }
    ];

    // Initialize the chart
    Highcharts.mapChart('map1', {
        chart: {
            map: topology
        },
				exporting: {
       enabled: false
     },
        title: {
            text: '4 Geographical Regions'
        },
        legend: {
            enabled: false
        },
        tooltip: {
            useHTML: true,
            headerFormat: '<b>{point.key}</b>:<br/>',
            pointFormat: '{point.info}'
        },

        mapView: {
            fitToGeometry: {
                type: 'MultiPoint',
                coordinates: [
                    // Alaska west
                    [-164, 54],
                    // Greenland north
                    [-35, 84],
                    // New Zealand east
                    [179, -38],
                    // Chile south
                    [-68, -55]
                ]
            }
        },

        series: [
            {
                data,
                keys: ['hc-key', 'color', 'info'],
                name: ''
            },
            {
                type: 'mapline',
                data: [
                    {
                        geometry: {
                            type: 'LineString',
                            coordinates: [
                                [48.516388, 15.552727], // Yemen
                                [110.004444, -7.491667] // Java
                            ]
                        },
                        className: 'animated-line',
                        color: '#666'
                    },
                    {
                        geometry: {
                            type: 'LineString',
                            coordinates: [
                                [48.516388, 15.552727], // Yemen
                                [55.5325, -21.114444] // La reunion
                            ]
                        },
                        className: 'animated-line',
                        color: '#666'
                    },
                    {
                        geometry: {
                            type: 'LineString',
                            coordinates: [
                                [55.5325, -21.114444], // La reunion
                                [-43.2, -22.9] // Brazil
                            ]
                        },
                        className: 'animated-line',
                        color: '#666'
                    },
                    {
                        geometry: {
                            type: 'LineString',
                            coordinates: [
                                [48.516388, 15.552727], // Yemen
                                [78, 21] // India
                            ]
                        },
                        className: 'animated-line',
                        color: '#666'
                    },
                    {
                        geometry: {
                            type: 'LineString',
                            coordinates: [
                                [110.004444, -7.491667], // Java
                                [4.9, 52.366667] // Amsterdam
                            ]
                        },
                        className: 'animated-line',
                        color: '#666'
                    },
                    {
                        geometry: {
                            type: 'LineString',
                            coordinates: [
                                [-3, 55], // UK
                                [-61.030556, 14.681944] // Antilles
                            ]
                        },
                        className: 'animated-line',
                        color: '#666'
                    },
                    {
                        geometry: {
                            type: 'LineString',
                            coordinates: [
                                [2.352222, 48.856613], // Paris
                                [-53, 4] // Guyane
                            ]
                        },
                        className: 'animated-line',
                        color: '#666'
                    }
                ],
                lineWidth: 2,
                enableMouseTracking: false
            },
            {
                type: 'mappoint',
                color: '#333',
                dataLabels: {
                    format: '<b>{point.name}</b><br><span style="font-weight: normal; opacity: 0.5">{point.custom.arrival}</span>',
                    align: 'left',
                    verticalAlign: 'middle'
                },
                data: [
                    {
                        name: 'Yemen',
                        geometry: {
                            type: 'Point',
                            coordinates: [48.516388, 15.552727] // Yemen
                        },
                        custom: {
                            arrival: 1414
                        },
                        dataLabels: {
                            align: 'right'
                        }
                    },
                    {
                        name: 'Java',
                        geometry: {
                            type: 'Point',
                            coordinates: [110.004444, -7.491667] // Java
                        },
                        custom: {
                            arrival: 1696
                        }
                    },
                    {
                        name: 'La Reunion',
                        geometry: {
                            type: 'Point',
                            coordinates: [55.5325, -21.114444] // La reunion
                        },
                        custom: {
                            arrival: 1708
                        }
                    },
                    {
                        name: 'Brazil',
                        geometry: {
                            type: 'Point',
                            coordinates: [-43.2, -22.9] // Brazil
                        },
                        custom: {
                            arrival: 1770
                        },
                        dataLabels: {
                            align: 'right'
                        }
                    },
                    {
                        name: 'India',
                        geometry: {
                            type: 'Point',
                            coordinates: [78, 21] // India
                        },
                        custom: {
                            arrival: 1670
                        }
                    },
                    {
                        name: 'Amsterdam',
                        geometry: {
                            type: 'Point',
                            coordinates: [4.9, 52.366667] // Amsterdam
                        },
                        custom: {
                            arrival: 1696
                        }
                    },
                    {
                        name: 'Antilles',
                        geometry: {
                            type: 'Point',
                            coordinates: [-61.030556, 14.681944] // Antilles
                        },
                        custom: {
                            arrival: 1714
                        },
                        dataLabels: {
                            align: 'right'
                        }
                    },
                    {
                        name: 'Guyane',
                        geometry: {
                            type: 'Point',
                            coordinates: [-53, 4] // Guyane
                        },
                        custom: {
                            arrival: 1714
                        },
                        dataLabels: {
                            align: 'right'
                        }
                    }
                ],
                enableMouseTracking: false
            }
        ]
    });
})();

	
	
	
</script>	

</body>
</html>