<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<h1>Click the filter icon <small>(<i class="glyphicon glyphicon-filter"></i>)</small></h1>
<div class="row">
<div class="col-md-12">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Developers</h3>
<div class="pull-right">
<span class="clickable filter" data-toggle="tooltip" title="Toggle table filter" data-container="body">
<i class="glyphicon glyphicon-filter"></i>
</span>
</div>
</div>
<div class="panel-body">
<div class="form-inline">
<input type="text" class="form-control form-control-inline" placeholder="Filtro 1" />
<input type="text" class="form-control form-control-inlinel" placeholder="Filtro 2" />
<input type="text" class="form-control form-control-inline" placeholder="Filtro 3" />
<!--
Para usarlo correctamente, leer como se usa:
http://xdsoft.net/jqplugins/datetimepicker/
ahi sale como colocar el idioma tambien, y como inicializarlo correctamente
-->
<link rel="stylesheet" href="http://xdsoft.net/scripts/pp/mmnt.css"/>
<script src="http://xdsoft.net/scripts/pp/mmnt.js"></script>
<input type="text" id="periodpickerstart1"/>
<input type="text" id="periodpickerend1"/>
</div>
</div>
<div class="main-table">
<table class="table table-hover" id="dev-table">
<thead>
<tr>
<th>Fecha</th>
<th>RUT cliente</th>
<th>RUT usuario</th>
<th>Canal</th>
<th>Host Servidor</th>
<th>IP</th>
<th>Link geolocalizacion</th>
<th>Transaccion</th>
<th>Estado</th>
</tr>
</thead>
<tbody>
<tr>
<td>2017-01-25</td>
<td>75.123.584-K</td>
<td>18.015.608-9</td>
<td>App Movil</td>
<td>Que es esto</td>
<td>127.0.0.1</td>
<td>Link</td>
<td>+$78(?)</td>
<td>Aprobada</td>
</tr>
<tr>
<td>2017-01-25</td>
<td>75.123.584-K</td>
<td>18.015.608-9</td>
<td>App Movil</td>
<td>Que es esto</td>
<td>127.0.0.1</td>
<td>Link</td>
<td>+$78(?)</td>
<td>Aprobada</td>
</tr>
<tr>
<td>2017-01-25</td>
<td>75.123.584-K</td>
<td>18.015.608-9</td>
<td>App Movil</td>
<td>Que es esto</td>
<td>127.0.0.1</td>
<td>Link</td>
<td>+$78(?)</td>
<td>Aprobada</td>
</tr>
<tr>
<td>2017-01-25</td>
<td>75.123.584-K</td>
<td>18.015.608-9</td>
<td>App Movil</td>
<td>Que es esto</td>
<td>127.0.0.1</td>
<td>Link</td>
<td>+$78(?)</td>
<td>Aprobada</td>
</tr>
<tr>
<td>2017-01-25</td>
<td>75.123.584-K</td>
<td>18.015.608-9</td>
<td>App Movil</td>
<td>Que es esto</td>
<td>127.0.0.1</td>
<td>Link</td>
<td>+$78(?)</td>
<td>Aprobada</td>
</tr>
<tr>
<td>2017-01-25</td>
<td>75.123.584-K</td>
<td>18.015.608-9</td>
<td>App Movil</td>
<td>Que es esto</td>
<td>127.0.0.1</td>
<td>Link</td>
<td>+$78(?)</td>
<td>Aprobada</td>
</tr>
<tr>
<td>2017-01-25</td>
<td>75.123.584-K</td>
<td>18.015.608-9</td>
<td>App Movil</td>
<td>Que es esto</td>
<td>127.0.0.1</td>
<td>Link</td>
<td>+$78(?)</td>
<td>Aprobada</td>
</tr>
<tr>
<td>2017-01-25</td>
<td>75.123.584-K</td>
<td>18.015.608-9</td>
<td>App Movil</td>
<td>Que es esto</td>
<td>127.0.0.1</td>
<td>Link</td>
<td>+$78(?)</td>
<td>Aprobada</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-md-6">
<canvas id="pie_chart" height="200"></canvas>
</div>
<div class="col-md-6">
<canvas id="bar_chart" height="200"></canvas>
</div>
</div>
</div>
<!-- Hay que incluirlo bien -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.min.js"></script>
.row{
margin-top:40px;
padding: 0 10px;
}
.clickable{
cursor: pointer;
}
.panel-heading div {
margin-top: -18px;
font-size: 15px;
}
.panel-heading div span{
margin-left:5px;
}
.panel-body{
display: none;
}
.panel-primary > .panel-heading {
background-color: #3775a7;
}
.panel-primary {
border-color: #3775a7;
}
.main-table {
border-collapse: collapse;
display: block;
overflow-x: scroll;
}
/**
* I don't recommend using this plugin on large tables, I just wrote it to make the demo useable. It will work fine for smaller tables
* but will likely encounter performance issues on larger tables.
*
* <input type="text" class="form-control" id="dev-table-filter" data-action="filter" data-filters="#dev-table" placeholder="Filter Developers" />
* $(input-element).filterTable()
*
* The important attributes are 'data-action="filter"' and 'data-filters="#table-selector"'
*/
/*
*
* Quizas hay cosas aca que no usaremos
*
*/
(function(){
'use strict';
var $ = jQuery;
$.fn.extend({
filterTable: function(){
return this.each(function(){
$(this).on('keyup', function(e){
$('.filterTable_no_results').remove();
var $this = $(this),
search = $this.val().toLowerCase(),
target = $this.attr('data-filters'),
$target = $(target),
$rows = $target.find('tbody tr');
if(search == '') {
$rows.show();
} else {
$rows.each(function(){
var $this = $(this);
$this.text().toLowerCase().indexOf(search) === -1 ? $this.hide() : $this.show();
})
if($target.find('tbody tr:visible').size() === 0) {
var col_count = $target.find('tr').first().find('td').size();
var no_results = $('<tr class="filterTable_no_results"><td colspan="'+col_count+'">No results found</td></tr>')
$target.find('tbody').append(no_results);
}
}
});
});
}
});
$('[data-action="filter"]').filterTable();
})(jQuery);
$(function(){
// attach table filter plugin to inputs
$('[data-action="filter"]').filterTable();
$('.container').on('click', '.panel-heading span.filter', function(e){
var $this = $(this),
$panel = $this.parents('.panel');
$panel.find('.panel-body').slideToggle();
if($this.css('display') != 'none') {
$panel.find('.panel-body input').focus();
}
});
$('[data-toggle="tooltip"]').tooltip();
});
$(document).ready(function(){
/*
* Creo un grafico de torta
*
*/
var data_pie_chart = {
labels: [],
datasets: [
{
data: [],
backgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56",
"#C261FF",
"#4724FF",
"#BF4CB2",
"#FFC2B8",
"#AD1499",
"#59C9BA",
"#DEC978",
"#FFD926"
]
}]
};
data_pie_chart.labels.push("Etiqueta 1");
data_pie_chart.datasets[0].data.push(6);
data_pie_chart.labels.push("Etiqueta 2");
data_pie_chart.datasets[0].data.push(8);
data_pie_chart.labels.push("Etiqueta 3");
data_pie_chart.datasets[0].data.push(4);
data_pie_chart.labels.push("Etiqueta 4");
data_pie_chart.datasets[0].data.push(5);
var pie_chart = new Chart($("#pie_chart"), {
type: 'pie',
data: data_pie_chart,
options:{
responsive: true,
title: {
display: true,
text: 'Grafico de torta'
},
legend: {
onClick: function (e) {
e.stopPropagation();
}
}
}
});
/*
* Creo un grafico de barra
*
*/
var data_bar_chart = {
labels: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
datasets: [
{
label: "Dinero enviado",
data: [4,8,5,6,7,3,6,4,7,8,7,5],
backgroundColor: "rgba(0, 0, 0, 0.1)",
borderColor: "#444444",
borderWidth: 2
},
{
label: "Dinero recibido",
data: [2,5,6,3,4,9,4,6,3,4,3,2],
backgroundColor: "rgba(160, 0, 0, 0.5)",
borderColor: "#444444",
borderWidth: 2
}]
};
var bar_chart = new Chart($("#bar_chart"), {
type: 'bar',
data: data_bar_chart,
options:{
scales: { // Esto es para que el eje Y parta desde 0
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
responsive: true,
title: {
display: true,
text: 'Grafico de barras'
},
legend: {
onClick: function (e) {
e.stopPropagation();
}
}
}
});
});
