In order to put an external graph, chart, table, video or other element into a Magpi Report, you will need to obtain an "iframe" code for that element. An iframe, or "inline frame", is a standard way to embed items into web pages. Many websites, including YouTube, Google Sheets, Zoho, Google Calendar, and many others, provide you with iframe code in order to embed their content into other sites. Magpi Reports, which are web pages, are able to accept that iframe code.
Here we give a simple example of embedding a Google Sheet Chart into a Magpi Report, but you can learn more about Magpi Reports by downloading our Magpi Reports and Dashboards Guide.
Getting the Iframe Code to Embed a Google Sheet Chart
We have created a Google Sheet with some charts and tables created with Magpi data. If you look at the bottom left chart, "Totals Data Records Per Collector", you can see that the same graph is embedded "live" into this Magpi Report (towards the bottom).
To share that chart, anyone with edit access to the Google Sheet can click on the chart, and then choose Publish Chart from the menu which pops up:
this will display another window with the title "Publish to the Web":
In this second window, if you click the Embed tab you will see the iframe code. You will want to copy JUST THE URL from the iframe code (the part that starts with https and ends with interactive, highlighted in the image above), and next we'll show you how to place it into a Magpi Report.
Using the Iframe Code in Magpi Reports
To embed the chart from above, we'll take the URL that we copied and place it into a report element. This can really be any report element, but usually we recommend that you choose a Text element. You'll use the New Report Element menu on the top-left of the Report Design tab, and choose the first option (text). This inserts a new Text element:
Now to insert the iframe URL you should click on the globe/iframe icon in the editing menu, which will bring up the iframe properties window:
and you can paste the URL that you copied into the URL field. As you can see, there are also other parameters that you can include, such as height and width.
Once you've entered the parameters, click OK and save your report. When you display the report, the chart that you embedded will display:
Embedding Other Things
Many, many things on the web can be embedded: Google Maps, Calendars, Charts, etc, plus Zoho Charts. The list is very long.
If you're viewing a YouTube video, try clicking the share button and then Embed to display the iframe info, very much like what we saw in the Google Sheets example, above: