Embedding Census Reporter profile charts

You can embed any of the charts from Census Reporter’s profile pages onto your own website. Just like our profile pages, embedded charts are responsive, so they’ll work at desktop widths as well as on mobile devices. To embed a chart, you just need to copy and paste a couple lines of code into your HTML or content-management system. Here’s what you need to know:

First, visit a profile page and find the chart that you’d like to embed, then click the “Embed” link underneath. That will open a panel where you can copy two lines of code. They’ll look something like this:

<iframe id="cr-embed-16000US5367000-demographics-age-distribution_by_decade-total" class="census-reporter-embed" src="https://s3.amazonaws.com/embed.censusreporter.org/1.0/iframe.html?geoID=16000US5367000&chartDataID=demographics-age-distribution_by_decade-total&dataYear=2016&releaseID=ACS_2017_1-year&chartType=histogram&chartHeight=200&chartQualifier=&chartTitle=Population+by+age+range&initialSort=&statType=scaled-percentage" frameborder="0" width="100%" height="300" style="margin: 1em; max-width: 960px;"></iframe>

<script src="https://s3.amazonaws.com/embed.censusreporter.org/1.0/js/embed.chart.make.js"></script>

The first line is the iframe container where the chart will be drawn onto your page. It contains all the information necessary to build the right kind of chart out of the right piece of data. The second line is a small piece of javascript that triggers that chart to be drawn, and then allows it to communicate with your page and respond to changes in size.

The example embed code above will make the column chart you see below, complete with hover information and contextual statistics. If you resize this page, the embedded chart will change dimensions (and convert to a bar chart if the page gets narrow enough).

Census Reporter’s embedded charts work on Firefox, Safari and Chrome, and on IE8 and above.

If you want to inset your chart into a block of text, you can choose left or right alignment before copying the embed code. This donut chart, for example, is set to align right.

By default, embedded charts will know how wide they ought to be, although you can always edit the max-width number in your embed code to manually make adjustments.

The “About” panel for each embedded chart will give your readers further detail about the data underneath the chart: The ACS release that the data comes from, the data table code, and the Census universe for the table. It also provides a link to the full profile page for that geography.

As you can see, you can embed multiple charts onto the same page. If you do, you only need to include the chart-making script on your page once, below all of the iframes. That’s this line of code:

<script src="https://s3.amazonaws.com/embed.censusreporter.org/1.0/js/embed.chart.make.js">

Happy charting!

Can I edit the appearance of an embedded chart?

If you’re familiar with the way URLs can pass parameters via querystring, you might have already noticed that’s how our embed code tells the iframe which chart to draw. There are a few things you wouldn’t want to change, like the geoID or chartDataID values. But if you wanted to, say, adjust the header above the chart, you can tweak the chartTitle.

The embed code sets defaults for height, width and style of the iframe, and you can adjust those as well. The chart will be as smart as it can in filling the space you give it, but it’s always a good idea to take a look before you publish. Some charts don’t work as well in extremely wide or narrow spaces.

Can I automate these embeds?

Unfortunately, no. The data for embedded charts is stored in tiny, static files to keep bandwidth low and performance high. This also lets us lock the data for a chart according to the ACS release in use when you embedded it, so your numbers don’t change just because we add new data to Census Reporter.

The data files for a chart are created the first time someone clicks “Embed” next to that chart on Census Reporter, and then stored for any future use. If you copy some embed code and change, say, the geoID variable to reflect another geography, odds are that new data file won’t have been created yet, and you’ll get a broken chart.

Can I embed these charts on my Wordpress site?

It depends.

If you use Wordpress.com, the answer is no. Wordpress.com does not support iframe tags for security reasons. There are workarounds, but we don’t have any specific recommendations about how to work around it.

If you have your own Wordpress site, then it depends on your role and on the site’s security configuration. Specifically, only users with the unfiltered_html capability can embed Census Reporter charts. By default, users with the administrator and editor roles have this capability. Be aware that if an administrator or editor adds the embed code to a post, and then later a user without the capability edits the post, the embed code will be stripped.