Seguindo com nosso estudo da API de gráficos do Google, neste post vou demonstrar como utilizar um componente utilizado por 10 entre 10 desenvolvedores corporativos que trabalham com dashboard’s, o Gauge. Trata-se daqueles relógios, ou velocímetros, que server para criar indicadores de acompanhamento de metas ou indicadores que necessitam estar dentro de limites de controles.
São principalmente muito úteis na criação de painéis, pois fornecem diversas informações sobre um mesmo elemento, e mais do que isso, são visualmente muito bonitos e impactantes. Portanto se você também quer impressionar seu chefe, mãos a obra.
O primeiro passo é carregar o pacote ‘gauge‘, correspondente aos gráficos do tipo Gauge.
google.load('visualization', '1', {packages:['gauge']});
O seguinte passo é a definição dos dados do gráfico. Este tipo de gráfico possui duas informações básicas: O label, ou texto do gráfico e o valor do gráfico, que posicionará a ‘agulha’ do mesmo. Portanto o DataTable para este tipo de gráfico deve possuir apenas duas colunas, sendo a primeira o Label, e a segunda os Valores. É possível criar em um único gráfico, diversos ‘velocímetros’, criando portanto diversos gauges sobre o mesmo componente chart. Para isso cada linha do DataTable representará um gauge diferente.
var data = google.visualization.arrayToDataTable([ ['Label', 'Value'], ['Memory', 80], ['CPU', 55], ['Network', 68] ]);
No caso acima, serão criados três Gauges, um exibindo a informação de Memória, o segundo CPU e o último Rede.
O último passo é a definição dos ranges (ou faixas) dos gráficos, e caso necessário, as faixas de cores do gauge.
var options = {
width: 400, height: 120,
redFrom: 90, redTo: 100,
minorTicks: 5
};
No exemplo acima além das opções de altura e largura do gráfico, também é possível definir as faixas de valores para cada cor do gráfico, além do valor dos marcadores intermediários do mostrador dos Gauges.
Após as definições acima, basta apenas instanciar um novo componente chart e passar como parâmetro as informações de DataTable e options.
var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
chart.draw(data, options);
Pronto! Nosso Gauge já está funcional!
Observação: O componente chart permite apenas um objeto de customização options. Portanto só é possível definir um valor para cada faixa de cor dos gráficos. Sendo assim se você necessita Gauges com distintos valores de faixas, será necessário criar distintos componentes chart e inserir cada um em uma respectiva <div>.
Abaixo o código completo do nosso exemplo. Não deixem de avisar caso tenham alguma dúvida. Abraços!
<html>
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {packages:['gauge']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Memory', 80],
['CPU', 55],
['Network', 68]
]);
var options = {
width: 400, height: 120,
redFrom: 90, redTo: 100,
yellowFrom:75, yellowTo: 90,
minorTicks: 5
};
var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id='chart_div'></div>
</body>
</html>
(emilioParme){} 