Chart embed instructions

Obtain the URL to use for the embed

Currently this part of the process is a manual step as this functionality has not yet been integrated into the pages themselves on the website. We are currently investigating how best to do this and these will updated these instructions once this has been implemented.

To embed the chart you first need the URL of our 'embed' version. This will allow the fields displayed on the chart to be customised and allow the chart to be used on another domain.

Below each chart on the website there are the following options

Copy the link from the image button. The way to do this will vary by browser, but from Chrome you can right-click and select 'Copy Link Address'.

This will give you the URL of the chart image.
For example: https://www.ons.gov.uk/chartimage?uri=/economy/inflationandpriceindices/bulletins/consumerpriceinflation/sept2016/cc765147

To get the embedable URL replace chartimage with embed.
This gives you: https://www.ons.gov.uk/embed?uri=/economy/inflationandpriceindices/bulletins/consumerpriceinflation/sept2016/cc765147

This will be the basis for embedding the chart. There are currently two options for how you can do this.


Simple method - using an iframe

Once you have the URL to embed the simplest method it to use an iframe to add this into your page. An example is shown below. The size of the chart will then be controlled by the width and height attributes.


<iframe src="https://www.ons.gov.uk/embed?uri=/economy/inflationandpriceindices/bulletins/consumerpriceinflation/sept2016/cc765147&notes=false&source=false&subtitle=false&title=false" width= "475" height= "356" frameborder="0"></iframe>
                

Responsive method - using Pym.js

Using iframes in a responsive page can be more difficult as sizing its height is tricky — especially if the content of the iframe changes height depending on page width (for example, because of text wrapping or media queries) or events within the iframe. To get round this we normally use Pym.js.

To embed a chart using pym you will need the following in your page (amending the chart name and URL as appropriate);


<div id="chart1"></div>
                  

<script type="text/javascript" src="https://pym.nprapps.org/pym.v1.min.js"></script>
                  

<script>
var pymParent = new pym.Parent('chart1', "https://www.ons.gov.uk/embed?uri=/economy/inflationandpriceindices/bulletins/consumerpriceinflation/sept2016/cc765147", {});
</script>
                    

Customise the chart

The fields displayed by the chart are customisable and the following flags are available. These follow the format "&notes=false" and are included in the URL. By default all are set to "true".
  • title
  • subtitle
  • source
  • notes

Chart with all options displayed


var pymParent = new pym.Parent('chart2',
"https://www.ons.gov.uk/embed?uri=/economy/inflationandpriceindices/bulletins/consumerpriceinflation/sept2016/cc765147", {});
              

Just the chart


var pymParent = new pym.Parent('chart3',
"https://www.ons.gov.uk/embed?uri=/economy/inflationandpriceindices/bulletins/consumerpriceinflation/sept2016/cc765147&notes=false&source=false&subtitle=false&title=false", {});