Gráfico del calendario

  1. Overview
  2. Un ejemplo sencillo
  3. Días
  4. Semanas
  5. Meses
  6. Años
  7. Cargando
  8. Formato de los datos
  9. Opciones de configuración
  10. Métodos
  11. Eventos
  12. Política de Datos

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 calendar.cellColor te permite personalizar el borde de los cuadrados del día del calendario: 

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: colorAxis: {colors:['red','#004411']}. Debes tener al menos dos valores; el gradiente incluirá todos tus valores, más los valores intermedios calculados, con el primer color como el valor más pequeño y el último color como el más alto.

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 colorAxis.colors.

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 colorAxis.colors.

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 colorAxis.colors. Estos valores se aplican a los datos de color del gráfico. La coloración se realiza según un gradiente de los valores especificados aquí. No especificar un valor para esta opción equivale a especificar [minValue, maxValue].

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 y noDataPattern.color para anular los valores predeterminados de la escala de grises, p.ej.: 

noDataPattern: {
  backgroundColor: '#76a7fa',
  color: '#a0c3ff'
}
Tipo: objeto
Valor predeterminado: nulo
tooltip.isHtml

Configúralo en false para usar información sobre la herramienta renderizada por SVG (en lugar de hacerlo por HTML). Consulta Cómo personalizar el contenido de la información sobre la herramienta para obtener más detalles.

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 ready. Extended description.

Tipo de datos que se muestra: ninguno
getBoundingBox(id)

Muestra un objeto que contiene las partes izquierda, superior, ancho y altura del elemento id del gráfico. El formato de id aún no está documentado (son los valores de retorno de los controladores de eventos), pero estos son algunos ejemplos:

var cli = chart.getChartLayoutInterface();

Altura del área del gráfico
cli.getBoundingBox('chartarea').height
Ancho de la tercera barra en la primera serie de un gráfico de barras o columnas
cli.getBoundingBox('bar#0#2').width
Cuadro de límite de la quinta cuña de un gráfico circular
cli.getBoundingBox('slice#4')
Cuadro de límite de los datos del gráfico de un gráfico vertical (por ejemplo, las columnas):
cli.getBoundingBox('vAxis#0#gridline')
Cuadro de límite de los datos del gráfico de un gráfico horizontal (p.ej., de barras):
cli.getBoundingBox('hAxis#0#gridline')

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. Extended description .

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. Extended description .

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 undefined.

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 undefined.

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 draw e llamarlos solo después de que se haya activado el evento.

Propiedades: ninguna
select

Se activa cuando el usuario hace clic en una entidad visual. Para saber qué se seleccionó, llama a getSelection().

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.