forked from qwerty/tupali
mejoras en la graficacion de estadisticas
This commit is contained in:
parent
02d1af925f
commit
1d258491eb
@ -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">
|
||||
|
@ -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
18608
librerias/charts/Chart.bundle.js
Executable file
File diff suppressed because it is too large
Load Diff
78
librerias/charts/chart.js
Executable file
78
librerias/charts/chart.js
Executable 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
147
librerias/charts/utils.js
Executable 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
53
librerias/horizontal.html
Normal 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
0
librerias/index.php
Normal 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,
|
||||
|
@ -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%;
|
||||
|
@ -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>
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user