Embedding Wazimap profile charts

You can embed any of the charts from Wazimap’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://wazimap.co.za/static/embed/01/iframe.html?geoID=16000US5367000&chartDataID=demographics-age-distribution_by_decade-total&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: 720px;"></iframe>

<script src="https://wazimap.co.za/static/embed/01/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).

Wazimap’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. 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://wazimap.co.za/static/embed/01/js/embed.chart.make.js">

Happy charting!

Frequently Asked Questions

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?

Take another look at that embed code and you’ll see a few key spots that represent the unique combination of data and place that each chart needs. If you adjust either one of those, you’ll change what goes into the chart … but that might come in handy on templated site or app, where you have a single template that generates pages for a number of geographies.

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.