Why Would I Need to Embed External Items into a Report?


Magpi Reports allows you to assemble a great-looking web page of data, text, and other information about your work.  Magpi itself includes a wide variety of graphs and charts that can be produced, and you can find more detail in our Magpi Reports and Dashboards Guide.  


Of course, dedicated analytic and visualization tools like Microsoft Excel, Salesforce, Google, Tableau, and others will always have many more analyses and visualizations than are native to Magpi, and so we've made it easy for you to "embed" those items into your Magpi reports.  In fact, using tools like Zapier (or our API), our Enterprise users can have Magpi data flow automatically, in real-time, to those other tools and then embed the real-time results (whether a chart, table, or other) into a Magpi report (Magpi Pro users can embed external items but don't have the benefit of real-time data flow from Magpi into those external tools like Google, Salesforce, Excel or Tableau).


Using Iframes


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.  


Below we give a simple example of embedding a Google Sheet Chart into a Magpi Report.


Example: 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 YouTube and Vimeo Videos, Zoho Charts, etc. All of them use the iframe standard discussed above.


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: