Visão geral
Observação: o JavaScript conta meses a partir de zero: janeiro é 0, fevereiro é 1 e dezembro é 11. Se o gráfico da agenda parece estar desatualizado por um mês, esse é o motivo.
Um gráfico da agenda é uma visualização usada para mostrar a atividade ao longo de um longo período, como meses ou anos. Elas são mais adequadas quando você quer ilustrar como uma quantidade varia de acordo com o dia da semana ou com a tendência ao longo do tempo.
O gráfico da agenda pode estar passando por revisões substanciais em versões futuras do recurso Gráficos do Google.
Os gráficos da agenda são renderizados no navegador usando SVG ou VML, o que for apropriado para o navegador do usuário. Como todos os gráficos do Google, os gráficos da agenda exibem dicas quando o usuário passa o cursor sobre os dados. Crédito quando o crédito é devido: o gráfico da agenda foi inspirado na visualização do calendário D3.
Um exemplo simples
Digamos que a participação de um time esportivo tenha variado ao longo da temporada. Com um gráfico de agenda, podemos usar o brilho para indicar os valores e permitir que as pessoas vejam tendências rapidamente.
Passe o cursor sobre os dias individuais para ver os valores de dados subjacentes.
Para criar um gráfico de agenda, carregue o pacote calendar e crie duas colunas,
uma para as datas e outra para os valores. Uma terceira coluna opcional para personalizar o estilo é incluída em uma futura versão dos Gráficos Google.
Em seguida, preencha suas linhas com pares de data e 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 de um gráfico do calendário representa um dia. No momento, a cor das células de dados não pode ser personalizada, embora isso mude na próxima versão dos Gráficos Google.
Se todos os valores de dados forem positivos, as cores vão de branco a azul, com os azuis mais profundos indicando os valores mais altos. Se houver valores de dados negativos, eles aparecerão em laranja, como mostrado abaixo.
O código dessa agenda é semelhante ao primeiro, mas as linhas têm esta aparência:
[ 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 o 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'
}
};
É possível controlar a cor, a largura e a opacidade da borda da célula com
calendar.cellColor:
Tenha cuidado ao escolher uma cor de traço que será distinguível do monthOutlineColor ou escolher uma opacidade baixa. Veja 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ê se concentrar em um dia no gráfico acima, a borda será destacada em vermelho. Você pode 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 marcados com as primeiras letras de domingo a sábado.
Não é possível alterar a ordem dos dias, mas você pode mudar as letras que 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, mudamos 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-escuro. É possível usar a opção
calendar.monthOutlineColor para controlar as bordas,
calendar.monthLabel para personalizar a fonte do rótulo e
calendar.underMonthSpace para ajustar o padding do rótulo:
Definimos a fonte do rótulo em itálico e negrito vermelho do Times Times de 12pt, definimos os contornos da mesma cor e colocamos um padding de 16 pixels. Os contornos do mês não utilizados são definidos com uma cor mais fraca do mesmo matiz.
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 da agenda 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 um itálico de 32pt verde-escuro Times-Roman em negrito e adicionamos 10 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 da tabela representa uma data.
Columns:
| Coluna 0 | Coluna 1 | … | Coluna N (opcional) | |
|---|---|---|---|---|
| Finalidade: | Datas | Valores | … | Papéis opcionais |
| Tipo de dado: | data, data/hora ou hora do dia | number | … | |
| Papel: | domínio | dados | … | |
| Papéis de coluna opcionais: | Nenhuma |
Nenhuma |
… |
Opções de configuração
| Nome | |
|---|---|
| calendar.cellColor |
A opção
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 do dia:
var options = { calendar: { cellSize: 10 } };
Tipo: inteiro
Padrão: 16
|
| calendar.dayOfWeekLabel |
Controla o estilo da fonte dos rótulos de 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 do dia do gráfico. Tipo: inteiro
Padrão:4
|
| calendar.daysOfWeek |
Os rótulos de uma letra que vão ser usados de domingo a sábado. Tipo: string
Padrão:
'SMTWTFS' |
| calendar.focusCellColor |
Por exemplo, quando o usuário foca em um quadrado do dia, passando o cursor sobre ele, o gráfico é destacado.
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 rótulos do 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 |
Meses com valores de dados são delineados de 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 rótulos 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 último rótulo de ano 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 outras pessoas 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 }
|
| Eixo de cores |
Um objeto que especifica um mapeamento entre valores e cores da coluna de cores ou uma escala de gradiente. Para especificar as propriedades desse objeto, use a notação literal de objeto, conforme mostrado aqui: {minValue: 0, colors: ['#FF0000', '#00FF00']}
Tipo: objeto
Padrão: nulo
|
| colorAxis.colors |
Cores para atribuir aos valores na visualização. Uma matriz de strings, em que cada elemento é uma string de cor HTML, por exemplo: Tipo: matriz de strings de cores
Padrão:nulo
|
| colorAxis.maxValue |
Se presente, especifica um valor máximo para os dados de cor do gráfico. Valores de dados de cores deste valor
e superiores serão renderizados como a última cor no intervalo 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 cor do gráfico. Valores de dados de cor deste valor
e inferiores serão renderizados como a primeira cor no intervalo Tipo: número
Padrão:valor mínimo da coluna de cor nos dados do gráfico
|
| colorAxis.values |
Se estiver presente, controla como os valores são associados às cores. Cada valor é associado à
cor correspondente na matriz Tipo:matriz de números
Padrão:nulo
|
| FrameIForce |
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: falso
|
| altura |
Altura do gráfico, em pixels. Tipo: número
Padrão: altura do elemento em questão
|
| PadrãoNoData |
Os gráficos do Google Agenda usam um padrão diagonal diagonal para indicar que não há dados em um determinado dia. Use as opções
noDataPattern: {
backgroundColor: '#76a7fa',
color: '#a0c3ff'
}
Tipo: objeto
Padrão:nulo
|
| tooltip.isHTML |
Defina como Observação:a personalização do conteúdo da dica em 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:verdadeiro
|
| largura |
Largura do gráfico, em pixels. Tipo: número
Padrão: largura do elemento contido
|
Métodos
| Método | |
|---|---|
draw(data, options) |
Desenha o gráfico. O gráfico aceita mais chamadas de método somente após o evento Tipo de retorno:nenhum
|
getBoundingBox(id) |
Retorna um objeto que contém os elementos esquerdo, superior, largura e altura do elemento do gráfico
Os valores são relativos ao contêiner do gráfico. Chame essa função após o gráfico ser desenhado. Return Type: objeto
|
getSelection() |
Retorna uma matriz das entidades do gráfico selecionadas.
Entidades selecionáveis são barras, entradas de legenda e categorias.
Uma barra corresponde a uma célula da tabela de dados, uma entrada de legenda a uma coluna (o índice da linha é nulo) e uma categoria a uma linha (o índice da coluna é nulo).
Nesse gráfico, apenas uma entidade pode ser selecionada por vez.
Tipo de retorno:matriz de elementos de seleção
|
setSelection() |
Seleciona as entidades do gráfico especificadas. Cancela qualquer seleção anterior.
Entidades selecionáveis são barras, entradas de legenda e categorias.
Uma barra corresponde a uma célula da tabela de dados, uma entrada de legenda a uma coluna (o índice da linha é nulo) e uma categoria a uma linha (o índice da coluna é nulo).
Somente uma entidade pode ser selecionada por vez para este gráfico.
Tipo de retorno:nenhum
|
clearChart() |
Limpa o gráfico e libera todos os recursos alocados. Tipo de retorno: nenhum
|
Eventos
| Nome | |
|---|---|
error |
Disparado quando ocorre um erro ao tentar renderizar o gráfico. Propriedades: ID e mensagem
|
onmouseover |
Disparado quando o usuário passa o mouse sobre uma entidade visual. Retorna o índice da linha e o valor da data da entidade. Se não houver nenhum elemento de tabela de dados para a entidade, o valor retornado para o índice
da linha será Propriedades: linha, data
|
onmouseout |
Disparado quando o usuário passa o mouse sobre uma entidade visual. Retorna o índice da linha e o valor da data da entidade. Se não houver nenhum elemento de tabela de dados para a entidade, o valor retornado
para o índice da linha será Linha de propriedades, data
|
ready |
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 Propriedades: nenhuma
|
select |
Disparado quando o usuário clica em uma entidade visual. Para saber o que foi selecionado, chame
Propriedades: nenhuma
|
Política de dados
Todos os códigos e dados são processados e renderizados no navegador. Nenhum dado é enviado para nenhum servidor.