You can embed any of the charts from Youth Explorer’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://youthexplorer.org.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://youthexplorer.org.za/static/embed/01/js/embed.chart.make.js"></script>
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).
Youth Explorer’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: