La primera versión tiene un formato condicional doble: azul para aquellos periodos donde se superan los registros, y rojo para aquellos donde estuvo por debajo. Asimismo, la variación porcentual cambiará entre blanco y verde según el resultado.
Versión 1 (color): Plantilla JSON para importar en Deneb
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"usermeta": {
"deneb": {
"build": "1.0.0.157",
"metaVersion": 1,
"provider": "vegaLite"
},
"interactivity": {
"tooltip": true,
"contextMenu": true,
"selection": false,
"dataPointLimit": 50
},
"information": {
"name": "Deneb #19 Grafico de lapiz labial (lipstick chart)",
"description": "Con formato condicional tanto en las barras como en el texto",
"author": "Sentido Analítica - José Rafael Escalante",
"uuid": "53f87bd4-137a-4df7-a361-98d8b1832b53",
"generated": "2022-01-23T00:53:15.994Z"
},
"dataset": [
{
"key": "__0__",
"name": "Mes",
"description": "Month",
"type": "text",
"kind": "column"
},
{
"key": "__1__",
"name": "Ingresos",
"description": "Income",
"type": "numeric",
"kind": "measure"
},
{
"key": "__2__",
"name": "Ingresos LY",
"description": "Income LY",
"type": "numeric",
"kind": "measure"
},
{
"key": "__3__",
"name": "Diferencia Ingresos",
"description": "Variance",
"type": "numeric",
"kind": "measure"
},
{
"key": "__4__",
"name": "Porcentaje Dif",
"description": "Variance Percentage",
"type": "numeric",
"kind": "measure"
}
]
},
"config": {
"autosize": {
"type": "fit",
"contains": "padding"
},
"axis": {
"title": true,
"grid": false,
"ticks": false,
"labelAngle": 0,
"domain": false
},
"view": {"stroke": "transparent"}
},
"data": {"name": "dataset"},
"encoding": {
"x": {
"field": "__0__",
"type": "nominal",
"sort": ["jan", "feb"],
"scale": {"padding": 0.4}
}
},
"layer": [
{
"mark": {
"type": "bar",
"width": {"band": 1.3}
},
"encoding": {
"y": {
"field": "__2__",
"type": "quantitative"
},
"color": {
"condition": {
"test": "datum['__2__'] > datum['__1__']",
"value": "#ffc4c4"
},
"value": "#c7c6f7"
}
}
},
{
"layer": [
{
"mark": {
"type": "bar",
"color": "#483d8b"
},
"encoding": {
"y": {
"field": "__1__",
"type": "quantitative",
"axis": {"labels": false}
}
}
},
{
"description": " Text integer",
"mark": {
"type": "text",
"align": "center",
"dx": -1,
"yOffset": -7,
"size": 10
},
"encoding": {
"text": {
"field": "__3__",
"type": "quantitative",
"format": "0,0",
"formatType": "pbiFormat"
},
"y": {
"field": "__1__",
"type": "quantitative"
}
}
},
{
"description": " Text percentage",
"mark": {
"type": "text",
"fill": "white",
"align": "center",
"dx": 1,
"yOffset": 15,
"size": 9,
"fontWeight": "bold"
},
"encoding": {
"text": {
"field": "__4__",
"type": "quantitative",
"format": ".0%"
},
"y": {
"field": "__1__",
"type": "quantitative"
},
"fill": {
"condition": {
"test": "datum['__2__'] > datum['__1__']",
"value": "white"
},
"value": "#adff2f"
}
}
}
]
}
]
}
La segunda versión ofrece el mismo comportamiento que la primera; pero sustituye los formatos condicionales de color por barras en grises, y lineas en diagonal para meses con valores superiores a los actuales. Los porcentajes también ofrecen valores en color rojo al estar en negativo, y negro en positivo.
Versión 2 (greyscale): Plantilla JSON para importar en Deneb
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"usermeta": {
"deneb": {
"build": "1.0.0.157",
"metaVersion": 1,
"provider": "vegaLite"
},
"interactivity": {
"tooltip": true,
"contextMenu": true,
"selection": false,
"dataPointLimit": 50
},
"information": {
"name": "Deneb #19 Grafico de lapiz labial (lipstick chart)",
"description": "Con formato condicional segun patron de relleno y texto (greyscale)",
"author": "Sentido Analítica - José Rafael Escalante",
"uuid": "90caa884-6c01-4559-8005-24d7a68123e0",
"generated": "2022-01-23T01:00:35.187Z"
},
"dataset": [
{
"key": "__0__",
"name": "Mes",
"description": "Month",
"type": "text",
"kind": "column"
},
{
"key": "__1__",
"name": "Ingresos",
"description": "Income",
"type": "numeric",
"kind": "measure"
},
{
"key": "__2__",
"name": "Ingresos LY",
"description": "Income LY",
"type": "numeric",
"kind": "measure"
},
{
"key": "__3__",
"name": "Diferencia Ingresos",
"description": "Variance",
"type": "numeric",
"kind": "measure"
},
{
"key": "__4__",
"name": "Porcentaje Dif",
"description": "Variance Percentage",
"type": "numeric",
"kind": "measure"
}
]
},
"config": {
"autosize": {
"type": "fit",
"contains": "padding"
},
"axis": {
"title": true,
"grid": false,
"ticks": false,
"labelAngle": 0,
"domain": false
},
"view": {"stroke": "transparent"}
},
"data": {"name": "dataset"},
"encoding": {
"x": {
"field": "__0__",
"type": "nominal",
"sort": ["jan", "feb"],
"scale": {"padding": 0.4}
}
},
"layer": [
{
"mark": {
"type": "bar",
"width": {"band": 1.3},
"stroke": "#5c5c5c"
},
"encoding": {
"y": {
"field": "__2__",
"type": "quantitative"
},
"fill": {
"condition": {
"test": "datum['__2__'] > datum['__1__']",
"value": "url(#diagonal-stripe-1-20)"
},
"value": "#808080"
}
}
},
{
"layer": [
{
"mark": {
"type": "bar",
"color": "white",
"stroke": "black"
},
"encoding": {
"y": {
"field": "__1__",
"type": "quantitative",
"axis": {"labels": false}
}
}
},
{
"description": " Text integer",
"mark": {
"type": "text",
"align": "center",
"dx": -1,
"yOffset": -7,
"size": 10
},
"encoding": {
"text": {
"field": "__3__",
"type": "quantitative",
"format": "0,0",
"formatType": "pbiFormat"
},
"y": {
"field": "__1__",
"type": "quantitative"
}
}
},
{
"description": " Text percentage",
"mark": {
"type": "text",
"fill": "white",
"align": "center",
"dx": 1,
"yOffset": 15,
"size": 9,
"fontWeight": "bold"
},
"encoding": {
"text": {
"field": "__4__",
"type": "quantitative",
"format": ".0%"
},
"y": {
"field": "__1__",
"type": "quantitative"
},
"fill": {
"condition": {
"test": "datum['__2__'] > datum['__1__']",
"value": "red"
},
"value": "black"
}
}
}
]
}
]
}
Saludos, Disculpe soy nuevo intentado crear un nuevo chart para power BI. Tengo una duda, como se convierte el texto que nos proporciona en esta publicación a plantilla JSON para importarla en Power BI?
Gracias por su atención.
Hola Edgar, puedes utilizar la siguiente página web: https://jsonformatter.curiousconcept.com/ allí puedes pegar el texto y exportarlo en formato JSON.