ERDDAP Easier access to scientific data

Brought to you by NOAA NMFS SWFSC ERD

Embed a Graph in a Web Page

1. In ERDDAP, search for a dataset of interest.
2. Click on the dataset's graph link to see the Make A Graph web page.
3. Modify the graph until it looks like you want it to.
4. Specify the File Type (for example, .png) and get the URL from the view the URL textfield.
5. You can make additional changes to the image by adding other commands to the URL. For example, you can
   add commands to specify any image size, remove excess whitespace at the bottom of the image, and/or
   choose to view the graph without the legend. See the griddap documentation or tabledap documentation.
6. Replace all instances of & in the URL with & .
7. If it hasn't already been done, replace all instances of <, >, and " in the URL with %3C, %3E, and %22, respectively.
8. For gridded datasets, you may change the time dimension's value in the URL to (last) so that
   the image will always show data for the latest date/time instead of a specific date/time.
9. Make an img tag in your HTML document which refers to that modified URL, for example

   <img src="http://coastwatch.pfel.noaa.gov/erddap/griddap/erdBAssta5day.png?sst[(last)][(0.0)][(22.0):(50.0)][(225.0):(255.0)]&amp;.draw=surface&amp;.vars=longitude|latitude|sst&amp;.colorBar=Rainbow|C|Linear|8|32|" alt="SST, Blended, West US (Experimental, 5 Day Composite)">

   Or, if you want to be fancy, here is an example that includes "largest" and "edit" links.
   Note that the URLs have different file extensions (.largePng, .graph, and .png).

   <a href="http://coastwatch.pfel.noaa.gov/erddap/griddap/erdBAssta5day.largePng?sst[(last)][(0.0)][(22.0):(50.0)][(225.0):(255.0)]&amp;.draw=surface&amp;.vars=longitude|latitude|sst&amp;.colorBar=Rainbow|C|Linear|8|32|">largest</a>
   <a href="http://coastwatch.pfel.noaa.gov/erddap/griddap/erdBAssta5day.graph?sst[(last)][(0.0)][(22.0):(50.0)][(225.0):(255.0)]&amp;.draw=surface&amp;.vars=longitude|latitude|sst&amp;.colorBar=Rainbow|C|Linear|8|32|">edit image / download data</a>
   <br>
   <img src="http://coastwatch.pfel.noaa.gov/erddap/griddap/erdBAssta5day.png?sst[(last)][(0.0)][(22.0):(50.0)][(225.0):(255.0)]&amp;.draw=surface&amp;.vars=longitude|latitude|sst&amp;.colorBar=Rainbow|C|Linear|8|32|" alt="SST, Blended, West US (Experimental, 5 Day Composite)">
   

   That example makes these links and this image:

   largest edit image / download data
   
   

CONTACT

ERDDAP, Version 1.38
Disclaimers | Privacy Policy