Descripción general
Un indicador con un dial, procesado en el navegador con 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>
En este momento, no hay forma de especificar el título de un gráfico de indicadores como lo puedes 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 disponible para muchos otros gráficos de Google no está disponible en el gráfico de Gauge. Si quieres una animación de inicio, dibuja el gráfico inicialmente con valores establecidos en cero y, luego, vuelve a dibujarlo con el valor 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 los 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 string y debe contener la etiqueta de indicador. La segunda columna debe ser un número y debe 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 | |
|---|---|
| animación.duración |
Es la duración en milisegundos de la animación. Para obtener más detalles, consulta la documentación sobre animaciones. Tipo: número
Valor predeterminado: 400
|
| Animación |
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 i-frames). Tipo: booleano
Valor predeterminado: falso
|
| color verde |
El color que se usará para la sección verde en notación de colores HTML. Tipo: string
Valor predeterminado: "#109618"
|
| verdeDe |
El valor más bajo de un rango marcado por un color verde. Tipo: número
Predeterminado: ninguno
|
| verdePara |
El valor más alto de un rango marcado por un color verde. Tipo: número
Predeterminado: ninguno
|
| alto |
Altura del gráfico en píxeles. Tipo: número
Predeterminado: ancho del contenedor
|
| Marcas principales |
Etiquetas para las principales marcas. La cantidad de etiquetas define la cantidad de marcas principales en todos los medidores. El valor predeterminado es cinco marcas principales, con las etiquetas del valor del indicador mínimo y máximo. Tipo: Arreglo de strings
Predeterminado: ninguno
|
| máx. |
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
|
| Indicadores menores |
Es la cantidad de marcas secundarias en cada sección principal de marcas. Tipo:número
Predeterminado: 2
|
| color rojo |
El color que se usará para la sección roja, en notación de colores HTML. Tipo: string
Configuración predeterminada: "#DC3912"
|
| rojo de |
El valor más bajo de un rango marcado por un color rojo. Tipo: número
Predeterminado: ninguno
|
| rojoPara |
El valor más alto de un rango marcado por un color rojo. Tipo: número
Predeterminado: ninguno
|
| ancho |
Ancho del gráfico en píxeles. Tipo: número
Predeterminado: ancho del contenedor
|
| color amarillo |
El color que se usará para la sección amarilla en notación de colores HTML. Tipo: string
Configuración predeterminada: "#FF9900"
|
| amarillo de |
El valor más bajo de un rango marcado por un color amarillo. Tipo: número
Predeterminado: ninguno
|
| amarilloPara |
El valor más alto de un rango marcado por un color amarillo. Tipo: número
Predeterminado: ninguno
|
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 los recursos asignados. Tipo de datos que se muestra: ninguno
|
Eventos
No hay eventos activados.
Política de Datos
El código y los datos se procesan y procesan en el navegador. No se envían datos a ningún servidor.