Creación de gráficos de barras simples
Un gráfico de barras simple muestra datos en grupos de datos que se pueden representar en forma de barras con igual ancho y altura variable que se representa como magnitud de cantidad. Puede utilizar el gráfico de barras simple para visualizar la comparación de cantidades basada en la figura estadística.
Acerca de esta tarea
- Título de tarjeta
- Etiqueta o cabecera exclusiva asignada a la tarjeta.
- Ayuda contextual de tarjeta
- Una ayuda contextual proporciona detalles adicionales sobre los datos que se muestran en la tarjeta.
- Umbral
- Una línea en el gráfico por encima o por debajo de la cual son valores significativos.
- Título del eje Y
- Etiqueta asignada al eje vertical del gráfico.
- Título del eje X
- Etiqueta asignada al eje horizontal del gráfico.
- Leyenda
- La etiqueta del grupo de datos.
- Enlace de pie de página
- Un campo o enlace que se puede pulsar con una etiqueta, por ejemplo,
View all.
Puede utilizar el Creador de tarjetas para crear un gráfico de barras simple.
Procedimiento
En la pestaña General , defina la tarjeta:
En la pestaña Datos , añada datos a la tarjeta:
En el separador Estilo , defina el estilo de la tarjeta:
Ejemplo
La consulta siguiente recupera datos del servicio de objetos de negocio y devuelve una lista de líneas de orden vencida pasadas agrupadas por proveedor. La consulta toma un ID de arrendatario como parámetro de entrada y permite filtrar por ubicación, categoría y proveedor. La consulta también incluye un parámetro de agregación que agrupa las líneas de pedido por proveedor y suma el valor total de las líneas de pedido. La consulta devuelve los cinco principales proveedores con el valor total más alto de líneas de pedido vencidas.
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
}El código siguiente es un ejemplo de cómo crear una transformación para la tarjeta.
{
"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}}"
}
}
}
En una transformación, los datos que se muestran en cada eje del gráfico deben coincidir con los datos devueltos por la consulta. Este atributo se elige en la sección Grupos de datos. Se puede realizar un cálculo en los datos que se devuelven. En el ejemplo,McGrey Electrical se añade al grupo que devuelve la consulta.
Qué hacer a continuación
Añada la tarjeta a un panel de control utilizando el Creador de paneles de control.