Embed Your ThingSpeak Plots on Web Pages

You can embed ThingSpeak™ graphics and display up-to-date data on your own website or blog. You can use ThingSpeak displays to:

Provide Real-time updates of your measured values on your own web page.
Create a dashboard for showing multiple fields or channels on the same page.
Make a mobile app with embedded ThingSpeak plots.

Embed a Plot in a Web Page

Gather the <iframe> tag information from the plot you are interested in. On the title bar of your plot, click the word bubble.

Copy the text that appears in the window. The text has the format shown here:

<iframe width="450" height="260" style="border: 1px solid #cccccc;" src="https://thingspeak.com/channels/250296/charts/1?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=50&type=line&update=15">

You can edit HTML in any plain text editor such as Notepad. In your editor, add the element you copied from your channel to your HTML file.

<html><head><title>ThingSpeak Embedded Plot</title></head>
<body>
<iframe width="450" height="260" style="border: 1px solid #cccccc;" src="https://thingspeak.com/channels/250296/charts/1?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=50&type=line&update=15">
</body></html>

Here is a sample of an embedded plot on a web page.

Resize Plots for ThingSpeak Dashboard

You can resize the iframe to make sure the plots fit the space available. Plot size is especially important for mobile displays. If you provide only the constraining parameter, your browser makes sure the object fits into the space defined. For example, use <iframe width=”200”...> to be sure your iframe fits within a 200 pixel space on the display.

You can also combine multiple plots from different channels of fields in the same display. Here is a dashboard view of four plots.

One has been manually resized to fit the space. The table space controls the size of three of the plots. This HTML code demonstrates a ThingSpeak dashboard.

<html>
<head>
<title>Data Collection Dashboard</title>
</head>
<body>
<table border=2 bordercolor="#0000FF">
<tr><td colspan="2">
<h1 align="center" color="#00FFFF">Data Collection Dashboard</h1>
</td></tr>
<tr><td>
<iframe width="450" height="260" style="border: 1px solid #cccccc;" src="https://thingspeak.com/channels/320695/charts/1?bgcolor=%23ffffff&color=%23F62020&dynamic=true&results=800&type=line&update=15"></iframe>
</td>
<td><iframe width="450" height="260" style="border: 1px solid #cccccc;" src="https://thingspeak.com/apps/matlab_visualizations/166526?color=%23FFFFFF&dynamic=true"></iframe>
</td></tr>
<tr><td>
<iframe width="450" height="260" style="border: 1px solid #cccccc;" src="https://thingspeak.com/channels/12397/charts/2?results=720&dynamic=true&update=15"></iframe>
</td>
<td>
<iframe width="300" style="border: 1px solid #cccccc;" src="https://thingspeak.com/apps/matlab_visualizations/308777"></iframe>
<h3>Links</h3>
<a href="https://www.google.com">Google</a><br>
<a href="https://www.Mathworks.com">Mathworks</a><br>
<a href="https://en.wikipedia.org/wiki/Cleve_Moler">Wikipedia</a>
</td>
</html>