	<!DOCTYPE HTML>
	<html>
	<head>  
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<script src="js/jquery-1.9.1.js" type="text/javascript"></script>
	<link href="https://fonts.googleapis.com/css?family=Droid+Sans" rel="stylesheet"> 
	
	<style>
	body{font-family:Helvetica,Arial,sans-serif;}h2{text-align:center;}
	</style>
	<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 2015 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
	$('#2015map').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',
	},
	}
	},
	
	]
	});
	});
	});
	</script>
	<head>
	<body>
	<div id="2015map" style="width:100%;height:800px;" >
	<div class="loading"><img src="images/378.gif"/><br>Loading...</div>
	</div>
	<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>
	</body>
	</html>