Google Charts widget ウィジェットを使用すると、Google Charts library でサポートされているチャート/グラフを作成できます。このウィジェットを使用して取得できるグラフィックの種類の詳細については、Chart Gallery を参照してください。
ワイヤリング
入力エンドポイント
- Data in: データを送信するための入力エンドポイントと、Google Chart ライブラリを使用してチャートを構築するためのオプション。このエンドポイントからのデータは、次の属性を持つ json を使用して構造化する必要があります:
type (String): 使用する視覚化クラス (visualization’s class) の名前options (Object): カスタム・オプションの名前と値のペアのマップ。 例には、高さと幅、背景色、キャプションが含まれます。 視覚化のドキュメントには、使用可能なオプションがリストされている必要があり、このパラメーターを指定しない場合はデフォルトのオプションをサポートする必要がありますdata: 各行がデータテーブルの行を表す2次元配列。最初の行はヘッダ・ラベルとして解釈されます。 各列のデータ型は、指定されたデータから自動的に解釈されます。 セルに値がない場合、必要に応じて “null” または空の値を指定します
出力エンドポイント
- Selected data: 選択したデータを送信するための出力エンドポイント。データは、要素が選択された配列です。 すべての要素にこのデータがあります:
row_value (String): 選択された行の値row_label (String): 選択された行のラベルcol_value (String): 選択された列の値col_label (String): 選択した列のラベル
入力データ例1
表示例1
出力データ例1
サンプルデータ1
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
{ "type": "GeoChart", "options": { "width": "100%", "height": "100%" }, "data": [ ["Country", "Popularity"], ["Germany", 200], ["United States", 300], ["Brazil", 400], ["Canada", 500], ["France", 600], ["RU", 700] ] } |
入力データ例2
表示例2
出力データ例2
サンプルデータ2
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
{ "type": "ComboChart", "options": { "title": "Monthly Coffee Production by Country", "width": "100%", "height": "100%", "vAxis": {"title": "Cups"}, "hAxis": {"title": "Month"}, "seriesType": "bars", "series": {"5": {"type": "line"}} }, "data": [ ["Month", "Bolivia", "Ecuador", "Madagascar", "Papua New Guinea", "Rwanda", "Average"], ["2004/05", 165, 938, 522, 998, 450, 614.6], ["2005/06", 135, 1120, 599, 1268, 288, 682], ["2006/07", 157, 1167, 587, 807, 397, 623], ["2007/08", 139, 1110, 615, 968, 215, 609.4], ["2008/09", 136, 691, 629, 1026, 366, 569.6] ] } |
関連情報
WireCloud widget and operatorWireCloud では、ウィジェットとオペレータと呼ばれる機能部品を組み合わせることで、Web アプリケーションやダッシュボードを作成...
