Visualización: Gráfico dinámico

Descripción general

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

Nota para desarrolladores: Debido a la configuración de seguridad de Flash, es posible que esto (y todas las visualizaciones basadas en Flash) no funcione correctamente cuando se accede a ella desde una ubicación de archivo en el navegador (p.ej., file:///c:/webhost/myhost/myviz.html) en lugar de hacerlo desde una URL de servidor web (p.ej., http://www.myhost.com/myviz.html). Este suele ser 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 los 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 valores de tiempo. 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 AAAAWww, que cumple con la ISO 8601. Ejemplo: "2008W03".
    • Trimestre: Tipo de columna: “string”. Los valores deben tener el patrón AAAAQq, que cumple con la ISO 8601. Ejemplo: “2008Q3”.
  • Las columnas posteriores pueden ser del tipo 'número' o 'string'. Las columnas de número se mostrarán en los menús desplegables para los ejes X, Y, Color y Size. Las columnas de string solo aparecerán en el menú desplegable Color. Consulta el ejemplo anterior.

Configuración del estado inicial

Puedes especificar que el gráfico de 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 desees que muestre el gráfico (seleccionar valores, cambiar la configuración, etc.) y, luego, exportar esta configuración como una string y, por último, usar esta string en el código, asignarla a la opción “estado”. En las siguientes dos secciones, se describe cómo exportar y, luego, usar el código de estado.

  1. Abra un gráfico de trabajo y establezca la configuración que desea capturar. Las opciones de configuración que puedes especificar incluyen niveles de opacidad, zoom y escalamiento lineal en comparación con el registro.
  2. Para abrir el panel de configuración, haz clic en el símbolo de llave inglesa en la esquina inferior derecha del gráfico.
  3. Haz clic en el vínculo Avanzado (Advanced) en la esquina inferior izquierda para agregar el panel Avanzado (Advanced) al conjunto.
  4. Expande el panel Avanzado (Advanced) y copia el contenido del cuadro de texto Estado (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 la página que llame a getState() y muestre el estado actual en un cuadro de mensaje).
  5. Asigna la string de estado que copiaste en el paso anterior al parámetro de opciones de "estado" en tu código, como se muestra aquí. Cuando se pasa al método draw(), el gráfico se inicializa en el estado especificado en el 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
alto número 300 Altura del gráfico en píxeles.
ancho número 500 Ancho del gráfico en píxeles.
state string none Un estado de visualización inicial para el 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 Configura el estado inicial para aprender a realizar la configuración.
Mostrar los botones de la lista boolean true false oculta los botones que controlan el tipo de gráfico (cuadros / líneas / columnas) en la esquina superior derecha.
programa boolean true false oculta la etiqueta de título de las entidades (derivada de la etiqueta de la primera columna de la tabla de datos).
showSelectListComponent. boolean true false oculta la lista de entidades visibles.
showSidePanel. boolean true false oculta el panel derecho.
Mostrar XMetricPicker boolean true El valor falso oculta el selector de métricas para x.
selector de métricas de programa boolean true false oculta el selector de métricas para y.
Mostrar XScalePicker boolean true false oculta el selector de escala para x.
selector de escala de programa boolean true false oculta el selector de escala para y.
showAdvancedPanel; boolean true false inhabilita el compartimiento 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() string Muestra el estado actual del gráfico en movimiento, serializado en una string JSON. Para asignar este estado al gráfico, asigna esta string a la opción state en el método draw(). A menudo, se usa para especificar un estado de gráfico personalizado en el inicio, en lugar de usar el estado predeterminado.

Eventos

Nombre Descripción Propiedades
error Se activa cuando se produce un error cuando se intenta procesar el gráfico. id, mensaje
lista El gráfico está listo para las llamadas a métodos externos. Si deseas interactuar con el gráfico y llamar a los métodos después de dibujarlo, debes configurar un objeto de escucha para este evento antes de llamar al método de dibujo y llamarlo solo después de que se active el evento. Ninguno
cambio de estado El usuario interactuó de alguna manera con el gráfico. Llama a getState() para conocer el estado actual del gráfico. Ninguno

Política de Datos

El código y los datos se procesan y procesan en el navegador. No se envían datos a ningún servidor.

Notas

Debido a la configuración de seguridad de Flash, es posible que esto (y todas las visualizaciones basadas en Flash) no funcione correctamente cuando se acceda a este desde una ubicación de 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). Este suele ser un problema de prueba. Puedes solucionar este problema como se describe en el sitio web de Macromedia.