Incorporer 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)

Dans ERDDAP, rechercher un ensemble de données qui vous intéresse.
Cliquez sur le lien graph de l'ensemble de données pour voir la page Web Créer un graphique.
Modifiez le graphique jusqu'à ce qu'il ressemble à ce que vous souhaitez.
Spécifiez le File Type (par exemple, .png) et obtenez l'URL dans le champ de texte 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 en excès au bas de l'image et/ou choisir d'afficher le graphique sans la légende. Consultez la documentation Griddap ou la documentation tabledap .
Afin de 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 & .
Afin de préparer 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. Habituellement, il vous 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, espace en %20 et convertissez tous les caractères au-dessus de #127 dans leur forme UTF-8, puis encodez en pourcentage chaque octet du formulaire UTF-8 au format %HH (demandez de l'aide à un programmeur).
Par exemple, &stationID>="41004"
devient &stationID%3E=%2241004%22
Notez que le codage 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 le codage en pourcentage pour vous.
Dans certaines situations, vous devez encoder en pourcentage tous les caractères autres que A-Za-z0-9_-!.~'()*, mais ne codez toujours pas en pourcentage le « & » initial ou le '=' principal dans les contraintes.
Les langages de programmation disposent d'outils pour ce faire (par exemple, voir java.net.URLEncoder de Java et encodeURIComponent() de Java Script ) et il y a
sites Web qui encodent/décodent pour vous .
Pour les ensembles de données quadrillés, vous pouvez modifier la valeur de la dimension temporelle dans l'URL sur (last) afin que l'image affiche toujours les données pour la date/heure la plus récente 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'information)
Ou, pour les ensembles de données tabulaires, vous pouvez modifier la contrainte de temps dans l'URL par 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'information)

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, Mélangé, Ouest des États-Unis (expérimental, composite de 5 jours)">

Ou, si vous voulez être plus sophistiqué, voici un exemple qui inclut les liens « le plus grand » et « modifier ». Notez que les URL ont des extensions de fichiers 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</ une>
<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, Mélangé, Ouest des États-Unis (expérimental, composite de 5 jours)">

Cet exemple crée ces liens et cette image :

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

Contact

Des questions, des commentaires, des suggestions ? Veuillez envoyer un e-mail à erd dot data at noaa dot gov et inclure l'URL ERDDAP directement liée à votre question ou commentaire.

Vous pouvez également rejoindre le groupe Google/liste de diffusion ERDDAP 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.