Skip to main content

Embedding plots

Any Figlinq chart can be embedded in online media (blogs, webpages, journal pages). When you embed a Figlinq chart, you are in fact publicly sharing the chart, the underlying data and the code that describes the chart. Anyone who visits a webpage with an embedded chart will be able to access it (and the underlying data). When you update the chart, it will be automatically updated wherever you have embedded it!

At present you can embed charts and data grids. Embedding figures is not supported.

How to embed?​

You can embed a chart or data grid in any website using an HTML code or an iframe code, from "My Files" area or from Chart Editor. You must then paste it into the source code of the target website; the way to do this will depend on the website, and you will have to ask the webmaster for further instructions.

Note: the status of embedded charts must be public, otherwise only logged-in Figlinq users will be able to view them. Check this document for more information on content accessibility status in Figlinq (and how to change it).

Note: You can embed any public content, not just your own!

The chart below has been embedded in this page using the following iframe code. You can modify the code to see the results in real-time.

Live Editor
<iframe
  width="400"
  height="400"
  frameborder="0"
  scrolling="no"
  src="https://create.figlinq.com/~Figlinq/56.embed?link=false&logo=false"
></iframe>
Result
Loading...

Customizing the iframe​

You can add a number of parameters to the embed code to customize the embedded chart; these parameters are listed in the following table. You can play with the live code editor above to add different parameters to the src attribute in the embed code, like so:

src="https://create.figlinq.com/~Figlinq/56.embed?link=false&logo=false&modebar=false"
ParameterValuesDescription
autosizetrue, falseDetermines whether the embedded chart will be automatically resized to fit the external container.
modebartrue, falseDetermines whether to show the interactive modebar.
logotrue, falseDetermines whether to show Plotly logo.
width0 - 100%Set chart width within the iframe.
height0 - 100%Set chart height within the iframe.

Getting the embed code​

The embedding code associated with each chart and data grid can be accessed from the "My Files" area and from the Chart Editor area.

To get the embed code from within My Files area, click the icon, click the "Embed" tab and copy either the HTML or iframe code.