Descripción general
Nota:JavaScript cuenta los meses que comienzan en cero: enero es 0, febrero es el 1 y diciembre es el 11. Si su gráfico de calendario aparece desactivado por un mes, este es el motivo.
Un gráfico de calendario es una visualización que se usa para mostrar la actividad en el transcurso de un período prolongado, como meses o años. Son más útiles cuando deseas ilustrar cómo varía la cantidad según el día de la semana o cómo cambia con el tiempo.
Es posible que se realicen revisiones importantes en el gráfico de calendario en futuras versiones de Google Charts.
Los gráficos de 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 se desplaza sobre los datos. Y el crédito donde se debe el crédito: nuestro gráfico de calendario se inspiró en la visualización del calendario D3.
Ejemplo simple
Supongamos que queremos mostrar cómo varía la asistencia de un equipo deportivo durante toda la temporada. Con un gráfico del calendario, podemos usar el brillo para indicar los valores y permitir que las personas vean las tendencias de un vistazo:
Puede desplazar el cursor del mouse 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. Próximamente, en una versión futura de los rankings, aparecerá una tercera columna para el estilo personalizado.
Luego, completa tus filas con pares de fecha y 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 de 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 los gráficos de Google.
Si todos los valores de los datos son positivos, los colores van del blanco al azul, y el azul más profundo indica los valores más altos. Si hay valores de datos negativos, aparecerán en naranja, como se muestra a continuación.
El código de este calendario es similar al primero, excepto que las filas se ven así:
[ 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 la cantidad de días y, por lo tanto, el gráfico en su conjunto.
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 el color en un celeste y el 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:
Debes ser cuidadoso al elegir un color de trazo que se distinga del monthOutlineColor, o elegir una opacidad baja. Estas son las opciones para el gráfico anterior:
var options = {
title: 'Red Sox Attendance',
height: 350,
calendar: {
cellColor: {
stroke: '#76a7fa',
strokeOpacity: 0.5,
strokeWidth: 1,
}
}
};
Si se centra 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 se etiquetan con las primeras letras del domingo al 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 relleno entre los días de la semana y el gráfico con calendar.dayOfWeekRightSpace, y puedes personalizar el estilo del 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 a fin de controlar los bordes, calendar.monthLabel para personalizar la fuente de la etiqueta y calendar.underMonthSpace para ajustar el relleno:
Establecemos la fuente de la etiqueta en cursiva roja y negrita Times-Roman de 12 puntos, establecemos los contornos en el mismo color y colocamos un padding de 16 píxeles. Los contornos de meses sin usar se establecen en un color más tenue del mismo matiz.
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 se encuentran en el borde izquierdo del gráfico y se pueden personalizar con calendar.yearLabel y calendar.underYearSpace:
Configuramos la fuente del año en una cursiva verde negrita de 32 puntos de color verde oscuro y agregamos diez píxeles entre las etiquetas del 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 los datos
Filas: cada fila de la tabla representa una fecha.
Columnas:
| Columna 0 | Columna 1 | … | Columna N (opcional) | |
|---|---|---|---|---|
| Propósito: | Fechas | Values | … | Funciones opcionales |
| Tipo de datos: | fecha, hora o fecha | número | … | |
| Rol: | dominio | datos | … | |
| Funciones de columna opcionales: | Ninguno |
Ninguno |
… |
Opciones de configuración
| Nombre | |
|---|---|
| calendario.celdaColor |
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.
}
}
};
Type:
Predeterminado:
{ stroke: '#fff', strokeOpacity: 1, strokeWidth: 1 } |
| calendario.celdaTamaño |
El tamaño de los cuadrados del día calendario:
var options = { calendar: { cellSize: 10 } };
Tipo: número entero
Predeterminado: 16
|
| calendar.dayOfWeekLabel |
Controla el estilo de fuente de las etiquetas de la semana en la parte superior del gráfico:
var options = {
calendar: {
dayOfWeekLabel: {
fontName: 'Times-Roman',
fontSize: 12,
color: 'black',
bold: false,
italic: false
}
}
};
Type:
Predeterminado:
{ fontName: 'sans-serif', color: '#888', bold: false, italic: false }
|
| calendario.díaDeSemanaDerechaEspacio |
La distancia entre el borde derecho de las etiquetas de la semana y el borde izquierdo de los cuadrados del día del gráfico. Tipo: número entero
Predeterminado: 4
|
| calendario.díasDeLaSemana |
Las etiquetas de una sola letra que se usarán de domingo a sábado Tipo: string
Predeterminado:
'SMTWTFS' |
| calendario.focusCellColor |
Cuando el usuario enfoca (por ejemplo, coloca el cursor sobre un) día, los gráficos de calendario destacan el cuadrado.
var options = {
calendar:
focusedCellColor: {
stroke: 'red',
strokeOpacity: 0.8,
strokeWidth: 3
}
}
};
Type:
Predeterminado:
{ stroke: '#000', strokeOpacity: 1, strokeWidth: 2 } |
| calendar.monthLabel |
Estilo para las etiquetas del mes, por ejemplo:
var options = {
calendar: {
monthLabel: {
fontName: 'Times-Roman',
fontSize: 16,
color: 'green',
bold: true,
italic: false
}
}
};
Type:
Predeterminado:
{ fontName: 'sans-serif', color: '#888', bold: false, italic: false }
|
| calendario.mesOutlineColor |
Los meses con valores de datos se delimitan de otros con un borde en este estilo.
var options = {
calendar: {
monthOutlineColor: {
stroke: 'blue',
strokeOpacity: 0.8,
strokeWidth: 2
}
}
};
(Consulta también calendar.unusedMonthOutlineColor).
Type:
Predeterminado:
{ stroke: '#000', strokeOpacity: 1, strokeWidth: 1 } |
| calendar.underMonthSpace |
Cantidad de píxeles entre la parte inferior de las etiquetas del mes y la parte superior del cuadrado del día: var options = { calendar: { underMonthSpace: 12 } };
Tipo: número entero
Predeterminado: 6
|
| calendario.underYearSpace |
La cantidad de píxeles entre la etiqueta del año que se encuentra más abajo y la parte inferior del gráfico: var options = { calendar: { underYearSpace: 2 } };
Tipo: número entero
Valor predeterminado: 0
|
| calendario.unusedmesOutlineColor |
Los meses sin valores de datos se delimitan de otros con un borde en este estilo.
var options = {
calendar: {
unusedMonthOutlineColor: {
stroke: 'yellow',
strokeOpacity: 0.8,
strokeWidth: 2
}
}
};
(Consulta también calendar.monthOutlineColor).
Type:
Predeterminado:
{ stroke: '#c9c9c9', strokeOpacity: 1, strokeWidth: 1 }
|
| eje color |
Un objeto que especifica una asignación entre los valores de columnas de color y los colores o una escala de gradiente. Para especificar las propiedades de este objeto, puedes usar la notación literal de objeto, como se muestra aquí: {minValue: 0, colors: ['#FF0000', '#00FF00']}
Type:
Valor predeterminado: null
|
| colorAxis.colors |
Colores para asignar a los valores en la visualización. Un arreglo de strings, en la que cada elemento es una string de color HTML, por ejemplo: Tipo: arreglo de strings de color
Valor predeterminado: null
|
| 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 uno superior se procesarán como el último color en el 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 uno inferior se procesará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 arreglo Tipo: arreglo de números
Valor predeterminado: null
|
| 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 i-frames). Tipo: booleano
Valor predeterminado: falso
|
| alto |
Altura del gráfico, en píxeles. Tipo: número
Predeterminado: altura del elemento que lo contiene
|
| noDataPattern |
Los gráficos de calendario usan un patrón de rayas diagonales para indicar que no hay datos para un día en particular. Usa las opciones
noDataPattern: {
backgroundColor: '#76a7fa',
color: '#a0c3ff'
}
Type:
Valor predeterminado: null
|
| tooltip.isHtml |
Configúralo en Nota: La personalización del contenido de la información sobre la herramienta de HTML mediante la función de datos de la columna de información sobre la herramienta no es compatible con las visualizaciones de Gráfico circular y Gráfico de burbujas. Tipo: booleano
Predeterminado: verdadero
|
| ancho |
Ancho del gráfico en píxeles. Tipo: número
Predeterminado: ancho del elemento que lo contiene
|
Métodos
| Método | |
|---|---|
draw(data, options) |
Dibuja el gráfico. El gráfico acepta más llamadas a métodos después de que se activa el evento Tipo de datos que se muestra: ninguno
|
getBoundingBox(id) |
Muestra un objeto que contiene la izquierda, la parte superior, el ancho y la altura del elemento de gráfico
Los valores son relativos al contenedor del gráfico. Llámelo después de que se dibuje el gráfico. Return Type: Objeto
|
getSelection() |
Muestra un arreglo de las entidades del gráfico seleccionadas.
Las entidades que se pueden seleccionar son barras, entradas de leyendas y categorías.
Una barra corresponde a una celda en la tabla de datos, una entrada de leyenda a una columna (el índice de fila es nulo) y una categoría a una fila (el índice de la columna es nulo).
Para este gráfico, solo se puede seleccionar una entidad por momento.
Tipo de datos que se muestra: arreglo de elementos de selección
|
setSelection() |
Selecciona las entidades del gráfico especificadas. Cancela cualquier selección anterior.
Las entidades que se pueden seleccionar son barras, entradas de leyendas y categorías.
Una barra corresponde a una celda en la tabla de datos, una entrada de leyenda a una columna (el índice de fila es nulo) y una categoría a una fila (el índice de la 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 los recursos asignados. Tipo de datos que se muestra: ninguno
|
Eventos
| Nombre | |
|---|---|
error |
Se activa cuando se produce un error cuando se intenta procesar 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 un elemento de tabla de datos para la entidad, el valor que se muestra para el índice de fila es Propiedades: fila, fecha
|
onmouseout |
Se activa cuando el usuario se aleja del mouse de una entidad visual. Devuelve el índice de fila y el valor de fecha de la entidad. Si no hay un elemento de tabla de datos para la entidad, el valor que se muestra del índice de fila es Properties fila, fecha
|
ready |
El gráfico está listo para las llamadas a métodos externos. 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é elementos se seleccionaron, llama a Propiedades: ninguna
|
Política de Datos
El código y los datos se procesan y procesan en el navegador. No se envían datos a ningún servidor.