Visualização: gráfico com movimento

  1. Visão geral
  2. Exemplo
  3. Carregando
  4. Como definir o estado inicial
  5. Formato de dados
  6. Opções de configuração
  7. Métodos
  8. Eventos
  9. Política de dados
  10. Notes

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, essa e todas as visualizações baseadas em Flash podem não funcionar corretamente quando acessadas de um local de arquivo no navegador (por exemplo, file:///c:/webhost/myhost/myviz.html) em vez de um URL de servidor da Web (por exemplo, http://www.myhost.com/myviz.html). Normalmente, isso é apenas 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, e sim de 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 da visualização é 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, "Maçãs", "Laranjas", "Bananas" no exemplo acima).
  • A segunda coluna precisa conter valores de tempo. O horário pode ser expresso em qualquer um dos seguintes formatos:
    • Ano: tipo de coluna: "número". Exemplo: 2008.
    • Mês, dia e ano: tipo de coluna: "date". Os valores precisam ser instâncias JavaScript Date.
    • 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".
    • Quarter: tipo de coluna: 'string'. Os valores precisam ter o padrão YYYYQq, em conformidade com o ISO 8601. Exemplo: "2008Q3".
  • As colunas subsequentes podem ser do tipo "número" ou "string". As colunas numeradas serão exibidas nos menus suspensos dos 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

Você pode 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ção. Para isso, você precisa primeiro criar e exibir o gráfico, depois fazer as alterações de estado que você quer que o gráfico mostre (selecionar valores, alterar configurações etc.), exportar essas configurações como uma string e, por fim, usar essa string no seu código, atribuindo-a à opção "state". As próximas duas seções descrevem como exportar e usar o código do estado.

  1. Abra um gráfico de trabalho e defina as configurações que você gostaria de capturar. As configurações que podem ser especificadas incluem níveis de opacidade, zoom e escalonamento log vs. linear.
  2. Abra o painel 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 Advanced 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 de 2 a 4, você pode inserir um botão na página que chame getState() e exiba 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 código, conforme mostrado aqui. Quando transmitido para o método draw(), o gráfico é inicializado no estado especificado.
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
height number 300 Altura do gráfico em pixels.
width number 500 Largura do gráfico em pixels.
state string none Estado de exibição inicial do gráfico. É um objeto JSON serializado que descreve o nível de zoom, dimensões selecionadas, balões/entidades selecionadas e outras descrições de estado. Consulte Como configurar o estado inicial para saber como definir isso.
showChartButtons boolean verdadeiro false oculta os botões que controlam o tipo de gráfico (balões / linhas / colunas) no canto superior direito.
showHeader boolean verdadeiro false oculta o rótulo do 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.
showSidePanel boolean verdadeiro "false" oculta o painel à direita.
showXMetricPicker boolean verdadeiro "false" oculta o seletor de métricas de x.
showYMetricPicker boolean verdadeiro "false" oculta o seletor de métricas para y.
showXScalePicker boolean verdadeiro "false" oculta o seletor de escala para x.
showYScalePicker boolean verdadeiro "false" oculta o seletor de escala para y.
showAdvancedPanel 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 fornecidas.
getState() string Retorna o state atual do gráfico animado, serializado para uma string JSON. Para atribuir esse estado ao gráfico, atribua essa string à opção state no método draw(). Geralmente, é usado 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étodos externos. 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 disparado. Nenhum
statechange O usuário interagiu com o gráfico de alguma forma. 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 nenhum servidor.

Observações:

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