The ui.Chart.image module contains a set of functions for rendering charts
from the results of spatiotemporal reduction of images within an
ImageCollection. The choice of function dictates the arrangement of data in
the chart, i.e., what defines x- and y-axis values and what defines the series.
Use the following function descriptions and examples to determine the best
function for your purpose.
Chart functions
Use the following plot diagrams as a visual guide to understand how each
function arranges spatiotemporal image collection reduction results in a chart;
i.e., what elements define x values, y values, and series. Note that
ui.Chart.image.doySeries* functions take two reducers: one for region
reduction (regionReducer) and another for intra-annual coincident day-of-year
reduction (yearReducer). Examples in the following sections use
ee.Reducer.mean() as the argument for both of these parameters.
Image date is plotted along the x-axis according to the
system:time_start property. Series are defined by image bands. Y-axis values
are the reduction of images, by date, for a single region.
Image date is plotted along the x-axis according to the
system:time_start property. Series are defined by regions. Y-axis values
are the reduction of images, by date, for a single image band.
Image day-of-year is plotted along the x-axis according to the
system:time_start property. Series are defined by image bands. Y-axis values
are the reduction of image pixels in a given region, grouped by day-of-year.
ui.Chart.image.doySeriesByYear
Image day-of-year is plotted along the x-axis according to the
system:time_start property. Series are defined by years present in the
ImageCollection. Y-axis values are the reduction of image pixels in a given
region, grouped by day-of-year, for a selected image band.
ui.Chart.image.doySeriesByRegion
Image day-of-year is plotted along the x-axis according to the
system:time_start property. Series are defined by regions. Y-axis values are
the reduction of image pixels in a given region, grouped by day-of-year, for a
selected image band.
Example data
The following examples rely on an ImageCollection that is a time series of
MODIS-based NDVI and EVI. Region reduction is performed on ecoregions defined by
features in a FeatureCollection designed for demonstration purposes
(learn how it was made).
ui.Chart.image.series
Use ui.Chart.image.series to display an image time series for a given region;
each image band is presented as a unique series. It is useful for comparing the
time series of individual image bands. Here, a MODIS
image collection with bands representing NDVI and EVI vegetation indices
are plotted. The date of every image observation is included along the
x-axis, while the mean reduction of pixels intersecting a forest ecoregion
defines the y-axis.
Code Editor (JavaScript)
// Import the example feature collection and subset the forest feature.
var forest = ee.FeatureCollection('projects/google/charts_feature_example')
.filter(ee.Filter.eq('label', 'Forest'));
// Load MODIS vegetation indices data and subset a decade of images.
var vegIndices = ee.ImageCollection('MODIS/006/MOD13A1')
.filter(ee.Filter.date('2010-01-01', '2020-01-01'))
.select(['NDVI', 'EVI']);
// Define the chart and print it to the console.
var chart =
ui.Chart.image
.series({
imageCollection: vegIndices,
region: forest,
reducer: ee.Reducer.mean(),
scale: 500,
xProperty: 'system:time_start'
})
.setSeriesNames(['EVI', 'NDVI'])
.setOptions({
title: 'Average Vegetation Index Value by Date for Forest',
hAxis: {title: 'Date', titleTextStyle: {italic: false, bold: true}},
vAxis: {
title: 'Vegetation index (x1e4)',
titleTextStyle: {italic: false, bold: true}
},
lineWidth: 5,
colors: ['e37d05', '1d6b99'],
curveType: 'function'
});
print(chart);
ui.Chart.image.seriesByRegion
Use ui.Chart.image.seriesByRegion to display a single image band time
series for multiple regions; each region is presented as a unique series. It is
useful for comparing the time series of a single band among several regions.
Here, a MODIS image collection representing an NDVI time series
is plotted for three ecoregions. The date of every image observation is
included along the x-axis, while mean reduction of pixels intersecting
forest, desert, and grasslands ecoregions define y-axis series.
Code Editor (JavaScript)
// Import the example feature collection.
var ecoregions = ee.FeatureCollection('projects/google/charts_feature_example');
// Load MODIS vegetation indices data and subset a decade of images.
var vegIndices = ee.ImageCollection('MODIS/006/MOD13A1')
.filter(ee.Filter.date('2010-01-01', '2020-01-01'))
.select(['NDVI', 'EVI']);
// Define the chart and print it to the console.
var chart =
ui.Chart.image
.seriesByRegion({
imageCollection: vegIndices,
band: 'NDVI',
regions: ecoregions,
reducer: ee.Reducer.mean(),
scale: 500,
seriesProperty: 'label',
xProperty: 'system:time_start'
})
.setOptions({
title: 'Average NDVI Value by Date',
hAxis: {title: 'Date', titleTextStyle: {italic: false, bold: true}},
vAxis: {
title: 'NDVI (x1e4)',
titleTextStyle: {italic: false, bold: true}
},
lineWidth: 5,
colors: ['f0af07', '0f8755', '76b349'],
});
print(chart);
ui.Chart.image.doySeries
Use ui.Chart.image.doySeries to display a day-of-year time series for a
given region; each image band is presented as a unique series. It is useful for
reducing observations occurring on the same day-of-year, across multiple
years, to compare e.g. average annual NDVI and EVI profiles from MODIS, as in
this example.
Code Editor (JavaScript)
// Import the example feature collection and subset the grassland feature.
var grassland = ee.FeatureCollection('projects/google/charts_feature_example')
.filter(ee.Filter.eq('label', 'Grassland'));
// Load MODIS vegetation indices data and subset a decade of images.
var vegIndices = ee.ImageCollection('MODIS/006/MOD13A1')
.filter(ee.Filter.date('2010-01-01', '2020-01-01'))
.select(['NDVI', 'EVI']);
// Define the chart and print it to the console.
var chart =
ui.Chart.image
.doySeries({
imageCollection: vegIndices,
region: grassland,
regionReducer: ee.Reducer.mean(),
scale: 500,
yearReducer: ee.Reducer.mean(),
startDay: 1,
endDay: 365
})
.setSeriesNames(['EVI', 'NDVI'])
.setOptions({
title: 'Average Vegetation Index Value by Day of Year for Grassland',
hAxis: {
title: 'Day of year',
titleTextStyle: {italic: false, bold: true}
},
vAxis: {
title: 'Vegetation index (x1e4)',
titleTextStyle: {italic: false, bold: true}
},
lineWidth: 5,
colors: ['e37d05', '1d6b99'],
});
print(chart);
ui.Chart.image.doySeriesByYear
Use ui.Chart.image.doySeriesByYear to display a day-of-year time series for a
given region and image band, where each distinct year in the image collection is
presented as a unique series. It is useful for comparing annual time series
among years. For instance, in this example, annual MODIS-derived NDVI profiles
for a grassland ecoregion are plotted for years 2012 and 2019, providing
convenient year-over-year interpretation.
Code Editor (JavaScript)
// Import the example feature collection and subset the grassland feature.
var grassland = ee.FeatureCollection('projects/google/charts_feature_example')
.filter(ee.Filter.eq('label', 'Grassland'));
// Load MODIS vegetation indices data and subset years 2012 and 2019.
var vegIndices = ee.ImageCollection('MODIS/006/MOD13A1')
.filter(ee.Filter.or(
ee.Filter.date('2012-01-01', '2013-01-01'),
ee.Filter.date('2019-01-01', '2020-01-01')))
.select(['NDVI', 'EVI']);
// Define the chart and print it to the console.
var chart = ui.Chart.image
.doySeriesByYear({
imageCollection: vegIndices,
bandName: 'NDVI',
region: grassland,
regionReducer: ee.Reducer.mean(),
scale: 500,
sameDayReducer: ee.Reducer.mean(),
startDay: 1,
endDay: 365
})
.setOptions({
title: 'Average NDVI Value by Day of Year for Grassland',
hAxis: {
title: 'Day of year',
titleTextStyle: {italic: false, bold: true}
},
vAxis: {
title: 'NDVI (x1e4)',
titleTextStyle: {italic: false, bold: true}
},
lineWidth: 5,
colors: ['39a8a7', '9c4f97'],
});
print(chart);
ui.Chart.image.doySeriesByRegion
Use ui.Chart.image.doySeriesByRegion to display a single image band
day-of-year time series for multiple regions, where each distinct region is
presented as a unique series. It is useful for comparing annual single-band time
series among regions. For instance, in this example, annual MODIS-derived NDVI
profiles for forest, desert, and grassland ecoregions are plotted, providing a
convenient comparison of NDVI response by region. Note that intra-annual
observations occurring on the same day-of-year are reduced by their mean.
Code Editor (JavaScript)
// Import the example feature collection.
var ecoregions = ee.FeatureCollection('projects/google/charts_feature_example');
// Load MODIS vegetation indices data and subset a decade of images.
var vegIndices = ee.ImageCollection('MODIS/006/MOD13A1')
.filter(ee.Filter.date('2010-01-01', '2020-01-01'))
.select(['NDVI', 'EVI']);
// Define the chart and print it to the console.
var chart = ui.Chart.image
.doySeriesByRegion({
imageCollection: vegIndices,
bandName: 'NDVI',
regions: ecoregions,
regionReducer: ee.Reducer.mean(),
scale: 500,
yearReducer: ee.Reducer.mean(),
seriesProperty: 'label',
startDay: 1,
endDay: 365
})
.setOptions({
title: 'Average NDVI Value by Day of Year',
hAxis: {
title: 'Day of year',
titleTextStyle: {italic: false, bold: true}
},
vAxis: {
title: 'NDVI (x1e4)',
titleTextStyle: {italic: false, bold: true}
},
lineWidth: 5,
colors: ['f0af07', '0f8755', '76b349'],
});
print(chart);