Gráfico do Google Agenda

  1. Visão geral
  2. Um exemplo simples
  3. Dias
  4. Semanas
  5. Meses
  6. Anos
  7. Carregando
  8. Formato de dados
  9. Opções de configuração
  10. Métodos
  11. Eventos
  12. Política de dados

Visão geral

Observação:o JavaScript conta os meses a partir de zero: janeiro é 0, fevereiro é 1o e dezembro é 11. Se o gráfico do seu calendário parece estar inclinado em um mês, é por isso.

Um gráfico de calendário é uma visualização usada para mostrar a atividade durante um longo período, como meses ou anos. Eles são mais indicados para mostrar como a quantidade varia de acordo com o dia da semana ou suas tendências ao longo do tempo.

O gráfico do calendário poderá passar por revisões substanciais em versões futuras do Google Charts.

Os gráficos da agenda são renderizados no navegador usando SVG ou VML, o que for mais apropriado para o navegador do usuário. Como todos os gráficos do Google, os gráficos de agenda mostram dicas quando o usuário passa o cursor sobre os dados. E crédito quando o crédito é devido: nosso gráfico de calendário foi inspirado na visualização de calendário do D3.

Um exemplo simples

Digamos que queríamos exibir como o comparecimento de uma equipe esportiva variou durante a temporada. Com um gráfico de calendário, podemos usar o brilho para indicar os valores e permitir que as pessoas vejam as tendências rapidamente:

Passe o cursor sobre os dias individuais para ver os valores de dados subjacentes.

Para criar um gráfico de calendário, carregue o pacote calendar e crie duas colunas, uma para as datas e outra para os valores. Uma terceira coluna opcional para estilos personalizados será lançada em uma versão futura do Google Charts.

Em seguida, preencha as linhas com pares de data-valor, conforme mostrado abaixo.

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

   function drawChart() {
       var dataTable = new google.visualization.DataTable();
       dataTable.addColumn({ type: 'date', id: 'Date' });
       dataTable.addColumn({ type: 'number', id: 'Won/Loss' });
       dataTable.addRows([
          [ new Date(2012, 3, 13), 37032 ],
          [ new Date(2012, 3, 14), 38024 ],
          [ new Date(2012, 3, 15), 38024 ],
          [ new Date(2012, 3, 16), 38108 ],
          [ new Date(2012, 3, 17), 38229 ],
          // Many rows omitted for brevity.
          [ new Date(2013, 9, 4), 38177 ],
          [ new Date(2013, 9, 5), 38705 ],
          [ new Date(2013, 9, 12), 38210 ],
          [ new Date(2013, 9, 13), 38029 ],
          [ new Date(2013, 9, 19), 38823 ],
          [ new Date(2013, 9, 23), 38345 ],
          [ new Date(2013, 9, 24), 38436 ],
          [ new Date(2013, 9, 30), 38447 ]
        ]);

       var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));

       var options = {
         title: "Red Sox Attendance",
         height: 350,
       };

       chart.draw(dataTable, options);
   }
    </script>
  </head>
  <body>
    <div id="calendar_basic" style="width: 1000px; height: 350px;"></div>
  </body>
</html>

Dias

Cada quadrado em um gráfico de calendário representa um dia. Atualmente, não é possível personalizar a cor das células de dados, mas isso mudará na próxima versão dos Gráficos Google.

Se todos os valores dos dados forem positivos, as cores variarão do branco ao azul, com o azul mais profundo indicando os valores mais altos. Se houver valores de dados negativos, eles aparecerão em laranja, conforme mostrado abaixo.

O código dessa agenda é semelhante ao da primeira, só que as linhas são assim:

          [ new Date(2013, 9, 4), 10 ],
          [ new Date(2013, 9, 5), 3 ],
          [ new Date(2013, 9, 7), -1 ],
          [ new Date(2013, 9, 8), 2 ],
          [ new Date(2013, 9, 12), -1 ],
          [ new Date(2013, 9, 13), 1 ],
          [ new Date(2013, 9, 15), 1 ],
          [ new Date(2013, 9, 16), -4 ],

É possível alterar o tamanho dos dias ("células") com a opção calendar.cellSize:

Aqui, mudamos calendar.cellSize para 10, reduzindo os dias e, portanto, o gráfico como um todo. 

       var options = {
         title: 'Red Sox Attendance',
         calendar: { cellSize: 10 },
       };

Dias sem valores de dados podem ser personalizados com a opção noDataPattern:

Aqui, definimos color como azul-claro e backgroundColor como um tom um pouco mais escuro: 

       var options = {
         title: "Red Sox Attendance",
         height: 350,
         noDataPattern: {
           backgroundColor: '#76a7fa',
           color: '#a0c3ff'
         }
       };

Você pode controlar a cor, a largura e a opacidade da borda da célula com calendar.cellColor:

Escolha uma cor de traço que se diferencie de monthOutlineColor ou escolha uma opacidade baixa. Estas são as opções para o gráfico acima: 

  var options = {
    title: 'Red Sox Attendance',
    height: 350,
    calendar: {
      cellColor: {
        stroke: '#76a7fa',
        strokeOpacity: 0.5,
        strokeWidth: 1,
      }
    }
  };

Se você focar em um dia no gráfico acima, a borda será destacada em vermelho. É possível controlar esse comportamento com as opções calendar.focusedCellColor: 

  var options = {
    title: 'Red Sox Attendance',
    height: 350,
    calendar: {
      focusedCellColor: {
        stroke: '#d3362d',
        strokeOpacity: 1,
        strokeWidth: 1,
      }
    }
  };

Semanas

Por padrão, os dias da semana são identificados com as primeiras letras de domingo a sábado. Não é possível mudar a ordem dos dias, mas você pode mudar quais letras são usadas com a opção calendar.daysOfWeek. Além disso, é possível controlar o padding entre os dias da semana e o gráfico com calendar.dayOfWeekRightSpace, além de personalizar o estilo do texto com calendar.dayOfWeekLabel:

Aqui, alteramos a fonte dos rótulos da semana, colocamos um padding de 10 pixels entre os rótulos e os dados do gráfico e iniciamos as semanas na segunda-feira. 

  var options = {
    title: 'Red Sox Attendance',
    height: 350,
    calendar: {
      dayOfWeekLabel: {
        fontName: 'Times-Roman',
        fontSize: 12,
        color: '#1a8763',
        bold: true,
        italic: true,
      },
      dayOfWeekRightSpace: 10,
      daysOfWeek: 'DLMMJVS',
    }
  };

Meses

Por padrão, os meses são identificados por linhas cinza-escuras. Você pode usar a opção calendar.monthOutlineColor para controlar as bordas, calendar.monthLabel para personalizar a fonte e calendar.underMonthSpace para ajustar o padding:

Definimos a fonte do rótulo em negrito Times-Roman de 12 pt vermelho profundo, definimos os contornos com a mesma cor e colocamos um padding de 16 pixels. Os contornos de meses não utilizados são definidos com uma cor mais fraca da mesma tonalidade. 

  var options = {
    title: 'Red Sox Attendance',
    height: 350,
    calendar: {
      monthLabel: {
        fontName: 'Times-Roman',
        fontSize: 12,
        color: '#981b48',
        bold: true,
        italic: true
      },
      monthOutlineColor: {
        stroke: '#981b48',
        strokeOpacity: 0.8,
        strokeWidth: 2
      },
      unusedMonthOutlineColor: {
        stroke: '#bc5679',
        strokeOpacity: 0.8,
        strokeWidth: 1
      },
      underMonthSpace: 16,
    }
  };

Anos

Os anos nos gráficos de calendário estão sempre na borda esquerda do gráfico e podem ser personalizados com calendar.yearLabel e calendar.underYearSpace:

Definimos a fonte do ano como Times-Roman negrito 32pt verde escuro em negrito e adicionamos dez pixels entre os rótulos do ano e a parte inferior do gráfico: 

  var options = {
    title: 'Red Sox Attendance',
    height: 350,
    calendar: {
      underYearSpace: 10, // Bottom padding for the year labels.
      yearLabel: {
        fontName: 'Times-Roman',
        fontSize: 32,
        color: '#1A8763',
        bold: true,
        italic: true
      }
    }
  };

Carregando

O nome do pacote google.charts.load é "calendar": 

  google.charts.load("current", {packages: ["calendar"]});

O nome da classe da visualização é google.visualization.Calendar: 

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

Formato de dados

Linhas: cada linha na tabela representa uma data.

Columns:

  Coluna 0 Coluna 1 ... Coluna N (opcional)
Finalidade: Datas Valores ... Papéis opcionais
Tipo de dados: date, datetime ou timeofday number ...
Role: domínio dados ...
Papéis de coluna opcionais:

Nenhum controle

Nenhum controle

 ...

 

Opções de configuração

Nome
calendar.cellColor

A opção calendar.cellColor permite personalizar a borda dos quadrados do dia: 

var options = {
  calendar: {
    cellColor: {
      stroke: 'red',      // Color the border of the squares.
      strokeOpacity: 0.5, // Make the borders half transparent.
      strokeWidth: 2      // ...and two pixels thick.
    }
  }
};
Tipo: objeto
Padrão:{ stroke: '#fff', strokeOpacity: 1, strokeWidth: 1 }
calendar.cellSize

O tamanho dos quadrados de dia do calendário:

var options = { calendar: { cellSize: 10 } };
Tipo: inteiro
Padrão:16
calendar.dayOfWeekLabel

Controla o estilo da fonte dos rótulos da semana na parte superior do gráfico:

var options = {
  calendar: {
    dayOfWeekLabel: {
      fontName: 'Times-Roman',
      fontSize: 12,
      color: 'black',
      bold: false,
      italic: false
    }
  }
};
Tipo: objeto
Padrão:{ fontName: 'sans-serif', color: '#888', bold: false, italic: false }
calendar.dayOfWeekRightSpace

A distância entre a borda direita dos rótulos da semana e a borda esquerda dos quadrados de dia do gráfico.

Tipo: inteiro
Padrão:4
calendar.daysOfWeek

Os rótulos de uma única letra a serem usados de domingo a sábado.

Tipo: string
Padrão:'SMTWTFS'
calendar.focusedCellColor

Quando o usuário focar, por exemplo, passando o cursor sobre um quadrado do dia, os gráficos do calendário vão destacar esse quadrado. 

var options = {
  calendar:
    focusedCellColor: {
      stroke: 'red',
      strokeOpacity: 0.8,
      strokeWidth: 3
    }
  }
};
Tipo: objeto
Padrão:{ stroke: '#000', strokeOpacity: 1, strokeWidth: 2 }
calendar.monthLabel

Estilo dos marcadores de mês, por exemplo:

      var options = {
        calendar: {
          monthLabel: {
            fontName: 'Times-Roman',
            fontSize: 16,
            color: 'green',
            bold: true,
            italic: false
          }
        }
      };
Tipo: objeto
Padrão:{ fontName: 'sans-serif', color: '#888', bold: false, italic: false }
calendar.monthOutlineColor

Os meses com valores de dados são delineados dos outros usando uma borda nesse estilo.

var options = {
  calendar: {
    monthOutlineColor: {
      stroke: 'blue',
      strokeOpacity: 0.8,
      strokeWidth: 2
    }
  }
};
Consulte também calendar.unusedMonthOutlineColor.
Tipo: objeto
Padrão:{ stroke: '#000', strokeOpacity: 1, strokeWidth: 1 }
calendar.underMonthSpace

O número de pixels entre a parte inferior dos marcadores de mês e a parte superior dos quadrados do dia: 

var options = { calendar: { underMonthSpace: 12 } };
Tipo: inteiro
Padrão:6
calendar.underYearSpace

O número de pixels entre o rótulo de ano na parte inferior e a parte inferior do gráfico:

var options = { calendar: { underYearSpace: 2 } };
Tipo: inteiro
Padrão:0
calendar.unusedMonthOutlineColor

Os meses sem valores de dados são delineados de outros usando uma borda nesse estilo. 

var options = {
  calendar: {
    unusedMonthOutlineColor: {
      stroke: 'yellow',
      strokeOpacity: 0.8,
      strokeWidth: 2
    }
  }
};
Consulte também calendar.monthOutlineColor.
Tipo: objeto
Padrão:{ stroke: '#c9c9c9', strokeOpacity: 1, strokeWidth: 1 }
colorAxis

Um objeto que especifica um mapeamento entre os valores da coluna de cores e as cores ou uma escala de gradiente. Para especificar as propriedades desse objeto, é possível usar a notação literal de objeto, como mostrado aqui: 

 {minValue: 0,  colors: ['#FF0000', '#00FF00']}
Tipo: objeto
Padrão:nulo
colorAxis.colors

Cores a serem atribuídas a valores na visualização. Uma matriz de strings, em que cada elemento é uma string de cor HTML, por exemplo: colorAxis: {colors:['red','#004411']}. É preciso ter pelo menos dois valores. O gradiente incluirá todos os seus valores, além dos valores intermediários calculados, sendo que a primeira cor é o menor valor e a última, o mais alto.

Tipo:matriz de strings de cores
Padrão:nulo
colorAxis.maxValue

Se presente, especifica um valor máximo para os dados de cores do gráfico. Os valores de dados de cores desse valor e de valores mais altos serão renderizados como a última cor no intervalo colorAxis.colors.

Tipo: número
Padrão:valor máximo da coluna de cor nos dados do gráfico
colorAxis.minValue

Se presente, especifica um valor mínimo para os dados de cores do gráfico. Os valores de dados de cores desse valor e de valores inferiores serão renderizados como a primeira cor no intervalo colorAxis.colors.

Tipo: número
Padrão:valor mínimo da coluna de cor nos dados do gráfico
colorAxis.values

Se presente, controla como os valores são associados às cores. Cada valor é associado à cor correspondente na matriz colorAxis.colors. Esses valores se aplicam aos dados de cores do gráfico. A coloração é feita de acordo com um gradiente dos valores especificados aqui. Não especificar um valor para essa opção equivale a especificar [minValue, maxValue].

Tipo:matriz de números
Padrão:nulo
forceIFrame

Desenha o gráfico dentro de um frame inline. No IE8, essa opção é ignorada. Todos os gráficos do IE8 são desenhados em i-frames.

Tipo: booleano
Padrão:false
height

Altura do gráfico, em pixels.

Tipo: número
Padrão:altura do elemento contêiner
noDataPattern

Os gráficos de calendário usam um padrão diagonal listrado para indicar que não há dados em um dia específico. Use as opções noDataPattern.backgroundColor e noDataPattern.color para substituir os padrões da escala de cinza, por exemplo: 

noDataPattern: {
  backgroundColor: '#76a7fa',
  color: '#a0c3ff'
}
Tipo: objeto
Padrão:nulo
tooltip.isHtml

Defina como false para usar dicas renderizadas em SVG (em vez de renderizadas por HTML). Consulte Como personalizar o conteúdo da dica para mais detalhes.

Observação: a personalização do conteúdo da dica HTML por meio do papel de dados da coluna de dicas não é compatível com as visualizações Gráfico de pizza e Gráfico de bolhas.

Tipo: booleano
Padrão:true
width

Largura do gráfico, em pixels.

Tipo: número
Padrão:largura do elemento que o contém

Métodos

Método
draw(data, options)

Desenha o gráfico. O gráfico aceita outras chamadas de método somente depois que o evento ready é disparado. Extended description.

Return Type: nenhum
getBoundingBox(id)

Retorna um objeto que contém as informações de esquerda, parte superior, largura e altura do elemento id do gráfico. O formato de id ainda não está documentado (eles são os valores de retorno dos manipuladores de eventos), mas estes são alguns exemplos:

var cli = chart.getChartLayoutInterface();

Altura da área do gráfico
cli.getBoundingBox('chartarea').height
Largura da terceira barra na primeira série de um gráfico de barras ou colunas
cli.getBoundingBox('bar#0#2').width
Caixa delimitadora do quinto encaixe de um gráfico de pizza
cli.getBoundingBox('slice#4')
Caixa delimitadora dos dados de um gráfico vertical (por exemplo, coluna):
cli.getBoundingBox('vAxis#0#gridline')
Caixa delimitadora dos dados de um gráfico horizontal (por exemplo, de barras):
cli.getBoundingBox('hAxis#0#gridline')

Os valores são relativos ao contêiner do gráfico. Chame essa função depois que o gráfico for desenhado.

Tipo de retorno: objeto
getSelection()

Retorna uma matriz das entidades de gráfico selecionadas. As entidades selecionáveis são barras, entradas de legenda e categorias. Uma barra corresponde a uma célula na tabela de dados, a uma entrada de legenda em uma coluna (o índice de linha é nulo) e uma categoria a uma linha (o índice de coluna é nulo). Neste gráfico, apenas uma entidade pode ser selecionada por vez. Extended description .

Tipo de retorno:matriz de elementos de seleção
setSelection()

Seleciona as entidades de gráfico especificadas. Cancela qualquer seleção anterior. As entidades selecionáveis são barras, entradas de legenda e categorias. Uma barra corresponde a uma célula na tabela de dados, a uma entrada de legenda em uma coluna (o índice de linha é nulo) e uma categoria a uma linha (o índice de coluna é nulo). Neste gráfico, apenas uma entidade pode ser selecionada por vez. Extended description .

Return Type: nenhum
clearChart()

Limpa o gráfico e libera todos os recursos alocados.

Return Type: nenhum

Eventos

Nome
error

Disparado quando ocorre um erro ao tentar renderizar o gráfico.

Properties:ID, message
onmouseover

Disparado quando o usuário passa o mouse sobre uma entidade visual. Transmite o índice de linha e o valor de data da entidade. Se não houver um elemento da tabela de dados para a entidade, o valor retornado para o índice de linhas será undefined.

Propriedades: linha, data
onmouseout

Disparado quando o usuário afasta o mouse de uma entidade visual. Transmite o índice de linha e o valor de data da entidade. Se não houver um elemento da tabela de dados para a entidade, o valor retornado para o índice de linha será undefined.

linha Properties, data
ready

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 draw e chame-o somente depois que o evento for disparado.

Properties:nenhuma
select

Disparado quando o usuário clica em uma entidade visual. Para saber o que foi selecionado, chame getSelection().

Properties:nenhuma

Política de dados

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