Get it on Google Play
27-03-2018
 

Formación científico de datos: Desarrollo de un dashboard con HTML5 y Google charts

HTML5 + Google Charts Dashboard

HTML5 + Google Charts Dashboard

Una de las principales tareas del científico de datos es crear visualizaciones de datos. Aunque existen cantidad de herramientas para visualizaciones y compartirlas hoy vamos a crear un dashboard como el de la foto(En realidad es el de la foto) simplemente con HTML5 y Google Charts.

Existen muchas soluciones para crear Dashboards, en algunas de ellas ni tan siquiera hay que tocar código. Dejo para mas adelante hacer un post o vídeo con un listado de alternativas con sus pros y sus contras.

Un dashboard sobre HTML5 y Google Charts es una buena solución para crear una visualización de datos porque es muy fácil(Solo se necesitan unas pocas bases de desarrollo web), simple(No se necesita instalar nada y cualquiera puede verlo con un navegador), potente(Porque gracias a Google Charts tenemos a nuestro alcance gran cantidad de tipos de gráficos) y al alcance de cualquiera.

Antes de continuar con el artículo os voy a dejar un par de links:

  • Enlace con el proyecto Google Charts con ejemplos de los distintos tipos de gráficos y documentación sobre el tema.
  • Enlace a mi Github donde he colgado todo el código fuente relacionado con este artículo. Os podeis descargar todo desde este enlace

Maquetación HTML5 del dashboard

A continuación os dejo el código HTML para nuestro dashboard comentado:

<html>
	<head>
		<!-- Metadatos para seleccionar charset y hacer responsive -->
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<!-- Título de la web -->
		<title>Super Dashboard</title>

		<!-- Injectamos el loader de Google -->
		<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

		<!-- Injectamos el ficheros Javascript y hoja de estilos de nuesto Dashboard -->
		<script src="charts.js"></script> 
		<link rel="stylesheet" href="style.css">
	</head>

	<body>
		<!-- Título superior -->
		<h1>Super Dashboard</h1>

		<!-- Grid con todos los paneles -->
		<div class="dashboard-wrapper">
			<div id='p1' class='panel'><h2>Panel principal</h2> <div id='p1Chart'></div> </div>
			<div id='p2' class='panel'><h2>Sub panel 1</h2> <div id='p2Chart'></div> </div>
			<div id='p3' class='panel'><h2>Sub panel 2</h2> <div id='p3Chart'></div> </div>
			<div id='p4' class='panel'><h2>Sub panel 3</h2> <div id='p4Chart'></div> </div>
			<div id='p5' class='panel'><h2>Bottom panel</h2> <div id='p5Chart'></div> </div>
		</div>

		<!-- Pié de página -->
		<div class='bottom'><a target='_blank' href='https://www.albertcoronado.com'>Made with love by Albert Coronado</a></div>
	</body>
</html>

Creo que queda bastante claro con los comentarios. Solamente destacar que vamos a usar un Grid CSS. El Grid CSS hace que el código HTML del proyecto quede muy limpio y sea muy fácil hacerlo responsive.

Estilo de nuestro Dashboard

A continuación el código comentado del CSS:

/* Color de fondo gris, tipo de letra helvetica. El 'text-align: center' es para centrar el dashboard */
body {
	text-align: center;
	background-color: #ececec;
	font-family: 'Helvetica', sans-serif;
	}

/* Quitamos los margenes de los títulos tipo 2. Los de los distintos paneles */
h2 {
	margin: 0px;
	}

/* Márgenes en auto para que quede centrado en la página.
	Tamaño máximo de 920 píxeles.
	configuración del grid a 3 columnas con un espaciado de 15 píxeles. */
.dashboard-wrapper {
	margin: auto;
	max-width: 920px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-column-gap: 15px;
	grid-row-gap: 15px;
	}

/* Configuración de cada panel: texto alineado a la izquierda, color de fondo blanco, etc. */
.dashboard-wrapper .panel {
	text-align: left;
	background-color: #fff;
	border: 1px solid #d3d3d3;
	box-shadow: 0 0 4px 1px rgba(143,143,143,.2);
	padding: 15px;
	}

/* Los paneles con Id p1 y p5 ocuparan de la columna 1 a la 4 */
.dashboard-wrapper #p1.panel, .dashboard-wrapper #p5.panel {
	grid-column: 1 / 4;
	}

/* Configuración del footer */
.bottom {
	font-size: 10px;
	margin-top: 15px;
	}

.bottom a {
	color: #333;
	text-decoration: none;
	}

/* Configuración responsive: para dispositivos con pantalla de máximo 104 píxeles de resolución. todos los paneles ocuparán de la columna 1 a la 4 */
@media screen and (max-width: 1024px) {
	.dashboard-wrapper .panel {
		grid-column: 1 / 4;
		}	
	}

Como veis la configuración del Grid es muy limpia. Para los que no lo conozcáis, que sepáis, que permite incluso cambiar el orden de los distintos divs por CSS(Muy útil a la hora de trabajar el responsive).

Javascript de nuestro dashboard

Ahora que ya tenemos la maquetación ‘niquelada’ solo nos falta añadirle los gráficos. No voy a copiar todo el código porque es muy extenso(Y no aporta nada, os lo podéis descargar). Aquí he comentado las partes mas importantes para entender el funcionamiento:

/* Cargamos los módulos que vamos a usar, una vez cargados ejecutará la función 'drawCharts' */
google.charts.load('current', {'packages':['sankey','corechart', 'bar', 'calendar']});
google.charts.setOnLoadCallback(drawCharts);

/* función que carga cada uno de los gráficos */
function drawCharts() {
	drawChartP1();
	drawChartP2();
	drawChartP3();
	drawChartP4();
	drawChartP5();
	}

function drawChartP1() {
	/* Cargamos los datos */
	var data = google.visualization.arrayToDataTable([
		['From', 'To', 'Weight'],
    		[ 'A', 'X', 5 ],
		[ 'A', 'Y', 7 ],
    		[ 'A', 'Z', 6 ],
    		[ 'B', 'X', 2 ],
    		[ 'B', 'Y', 9 ],
    		[ 'B', 'Z', 4 ]
  		]);

	/* Creamos la visualización, en este caso se visualizará en el div con id 'p1Chart' */
  	var chart = new google.visualization.Sankey(document.getElementById('p1Chart'));

	/* Finalmente pintamos la visualización, el segundo parámetro son las opciones */
  	chart.draw(data, { });
	}

/* ... */

Cada unos de los distintos gráficos se crea con su propia función ‘drawChartPX’. El parámetro opciones(La última línea comentada) nos permite configurar cantidad de cosas del gráfico(Tamaño, leyenda, etc.). Podéis consultar la documentación de Google Charts para conocer el detalle.

Mejoras al dashboard que os dejo para [email protected]

Aquí una lista de mejoras para los mas avanzados(No son nada complicadas):

  • Crear un formulario donde el usuario pueda filtrar datos, por ejemplo, filtrar por fecha. Si ademas, cargamos los datos vía AJAX hará el dashboard mucho mas dinámico.
  • Poner un menú y quizá también pestañas para poder navegar entre distintos dashboards(Estilo Google Analytics).
  • Podeis adaptar el código para insertarlo en cualquier web.
Si te a servido, por favor comparte
 

Leave a Reply