Flotr2 widget を使用すると、flotr2 でサポートされるグラフを作成できます。このウィジェットを使用して取得できるグラフィックの種類の詳細については、http://www.humblesoftware.com/flotr2/index を参照してください。
このウィジェットは、ワイヤリングを通じて提供される設定とデータを使用して Flotr2 を作成します。これに加えて、このウィジェットにはマウス・ズームの機能を追加するためのコードもあります。
ワイヤリング
入力エンドポイント
- Data in: ウィジェットで描画するデータとグラフ設定 (線形、棒、円、…) を取得します
出力エンドポイント
- このウィジェットには出力エンドポイントがありません
入力データ例1
出力例1
サンプルデータ1
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
{ "config": { "bars": { "show": true, "horizontal": false, "shadowSize": 0, "barWidth": 0.5 }, "mouse": { "track": true, "relative": true }, "yaxis": { "min": 0, "autoscaleMargin": 1 } }, "datasets": { "0": { "label": "Dataset 1" }, "1": { "label": "Dataset 2" } }, "data": { "0": [[0, 6], [1, 10], [2, 3], [3, 9]], "1": [[0.5, 8], [1.5, 10], [2.5, 2], [3.5, 10]] } } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
{ "config": { "bars": { "show": true, "horizontal": true, "shadowSize": 0, "barWidth": 0.5, "fillOpacity": 0.8 }, "mouse": { "track": true, "relative": true }, "xaxis": { "min": 0, "autoscaleMargin": 1 }, "legend": { "position": "se", "backgroundColor": "#D2E8FF" } }, "datasets": { "0": { "label": "Dataset 1", "color": "rgb(40, 94, 142)", "bars": { "fillColor": "rgb(50, 118, 177)" } }, "1": { "label": "Dataset 2", "color": "rgb(76, 174, 76)", "bars": { "fillColor": "rgb(92, 184, 92)" } } }, "data": { "0": [[6, 0], [10, 1], [3, 2], [9, 3]], "1": [[8, 0.5], [10, 1.5], [2, 2.5], [10, 3.5]] } } |
関連情報
WireCloud widget and operatorWireCloud では、ウィジェットとオペレータと呼ばれる機能部品を組み合わせることで、Web アプリケーションやダッシュボードを作成...
