<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.13/datatables.min.css"/>
<link rel="stylesheet" href="style.css" />
</head>
<body ng-app="TableFilterApp" ng-controller="TableFilterController" data-ng-init="init()">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">Options <span class="sr-only">(current)</span>
</a>
</li>
<li>
<a href="#">Utility</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Reports <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>
<a href="#">Action</a>
</li>
<li>
<a href="#">Another action</a>
</li>
<li>
<a href="#">Something else here</a>
</li>
<li role="separator" class="divider"></li>
<li>
<a href="#">Separated link</a>
</li>
<li role="separator" class="divider"></li>
<li>
<a href="#">One more separated link</a>
</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search" />
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#">Navigation</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Help <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>
<a href="#">Action</a>
</li>
<li>
<a href="#">Another action</a>
</li>
<li>
<a href="#">Something else here</a>
</li>
<li role="separator" class="divider"></li>
<li>
<a href="#">Separated link</a>
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="container">
<ul class="nav nav-tabs">
<li role="presentation" class="active">
<a href="#">Find</a>
</li>
<li role="presentation">
<a href="#">Info</a>
</li>
<li role="presentation">
<a href="#">Referalls</a>
</li>
</ul>
<div class="panel panel-default top-panel-tabs">
<div class="panel-body">
<div class="row">
<div class="col-md-3">
<div class="input-group">
<label>Name:</label>
<input type="text" ng-model="f.name" class="form-control" placeholder="Name" aria-describedby="Name" />
</div>
</div>
<div class="col-md-3">
<div class="input-group">
<label>Office:</label>
<input type="text" ng-model="f.city" class="form-control" placeholder="Office" aria-describedby="City" />
</div>
</div>
<div class="col-md-3">
<div class="input-group">
<label>Salary:</label>
<input type="text" ng-model="f.salary" class="form-control" placeholder="$" aria-describedby="Phone" />
</div>
</div>
<!--
<div class="col-sm-3 col-sm-push-9"><a href="" class="btn btn-primary">Button 1</a></div>
<div class="col-sm-9 col-sm-pull-3"></div>
-->
</div>
<div class="row">
<br />
<div class="col-md-12 text-right">
<a class="btn btn-primary" href="">Search</a>
</div>
</div>
<div class="row">
<br />
<div class="col-md-12">
<table class="table table-striped table-bordered dataTable no-footer">
<thead>
<tr role="row">
<th class="sorting_asc" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Name: activate to sort column descending" style="width: 113px;">Name</th>
<th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Position: activate to sort column ascending" style="width: 195px;">Position</th>
<th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Office: activate to sort column ascending" style="width: 82px;">Office</th>
<th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Salary: activate to sort column ascending" style="width: 61px;">Salary</th>
</tr>
</thead>
<tbody>
<tr role="row" ng-repeat="p in users | filter:f" class="odd">
<td class="sorting_1">{{p.name}}</td><td>{{p.title}}</td><td>{{p.city}}</td><td>{{p.salary | currency}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div style="max-width: 400px; max-height: 400px;">
<canvas id="salaryChart" width="400" height="400"></canvas>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Scripts at end -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script data-require="bootstrap@3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script data-require="angular.js@1.6.1" data-semver="1.6.1" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.13/datatables.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script>
<script src="script.js"></script>
</body>
</html>
angular.module('TableFilterApp', [])
.controller('TableFilterController', function($scope) {
$scope.users = [
{
name : 'Airi Satou',
city : 'Tokyo',
salary: 162700,
title : 'Accountant'
},
{
name : 'Angelica Ramos',
city : 'London',
salary: 1200000,
title : 'Cheif Executive Officer (CEO)'
},
{
name : 'Ashton Cox',
city: 'San Francisco',
salary: 86000,
title : 'Junior Technical Author'
},
{
name : 'Bradley Greer',
city : 'London',
salary: 132000,
title : 'Software Engineer'
},
{
name : 'Brenden Wagner',
city : 'San Fransisco',
salary: 206850,
title : 'Software Engineer'
},
{
name : 'Brielle Williamson',
city : 'New York',
salary: 372000,
title : 'Integration Specialist'
},
{
name : 'Bruno Nash',
city : 'London',
salary: 163500,
title : 'Software Engineer'
},
{
name : 'Caesar Vance',
city : 'New York',
salary: 106450,
title : 'Pre-Sales Support'
},
{
name : 'Cara Stevens',
city : 'New York',
salary: 145600,
title : 'Sales Assistant'
},
{
name : 'Cedric Kelly',
city : 'Edinburgh',
salary: 433060,
title : 'Senior Javascript Developer'
},
{
name : 'Matt Goldsworthy',
city : 'Helena',
salary: 1500000,
title : 'President'
}
];
$scope.init = function () {
renderChart($scope.users);
};
}
);
function renderChart(data){
var ctx = document.getElementById("salaryChart");
var name = [];
var salary = [];
for (var i = 0; i < data.length; i++) {
salary.push(data[i].salary);
name.push(data[i].name);
}
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: name,
datasets: [{
label: 'Salary',
data:salary,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
};
/* Styles go here */
.top-panel-tabs{
border-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}