Publishing a Visualization

Before you get going with publishing, it might be good to know how to check the publish status of a chart. Has it already been published? If yes, when and how many times?

To do so, perform a GET request on your chart. Make sure to replace the <ID> with your chart ID (a 5 chracter ID like "384dj") and the <YOUR_TOKEN_HERE> with your API Access Token:

curl --request GET \
  --url https://api.datawrapper.de/v3/charts/<ID> \
  --header 'Authorization: Bearer <YOUR_TOKEN_HERE>' \

Below is an abridged response to a GET request made on a chart that has not yet been published:

{
  "id": "aBcDe",
  "lastEditStep": 2,
  "publishedAt": null,
  "publicUrl": null,
  "publicVersion": 0,
  "metadata": {
    "publish": {
      "embed-width": 536,
      "embed-height": 674
    },
    ...
  },
  "url": "/v3/charts/aBcDe",
  ...
}

It is easy to recognize that this chart is still unpublished thanks to the values of four properties. The table below explains them in detail:

Publish a visualization

To publish (and republish) a chart, make the following POST request:

curl --request POST \
  --url https://api.datawrapper.de/v3/charts/<ID>/publish \
  --header 'Authorization: Bearer <YOUR_TOKEN_HERE>'

This can take a few seconds. You can check the progress with the following GET request. It returns a list of steps that have completed for the chart to get published:

curl --request GET \
  --url https://api.datawrapper.de/v3/charts/<ID>/publish/status/<VERSION> \
  --header 'Authorization: Bearer <YOUR_TOKEN_HERE>'

Your POST request will return the data for your chart, including its newly generated embed codes and public URL. You can check if your chart is published with the URL https://www.datawrapper.de/_/<ID>, like so: https://www.datawrapper.de/_/HpeMi

{
  	"version": 1,
    "url": "//datawrapper.dwcdn.net/aBcDe/1/",
    "data": {
        "metadata": {
            "publish": {
                "embed-width": 500,
                "embed-height": 600,
                "embed-codes": {
                    "embed-method-iframe": "<iframe src= ..... ></iframe>",
                    "embed-method-responsive": "<iframe id= .... ></iframe <script type= ....></script>"
                }
            },
	          ...
        },      
      	"lastEditStep": 5,
        "publishedAt": "2018-01-21 09:14:12",
        ...
            }
        }
    }
}

Let's look at the returning properties in detail.
Here you can find a the reference on all publish-related chart attributes. If you still have questions, our Academy article "How to embed charts" might help.

And that's it! You successfully published a visualization.

Copy the (responsive) embed code in your article or share the URL to your visualization on social media.