Visualização: Gráfico de movimento

Visão geral

Um gráfico dinâmico para explorar vários indicadores ao longo do tempo. O gráfico é renderizado no navegador usando Flash.

Observação para desenvolvedores: devido às configurações de segurança do Flash, isso (e todas as visualizações baseadas em Flash) pode não funcionar corretamente quando acessado no local de um arquivo no navegador (por exemplo, file:///c:/webhost/myhost/myviz.html), e não no URL de um servidor da Web (por exemplo, http://www.myhost.com/myviz.html). Isso costuma ser um problema de teste. É possível resolver esse problema conforme descrito no site da Adobe.

Exemplo

O código a seguir não funciona quando carregado como um arquivo local. Ele precisa ser carregado em um servidor da 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>

Carregando

O nome do pacote google.charts.load é "motionchart".

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

O nome da classe do layout é google.visualization.MotionChart.

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

Formato de dados

  • A primeira coluna precisa ser do tipo "string" e conter os nomes das entidades (por exemplo, "Apple", "Laranja" ou "Banana" no exemplo acima).
  • A segunda coluna precisa conter valores de tempo. O horário pode ser expresso em um dos seguintes formatos:
    • Ano – Tipo da coluna: "number". Exemplo: 2008.
    • Mês, dia e ano: tipo de coluna: "date". Os valores precisam ser instâncias Date do JavaScript.
    • Número da semana: tipo de coluna: "string". Os valores precisam usar o padrão AAAAWWW, que está em conformidade com a ISO 8601. Exemplo: "2008W03".
    • Trim: tipo de coluna: "string". Os valores precisam ter o padrão AAAAQq, que está em conformidade com a ISO 8601. Exemplo: "2008Q3".
  • As colunas subsequentes podem ser do tipo "number" ou "string". As colunas de número vão aparecer nos menus suspensos para eixos X, Y, cor e tamanho. As colunas de string só vão aparecer no menu suspenso de "Cor". Veja o exemplo acima.

Como definir o estado inicial

É possível especificar que o gráfico de movimento comece com um estado específico, ou seja, um conjunto de entidades selecionadas e personalizações de visualizações. Para fazer isso, primeiro crie e exiba o gráfico. Em seguida, faça as alterações de estado que você quiser que o gráfico mostre (selecione valores, mude as configurações etc.) e exporte essas configurações como uma string e, por fim, use essa string no código, atribuindo-a à opção "state". As próximas duas seções descrevem como exportar e usar o código de estado.

  1. Abra um gráfico em funcionamento e defina as configurações que você quer capturar. As configurações que você pode especificar incluem níveis de opacidade, zoom e registro vs. escalonamento linear.
  2. Abra o painel de configurações clicando no símbolo de chave inglesa no canto inferior direito do gráfico.
  3. Clique no link Avançado no canto inferior esquerdo para adicionar o painel Avançado ao conjunto.
  4. Expanda o painel Avançado e copie o conteúdo da caixa de texto State para a área de transferência. Observação: em vez de usar o menu, descrito nas etapas 2 a 4, você pode inserir um botão na página que chama getState() e exibe o estado atual em uma caixa de mensagem.
  5. Atribua a string de estado que você copiou na etapa anterior ao parâmetro de opções "state" no seu código, conforme mostrado aqui. Quando transmitido para o método draw(), o gráfico será inicializado para o estado especificado na inicialização.
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);

Opções de configuração

Nome Tipo Padrão Descrição
altura number 300 Altura do gráfico em pixels.
largura number 500 Largura do gráfico em pixels.
estado string none Um estado de exibição inicial do gráfico. Esse é um objeto JSON serializado que descreve o nível de zoom, as dimensões selecionadas, os balões/entidades selecionados e outras descrições de estado. Consulte Como definir o estado inicial para saber como fazer isso.
BotõesShowChart boolean verdadeiro "false" oculta os botões que controlam o tipo de gráfico (balões / linhas / colunas) no canto superior direito.
Cabeçalho do programa boolean verdadeiro false oculta o rótulo de título das entidades (derivado do rótulo da primeira coluna na tabela de dados).
showSelectListComponent boolean verdadeiro "false" oculta a lista de entidades visíveis.
Painel lateral boolean verdadeiro "false" oculta o painel do lado direito.
showXMetricPicker boolean verdadeiro "false" oculta o seletor de métricas de "x".
showYMetricPicker boolean verdadeiro "false" oculta o seletor de métricas de y.
showXScalePicker boolean verdadeiro "false" oculta o seletor de escala de x.
showYScalePicker. boolean verdadeiro "false" oculta o seletor de escala de y.
Painel de controle avançado boolean verdadeiro false desativa o compartimento de opções no painel de configurações.

Métodos

Método Tipo de retorno Descrição
draw(data, options) nenhum Desenha o gráfico com as opções disponíveis.
getState() string Retorna o estado atual do gráfico de movimento, serializado para uma string JSON. Para atribuir esse estado ao gráfico, atribua essa string à opção state no método draw(). Ele é usado com frequência para especificar um estado de gráfico personalizado na inicialização, em vez de usar o estado padrão.

Eventos

Nome Descrição Propriedades
error Disparado quando ocorre um erro ao tentar renderizar o gráfico. ID, mensagem
pronto O gráfico está pronto para chamadas de método externo. Se você quiser interagir com o gráfico e chamar métodos depois de desenhá-lo, configure um listener para esse evento antes de chamar o método de desenho e chame-o somente depois que o evento for acionado. Nenhum
mudança de estado O usuário interagiu de alguma forma com o gráfico. Chame getState() para saber o estado atual do gráfico. Nenhum

Política de dados

Todos os códigos e dados são processados e renderizados no navegador. Nenhum dado é enviado para os servidores.

Observações:

Por causa das configurações de segurança de Flash, isso (e todas as visualizações baseadas em Flash) pode não funcionar corretamente quando acessado no local de um arquivo no navegador (por exemplo, file:///c:/webhost/myhost/myviz.html), em vez de usar o URL de um servidor da Web (por exemplo, http://www.myhost.com/myviz.html). Geralmente, isso é apenas um problema de teste. É possível resolver esse problema conforme descrito no site da Macromedia.