Intégrer un graphique dans une page Web

Si vous êtes un auteur de page Web, vous pouvez intégrer une URL d'image ERDDAP Make A Graph directement dans l'une de vos pages Web avec une balise HTML <img> (external link)

A ERDDAP, rechercher un ensemble de données d'intérêt.
Cliquez sur le lien du graph de l'ensemble de données pour voir la page Web Make A Graph.
Modifiez le graphique jusqu'à ce qu'il ressemble à ce que vous voulez.
Spécifiez le File Type (par exemple, .png) et obtenez l'URL dans le champ de texte de la view the URL .
Vous pouvez apporter des modifications supplémentaires à l'image en ajoutant d'autres commandes à l'URL. Par exemple, vous pouvez ajouter des commandes pour spécifier n'importe quelle taille d'image, supprimer les espaces blancs en excès au bas de l'image et/ou choisir d'afficher le graphique sans la légende. Voir la documentation griddap ou la documentation tabledap .
Pour préparer l'utilisation de l'URL dans la balise HTML <img>, vous devez encoder toutes les instances de & dans l'URL en tant que & .
En vue de l'utilisation de l'URL dans la balise HTML <img>, vous devez encoder en pourcentage les caractères spéciaux dans la partie requête de l'URL (autres que le '&' initial et le '=' principal dans les contraintes) sous la forme %HH, où HH est la valeur hexadécimale à 2 chiffres du caractère. Généralement, il suffit de convertir quelques caractères de ponctuation : % en %25, & en %26, "en %22, < en %3C, = en %3D, > en %3E, + en %2B, | en %7C, [ en %5B, ] en %5D, espacez en %20, et convertissez tous les caractères au-dessus de #127 dans leur forme UTF-8, puis encodez chaque octet de la forme UTF-8 au format %HH (demander de l'aide à un programmeur).
Par exemple, &stationID>="41004"
devient &stationID%3E=%2241004%22
Notez que l'encodage en pourcentage est généralement requis lorsque vous accédez à ERDDAP via un logiciel autre qu'un navigateur. Les navigateurs gèrent généralement l'encodage en pourcentage pour vous.
Dans certaines situations, vous devez coder en pourcentage tous les caractères autres que A-Za-z0-9_-!.~'()*, mais ne pas coder en pourcentage le '&' initial ou le '=' principal dans les contraintes.
Les langages de programmation ont des outils pour le faire (par exemple, voir java.net.URLEncoder de Java et encodeURIComponent() de JavaScript ) et il y a
sites Web dont le pourcentage encode/décode pour vous .
Pour les ensembles de données en grille, vous pouvez modifier la valeur de la dimension temporelle dans l'URL en (last) afin que l'image affiche toujours les données de la dernière date/heure au lieu d'une date/heure spécifique.
Ou, pour les ensembles de données tabulaires, vous pouvez modifier la contrainte de temps dans l'URL en quelque chose comme time>now-2days afin que l'image affiche toujours les données d'il y a 2 jours jusqu'à maintenant. (plus d'informations)
Ou, pour les ensembles de données tabulaires, vous pouvez modifier la contrainte de temps dans l'URL en quelque chose comme time>max(time)-2days afin que l'image affiche toujours les 2 derniers jours de données de l'ensemble de données. (plus d'informations)

Créez une balise img dans votre document HTML qui fait référence à cette URL modifiée, par exemple

<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, mixte, ouest des États-Unis (expérimental, composite 5 jours)">

Ou, si vous voulez être sophistiqué, voici un exemple qui inclut les liens"le plus grand"et"modifier". Notez que les URL ont des extensions de fichier différentes (.largePng, .graph et .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">plus grand</ 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">modifier l'image / télécharger des données</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, mixte, ouest des États-Unis (expérimental, composite 5 jours)">

Cet exemple fait ces liens et cette image :

plus grande image d'édition / données de téléchargement
ERDDAP :
SST, mixte, ouest des États-Unis (expérimental, composite à 5 jours)

Contact

Questions, commentaires, suggestions? Veuillez envoyer un e-mail à bob dot simons at noaa dot gov et inclure l'URL ERDDAP directement liée à votre question ou commentaire.

Ou, vous pouvez rejoindre le groupe Google ERDDAP / liste de diffusion en visitant https://groups.google.com/forum/#!forum/erddap (external link) et en cliquant sur"Demander l'adhésion". Une fois que vous êtes membre, vous pouvez y poster votre question ou effectuer une recherche pour voir si la question a déjà été posée et répondue.