Controles y paneles de control

En esta página, verás cómo combinar varios gráficos en paneles y cómo controlar a los usuarios qué datos muestran.

Descripción general

Los paneles son una forma simple de organizar y administrar varios gráficos que comparten los mismos datos subyacentes. Si usas las API que se describen en esta página, puedes evitar la carga de tener que conectar y coordinar todos los gráficos que forman parte de un panel.

Los paneles se definen mediante clases google.visualization.Dashboard. Las instancias de Dashboard reciben una DataTable que contiene los datos para visualizar y ocuparse de dibujar y distribuir los datos en todos los gráficos que forman parte del panel.

Los controles son widgets de interfaz de usuario (como selectores de categorías, controles deslizantes de rangos y autocompletados...) con los que interactúas para controlar los datos que administra un panel y los gráficos que forman parte de él.

Los controles se definen con las clases google.visualization.ControlWrapper. Puedes agregar instancias de ControlWrapper a un panel, en el que se comportan como tuberías y válvulas en un sistema de plomería. Recopilan las entradas de los usuarios y usan la información para decidir qué datos que administra el panel deben estar disponibles para los gráficos que forman parte de ellos.

Consulta el siguiente ejemplo, en el que un selector de categorías y un control deslizante de rango se usan para controlar los datos que se ven en un gráfico circular.

Nota: El panel es interactivo. Prueba operar los controles y observa el cambio del gráfico en tiempo real.

Usa controles y paneles

Estos son los pasos clave para crear un panel y para incorporarlo a tu página. Encontrarás un fragmento de código que demuestra todos estos pasos a continuación, seguido de información detallada sobre cada paso.

  1. Crea un esqueleto HTML para tu panel. Tu página debe tener tantos elementos HTML como sea necesario para incluir a todos los miembros de un panel. Esto incluye el panel en sí y todos los controles y gráficos que forman parte de él. Por lo general, usarás un elemento <div> para cada uno de ellos.
  2. Carga tus bibliotecas. Un panel solo requiere que se incluyan dos cargas o se incluyan en la página: la API de Google AJAX y el paquete de visualización de Google controls.
  3. Prepare sus datos. Debes preparar los datos para su visualización; esto significa especificar los datos tú mismo en el código o consultar un sitio remoto para obtener datos.
  4. Crea una instancia de panel. Para crear una instancia de tu panel, llama al constructor y pasa una referencia al elemento <div> que lo contendrá.
  5. Crea todas las instancias de controles y gráficos que necesites. Crea instancias de google.visualization.ChartWrapper y google.visualization.ControlWrapper para describir cada gráfico y controlar que administra el panel.
  6. Establece dependencias. Llama a bind() en tu panel y pasa las instancias de control y de gráficos para que el panel sepa qué administrar. Una vez que el control y el gráfico están vinculados, el panel actualiza el gráfico para que coincida con las restricciones que el control aplica sobre los datos.
  7. Dibuja tu panel. Llama a draw() en tu panel y pasa tus datos para dibujar todo el panel de la página.
  8. Cambios programáticos después del sorteo. De manera opcional, después del dibujo inicial, puedes controlar de manera programática los controles que forman parte del panel y hacer que el panel actualice los gráficos en respuesta a eso.

Este es un ejemplo simple de una página que crea un panel simple con un control deslizante de rango que controla un gráfico circular. El panel resultante se muestra debajo del fragmento.

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

      // Load the Visualization API and the controls package.
      google.charts.load('current', {'packages':['corechart', 'controls']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawDashboard);

      // Callback that creates and populates a data table,
      // instantiates a dashboard, a range slider and a pie chart,
      // passes in the data and draws it.
      function drawDashboard() {

        // Create our data table.
        var data = google.visualization.arrayToDataTable([
          ['Name', 'Donuts eaten'],
          ['Michael' , 5],
          ['Elisa', 7],
          ['Robert', 3],
          ['John', 2],
          ['Jessica', 6],
          ['Aaron', 1],
          ['Margareth', 8]
        ]);

        // Create a dashboard.
        var dashboard = new google.visualization.Dashboard(
            document.getElementById('dashboard_div'));

        // Create a range slider, passing some options
        var donutRangeSlider = new google.visualization.ControlWrapper({
          'controlType': 'NumberRangeFilter',
          'containerId': 'filter_div',
          'options': {
            'filterColumnLabel': 'Donuts eaten'
          }
        });

        // Create a pie chart, passing some options
        var pieChart = new google.visualization.ChartWrapper({
          'chartType': 'PieChart',
          'containerId': 'chart_div',
          'options': {
            'width': 300,
            'height': 300,
            'pieSliceText': 'value',
            'legend': 'right'
          }
        });

        // Establish dependencies, declaring that 'filter' drives 'pieChart',
        // so that the pie chart will only display entries that are let through
        // given the chosen slider range.
        dashboard.bind(donutRangeSlider, pieChart);

        // Draw the dashboard.
        dashboard.draw(data);
      }
    </script>
  </head>

  <body>
    <!--Div that will hold the dashboard-->
    <div id="dashboard_div">
      <!--Divs that will hold each control and chart-->
      <div id="filter_div"></div>
      <div id="chart_div"></div>
    </div>
  </body>
</html>

Este es el panel que crea este código.

1. Crea un esqueleto HTML para tu panel

Tu página debe tener tantos elementos HTML (por lo general, <div>) para contener el panel y todos los controles y gráficos que forman parte de él. Cuando creas instancias del panel, el control y el gráfico de instancias, debes pasar una referencia a su elemento, por lo que debes asignar un ID a cada elemento HTML.

    <!--Div that will hold the dashboard-->
    <div id="dashboard_div">
      <!--Divs that will hold each control and chart-->
      <div id="filter_div"></div>
      <div id="chart_div"></div>
    </div>

Puede colocar cada elemento HTML de la forma que desee que tenga su panel.

2. Carga tus bibliotecas

Un panel solo requiere que se incluyan dos cargas o se incluyan en la página: la API de AJAX de Google y el paquete de visualización de Google controls. La API (en particular, google.visualization.ChartWrapper) identifica de forma automática los otros paquetes necesarios (por ejemplo, gauge si usas un gráfico de Gauge) y los carga sobre la marcha sin que tengas que intervenir.

Debes usar google.charts.load() para recuperar la biblioteca de control.

<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">

  // Load the Visualization API and the controls package.
  // Packages for all the other charts you need will be loaded
  // automatically by the system.
  google.charts.load('current', {'packages':['corechart', 'controls']});

  // Set a callback to run when the Google Visualization API is loaded.
  google.charts.setOnLoadCallback(drawDashboard);

  function drawDashboard() {
    // Everything is loaded. Assemble your dashboard...
  }
</script>

3. Prepara tus datos

Cuando se haya cargado la API de visualización, google.charts.setOnLoadCallback() llamará a tu función del controlador, por lo que sabrás que todos los métodos y las clases de ayuda requeridos estarán listos para que comiences a preparar tus datos.

Los paneles aceptan datos en una DataTable, del mismo modo que los gráficos.

4. Crear una instancia de panel

Después de crear tus datos, puedes crear una instancia de tu objeto de panel. Un constructor de panel toma un parámetro: una referencia al elemento DOM en el que se dibuja el panel.

  var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));

Los paneles de control se exponen como una clase de JavaScript. Después de crear una instancia de tu panel, puedes seguir algunos pasos opcionales, como agregar objetos de escucha de eventos (por ejemplo, para recibir una notificación una vez que el panel esté "listo"). Los paneles manejan los eventos de la misma manera que los gráficos, por lo que debes consultar Cómo manejar los eventos de visualización o Cómo mostrar los errores de manera correcta en la sección de gráficos para obtener más información.

5. Cree instancias de control y de gráficos

Define todas las instancias que necesites para cada control y gráfico que formarán parte del panel. Usa google.visualization.ChartWrapper y google.visualization.ControlWrapper para definir gráficos y controles respectivamente.

  // Create a range slider, passing some options
  var donutRangeSlider = new google.visualization.ControlWrapper({
    'controlType': 'NumberRangeFilter',
    'containerId': 'filter_div',
    'options': {
      'filterColumnLabel': 'Donuts eaten'
    }
  });

  // Create a pie chart, passing some options
  var pieChart = new google.visualization.ChartWrapper({
    'chartType': 'PieChart',
    'containerId': 'chart_div',
    'options': {
      'width': 300,
      'height': 300,
      'pieSliceText': 'label'
    }
  });

Cuando crees instancias ChartWrapper y ControlWrapper, no especifiques los parámetros dataTable ni dataSourceUrl. El panel se encarga de proporcionar a cada uno los datos adecuados. Sin embargo, asegúrate de especificar los parámetros obligatorios: chartType y containerId para gráficos, controlType y containerId para controles.

Algunas sugerencias sobre la configuración de controles y gráficos:

  • Debes otorgar a todos los controles un filterColumnIndex (o un filterColumnLabel) para especificar en qué columna de tu google.visualization.DataTable opera el control (en el ejemplo anterior, el control opera en la columna etiquetada Donas comen).
  • Usa la opción de configuración state en los controles para inicializarlos con un estado explícito cuando se dibujen por primera vez. Por ejemplo, usa esta configuración para corregir las posiciones iniciales de las miniaturas de un control deslizante de rango.

      var donutRangeSlider = new google.visualization.ControlWrapper({
        'controlType': 'NumberRangeFilter',
        'containerId': 'filter_div',
        'options': {
          'filterColumnLabel': 'Donuts eaten',
          'minValue': 1,
          'maxValue': 10
        },
        // Explicitly positions the thumbs at position 3 and 8,
        // out of the possible range of 1 to 10.
        'state': {'lowValue': 3, 'highValue': 8}
      });
    
        
  • Todos los gráficos que forman parte de un panel comparten la misma tabla de datos subyacente que preparaste en el paso Prepara tus datos. Sin embargo, a menudo, los gráficos requieren una disposición específica de columnas para mostrarse. Por ejemplo, un gráfico circular requiere una columna de strings para la etiqueta seguida de una columna numérica para el valor.

    Usa la opción view mientras configuras cada instancia de ChartWrapper a fin de declarar qué columnas son relevantes para el gráfico, como se muestra en el siguiente ejemplo.

      var data = google.visualization.arrayToDataTable([
        ['Name', 'Gender', 'Age', 'Donuts eaten'],
        ['Michael' , 'Male', 12, 5],
        ['Elisa', 'Female', 20, 7],
        ['Robert', 'Male', 7, 3],
        ['John', 'Male', 54, 2],
        ['Jessica', 'Female', 22, 6],
        ['Aaron', 'Male', 3, 1],
        ['Margareth', 'Female', 42, 8]
      ]);
    
      var pieChart = new google.visualization.ChartWrapper({
        'chartType': 'PieChart',
        'containerId': 'chart_div',
        'options': {
          'width': 300,
          'height': 300,
          'title': 'Donuts eaten per person'
        },
        // The pie chart will use the columns 'Name' and 'Donuts eaten'
        // out of all the available ones.
        'view': {'columns': [0, 3]}
      });
    
      // The rest of dashboard configuration follows
      // ...

6. Establecer dependencias

Una vez que crees una instancia del panel y todos los controles y gráficos que formarán parte de él, usa el método bind() para indicarle al panel sobre las dependencias que existen entre los controles y los gráficos.

Una vez que el control y el gráfico están vinculados, el panel actualiza el gráfico para que coincida con las restricciones que el control aplica sobre los datos. En el panel de ejemplo que compilas, el control deslizante de rango y el gráfico circular están vinculados, por lo que cada vez que interactúas con el primero, este último se actualiza para mostrar solo los datos que coinciden con el rango seleccionado.

  // 'pieChart' will update whenever you interact with 'donutRangeSlider'
  // to match the selected range.
  dashboard.bind(donutRangeSlider, pieChart);

Puedes vincular controles y gráficos en muchas configuraciones diferentes: uno a uno, uno a varios, varios a uno y varios a varios. Cuando hay varios controles vinculados a un gráfico, el panel actualiza el gráfico para que coincida con las restricciones combinadas que aplican todos los controles vinculados. Al mismo tiempo, un control puede controlar varios gráficos de manera simultánea. Para especificar varias vinculaciones al mismo tiempo, pasa arreglos al método bind(), en lugar de instancias individuales. También puedes encadenar varias llamadas a bind(). Aquí tiene algunos ejemplos.

  // Many-to-one binding where 'ageSelector' and 'salarySelector' concurrently
  // participate in selecting which data 'ageVsSalaryScatterPlot' visualizes.
  dashboard.bind([agePicker, salaryPicker], ageVsSalaryScatterPlot);

  // One-to-many binding where 'ageSelector' drives two charts.
  dashboard.bind(agePicker, [ageVsSalaryScatterPlot, ageBarChart]);

  // bind() chaining where each control drives its own chart.
  dashboard.bind(agePicker, ageBarChart).bind(salaryRangePicker, salaryPieChart);

Para usos avanzados, también puedes vincular controles a otros controles a fin de establecer cadenas de dependencias .

  dashboard.bind(countryPicker, regionPicker).bind(regionPicker, cityPicker);

7. Dibuja tu panel

Llama al método draw() en la instancia del panel para renderizar todo el panel. El método draw() toma solo un parámetro: DataTable (o DataView) que alimenta el panel.

Debes llamar a draw() cada vez que cambies la composición del panel (por ejemplo, cuando agregues controles o gráficos nuevos) o cambies el DataTable general que la impulsa.

La instancia del panel activa un evento ready cada vez que draw() termina de dibujar todos los controles y los gráficos que forman parte de él. Se activa un evento error si no se puede dibujar alguno de los controles o gráficos administrados. Para obtener más información sobre cómo controlar eventos, consulta Cómo manejar eventos.

Nota: Debes escuchar el evento ready antes de intentar cambiar la composición del panel o volver a dibujarla.

8. Cambios programáticos después del sorteo

Una vez que el panel complete el draw() inicial, estará activo y responderá automáticamente a cualquier acción que realices en él (como cambiar el rango seleccionado de un control deslizante de control que forma parte del panel).

Si necesitas modificar de manera programática el estado del panel, puedes hacerlo directamente en las instancias ControlWrapper y ChartWrapper que forman parte de él. La regla general es realizar cualquier cambio que necesites directamente en la instancia específica ControlWrapper (o ChartWrapper): por ejemplo, cambiar una opción o estado de control mediante setOption() y setState() respectivamente, y luego llamar a su método draw(). El panel se actualizará para que coincida con los cambios solicitados.

En el siguiente ejemplo, se muestra ese caso.

Página web completa
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart', 'controls']});
      google.charts.setOnLoadCallback(drawStuff);

      function drawStuff() {

        var dashboard = new google.visualization.Dashboard(
          document.getElementById('programmatic_dashboard_div'));

        // We omit "var" so that programmaticSlider is visible to changeRange.
        var programmaticSlider = new google.visualization.ControlWrapper({
          'controlType': 'NumberRangeFilter',
          'containerId': 'programmatic_control_div',
          'options': {
            'filterColumnLabel': 'Donuts eaten',
            'ui': {'labelStacking': 'vertical'}
          }
        });

        var programmaticChart  = new google.visualization.ChartWrapper({
          'chartType': 'PieChart',
          'containerId': 'programmatic_chart_div',
          'options': {
            'width': 300,
            'height': 300,
            'legend': 'none',
            'chartArea': {'left': 15, 'top': 15, 'right': 0, 'bottom': 0},
            'pieSliceText': 'value'
          }
        });

        var data = google.visualization.arrayToDataTable([
          ['Name', 'Donuts eaten'],
          ['Michael' , 5],
          ['Elisa', 7],
          ['Robert', 3],
          ['John', 2],
          ['Jessica', 6],
          ['Aaron', 1],
          ['Margareth', 8]
        ]);

        dashboard.bind(programmaticSlider, programmaticChart);
        dashboard.draw(data);

        changeRange = function() {
          programmaticSlider.setState({'lowValue': 2, 'highValue': 5});
          programmaticSlider.draw();
        };

        changeOptions = function() {
          programmaticChart.setOption('is3D', true);
          programmaticChart.draw();
        };
      }

    </script>
  </head>
  <body>
    <div id="programmatic_dashboard_div" style="border: 1px solid #ccc">
      <table class="columns">
        <tr>
          <td>
            <div id="programmatic_control_div" style="padding-left: 2em; min-width: 250px"></div>
            <div>
              <button style="margin: 1em 1em 1em 2em" onclick="changeRange();">
                Select range [2, 5]
              </button><br />
              <button style="margin: 1em 1em 1em 2em" onclick="changeOptions();">
                Make the pie chart 3D
              </button>
            </div>
          </td>
          <td>
            <div id="programmatic_chart_div"></div>
          </td>
        </tr>
      </table>
    </div>
  </body>
</html>

Referencia de la API

En esta sección, se enumeran los objetos expuestos por la API de Controls y Paneles, y los métodos estándar expuestos por todos los controles.

Panel de control

Representa una colección de gráficos y controles de colaboración que comparten los mismos datos subyacentes.

Constructor

Dashboard(containerRef)
containerRef
Es una referencia a un elemento de contenedor válido en la página que contendrá el contenido del panel.

Métodos

El panel expone los siguientes métodos:

Método Tipo de datos que se muestra Descripción
bind(controls, charts) google.visualization.Dashboard.

Vincula uno o más controles a uno o más participantes del panel (ya sean gráficos o controles diferentes) para que todos los últimos vuelvan a dibujarse cuando alguno de los primeros recopile una interacción programática o de usuario que afecte los datos que administra el panel. Muestra la instancia del panel para encadenar varias llamadas a bind().

  • controles: pueden ser una sola o una matriz de instancias de google.visualization.ControlWrapper que definen los controles para vincular.
  • gráficos: una instancia única o un arreglo de instancias de google.visualization.ChartWrapper que definen los gráficos que controlarán los controles.
draw(dataTable) Ninguno

Dibuja el panel.

  • dataTable: Cualquiera de los siguientes: un objeto DataTable; un objeto DataView; una representación JSON de un DataTable; o un arreglo que sigue la sintaxis de google.visualization.arrayToDataTable().
getSelection() Arreglo de objetos

Muestra un arreglo de las entidades visuales seleccionadas de los gráficos del panel. Cuando se llama al método getSelection(), en el panel, se muestra un agregado de todas las selecciones realizadas en todos los gráficos que contiene, lo que permite el uso de una sola referencia cuando se trabaja con selecciones de gráficos.

Nota: Los objetos de escucha de eventos del evento seleccionado aún deben adjuntarse a cada gráfico que deseas escuchar.

Descripción extendida

Eventos

El objeto Panel muestra los siguientes eventos. Ten en cuenta que debes llamar a Dashboard.draw() antes de que se muestren los eventos.

Nombre Descripción Propiedades
error Se activa cuando se produce un error cuando se intenta renderizar el panel. Es posible que no se hayan procesado uno o más de los controles y gráficos que forman parte del panel. id, mensaje
ready

Se completó el dibujo del panel y está listo para aceptar cambios. Todos los controles y gráficos que forman parte del panel están listos para la llamada de método externo y la interacción del usuario. Si deseas cambiar el panel (o los datos que se muestran) después de dibujarlo, debes configurar un objeto de escucha para este evento antes de llamar al método draw y, luego, aplicar los cambios solo después de que se active el evento.

El evento ready también se activará:

  • después de completar una actualización del panel activada por un usuario o una interacción programática con uno de los controles,
  • después de una llamada programática al método draw() de cualquier parte del gráfico del panel.
Ninguno

Wrapper de control

Un objeto ControlWrapper es un wrapper alrededor de una representación JSON de una instancia de control configurada. La clase expone métodos convenientes para definir un control de panel, dibujarlo y cambiar su estado de manera programática.

Constructor

ControlWrapper(opt_spec)
opt_spec [opt_spec]
(opcional): Es un objeto JSON que define el control o una versión serializada de ese objeto. Las propiedades admitidas del objeto JSON se muestran en la siguiente tabla. Si no se especifica, debes establecer todas las propiedades apropiadas con los métodos set... expuestos por ControlWrapper.
Propiedad Tipo Obligatoria Predeterminado Descripción
Tipo de control String Obligatoria ninguno El nombre de clase del control. El nombre del paquete google.visualization se puede omitir para los controles de Google. Ejemplos: CategoryFilter, NumberRangeFilter.
ID de contenedor String Obligatoria ninguno El ID del elemento DOM en tu página que alojará el control.
opciones Objeto Opcional ninguno Un objeto que describe las opciones para el control. Puedes usar la notación literal de JavaScript o proporcionar un controlador para el objeto. Ejemplo: "options": {"filterColumnLabel": "Age", "minValue": 10, "maxValue": 80}
state Objeto Opcional ninguno Un objeto que describe el estado del control. El estado recopila todas las variables que el usuario que opera el control puede afectar. Por ejemplo, un estado de control deslizante de rango se puede describir en términos de las posiciones que ocupan el pulgar bajo y alto del control deslizante. Puedes usar la notación literal de JavaScript o proporcionar un controlador para el objeto.Ejemplo: "state": {"lowValue": 20, "highValue": 50}

Métodos

ControlWrapper expone los siguientes métodos adicionales:

Método Tipo de datos que se muestra Descripción
draw() Ninguno

Dibuja el control. Normalmente, el panel que mantiene el control se encarga de dibujarlo. Debes llamar a draw() para forzar los rediseños programáticos del control después de cambiar cualquiera de sus otras opciones de configuración, como las opciones o el estado.

toJSON() String Muestra una versión de string de la representación JSON del control.
clone() ControladorDeControl Muestra una copia profunda del wrapper de control.
getControlType() String El nombre de clase del control. Si es un control de Google, el nombre no será calificado con google.visualization. Entonces, por ejemplo, si este fuera un control CategoryFilter, mostraría "CategoryFilter" en lugar de "google.visualization.CategoryFilter".
getControlName() String Muestra el nombre del control que asignó setControlName().
getControl() Referencia de objetos de control Muestra una referencia al control creado por este ControlWrapper. El resultado será nulo hasta que hayas llamado a draw() en el objeto ControlWrapper (o en el panel que lo contiene) y arrojará un evento listo. El objeto que se muestra solo expone un método: resetControl(), que restablece el estado de control con el que se inicializó (como restablecer un elemento de formulario HTML).
getContainerId() String El ID del elemento del contenedor DOM del control.
getOption(key, opt_default_val) De cualquier tipo

Devuelve el valor de la opción de control especificada.

  • key: el nombre de la opción para recuperar. Puede ser un nombre calificado, como 'vAxis.title'.
  • opt_default_value [opcional]: Si el valor especificado es indefinido o nulo, se muestra este valor.
getOptions() Objeto Muestra el objeto de opciones para este control.
getState() Objeto Muestra el estado de control.
setControlType(type) Ninguno Establece el tipo de control. Pasa el nombre de clase del control para crear una instancia. Si se trata de un control de Google, no lo califiques con google.visualization. Por ejemplo, para un control deslizante de rango sobre una columna numérica, pasa "NumberRangeFilter".
setControlName(name) Ninguno Establece un nombre arbitrario para el control. Esto no se muestra en ningún lugar del control, pero es solo para tu referencia.
setContainerId(id) Ninguno Establece el ID del elemento DOM que lo contiene.
setOption(key, value) Ninguno Configura un valor de opción de control único, en el que key es el nombre de la opción y value es el valor. Para anular la configuración de una opción, pasa un valor nulo para el valor. Ten en cuenta que key puede ser un nombre calificado, como 'vAxis.title'.
setOptions(options_obj) Ninguno Establece un objeto de opciones completas para un control.
setState(state_obj) Ninguno Establece el estado de control. El estado recopila todas las variables que el usuario que opera puede controlar. Por ejemplo, un estado de control deslizante de rango se puede describir en términos de las posiciones que ocupan el pulgar bajo y alto del control deslizante.

Eventos

El objeto ControlWrapper muestra los siguientes eventos. Ten en cuenta que debes llamar a ControlWrapper.draw() (o dibujar el panel de control que contenga el control) antes de que se lancen eventos.

Nombre Descripción Propiedades
error Se activa cuando se produce un error cuando se intenta renderizar el control. id, mensaje
ready El control está listo para aceptar la interacción del usuario y las llamadas a métodos externos. Si deseas interactuar con el control 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 y llamarlo solo después de que se active el evento. Como alternativa, puedes escuchar un evento ready en el panel que contenga los métodos de control y llamada solo después de que se active el evento. Ninguno
statechange Se activa cuando el usuario interactúa con el control, lo que afecta su estado. Por ejemplo, un evento statechange se activará cada vez que muevas el pulgar de un control deslizante de rango. Para recuperar un estado de control actualizado después de que se active el evento, llama a ControlWrapper.getState(). Ninguno

Wrapper de gráfico

Consulta la documentación de google.visualization.ChartWrapper en la sección de referencia de la API de visualizaciones.

Las siguientes notas se aplican cuando se usa un ChartWrapper como parte de un panel:

  • No configures de forma explícita los atributos dataTable, query, dataSourceUrl y refreshInterval. El panel que contiene el gráfico se encarga de proporcionar los datos que necesita.
  • Configura su atributo view a fin de declarar qué columnas, de todas las que están en dataTable proporcionadas al panel, son relevantes para el gráfico, como se muestra en Crea instancias de control y gráfico.

Los filtros son elementos gráficos que las personas pueden usar para seleccionar de forma interactiva qué datos se muestran en tu gráfico. En esta sección, se describen los filtros de Google Chart: CategoryFilter, ChartRangeFilter, DateRangeFilter, NumberRangeFilter y StringFilter.

Puedes usar cualquiera de ellas como parámetro para ControlWrapper.setControlType().

Nota: En las opciones de descripción, la notación de puntos se usa para describir los atributos de objetos anidados. Por ejemplo, una opción llamada 'ui.label' debe declararse en un objeto de opciones como var options = {"ui": {"label": "someLabelValue"} };.

Filtro de categoría

Un selector para elegir uno o más entre un conjunto de valores definidos.

Estado

Nombre Tipo Predeterminado Descripción
valores seleccionados Arreglo de objetos o tipos primitivos ninguno El conjunto de valores seleccionados actualmente. Los valores seleccionados deben ser un conjunto de los valores seleccionables generales definidos por la opción values (se ignorará cualquier valor irrelevante). Si el elemento CategoryFilter no permite la opción múltiple, solo se conserva el primer valor del arreglo.

Opciones

Nombre Tipo Predeterminado Descripción
FiltrarColumnaIndex número ninguno La columna de la tabla de datos en la que debe operar el filtro. Es obligatorio proporcionar esta opción o filterColumnLabel. Si ambas están presentes, esta opción tiene prioridad.
filterColumnLabel. string ninguno La etiqueta de la columna en la que debe operar el filtro. Es obligatorio proporcionar esta opción o filterColumnIndex. Si ambos están presentes, filterColumnIndex tiene prioridad.
valores Array automático Lista de valores para elegir. Si se usa un arreglo de objetos, deben tener una representación de toString() adecuada para que se muestre al usuario. Si el valor es nulo o no está definido, la lista de valores se calculará automáticamente a partir de los valores presentes en la columna DataTable en la que opera este control.
useFormattedValue boolean falso Cuando se propaga de forma automática la lista de valores seleccionables desde la columna DataTable en la que opera este filtro, ya sea para usar los valores de celda reales o sus valores con formato.
ui Objeto null Un objeto con miembros para configurar varios aspectos de la IU del control. Para especificar las propiedades de este objeto, puedes usar la notación literal de objetos, como se muestra aquí:
{label: 'Metric', labelSeparator: ':'}
IU.subtítulos string "Elige un valor..." La leyenda que se mostrará dentro del widget del selector de valor cuando no se seleccione ningún elemento.
ui.sortValues boolean true Indica si los valores para elegir deben ordenarse.
ui.selectedValuesLayout string "a un lado" Cómo mostrar los valores seleccionados cuando se permite la selección múltiple Los valores posibles son los siguientes:
  • 'aside': los valores seleccionados se mostrarán en una sola línea de texto junto al widget del selector de valores.
  • 'below': los valores seleccionados se mostrarán en una sola línea de texto debajo del widget,
  • 'belowWrapping': Similar a below, pero las entradas que no caben en el selector se unirán a una nueva línea.
  • 'belowStacked': los valores seleccionados se mostrarán en una columna debajo del widget.
ui.allowNone boolean true Indica si el usuario tiene permiso para no elegir ningún valor. Si es false, el usuario debe elegir al menos un valor de los disponibles. Durante la inicialización del control, si la opción se establece en false y no se otorga ningún estado selectedValues, el primer valor de los disponibles estará automáticamente seleccionado.
ui.allowMultiple boolean true Si se pueden seleccionar varios valores, en lugar de solo uno
ui.allowTyping boolean true Si el usuario puede escribir en un campo de texto para acotar la lista de opciones posibles (a través de un autocompletado) o no.
IU string automático La etiqueta que se mostrará junto al selector de categorías. Si no se especifica, se usará la etiqueta de la columna en la que opera el control.
ui.labelSeparador string ninguno Una string separada que se agrega a la etiqueta para separar visualmente la etiqueta del selector de categorías.
ui.labelStacking string "horizontal" Indica si la etiqueta debe mostrarse encima (apilamiento vertical) o junto (apilamiento horizontal) al selector de categoría. Usa 'vertical' o 'horizontal'.
ui.cssClass string "google-visualization-controls-categoryfilter" La clase CSS que se asignará al control para un estilo personalizado.

ChartRangeFilter

Un control deslizante con dos dedos superpuestos sobre un gráfico para seleccionar un rango de valores en el eje continuo del gráfico

Estado

Nombre Tipo Predeterminado Descripción
rango.inicio número, fecha, fecha y hora Valor de inicio del rango El inicio del rango seleccionado, inclusive
rango.end número, fecha, fecha y hora Valor final del rango Fin del rango seleccionado, inclusive

Opciones

Nombre Tipo Predeterminado Descripción
FiltrarColumnaIndex número ninguno El índice de la columna en la tabla de datos en la que opera el filtro. Es obligatorio proporcionar esta opción o filterColumnLabel. Si ambos están presentes, esta opción tiene prioridad.

Ten en cuenta que solo tiene sentido especificar un índice de una columna de domain que se incluye en el eje continuo del gráfico dibujado dentro del control.

filterColumnLabel. string ninguno La etiqueta de la columna de la tabla de datos en la que opera el filtro. Es obligatorio proporcionar esta opción o filterColumnIndex. Si ambos están presentes, filterColumnIndex tiene prioridad.

Ten en cuenta que solo tiene sentido especificar una etiqueta de una columna de domain que se incluye en el eje continuo del gráfico dibujado dentro del control.

ui Objeto null Un objeto con miembros para configurar varios aspectos de la IU del control. Para especificar las propiedades de este objeto, puedes usar la notación literal de objetos, como se muestra aquí:
{chartType: 'ScatterChart', chartOptions: {pointSize: 10}}
ui.chartType string Gráfico combinado El tipo de gráfico dibujado dentro del control.
Puede ser una de estas opciones: "AreaChart", "LineChart", "ComboChart" o "ScatterChart".
ui.chartOptions Objeto
{
 'enableInteractivity': false,
 'chartArea': {'height': '100%'},
 'legend': {'position': 'none'},
 'hAxis': {'textPosition': 'in'},
 'vAxis': {
  'textPosition': 'none',
  'gridlines': {'color': 'none'}
 }
}
      
Las opciones de configuración del gráfico dibujadas dentro del control. Permite el mismo nivel de configuración que cualquier gráfico del panel y cumple con el mismo formato que acepta ChartWrapper.setOptions().

Puedes especificar opciones adicionales o anular las predeterminadas (sin embargo, ten en cuenta que los valores predeterminados se eligieron cuidadosamente para lograr una apariencia óptima).

ui.chartView Objeto o string (objeto serializado) null Es la especificación de la vista que se aplica a la tabla de datos que se usa para dibujar el gráfico dentro del control. Permite el mismo nivel de configuración que cualquier gráfico del panel y cumple con el mismo formato que acepta ChartWrapper.setView(). Si no se especifica, se utiliza la tabla de datos para dibujar el gráfico.

Ten en cuenta que el eje horizontal del gráfico dibujado debe ser continuo, por lo que debes especificar ui.chartView según corresponda.

ui.minRangeSize número Diferencia en el valor de los datos interpretada como 1 píxel El tamaño de rango seleccionable mínimo (range.end - range.start), especificado en unidades de valor de datos. Para un eje numérico, es un número (no necesariamente un número entero). Para un eje de fecha, hora o fecha y hora, es un número entero que especifica la diferencia en milisegundos.
ui.snapToData boolean falso Si es verdadero, los pulgares del rango se ajustan a los datos más cercanos. En este caso, los extremos del rango que muestra getState() son necesariamente valores en la tabla de datos.

Eventos

Incorporaciones a eventos ControlWrapper:

Nombre Descripción Propiedades
statechange Lo mismo que se documenta para cada ControlWrapper de control, solo tiene una propiedad booleana adicional, inProgress, que especifica si se está cambiando el estado (ya sea el marcador de posición o el rango). en curso

Filtro de período

Un control deslizante de valor doble para seleccionar períodos

Intenta mover el control deslizante para cambiar las filas que se muestran en la siguiente tabla.

Estado

Nombre Tipo Predeterminado Descripción
valor bajo número ninguno La extensión inferior del rango seleccionado, inclusive.
Valor alto número ninguno La extensión más alta del rango seleccionado, inclusive.
Nivel mínimo de clics boolean ninguno Establece si el pulgar inferior del control deslizante está bloqueado en el rango mínimo permitido. Si se configura, anula lowValue.
ThumbAltoMáximo boolean ninguno Si el pulgar superior del control deslizante está bloqueado en el rango máximo permitido. Si se configura, anula highValue.

Opciones

Nombre Tipo Predeterminado Descripción
FiltrarColumnaIndex número ninguno La columna de la tabla de datos en la que debe operar el filtro. Es obligatorio proporcionar esta opción o filterColumnLabel. Si ambas están presentes, esta opción tiene prioridad. Debe apuntar a una columna con el tipo number.
filterColumnLabel. string ninguno La etiqueta de la columna en la que debe operar el filtro. Es obligatorio proporcionar esta opción o filterColumnIndex. Si ambos están presentes, filterColumnIndex tiene prioridad. Debe apuntar a una columna con el tipo number.
minValue Fecha automático Valor mínimo permitido para el rango inferior. Si no está definido, el valor se inferirá del contenido de la tabla de datos administrada por el control.
maxValue Fecha automático El valor máximo permitido para el rango superior. Si no está definido, el valor se inferirá del contenido de la tabla de datos administrada por el control.
ui Objeto null Un objeto con miembros para configurar varios aspectos de la IU del control. Para especificar las propiedades de este objeto, puedes usar la notación literal de objetos, como se muestra aquí:
{label: 'Age', labelSeparator: ':'}
Formato de IU Objeto ninguno Cómo representar la fecha como una string Acepta cualquier formato de fecha válido.
ui.step string día El cambio mínimo posible al arrastrar el pulgar del control deslizante: puede ser cualquier unidad de tiempo hasta "día". ("mes" y "año" todavía no se admiten).
IU número automático Número de marcas (posiciones fijas en la barra de intervalo) que pueden ocupar los pulgares del control deslizante
ui.unitIncrement string "1" El importe que se debe incrementar para las incrementos de unidades de las extensiones de rango. Un incremento de unidad equivale a usar las teclas de flecha para mover un pulgar del control deslizante.
ui.blockIncrement número 10 El importe que se debe aumentar para los incrementos de bloques de las extensiones de rango. Un incremento de bloque equivale a usar las teclas pgUp y pgDown para mover el pulgar del control deslizante.
ui.showRangeValues boolean true Indica si hay etiquetas junto al control deslizante que muestran las extensiones del rango seleccionado.
ui.orientation. string "horizontal" La orientación del control deslizante. 'horizontal' o 'vertical'
IU string automático La etiqueta que se mostrará junto al control deslizante. Si no se especifica, se usará la etiqueta de la columna en la que opera el control.
ui.labelSeparador string ninguno Una string separadora que se anexa a la etiqueta para separar visualmente la etiqueta del control deslizante.
ui.labelStacking string "horizontal" Indica si la etiqueta debe mostrarse sobre (apilamiento vertical) o junto (apilamiento horizontal) al control deslizante. Usa 'vertical' o 'horizontal'.
ui.cssClass string "google-visualization-controls-rangefilter" La clase CSS que se asignará al control para un estilo personalizado.

NumberRangeFilter

Un control deslizante de valor doble para seleccionar rangos de valores numéricos

Estado

Nombre Tipo Predeterminado Descripción
valor bajo número ninguno La extensión inferior del rango seleccionado, inclusive.
Valor alto número ninguno La extensión más alta del rango seleccionado, inclusive.
Nivel mínimo de clics boolean ninguno Establece si el pulgar inferior del control deslizante está bloqueado en el rango mínimo permitido. Si se configura, anula lowValue.
ThumbAltoMáximo boolean ninguno Si el pulgar superior del control deslizante está bloqueado en el rango máximo permitido. Si se configura, anula highValue.

Opciones

Nombre Tipo Predeterminado Descripción
FiltrarColumnaIndex número ninguno La columna de la tabla de datos en la que debe operar el filtro. Es obligatorio proporcionar esta opción o filterColumnLabel. Si ambas están presentes, esta opción tiene prioridad. Debe apuntar a una columna con el tipo number.
filterColumnLabel. string ninguno La etiqueta de la columna en la que debe operar el filtro. Es obligatorio proporcionar esta opción o filterColumnIndex. Si ambos están presentes, filterColumnIndex tiene prioridad. Debe apuntar a una columna con el tipo number.
minValue número automático Valor mínimo permitido para el rango inferior. Si no está definido, el valor se inferirá del contenido de la tabla de datos administrada por el control.
maxValue número automático El valor máximo permitido para el rango superior. Si no está definido, el valor se inferirá del contenido de la tabla de datos administrada por el control.
ui Objeto null Un objeto con miembros para configurar varios aspectos de la IU del control. Para especificar las propiedades de este objeto, puedes usar la notación literal de objetos, como se muestra aquí:
{label: 'Age', labelSeparator: ':'}
Formato de IU Objeto ninguno Cómo representar el número como una string Acepta cualquier formato de número válido.
ui.step número 1, o se calcula a partir de ticks si se define El cambio mínimo posible al arrastrar los pulgares del control deslizante
IU número automático Número de marcas (posiciones fijas en la barra de intervalo) que pueden ocupar los pulgares del control deslizante
ui.unitIncrement número 1 El importe que se debe incrementar para las incrementos de unidades de las extensiones de rango. Un incremento de unidad equivale a usar las teclas de flecha para mover un pulgar del control deslizante.
ui.blockIncrement número 10 El importe que se debe aumentar para los incrementos de bloques de las extensiones de rango. Un incremento de bloque equivale a usar las teclas pgUp y pgDown para mover el pulgar del control deslizante.
ui.showRangeValues boolean true Indica si hay etiquetas junto al control deslizante que muestran las extensiones del rango seleccionado.
ui.orientation. string "horizontal" La orientación del control deslizante. 'horizontal' o 'vertical'
IU string automático La etiqueta que se mostrará junto al control deslizante. Si no se especifica, se usará la etiqueta de la columna en la que opera el control.
ui.labelSeparador string ninguno Una string separadora que se anexa a la etiqueta para separar visualmente la etiqueta del control deslizante.
ui.labelStacking string "horizontal" Indica si la etiqueta debe mostrarse sobre (apilamiento vertical) o junto (apilamiento horizontal) al control deslizante. Usa 'vertical' o 'horizontal'.
ui.cssClass string "google-visualization-controls-rangefilter" La clase CSS que se asignará al control para un estilo personalizado.

StringFilter

Un campo de entrada de texto simple que te permite filtrar datos a través de coincidencias de strings. Se actualiza después de presionar cada tecla: intenta escribir j para limitar la tabla que aparece a continuación a John y Jessica.

Estado

Nombre Tipo Predeterminado Descripción
valor objeto o string ninguno El texto ingresado en el campo de entrada de control.

Opciones

Nombre Tipo Predeterminado Descripción
FiltrarColumnaIndex número ninguno La columna de la tabla de datos en la que debe operar el filtro. Es obligatorio proporcionar esta opción o filterColumnLabel. Si ambas están presentes, esta opción tiene prioridad.
filterColumnLabel. string ninguno La etiqueta de la columna en la que debe operar el filtro. Es obligatorio proporcionar esta opción o filterColumnIndex. Si ambos están presentes, filterColumnIndex tiene prioridad.
Tipo de coincidencia string 'prefijo' [prefix] Indica si el control debe coincidir solo con valores exactos ('exact'), prefijos a partir del principio del valor ('prefix') o cualquier substring ('any').
Distinción entre mayúsculas y minúsculas boolean falso Indica si las coincidencias deben distinguir entre mayúsculas y minúsculas.
useFormattedValue boolean falso Indica si el control debe coincidir con valores de formato de celda o con valores reales.
ui Objeto null Un objeto con miembros para configurar varios aspectos de la IU del control. Para especificar las propiedades de este objeto, puedes usar la notación literal de objetos, como se muestra aquí:
{label: 'Name', labelSeparator: ':'}
ui.realtimeTrigger. boolean true Si el control debe coincidir cada vez que se presiona una tecla o solo cuando el campo de entrada “cambia” (pérdida del foco o tecla Intro)
IU string automático La etiqueta que se mostrará junto al campo de entrada. Si no se especifica, se usará la etiqueta de la columna en la que opera el control.
ui.labelSeparador string ninguno Una string separadora que se anexa a la etiqueta para separar visualmente la etiqueta del campo de entrada.
ui.labelStacking string "horizontal" Indica si la etiqueta debe mostrarse encima (apilamiento vertical) o al lado (apilado horizontal) del campo de entrada. Usa 'vertical' o 'horizontal'.
ui.cssClass string "google-visualization-controls-stringfilter" La clase CSS que se asignará al control para un estilo personalizado.