NOAA   ERDDAP
Easier access to scientific data

Brought to you by NOAA NMFS SWFSC ERD    
 

Embed a Graph in a Web Page

If you are a web page author, you can embed ERDDAP's Make A Graph image URLs directly in your web pages with HTML <img> tags.
  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 &amp; .
  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.

    Or, for tabular datasets, you may change the time constraint in the URL to something like time>"now-2days"
    so that the image will always show the data from 2 days ago until now. more information

  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

    ERDDAP: SST, Blended, West US (Experimental, 5 Day Composite)


 

CONTACT

Questions, comments, suggestions? Please send an email to bob dot simons at noaa dot gov
and include the ERDDAP URL directly related to your question or comment.
 

ERDDAP, Version 1.66
Disclaimers | Privacy Policy