Visualización: Gráfico en movimiento

  1. Overview
  2. Ejemplo
  3. Cargando
  4. Cómo configurar el estado inicial
  5. Formato de los datos
  6. Opciones de configuración
  7. Métodos
  8. Eventos
  9. Política de Datos
  10. Notes

Descripción general

Un gráfico dinámico para explorar varios indicadores a lo largo del tiempo. El gráfico se procesa en el navegador mediante Flash.

Nota para desarrolladores: Debido a la configuración de seguridad de Flash, es posible que esta (y todas las visualizaciones basadas en Flash) no funcionen correctamente cuando se acceda a ella desde la ubicación de un archivo en el navegador (p.ej., file:///c:/webhost/myhost/myviz.html) en lugar de una URL de servidor web (p.ej., http://www.myhost.com/myviz.html). Por lo general, este es solo un problema de prueba. Puedes solucionar este problema como se describe en el sitio web de Adobe.

Ejemplo

(Ten en cuenta que el siguiente código no funcionará cuando se cargue como un archivo local; debe cargarse desde un servidor web).

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {packages:["motionchart"]});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Fruit');
        data.addColumn('date', 'Date');
        data.addColumn('number', 'Sales');
        data.addColumn('number', 'Expenses');
        data.addColumn('string', 'Location');
        data.addRows([
          ['Apples',  new Date (1988,0,1), 1000, 300, 'East'],
          ['Oranges', new Date (1988,0,1), 1150, 200, 'West'],
          ['Bananas', new Date (1988,0,1), 300,  250, 'West'],
          ['Apples',  new Date (1989,6,1), 1200, 400, 'East'],
          ['Oranges', new Date (1989,6,1), 750,  150, 'West'],
          ['Bananas', new Date (1989,6,1), 788,  617, 'West']
        ]);

        var chart = new google.visualization.MotionChart(document.getElementById('chart_div'));

        chart.draw(data, {width: 600, height:300});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 600px; height: 300px;"></div>
  </body>
</html>

Cargando

El nombre del paquete google.charts.load es "motionchart".

  google.charts.load('current', {'packages': ['motionchart']});

El nombre de clase de la visualización es google.visualization.MotionChart.

  var visualization = new google.visualization.MotionChart(container);

Formato de datos

  • La primera columna debe ser del tipo "string" y contener los nombres de las entidades (p.ej., "Manzanas", "Naranjas", "Bananas" en el ejemplo anterior).
  • La segunda columna debe contener los valores de hora. La hora se puede expresar en cualquiera de los siguientes formatos:
    • Año: Tipo de columna: "número". Ejemplo: 2008.
    • Mes, día y año: Tipo de columna: “fecha”; los valores deben ser instancias Date de JavaScript.
    • Número de semana: Tipo de columna: “string”; los valores deben usar el patrón YYYYWww, que de acuerdo con la ISO 8601 se establece. Ejemplo: "2008W03".
    • Quarter: Tipo de columna: "string". Los valores deben tener el patrón AAAAQq, que cumple con ISO 8601. Ejemplo: "2008Q3".
  • Las columnas siguientes pueden ser del tipo “número” o “cadena”. Las columnas de números se mostrarán en los menús desplegables para los ejes X, Y, Color y Tamaño. Las columnas de strings solo aparecerán en el menú desplegable de Color. Consulta el ejemplo anterior.

Cómo establecer el estado inicial

Puedes indicar que el gráfico en movimiento comience con un estado específico, es decir, un conjunto de entidades seleccionadas y personalizaciones de vistas. Para ello, primero deberás crear y mostrar el gráfico; luego, realizar los cambios de estado que quieras que muestre (selecciona valores, cambia la configuración, etc.) y, luego, exporta esta configuración como una cadena y, por último, usa esta cadena en tu código y asígnala a la opción “estado”. En las siguientes dos secciones, se describe cómo exportar y, luego, usar el código de estado.

  1. Abre un gráfico de trabajo y establece la configuración que quieres capturar. Entre los parámetros de configuración que puedes especificar, se incluyen los niveles de opacidad, el zoom y el escalamiento logarítmico frente al lineal.
  2. Para abrir el Panel de configuración, haz clic en el símbolo de llave inglesa que se encuentra en la esquina inferior derecha del gráfico.
  3. Haz clic en el vínculo Advanced en la esquina inferior izquierda para agregar el panel Advanced al conjunto.
  4. Expande el panel Advanced y copia el contenido del cuadro de texto State en tu portapapeles. (Nota: En lugar de usar el menú, que se describe en los pasos 2 a 4, puedes insertar un botón en tu página que llame a getState() y muestre el estado actual en un cuadro de mensaje).
  5. Asigna la cadena de estado que copiaste en el paso anterior al parámetro de opciones "state" de tu código, como se muestra aquí. Cuando se pasa al método draw(), el gráfico se inicializa en el estado especificado al inicio.
var options = {};
options['state'] =
'{"iconKeySettings":[],"stateVersion":3,"time":"notime","xAxisOption":"_NOTHING","playDuration":15,"iconType":"BUBBLE","sizeOption":"_NOTHING","xZoomedDataMin":null,"xZoomedIn":false,"duration":{"multiplier":1,"timeUnit":"none"},"yZoomedDataMin":null,"xLambda":1,"colorOption":"_NOTHING","nonSelectedAlpha":0.4,"dimensions":{"iconDimensions":[]},"yZoomedIn":false,"yAxisOption":"_NOTHING","yLambda":1,"yZoomedDataMax":null,"showTrails":true,"xZoomedDataMax":null};';

options['width'] = 600;
options['height'] = 400;
chart.draw(data, options);

Opciones de configuración

Nombre Tipo Predeterminado Descripción
height número 300 Es la altura del gráfico en píxeles.
width número 500 Es el ancho del gráfico en píxeles.
state cadena none Un estado de visualización inicial del gráfico. Este es un objeto JSON serializado que describe el nivel de zoom, las dimensiones seleccionadas, las burbujas o entidades seleccionadas y otras descripciones de estados. Consulta Cómo configurar el estado inicial para obtener información sobre cómo configurarlo.
showChartButtons boolean verdadero false oculta los botones que controlan el tipo de gráfico (burbujas / líneas / columnas) en la esquina superior derecha.
showHeader boolean verdadero false oculta la etiqueta de título de las entidades (derivada de la etiqueta de la primera columna en la tabla de datos).
showSelectListComponent boolean verdadero false oculta la lista de entidades visibles.
showSidePanel boolean verdadero false oculta el panel derecho.
showXMetricPicker boolean verdadero false oculta el selector de métricas para x.
showYMetricPicker boolean verdadero false oculta el selector de métricas para y.
showXScalePicker boolean verdadero false oculta el selector de escala para x.
showYScalePicker boolean verdadero false oculta el selector de escala para y.
showAdvancedPanel boolean verdadero false inhabilita el compartimento de opciones en el panel de configuración.

Métodos

Método Tipo de datos que se muestra Descripción
draw(data, options) ninguno Dibuja el gráfico con las opciones proporcionadas.
getState() cadena Muestra el state actual del gráfico de movimiento, serializado en una string JSON. Para asignar este estado al gráfico, asigna esta cadena a la opción state en el método draw(). A menudo, se usa para especificar un estado de gráfico personalizado al inicio, en lugar de usar el estado predeterminado.

Eventos

Nombre Descripción Propiedades
error Se activa cuando se produce un error cuando se intenta renderizar el gráfico. ID, mensaje
lista 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 de dibujo, e llamarlos solo después de que se haya activado el evento. Ninguno
cambio de estado El usuario interactuó con el gráfico de alguna manera. Llama a getState() para conocer el estado actual del gráfico. Ninguno

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.

Notas

Debido a la configuración de seguridad de Flash, es posible que esta (y todas las visualizaciones basadas en Flash) no funcione correctamente cuando se acceda a ella desde la ubicación de un archivo en el navegador (por ejemplo, file:///c:/webhost/myhost/myviz.html) en lugar de una URL de servidor web (por ejemplo, http://www.myhost.com/myviz.html). Por lo general, este es solo un problema de prueba. Puedes solucionar este problema como se describe en el sitio web de Macromedia.