Embed a Graph in a Web Page

If you are a web page author, you can embed an ERDDAP Make A Graph image URL directly in one of your web pages with an HTML <img> tag (external link).
  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. In preparation for using the URL in the HTML <img> tag, you must encode all instances of & in the URL as &amp; .
     
  7. In preparation for using the URL in the HTML <img> tag, you must percent encode (external link) the special characters in the query part of the URL (other than the initial '&' and the main '=' in constraints) into the form %HH, where HH is the 2 digit hexadecimal value of the character. Usually, you just need to convert a few of the punctuation characters: % into %25, & into %26, " into %22, < into %3C, = into %3D, > into %3E, + into %2B, | into %7C, [ into %5B, ] into %5D, space into %20, and convert all characters above #127 into their UTF-8 form and then percent encode each byte of the UTF-8 form into the %HH format (ask a programmer for help).
    For example, &stationID>="41004"
    becomes       &stationID%3E=%2241004%22
    Note that percent encoding is generally required when you access ERDDAP via software other than a browser. Browsers usually handle percent encoding for you.
    In some situations, you need to percent encode all characters other than A-Za-z0-9_-!.~'()*, but still don't percent encode the initial '&' or the main '=' in constraints.
    Programming languages have tools to do this (for example, see Java's java.net.URLEncoder (external link) and JavaScript's encodeURIComponent() (external link)) and there are
    web sites that percent encode/decode for you (external link).
     
  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)

    Or, for tabular datasets, you may change the time constraint in the URL to something like time>max(time)-2days so that the image will always show the last 2 days worth of data from the dataset. (more information)

  9. Make an img tag in your HTML document which refers to that modified URL, for example 
    <img src="https://coastwatch.pfeg.noaa.gov/erddap/griddap/erdBAssta5day.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%7Csst&amp;.colorBar=Rainbow%7CC%7CLinear%7C8%7C32%7C" 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="https://coastwatch.pfeg.noaa.gov/erddap/griddap/erdBAssta5day.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%7Csst&amp;.colorBar=Rainbow%7CC%7CLinear%7C8%7C32%7C">largest</a>
<a href="https://coastwatch.pfeg.noaa.gov/erddap/griddap/erdBAssta5day.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%7Csst&amp;.colorBar=Rainbow%7CC%7CLinear%7C8%7C32%7C">edit image / download data</a>
<br>
<img src="https://coastwatch.pfeg.noaa.gov/erddap/griddap/erdBAssta5day.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%7Csst&amp;.colorBar=Rainbow%7CC%7CLinear%7C8%7C32%7C" 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 erd dot data at noaa dot gov and include the ERDDAP URL directly related to your question or comment.

Or, you can join the ERDDAP Google Group / Mailing List by visiting https://groups.google.com/forum/#!forum/erddap (external link) and clicking on "Apply for membership". Once you are a member, you can post your question there or search to see if the question has already been asked and answered.