Descripción general
Nota: JavaScript cuenta los meses a partir de cero: enero es el 0, febrero es el 1 y diciembre es el 11. Si tu gráfico del calendario parece estar fuera de servicio en un mes, esta es la razón.
Un gráfico de calendario es una visualización que se usa para mostrar la actividad a lo largo de un período prolongado, como meses o años. Es mejor usarlos cuando quieras ilustrar cómo varía cierta cantidad según el día de la semana o cómo cambia con el tiempo.
Es posible que el gráfico del calendario se esté sometiendo a revisiones importantes en futuras versiones de los rankings de Google.
Los gráficos del calendario se renderizan en el navegador mediante SVG o VML, lo que sea adecuado para el navegador del usuario. Al igual que todos los gráficos de Google, los gráficos de calendario muestran información sobre la herramienta cuando el usuario coloca el cursor sobre los datos. Y para dar crédito, nuestro gráfico del calendario se inspiró en la visualización del calendario D3.
Un ejemplo simple
Digamos que queremos mostrar cómo varió la asistencia de un equipo deportivo a lo largo de la temporada. Con un gráfico de calendario, podemos usar el brillo para indicar los valores y permitir que las personas vean las tendencias de un vistazo:
Puedes colocar el cursor sobre los días individuales para ver los valores de datos subyacentes.
Para crear un gráfico de calendario, carga el paquete calendar y, luego, crea dos columnas, una para las fechas y otra para los valores. (En una versión futura de Google Charts), se incluirá una tercera columna opcional para diseños personalizados.
Luego completa las filas con pares de fecha-valor, como se muestra a continuación.
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["calendar"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'date', id: 'Date' });
dataTable.addColumn({ type: 'number', id: 'Won/Loss' });
dataTable.addRows([
[ new Date(2012, 3, 13), 37032 ],
[ new Date(2012, 3, 14), 38024 ],
[ new Date(2012, 3, 15), 38024 ],
[ new Date(2012, 3, 16), 38108 ],
[ new Date(2012, 3, 17), 38229 ],
// Many rows omitted for brevity.
[ new Date(2013, 9, 4), 38177 ],
[ new Date(2013, 9, 5), 38705 ],
[ new Date(2013, 9, 12), 38210 ],
[ new Date(2013, 9, 13), 38029 ],
[ new Date(2013, 9, 19), 38823 ],
[ new Date(2013, 9, 23), 38345 ],
[ new Date(2013, 9, 24), 38436 ],
[ new Date(2013, 9, 30), 38447 ]
]);
var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));
var options = {
title: "Red Sox Attendance",
height: 350,
};
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id="calendar_basic" style="width: 1000px; height: 350px;"></div>
</body>
</html>
Días
Cada cuadrado en un gráfico de calendario representa un día. Actualmente, el color de las celdas de datos no se puede personalizar, aunque eso cambiará en la próxima versión de Gráficos de Google.
Si los valores de los datos son todos positivos, los colores variarán de blanco a azul, y los azules más profundos indican los valores más altos. Si hay valores de datos negativos, aparecerán de color naranja, como se muestra a continuación.
El código de este calendario es similar al primero, con la excepción de que las filas tienen el siguiente aspecto:
[ new Date(2013, 9, 4), 10 ],
[ new Date(2013, 9, 5), 3 ],
[ new Date(2013, 9, 7), -1 ],
[ new Date(2013, 9, 8), 2 ],
[ new Date(2013, 9, 12), -1 ],
[ new Date(2013, 9, 13), 1 ],
[ new Date(2013, 9, 15), 1 ],
[ new Date(2013, 9, 16), -4 ],
Puedes cambiar el tamaño de los días ("celdas") con la opción calendar.cellSize:
Aquí, cambiamos calendar.cellSize a 10, lo que reduce los días y, por lo tanto, el gráfico en su totalidad.
var options = {
title: 'Red Sox Attendance',
calendar: { cellSize: 10 },
};
Los días sin valores de datos se pueden personalizar con la opción noDataPattern:
Aquí, configuramos color en un celeste y backgroundColor en un tono un poco más oscuro:
var options = {
title: "Red Sox Attendance",
height: 350,
noDataPattern: {
backgroundColor: '#76a7fa',
color: '#a0c3ff'
}
};
Puedes controlar el color, el ancho y la opacidad de los bordes de las celdas con calendar.cellColor:
Deberás tener cuidado para elegir un color de trazo que se distinga del monthOutlineColor, o bien elegir una opacidad baja. Estas son las opciones del gráfico anterior:
var options = {
title: 'Red Sox Attendance',
height: 350,
calendar: {
cellColor: {
stroke: '#76a7fa',
strokeOpacity: 0.5,
strokeWidth: 1,
}
}
};
Si te enfocas en un día del gráfico anterior, el borde se destacará en rojo. Puedes controlar ese comportamiento con las opciones de calendar.focusedCellColor:
var options = {
title: 'Red Sox Attendance',
height: 350,
calendar: {
focusedCellColor: {
stroke: '#d3362d',
strokeOpacity: 1,
strokeWidth: 1,
}
}
};
Semanas
De forma predeterminada, los días de la semana están etiquetados con las primeras letras (de domingo a sábado).
No puedes cambiar el orden de los días, pero puedes cambiar las letras que se usan con la opción calendar.daysOfWeek. Además, puedes controlar el padding entre los días de la semana y el gráfico con calendar.dayOfWeekRightSpace, y puedes personalizar el estilo de texto con calendar.dayOfWeekLabel:
Aquí, cambiamos la fuente de las etiquetas de la semana, colocamos un padding de 10 píxeles entre las etiquetas y los datos del gráfico, y comenzamos las semanas el lunes.
var options = {
title: 'Red Sox Attendance',
height: 350,
calendar: {
dayOfWeekLabel: {
fontName: 'Times-Roman',
fontSize: 12,
color: '#1a8763',
bold: true,
italic: true,
},
dayOfWeekRightSpace: 10,
daysOfWeek: 'DLMMJVS',
}
};
Meses
De forma predeterminada, los meses se identifican con líneas grises oscuras. Puedes usar la opción calendar.monthOutlineColor para controlar los bordes, la calendar.monthLabel para personalizar la fuente de la etiqueta y calendar.underMonthSpace para ajustar el relleno de la etiqueta:
Configuramos la fuente de la etiqueta con una cursiva de negrita de color rojo oscuro de 12 pt Times-Roman, establecemos los contornos en el mismo color y colocamos un padding de 16 píxeles. Los contornos de mes sin usar se configuran en un color más tenue del mismo tono.
var options = {
title: 'Red Sox Attendance',
height: 350,
calendar: {
monthLabel: {
fontName: 'Times-Roman',
fontSize: 12,
color: '#981b48',
bold: true,
italic: true
},
monthOutlineColor: {
stroke: '#981b48',
strokeOpacity: 0.8,
strokeWidth: 2
},
unusedMonthOutlineColor: {
stroke: '#bc5679',
strokeOpacity: 0.8,
strokeWidth: 1
},
underMonthSpace: 16,
}
};
Años
Los años en los gráficos del calendario siempre están en el borde izquierdo del gráfico y se pueden personalizar con calendar.yearLabel y calendar.underYearSpace:
Configuramos la fuente de año con un color verde oscuro de 32 pt en negrita y estilo cronometrado, y agregamos diez píxeles entre las etiquetas de año y la parte inferior del gráfico:
var options = {
title: 'Red Sox Attendance',
height: 350,
calendar: {
underYearSpace: 10, // Bottom padding for the year labels.
yearLabel: {
fontName: 'Times-Roman',
fontSize: 32,
color: '#1A8763',
bold: true,
italic: true
}
}
};
Cargando
El nombre del paquete google.charts.load es "calendar":
google.charts.load("current", {packages: ["calendar"]});
El nombre de clase de la visualización es google.visualization.Calendar:
var visualization = new google.visualization.Calendar(container);
Formato de datos
Filas: Cada fila de la tabla representa una fecha.
Columnas:
| Columna 0 | Columna 1 | ... | Columna N (opcional) | |
|---|---|---|---|---|
| Objetivo: | Fechas | Valores | ... | Roles opcionales |
| Tipo de datos: | date, datetime u timeofday | número | ... | |
| Role: | dominio | datos | ... | |
| Roles de columna opcionales: | Nada de control |
Nada de control |
... |
Opciones de configuración
| Nombre | |
|---|---|
| calendar.cellColor |
La opción
var options = {
calendar: {
cellColor: {
stroke: 'red', // Color the border of the squares.
strokeOpacity: 0.5, // Make the borders half transparent.
strokeWidth: 2 // ...and two pixels thick.
}
}
};
Tipo: objeto
Valor predeterminado:
{ stroke: '#fff', strokeOpacity: 1, strokeWidth: 1 } |
| calendar.cellSize |
El tamaño de los cuadrados del día calendario:
var options = { calendar: { cellSize: 10 } };
Tipo: Número entero
Valor predeterminado: 16
|
| calendar.dayOfWeekLabel |
Controla el estilo de fuente de las etiquetas de semana en la parte superior del gráfico:
var options = {
calendar: {
dayOfWeekLabel: {
fontName: 'Times-Roman',
fontSize: 12,
color: 'black',
bold: false,
italic: false
}
}
};
Tipo: objeto
Predeterminado:
{ fontName: 'sans-serif', color: '#888', bold: false, italic: false }
|
| calendar.dayOfWeekRightSpace |
La distancia entre el borde derecho de las etiquetas de semana y el borde izquierdo de los cuadrados de día del gráfico. Tipo: Número entero
Valor predeterminado: 4
|
| calendar.daysOfWeek |
Las etiquetas de una sola letra que se utilizan para el día domingo a sábado. Tipo: string
Valor predeterminado:
'SMTWTFS' |
| calendar.focusedCellColor |
Cuando el usuario se centre (por ejemplo, si coloca el cursor sobre un cuadrado de día), los gráficos de calendario destacarán ese cuadrado.
var options = {
calendar:
focusedCellColor: {
stroke: 'red',
strokeOpacity: 0.8,
strokeWidth: 3
}
}
};
Tipo: objeto
Valor predeterminado:
{ stroke: '#000', strokeOpacity: 1, strokeWidth: 2 } |
| calendar.monthLabel |
Estilo de las etiquetas de mes, p.ej.:
var options = {
calendar: {
monthLabel: {
fontName: 'Times-Roman',
fontSize: 16,
color: 'green',
bold: true,
italic: false
}
}
};
Tipo: objeto
Predeterminado:
{ fontName: 'sans-serif', color: '#888', bold: false, italic: false }
|
| calendar.monthOutlineColor |
Los meses con valores de datos se delinean con respecto a otros que usan un borde en este estilo.
var options = {
calendar: {
monthOutlineColor: {
stroke: 'blue',
strokeOpacity: 0.8,
strokeWidth: 2
}
}
};
(También consulta calendar.unusedMonthOutlineColor).
Tipo: objeto
Valor predeterminado:
{ stroke: '#000', strokeOpacity: 1, strokeWidth: 1 } |
| calendar.underMonthSpace |
Cantidad de píxeles entre la parte inferior de las etiquetas del mes y los cuadrados de la parte superior del día: var options = { calendar: { underMonthSpace: 12 } };
Tipo: Número entero
Valor predeterminado: 6
|
| calendar.underYearSpace |
Cantidad de píxeles entre la etiqueta de año de la parte inferior y la parte inferior del gráfico: var options = { calendar: { underYearSpace: 2 } };
Tipo: Número entero
Valor predeterminado: 0
|
| calendar.unusedMonthOutlineColor |
Los meses sin valores de datos se delimitan de otros que usan un borde con este estilo.
var options = {
calendar: {
unusedMonthOutlineColor: {
stroke: 'yellow',
strokeOpacity: 0.8,
strokeWidth: 2
}
}
};
(También consulta calendar.monthOutlineColor).
Tipo: objeto
Predeterminado:
{ stroke: '#c9c9c9', strokeOpacity: 1, strokeWidth: 1 }
|
| colorAxis |
Es un objeto que especifica una asignación entre los valores y los colores de la columna de colores o una escala de gradiente. Para especificar propiedades de este objeto, puedes usar la notación literal de objeto, como se muestra a continuación: {minValue: 0, colors: ['#FF0000', '#00FF00']}
Tipo: objeto
Valor predeterminado: nulo
|
| colorAxis.colors |
Colores para asignar a valores en la visualización. Un array de cadenas, en el que cada elemento es una cadena de color HTML, por ejemplo: Tipo: matriz de cadenas de color
Valor predeterminado: nulo
|
| colorAxis.maxValue |
Si está presente, especifica un valor máximo para los datos de color del gráfico. Los valores de datos de color de este valor y de versiones superiores se renderizarán como el último color del rango Tipo: Número
Predeterminado: Valor máximo de la columna de color en los datos del gráfico
|
| colorAxis.minValue |
Si está presente, especifica un valor mínimo para los datos de color del gráfico. Los valores de datos de color de este valor y de valores inferiores se renderizarán como el primer color en el rango Tipo: Número
Predeterminado: Valor mínimo de la columna de color en los datos del gráfico
|
| colorAxis.values |
Si está presente, controla cómo se asocian los valores con los colores. Cada valor se asocia con el color correspondiente en el array Tipo: array de números
Valor predeterminado: nulo
|
| forceIFrame |
Dibuja el gráfico dentro de un marco intercalado. (Ten en cuenta que, en IE8, esta opción se ignora; todos los gráficos de IE8 se dibujan en iframes). Tipo: booleano
Predeterminado: falso
|
| height |
Altura del gráfico en píxeles. Tipo: Número
Predeterminado: la altura del elemento contenedor
|
| noDataPattern |
Los gráficos de calendario usan un patrón diagonal a rayas para indicar que no hay datos para un día en particular. Usa las opciones
noDataPattern: {
backgroundColor: '#76a7fa',
color: '#a0c3ff'
}
Tipo: objeto
Valor predeterminado: nulo
|
| tooltip.isHtml |
Configúralo en Nota: La personalización del contenido HTML de la información sobre la herramienta mediante el rol de datos de la columna de información no es compatible con las visualizaciones de gráfico circular y gráfico de burbujas. Tipo: booleano
Predeterminado: verdadero
|
| width |
Es el ancho del gráfico (en píxeles). Tipo: Número
Predeterminado: Ancho del elemento contenedor
|
Métodos
| Método | |
|---|---|
draw(data, options) |
Dibuja el gráfico. El gráfico acepta más llamadas de método solo después de que se activa el evento Tipo de datos que se muestra: ninguno
|
getBoundingBox(id) |
Muestra un objeto que contiene las partes izquierda, superior, ancho y altura del elemento
Los valores están relacionados con el contenedor del gráfico. Llámalo después de que se dibuje el gráfico. Tipo de datos que se muestra: objeto
|
getSelection() |
Muestra un array de las entidades del gráfico seleccionadas.
Las entidades seleccionables son barras, entradas de leyenda y categorías.
Una barra corresponde a una celda en la tabla de datos, una leyenda a una columna (el índice de fila es nulo) y una categoría a una fila (el índice de columna es nulo).
Para este gráfico, solo se puede seleccionar una entidad en un momento determinado.
Tipo de datos que se muestra: Es el array de elementos de selección.
|
setSelection() |
Selecciona las entidades del gráfico especificadas. Cancela cualquier selección anterior.
Las entidades seleccionables son barras, entradas de leyenda y categorías.
Una barra corresponde a una celda en la tabla de datos, una leyenda a una columna (el índice de fila es nulo) y una categoría a una fila (el índice de columna es nulo).
Para este gráfico, solo se puede seleccionar una entidad a la vez.
Tipo de datos que se muestra: ninguno
|
clearChart() |
Borra el gráfico y libera todos sus recursos asignados. Tipo de datos que se muestra: ninguno
|
Eventos
| Nombre | |
|---|---|
error |
Se activa cuando se produce un error cuando se intenta renderizar el gráfico. Propiedades: ID, mensaje
|
onmouseover |
Se activa cuando el usuario desplaza el mouse sobre una entidad visual. Devuelve el índice de fila y el valor de fecha de la entidad. Si no hay ningún elemento de tabla de datos de la entidad, el valor que se muestra para el índice de fila es Propiedades: fila, fecha
|
onmouseout |
Se activa cuando el usuario aleja el mouse de una entidad visual. Devuelve el índice de fila y el valor de fecha de la entidad. Si no hay ningún elemento de tabla de datos de la entidad, el valor que se muestra para el índice de fila es Fila, fecha de Properties
|
ready |
El gráfico está listo para llamadas de método externas. Si deseas interactuar con el gráfico y llamar a los métodos después de dibujarlo, debes configurar un objeto de escucha para este evento antes de llamar al método Propiedades: ninguna
|
select |
Se activa cuando el usuario hace clic en una entidad visual. Para saber qué se seleccionó, llama a Propiedades: ninguna
|
Política de Datos
Todo el código y los datos se procesan y renderizan en el navegador. No se envían datos a ningún servidor.