チャートの組み込み

公開チャネルのチャートの組み込み

iframe のソースとして、チャート API を使用し、Web ページに公開 ThingSpeak™ チャネルのチャートを組み込みます。

公開チャートの組み込みコード

<iframe width="450" height="250" style="border: 1px solid #cccccc;" src="http://thingspeak.com/channels/CHANNEL_ID/charts/FIELD_ID"></iframe>

CHANNEL_ID をチャネルの ID に置き換え、FIELD_ID を、チャート化するフィールドの ID に置き換えます。また、iframe の height パラメーターと width パラメーターを調節することで、チャートの高さと幅を調節することもできます。たとえば、サイズが 800 x 400 ピクセルのチャートにするには、iframe を

iframe width="800"
                        height="400" style="border: 1px solid #cccccc;"
                        src="http://thingspeak.com/channels/CHANNEL_ID/charts/FIELD_ID"></iframe>

のようにします。

チャートの例

プライベートチャネルのチャートの組み込み

Web ページにプライベートチャネルのチャートを組み込むには、チャート API を iframe のソースとして使用し、チャートパラメーター api_key=XXXXXXXXXXXXX を追加して、XXXXXXXXXXXXX をチャネルの Read API キーに置き換えます。チャートを動的なものにする場合は、チャートパラメーター dynamic=true を追加することもできます。

プライベートチャートの組み込みコード

<iframe width="450" height="250" style="border: 1px solid #cccccc;" src="http://thingspeak.com/channels/CHANNEL_ID/charts/FIELD_ID?api_key=XXXXXXXXXXXXX"></iframe>

CHANNEL_ID をチャネルの ID に、FIELD_ID をチャート化するフィールドの ID に、XXXXXXXXXXXXX をプライベートチャネルの Read API キーに置き換えます。

動的チャートの組み込み

動的な ThingSpeak チャートを Web ページに配置するには、チャート API を iframe のソースとして使用し、チャートパラメーター dynamic=true を追加します。

動的チャートの埋め込みコード

<iframe width="450" height="250" style="border: 1px solid #cccccc;" src="http://thingspeak.com/channels/CHANNEL_ID/charts/FIELD_ID?dynamic=true"></iframe>

CHANNEL_ID をチャネルの ID に置き換え、FIELD_ID を、チャート化するフィールドの ID に置き換えます。