	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
	<meta charset="UTF-8">
	<title>Where the 2016 killings took place</title>
	<link rel="shortcut icon" href="../images/favicon.png"/>
	<script src="js/jquery-1.9.1.js"></script>
	<script src="js/highmaps.js"></script>
	<script src="js/data.js"></script>
	<script src="js/numeral.js"></script>
	<script src="js/exporting.js"></script>
	<link href='http://fonts.googleapis.com/css?family=Lato:400,300,100,500,700' rel='stylesheet' type='text/css'>
	
	<style>
	.highcharts-legend-item,body{font-family:"Lato",sans-serif;}
	#source{margin:0px auto;text-align:center;font-size:12px;}
	#footer{width:100%;}
	</style>
	<script>
	$(function () {
	Highcharts.setOptions({
	lang: {
	thousandsSep: ',',
	numericSymbols: null //otherwise by default ['k', 'M', 'G', 'T', 'P', 'E']
	}
	});
	// Prepare  data
	var data = [<?php
	$servername = "localhost";
	$dbuser = "root";
	$dbpass = "root";
	$dbname = "deadly_force";

	//select 2016 killings 
	try {
	$conn = new PDO("mysql:host=$servername;dbname=$dbname", $dbuser, $dbpass);
	// set the PDO error mode to exception
	$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
	//group by gender
	$sthandler = $conn->prepare("select county,killed,shootings_per_100000 from police_killings_per_county2016");
	$sthandler->execute();
	$victims = $sthandler->fetchAll();
	foreach ($victims as $row) {
	//echo $row['county']."<br>";
	//echo $row['shootings_per_100000']."<br>";
	//echo $row['killed']."<br>";
	//echo '{"code":"'.$row['county'].'",'.'"value":'.$row['shootings_per_100000'].',"z":'.$row['killed'].',},';
	$mapdata='{"code":"'.trim($row['county']).'",'.'"value":'.trim($row['shootings_per_100000']).',"z":'.trim($row['killed']).',},';
	echo $mapdata;
	//echo "<br>";
	}
	}
	//get victim names from database
	catch(PDOException $e)
	{
	echo "error" . "<br>" . $e->getMessage();
	}
	$conn = null;
	//end 2016 killings by month
	?>];

	$.getJSON('json/kenyan_counties.json', function (geojson) {

	// Initiate the chart
	$('#2016map').highcharts('Map', {
	title : {
	text : "Where the 2016 killings took place",
	style: {
	fontFamily: 'Lato',
	fontSize: '15px'
	},
	},
	subtitle: {
	text: 'The size of the bubble represents the total number of killings',
	style: {
	fontFamily: 'Lato'
	},
	},

	mapNavigation: {
	enabled: true,
	buttonOptions: {
	verticalAlign: 'top'
	}
	},
	credits: {
	enabled: false
	},

	legend: {
	title: {
	text: "Killings per 10,000 people",
	style: {
	color: (Highcharts.theme && Highcharts.theme.textColor) || 'black',
	fontFamily: 'Lato',
	fontWeight: 'normal',
	}
	},
	align: 'center',
	verticalAlign: 'bottom',
	floating: false,
	layout: 'horizontal',
	valueDecimals: 0,
	backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || 'rgba(255, 255, 255, 0.85)',
	symbolRadius: 0,
	symbolHeight: 14,
	itemStyle: {
	fontWeight: 'normal',
	},
	},

	colorAxis: {
	min: 0,
	//max: 100,
	//type: 'scaler',
	minColor: '#ebecee',
	maxColor: '#929396'
	},

	tooltip: {
	formatter: function(){

	var c='';
	c += '<b>'+this.point.code+'</b><br/>';
	var killingsper="<b>"+numeral(this.point.value).format('0,0.[00]')+ "</b>"+" killing(s) per 100,000 people";
	var totalkillings="<b>"+numeral(this.point.z).format('0,0')+ "</b>"+" killing(s) in 2016";
	c += killingsper+"<br>"+totalkillings;
	return c;
	},
	style: {
	fontFamily: 'Lato',
	fontColor:'#cccccc',
	},
	},
	series : [
	{
	enableMouseTracking: true,
	name: 'Counties',
	//data : data,
	mapData: geojson,
	color: '#2167ab',
	cursor: 'normal',
	joinBy: ['COUNTY', 'code'],
	data: data,
	name: '2016 killings',
	states: {
	hover: {
	color: '#7d7e7f'
	}
	},
	dataLabels: {
	enabled: false,
	format: '{point.properties.COUNTY3_ID}',
	style: {
	fontFamily: 'Lato',
	fontColor:'#cccccc',
	},
	}
	},
	{
	type: 'mapbubble',
	mapData: geojson,
	name: 'Number of killings',
	joinBy: ['COUNTY', 'code'],
	color:'#f26414',
	data: data,
	minSize: 0,
	maxSize: '12%',
	},
	]
	});
	});
	});
	</script>
	<style>
	#2016map {
	height: 100%; 
	min-width: 310px; 
	width:100%
	margin: 0 auto; 
	}
	.loading {
	margin-top: 10em;
	text-align: center;
	color: gray;
	}
	#footer{width:40%;margin:0px auto;overflow:hidden;margin-top:20px;}
	#footer_left{overflow:hidden;width:50%;float:left;line-height:50px;}
	#credits{font-size:11px;}
	a{text-decoration:none;}
	#footer_right{float:right;width:40%;text-align:right;line-height:50px;}
	.loading {
	margin-top: 10em;
	text-align: center;
	color: gray;
	font-family:'Lato',sans-serif;
	}
	</style>
	</head>
	<body>
	<div id="2016map" style="width:100%;height:600px;" >
	<div class="loading"><img src="images/378.gif"/><br>Loading...</div>
	</div>
	</div>


	</body> 
	</html> 
