iframes and dashboards

The easiest way to put a flexdashboard dashboard on another website is to use the <iframe> HTML element, which allow you to embed any HTML page inside another one. For the examples here, I made a basic dashboard here, but all you have to do to embed a dashboard is change the src attribute. However (!!), things published at RPubs.com will not embed—the RPubs website has disabled iframe embedded for whatever reason. That means you'll need to put the knitted dashboard HTML files somewhere else online if you want them embedded.

At the most basic level, all you need to do is this:

<iframe src="https://stats.andrewheiss.com/iframe-fun/dashboard.html"></iframe>

You can control the dimensions of the <iframe> with the height and width attributes:

<iframe src="https://stats.andrewheiss.com/iframe-fun/dashboard.html" width="600" height="300"></iframe>

You can change or remove the border with some CSS:

<iframe src="https://stats.andrewheiss.com/iframe-fun/dashboard.html" style="border: none;" width="600" height="300"></iframe>

<iframe src="https://stats.andrewheiss.com/iframe-fun/dashboard.html" style="border: 1px solid #f8f8f8;" width="600" height="300"></iframe>

If you want the frame to be more dynamic and automatically fit the size of the HTML element it's in, you have to do a little bit of fancy CSS work. See here for full details.

<style>
.resp-container {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
}

.resp-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
</style>

<div class="resp-container">
    <iframe class="resp-iframe" src="https://stats.andrewheiss.com/iframe-fun/dashboard.html"></iframe>
</div>