Descripción general del gráfico

El Editor de código de JavaScript de Earth Engine se integra sin problemas en Google Charts para una visualización conveniente de datos tabulares a través de funciones ui.Chart. Los gráficos se pueden mostrar de forma interactiva en la consola del Editor de código, en los widgets de ui.Panel y en las pestañas independientes del navegador.

Gráficos de DataTable

Earth Engine usa la API de Google Visualization para admitir gráficos. La API acepta un DataTable, que es una tabla de 2 dimensiones en la que las filas son observaciones y las columnas son atributos de observación. Todos los gráficos de Earth Engine se derivan de un DataTable. El widget ui.Chart te permite proporcionar un DataTable directamente. Ofrece la mayor oportunidad para la personalización de gráficos, pero puede ser menos conveniente que los métodos para crear gráficos de objetos específicos de Earth Engine (consulta la siguiente sección). Obtén más información para crear gráficos a partir de un DataTable:

Gráficos de objetos de Earth Engine

El widget ui.Chart proporciona métodos auxiliares para construir un DataTable y renderizar gráficos a partir de objetos Image, ImageCollection, Feature, FeatureCollection, Array y List. Cada función acepta un tipo de datos específico y también incluye métodos para reducir los datos a formato tabular en una variedad de arreglos que dictan la asignación de datos a las series y los ejes de los gráficos.

Visita los siguientes vínculos para aprender a generar un gráfico para cada tipo de datos:

Tipos de gráficos

Se puede producir una variedad de tipos de gráficos, por ejemplo: diagramas de dispersión, de líneas, de barras, circulares y histogramas. Específicamente, se puede generar cualquier tipo de gráfico que esté disponible en el paquete corechart de Google Charts. Usa el método ui.Chart.setChartType() para configurar el tipo de gráfico. Cada página a la que se hace referencia en las secciones de gráficos de objetos de Earth Engine y gráficos de DataTable incluye ejemplos para generar varios tipos de gráficos.

Usa las siguientes cadenas como entrada para el método ui.Chart.setChartType():

'ScatterChart'
'LineChart'
'ColumnChart'
'BarChart'
'PieChart'
'AreaChart'

A continuación, se muestra un ejemplo:

var data = ee.List([0, 1, 2, 3, 4, 5]);
var chart = ui.Chart.array.values(data, 0, data)
  .setChartType('ColumnChart');
print(chart);

Visualización y descarga

Los widgets ui.Chart se pueden mostrar de tres maneras:

var data = ee.List([0, 1, 2, 3, 4, 5]);
var chart = ui.Chart.array.values(data, 0, data);
print(chart);

var data = ee.List([0, 1, 2, 3, 4, 5]);
var chart = ui.Chart.array.values(data, 0, data);
var chartPanel = ui.Panel(chart);
Map.add(chartPanel);
  • En otra pestaña del navegador, haz clic en el ícono emergente () que se encuentra en la esquina superior derecha de un widget ui.Chart que se muestra. La página nueva proporciona una visualización de ventana completa y opciones para descargar el gráfico como un gráfico (PNG o SVG) o un archivo CSV de los datos subyacentes.

Interactividad

Los gráficos son interactivos de forma predeterminada. Coloca el cursor sobre puntos, líneas, barras, etc. para ver los valores de x, y y serie correspondientes. De manera opcional, puedes activar la funcionalidad de “explorador” de un gráfico para acercar y alejar los ejes.

Diseño

Google Charts se puede personalizar en gran medida a través de las propiedades de diseño. Usa el método ui.Chart.setOptions() para establecer las propiedades de estilo del gráfico. Consulta la guía de diseño de gráficos para obtener todos los detalles.

Limitaciones

Las funciones ui.Chart solo renderizarán 5,000 componentes. Si tu FeatureCollection, ImageCollection, Array o List tiene más elementos, considera las formas en que podrías limitar los datos. Si tienes una serie temporal larga con una tasa de cadencia alta, intenta usar un período más corto, un muestreo temporal o generar compuestos temporales. Si el problema es espacial, intenta usar un subconjunto aleatorio. Si trabajas con píxeles en una lista o un array, intenta usar una escala un poco más grande o una región más pequeña.

Los cálculos de larga duración pueden no generar un gráfico debido a los límites de respuesta interactivos del editor de código. Si se agota el tiempo de espera de tu solicitud de gráfico, intenta exportar los pasos intermedios de tu análisis y volver a generar el gráfico a partir de los recursos exportados.