Archivo
Empezando con Chart.js
Retomo esta librería y a ver si esta vez profundizamos algo más.
La página principal de la misma la tienes en:
En Github en https://github.com/chartjs/Chart.js. Démosle una estrellita y un watch.
Y la documentación en una página: http://www.chartjs.org/docs/
Licencia
Chart.js está disponible bajo licencia MIT. MIT license.
Instalación
Nos podemos descargar la librería desde Github. Tendremos un fichero
Chart.js-master.zip
También tenemos el CDN: https://cdnjs.com/libraries/Chart.js
Desde Github nos podemos ir a la última versión (en la actualidad la 2.5.0) y descargar los ficheros Chart.js y Chart.min.js
https://github.com/chartjs/Chart.js/releases/tag/v2.5.0
Podemos incluir dos builds (script src=…):
- Chart.js – https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js
- Chart.min.js – https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js
Comenzamos
- Añadimos el script Chart.js
- Tenemos que añadir un elemento canvas, como parámetros, añadiremos width y height (en realidad, lo que pongamos aquí sólo se va a utilizar para ajustar la relación de altura y anchura, pero el canvas se va a intentar ajustar a la página o al elemento en el que esté incluído)
- Si queremos, podemos incluir un div al que le pondremos la altura y anchura que nos interese.
- Después, en el script debemos crear el gráfico: var myChart = new Chart(ctx, { type: ‘bar’, data: {…
definiendo el tipo del mismo (bar en este caso). - Un gráfico puede tener 1 o mas datasets, pero estos datasets deben tener la misma estructura para darle el mismo significado al gráfico. En este ejemplo vamos a insertar solo un dataset.
La estructura de la variable data podemos ver que es algo muy similar a json, principalmente esta dividida en labels y datasets.
- labels: son las etiquetas que aparecen en la parte inferior del gráfico, en nuestro caso serían «Rojo», «Azul», «Amarillo», «Verde», «Morado», «Naranja».
- datasets: Los datasets son los grupos de datos que se mostrarán en el gráfico, podemos mostrar 1 o 2 o mas datasets, siempre y cuando todos conserven la misma estructura, el nodo de datasets esta dividido en: label, data, backgroundColor, borderColor, borderWidth.
- label: Label es la etiqueta del dataset, el significado de los datos de la grafica por ejemplo “# de Votos”.
- data: data al igual que las siguientes propiedades, son listas y las siguientes propiedades deben coincidir con el número de elementos que contenga la propiedad data, en nuestro caso la propiedad data cuenta con 6 elementos: [12, 19, 3, 5, 2, 3], estos datos pueden ser diferentes en cada dataset.
- backgroundColor: es una propiedad que sirve para guardar un color y se traduce como el color de fondo del gráfico, al ser una lista de colores podemos darnos cuenta de que los colores pueden ser diferentes para cada barra.
- borderColor: es una propiedad que sirve para guardar un color y se tradude como el color de borde de las barras, la lista de colores debe coincidir en número con la lista de valores en data y backgroundColor.
- borderWidth: este es un solo valor numerico y el valor contenido se traduce como el ancho o grosor del borde de las barras o lineas.
Opciones
La libreria tambien nos permite controlar ciertas opciones, las cuales las podemos encontrar en la documentacion y estas opciones dependen del tipo de gráfico que usemos.
Basicamente lo que hacemos con la opción que hemos usado en este caso es forzar el eje Y de la grafica para que empieze en valor 0, ya que por default el valor del eje Y empieza en el valor mínimo que tengamos en los datos de nuestros datasets.
El resultado:
<canvas id="myChart" width="400" height="400">canvas>
<script>
// Debemos crear una instancia del objeto canvas.
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
script>
En resumen, para crear un gráfico:
varchart1 = newChart(ctx, {type: 'bar',data: mydata,options: myoptions});Gauge – El Indicador de Google Chart
Gauge
Paquete a cargar
gauge
google.load("visualization", "1", {packages: ["gauge"]});
.
Datos
Ejemplo:
var data = google.visualization.arrayToDataTable([ ['Label', 'Value'], ['Memory', 80], ['CPU', 55], ['Network', 68] ]);
.
Descripción:
Utilizo arrayToDataTable como método de creación de la tabla de datos.
En la primera fila expreso ‘Label’ y ‘Value’.
Por cada una de las filas siguientes, tendremos un gauge. Cada fila tendrá siempre 2 columnas: el nombre y el valor
El formato de la tabla será:
| ‘Label’ | ‘Value’ |
| Elemento1 | Valor1 |
| Elemento2 | Valor2 |
Ejemplo de Consulta:
SELECT ciudad, max(precio) from pizzas;
Aunque debería darse la posibilidad de hacer otro tipo de consultas:
SELECT sum(piña) as Piña, sum(atun) as Atún, sum(cebolla) as Cebolla
from pizzas;
Y en el tratamiento de la misma capturar el nombre del campo y el valor devuelto.
Opciones
Ejemplo:
var options = { width: 400, height: 120, redFrom: 90, redTo: 100, yellowFrom:75, yellowTo: 90, minorTicks: 5 };
- redFrom: Nos permite indicar el valor (en %) donde comienza el rojo
- redTo: Nos permite indicar el valor en % donde termina (debería ser siempre 100)
- yellowFrom
- yellowTo
- greenFrom
- greenTo
- majorTicks: número de líneas grandes en el visor
- minorTicks: número de líneas pequeñas en el visor entre cada par de líneas grandes
- animation: {duration: ms} Podemos expresar la animación de la aguja (el tiempo en milisegundos que tarda en ponerse en su lugar). Por defecto es 400 ms.
- animation: {easing: ms}Es el modo en el que se mueve. Por defecto es ‘linear’, pero puede ser:
- ‘in’ – Comienza despacio y acelera
- ‘out’ – Comienza rápido y frena
- ‘inAndOut’ – El inicio y el fin son lentos
A
Más info:
https://google-developers.appspot.com/chart/interactive/docs/gallery/gauge
.
Table – La Tabla de Google Chart
Table
Paquete a cargar
table
google.load("visualization", "1", {packages: ["table"]});
.
Datos
Ejemplo:
var data = new google.visualization.DataTable(); data.addColumn('string', 'Name'); data.addColumn('number', 'Salary'); data.addColumn('boolean', 'Full Time Employee'); data.addRows([ ['Mike', {v: 10000, f: '$10,000'}, true], ['Jim', {v:8000, f: '$8,000'}, false], ['Alice', {v: 12500, f: '$12,500'}, true], ['Bob', {v: 7000, f: '$7,000'}, true] ]);
.
Descripción:
Utilizo DataTable como método de creación de la tabla de datos.
Cada fila representa un elemento. Debo añadir las columnas especificando el tipo. Puedo tener tantas filas y columnas como quiera. La manera de trabajo es parecida a PieChart.
El formato de la tabla será:
| Nombre campo 1 | Nombre campo 2 | Nombre campo 3 |
| Elemento1 | Elemento3 | Elemento5 |
| Elemento2 | Elemento4 | Elemento6 |
Ejemplo de Consulta:
SELECT ciudad, pizzeria, fecha, hora, precio from pizzas;
Opciones
- Con cssClassNames se pueden aplicar estilos CSS a las distintas partes de la tabla.
- Paginación con la opción page que por defecto está a ‘disable’. Puede tomar los valores ‘enable’ y ‘event’.
- Tamaño de página (si paginación está activado) con pageSize.
- Ordenación al hacer clic en la columna. Está activada por defecto la opción sort, es decir, valor ‘enable’, también tiene ‘disable’ y ‘event’ (esta última servirá para capturar el evento).
NOTA: Me encanta la sencillez de la paginación en Table.
Más info:
https://google-developers.appspot.com/chart/interactive/docs/gallery/table.
ClandestickChart – Candelabro en Google Chart
No sé la verdad si se llama Candelabro este tipo de gráfico… Tendré que preguntarle a algún matemático. Desde luego la traducción es candelabro.
Un gráfico candelabro es una manera de graficar los mercados financieros. Contrasta con los gráficos de barras y los de líneas como una forma común de observar el comportamiento de los precios.
Paquete a cargar
corechart
google.load("visualization", "1", {packages: ["corechart"]});
Datos
Ejemplo:
var data = google.visualization.arrayToDataTable([ ['Mon', 20, 28, 38, 45], ['Tue', 31, 38, 55, 66], ['Wed', 50, 55, 77, 80], ['Thu', 77, 77, 66, 50], ['Fri', 68, 66, 22, 15] // Treat first row as data as well. ], true);
.
Descripción:
Utilizo arrayToDataTable como método de creación de la tabla de datos.
Cada fila representa un elemento. Debo tener siempre 5 columnas:
- La primera columna es string, las siguientes son numéricas.
- La segunda columna, es decir, la primera columna numérica, representa el Mínimo
- La tercera columna es el valor Inicial
- La 4ª columna es el valor Final
- La 5ª columna es el valor Máximo
El formato de la tabla será:
| Elemento1 | Minimo1 | Inicial1 | Final1 | Máximo1 |
| Elemento2 | Minimo2 | Inicial2 | Final2 | Máximo2 |
Ejemplo de Consulta:
SELECT ciudad, min(precio), first(precio), last(precio), max(precio) from pizzas
Opciones
Los colores de relleno del candelabro:
candlestick: {'fallingColor' : {'fill': 'red'}}
candlestick: {'risingColor' : {'fill': 'green'}}
.
Más info:
https://google-developers.appspot.com/chart/interactive/docs/gallery/candlestickchart
.
AreaChart – Gráfico de Áreas con Google Chart
El gráfico de áreas funciona igual que BarChart, ColumnChart y LineChart.
Utilizaremos la misma tipología a la hora de crear los datos, tendrán las mismas opciones, e incluso se pueden apilar:
Paquete a cargar
corechart
google.load("visualization", "1", {packages: ["corechart"]});
.
Opciones
Al igual que BarChart y ColumnChart, podemos apilar
- isStacked – Por defecto está a false. Sirve para poner áreas apiladas.
isStacked: true
Al igual que LineChart y ScatterChart, podemos modificar la forma y tamaño del punto:
Forma y tamaño del punto:
Se expresa mediante la opción pointShape. Por defecto, la forma del punto es un círculo (circle), pero puede tener los siguientes valores:
- ‘circle’,
- ‘triangle’,
- ‘square’,
- ‘diamond’,
- ‘star’,
- ‘polygon’
Entonces, si el valor por defecto es el circle, ¿por qué no se ve el punto en el gráfico de líneas? Básicamente porque la opción pointSize está a 0, por eso no se ve. Si modificamos su valor, ya sí podremos verlo:
'pointShape': 'triangle',
'pointSize': 10,
.
Datos
Por ejemplo serían:
var data = google.visualization.arrayToDataTable([ ['Year', 'Sales', 'Expenses'], ['2004', 1000, 400], ['2005', 1170, 460], ['2006', 660, 1120], ['2007', 1030, 540] ]);
Más info:
https://google-developers.appspot.com/chart/interactive/docs/gallery/areachart
.
LineChart – El gráfico de líneas de Google Chart
Es el típico gráfico de líneas.
Paquete a cargar
corechart
google.load("visualization", "1", {packages: ["corechart"]});
.
Opciones
Curvar las líneas:
Para conseguir un gráfico como el siguiente:
Simplemente hay que utilizar la opción curveType:
curveType: 'function'
Cambiar la orientación del gráfico
Utilizando la opción orientation, que por defecto está a horizontal, poniéndola a vertical:
orientation: 'vertical'
Anchura de la línea:
Utilizando lineWidth. Por defecto está a 2, podemos variarla para aumentar el grosor de la línea.
lineWidth: 5
Color de fondo del gráfico:
Utilizando backgroundColor se puede establecer. Hexadecimal recomendable
Forma y tamaño del punto:
Se expresa mediante la opción pointShape. Por defecto, la forma del punto es un círculo (circle), pero puede tener los siguientes valores:
- ‘circle’,
- ‘triangle’,
- ‘square’,
- ‘diamond’,
- ‘star’,
- ‘polygon’
Entonces, si el valor por defecto es el circle, ¿por qué no se ve el punto en el gráfico de líneas? Básicamente porque la opción pointSize está a 0, por eso no se ve. Si modificamos su valor, ya sí podremos verlo:
'pointShape': 'triangle',
'pointSize': 10,
.
Datos
Por ejemplo serían:
var data = google.visualization.arrayToDataTable([ ['Year', 'Sales', 'Expenses'], ['2004', 1000, 400], ['2005', 1170, 460], ['2006', 660, 1120], ['2007', 1030, 540] ]);
Es decir, los Datos en LineChart son iguales que en BarChart y en ColumnChart.
Más info:
https://google-developers.appspot.com/chart/interactive/docs/gallery/linechart
ScatterChart – Gráfico de dispersión en Google Chart
Este gráfico es muy interesante, ya que vamos a poder ver una nube de puntos comparando dos variables, cada una representada en un eje.
Paquete a cargar
corechart
google.load("visualization", "1", {packages: ["corechart"]});
Opciones
Aunque es válida para muchos otros tipos de Gráficos, voy a hablar de la Leyenda:
- legend
Para no tener leyenda:
legend: 'none'
Posición:
'legend':'left'
Tamaño de la leyenda:
width: 400,
chartArea: {width: '50%'}Con lo anterior, conseguimos reservar sólo para el área del gráfico el 50%, así habrá más sitio para la leyenda.
Para cambiar la fuente de la leyenda:
legend: {position: 'top', textStyle: {fontSize: 14}}Recomendación de opciones:
Creo que lo más recomendable es eliminar la leyenda (legend: ‘none’) y ponerle título a los ejes (vAxis: {title: ‘vertical’}).
Datos
Ejemplo:
var data = google.visualization.arrayToDataTable([ ['Age', 'Weight'], [ 8, 12], [ 4, 5.5], [ 11, 14], [ 4, 5], [ 3, 3.5], [ 6.5, 7] ]);
Para especificar los datos vemos que hay que especificar dos columnas numéricas (siempre en la primera fila expresamos los nombres de cada una de las variables.
Más info:
https://google-developers.appspot.com/chart/interactive/docs/gallery/scatterchart
.
ColumnChart – Gráfico de Columnas verticales con Google Chart
El ColumnChart es un gráfico de columnas igual que el gráfico de barras, pero ahora en vertical.
No hay apenas diferencias con el BarChart, incluyendo incluso las columnas apiladas con la opción isStacked.
Opciones
Por ejemplo, no comentado hasta ahora, tenemos la opción hAxis y la opción vAxis que nos permiten poner un titulillo a los ejes.
hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
vAxis: {title: 'Weight', minValue: 0, maxValue: 15},
.
Paquete a cargar
corechart
google.load("visualization", "1", {packages: ["corechart"]});
Datos
La misma estructura tiene ColumnChart que BarChart.
Más info:
https://google-developers.appspot.com/chart/interactive/docs/gallery/columnchart.
BarChart – Gráfico de barras horizontales con Google Chart
Paquete a cargar
corechart
google.load("visualization", "1", {packages: ["corechart"]});
Opciones
Las opciones irán especificadas de la siguiente manera:
var options ={
opcion1: valor1,
opcion2: valor2
};
- title – Título del gráfico: string
'title':'Mis actividades diarias'
- height y width serán la altura y la anchura, respectivamente, del gráfico. Sus valores no se entrecomillan
'height': 300
- colors – Es un array de colores en hexadecimal
colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6']
- isStacked – Por defecto está a false. Sirve para poner barras apiladas. Un gráfico de barras apiladas es un gráfico de barras que coloca los valores relacionados encima de la otra. Se suele utilizar cuando una categoría se divide naturalmente en componentes. Por ejemplo, considere algunas ventas de libros, dividida por género y comparación a través del tiempo
isStacked: true
Datos
Los datos son una tabla.
Ejemplo con arrayToDataTable
var data = google.visualization.arrayToDataTable([ ['Year', 'Sales', 'Expenses'], ['2004', 1000, 400], ['2005', 1170, 460], ['2006', 660, 1120], ['2007', 1030, 540] ]);
Hay que diferenciar con el PieChart, puesto que el PieChart sólo recibía dos columnas en la tabla de datos y aquí podemos tener muchas columnas.
var data = google.visualization.arrayToDataTable([
['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
['Copper', 8.94, '#b87333', 'Cu' ],
['Silver', 10.49, 'silver', 'Ag' ],
['Gold', 19.30, 'gold', 'Au' ],
['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
]);
La primera fila de la tabla
Contiene los nombres de los campos o los roles que se especifican.
La primera posición de la primera fila contendrá el nombre de las series.
El resto de posiciones tendrán el nombre de qué estamos mostrando, debajo tendrá números, así que serán Densidad (como en el ejemplo), Número de Heridos, Número de trozos de piña, etc.
Y después se especificarán los roles con el siguiente formato:
{ role: 'style' }
Roles que podemos encontrar:
- style – Por ejemplo el color de la barra, opacidad, borde, etc. Tampoco me preocupa mucho.
- annotation – La etiqueta (valor, abreviatura, etc). Como al poner encima el ratón aparece, no me preocupa mucho.
En el resto de filas
En las columnas siempre tendremos en primera posición el nombre de la serie, típicamente será string, aunque puede ser numérico.
A continuación, tendremos tantos valores numéricos como columnas y para terminar los roles
Más info:
https://google-developers.appspot.com/chart/interactive/docs/gallery/barchart
PieChart – Gráfico de sectores de Google Chart
Paquete a cargar
corechart
google.load("visualization", "1", {packages: ["corechart"]});
Opciones
Las opciones irán especificadas de la siguiente manera (hay veces que la opción la he encontrado entrecomillada, pero sin comillas también va bien, únicamente son necesarias las comillas simples para los valores string):
var options ={
opcion1: valor1,
opcion2: valor2
};
- title – Título del gráfico: string
'title':'Mis actividades diarias'
- is3d – Si el gráfico es en 3D o no. Por defecto está a false, es decir, es de 2D. Si queremos que sea 3D habrá que ponerlo a true
'is3D': true
- height y width serán la altura y la anchura, respectivamente, del gráfico. Sus valores no se entrecomillan
'height': 300
- pieHole – provoca que nuestro gráfico circular se convierta en un donut. Es como el gráfico que presento al principio. He probado y no es compatible con el 3D. Debe tomar valores entre 0 y 1, pero lo lógico es que esté entre 0.4 y 0.6
pieHole : 0.5
- pieStartAngle – Por defecto, empieza el gráfico arriba, desarrollándose los trocitos en el sentido de las agujas del reloj. Si no quieres empezar justo por arriba, puedes indicarle cuántos grados con respecto a esta posición inicial quieres.
pieStartAngle : 100
- colors – Es un array de colores en hexadecimal
colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6']
- Se pueden separar trozos [no es de mi interés] con el objeto slices:
slices: { 4: {offset: 0.2}, 12: {offset: 0.3}, 14: {offset: 0.4}, 15: {offset: 0.5}, },
- Usando el mismo objeto, se podrían poner algunos transparentes:
slices: { 0: { color: 'yellow' }, 1: { color: 'transparent' } }
Datos
Los datos son una tabla de dos columnas con título.
Ejemplo con DataTable
var datos = new google.visualization.DataTable();
datos.addColumn('string', 'Ingredientes');
datos.addColumn('number', 'Trozos');
datos.addRows([
['Setas', 3],
['Champiñones', 8],
['Aceitunas', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
Ejemplo con arrayToDataTable
var data = google.visualization.arrayToDataTable([ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]);
En el primer caso hay que especificar el tipo de los datos de las columnas.
Además del nombre y el valor, se pueden especificar unas opciones para darle formato a cada uno de los slices o trozos. Esta información se puede consultar en:
https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart#Configuration_Options
Más info:
https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart
Leitmotiv
Dalek-free
Camisetas cargadas de adrenalina. Llénalas de aventura
CursoProgramador 