折れ線グラフの作成
折れ線グラフには、データ・グループ内のデータが表示されます。これらのデータは、線で接続された一定の間隔でプロットすることができます。 折れ線グラフの視覚化を使用して、時間の経過に伴う傾向を表示したり、複数のデータ・セットを比較したりすることができます。
このタスクについて
- カードのタイトル
- カードに割り当てられている固有のラベルまたは見出し。
- カードのツールチップ
- ツールチップには、カードに表示されるデータに関する追加の詳細が示されます。
- 閾値
- グラフ上の有意値またはそれより下の有意値の線。
- Y 軸のタイトル
- グラフの垂直軸に割り当てられているラベル。
- X 軸のタイトル
- グラフの横軸に割り当てられているラベル。
- 凡例
- データ・グループのラベル。
- フッター・リンク
- クリック可能なフィールドまたはリンク (ラベル付き)。 例えば、
View allです。
手順
「一般」 タブで、カードを定義します。
「データ」 タブで、カードにデータを追加します。
「スタイル」 タブで、カードのスタイルを定義します。
例
tenantId 変数が含まれています。query orders($tenantId: String) {
orderLineChart: businessObjects(
simpleFilter: {tenantId: $tenantId, type: Order}
hint: {viewId: "orderflow"}
cursorParams: {first: 10, sort: {fieldPath: "plannedShipDate", order: ASC}}
aggregationParams: {dimension: {fieldPath: "plannedShipDate", type: STRING}, reduce: {expression: {fieldPath: "quantity", operator: SUM, type: INT}, output: {resultAlias: "buyers", type: INT}}}
) {
totalCount
pageInfo {
endCursor
hasNextPage
}
edges {
object {
id
... on Order {
buyer {
id
name
}
quantity
plannedShipDate
}
}
}
aggregationResultsTotalCount
aggregationResults {
dimensionValues {
name
value
}
values {
name
value
}
}
}
}
{
"tenantId": "{{ tenantId }}"
}
{
"data": {
"orderLineChart": {
"totalCount": 214,
"pageInfo": {
"endCursor": "ZGJmMTRhMzItYTk4OS00YzI1LTkzYTItNDM2MjZmOWI5OTdj",
"hasNextPage": true,
"__typename": "PageInfo"
},
"edges": [
{
"object": {
"id": "edf9bcbf-7338-4f71-a4af-6b5dfc39b852",
"buyer": {
"id": "74cd668c-6a8a-42da-87d7-d7df9b1bcb62",
"name": "LightTree",
"__typename": "Organization"
},
"quantity": 124,
"plannedShipDate": "2021-06-23T00:00:00.000Z",
"__typename": "Order"
},
"__typename": "BusinessObjectEdge"
},
{
"object": {
"id": "e41ee68a-e8b7-4da6-a6df-e5588224a037",
"buyer": {
"id": "74cd668c-6a8a-42da-87d7-d7df9b1bcb62",
"name": "LightTree",
"__typename": "Organization"
},
"quantity": 320,
"plannedShipDate": "2021-06-23T00:00:00.000Z",
"__typename": "Order"
},
"__typename": "BusinessObjectEdge"
},
{
"object": {
"id": "e255eb2a-ecd9-4bb0-8bbc-497926bf0afb",
"buyer": {
"id": "74cd668c-6a8a-42da-87d7-d7df9b1bcb62",
"name": "LightTree",
"__typename": "Organization"
},
"quantity": 512,
"plannedShipDate": "2021-06-23T00:00:00.000Z",
"__typename": "Order"
},
"__typename": "BusinessObjectEdge"
},
{
"object": {
"id": "dca11046-74ae-4fab-b1d8-a83aee2b9a90",
"buyer": {
"id": "74cd668c-6a8a-42da-87d7-d7df9b1bcb62",
"name": null,
"__typename": "Organization"
},
"quantity": 512,
"plannedShipDate": "2021-06-23T00:00:00.000Z",
"__typename": "Order"
},
"__typename": "BusinessObjectEdge"
},
{
"object": {
"id": "dbf14a32-a989-4c25-93a2-43626f9b997c",
"buyer": {
"id": "74cd668c-6a8a-42da-87d7-d7df9b1bcb62",
"name": "LightTree",
"__typename": "Organization"
},
"quantity": 512,
"plannedShipDate": "2021-06-23T00:00:00.000Z",
"__typename": "Order"
},
"__typename": "BusinessObjectEdge"
}
],
"aggregationResultsTotalCount": 10,
"aggregationResults": [
{
"dimensionValues": [
{
"name": "plannedShipDate",
"value": "2021-06-23T00:00:00.000Z",
"__typename": "NameValuePair"
}
],
"values": [
{
"name": "buyers.sum",
"value": "24940.0",
"__typename": "NameValueNumValuePair"
}
],
"__typename": "AggregationResult"
},
{
"dimensionValues": [
{
"name": "plannedShipDate",
"value": "2021-07-15T00:00:00.000Z",
"__typename": "NameValuePair"
}
],
"values": [
{
"name": "buyers.sum",
"value": "1113.0",
"__typename": "NameValueNumValuePair"
}
],
"__typename": "AggregationResult"
},
{
"dimensionValues": [
{
"name": "plannedShipDate",
"value": "2021-07-06T00:00:00.000Z",
"__typename": "NameValuePair"
}
],
"values": [
{
"name": "buyers.sum",
"value": "1350.0",
"__typename": "NameValueNumValuePair"
}
],
"__typename": "AggregationResult"
},
{
"dimensionValues": [
{
"name": "plannedShipDate",
"value": "2021-07-22T00:00:00.000Z",
"__typename": "NameValuePair"
}
],
"values": [
{
"name": "buyers.sum",
"value": "484.0",
"__typename": "NameValueNumValuePair"
}
],
"__typename": "AggregationResult"
},
{
"dimensionValues": [
{
"name": "plannedShipDate",
"value": "2021-08-06T00:00:00.000Z",
"__typename": "NameValuePair"
}
],
"values": [
{
"name": "buyers.sum",
"value": "2478.0",
"__typename": "NameValueNumValuePair"
}
],
"__typename": "AggregationResult"
},
{
"dimensionValues": [
{
"name": "plannedShipDate",
"value": "2021-07-24T00:00:00.000Z",
"__typename": "NameValuePair"
}
],
"values": [
{
"name": "buyers.sum",
"value": "176.0",
"__typename": "NameValueNumValuePair"
}
],
"__typename": "AggregationResult"
},
{
"dimensionValues": [
{
"name": "plannedShipDate",
"value": "2021-08-10T00:00:00.000Z",
"__typename": "NameValuePair"
}
],
"values": [
{
"name": "buyers.sum",
"value": "1907.0",
"__typename": "NameValueNumValuePair"
}
],
"__typename": "AggregationResult"
},
{
"dimensionValues": [
{
"name": "plannedShipDate",
"value": "2021-08-11T00:00:00.000Z",
"__typename": "NameValuePair"
}
],
"values": [
{
"name": "buyers.sum",
"value": "1495.0",
"__typename": "NameValueNumValuePair"
}
],
"__typename": "AggregationResult"
},
{
"dimensionValues": [
{
"name": "plannedShipDate",
"value": "2021-06-25T00:00:00.000Z",
"__typename": "NameValuePair"
}
],
"values": [
{
"name": "buyers.sum",
"value": "956.0",
"__typename": "NameValueNumValuePair"
}
],
"__typename": "AggregationResult"
},
{
"dimensionValues": [
{
"name": "plannedShipDate",
"value": "2021-06-30T00:00:00.000Z",
"__typename": "NameValuePair"
}
],
"values": [
{
"name": "buyers.sum",
"value": "732.0",
"__typename": "NameValueNumValuePair"
}
],
"__typename": "AggregationResult"
}
],
"__typename": "BusinessObjectsCursor"
}
},
"loading": false,
"networkStatus": 7
}以下のコードでは、 COMMON.SHIPMENT_STATUS.ON_TIME がグループとして追加されています。 オンタイム出荷は、合計出荷数から遅延出荷数を減算することにより、変換で計算されます。
{
"errors": "{{ #? this.errors }}",
"totalCount": "{{ this.data.orderLineChart.aggregationResultsTotalCount }}",
"pageInfo": "{}",
"results": {
"{{ #each this.data.orderLineChart.aggregationResults }}": {
"group": "orderLineChart",
"x-axis-key": "{{new Date(this.dimensionValues[0].value).toDateString()}}",
"y-axis-key": "{{this.values[0].value}}",
"tooltipsConfig": {
"name": "{{this.dimensionValues[0].name}}"
}
}
}
}
変換では、グラフの各軸に表示されるデータは、照会によって返されるデータと一致する必要があります。 この属性は、「データ・グループ」セクションで選択します。 返されるデータに対して計算を行うことができます。 この例では、照会が返すグループに
orderLineChart が追加されます。
次のタスク
ダッシュボード・ビルダーを使用して、ダッシュボードにカードを追加します。