<!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>
.container.main {
	margin-top: 50px;
}
@media only screen and (max-width: 600px) {
.navbar-fixed-top {
	}
.header-slogan {
	margin-right: 0px;
	}
.btn{
margin-bottom:5px;
	}
.navbar-nav > li > a {
	padding-top: 10px;
	padding-bottom: 10px;
	line-height: 20px;
	padding-left:20px;
	}
}
#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","getvictimdetailsbymultisearch.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>
</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="tip.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">2016 database</a> <a href="2015" class="btn btn-default">Click for 2015 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";

//select chart titles
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 chart titles from the database
$sthandler = $conn->prepare("select * from police_killings_chart_titles");
$sthandler->execute();
$charttitle = $sthandler->fetch();
$shorttitle=$charttitle['short_chart_titles'];
$longertitle=$charttitle['longer_chart_titles'];
$maptitle=$charttitle['map_title'];
$linecharttitle=$charttitle['line_chart_title'];
$linechartsubtitle=$charttitle['line_chart_subtitle'];
}
catch(PDOException $e)
{
echo "error" . "<br>" . $e->getMessage();
}
$conn = null;


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)=2016");
$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 <div id="short_title" style="display:inline;"><?php echo $shorttitle; ?></div></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;min-height:120px;}
</style>
</div>
</div>

<div class="col-lg-4">
<div class="bs-component">
<span class="underline_heading">Who was killed <div id="short_title" style="display:inline;"><?php echo $shorttitle; ?></div></span>
<?php

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)='2016' 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', '80%','90%', 60, 29)
				.add();
		},*/
	},
backgroundColor: null,
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
style: {
fontFamily: 'Open Sans',
fontSize: '14px'
},
},
title: {
text: "",
style:{color: 'black',fontSize: '15px'}
},
subtitle: {
text: ''
},
credits: {
enabled: false
},
tooltip: {
style: {
fontFamily: 'Open Sans',
fontSize: '16px'
},
pointFormat: '<b>{point.y}</b><br><b>{point.percentage:.0f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
style: {
fontFamily: 'Open Sans',
fontSize: '16px'
},
},
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 <div id="short_title" style="display:inline;"><?php echo $shorttitle; ?></div></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: 'Open Sans',
fontSize: '16px'
},
},
title: {
text: ''
},
subtitle: {
text: ''
},
credits: {
enabled: false
},
xAxis: {
categories: [
<?php

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 county,killed from police_killings_per_county2016 where killed !='0' order by killed desc");
$sthandler->bindParam(':year2016', $year2016);
$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: '.9em "Open Sans", sans-serif'
}
},
crosshair: true
},
yAxis: {
//min: 0,
//max: 100,
title: {
text: ''
}
},
tooltip: {
style: {
fontFamily: 'Open Sans',
fontSize: '16px'
},
formatter: function() {
return this.key+'<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

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 county,killed from police_killings_per_county2016 where killed !='0' order by killed desc");
$sthandler->bindParam(':year2016', $year2016);
$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', '80%','93%', 60, 29)
				.add();
		},*/
	},
type: 'bar',
style: {
fontFamily: 'Open Sans',
fontSize: '16px'
},
},
title: {
text: ''
},
subtitle: {
text: ''
},
credits: {
enabled: false
},
xAxis: {
categories: [
<?php

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 county,shootings_per_100000 from police_killings_per_county2016 where shootings_per_100000 !='0' order by shootings_per_100000 desc");
$sthandler->bindParam(':year2016', $year2016);
$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: '14px "Open Sans", sans-serif'
}
},
crosshair: true
},
yAxis: {
//min: 0,
//max: 100,
title: {
text: ''
}
},
tooltip: {
style: {
fontFamily: 'Open Sans',
fontSize: '16px'
},
formatter: function() {
return this.key+'<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

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 county,shootings_per_100000 from police_killings_per_county2016 where shootings_per_100000 !='0' order by shootings_per_100000 desc");
$sthandler->bindParam(':year2016', $year2016);
$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

$year2016='2016';

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)=:year2016");
$sthandler->bindParam(':year2016', $year2016);
$sthandler->execute();
$totalvictimcount = $sthandler->fetch();
$totalvictims=$totalvictimcount['victims'];
}
catch(PDOException $e)
{
echo "error" . "<br>" . $e->getMessage();
}
$conn = null;

?>
<a name="database"></a>
<div class="col-sm-12">
<h2>
<b><?php echo $totalvictims; ?> people </b>shot and killed <div id="long_title" style="display:inline;"><?php echo $longertitle; ?></div>
</h2>
</div>

 <!--****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 2016

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 distinct incident_county_or_town from police_killings where year(date_of_incident)=:year2016 order by incident_county_or_town asc");
$sthandler->bindParam(':year2016', $year2016);
$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 2016 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 2016

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 distinct victim_armed_unarmed from police_killings where year(date_of_incident)=:year2016");
$sthandler->bindParam(':year2016', $year2016);
$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 2016 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 2016

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 distinct victim_occupation from police_killings where year(date_of_incident)=:year2016 order by victim_occupation asc");
$sthandler->bindParam(':year2016', $year2016);
$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 2016 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 2016

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 distinct police_weapon from police_killings where year(date_of_incident)=:year2016");
$sthandler->bindParam(':year2016', $year2016);
$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 2016 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" style="padding:0px 10px;"><!--pictogram that shows all killings by year-->
<h5>Hover over an image to get more information sorted by date</h5>
<?php
$year2016='2016';
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)=:year2016 order by date_of_incident desc");
$sthandler->bindParam(':year2016', $year2016);
$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><?php echo $maptitle; ?></h2>
<script>
$(function () {
Highcharts.setOptions({
lang: {
thousandsSep: ',',
numericSymbols: null //otherwise by default ['k', 'M', 'G', 'T', 'P', 'E']
}
});
// Prepare  data
var data = [<?php

//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_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']).',"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 2016 killings by month
?>];

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

// Initiate the chart
$('#2016map').highcharts('Map', {
events: {
		/*load: function() {
			this.renderer.image('http://newsplex.nation.co.ke/newsplex_watermark.png', '80%','93%', 60, 29)
				.add();
		},*/
	},
	navigation: {
			menuItemStyle: {
                fontSize: '12px',
			}
        },
title : {
text : "Where the 2016 killings took place",
style: {
fontFamily: 'Open Sans',
fontSize: '16px'
},
},
subtitle: {
text: 'The size of the bubble represents the total number of killings',
style: {
fontFamily: 'Open Sans',
fontSize: '16px'
},
},

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

legend: {
enabled:false,
title: {
text: "Killings per 100,000 people",
style: {
//color: (Highcharts.theme && Highcharts.theme.textColor) || 'black',
fontFamily: 'Open Sans',
fontWeight: 'normal',
fontSize: '14px'
}
},
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 2016";
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: 'Open Sans',
fontColor:'#cccccc',
fontSize: '14px'
},
},
series : [
{
enableMouseTracking: false,
name: 'Counties',
borderColor: '#a0a0a0',
nullColor: 'rgba(200, 200, 200, 0.3)',
showInLegend: false,
mapData: geojson,
cursor: 'normal',
joinBy: ['COUNTY', 'code'],
data: data,
name: '2016 killings',
states: {
hover: {
color: '#7d7e7f'
}
},
dataLabels: {
enabled: true,
format: '{point.properties.COUNTY}',
style: {
fontFamily: 'Open Sans',
fontColor:'#cccccc',
},
}
},
{
type: 'mapbubble',
mapData: geojson,
marker: {
lineColor: '#FA4541',
fillColor: '#FA4541',
    },
name: 'Number of killings',
joinBy: ['COUNTY', 'code'],
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-->

<script type="text/javascript">
$(function () {
$('#trend_line_chart').highcharts({
chart: {
events: {
		/*load: function() {
			this.renderer.image('http://newsplex.nation.co.ke/newsplex_watermark.png', '80%','93%', 60, 29)
				.add();
		},*/
	},
type: 'line',
backgroundColor: null,
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
style: {
fontFamily: 'Open Sans'
},
},
navigation: {
			menuItemStyle: {
                fontSize: '12px',
			}
        },
plotOptions: {
line: {
//pointPadding: 0.2,
//borderWidth: 0,
marker: {
enabled: true,
//lineWidth: 1,
//lineColor: null,
symbol: 'circle',
radius: 2
},
},
},
title: {
text: '<?php echo $linecharttitle;?>',
x: -20,//center
style:{color: 'black',fontSize: '25px'}
},
subtitle: {
text: '<?php echo $linechartsubtitle;?>',
style:{color: 'black',fontSize: '18px'},
x: -20
},
xAxis: {
labels: {
style: {
font: '14px "Open Sans"'
}
},
categories: [
'Jan', 
'Feb', 
'Mar', 
'Apr', 
'May', 
'Jun',
'Jul', 
'Aug', 
'Sep', 
'Oct', 
'Nov', 
'Dec'
]
},
yAxis: {
labels: {
style: {
font: '14px "Open Sans"'
}
},
title: {
text: 'Killed',
style: {
fontSize:'14px'
},
},
plotLines: [{
value: 0,
width: 1,
color: '#ee2e2a'
}]
},
credits: {
enabled: false
},
tooltip: {
style: {
fontFamily: 'Open Sans',
fontSize: '14px'
},
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: '14px'
},
//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;padding:0px 10px;"></div>
<!--end trend line chart-->
<a href="2015" class="btn btn-default">Click for 2015 database  &raquo;</a><br><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>
</div>

</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="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/maps/modules/map.js"></script>
<script src="https://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>
