	<?php
	ini_set('display_errors', 1);
	ini_set('display_startup_errors', 1);
	error_reporting(E_ALL);
	?>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="people killed by the police in Kenya">
	<meta name="keywords" content="nation, newsplex,nation newsplex,police,extrajudicial killings,kenya,police killings kenya">
	<meta name="author" content="Nation Newsplex Team">
	<link rel="icon" href="../images/favicon.png">

	<title>Deadly Force::People killed by the police in Kenya</title>

	<!-- Bootstrap core CSS -->
	<link href="../css/bootstrap.css" rel="stylesheet">
	<!-- jquery UI CSS -->
	<link href="../css/jquery-ui.css" rel="stylesheet">
	<!-- Bootstrap theme -->
	<link href="../css/bootswatch_min.css" rel="stylesheet">
	
	<!-- custom scrollbar stylesheet -->
	<link rel="stylesheet" href="../css/jquery.mCustomScrollbar.css">

	<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
	<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
	<script src="../../assets/js/ie-emulation-modes-warning.js"></script>

	<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
	<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->

	<style>
	#source{margin:0px auto;text-align:center;font-size:12px;}
	#footer{width:100%;}
	</style>
	<script src="../js/jquery-1.9.1.js"></script>

	<script>
	//search functions
	function getvictimdetailsbyname(str) {
	if (str == "") {
	document.getElementById("pictogrambyname").innerHTML = "";
	return;
	} else {
	if (window.XMLHttpRequest) {
	// code for IE7+, Firefox, Chrome, Opera, Safari
	xmlhttp = new XMLHttpRequest();
	} else {
	// code for IE6, IE5
	xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange = function() {
	if (this.readyState == 4 && this.status == 200) {
	//document.getElementById("pictogram").innerHTML = this.responseText;
	$('#pictogrambyname').show();
	$('#pictogrambyname').html(this.responseText);
    }
	};
	xmlhttp.open("GET","getvictimdetailsbyname.php?name="+str,true);
	xmlhttp.send();
	}
	}
	function getvictimdetailsbygender(str) {
	if (str == "") {
	document.getElementById("pictogrambygender").innerHTML = "";
	return;
	} else {
	if (window.XMLHttpRequest) {
	// code for IE7+, Firefox, Chrome, Opera, Safari
	xmlhttp = new XMLHttpRequest();
	} else {
	// code for IE6, IE5
	xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange = function() {
	if (this.readyState == 4 && this.status == 200) {
	$('#pictogrambygender').html(this.responseText);
	document.getElementById("mainpictogram").innerHTML = "";
    }
	};
	xmlhttp.open("GET","getvictimdetailsbygender.php?gender="+str,true);
	xmlhttp.send();
	}
	}
	function getvictimdetailsbyoccupation(str) {
	if (str == "") {
	document.getElementById("pictogrambyoccupation").innerHTML = "";
	return;
	} else {
	if (window.XMLHttpRequest) {
	// code for IE7+, Firefox, Chrome, Opera, Safari
	xmlhttp = new XMLHttpRequest();
	} else {
	// code for IE6, IE5
	xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange = function() {
	if (this.readyState == 4 && this.status == 200) {
	$('#pictogrambyoccupation').html(this.responseText);
	document.getElementById("mainpictogram").innerHTML = "";
    }
	};
	xmlhttp.open("GET","getvictimdetailsbyoccupation.php?occupation="+str,true);
	xmlhttp.send();
	}
	}
	function getvictimdetailsbycounty(str) {
	if (str == "") {
	document.getElementById("pictogrambycounty").innerHTML = "";
	return;
	} else {
	if (window.XMLHttpRequest) {
	// code for IE7+, Firefox, Chrome, Opera, Safari
	xmlhttp = new XMLHttpRequest();
	} else {
	// code for IE6, IE5
	xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange = function() {
	if (this.readyState == 4 && this.status == 200) {
	$('#pictogrambycounty').html(this.responseText);
	document.getElementById("mainpictogram").innerHTML = "";
    }
	};
	xmlhttp.open("GET","getvictimdetailsbycounty.php?county="+str,true);
	xmlhttp.send();
	}
	}
	function getvictimdetailsbyarmed(str) {
	if (str == "") {
	document.getElementById("pictogrambyarmed").innerHTML = "";
	return;
	} else {
	if (window.XMLHttpRequest) {
	// code for IE7+, Firefox, Chrome, Opera, Safari
	xmlhttp = new XMLHttpRequest();
	} else {
	// code for IE6, IE5
	xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange = function() {
	if (this.readyState == 4 && this.status == 200) {
	$('#pictogrambyarmed').html(this.responseText);
	document.getElementById("mainpictogram").innerHTML = "";
    }
	};
	xmlhttp.open("GET","getvictimdetailsbyarmed.php?armed="+str,true);
	xmlhttp.send();
	}
	}
	function getvictimdetailsbypoliceweapon(str) {
	if (str == "") {
	document.getElementById("pictogrambypoliceweapon").innerHTML = "";
	return;
	} else {
	if (window.XMLHttpRequest) {
	// code for IE7+, Firefox, Chrome, Opera, Safari
	xmlhttp = new XMLHttpRequest();
	} else {
	// code for IE6, IE5
	xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange = function() {
	if (this.readyState == 4 && this.status == 200) {
	$('#pictogrambypoliceweapon').html(this.responseText);
	document.getElementById("mainpictogram").innerHTML = "";
    }
	};
	xmlhttp.open("GET","getvictimdetailsbypoliceweapon.php?policeweapon="+str,true);
	xmlhttp.send();
	}
	}
	function getvictimdetailsbymultisearch() {
	var gender = $('#gender').val();
	var occupation = $('#occupation').val();
	var county = $('#county').val();
	var armed = $('#armed').val();
	var police_weapon = $('#police_weapon').val();
	{
	if (window.XMLHttpRequest) {
	// code for IE7+, Firefox, Chrome, Opera, Safari
	xmlhttp = new XMLHttpRequest();
	} else {
	// code for IE6, IE5
	xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange = function() {
	if (this.readyState == 4 && this.status == 200) {
	$('#pictogrambymultisearch').html(this.responseText);
	document.getElementById("mainpictogram").innerHTML = "";
    }
	};
	xmlhttp.open("GET","getvictimdetailsbymultisearch2015.php?gender="+gender+"&occupation="+occupation+"&county="+county+"&armed="+armed+"&police_weapon="+police_weapon,true);
	xmlhttp.send();
	}
	}
	</script>

	<script>
	$(function() {
	$( "#victim_name" ).autocomplete({
	source: 'search.php',
	change: function (event, ui) {
	if(!ui.item){
	//http://api.jqueryui.com/autocomplete/#event-change -
	// The item selected from the menu, if any. Otherwise the property is null
	//so clear the item for force selection
	$("#victim_name").val("");
	$('#pictogrambyname').hide();
	$('#mainpictogram').show();
	}

	},
	select: function(event, ui) {
	//showUser(this.value);
	var selectedname = ui.item;              
    //alert(selectedname.value);
	$('#mainpictogram').hide();
	$('#pictogrambyname').show();
	getvictimdetailsbyname(selectedname.value);
	}
	});

	});
	</script>
	<script>

	/*
	TOOLTIP
	*/

	$( function()
	{
	var targets = $( '[rel~=tooltip]' ),
	target	= false,
	tooltip = false,
	title	= false;

	targets.bind( 'mouseenter', function()
	{
	target	= $( this );
	tip		= target.attr( 'title' );
	tooltip	= $( '<div id="tooltip"></div>' );

	if( !tip || tip == '' )
	return false;

	target.removeAttr( 'title' );
	tooltip.css( 'opacity', 0 )
	.html( tip )
	.appendTo( 'body' );

	var init_tooltip = function()
	{
	if( $( window ).width() < tooltip.outerWidth() * 1.5 )
	tooltip.css( 'max-width', $( window ).width() / 2 );
	else
	tooltip.css( 'max-width', 340 );

	var pos_left = target.offset().left + ( target.outerWidth() / 2 ) - ( tooltip.outerWidth() / 2 ),
	pos_top	 = target.offset().top - tooltip.outerHeight() - 20;

	if( pos_left < 0 )
	{
	pos_left = target.offset().left + target.outerWidth() / 2 - 20;
	tooltip.addClass( 'left' );
	}
	else
	tooltip.removeClass( 'left' );

	if( pos_left + tooltip.outerWidth() > $( window ).width() )
	{
	pos_left = target.offset().left - tooltip.outerWidth() + target.outerWidth() / 2 + 20;
	tooltip.addClass( 'right' );
	}
	else
	tooltip.removeClass( 'right' );

	if( pos_top < 0 )
	{
	var pos_top	 = target.offset().top + target.outerHeight();
	tooltip.addClass( 'top' );
	}
	else
	tooltip.removeClass( 'top' );

	tooltip.css( { left: pos_left, top: pos_top } )
	.animate( { top: '+=10', opacity: 1 }, 50 );
	};

	init_tooltip();
	$( window ).resize( init_tooltip );

	var remove_tooltip = function()
	{
	tooltip.animate( { top: '-=10', opacity: 0 }, 50, function()
	{
	$( this ).remove();
	});

	target.attr( 'title', tip );
	};

	target.bind( 'mouseleave', remove_tooltip );
	tooltip.bind( 'click', remove_tooltip );
	});
	});

	</script>
	<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-85062159-1', 'auto');
  ga('send', 'pageview');

</script>
	</head>

	<body role="document">

	<!-- Fixed navbar -->
	<div class="navbar navbar-default navbar-fixed-top" role="navigation">
	<div class="container">
	<div class="navbar-header">
	<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
	<span class="sr-only">Toggle navigation</span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	</button>
	<a class="navbar-brand" href="../index.php">
	<!--<img src="../images/newsplex_logo.png" width="145" height="70" alt="nation newsplex"/>-->
	<div class="header-slogan">
	<span class="big-slogan">Deadly force</span><br>
	<span class="slogan">People killed by the police in Kenya</span>
	</div>
	</a>
	</div>
	<div class="navbar-collapse collapse">
	<ul class="nav navbar-nav">
	<li><a href="../contact.php">Submit tip</a></li>
	<li><a href="../index.php#database">Database</a></li>
	<li><a href="../about.php">About</a></li>
	<li><a href="../articles.php">Read articles</a></li>
	</ul>
	</li>
	</ul>
	</div><!--/.nav-collapse -->
	</div>
	</div>

	<div class="container main">

	<p><h4>The database is based on public, media and human rights reports, and on official records held by agencies of the Government of Kenya</h4></p>
	<p><a href="#" class="btn btn-default">2015 database</a> <a href="../index.php" class="btn btn-default">Click for 2016 database &raquo;</a></p>
	<!-- Typography
	================================================== -->
	<div class="bs-docs-section">
	<!-- Headings -->

	<div class="row">
	<div class="col-lg-4">
	<div class="bs-component">
	<?php
	$servername = "localhost";
	$dbuser = "root";
	$dbpass = "root";
	$dbname = "deadly_force";

	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);
	//select victim count from the database
	$sthandler = $conn->prepare("select count(entry_no) as victims from police_killings where year(date_of_incident)=2015");
	$sthandler->execute();
	$victimcount = $sthandler->fetch();
	$victims=$victimcount['victims'];
	}
	catch(PDOException $e)
	{
	echo "error" . "<br>" . $e->getMessage();
	}
	$conn = null;

	?>
	<span class="underline_heading">People killed by the police in 2015</span>
	<div id="victims_count">0</div>
	<script type="text/javascript">
	$(document).ready(function() {
	$('#victims_count')
	.prop('number', 0)
	.animateNumber(
	{
	number: <?php echo $victims; ?>
	},
	2000
	);
	return false;
	});
	</script>
	<style>
	#victims_count{font-size:10em;font-weight:bold;text-align:center;margin-top:90px;}
	</style>
	</div>
	</div>

	<div class="col-lg-4">
	<div class="bs-component">
	<span class="underline_heading">Who was killed</span>
	<?php
	$servername = "localhost";
	$dbuser = "root";
	$dbpass = "root";
	$dbname = "deadly_force";

	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 victim_gender,count(entry_no) as victims from police_killings where year(date_of_incident)='2015' group by victim_gender");
	$sthandler->execute();
	$victimcount = $sthandler->fetchAll();
	foreach ($victimcount as $row) {
	//echo $row['victim_gender'].$row['victims'];
	//echo "<br>";
	if($row['victim_gender']=='M'){
	$male='Male';
	$mcount=$row['victims'];
	//echo "gender=".$row['victim_gender']."count=".$row['victims'];
	//echo $male.$mcount;
	}
	elseif($row['victim_gender']=='F'){
	$female='Female';
	$fcount=$row['victims'];
	//echo "gender=".$row['victim_gender']."count=".$row['victims'];
	//echo $female.$fcount;
	}
	else{}
	}
	}
	//get victim names from database
	catch(PDOException $e)
	{
	echo "error" . "<br>" . $e->getMessage();
	}
	$conn = null;

	?>
	<script type="text/javascript">
	$(function () {

	$(document).ready(function () {

	// Build the chart
	$('#container').highcharts({
	chart: {
	events: {
            load: function() {
                this.renderer.image('http://newsplex.nation.co.ke/newsplex_watermark.png', '82%','90%', 60, 29)
                    .add();
            },
        },
	backgroundColor: null,
	plotBackgroundColor: null,
	plotBorderWidth: null,
	plotShadow: false,
	style: {
	fontFamily: 'Helvetica',
	fontSize: '20px'
	},
	},
	title: {
	text: "",
	style:{color: 'black',fontSize: '15px'}
	},
	subtitle: {
	text: ''
	},
	credits: {
	enabled: false
	},
	tooltip: {
	style: {
	fontFamily: 'Helvetica',
	fontSize: '20px'
	},
	pointFormat: '<b>{point.y}</b><br><b>{point.percentage:.0f}%</b>'
	},
	plotOptions: {
	pie: {
	allowPointSelect: true,
	cursor: 'pointer',
	dataLabels: {
	enabled: true,
	style: {
	fontFamily: 'Helvetica',
	fontSize: '20px'
	},
	},
	showInLegend: false
	}
	},
	series: [{
	type: 'pie',
	name: 'Percentage',
	data: [
	{
	name: '<?php echo $male;?>',
	y:     <?php echo $mcount;?>,
	color: '#0072bc',
	}, 
	{
	name: '<?php echo $female;?>',
	y:     <?php echo $fcount;?>,
	color: '#ee2e2a',
	},
	]
	}]
	});
	});

	});
	</script>
	<div id="container" style="min-width: 310px; height: 300px; margin: 0 auto"></div>
	</div>
	</div>

	<div class="col-lg-4">
	<div class="bs-component">
	<span class="underline_heading">Killings by county</span>


	<div class="bs-component">
	<div class="scrollingdiv">
	<div id="content-1">
	<ul class="nav nav-tabs">
	<li><a href="#total" data-toggle="tab">Total killings</a></li>
	<li class="active"><a href="#per" data-toggle="tab">Killings per 100,000 people</a></li>
	</ul>
	<div id="myTabContent" class="tab-content">
	<div class="tab-pane fade active in" id="per">
	<p>
	<script type="text/javascript">
	$(function () {
	Highcharts.setOptions({
	lang: {
	thousandsSep: ',',
	numericSymbols: null //otherwise by default ['k', 'M', 'G', 'T', 'P', 'E']
	}
	});
	$('#total_killings').highcharts({
	chart: {
	events: {
            load: function() {
                this.renderer.image('http://newsplex.nation.co.ke/newsplex_watermark.png', '80%','93%', 60, 29)
                    .add();
            },
        },
	type: 'bar',
	style: {
	fontFamily: 'Helvetica',
	fontSize: '20px'
	},
	},
	title: {
	text: ''
	},
	subtitle: {
	text: ''
	},
	credits: {
	enabled: false
	},
	xAxis: {
	categories: [
	<?php
	$servername = "localhost";
	$dbuser = "root";
	$dbpass = "root";
	$dbname = "deadly_force";
	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);
	$year2015='2015';
	//group by gender
	$sthandler = $conn->prepare("select county,killed from police_killings_per_county2015 where killed !='0' order by killed desc");
	$sthandler->bindParam(':year2015', $year2015);
	$sthandler->execute();
	$county = $sthandler->fetchAll();
	foreach ($county as $row) {
	echo '"'.$row['county'].'"'.",";
	}
	}
	catch(PDOException $e)
	{
	echo "error" . "<br>" . $e->getMessage();
	}
	$conn = null;

	?>
	],
	labels: {
	style: {
	font: '16px Helvetica, sans-serif'
	}
	},
	crosshair: true
	},
	yAxis: {
	//min: 0,
	//max: 100,
	title: {
	text: ''
	}
	},
	tooltip: {
	style: {
	fontFamily: 'Helvetica',
	fontSize: '18px'
	},
	formatter: function() {
	return this.x+'<br/>'+'<b>'+ Highcharts.numberFormat(this.y, 0) +'</b>';
	}
	},
	plotOptions: {
	bar: {
	//pointPadding: 0.2,
	//borderWidth: 1,
	//pointWidth: 20
	}
	},
	series: [{
	name: 'Total number killed',
	dataLabels: {
	//enabled: true,
	format: "{point.y:,.0f}",
	style: {
	//color: 'red',
	fontSize:'14px'
	},
	},
	color: "#ee2e2a",
	data: [
	<?php
	$servername = "localhost";
	$dbuser = "root";
	$dbpass = "root";
	$dbname = "deadly_force";
	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);
	$year2015='2015';
	//group by gender
	$sthandler = $conn->prepare("select county,killed from police_killings_per_county2015 where killed !='0' order by killed desc");
	$sthandler->bindParam(':year2015', $year2015);
	$sthandler->execute();
	$county = $sthandler->fetchAll();
	foreach ($county as $row) {
	echo $row['killed'].",";
	}
	}
	catch(PDOException $e)
	{
	echo "error" . "<br>" . $e->getMessage();
	}
	$conn = null;

	?>
	]

	}]
	});
	});
	</script>
	<div id="killings_per" style="min-width: 310px; height: 800px; margin: 0 auto"></div>
	</p>
	</div>
	<div class="tab-pane fade" id="total">
	<p>
	<script type="text/javascript">
	$(function () {
	Highcharts.setOptions({
	lang: {
	thousandsSep: ',',
	numericSymbols: null //otherwise by default ['k', 'M', 'G', 'T', 'P', 'E']
	}
	});
	$('#killings_per').highcharts({
	chart: {
	events: {
            load: function() {
                this.renderer.image('http://newsplex.nation.co.ke/newsplex_watermark.png', '82%','93%', 60, 29)
                    .add();
            },
        },
	type: 'bar',
	style: {
	fontFamily: 'Helvetica',
	fontSize: '20px'
	},
	},
	title: {
	text: ''
	},
	subtitle: {
	text: ''
	},
	credits: {
	enabled: false
	},
	xAxis: {
	categories: [
	<?php
	$servername = "localhost";
	$dbuser = "root";
	$dbpass = "root";
	$dbname = "deadly_force";
	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);
	$year2015='2015';
	//group by gender
	$sthandler = $conn->prepare("select county,shootings_per_100000 from police_killings_per_county2015 where shootings_per_100000 !='0' order by shootings_per_100000 desc");
	$sthandler->bindParam(':year2015', $year2015);
	$sthandler->execute();
	$county = $sthandler->fetchAll();
	foreach ($county as $row) {
	echo '"'.$row['county'].'"'.",";
	}
	}
	catch(PDOException $e)
	{
	echo "error" . "<br>" . $e->getMessage();
	}
	$conn = null;

	?>
	],
	labels: {
	style: {
	font: '16px Helvetica, sans-serif'
	}
	},
	crosshair: true
	},
	yAxis: {
	//min: 0,
	//max: 100,
	title: {
	text: ''
	}
	},
	tooltip: {
	style: {
	fontFamily: 'Helvetica',
	fontSize: '18px'
	},
	formatter: function() {
	return this.x+'<br/>'+'<b>'+ Highcharts.numberFormat(this.y, 2) +'</b>';
	}
	},
	plotOptions: {
	bar: {
	//pointPadding: 0.2,
	//borderWidth: 1,
	//pointWidth: 20
	}
	},
	series: [{
	name: 'Killings per 100,000 people',
	dataLabels: {
	//enabled: true,
	format: "{point.y:,.2f}",
	style: {
	//color: 'red',
	fontSize:'14px'
	},
	},
	color: "#ee2e2a",
	data: [
	<?php
	$servername = "localhost";
	$dbuser = "root";
	$dbpass = "root";
	$dbname = "deadly_force";
	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);
	$year2015='2015';
	//group by gender
	$sthandler = $conn->prepare("select county,shootings_per_100000 from police_killings_per_county2015 where shootings_per_100000 !='0' order by shootings_per_100000 desc");
	$sthandler->bindParam(':year2015', $year2015);
	$sthandler->execute();
	$county = $sthandler->fetchAll();
	foreach ($county as $row) {
	echo $row['shootings_per_100000'].",";
	}
	}
	catch(PDOException $e)
	{
	echo "error" . "<br>" . $e->getMessage();
	}
	$conn = null;

	?>
	]

	}]
	});
	});
	</script>
	<div id="total_killings" style="min-width: 310px; height: 800px; margin: 0 auto"></div>
	</p>
	</div>
	</div>



	</div>
	</div>
	</div>
	</div>
	</div>
	<hr>
	<div class="row">
	<div class="col-lg-12">
	<p>
	<?php
	$servername = "localhost";
	$dbuser = "root";
	$dbpass = "root";
	$dbname = "deadly_force";

	try {
	$conn = new PDO("mysql:host=$servername;dbname=$dbname", $dbuser, $dbpass,array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES utf8"));
	// set the PDO error mode to exception
	$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
	//select victim count from the database
	$sthandler = $conn->prepare("select count(entry_no) as victims from police_killings where year(date_of_incident)=:year2015");
	$sthandler->bindParam(':year2015', $year2015);
	$sthandler->execute();
	$totalvictimcount = $sthandler->fetch();
	$totalvictims=$totalvictimcount['victims'];
	}
	catch(PDOException $e)
	{
	echo "error" . "<br>" . $e->getMessage();
	}
	$conn = null;

	?>
	<a name="database"></a>

	<h2>
	<b><?php echo $totalvictims; ?> people </b>shot and killed in 2015
	</h2>
	
     <!--****begin search database div***************-->
	<div class="well bs-component">
	<div class="row">
	<div class="col-sm-4">
	<div class="panel panel-primary">
	<div class="panel-heading">
	<h3 class="panel-title">Search by name</h3>
	</div>
	<div class="panel-body">
	<div class="form-group">
	<input type="text" class="form-control" id="victim_name" name="victim_name">
	</div>
	</div>
	</div>

	<div class="panel panel-primary">
	<div class="panel-heading">
	<h3 class="panel-title">&nbsp;</h3>
	</div>
	<div class="panel-body">
	<div class="form-group">
	<select class="form-control" id="county" name="county" onchange="getvictimdetailsbymultisearch();">
	<?php
	//select county 2015
	$servername = "localhost";
	$dbuser = "root";
	$dbpass = "root";
	$dbname = "deadly_force";

	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);
	$year2015='2015';
	//group by gender
	$sthandler = $conn->prepare("select distinct incident_county_or_town from police_killings where year(date_of_incident)=:year2015 order by incident_county_or_town asc");
	$sthandler->bindParam(':year2015', $year2015);
	$sthandler->execute();
	$incidentcounty = $sthandler->fetchAll();
	echo "<option>"."County"."</option>";
	foreach ($incidentcounty as $row) {
	echo "<option>".$row["incident_county_or_town"]."</option>";
	}
	}
	catch(PDOException $e)
	{
	echo "error" . "<br>" . $e->getMessage();
	}
	$conn = null;
	//end 2015 incident_county_or_town
	?>
	</select>
	</div>
	</div>
	</div>
	</div><!-- /.col-sm-4 -->
	<div class="col-sm-4">
	<div class="panel panel-primary">
	<div class="panel-heading">
	<h3 class="panel-title">&nbsp;</h3>
	</div>
	<div class="panel-body">
	<div class="form-group">
	<select class="form-control" id="gender" name="gender" onchange="getvictimdetailsbymultisearch()">
	<option value="Gender">Gender</option>
	<option value="M">M</option>
	<option value="F">F</option>
	</select>
	</div>
	</div>
	</div>
	<div class="panel panel-primary">
	<div class="panel-heading">
	<h3 class="panel-title">&nbsp;</h3>
	</div>
	<div class="panel-body">
	<div class="form-group">
	<select class="form-control" id="armed" name="armed" onchange="getvictimdetailsbymultisearch()">
	<?php
	//select armed/unarmed 2015
	$servername = "localhost";
	$dbuser = "root";
	$dbpass = "root";
	$dbname = "deadly_force";

	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);
	$year2015='2015';
	//group by gender
	$sthandler = $conn->prepare("select distinct victim_armed_unarmed from police_killings where year(date_of_incident)=:year2015");
	$sthandler->bindParam(':year2015', $year2015);
	$sthandler->execute();
	$victimarmed = $sthandler->fetchAll();
	echo "<option>"."Armed/Unarmed"."</option>";
	foreach ($victimarmed as $row) {
	echo "<option>".$row["victim_armed_unarmed"]."</option>";
	}
	}
	catch(PDOException $e)
	{
	echo "error" . "<br>" . $e->getMessage();
	}
	$conn = null;
	//end 2015 armed/unarmed
	?>
	</select>
	</div>
	</div>
	</div>
	</div><!-- /.col-sm-4 -->
	<div class="col-sm-4">
	<div class="panel panel-primary">
	<div class="panel-heading">
	<h3 class="panel-title">&nbsp;</h3>
	</div>
	<div class="panel-body">
	<div class="form-group">
	<select class="form-control" id="occupation" name="occupation" onchange="getvictimdetailsbymultisearch()">
	<?php
	//select occupation 2015
	$servername = "localhost";
	$dbuser = "root";
	$dbpass = "root";
	$dbname = "deadly_force";

	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);
	$year2015='2015';
	//group by gender
	$sthandler = $conn->prepare("select distinct victim_occupation from police_killings where year(date_of_incident)=:year2015 order by victim_occupation asc");
	$sthandler->bindParam(':year2015', $year2015);
	$sthandler->execute();
	$occupation = $sthandler->fetchAll();
	echo "<option>"."Occupation"."</option>";
	foreach ($occupation as $row) {
	echo "<option>".$row["victim_occupation"]."</option>";
	}
	}
	catch(PDOException $e)
	{
	echo "error" . "<br>" . $e->getMessage();
	}
	$conn = null;
	//end 2015 killings by occupation
	?>
	</select>
	</div>
	</div>
	</div>
	<div class="panel panel-primary">
	<div class="panel-heading">
	<h3 class="panel-title">&nbsp;</h3>
	</div>
	<div class="panel-body">
	<div class="form-group">
	<select class="form-control" id="police_weapon" name="police_weapon" onchange="getvictimdetailsbymultisearch()">
	<?php
	//select police_weapon 2015
	$servername = "localhost";
	$dbuser = "root";
	$dbpass = "root";
	$dbname = "deadly_force";

	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);
	$year2015='2015';
	//group by gender
	$sthandler = $conn->prepare("select distinct police_weapon from police_killings where year(date_of_incident)=:year2015");
	$sthandler->bindParam(':year2015', $year2015);
	$sthandler->execute();
	$policeweapon = $sthandler->fetchAll();
	echo "<option>"."Police weapon used"."</option>";
	foreach ($policeweapon as $row) {
	echo "<option>".$row["police_weapon"]."</option>";
	}
	}
	catch(PDOException $e)
	{
	echo "error" . "<br>" . $e->getMessage();
	}
	$conn = null;
	//end 2015 killings by police weapon
	?>
	</select>
	</div>
	</div>
	</div>
	</div><!-- /.col-sm-4 -->
	</div>
	</div>

	<!--****end search database div***********************************-->

    <div class="row">
    <div class="col-lg-12">
    <div id="pictogrambyname"></div>
	<div id="pictogrambygender"></div>
	<div id="pictogrambyoccupation"></div>
	<div id="pictogrambycounty"></div>
	<div id="pictogrambyarmed"></div>
	<div id="pictogrambypoliceweapon"></div>
	<div id="pictogrambymultisearch"></div>
	</div>
	</div>
   <div id="mainpictogram"><!--pictogram that shows all killings by year-->
	<h5>Hover over an image to get more information sorted by date</h5>
    <?php
	$servername = "localhost";
	$dbuser = "root";
	$dbpass = "root";
	$dbname = "deadly_force";
	$year2015='2015';
	try {
	$conn = new PDO("mysql:host=$servername;dbname=$dbname", $dbuser, $dbpass,array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES utf8"));
	// set the PDO error mode to exception
	$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
	//check if victim name exists in the database
	$sthandler = $conn->prepare("select * from police_killings where year(date_of_incident)=:year2015 order by date_of_incident desc");
	$sthandler->bindParam(':year2015', $year2015);
	$sthandler->execute();
	$victims = $sthandler->fetchAll();
	foreach ($victims as $row) {
	$gender=$row['victim_gender'];
	if($gender=='M'){
	$icon='../images/male.png';
	$gender="Male";}
	elseif($gender=='F'){
	$icon='../images/female.png';
	$gender="Female";}
	else{
	$icon='../images/unknown.png';}
	$incident_date=date_create($row['date_of_incident']);
	echo '<a title="'.
	'<div class=\'victim_names\'>'.'<span class=\'label label-danger\'>'.$row['victim_names'].'</span>'.'</div>'.
	'<div class=\'incident_date\'>'.'<span class=\'label label-default\'>'.'Date killed: '.date_format($incident_date,"F d, Y").'</div>'.'</div>'.
	'<div class=\'parentmid\'>'.//begin middle div
	'<div class=\'midleft\'>'.//begin image div
	'<img src=\''.'../'.$row['imagepath'].'\'>'.
	'</div>'.//end image div
	'<div class=\'midright\'>'.//begin midright div
	'<div class=\'victim_gender\'>'.$gender.'</div>'.
	'<div class=\'victim_age\'>'.'Age: '.$row['victim_age'].'</div>'.
	'<div class=\'incident_county\'>'.$row['incident_county_or_town'].' county'.'</div>'.
	'<div class=\'victim_armed\'>'.'Victim armed/unarmed: '.$row['victim_armed_unarmed'].'</div>'.
	'<div class=\'victim_occupation\'>'.'Occupation: '.$row['victim_occupation'].'</div>'.
	'<div class=\'police_weapon\'>'.'Police weapon used: '.$row['police_weapon'].'</div>'.
	'<div class=\'officer_involved\'>'.'<span class=\'label label-primary\'>'.'Officer(s) identified: '.$row['officer_involved'].'</span>'.'</div>'.
	'<div class=\'case_status\'>'.'Status of the case: '.$row['status_of_case'].'</div>'.
	'</div>'.//end midright div
	'</div>'.//end middle div
	'<div class=\'incident_summary\'>'.$row['incident_summary'].'</div>'.'"rel="tooltip">'.
	'<div id="victim_tile"><img src="'.$icon.'">'.'</div>'.
	'</a>';	
	}
	}
	catch(PDOException $e)
	{
	echo "error" . "<br>" . $e->getMessage();
	}
	$conn = null;
	?>
	</p>
	</div>

	</div>
	</div>
	
	</div><!---end main pictogram--->

	<hr>
	<div class="row">
	<div class="col-lg-12">
	<p>
	<h2>A third of all killings by police in 2015 happened in Nairobi</h2>
	<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,share_of_shooting,shootings_per_100000,ranking_per_capita from police_killings_per_county2015");
	$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']).',"share_of_shooting":'.trim($row['share_of_shooting']).',"ranking_per_capita":'.trim($row['ranking_per_capita']).',},';
	echo $mapdata;
	//echo "<br>";
	}
	}
	//get victim names from database
	catch(PDOException $e)
	{
	echo "error" . "<br>" . $e->getMessage();
	}
	$conn = null;
	//end 2015 killings by month
	?>];

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

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

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

	legend: {
	title: {
	text: "Killings per 100,000 people",
	style: {
	color: (Highcharts.theme && Highcharts.theme.textColor) || 'black',
	fontFamily: 'Helvetica',
	fontWeight: 'normal',
	fontSize: '18px'
	}
	},
	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 totalkillings="<b>"+numeral(this.point.z).format('0,0')+ "</b>"+" killing(s) in 2015";
	var shareofkillings=" Share of killings: "+"<b>"+numeral(this.point.share_of_shooting*100).format('0,0')+"%"+"</b>";
	var killingsper="<b>"+numeral(this.point.value).format('0,0.[00]')+ "</b>"+" killing(s) per 100,000 people";
	var rankingpercapita=" Ranking per capita: "+"<b>"+numeral(this.point.ranking_per_capita).format('0,0.[00]')+ "</b>";
	c += totalkillings+"<br>"+shareofkillings+"<br>"+killingsper+"<br>"+rankingpercapita;
	return c;
	},
	style: {
	fontFamily: 'Helvetica',
	fontColor:'#cccccc',
	fontSize: '18px'
	},
	},
	series : [
	{
	enableMouseTracking: true,
	name: 'Counties',
	//data : data,
	mapData: geojson,
	color: '#ef5c0b',
	cursor: 'normal',
	joinBy: ['COUNTY', 'code'],
	data: data,
	name: '2016 killings',
	states: {
	hover: {
	color: '#7d7e7f'
	}
	},
	dataLabels: {
	enabled: false,
	format: '{point.properties.COUNTY3_ID}',
	style: {
	fontFamily: 'Helvetica',
	fontColor:'#cccccc',
	},
	}
	},
	{
	type: 'mapbubble',
	mapData: geojson,
	name: 'Number of killings',
	joinBy: ['COUNTY', 'code'],
	color:'#ee2e2a',
	data: data,
	minSize: 0,
	maxSize: '12%',
	},
	]
	});
	});
	});
	</script>
	<div id="2016map" style="width:100%;height:800px;" >
	<div class="loading"><img src="../images/378.gif"/><br>Loading...</div>
	</div>
	</div>
	</div>

	<hr>
	<div class="row">
	<div class="col-lg-12">
	<p>
	<!--trends in police killings in kenya line_chart-->
	<?php
	$servername = "localhost";
	$dbuser = "root";
	$dbpass = "root";
	$dbname = "deadly_force";
    ?>
	<script type="text/javascript">
	$(function () {
	$('#trend_line_chart').highcharts({
	chart: {
	events: {
            load: function() {
                this.renderer.image('http://newsplex.nation.co.ke/newsplex_watermark.png', '82%','93%', 60, 29)
                    .add();
            },
        },
	type: 'line',
	backgroundColor: null,
	plotBackgroundColor: null,
	plotBorderWidth: null,
	plotShadow: false,
	style: {
	fontFamily: 'Helvetica'
	},
	},
	plotOptions: {
	line: {
	//pointPadding: 0.2,
	//borderWidth: 0,
	marker: {
	enabled: true,
	//lineWidth: 1,
	//lineColor: null,
	symbol: 'circle',
	radius: 2
	},
	},
	},
	title: {
	text: 'Trends in police killings from January 2015 to December 2016',
	x: -20, //center
	style:{color: 'black',fontSize: '25px'}
	},
	subtitle: {
	text: 'There were 65 more killings by police in 2016 than 2015',
	x: -20,
	style:{color: 'black',fontSize: '18px'},
	},
	xAxis: {
	labels: {
	style: {
	font: '16px Helvetica'
	}
	},
	categories: [
	'Jan', 
	'Feb', 
	'Mar', 
	'Apr', 
	'May', 
	'Jun',
	'Jul', 
	'Aug', 
	'Sep', 
	'Oct', 
	'Nov', 
	'Dec'
	]
	},
	yAxis: {
	labels: {
	style: {
	font: '16px Helvetica'
	}
	},
	title: {
	text: 'Killed',
	style: {

	fontSize:'18px'
	},
	},
	plotLines: [{
	value: 0,
	width: 1,
	color: '#ee2e2a'
	}]
	},
	credits: {
	enabled: false
	},
	tooltip: {
	style: {
	fontFamily: 'Helvetica',
	fontSize: '18px'
	},
	headerFormat: '{point.key}<table>',
	pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
	'<td style="padding:0"><b>{point.y:,.0f}</b></td></tr>',
	footerFormat: '</table>',
	shared: true,
	useHTML: true
	},
	legend: {
	enabled: true,
	floating: false,
	verticalAlign: 'bottom',
	align:'center',
	itemStyle: {
	//color: '#000000',
	//fontWeight: 'bold',
	fontSize: '16px'
	},
	//y:40
	},
	series: [{
	name: '2016',
	color:'#ee2e2a',
	lineWidth: 3,
	data: [<?php
	//select 2016 killings by month
	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);
	$year2016='2016';
	//group by gender
	$sthandler = $conn->prepare("select month(date_of_incident)as month,year(date_of_incident)as year,count(entry_no) as victims from police_killings where year(date_of_incident)=:year2016 group by month(date_of_incident)");
	$sthandler->bindParam(':year2016', $year2016);
	$sthandler->execute();
	$victims = $sthandler->fetchAll();
	foreach ($victims as $row) {
	$monthNum  = $row['month'];
	$dateObj   = DateTime::createFromFormat('!m', $monthNum);
	$monthName = $dateObj->format('F'); // March
	//echo $monthName;
	//echo "Month=".$row['month']." year=".$row['year']." victims=".$row['victims'].",";
	//echo "<br>";
	echo $row['victims'].",";
	}
	}
	catch(PDOException $e)
	{
	echo "error" . "<br>" . $e->getMessage();
	}
	$conn = null;
	//end 2016 killings by month
	?>
	]
	}, {
	name: '2015',
	color:'#FF0000',
	dashStyle: 'shortdash',
	data: [<?php
	//select 2015 killings by month
	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);
	$year2015='2015';
	//group by gender
	$sthandler2015 = $conn->prepare("select month(date_of_incident)as month,year(date_of_incident)as year,count(entry_no) as victims from police_killings where year(date_of_incident)=:year2015 group by month(date_of_incident)");
	$sthandler2015->bindParam(':year2015', $year2015);
	$sthandler2015->execute();
	$victims2015 = $sthandler2015->fetchAll();
	foreach ($victims2015 as $row) {
	$monthNum  = $row['month'];
	$dateObj   = DateTime::createFromFormat('!m', $monthNum);
	$monthName = $dateObj->format('F'); // March
	//echo $monthName;
	//echo "Month=".$row['month']." year=".$row['year']." victims=".$row['victims'].",";
	echo $row['victims'].",";
	}
	}
	catch(PDOException $e)
	{
	echo "error" . "<br>" . $e->getMessage();
	}
	$conn = null;
	//end 2015 killings by month
	?>
	]
	}]
	});
	});
	</script>
	<div id="trend_line_chart" style="min-width: 310px; height: 600px; margin: 0 auto"></div>
	<!--end trend line chart-->

	</p>
	</div>
	</div>
    <a href="../" class="btn btn-default">Click for 2016 database &raquo;</a><br>
	Read about <a href="about.php">the Deadly Force</a> and <a href="tip.php">send a tip.</a> Click on the <a href="tip.php">Submit tip</a> tab.
	</div> <!-- /container -->


	<!-- Bootstrap core JavaScript
	================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->

	<script src="../js/bootstrap.min.js"></script>
	<script src="../js/bootstrapValidator.js"></script>
	<script src="../js/bootswatch.js"></script>
	<script src="../js/jquery.easing.1.3.js"></script>
	<script src="../js/jquery.color.js"></script>
	<script src="../js/jquery.animateNumber.js"></script>
	<script src="../js/jquery-ui.js"></script>
	<script src="http://code.highcharts.com/stock/highstock.js"></script>
	<script src="http://code.highcharts.com/highcharts-more.js"></script>
	<script src="http://code.highcharts.com/maps/modules/map.js"></script>
	<script src="http://code.highcharts.com/modules/exporting.js"></script>
	<script src="../js/numeral.js"></script>
	<!-- custom scrollbar plugin -->
	<script src="../js/jquery.mCustomScrollbar.js"></script>
	
	<script>
		(function($){
			$(window).on("load",function(){
				
				$("#content-1").mCustomScrollbar({
					setHeight:510,
					theme:"minimal-dark"
				});
				
			});
		})(jQuery);
	</script>
	</body>
	</html>
