Web ページへの ThingSpeak プロットの組み込み

このページは機械翻訳を使用して翻訳されました。元の英語を参照するには、ここをクリックします。

ThingSpeak™のグラフィックを埋め込み、自分の Web サイトやブログに最新データを表示できます。ThingSpeak の表示は、次のように使用できます。

自分の Web ページで測定値のリアルタイム更新を提供する。
複数のフィールドやチャネルを同じページに表示するためのダッシュボードを作成する。
組み込みの ThingSpeak プロットをもつモバイルアプリの作成する。

Web ページでのプロットの組み込み

対象とするプロットから <iframe> タグ情報を収集します。プロットのタイトルバーで、吹き出しアイコンをクリックします。

ウィンドウに表示されるテキストをコピーします。テキストは次のような形式になります。

<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">

メモ帳などの任意のプレーンテキストエディターで HTML を編集できます。エディターで、チャネルからコピーした要素を HTML ファイルに追加します。

<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>

以下は、Web ページに組み込まれたプロットのサンプルです。

ThingSpeak ダッシュボードのプロットのリサイズ

iframe をリサイズして、プロットを利用可能なスペースに必ず収めることができます。プロットのサイズは、モバイルディスプレイでは特に重要です。制約パラメーターのみを指定した場合、ブラウザーは、定義されたスペースにオブジェクトを必ず収めます。たとえば、iframe をディスプレイの 200 ピクセルのスペース内に必ず収めるには、<iframe width=”200”...> を使用します。

また、異なるチャネルのフィールドの複数のプロットを同じディスプレイ内で結合することもできます。以下は、4 つのプロットのダッシュボードビューです。

1 つは、スペースに合うよう手動でリサイズされています。このテーブルのスペースが、3 つのプロットのサイズを制御します。この HTML コードは、ThingSpeakダッシュボードを示しています。

<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>