ウィジェットをマッシュアップに追加し、ウィジェットの基本的なプロパティを設定する方法については、以下のビデオをご覧ください。新しいタブでビデオを開くには、プレーヤーのタイトルをクリックします。

折れ線グラフウィジェットでは、線で結ばれた一連のデータポイントがマッシュアップ内に表示されます。

ウィジェットの ChartType プロパティを使用することで、折れ線グラフに加え、次のいずれかのチャートバリエーションを使用してデータを視覚化できます。

実行チャート

折れ線グラフの一種であり、時間単位を基準にしてデータが視覚化されます。このチャートタイプを使用して、時間の経過に伴う変化を監視したり、傾向やサイクルを検出したり、データに対する特定のイベントの影響を測定したりできます。このチャートタイプを選択した場合、ウィジェットの CurveFitting プロパティが Monotone-X に設定され、データポイント間の曲線がスムーズになります。

ステップチャート

ステップチャートは直角をなす水平線と垂直線を使用してデータポイントを接続します。このチャートタイプは、値が変化した時間に注目する場合に便利です。

面グラフ

面グラフでは、線と軸の間のスペースがデータ系列の色を使用して塗りつぶされます。デフォルトでは、データ系列は互いに重ねて表示されます。ウィジェットの SeriesStacking プロパティを使用して、すべてのデータ系列を積み上げて、チャート上のすべてのデータ系列の合計値を表示できます。

散布図

散布図では各データポイントが点として表示され、接続線は表示されません。このタイプのチャートは、2 つ以上のデータ系列間の相関関係を表示する場合に便利です。

ストリームグラフ

ストリームグラフは面グラフの一種であり、中心軸を基準にしてデータが表示されます。特定の日付における各データ系列の形状のサイズは、その値に比例します。このタイプのチャートを使用することで、チャート上の全データを基準にして、データ系列の変化を分析できます。

グラフのデータ構造を表すフィールド定義を含むインフォテーブルを作成する必要があります。インフォテーブルには、X 軸と Y 軸の値のフィールド定義が含まれている必要があります。データ系列の値のフィールド定義を含む列を追加することによって、複数のデータ系列を追加できます。各インフォテーブル行は、X 軸のカテゴリとそれに対応する Y 軸の値を表します。次のテーブルに、インフォテーブルのデータ形式を示します。

間隔ズーム制御オプションでは、ラベルと期間の 2 つのフィールドから成るインフォテーブルを作成する必要があります。2 つのフィールドのデータのベースタイプは STRING でなければなりません。次の図は、返されたデータサービスのデータ形式を示しています。

duration フィールドで使用可能な値と、これらが表す範囲は次のとおりです。

チャートをデータソースにバインドするには、以下の操作を行います。

データがチャートに表示されます。バインドされたインフォテーブル内の各追加列はデータ系列として表示されます。

データソースをバインドした後で、プロパティ Label、XAxisLabel、および YAxisLabel を使用してラベルを追加することをお勧めします。

そのほかのプロパティを使用して設定することもできます。たとえば、以下のようになります。

プロパティ SecondYAxis を使用することで、セカンダリ軸を追加して、X 軸上の 1 つのカテゴリに 2 つの異なる測定値を表示できます。セカンダリ軸を使用して、1 つ以上のデータ系列のデータを表示できます。たとえば、縦棒グラフのセカンダリ軸にパーセント値を示すデータ系列をプロットできます。

NumberofSeries が固定の数値に設定されている場合、各データ系列のプロパティ DataFieldN および UseSecondAxisSeriesN が表示されます。デフォルトでは、すべてのデータ系列がプライマリ Y 軸に表示されます。セカンダリ Y 軸にデータ系列を表示するには、プロパティ UseSecondAxisSeriesN を有効にします。

セカンダリ Y 軸をチャートに追加するには、データ値を含む列が 2 つ以上あるインフォテーブルをバインドします。

セカンダリ軸のデータを手動で指定するには、以下の手順を実行します。

セカンダリ軸が設定され、データが表示されます。セカンダリ軸を追加した後で、以下のいずれかの操作を実行できます。

以下の図は、セカンダリ Y 軸がある折れ線グラフウィジェットを示しています。X 軸は日付の範囲を示し、各 Y 軸には各日付のそれぞれのタイプのデータ測定値が表示されています。

X 軸のフォーマットは Date/Time に設定されており、Y 軸はプロパティ YAxisFormat および SecondYAxisFormat を使用して数値が設定されています。

以下のテーブルに、セカンダリ Y 軸を有効にして設定するときに使用可能なプロパティを示します。

折れ線グラフウィジェットは、D3 JavaScript ライブラリに基づいています。これには、折れ線グラフでの線の表示方法を制御する複数の関数のサポートが含まれています。ThingWorx では、折れ線グラフをサポートするウィジェット内の CurveFitting プロパティを使用して、線の描画方法を設定できます。次のリストは、このプロパティで使用できるオプションの説明を示しています。

「線形補間」 - 直線を使用してデータポイントを接続する折れ線。

「スプライン補間」 - 指定されている制御点を使用する 3 次スプライン。最初と最後の点を 3 つに複製して、スプラインが最初の点から始まり、最後の点で終わり、最初の点と 2 つ目の点の間の線、および最後から 2 つ目の点と最後の点の間の線に正接するようにします。

「階層スプライン補間」 - 指定されている制御点を使用する直線化された 3 次スプライン。スプラインは 0.5 に設定されているベータカーブの値に基づいて直線化されます。

「カーディナルスプライン補間」 - 指定されている制御点を使用する 3 次カーディナルスプライン。最初と最後のピースには片側差分が使用されます。張力の値は 0.5 に設定されています。

「Catmull-Rom スプライン補間」 - 指定されている制御点と 0.5 に設定されているアルファパラメータを使用する 3 次 Catmull-Rom スプライン。

「3 次スプライン補間 (X 方向)」 - X 軸に単調性があると仮定して、Y 軸の単調性を維持する 3 次スプライン。この線は、誤った振動を生じることなく一連のデータポイントを通過する滑らかなカーブを作成します。

「3 次スプライン補間 (Y 方向)」 - Y 軸に単調性があると仮定して、X 軸の単調性を維持する 3 次スプライン。この線は、誤った振動を生じることなく一連のデータポイントを通過する滑らかなカーブを作成します。

「カーブスプライン補間」 - スプラインの 2 次導関数がデータの両端でゼロに設定されている自然 3 次スプライン。

「ステップ」 - 交互に接続された水平線と垂直線で構成されるステップライン。

これらのオプションの詳細については、GitHub の D3 ライブラリのドキュメンテーションを参照してください。

折れ線グラフウィジェットのプロパティを以下に示します。