Funciones de columna

En esta página, se describe el concepto y el uso de las funciones en las tablas de datos de los gráficos.

  1. ¿Qué son los roles?
  2. ¿Qué roles están disponibles?
  3. Jerarquía y asociatividad de los roles
  4. Cómo asignar una función

¿Qué son los roles?

Los objetos DataTable y DataView de Google ahora admiten roles de columna asignados de manera explícita. Un rol de columna describe el propósito de los datos en esa columna; por ejemplo, una columna puede contener datos que describen el texto de la información sobre la herramienta, las anotaciones de puntos de datos o los indicadores de incertidumbre. La mayoría de los roles de las columnas se aplican a la columna “datos” que la precede, ya sea que se encuentre inmediatamente antes o antes de la primera de un grupo consecutivo de columnas de funciones. Por ejemplo, puedes tener dos columnas después de la columna de “datos”, una para “información” y otra para “anotación”. Sin embargo, luego de la columna "domain", generalmente permitimos las funciones de las columnas "annotation" y "annotationText".

Nota: Si quieres controlar el contenido de la información sobre la herramienta que aparece cuando el usuario coloca el cursor sobre un gráfico, consulta Sugerencias para herramientas.

Originalmente, solo había dos funciones disponibles para una columna: “dominio”, que especifica los valores del eje principal; y “datos”, que especifica las alturas de la barra, el ancho de la porción del gráfico circular, etc. Estos roles se asignaron de manera implícita, según el orden y el tipo de las columnas de la tabla. Sin embargo, con la capacidad de asignar roles de columna de forma explícita, ahora puedes agregar columnas opcionales que proporcionen características nuevas y atractivas a un gráfico, como etiquetas de anotación arbitraria, texto flotante y barras de incertidumbre.

Si no asignas de forma explícita la función de una columna, su función se infiere según el orden de la columna en la tabla, según la especificación de formato de datos del gráfico. En esta página, se mostrará qué roles están disponibles para asignar de forma explícita y cómo hacerlo.

A continuación, se muestra una comparación de lo que puedes hacer con un gráfico de líneas si usas solo los roles inferidos predeterminados, en comparación con los roles adicionales asignados de forma explícita.

Formato de tabla de datos del gráfico de líneas:

  Columna 0 Columna 1 ... Columna N
Objetivo Valores de la línea 1 ... Valores de la línea N
Tipo de datos número ... número
Rol dominio datos ... datos
Roles de columna admitidos
opcionales
  • anotación
  • annotationText
  • anotación
  • annotationText
  • certeza
  • énfasis.
  • interval
  • permiso
  • estilo
  • cuadro de información
...
  • anotación
  • annotationText
  • certeza
  • énfasis.
  • interval
  • permiso
  • estilo
  • cuadro de información

 

Gráfico sin roles de columna explícitos Gráfico con roles de columna explícitos

Este gráfico no aplica roles de forma explícita, por lo que solo se puede usar el diseño de columnas de datos básicos y dominio que se muestra arriba.

DataTable:

var data = new google.visualization.DataTable();
data.addColumn('string', 'Month'); // Implicit domain label col.
data.addColumn('number', 'Sales'); // Implicit series 1 data col.
data.addRows([
  ['April',1000],
  ['May',  1170],
  ['June',  660],
  ['July', 1030]
]);

Este gráfico asigna roles de forma explícita, por lo que se pueden agregar columnas opcionales. Este gráfico tiene columnas opcionales para los roles de anotación, anotación de texto, intervalo y certeza.

  • Las columnas annotation especifican etiquetas estáticas en el gráfico. En este caso, “A”, “B” y “C” son anotaciones.
  • Las columnas annotationText especifican el texto flotante cuando pasas el mouse sobre la anotación (no sobre el punto de datos).
  • Las columnas interval especifican los puntos superior e inferior de las barras I del gráfico. Hay tres barras I en el gráfico.
  • Las columnas de certidumbre indican si los datos en ese punto son ciertos. El último dato es incierto, por lo que la línea que conduce a él es discontinua.

DataTable:

var data = new google.visualization.DataTable();
data.addColumn('string', 'Month'); // Implicit domain label col.
data.addColumn('number', 'Sales'); // Implicit series 1 data col.
data.addColumn({type:'number', role:'interval'});  // interval role col.
data.addColumn({type:'number', role:'interval'});  // interval role col.
data.addColumn({type:'string', role:'annotation'}); // annotation role col.
data.addColumn({type:'string', role:'annotationText'}); // annotationText col.
data.addColumn({type:'boolean',role:'certainty'}); // certainty col.
data.addRows([
    ['April',1000,  900, 1100,  'A','Stolen data', true],
    ['May',  1170, 1000, 1200,  'B','Coffee spill', true],
    ['June',  660,  550,  800,  'C','Wumpus attack', true],
    ['July', 1030, null, null, null, null, false]
]);

¿Qué roles están disponibles?

En la siguiente tabla, se enumeran todas las funciones que admite Google Charts. No todos los tipos de gráficos admiten todas las funciones. En la documentación de cada gráfico, se describirá qué funciones están disponibles y dónde se ubican. Las funciones se procesan de manera diferente para los distintos tipos de gráficos.

Rol Descripción Ejemplo
anotación

Es el texto que se mostrará en el gráfico cerca del dato asociado. El texto se muestra sin ninguna interacción del usuario. Las anotaciones y el texto de las anotaciones se pueden asignar tanto a datos como a categorías (etiquetas de ejes).

Existen dos estilos de anotaciones: punto (predeterminado), que dibuja el texto de la anotación cerca del punto especificado, y línea, que dibuja el texto de la anotación en una línea que divide el área del gráfico. Puedes especificar el estilo de línea si configuras esta opción de gráfico: annotations: {'column_id': {style: 'line'}}

Tipo de datos: cadena

Configuración predeterminada: String vacía

Datos:

label: 'Year', 'Sales', null, null, 'Expenses', null, null role: dominio, datos, anotaciones, anotaciones, modelos, datos, anotaciones, '2004'

La “A” y la “B” de este gráfico son anotaciones. Desplázate sobre la anotación para ver el texto correspondiente. Ten en cuenta que debes colocar el cursor sobre la anotación, no sobre el dato en el que se aplica, para mostrar el valor deAnnotationText.

Se aceptan valores nulos para las celdas de anotación y anotación de texto; sin embargo, si tienes un valor de anotación de texto, debes tener un valor de anotación asociado.

annotationText

Texto extendido que se mostrará cuando el usuario coloque el cursor sobre la anotación asociada. Las anotaciones y el texto de las anotaciones se pueden asignar tanto a datos como a categorías (etiquetas de ejes). Si tienes una columna deAnnotationText, también debes tener una. Por el contrario, el texto de información se muestra cuando el usuario coloca el cursor sobre el dato asociado del gráfico.

Tipo de datos: cadena

Configuración predeterminada: String vacía

certeza

Indica si un dato es cierto o no. La forma en que se muestra depende del tipo de gráfico; por ejemplo, se puede indicar con líneas punteadas o relleno a rayas.

En los gráficos de líneas y de áreas, el segmento entre dos datos es cierto solo si ambos datos son ciertos.

Tipo de datos: booleano, donde verdadero es cierto, falso es incierto.

Valor predeterminado: true

énfasis

Enfatiza los datos especificados del gráfico. Se muestra como una línea gruesa o un punto grande.

Para los gráficos de líneas y de áreas, el segmento entre dos puntos de datos se enfatiza solo si ambos datos están enfatizados.

Tipo de datos: booleano

Valor predeterminado: false

Datos:

label: 'Year',  'Sales',     null, 'Expenses',     null
 role: domain,   data,   emphasis,     data,   emphasis
       '2004',   1000,       true,      400,      false
       '2005',   1170,       true,      460,       true
       '2006',    660,      false,     1120,       true
       '2007',   1030,      false,      540,       true

En este gráfico, la serie "Ventas" tiene un segmento enfatizado, designado por la columna tres, las filas uno y dos. La serie 'Gastos' tiene dos segmentos enfatizados, designados por la quinta columna, las filas dos, tres y cuatro. Ten en cuenta que el énfasis requiere que se enfatice ambos puntos de límite.

intervalo

Indica un posible rango de datos para un punto específico. Por lo general, los intervalos se muestran como indicadores de rango de estilo de barra en I. Las columnas de intervalo son numéricas. Agrega columnas de intervalo en pares para marcar los valores bajo y alto de la barra. Los valores de intervalo deben agregarse en un valor creciente, de izquierda a derecha.

Tipo de datos: número

Configuración predeterminada: Sin intervalo

Datos:

label: 'Day',  'Stock value',   null,     null
 role: domain,     data,    interval, interval
        'Mon',       38,          20,       45
        'Tue',       55,          31,       66
        'Wed',       77,          50,       80
      'Thurs',       66,          50,       77

En este gráfico, los valores de intervalo definen una barra en I que rodea los puntos. Los valores aumentan de izquierda a derecha. Los intervalos más alto y más bajo alrededor de un punto marcan la parte superior e inferior de la barra.

Nota: Para obtener todos los detalles sobre los intervalos, consulta Intervalos.

alcance

Indica si un punto está dentro o fuera del alcance. Si un punto está fuera del alcance, se desenfatiza visualmente.

En el caso de los gráficos de líneas y de áreas, el segmento entre dos datos está dentro del alcance si alguno de los extremos están dentro del alcance.

Tipo de datos: booleano, donde verdadero significa dentro del alcance.

Valor predeterminado: true

Datos:

label: 'Year',   'Sales',    null,    'Expenses',      null
 role: domain,     data,    scope,        data,       scope
        '2004',    1000,    false,         400,        true
        '2005',    1170,    false,         460,       false
        '2006',     660,     true,        1120,       false
        '2007',    1030,     true,         540,       false

La primera columna de alcance se aplica a la columna de datos "Ventas" a su izquierda. El primer segmento se renderiza fuera del alcance porque ambos puntos de límite están fuera del alcance. La segunda columna de alcance se aplica a la columna de datos 'Gastos', a su izquierda. El primer segmento está marcado como dentro del alcance porque uno de sus puntos de límite está dentro del alcance; el resto de la línea está fuera del alcance porque todos los demás puntos están marcados como fuera del alcance.

estilo

Aplica diseño a determinadas propiedades de diferentes aspectos de tus datos. Esos valores son los siguientes:

  • color
  • opacity
  • stroke-width
  • stroke-color
  • stroke-opacity
  • fill-color
  • fill-opacity

Tipo de datos: String, en la que se pueden aplicar varios estilos con una sintaxis 'firstProperty: value; secondProperty: value', o bien establece estilos específicos para bar, line, y point especificando el tipo y uniendo las propiedades de estilo entre llaves (p.ej., bar { //properties go here }).

Valor predeterminado: null

Datos:

label: 'Character', 'Popularity',   'Style',
role:  domain,      data,   style,
'Hulk',             50,    'color: green',
'Captain America',  75,    'color: #0000cf;' +
                           'stroke-color: #cf001d',
'Wolverine',        90,    'opacity: 0.5;' +
                           'stroke-width: 5;' +
                           'stroke-color: #01a0ff;' +
                           'fill-color: #fff600',
'Iron Man',         60,    'color: #db9500;' +
                           'stroke-width: 10;' +
                           'stroke-color: #a30300',
'Spider Man',       100,   'bar {' +
                           'fill-color: #c8001d;' +
                           'stroke-width: 3;' +
                           'stroke-color: #1800c8}'

      

En este gráfico, cada barra tiene un estilo independiente de las demás mediante el rol de columna style. Se pueden establecer diseños para un punto, una línea o una barra específicamente (consulta la fila de Spider Man) o, en general, para aplicar los estilos a todos los puntos, líneas y barras, según el tipo de gráfico.

Nota: En otras secciones, se documentan más detalles sobre cómo personalizar el estilo de puntos, líneas y barras. Consulta también las opciones de cada tipo de gráfico en el que se pueden especificar estilos para otros tipos de entidades, como áreas, texto y cuadros.

Texto que se mostrará cuando el usuario coloque el cursor sobre el dato asociado a esta fila.

Nota: Esto no es compatible con la visualización del diagrama de burbujas. No se puede personalizar el contenido de la información sobre la herramienta HTML del diagrama de burbujas.

Tipo de datos: cadena

Valor predeterminado: Punto de datos

Datos:

label: 'Year',   'Sales',    null,   'Expenses',    null
 role: domain,     data,    tooltip,    data,      tooltip
        '2004',    1000, '1M$ sales,     400,    '$0.4M expenses
                           in 2004'                  in 2004'
        '2005',    1170, '1.17M$ sales,  460,    '$0.46M expenses
                            in 2005'                  in 2005'
        '2006',     660, '.66$ sales,   1120,     '$1.12M expenses
                            in 2006'                 in 2006'
        '2007',    1030, '1.03M$ sales,  540,    '$0.54M expenses
                            in 2007'                  in 2007'

Coloca el cursor sobre los datos para mostrar el texto del cuadro de información. Los datos de información se asignan a todos los puntos de ambas líneas, en las columnas 3 y 5.

Nota: Para obtener más detalles sobre cómo personalizar información sobre la herramienta, consulta Sugerencias sobre herramientas.

dominio

No es necesario que asignes esta función de forma explícita, a menos que diseñes un gráfico de varios dominios (que se muestra aquí); el formato básico de la tabla de datos permite que el motor de gráficos infiera qué columnas son columnas de dominio. Sin embargo, debes tener en cuenta qué columnas son columnas de dominio para saber qué otras pueden modificarla.

Las columnas de dominio especifican etiquetas a lo largo del eje principal del gráfico. A veces, se pueden usar varias columnas de dominio para admitir varias escalas dentro del mismo gráfico.

Tipo de datos: Por lo general, string, pero, en ocasiones, número o fecha

Datos:

label: '2009,  '2009,     '2009,   '2008,    '2008    '2008
      Quarter', Sales', Expenses', Quarter', Sales', Expenses'
role:  domain,   data,       data,   domain,   data,     data
      'Q1/09',   1000,        400,  'Q1/08',    800,      300
      'Q2/09',   1170,        460,  'Q2/08',    750,      400
      'Q3/09',    660,       1120,  'Q3/08',    700,      540
      'Q4/09',   1030,        540,  'Q4/08',    820,      620

En este ejemplo, se muestra un gráfico de varios dominios. Las primeras dos columnas de datos modifican el primer dominio ("Trimestre 2009") y las dos últimas columnas de datos modifican el segundo dominio ("Trimestre 2008"). Ambos dominios se superponen en las mismas escalas de eje.

datos

No es necesario que asignes esta función de forma explícita, ya que el formato básico de la tabla de datos permite que el motor de gráficos infiera qué columnas son columnas de dominio. Sin embargo, debes tener en cuenta qué columnas son de datos para saber qué otras pueden modificarlas.

Las columnas de roles de datos especifican los datos de la serie que se renderizarán en el gráfico. En la mayoría de los gráficos, una columna equivale a una serie, pero esto puede variar según el tipo de gráfico (por ejemplo, los diagramas de dispersión requieren dos columnas de datos para la primera serie y una adicional para cada serie adicional; los gráficos de velas requieren cuatro columnas de datos para cada serie).

Tipo de datos: número

 

Jerarquía y asociatividad de los roles

En el siguiente diagrama, se muestra qué columnas de roles se pueden aplicar a qué otras columnas de roles. Todas las columnas, excepto las de dominio, se aplican al vecino izquierdo más cercano al que se puede aplicar.

Entonces, por ejemplo, una columna de scope se aplica a la columna data más cercana a la izquierda; una columna annotationText a la izquierda; una anotación se aplicará a la columna de datos o dominio más cercana a su izquierda.

Cómo asignar una función

Los roles se asignan como una propiedad de la columna en un objeto DataTable. Existen varias formas de crear una columna de función, pero estas son las más comunes:

Las dos primeras técnicas dibujan el siguiente gráfico:

Método DataTable.addColumn

En el siguiente ejemplo, se crea un gráfico de barras con un marcador de intervalo en tres de las barras. Los marcadores de intervalo se especifican en la tercera y cuarta columna mediante el método DataTable.addColumn().

       var data = new google.visualization.DataTable();
       data.addColumn('string', 'Month'); // Implicit domain column.
       data.addColumn('number', 'Sales'); // Implicit data column.
       data.addColumn({type:'number', role:'interval'});
       data.addColumn({type:'number', role:'interval'});
       data.addColumn('number', 'Expenses');
       data.addRows([
         ['April',1000,  900, 1100,   400],
         ['May',  1170, 1000, 1200,   460],
         ['June',  660,  550,  800,  1120],
         ['July', 1030,    ,     ,    540]
       ]);

       var chart = new google.visualization.BarChart(
                document.getElementById('visualization'));
       chart.draw(data,
          {width: 800, height: 600, title: 'Company Performance'});

Notación literal de JavaScript

En literal de JSON, debes especificar una propiedad p de la columna con el valor "role":"role-type". En el siguiente ejemplo, se muestra cómo especificar funciones con la notación literal de JavaScript. Esto solo se puede hacer durante la creación de la tabla.

{"cols":[
  {"id":"","label":"Month","pattern":"","type":"string"},
  {"id":"","label":"Sales","pattern":"","type":"number"},
  {"id":"","label":"","pattern":"","type":"number","p":{"role":"interval"}},
  {"id":"","label":"","pattern":"","type":"number","p":{"role":"interval"}},
  {"id":"","label":"Expenses","pattern":"","type":"number"}],
"rows":[
  {"c":[
    {"v":"April","f":null},
    {"v":1000,"f":null},
    {"v":900,"f":null},
    {"v":1100,"f":null},
    {"v":400,"f":null}]},
  {"c":[
    {"v":"May","f":null},
    {"v":1170,"f":null},
    {"v":1000,"f":null},
    {"v":1200,"f":null},
    {"v":460,"f":null}]},
  {"c":[{"v":"June","f":null},
    {"v":660,"f":null},
    {"v":550,"f":null},
    {"v":800,"f":null},
    {"v":1120,"f":null}]},
  {"c":[
    {"v":"July","f":null},
    {"v":1030,"f":null},
    {"v":null,"f":null},
    {"v":null,"f":null},
    {"v":540,"f":null}]}],
"p":null
}

Método DataView.setColumns

Cuando creas una vista, puedes establecer de forma explícita el rol de una columna. Esto es útil cuando se crea una nueva columna calculada. Consulta DataView.setColumns() para obtener más información.