qwerty/tupali
4
1
Fork 1
Code Issues 25 Pull Requests Releases Wiki Activity

mejoras en la graficacion de estadisticas

Browse Source
This commit is contained in:
humano 2017-10-29 19:15:59 -05:00
parent 02d1af925f
commit 1d258491eb
11 changed files with 18956 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.php
View File

@ -458,7 +458,7 @@ if ($variable !=''){
$registros
</div>
</section>
<section id='estadisticas' >
<section id='estadisticas' class='scrollable' >
$estadisticas
@ -703,6 +703,8 @@ legend.legend-area {
?> <?php echo $css; ?>
<script src="./librerias/jquery/jquery-2.1.4.min.js" ></script>
<script src="./librerias/bootstrap/js/bootstrap.min.js" ></script>
<script src="./librerias/charts/Chart.bundle.js"></script>
<script src="./librerias/charts/utils.js"></script>
<!-- morris -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">

64
librerias/carrusel.html
View File

@ -1,64 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>Slick Playground</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="./slick/slick.css">
<link rel="stylesheet" type="text/css" href="./slick/slick-theme.css">
<link rel="stylesheet" type="text/css" href="./slick/style.css">
<style type="text/css">
</style>
</head>
<body>
<hr/>
<h2>Slider Syncing</h2>
<div class="slider slider-for1">
<div><img data-lazy="http://placehold.it/350x300?text=1-350w" data-srcset="http://placehold.it/650x300?text=1-650w 650w, http://placehold.it/960x300?text=1-960w 960w" data-sizes="100vw"></div>
<div><h3>2</h3></div>
<div><h3>3</h3></div>
<div><h3>4</h3></div>
<div><h3>5</h3></div>
</div>
<div class="slider slider-nav1">
<div><img data-lazy="http://placehold.it/350x300?text=1-350w" data-srcset="http://placehold.it/650x300?text=1-650w 650w, http://placehold.it/960x300?text=1-960w 960w" data-sizes="100vw"></div>
<div><h3>2</h3></div>
<div><h3>3</h3></div>
<div><h3>4</h3></div>
<div><h3>5</h3></div>
</div>
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="./slick/slick.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).on('ready', function() {
$('.slider-for1').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider-nav1'
});
$('.slider-nav1').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-for1',
dots: true,
centerMode: true,
focusOnSelect: true
});
});
</script>
</body>
</html>

18608
librerias/charts/Chart.bundle.js Executable file
View File

File diff suppressed because it is too large Load Diff

78
librerias/charts/chart.js Executable file
View File

@ -0,0 +1,78 @@
/**
* @namespace Chart
*/
var Chart = require('./core/core')();
Chart.helpers = require('./helpers/index');
// @todo dispatch these helpers into appropriated helpers/helpers.* file and write unit tests!
require('./core/core.helpers')(Chart);
Chart.defaults = require('./core/core.defaults');
Chart.Element = require('./core/core.element');
Chart.elements = require('./elements/index');
Chart.Interaction = require('./core/core.interaction');
Chart.platform = require('./platforms/platform');
require('./core/core.plugin')(Chart);
require('./core/core.animation')(Chart);
require('./core/core.controller')(Chart);
require('./core/core.datasetController')(Chart);
require('./core/core.layoutService')(Chart);
require('./core/core.scaleService')(Chart);
require('./core/core.scale')(Chart);
require('./core/core.tooltip')(Chart);
require('./scales/scale.linearbase')(Chart);
require('./scales/scale.category')(Chart);
require('./scales/scale.linear')(Chart);
require('./scales/scale.logarithmic')(Chart);
require('./scales/scale.radialLinear')(Chart);
require('./scales/scale.time')(Chart);
// Controllers must be loaded after elements
// See Chart.core.datasetController.dataElementType
require('./controllers/controller.bar')(Chart);
require('./controllers/controller.bubble')(Chart);
require('./controllers/controller.doughnut')(Chart);
require('./controllers/controller.line')(Chart);
require('./controllers/controller.polarArea')(Chart);
require('./controllers/controller.radar')(Chart);
require('./controllers/controller.scatter')(Chart);
require('./charts/Chart.Bar')(Chart);
require('./charts/Chart.Bubble')(Chart);
require('./charts/Chart.Doughnut')(Chart);
require('./charts/Chart.Line')(Chart);
require('./charts/Chart.PolarArea')(Chart);
require('./charts/Chart.Radar')(Chart);
require('./charts/Chart.Scatter')(Chart);
// Loading built-it plugins
var plugins = [];
plugins.push(
require('./plugins/plugin.filler')(Chart),
require('./plugins/plugin.legend')(Chart),
require('./plugins/plugin.title')(Chart)
);
Chart.plugins.register(plugins);
Chart.platform.initialize();
module.exports = Chart;
if (typeof window !== 'undefined') {
window.Chart = Chart;
}
// DEPRECATIONS
/**
* Provided for backward compatibility, use Chart.helpers.canvas instead.
* @namespace Chart.canvasHelpers
* @deprecated since version 2.6.0
* @todo remove at version 3
* @private
*/
Chart.canvasHelpers = Chart.helpers.canvas;

147
librerias/charts/utils.js Executable file
View File

@ -0,0 +1,147 @@
'use strict';
window.chartColors = {
red: 'rgb(255, 99, 132)',
orange: 'rgb(255, 159, 64)',
yellow: 'rgb(255, 205, 86)',
green: 'rgb(75, 192, 192)',
blue: 'rgb(54, 162, 235)',
purple: 'rgb(153, 102, 255)',
grey: 'rgb(201, 203, 207)'
};
(function(global) {
var Months = [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December'
];
var COLORS = [
'#4dc9f6',
'#f67019',
'#f53794',
'#537bc4',
'#acc236',
'#166a8f',
'#00a950',
'#58595b',
'#8549ba'
];
var Samples = global.Samples || (global.Samples = {});
var Color = global.Color;
Samples.utils = {
// Adapted from http://indiegamr.com/generate-repeatable-random-numbers-in-js/
srand: function(seed) {
this._seed = seed;
},
rand: function(min, max) {
var seed = this._seed;
min = min === undefined ? 0 : min;
max = max === undefined ? 1 : max;
this._seed = (seed * 9301 + 49297) % 233280;
return min + (this._seed / 233280) * (max - min);
},
numbers: function(config) {
var cfg = config || {};
var min = cfg.min || 0;
var max = cfg.max || 1;
var from = cfg.from || [];
var count = cfg.count || 8;
var decimals = cfg.decimals || 8;
var continuity = cfg.continuity || 1;
var dfactor = Math.pow(10, decimals) || 0;
var data = [];
var i, value;
for (i = 0; i < count; ++i) {
value = (from[i] || 0) + this.rand(min, max);
if (this.rand() <= continuity) {
data.push(Math.round(dfactor * value) / dfactor);
} else {
data.push(null);
}
}
return data;
},
labels: function(config) {
var cfg = config || {};
var min = cfg.min || 0;
var max = cfg.max || 100;
var count = cfg.count || 8;
var step = (max - min) / count;
var decimals = cfg.decimals || 8;
var dfactor = Math.pow(10, decimals) || 0;
var prefix = cfg.prefix || '';
var values = [];
var i;
for (i = min; i < max; i += step) {
values.push(prefix + Math.round(dfactor * i) / dfactor);
}
return values;
},
months: function(config) {
var cfg = config || {};
var count = cfg.count || 12;
var section = cfg.section;
var values = [];
var i, value;
for (i = 0; i < count; ++i) {
value = Months[Math.ceil(i) % 12];
values.push(value.substring(0, section));
}
return values;
},
color: function(index) {
return COLORS[index % COLORS.length];
},
transparentize: function(color, opacity) {
var alpha = opacity === undefined ? 0.5 : 1 - opacity;
return Color(color).alpha(alpha).rgbString();
}
};
// DEPRECATED
window.randomScalingFactor = function() {
return Math.round(Samples.utils.rand(-100, 100));
};
// INITIALIZATION
Samples.utils.srand(Date.now());
// Google Analytics
/* eslint-disable */
if (document.location.hostname.match(/^(www\.)?chartjs\.org$/)) {
(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','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-28909194-3', 'auto');
ga('send', 'pageview');
}
/* eslint-enable */
}(this));

53
librerias/horizontal.html Normal file
View File

@ -0,0 +1,53 @@
<!doctype html>
<html>
<head>
<title>Horizontal Bar Chart</title>
<script src="charts/Chart.bundle.js"></script>
<script src="charts/utils.js"></script>
</head>
<body>
<div id="canvas-holder" style="width:100%">
<canvas id="chart-area" />
</div>
<a onclick="javascript: mostrar('bar')">barras</a>
<a onclick="javascript: mostrar('pie')">pie</a>
<a onclick="javascript: mostrar('line')">lines</a>
<a onclick="javascript: mostrar('radar')">radar</a>
<a onclick="javascript: mostrar('polarArea')">area</a>
<a onclick="javascript: mostrar('doughnut')">doughnut</a>
<script>
window.onload = mostrar('bar');
function mostrar(tipo) {
var config = {
type:tipo,
data: {
datasets: [{ data: ['1','1','1','1','1','1','1','1','1','2','3','3','10','11','122'] , backgroundColor: ['#52b16b','#84a1f5','#93461a','#243231','#5e15ec','#cf55b2','#a7f9e9','#67640c','#de31ed','#23f325','#17badd','#fb570e','#a0331a','#a70cc2','#1922fc'], label: 'Cantidad ' }], labels: ['oscardanielperez26@gmail.com','migueldesplazamientocentro@gmail.com','obanorte@gmail.com','blasfelipe@gmail.com','alozano.wiam@gmail.com','jalopezga@hotmail.com','steven_395@hotmail.com','juan_cho.10@hotmail.es','kaxtillo@hotmail.com','h4ckypurpl3@gmail.com','fredyrivera@gmail.com','framirezqb@hotmail.com','olgaita11@hotmail.com','kaxtillo@gmail.com','arttesano@gmail.com'] /*
Gracias por compartir, por favor cítanos así:
http://localhost/tupali/a74#/estadisticas
https://tupale.co */
},
options: {
responsive: true
}
};
var ctx = document.getElementById("chart-area").getContext("2d");
window.myPie = new Chart(ctx, config );
}
</script>
</body>
</html>

0
librerias/index.php Normal file
View File

2
librerias/reveal/css/reveal.css
View File

@ -14,7 +14,7 @@ html, body, .reveal div, .reveal span, .reveal applet, .reveal object, .reveal i
.reveal del, .reveal dfn, .reveal em, .reveal img, .reveal ins, .reveal kbd, .reveal q, .reveal s, .reveal samp,
.reveal small, .reveal strike, .reveal strong, .reveal sub, .reveal sup, .reveal tt, .reveal var,
.reveal b, .reveal u, .reveal center,
.reveal dl, .reveal dt, .reveal dd, .reveal ol, .reveal ul, .reveal li,
.reveal dl, .reveal dt, .reveal dd, .reveal ol,
.reveal fieldset, .reveal form, .reveal label, .reveal legend,
.reveal table, .reveal caption, .reveal tbody, .reveal tfoot, .reveal thead, .reveal tr, .reveal th, .reveal td,
.reveal article, .reveal aside, .reveal canvas, .reveal details, .reveal embed,

7
librerias/reveal/css/theme/aplicacion.css
View File

@ -5,6 +5,13 @@
*/
@import url(../../lib/font/source-sans-pro/source-sans-pro.css);
.scrollable {
bottom: 0px;
overflow-y: auto !important;
overflow-x: hidden !important;
}
.reveal .slides {
position: absolute;
width: 100%;

81
milfs/funciones/funciones.php
View File

@ -597,9 +597,25 @@ mysqli_set_charset($link, "utf8");
while( $row = mysqli_fetch_array( $sql ) ) {
$dato[] =$row;
$lineas .="<tr><td>$row[cantidad]</td><td>$row[contenido]</td><td></td></tr>";
$datas .="'$row[cantidad]',";
$etiquetas .="'$row[contenido]',";
$colores .= "'#".substr(md5(rand()), 0, 6)."',";
}
$datos= json_encode($dato);
$data = "[".substr ($datas, 0, -1)."]";
$etiqueta = "[".substr ($etiquetas, 0, -1)."]";
$color = "[".substr ($colores, 0, -1)."]";
$data_grafica= "
datasets: [{
data: $data ,
backgroundColor: $color,
label: 'Cantidad '
}],
labels: $etiqueta
";
$resultado ="
<table class='table'>
<tr><td>$row[cantidad]</td><td>$row[contenido]</td><td></td></tr>
@ -610,26 +626,36 @@ mysqli_set_charset($link, "utf8");
$manejo_grafica = formulario_estadistica_ocultar("$id_form","$id_campo","","$tipo");
$grafica ="
<div id='contenedor_grafica_$tipo_$id_campo' >
<div class='' style='width:200px;' id='grafica_$tipo_$id_campo' ></div>
$manejo_grafica
</div>
<script>
new Morris.Bar({
// ID of the element in which to draw the chart.
element: 'grafica_$tipo_$id_campo',
// Chart data records -- each entry in this array corresponds to a point on
// the chart.
data: $datos,
// The name of the data record attribute that contains x-values.
xkey: 'contenido',
// A list of names of data record attributes that contain y-values.
ykeys: ['cantidad'],
// Labels for the ykeys -- will be displayed when you hover over the
// chart.
labels: ['contenido']
});
</script>
<div id='canvas-holder_$tipo_$id_campo' style='width:100%'>
<canvas id='chart-area_$tipo_$id_campo' />
</div>
</div>
<script>
window.onload = mostrar('bar');
function mostrar(tipo) {
var config = {
type:tipo,
data: {
$data_grafica },
options: {
responsive: true,
scales: { xAxes: [{display: false}]},
legend: { display: false }
}
};
var ctx = document.getElementById('chart-area_$tipo_$id_campo').getContext('2d');
window.myPie = new Chart(ctx, config );
}
</script>
";
@ -6272,6 +6298,7 @@ $sql=mysqli_query($link,$consulta);
if (mysqli_num_rows($sql)!=0){
while( $row = mysqli_fetch_array( $sql ) ) {
$tipo_campo = remplacetas_noid('form_tipo_campo','id_tipo_campo',"$row[campo_tipo]",'tipo_campo_nombre','','');
//href='?formulario=$formulario&campo=$row[id_campo]'
//<li class='list-group-item'><a class='btn btn-block btn-info' target='api' href='$_SESSION[URL]/api.php?id=$formulario&tipo=simple' >{json}</a></li>
//// PRIVACIDAD
@ -6284,7 +6311,15 @@ while( $row = mysqli_fetch_array( $sql ) ) {
$estadisticas = formulario_estadistica("$formulario","$row[id_campo]","contenido","barras");
$listado .= "
<tr>
<td class='col-xs-2'>$row[id_campo]</td><td class='col-xs-8'>$row[campo_nombre] / $row[campo_descripcion]</td><td class='col-xs-2'>$estadisticas</td>
<td class='col-xs-2'>
<ul class='list-group'>
<li class='list-group-item'>Id: $row[id_campo]</li>
<li class='list-group-item'>Nombre: $row[campo_nombre]</li>
<li class='list-group-item'>Tipo: $tipo_campo[0]</li>
<li class='list-group-item'>Descripción: $row[campo_descripcion]</li>
</ul>
</td>
<td class='col-xs-10'><strong> $row[campo_descripcion]</strong>$estadisticas </td>
</tr>
";
}else {$listado.="";}
@ -6292,10 +6327,8 @@ $listado .= "
$resultado = "
<table class='table table-fixed'>
<thead>
<tr> <th class='col-xs-1'>Id</th><th class='col-xs-2'>Nombre campo</th><th class='col-xs-4'>Descripcion</th><th class='col-xs-5'>x</th></tr>
</thead>
<table class='table table-bordered'>
<tbody>
$listado
</tbody>

2
opendata.php
View File

@ -160,6 +160,8 @@ $acciones=formulario_acciones("$formulario","");
<!-- <link href="milfs/css/estilos.php" rel="stylesheet"> -->
<script src="milfs/js/jquery.min.js"></script>
<script src="milfs/js/jquery.timelinr-0.9.54.js"></script>
<script src="./librerias/charts/Chart.bundle.js"></script>
<script src="./librerias/charts/utils.js"></script>
<style type="text/css">
/*@font-face {
font-family: Brandon_light;