Muestra Los Datos en Web

Actividad
Visualizador de Big Data [Nivel 3]

Lección 3 / Actividad 1
Muestra los datos en web
IMPORTANTE
Para resolver tu actividad, guárdala en tu computadora e imprímela.
Si lo deseas, puedes conservarla para consultas posteriores ya que te sirve para reforzar
tu aprendizaje. No es necesario que la envíes para su revisión.
Propósitos de la actividad
Programar servicios web que se conectan a bases de datos No-SQL y utilizarlos para
crear y desplegar gráficos en ambientes web.
Practica lo que aprendiste
I. Analiza y prueba el siguiente código en “php”, el cual se encarga de desplegar

la información que se encuentra en la colección de una base de datos en
forma de JSON.
Nota: Para que puedas probar este servicio, crea una base de datos en No-SQL
llamada “redes” y agrega los siguientes objetos en una colección llamada
“comentario”:
{“id”: “1”, “comentario”: “Comiendo unos ricos makis”,”IdUsr”:”1”,”likes”:”23”}

{“id”: “2”, “comentario”: “Después de hacer ejercicio”,”IdUsr”:”3”,”likes”:”40”}
{“id”: “3”, “comentario”: “Que bien! Terminando la tarea :D”,”IdUsr”:”2”,”likes”:”37”}
{“id”: “4”, “comentario”: “Me duele la cabez”,”IdUsr”:”4”,”likes”:”10”}
Código:
<?php
try{
$mongo = new MongoClient();
$db = $mongo->selectDB(redes);
$coleccion = new MongoCollection($db, 'comentario');
$cursor = $coleccion->find();
$array = iterator_to_array($cursor);
$json=json_encode($array);
echo '<pre>';
print_r($json);
$mongo->close();
}
catch(MongoConnectionException $e){
Actividad
die($e->getMessage());
};
II. Modifica el servicio web del ejercicio pasado y haz que mediante una petición
“get” reciba el parámetro del id de usuario y regrese en un JSON, con la
información del mismo.
Nota: Investiga las características de la función “find()”, porque con esta

harás la búsqueda en la base de datos.
III. Analiza y prueba la siguiente aplicación encargada de desplegar un gráfico de

línea en tiempo real, la cual está compuesta de dos archivos principales:
index.html y datos.php
 Nota: para probar la aplicación también necesitas las siguientes 3
bibliotecas. Descárgalas desde el siguiente link.
https://drive.google.com/file/d/0B3W6zmbk2szdeU9SUUxBdUtLOFU/view?u
sp=sharing
 También deberás crear una base de datos No-SQL con una colección
llamada “ejes” que contenga objetos con dos ejes. Por ejemplo:
{“x”: “1”, “y”: “2”} {“x”: “2”, “y”: “5”} {“x”: “3”, “y”: “8”}
Archivo: index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highstock Example</title>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style type="text/css">
${demo.css}
</style>
<script type="text/javascript">
$(function () {
$(document).ready(function () {
var ultimox;
var ultimoy;
$.ajax({
url: "datos.php",
type: 'get',
success: function(DatosRecuperados) {
$.each(DatosRecuperados, function(i,o){
if (o.x) {DatosRecuperados[i].x = parseInt(o.x);}
if (o.y) {DatosRecuperados[i].y = parseFloat(o.y);}
});
Actividad
setx(DatosRecuperados[(DatosRecuperados.length)-1].x);
sety(DatosRecuperados[(DatosRecuperados.length)-1].y);
$('#container').highcharts({
chart:{
type: 'spline',
animation: Highcharts.svg,
marginRight: 10,
events: {load: function () {series = this.series[0];}}
},
title:{text: 'Live random data'},
xAxis:{tickPixelInterval: 150},
yAxis:{title: {text: 'Value'},
plotLines: [{value: 0,width: 1,color: '#808080'}]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.numberFormat(this.x, 2) + '<br/>' +
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{ name: 'Random data', data:DatosRecuperados}]
});
}});
});
setInterval(function () {
$.get( "datos.php?Consultar=1", function( UltimosDatos ) {
var varlocalx=parseFloat(UltimosDatos[0].x);
var varlocaly=parseFloat(UltimosDatos[0].y);
if((getx()!=varlocalx)&&(gety()!=varlocaly)){
series.addPoint([varlocalx, varlocaly], true, true);

setx(varlocalx);
sety(varlocaly);
}
});}, 1000);
function getx(){return ultimox;}
function gety(){return ultimoy;}
function setx(x){ultimox=x;}
function sety(y){ultimoy=y;}
});
</script>
</head>
<body>
Actividad
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 310px"></div>
</body>
</html>
Archivo: datos.php
<?php
try{
$mongo = new MongoClient();

$db = $mongo->selectDB('prueba');
$coleccion = new MongoCollection($db, 'ejes');
switch($_GET['Consultar']){
// Buscar Último Dato
case 1:
$cursor = $coleccion->find()->sort(array('$natural' => -1))->limit(1);
foreach ($cursor as $doc) {
array_push($lst, $doc);
}
echo json_encode($lst);
$mongo->close();
break;
// Buscar Todos los datos
default:
$cursor = $coleccion->find();
foreach ($cursor as $doc) {
array_push($lst, $doc);
}
echo json_encode($lst);
$mongo->close();
break;
}
}
catch(MongoConnectionException $e){
die($e->getMessage());
};
?>
IV. Modifica la aplicación del ejercicio 3 cambiando el tipo de gráfica por una de
barras en tiempo real. Ésta puede graficar el número de “likes” en un comentario
en una red social.
Actividad

Muestra Los Datos en Web

Cargado por

Copyright:

Formatos disponibles

Muestra Los Datos en Web

Cargado por

Información del documento

Descripción original:

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Muestra Los Datos en Web

Cargado por

Copyright:

Formatos disponibles

Actividad

Visualizador de Big Data [Nivel 3]

Muestra los datos en web

Para resolver tu actividad, guárdala en tu computadora e imprímela.

Practica lo que aprendiste

I. Analiza y prueba el siguiente código en “php”, el cual se encarga de desplegar

{“id”: “1”, “comentario”: “Comiendo unos ricos makis”,”IdUsr”:”1”,”likes”:”23”}

Nota: Investiga las características de la función “find()”, porque con esta

III. Analiza y prueba la siguiente aplicación encargada de desplegar un gráfico de

series.addPoint([varlocalx, varlocaly], true, true);

$mongo = new MongoClient();

También podría gustarte