oEmbed
oEmbed is a standard for embedding content of a given URL on third party sites. An oEmbed request takes the URL of the published chart as a parameter. For example, for the chart with the URL https://datawrapper.dwcdn.net/WpAbK/2/
it would look like this:
curl --request GET \
--url https://api.datawrapper.de/v3/oembed?format=json&url=https%3A%2F%2Fdatawrapper.dwcdn.net%2FWpAbK%2F2%2F
A response would look like this:
{
"type": "rich",
"version": 1,
"provider_name": "Datawrapper",
"provider_url": "http://app.datawrapper.de",
"title": "<strong>More than Earth can handle</strong>",
"html": "<iframe title=\"More than Earth can handle\" aria-label=\"Interactive line chart\" id=\"datawrapper-chart-WpAbK\" src=\"//datawrapper.dwcdn.net/WpAbK/2/\" scrolling=\"no\" frameborder=\"0\" style=\"width: 0; min-width: 100% !important; border: none;\" height=\"500\"></iframe><script type=\"text/javascript\">(function() {\n 'use strict';\n\n window.addEventListener('message', function(event) {\n if (typeof event.data['datawrapper-height'] !== 'undefined') {\n for (var chartId in event.data['datawrapper-height']) {\n var iframe = document.getElementById('datawrapper-chart-' + chartId) || document.querySelector(\"iframe[src*='\" + chartId + \"']\");\n\n if (!iframe) {\n continue;\n }\n iframe.style.height = event.data['datawrapper-height'][chartId] + 'px';\n }\n }\n });\n})();\n</script>",
"width": "600",
"height": "500",
"author_name": "Lisa Charlotte Rost"
}
The resulting html property can be used to render a chart in an interactive display.
Please note that by default, Datawrapper returns the responsive embed code of a chart, which contains an iFrame as well as a script tag. You can also request the iFrame-only version of a chart by passing in &iframe=true in the request url.
curl --request GET \
--url https://api.datawrapper.de/v3/oembed?format=json&url=https%3A%2F%2Fdatawrapper.dwcdn.net%2FWpAbK%2F2%2F&iframe=true
{
"type": "rich",
"version": 1,
"provider_name": "Datawrapper",
"provider_url": "http://app.datawrapper.de",
"title": "<strong>More than Earth can handle</strong>",
"html": "<iframe src=\"//datawrapper.dwcdn.net/WpAbK/2/\" frameborder=\"0\" id=\"datawrapper-chart-WpAbK\" scrolling=\"no\" style=\"width: 0; min-width: 100% !important;\" height=\"500\"></iframe>",
"width": "600",
"height": "500",
"author_name": "Lisa Charlotte Rost"
}
Updated over 4 years ago