Time Series
Point-based Time Series
Area-averaged Time Series
Disable Auto-fetch on Plot Interactions
Importing
Properties
Events
Methods
Dependencies

Time Series

<terra-time-series> | TerraTimeSeries

Since 1.0

stable

A component for visualizing time series data using the GES DISC Giovanni API.

Point-based Time Series

Loading…please wait

Please login to view this plot

<terra-login style="width: 100%">
    <span slot="loading">Loading...please wait</span>

    <terra-time-series slot="logged-in"
        collection="GPM_3IMERGHH_07"
        variable="precipitation"
        start-date="01/01/2019"
        end-date="03/01/2019"
        location="33.9375,-86.9375"
    ></terra-time-series>

    <p slot="logged-out">Please login to view this plot</p>
</terra-login>

Area-averaged Time Series

Loading…please wait

Please login to view this plot

<terra-login style="width: 100%">
    <span slot="loading">Loading...please wait</span>

    <template slot="logged-in">
        <terra-time-series
            collection="GPM_3IMERGHH_07"
            variable="precipitation"
            start-date="01/01/2009"
            end-date="01/05/2009"
            location="62,5,95,40"
        ></terra-time-series>
    </template>

    <p slot="logged-out">Please login to view this plot</p>
</terra-login>

Disable Auto-fetch on Plot Interactions

By default, the time series component automatically fetches new data when users zoom, pan, or interact with the plot. You can disable this behavior using the disable-auto-fetch attribute:

Loading…please wait

Please login to view this plot

<terra-login style="width: 100%">
    <span slot="loading">Loading...please wait</span>

    <terra-time-series slot="logged-in"
        collection="GPM_3IMERGHH_07"
        variable="precipitation"
        start-date="01/01/2019"
        end-date="03/01/2019"
        location="33.9375,-86.9375"
        disable-auto-fetch
    ></terra-time-series>

    <p slot="logged-out">Please login to view this plot</p>
</terra-login>

import TerraTimeSeries from '@nasa-terra/components/dist/react/time-series'

const App = () => <TerraTimeSeries
    collection="GPM_3IMERGHH_06"
    variable="precipitationCal"
    start-date="01/01/2019"
    end-date="09/01/2021"></TerraTimeSeries>

[component-metadata:terra-time-series]

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Script

Import

Bundler

React

To import this component from the CDN using a script tag:

<script type="module" src="https://cdn.jsdelivr.net/npm/@nasa-terra/components@0.0.138/cdn/components/time-series/time-series.js"></script>

To import this component from the CDN using a JavaScript import:

import 'https://cdn.jsdelivr.net/npm/@nasa-terra/components@0.0.138/cdn/components/time-series/time-series.js';

To import this component using a bundler:

import '@nasa-terra/components/dist/components/time-series/time-series.js';

To import this component as a React component:

import TerraTimeSeries from '@nasa-terra/components/dist/react/time-series';

Properties

Name	Description	Type	Default
`variableEntryId` `variable-entry-id`	a variable entry ID (ex: GPM_3IMERGHH_06_precipitationCal)	`string \| undefined`	-
`collection`	a collection entry id (ex: GPM_3IMERGHH_06) only required if you don’t include a variableEntryId	`string \| undefined`	-
`variable`	a variable short name to plot (ex: precipitationCal) only required if you don’t include a variableEntryId	`string \| undefined`	-
`startDate` `start-date`	The start date for the time series plot. (ex: 2021–01–01)	`string \| undefined`	-
`endDate` `end-date`	The end date for the time series plot. (ex: 2021–01–01)	`string \| undefined`	-
`location`	The point location in “lat,lon” format. Or the bounding box in “west,south,east,north” format.	`string \| undefined`	-
`applicationCitation` `application-citation`	if you include an application citation, it will be displayed in the citation panel alongside the dataset citation	`string \| undefined`	-
`disableAutoFetch` `disable-auto-fetch`	When true, disables automatic data fetching when the user zooms, pans, or otherwise interacts with the plot. When disabled, the plot will only show the data for the initial date range and won’t fetch new data on plot interactions.	`boolean`	`false`
`bearerToken` `bearer-token`	The token to be used for authentication with remote servers. The component provides the header “Authorization: Bearer” (the request header and authentication scheme). The property’s value will be inserted after “Bearer” (the authentication scheme).	`string \| undefined`	-
`showDataPointWarning`	if true, we’ll show a warning to the user about them requesting a large number of data points	`boolean`	`false`
`estimatedDataPoints`	stores the estimated	`number`	`0`
`updateComplete`	A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Events

Name	React Event	Description	Event Detail
`terra-date-range-change`	`onTerraDateRangeChange`	Emitted whenever the date range is modified	`CustomEvent`
`terra-time-series-data-change`	`onTerraTimeSeriesDataChange`	Emitted whenever time series data has been fetched from Giovanni	-

Learn more about events.

Methods

Name	Description	Arguments
`#abortDataLoad()`	aborts the underlying data loading task, which cancels the network request	-

Learn more about methods.

Dependencies

This component automatically imports the following dependencies.

<terra-plot>