単純な棒グラフの作成

単純な棒グラフ は、データ・グループ内のデータを表示します。これらのデータは、数量の大きさとして表される、同じ幅と可変高さの棒の形式でプロットすることができます。 単純な棒グラフを使用して、統計的な数値に基づいて数量比較を視覚化できます。

このタスクについて

単純な棒グラフ の構造は、以下のとおりです。
単純棒グラフには、サプライヤーごとの期限切れオーダー明細値が表示されます。
カードのタイトル
カードに割り当てられた固有のラベルまたは見出し。
カードのツールチップ
ツールチップには、カードに表示されるデータに関する追加の詳細情報が表示されます。
閾値
グラフ上の有意値またはそれより下の有意値の線。
Y 軸のタイトル
グラフの垂直軸に割り当てられたラベル。
X 軸のタイトル
グラフの水平軸に割り当てられているラベル。
凡例
データ・グループのラベル。
フッター・リンク
クリック可能なフィールド、またはラベル付きのリンク (例: View all)。

カード・ビルダー を使用して、単純な棒グラフを作成できます。

手順

  1. ナビゲーション・メニューから、 「カード・ビルダー」をクリックします。
  2. 「新規カード」をクリックします。

「一般」 タブで、カードを定義します。

  1. カードに名前を割り当てます。

    カードは、カード・ライブラリー内でその名前によって参照されます。

  2. カード・タイプを選択します。

    カードのタイプとして Chart を選択し、バリアントとして Simple bar を選択します。

「データ」 タブで、カードにデータを追加します。

  1. データを取得するための GraphQL 照会を追加します。
    「追加」 をクリックし、 の照会に似た照会を作成します。 詳しくは、 カードへの照会の追加を参照してください。
  2. 照会で使用する変数を定義します。
    QUERY VARIABLES フィールドで、 のような形式を使用して、JSON 形式で変数を定義します。
  3. 照会を実行します。
  4. で返されるデータと同様に、照会に対してデータが返されることを確認します。
  5. 「変換」 タブで、 単純な棒グラフで視覚化のためにデータを変換するコードを追加します。
    のようなコードを使用するか、デフォルトの変換を使用します。
  6. 「完了」をクリックします。
    照会によって返されたデータがグラフに表示されます。
  7. 単純棒グラフのデータ・グループを構成します。
    この例では、データ・グループ McGrey Electricalが使用可能です。 グラフに棒として表示するデータグループを選択します。
  8. オプション: ラベルと色をオーバーライドします。

「スタイル」 タブで、カードのスタイルを定義します。

  1. 「ディメンション」で、カードの幅と高さを大きくします。
  2. 「ヘッダー」で、カード・タイトルを追加し、説明のツールチップをオンにします。
  3. 「軸」で、X 軸のスケールと使用するラベルを設定します。 X 軸のしきい値を設定できます。
  4. 「軸」で、Y 軸のスケールと使用するラベルを設定します。 Y 軸のしきい値を設定できます。
  5. 「凡例」で、凡例をオンにし、UI 上での位置を設定します。
  6. 「動作」で、凡例およびツールチップとの対話の動作を構成します。
  7. 「フッター」 を展開し、 「フッター・リンク」 をオンに設定してラベルを割り当て、ページ ID を入力します。

    フィールドにページ ID を追加することも、ライブラリーからページを選択することもできます。 ページを選択するには、 「Select from libaray」をクリックします。 あるいは、フッターに外部リンクを追加することもできます。 クリックすると、このリンクが新しいタブで開きます。

    注: 一部のページには、以下のフラグが立てられています。This page requires context.警告。 つまり、これらのページでは、コンテンツをページ上で正しくレンダリングするためにコンテキスト変数が必要ですが、これらの変数がページ・コンテキストで欠落しています。 ページ・コンテキスト変数を追加するには、 ページ・コンテキスト変数の構成を参照してください。

    ページを選択した後、テンプレート変数を追加してページ・コンテンツを動的にすることができます。 つまり、変数に従ってカスタマイズされたコンテンツを使用して、同じページを複数回使用できます。

  8. 「保存」をクリックします。

以下の照会は、ビジネス・オブジェクト・サービスからデータを取得し、サプライヤー別にグループ化された過去の期限切れオーダー明細のリストを返します。 この照会では、テナント ID を入力パラメーターとして使用し、ロケーション、カテゴリー、およびサプライヤーによるフィルタリングを可能にします。 この照会には、サプライヤー別にオーダー明細をグループ化し、オーダー明細の合計値を合計する集約パラメーターも含まれています。 この照会は、期限切れのオーダー明細の合計値が最も高い上位 5 件のサプライヤーを返します。

query pastDueOrderlineBySupplier($tenantId: String!, $locationFilter: BooleanExp = {CONSTANT_VALUE: true}, $categoryFilter: BooleanExp = {CONSTANT_VALUE: true}, $supplierFilter: BooleanExp = {CONSTANT_VALUE: true}) {
  pastDueOrderLineBySupplierChar: businessObjects(
    simpleFilter: {type: OrderLine, tenantId: $tenantId}
    hint: {viewId: "graph"}
    advancedFilter: {AND: [{GREATER_THAN: [{SELECT: "order.plannedDeliveryDelay", type: FLOAT}, {VALUE: "0.0", type: FLOAT}]}, {EQUALS: [{SELECT: "order.orderType", type: STRING}, {VALUE: "INBOUND", type: STRING}]}, $locationFilter, $categoryFilter, $supplierFilter]}
    aggregationParams: {paginationParams: {first: 5, sort: [{fieldPath: "totalOrderLinesBySupplier.sum", order: DESC}]}, dimension: {fieldPath: "order.vendor.name", type: STRING}, reduce: {expression: {fieldPath: "value", operator: SUM, type: INT}, output: {resultAlias: "totalOrderLinesBySupplier", type: INT}}}
  ) {
    totalCount
    aggregationResults {
      dimensionValues {
        name
        value
      }
      values {
        name
        numValue
      }
    }
    edges {
      cursor
      object {
        ... on OrderLine {
          valueCurrency
        }
      }
    }
  }
}
以下のコードは、照会で使用する変数を定義する方法の例です。
{
  "tenantId": "{{ tenantId }}"
}
以下の例では、サプライヤーから期限を過ぎたオーダー明細値が返されます。
{
	"data": {
		"pastDueOrderLineBySupplierChar": {
			"totalCount": 19,
			"aggregationResults": [
				{
					"dimensionValues": [
						{
							"name": "order.vendor.name",
							"value": "McGrey Electrical",
							"__typename": "NameValuePair"
						}
					],
					"values": [
						{
							"name": "totalOrderLinesBySupplier",
							"numValue": 604160,
							"__typename": "NameValueNumValuePair"
						}
					],
					"__typename": "AggregationResult"
				},
				{
					"dimensionValues": [
						{
							"name": "order.vendor.name",
							"value": "Total Source Extrusion Corporation",
							"__typename": "NameValuePair"
						}
					],
					"values": [
						{
							"name": "totalOrderLinesBySupplier",
							"numValue": 226800,
							"__typename": "NameValueNumValuePair"
						}
					],
					"__typename": "AggregationResult"
				},
				{
					"dimensionValues": [
						{
							"name": "order.vendor.name",
							"value": "F & M Metals",
							"__typename": "NameValuePair"
						}
					],
					"values": [
						{
							"name": "totalOrderLinesBySupplier",
							"numValue": 125900,
							"__typename": "NameValueNumValuePair"
						}
					],
					"__typename": "AggregationResult"
				},
				{
					"dimensionValues": [
						{
							"name": "order.vendor.name",
							"value": "LightLens Industries",
							"__typename": "NameValuePair"
						}
					],
					"values": [
						{
							"name": "totalOrderLinesBySupplier",
							"numValue": 107920,
							"__typename": "NameValueNumValuePair"
						}
					],
					"__typename": "AggregationResult"
				},
				{
					"dimensionValues": [
						{
							"name": "order.vendor.name",
							"value": "Alumi-lux Metal Products",
							"__typename": "NameValuePair"
						}
					],
					"values": [
						{
							"name": "totalOrderLinesBySupplier",
							"numValue": 59605,
							"__typename": "NameValueNumValuePair"
						}
					],
					"__typename": "AggregationResult"
				}
			],
			"edges": [
				{
					"cursor": "NTQ1NDE2NA==",
					"object": {
						"valueCurrency": "USD",
						"__typename": "OrderLine"
					},
					"__typename": "BusinessObjectEdge"
				},
				{
					"cursor": "NTQ1NjQ5OA==",
					"object": {
						"valueCurrency": "USD",
						"__typename": "OrderLine"
					},
					"__typename": "BusinessObjectEdge"
				},
				{
					"cursor": "NTQ1NjQ3MQ==",
					"object": {
						"valueCurrency": "USD",
						"__typename": "OrderLine"
					},
					"__typename": "BusinessObjectEdge"
				},
				{
					"cursor": "NTQ1NTc3MQ==",
					"object": {
						"valueCurrency": "USD",
						"__typename": "OrderLine"
					},
					"__typename": "BusinessObjectEdge"
				},
				{
					"cursor": "NTQ1NDIzOQ==",
					"object": {
						"valueCurrency": "USD",
						"__typename": "OrderLine"
					},
					"__typename": "BusinessObjectEdge"
				}
			],
			"__typename": "BusinessObjectsCursor"
		}
	},
	"loading": false,
	"networkStatus": 7
}

以下のコードは、カードの変換を作成する方法の例です。


{
	"totalCount": "{{ this.data.pastDueOrderLineBySupplierChar.totalCount }}",
	"errors": "{{#? this.errors}}",
	"pageInfo": "{}",
	"currency": [
		{
			"{{#if this.data.pastDueOrderLineBySupplierChar.edges.length > 0}}": "{{this.data.pastDueOrderLineBySupplierChar.edges[0].object.valueCurrency}}"
		},
		{
			"{{#else}}": ""
		}
	],
	"results": {
		"{{#each this.data.pastDueOrderLineBySupplierChar.aggregationResults}}": {
			"group": "{{dimensionValues[0].value}}",
			"value": "{{values[0].numValue}}"
		}
	}
}

変換では、グラフの各軸に表示されるデータは、照会によって返されるデータと一致する必要があります。 この属性は、「データ・グループ」セクションで選択します。 返されるデータに対して計算を行うことができます。 この例では、照会が返すグループにMcGrey Electrical が追加されます。

次のタスク

ダッシュボード・ビルダーを使用して、ダッシュボードにカードを追加します。