Incrustar un gráfico en una página web

Si es autor de una página web, puede incrustar una URL de imagen ERDDAP Make A Graph directamente en una de sus páginas web con una etiqueta HTML <img> (external link)

En ERDDAP, buscar un conjunto de datos de interés.
Haga clic en el enlace graph del conjunto de datos para ver la página web Make A Graph.
Modifica el gráfico hasta que luzca como lo deseas.
Especifique el File Type (por ejemplo, .png) y obtenga la URL del campo de texto view the URL .
Puede realizar cambios adicionales en la imagen agregando otros comandos a la URL. Por ejemplo, puede agregar comandos para especificar cualquier tamaño de imagen, eliminar el exceso de espacios en blanco en la parte inferior de la imagen y/o elegir ver el gráfico sin la leyenda. Consulte la documentación de griddap o la documentación tabledap .
Como preparación para utilizar la URL en la etiqueta HTML <img>, debe codificar todas las instancias de & en la URL como & .
En preparación para usar la URL en la etiqueta HTML <img>, debe codificar por ciento los caracteres especiales en la parte de consulta de la URL (que no sean el '&' inicial y el '=' principal en las restricciones) en el formato %HH, donde HH es el valor hexadecimal de 2 dígitos del carácter. Por lo general, solo necesita convertir algunos de los caracteres de puntuación: % en %25 y en %26, "en %22, < en %3C, = en %3D, > en %3E, + en %2B, | en %7C, [en %5B,] en %5D, espacio en %20 y convierta todos los caracteres superiores a #127 a su formato UTF-8 y luego codifique porcentualmente cada byte del formato UTF-8 al formato %HH (pedir ayuda a un programador).
Por ejemplo, &stationID>="41004"
se convierte &stationID%3E=%2241004%22
Tenga en cuenta que generalmente se requiere codificación porcentual cuando accede ERDDAP a través de un software que no sea un navegador. Los navegadores normalmente manejan el porcentaje de codificación por usted.
En algunas situaciones, necesita codificar por ciento todos los caracteres distintos de A-Za-z0-9_-!.~'()*, pero aún así no codificar por ciento el '&' inicial o el '=' principal en las restricciones.
Los lenguajes de programación tienen herramientas para hacer esto (por ejemplo, consulte java.net.URLEncoder de Java ). y encodeURIComponent() de Java Script ) y aquí están
Sitios web que codifican/decodifican por ciento para usted. .
Para conjuntos de datos cuadriculados, puede cambiar el valor de la dimensión de tiempo en la URL a (last) para que la imagen siempre muestre datos de la última fecha/hora en lugar de una fecha/hora específica.
O, para conjuntos de datos tabulares, puede cambiar la restricción de tiempo en la URL a algo como time>now-2days para que la imagen siempre muestre los datos desde hace 2 días hasta ahora. (más información)
O, para conjuntos de datos tabulares, puede cambiar la restricción de tiempo en la URL a algo como time>max(time)-2days para que la imagen siempre muestre los datos de los últimos 2 días del conjunto de datos. (más información)

Cree una etiqueta img en su documento HTML que haga referencia a esa URL modificada, por ejemplo

<img src="https://coastwatch.pfeg.noaa.gov/erddap/griddap/erdBA sst a5day.png?
sst %5B(last)%5D%5B(0.0)%5D%5B(22.0):(50.0 )%5D%5B(225.0):(255.0)%5D&amp;.draw=surface&amp;.vars=longitude%7Clatitude%7C sst &amp;.colorBar=Rainbow%7CC%7CLinear%7C8%7C32%7C"alt="SST, Combinado, Oeste de EE.
UU.
(Experimental, compuesto de 5 días)">

O, si quieres ser elegante, aquí tienes un ejemplo que incluye enlaces"más grandes"y"editar". Tenga en cuenta que las URL tienen diferentes extensiones de archivo (.largePng, .graph y .png).

<a href="https://coastwatch.pfeg.noaa.gov/erddap/griddap/erdBA sst a5day.largePng?
sst %5B(last)%5D%5B(0.0)%5D%5B(22.0):(50.0 )%5D%5B(225.0):(255.0)%5D&amp;.draw=surface&amp;.vars=longitude%7Clatitude%7C sst &amp;.colorBar=Rainbow%7CC%7CLinear%7C8%7C32%7C">más grande</ un>
<a href="https://coastwatch.pfeg.noaa.gov/erddap/griddap/erdBA sst a5day.graph?
sst %5B(last)%5D%5B(0.0)%5D%5B(22.0):(50.0 )%5D%5B(225.0):(255.0)%5D&amp;.draw=surface&amp;.vars=longitude%7Clatitude%7C sst &amp;.colorBar=Rainbow%7CC%7CLinear%7C8%7C32%7C">editar imagen / descargar datos</a>
<br>
<img src="https://coastwatch.pfeg.noaa.gov/erddap/griddap/erdBA sst a5day.png?
sst %5B(last)%5D%5B(0.0)%5D%5B(22.0):(50.0 )%5D%5B(225.0):(255.0)%5D&amp;.draw=surface&amp;.vars=longitude%7Clatitude%7C sst &amp;.colorBar=Rainbow%7CC%7CLinear%7C8%7C32%7C"alt="SST, Combinado, Oeste de EE.
UU.
(Experimental, compuesto de 5 días)">

Ese ejemplo hace estos enlaces y esta imagen:

imagen de edición más grande / datos de descarga
ERDDAP:
SST, combinado, oeste de EE.
UU.
(experimental, compuesto de 5 días)

Contacto

¿Preguntas, comentarios, sugerencias? Envíe un correo electrónico a erd dot data at noaa dot gov e incluya la URL ERDDAP directamente relacionada con su pregunta o comentario.

O puede unirse al grupo/lista de correo de Google ERDDAP visitando https://groups.google.com/forum/#!forum/erddap (external link) y haciendo clic en"Solicitar membresía". Una vez que sea miembro, puede publicar su pregunta allí o buscar para ver si la pregunta ya ha sido formulada y respondida.