Descripción general
Un medidor con un dial, representado en el navegador mediante SVG o VML.
Ejemplo
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['gauge']});
google.charts.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);
setInterval(function() {
data.setValue(0, 1, 40 + Math.round(60 * Math.random()));
chart.draw(data, options);
}, 13000);
setInterval(function() {
data.setValue(1, 1, 40 + Math.round(60 * Math.random()));
chart.draw(data, options);
}, 5000);
setInterval(function() {
data.setValue(2, 1, 60 + Math.round(20 * Math.random()));
chart.draw(data, options);
}, 26000);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 400px; height: 120px;"></div>
</body>
</html>
Por el momento, no se puede especificar el título de un gráfico de indicadores como se puede hacer con otros gráficos de Google. En el ejemplo anterior, se usa HTML simple para mostrar el título.
Además, la opción animation.startup que está disponible para muchos otros gráficos de Google no está disponible para el gráfico de indicadores. Si deseas una animación de inicio, dibuja el gráfico inicialmente con valores establecidos en cero y, luego, vuelve a dibujar con el valor al que quieres animar.
Cargando
El nombre del paquete google.charts.load es "gauge".
google.charts.load('current', {packages: ['gauge']});
El nombre de clase de la visualización es google.visualization.Gauge.
var visualization = new google.visualization.Gauge(container);
Formato de datos
Cada valor numérico se muestra como un indicador. Se admiten dos formatos de datos alternativos:
- Dos columnas. La primera columna debe ser una cadena y contener la etiqueta del indicador. La segunda columna debe ser un número y contener el valor del indicador.
- Cualquier cantidad de columnas numéricas. La etiqueta de cada indicador es la etiqueta de la columna.
Opciones de configuración
| Nombre | |
|---|---|
| animation.duration |
Es la duración de la animación en milisegundos. Para obtener más detalles, consulta la documentación sobre animaciones. Tipo: Número
Valor predeterminado: 400
|
| animation.easing |
Es la función de aceleración aplicada a la animación. Están disponibles las siguientes opciones:
Tipo: string
Predeterminado: "lineal"
|
| forceIFrame |
Dibuja el gráfico dentro de un marco intercalado. (Ten en cuenta que, en IE8, esta opción se ignora; todos los gráficos de IE8 se dibujan en iframes). Tipo: booleano
Predeterminado: falso
|
| greenColor |
El color que se usará para la sección verde, en notación de colores HTML. Tipo: string
Predeterminado: “#109618”
|
| greenFrom |
El valor más bajo de un rango marcado con un color verde. Tipo: Número
Configuración predeterminada: ninguna
|
| greenTo |
El valor más alto de un rango marcado con un color verde. Tipo: Número
Configuración predeterminada: ninguna
|
| height |
Es la altura del gráfico en píxeles. Tipo: Número
Predeterminado: Ancho del contenedor
|
| majorTicks |
Etiquetas para las marcas principales La cantidad de etiquetas define la cantidad de marcas principales en todos los indicadores. La configuración predeterminada son cinco marcas principales, con las etiquetas del valor de indicador mínimo y máximo. Tipo: Arreglo de cadenas
Configuración predeterminada: ninguna
|
| max |
Es el valor máximo de un indicador. Tipo: Número
Valor predeterminado: 100
|
| min |
El valor mínimo de un indicador. Tipo: Número
Valor predeterminado: 0
|
| minorTicks |
La cantidad de secciones de marcas secundarias en cada sección de marcas principales. Tipo: número
Valor predeterminado: 2
|
| redColor |
El color que se usará para la sección roja, en notación de colores HTML. Tipo: string
Predeterminado: “#DC3912”
|
| redFrom |
El valor más bajo de un rango marcado por un color rojo. Tipo: Número
Configuración predeterminada: ninguna
|
| redTo |
El valor más alto para un rango marcado con un color rojo. Tipo: Número
Configuración predeterminada: ninguna
|
| width |
Es el ancho del gráfico en píxeles. Tipo: Número
Predeterminado: Ancho del contenedor
|
| yellowColor |
El color que se usará para la sección amarilla, en notación de colores HTML. Tipo: string
Predeterminado: “#FF9900”
|
| yellowFrom |
El valor más bajo de un rango marcado con un color amarillo. Tipo: Número
Configuración predeterminada: ninguna
|
| yellowTo |
El valor más alto para un rango marcado con un color amarillo. Tipo: Número
Configuración predeterminada: ninguna
|
Métodos
| Método | |
|---|---|
draw(data, options) |
Dibuja el gráfico. Tipo de datos que se muestra: ninguno
|
clearChart() |
Borra el gráfico y libera todos sus recursos asignados. Tipo de datos que se muestra: ninguno
|
Eventos
No se activaron eventos.
Política de Datos
Todo el código y los datos se procesan y renderizan en el navegador. No se envían datos a ningún servidor.