Crea Gráficos Interactivos con CSS3 & jQuery

preview

Tema: jQuery (Flot) & CSS3
Dificultad: Avanzado
Tiempo estimado: 1 hora

En este tutorial vamos a programar un Gráfico Interactivo usando jQuery y CSS3. Usaremos “Flot” un conocido plugin para jQuery. Flot es una librería pura de JavaScript para jQuery. Traza gráficos sobre conjuntos de datos arbitrarios al vuelo en el lado cliente. Este plugin es simple pero suficientemente potente para crear unos gráficos interactivos y bonitos. Para más información echa un vistazo a la documentación aquí. Puedes encontrar el diseño de los gráficos en Impressionist UI de Vladimir Kudinov.

Paso 1 – HTML

Para empezar crearemos nuestro código html para el gráfico. Crearemos un <div> con la clase “graph-wraper”. Dentro de este <div> añadiremos dos <div> más. El primero llevará la clase “graph-info”, este div contendrá la leyenda y los botones del gráfico que nos permitirán cambiar entre gráficos. El segundo div contendrá los dos gráficos (lineas y barras).

<!-- Graph HTML -->
<div id="graph-wrapper">
  <div class="graph-info">
   <a href="javascript:void(0)" class="visitors">Visitors</a>
   <a href="javascript:void(0)" class="returning">Returning Visitors</a>

   <a href="#" id="bars"><span></span></a>
   <a href="#" id="lines" class="active"><span></span></a>
 </div>

 <div class="graph-container">
   <div id="graph-lines"></div>
   <div id="graph-bars"></div>
  </div>
</div>
<!-- end Graph HTML -->

Paso 2 – jQuery y Flot

Incluyamos el JavaScript ahora. Primero piensa que tenemos que añadirlo a la Librería jQuery. Yo lo enlazaré a la alojada por Google. Tu puedes enlazarla ahí también o descargarla y alojarla en tu servidor. Ahora descarga los archivos de “Flot” e incluye “jquery.flot.min.js”. Pronto añadiremos otra etiqueta script y ahí añadiremos el código para hacer que nuestros gráficos sean funcionales.

<code class="jscript plain"><script src=</code><code class="jscript string">"https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"</code><code class="jscript plain">></script>
</code><code class="jscript plain"><script src=</code><code class="jscript string">"js/jquery.flot.min.js"</code><code class="jscript plain">></script>

</code><code class="jscript plain"><script>
</code><code class="jscript plain">$(document).ready(</code><code class="jscript keyword">function</code> <code class="jscript plain">() {
</code><code class="jscript spaces">  </code><code class="jscript comments">// Graph scripts here
</code><code class="jscript plain">});
</code><code class="jscript plain"></script>
</code>

Paso 3 – Datos del Gráfico

Los datos de un gráfico van en un array (matríz) con grupos de datos (ejemplo: [bloque1, bloque2, …]). Un bloque puede ser una entrada directa o un objeto con propiedades (ejemplo: [ [x1, y1], [x2, y2], … ]). También haremos algunas configuraciones para cada serie de datos.

var graphData = [{
 // Visits
 data: [ [6, 1300], [7, 1600], [8, 1900], [9, 2100], [10, 2500], [11, 2200], [12, 2000], [13, 1950], [14, 1900], [15, 2000] ],
 color: '#71c73e'
 }, {
 // Returning Visits
 data: [ [6, 500], [7, 600], [8, 550], [9, 600], [10, 800], [11, 900], [12, 800], [13, 850], [14, 830], [15, 1000] ],
 color: '#77b7c5',
 points: { radius: 4, fillColor: '#77b7c5' }
}];

Paso 4 – Cargar los Gráficos

Ahora cargaremos los dos gráficos, uno con las lineas y otro con las barras. Ambos tendrán personalizaciones (colores, sombras, etc.). También ambos usarán los mismos datos de la variable “graphData”.

// Lines
$.plot($('#graph-lines'), graphData, {
 series: {
 points: {
 show: true,
 radius: 5
 },
 lines: {
 show: true
 },
 shadowSize: 0
 },
 grid: {
 color: '#646464',
 borderColor: 'transparent',
 borderWidth: 20,
 hoverable: true
 },
 xaxis: {
 tickColor: 'transparent',
 tickDecimals: 2
 },
 yaxis: {
 tickSize: 1000
 }
});

// Bars
$.plot($('#graph-bars'), graphData, {
 series: {
 bars: {
 show: true,
 barWidth: .9,
 align: 'center'
 },
 shadowSize: 0
 },
 grid: {
 color: '#646464',
 borderColor: 'transparent',
 borderWidth: 20,
 hoverable: true
 },
 xaxis: {
 tickColor: 'transparent',
 tickDecimals: 2
 },
 yaxis: {
 tickSize: 1000
 }
});

Paso 5 – Estilos del Contenedor del Gráfico

Primero que nada añadiremos un reset de estilos para limpiar los estilos por defecto del navegador.

/* Resets */
.graph-container,
.graph-container div,
.graph-container a,
.graph-container span {
  margin: 0;
  padding: 0;
}

Seguidamente añadiremos el degradado y las esquinas redondas. Como puedes ver estás repitiendo las mismas propiedades todo el tiempo, necesitamos hacer esto porque estas características de CSS3 están en pruebas aún y las propiedades por defecto no funcionan, así que necesitamos añadir los prefijos para cada navegador. Este degradado y el redondeo de las esquinas también lo usaremos en las ayudas y los botones.

/* Gradinet and Rounded Corners */
.graph-container, #tooltip, .graph-info a {
 background: #ffffff;
 background: -moz-linear-gradient(top, #ffffff 0%, #f9f9f9 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f9f9f9));
 background: -webkit-linear-gradient(top, #ffffff 0%,#f9f9f9 100%);
 background: -o-linear-gradient(top, #ffffff 0%,#f9f9f9 100%);
 background: -ms-linear-gradient(top, #ffffff 0%,#f9f9f9 100%);
 background: linear-gradient(to bottom, #ffffff 0%,#f9f9f9 100%);

 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
}

Para terminar este paso posicionaremos el contenedor de los gráficos, estableceremos el ancho, alto, espaciados, etc. Tómate la libertad de cambiar estos valores acorde con el tamaño al que necesites tus gráficos.

/* Graph Container */
.graph-container {
 position: relative;
 width: 550px;
 height: 300px;
 padding: 20px;

 -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,.1);
 -moz-box-shadow: 0px 1px 2px rgba(0,0,0,.1);
 box-shadow: 0px 1px 2px rgba(0,0,0,.1);
}

.graph-container > div {
 position: absolute;
 width: inherit;
 height: inherit;
 top: 10px;
 left: 25px;
}

.graph-info {
 width: 590px;
 margin-bottom: 10px;
}

step5-1

Paso 6 – Leyenda & Botones

Ahora añadiremos los estilos básicos para los enlaces.

.graph-info a {
 position: relative;
 display: inline-block;
 float: left;
 height: 20px;
 padding: 7px 10px 5px 30px;
 margin-right: 10px;
 text-decoration: none;
 cursor: default;
}

Para la leyenda del gráfico crearemos un círculo pequeño con el mismo color que las lineas/barras del gráfico. Para crear este círculo usaremos el pseudo selector :before. Este selector nos permitirá añadir contenido antes del elemento.

/* Color Circles */
.graph-info a:before {
 position: absolute;
 display: block;
 content: '';
 width: 8px;
 height: 8px;
 top: 13px;
 left: 13px;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
}

.graph-info .visitors { border-bottom: 2px solid #71c73e; }
.graph-info .returning { border-bottom: 2px solid #77b7c5; }

.graph-info .visitors:before { background: #71c73e; }
.graph-info .returning:before { background: #77b7c5; }

Ahora daremos los estilos a los dos botones que nos permitirán cambiar entre los gráficos de lineas y barras. Estableceremos un ancho y alto fijos, añadiremos los iconos y un degradado verde para el estado activo.

/* Lines & Bars Buttons */
#lines, #bars {
 width: 34px;
 height: 32px;
 padding: 0;
 margin-right: 0;
 margin-left: 10px;
 border-bottom: 2px solid #71c73e;
 float: right;
 cursor: pointer;
}

#lines.active, #bars.active {
 background: #82d344;
 background: -moz-linear-gradient(top, #82d344 0%, #71c73e 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#82d344), color-stop(100%,#71c73e));
 background: -webkit-linear-gradient(top, #82d344 0%,#71c73e 100%);
 background: -o-linear-gradient(top, #82d344 0%,#71c73e 100%);
 background: -ms-linear-gradient(top, #82d344 0%,#71c73e 100%);
 background: linear-gradient(to bottom, #82d344 0%,#71c73e 100%);
}

#lines span, #bars span {
 display: block;
 width: 34px;
 height: 32px;
 background: url('../img/lines.png') no-repeat 9px 12px;
}

#bars span { background: url('../img/bars.png') no-repeat center 10px; }

#lines.active span { background-image: url('../img/lines_active.png'); }

#bars.active span { background-image: url('../img/bars_active.png'); }

Para terminar este paso daremos limpiaremos el float del contenedor de los gráficos.

/* Clear Floats */
.graph-info:before, .graph-info:after,
.graph-container:before, .graph-container:after {
 content: '';
 display: block;
 clear: both;
}

step6-1

Paso 7 – Cambio de Gáfico

En este paso añadiremos un evento de click para los botones de “barras” y “líneas”. Al cargar ocultaremos el gráfico de “barras”, así será visible cuando los usuarios hacen click en el botón de “barras”. Para ver el gráfico de líneas el usuario tendrá que hacer click en el botón de “líneas”.

$('#graph-bars').hide();

$('#lines').on('click', function (e) {
 $('#bars').removeClass('active');
 $('#graph-bars').fadeOut();
 $(this).addClass('active');
 $('#graph-lines').fadeIn();
 e.preventDefault();
});

$('#bars').on('click', function (e) {
 $('#lines').removeClass('active');
 $('#graph-lines').fadeOut();
 $(this).addClass('active');
 $('#graph-bars').fadeIn().removeClass('hidden');
 e.preventDefault();
});

Paso 8 – Tipografía

En este paso añadiremos estilos para el texto, enlaces, leyendas y ayudas.

#tooltip, .graph-info a {
 font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
 font-weight: bold;
 font-size: 12px;
 line-height: 20px;
 color: #646464;
}

.tickLabel {
 font-weight: bold;
 font-size: 12px;
 color: #666;
 font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

Ocultaremos la primera y la última “etiqueta” del eje Y, para hacer esto utilizaremos los pseudo selectores first y last.

.yAxis .tickLabel:first-child,
.yAxis .tickLabel:last-child { display: none; }

step8-1

Paso 9 – Ayudas (Tooltips)

Para añadir las ayudas añadires un <div> al <body> con id=”tooltip”. La posición de esta ayuda se calculará basado en la posición del punto por el que pase el ratón en el gráfico.

function showTooltip(x, y, contents) {
 $('<div id="tooltip">' + contents + '</div>').css({
 top: y - 16,
 left: x + 20
 }).appendTo('body').fadeIn();
}

var previousPoint = null;

$('#graph-lines, #graph-bars').bind('plothover', function (event, pos, item) {
 if (item) {
 if (previousPoint != item.dataIndex) {
 previousPoint = item.dataIndex;
 $('#tooltip').remove();
 var x = item.datapoint[0],
 y = item.datapoint[1];
 showTooltip(item.pageX, item.pageY, y + ' visitors at ' + x + '.00h');
 }
 } else {
 $('#tooltip').remove();
 previousPoint = null;
 }
});

Ahora le añadiremos un posicionamiento absoluto, lo ocultaremos y añadiremos algo de espacio y un borde bonito.

#tooltip {
 position: absolute;
 display: none;
 padding: 5px 10px;
 border: 1px solid #e1e1e1;
}

step9-1

Conclusión

Ya está.  Hemos terminado este tutorial, divierteté y personaliza el gráfico con CSS y todas las posibilidades que ofrece el plugin Flot. No olvides suscribirte para más artículos, tutoriales y recursos gratuitos.

Vista previa

Descarga el Gráfico Interactivo

banner_600x200

Desarrollador php especializado en convertir un buen café en código. Amante de JavaScript, Laravel y WordPress. Adicto a cualquier herramienta que acelere el desarrollo web. Sígueme en Twitter @zreedee.

Boletín de noticias

0 Comentarios

No hay comentarios aún

Deja tu respuesta

*
* Longitud mínima: 20 caracteres