Main Content

このページの翻訳は最新ではありません。ここをクリックして、英語の最新版を参照してください。

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

自身の Web サイトやブログに ThingSpeak™ のグラフィックスを組み込んで、リアル タイムのデータを表示することができます。ThingSpeak の表示は、次のように使用できます。

  • 自分の Web ページで測定値のリアルタイム更新を提供する。

  • 複数のフィールドやチャネルを同じページに表示するためのダッシュボードを作成する。

  • 組み込みの ThingSpeak プロットをもつモバイル アプリの作成する。

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

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

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

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

  3. メモ帳などの任意のプレーン テキスト エディターで 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="#00FFF">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/171403"></iframe>
<h3>Links</h3>
<a href="http://www.google.com">Google</a><br>
<a href="http://www.Mathworks.com">Mathworks</a><br>
<a href="https://en.wikipedia.org/wiki/Cleve_Moler">Wikipedia</a>
</td>
</html>

関連するトピック