Crea impresionantes gráficos animados con Chart.js

Charts.js es una librería de JavaScript que utiliza el canvas de HTML5 para mostrar impresionantes gráficos para tu web. Puedes descargarlo desde: http://www.chartjs.org y empezar a utilizarlo inmediatamente. Todo lo que tienes que hacer es añadir el script de Chart.js en tu documento y podrás aprovecharte de su funcionalidad. Si necesitas documentación, puedes encontrarla en http://www.chartjs.org/docs/.

En nuestro caso, no descargaremos Chart.js puesto que vamos a utilizar un CDN. Lo cargaremos añadiendo el tag de script en nuestro DOM:

<!-- Load Chart.js from a CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>

Ahora, creamos una función auxiliar que utilizaremos para crear gráficos más rápido y para no volver a repetir el código, logicamente.

var chartHelper = {
createChart: function (canvasId, chartType, data, options) {
var ctx = $("#" + canvasId).get(0).getContext("2d");
return new Chart(ctx)[chartType](data, options);
},

La función tiene como argumentos el id del canvas donde aparecerá nuestro gráfico, el tipo de gráfico (Charts.js es compatible con muchos tipos de gráficos, tales como barras, circular y de líneas) y los datos y opciones para el gráfico en cuestión. Utilizamos el argumento chartType para llamar al método y así instanciar un nuevo gráfico y pasarle los datos y las opciones. Por ejemplo, si queremos uno circular, el tipo de gráfico debe ser Pie, porque el gráfico se crea llamando a la función Pie.

Entonces, en nuestro objeto chartHelper definimos otro método auxiliar llamado addCommas. Este método lo utilizaremos para dar formato a los números de los labels de uno de los gráficos, ya que habrá gran cantidad de ellos.

Creación de un gráfico de barras personalizado

Definimos nuestro objeto options que dará formato a los números grandes e indicará a Chart.js que muestre los labels del gráfico de barras en el tooltip junto al valor numérico del campo.

var options = {
multiTooltipTemplate: "<%= datasetLabel %> - <%= value %>"
}

Posteriormente, creamos el data para nuestro primer gráfico de barras. Añadimos dos labels para los datos y creamos dos datasets. En el primer dataset, creamos una propiedad label que se mostrará en el tooltip en respuesta al código de nuestro objeto options. Definimos también la propiedad fillColor que declara el color dentro de los campos del gráfico, el color de las esquinas de los campos del gráfico, el color del interior de los campos del gráfico cuando un usuario posa el ratón sobre el mismo y el color de las esquinas del gráfico cuando un usuario posa el ratón sobre el mismo. Los valores de estas propiedades pueden ser un valor de color hexadecimal, un valor RGB/RGBA o una cadena de color.

Por último, definimos los datos de los dos labels, el primera representará la edad de jubilación y el segundo la esperanza media de vida. A continuación, creamos otro objeto dentro del dataset que tendrá las mismas propiedades pero que a diferencia del original, su label será el de Woman y tendrá distintos datos.

//first Bar chart
var data = {
labels: ["Retirement Age", "Average Life Expectancy"],
datasets: [
{
label: "Men",
fillColor: "#FF0000",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "#A60000",
highlightStroke: "rgba(220,220,220,1)",
data: [64,71]
},

Ahora, todo lo que tenemos que hacer es llamar a nuestro auxiliar y aparecerá el gráfico de barras:

var chart1 = chartHelper.createChart("retirement-age", "Bar", data, options);

Una vez hecho esto, el gráfico de barras aparecería tal y como aparece en la imagen de arriba. Al pasar el ratón sobre campos tales como la esperanza de vida media, o la edad media de jubilación, aparecerán unos tooltip muy simpáticos.

Creación de un gráfico circular personalizado

Todo eso está muy bien, pero qué pasa si queremos algo como un label permanente. Como sugerencia, puedes hacer que sea visible todo el tiempo. Ahora vamos a crear un gráfico circular con un label permanente.

En primer lugar, creamos nuestro array de datos con varios objetos como items:

data = [
{
value: 480000,
color:"#F7464A",
highlight: "#FF5A5E",
label: "Tobacco"
},

Añadimos un label, un color de highlight, un color por defecto y el valor del campo, el cual será comparado en el gráfico de sectores.

Para mostrar el label en el gráfico circular, definimos diferentes objetos option que muestren el label (como Tobacco) antes del valor.

var optionsPie = {
tooltipTemplate: "<%= label %> - <%= value %>"
}

Como queremos que el tooltip se muestre siempre haremos algunas otras modificaciones en las opciones:

var optionsPie = {
tooltipEvents: [],
showTooltips: true,
onAnimationComplete: function() {
this.showTooltip(this.segments, true);
},
tooltipTemplate: "<%= label %> - <%= chartHelper.addCommas(value) %>"
}

Por último, utilizamos nuestro auxiliar para crear un nuevo gráfico. Esta vez le pasaremos un argumento al ChartType llamado "Pie" en lugar de "Bar":

var chart3 = chartHelper.createChart("preventable", "Pie", data, optionsPie);

¡Y ahí está! Tenemos un gráfico circular con labels permanentes:

Fuente: phpgang.com

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP