We have this dataset which we want to visualize with Vega/Vega-Lite
{
"$schema":"https://vega.github.io/schema/vega-lite/v4.13.json",
"description":"Testing",
"width":"container",
"height":350,
"autosize":{
"type":"fit",
"contains":"padding"
},
"layer":[
{
"data":{
"values":[
{
"stepid":"4444",
"stepname":"Name1",
"serialnumber":"SN3444444",
"lowval":45000,
"highval":45500,
"resultdecimal":45466
},
{
"stepid":"4444",
"stepname":"Name1",
"serialnumber":"SN3444445",
"lowval":45000,
"highval":45500,
"resultdecimal":45433
},
{
"stepid":"4444",
"stepname":"Name1",
"serialnumber":"SN3444446",
"lowval":45000,
"highval":45500,
"resultdecimal":45400
},
{
"stepid":"4444",
"stepname":"Name1",
"serialnumber":"SN3444447",
"lowval":45000,
"highval":45500,
"resultdecimal":45422
},
{
"stepid":"4444",
"stepname":"Name1",
"serialnumber":"SN3444448",
"lowval":45000,
"highval":45500,
"resultdecimal":45403
},
{
"stepid":"4444",
"stepname":"Name1",
"serialnumber":"SN3444449",
"lowval":45000,
"highval":45500,
"resultdecimal":45422
}
]
},
"layer":[
{
"mark":{
"type":"line",
"strokeWidth":3,
"point":{
"size":45,
"filled":true
},
"interpolate":"monotone"
},
"encoding":{
"x":{
"field":"serialnumber",
"type":"ordinal",
"axis":{
"labelAngle":-70,
"title":"Selected Tests",
"titleFontSize":10
}
},
"y":{
"field":"resultdecimal",
"type":"quantitative",
"axis":{
"title":"Teststeps in selected Tests",
"titleFontSize":10
}
},
"tooltip":[
{
"field":"serialnumber",
"type":"ordinal"
},
{
"field":"resultdecimal",
"type":"quantitative"
}
]
}
},
{
"mark":"rule",
"encoding":{
"y":{
"field":"highval"
},
"stroke":{
"value":"#FF0000"
}
}
},
{
"mark":"rule",
"encoding":{
"y":{
"field":"lowval"
},
"stroke":{
"value":"#FF0000"
}
}
}
]
}
]
}
Everything works fine but the scaling on the y-axis is not too optimal
Is it possible to rescale y-axis so it is more scaled-into-view based on lowval and highval e.g. like this one?
Furthermore is it possible to write the "lowval" and "highval" values on top of the lines?
You can control the y-axis domain using the scale.domain property:
"y": {
"field": "resultdecimal",
"type": "quantitative",
"axis": {
"title": "Teststeps in selected Tests",
"titleFontSize": 10
},
"scale": {
"domain": [45000, 45500]
}
},
Adding that to your chart, results in this (view in editor):
Related
In Vega-lite, I want to align y-axis values, so that zeroes are in the same place and negative values go below x-axis. Is it possible to do in Vega-lite? I can't hardcode the domain limits, as the data passed to this chart is dynamic, thus can be different every time.
My code:
{
"$schema":"https://vega.github.io/schema/vega-lite/v5.json",
"width":300,
"data":{
"values":[
{
"key":"Type A",
"sum1":"1000",
"sum2":"2000",
"ratio":"15"
},
{
"key":"Type B",
"sum1":"1500",
"sum2":"1500",
"ratio":"-5"
},
{
"key":"Type C",
"sum1":"2000",
"sum2":"1000",
"ratio":"7"
}
]
},
"layer":[
{
"mark":{
"type":"bar",
"size":15,
"xOffset":0
},
"encoding":{
"y":{
"field":"sum1",
"type":"quantitative",
"axis":{
"title":null,
"ticks":true,
"orient":"left"
}
},
"x":{
"field":"key",
"type":"nominal",
"axis":{
"title":null,
"labelAngle":-45,
"labelLimit":1000
}
},
"color":{
"datum":"Sum1"
}
}
},
{
"mark":{
"type":"bar",
"size":15,
"xOffset":15
},
"encoding":{
"y":{
"field":"sum2",
"type":"quantitative",
"axis":{
"domain":false,
"title":null,
"labels":false,
"ticks":false
}
},
"x":{
"field":"key",
"type":"nominal",
"axis":{
"title":null,
"labelAngle":-45,
"labelLimit":1000
}
},
"color":{
"datum":"Sum2"
}
}
},
{
"mark":{
"type":"line",
"interpolate":"monotone",
"clip":true
},
"encoding":{
"y":{
"type":"quantitative",
"field":"ratio",
"axis":{
"title":null,
"ticks":true,
"orient":"right"
}
},
"x":{
"field":"key",
"type":"nominal",
"axis":{
"title":null,
"labelAngle":-45,
"labelLimit":1000
}
},
"color":{
"datum":"Ratio"
}
}
}
],
"resolve":{
"scale":{
"y":"independent"
}
},
"config":{
"legend":{
"orient":"bottom",
"columns":3,
"labelLimit":500,
"layout":{
"bottom":{
"anchor":"middle"
}
}
}
}
}
Open the Chart in the Vega Editor
I want to prepare a default theme and have written the JSON file below for powerbi dashboards. But I don't know how to:
Change the background colour for the canvas to white?
Change the background colour of the page (Canvas colour) to white?
Change the border colour of all visuals to black
We will then push this file to be the default theme for all of our dashboards.
{
"name": "Bardz",
"dataColors": [
"#173583",
"#7DCCE0",
"#26BCD7",
],
"minimum": "#C7F0FA",
"center": "#7CD7E8",
"maximum": "#3EAEFD",
"neutral": "#F58220",
"foreground": "#000000",
"textClasses": {
"label": {
"fontFace": "'Segoe UI', wf_segoe-ui_normal, helvetica, arial, sans-serif",
"fontSize": 9,
"color": "#040404"
},
"callout": {
"fontFace": "'Segoe UI Semibold', wf_segoe-ui_semibold, helvetica, arial, sans-serif",
"fontSize": 15
},
"title": {
"fontFace": "'Segoe UI Light', wf_segoe-ui_light, helvetica, arial, sans-serif",
"fontSize": 10
},
"header": { "fontSize": 11 }
},
"visualStyles": {
"*": {
"*": {
"background": [
{ "color": { "solid": { "color": "#E1E1E1" } }, "transparency": 5 }
],
"border": [
{
"color": { "solid": { "color": "#000000" } },
"show": true,
"radius": 1
}
],
"outspacePane": [
{
"backgroundColor": { "solid": { "color": "#FFFEFE" } },
"transparency": 15,
"foregroundColor": { "solid": { "color": "#000000" } }
}
],
"filterCard": [
{
"$id": "Applied",
"backgroundColor": { "solid": { "color": "#E4E4E4" } },
"transparency": 18
},
{
"$id": "Available",
"backgroundColor": { "solid": { "color": "#F2F2F2" } },
"transparency": 13
}
],
"visualHeader": [
{
"transparency": 35,
"foreground": { "solid": { "color": "#FFFFFF" } },
"border": { "solid": { "color": "#000000" } }
}
],
"visualTooltip": [
{
"titleFontColor": { "solid": { "color": "#454545" } },
"valueFontColor": { "solid": { "color": "#000000" } },
"background": { "solid": { "color": "#C7C5C5" } }
}
],
"visualHeaderTooltip": [
{
"titleFontColor": { "solid": { "color": "#454545" } },
"background": { "solid": { "color": "#C7C5C5" } }
}
]
}
},
"scatterChart": {
"*": {
"fillPoint": [
{
"show": true
}
],
"bubbles": [
{
"bubbleSize": -10
}
],
"background": [
{ "color": { "solid": { "color": "#FFFFFF" } }, "transparency": 100 }
]
}
},
"page": {
"*": {
"background": [
{ "color": { "solid": { "color": "#F9F9F9" } }, "transparency": 89 }
],
"outspace": [
{ "color": { "solid": { "color": "#FAFAFA" } }, "transparency": 14 }
]
}
}
}
}
I has this mapping for the índex on elastic, i was try to get the max value of a day for a specific sensor, but my query get the value of all the sensors.
"sensor": {
"type": "nested",
"properties": {
"type": {
"type": "integer"
},
"name": {
"type": "keyword"
},
"number": {
"type": "integer"
},
"values": {
"type": "nested",
"properties": {
"type": {
"type": "text"
},
"value": {
"type": "float"
},
"unit": {
"type": "text"
},
"Lmin": {
"type": "float"
},
"Lmax": {
"type": "float"
}
}
}
}
An this is the map of objects,
I need only the max and the min value of the las day from the sensor number 13, i try it but ever i get the max of all sensors.
{"query": {
"nested": {
"path": "sensor",
"query": {
"nested": {
"path": "sensor.values",
"query": {
"bool": {
"must": [
{
"match": {
"sensor.values.type": "TEMPERATURE"
}
}
]
}
}
}
}
}
},
"aggs": {
"agg_by_type": {
"nested": {
"path": "sensor.values"
},
"aggs": {
"max_value": {
"max": {
"field": "sensor.values.value"
}
}
}
}
}
}
I'm new in elasticsearch, can someone help whit this please?, thanks.
You need to also add the nested filter in the aggregation part to only aggregate the relevant nested documents, i.e. the ones related to TEMPERATURE, like this:
{
"query": {
"nested": {
"path": "sensor",
"query": {
"nested": {
"path": "sensor.values",
"query": {
"bool": {
"must": [
{
"match": {
"sensor.values.type": "TEMPERATURE"
}
}
]
}
}
}
}
}
},
"aggs": {
"agg_by_type": {
"nested": {
"path": "sensor.values"
},
"aggs": {
"temperature_only": {
"filter": {
"match": {
"sensor.values.type": "TEMPERATURE"
}
},
"aggs": {
"max_value": {
"max": {
"field": "sensor.values.value"
}
}
}
}
}
}
}
}
After a few days of work in another projects, i back to try make this query and finally i can do it, now i can get the data per day, hours, and by type of sensor, thanks for your help.
This is my code if somebody are trying the same.
{
"query": {
"bool": {
"filter": [
{
"bool": {
"must": [
{
"match": {
"mac": "34:ab:95:8f:84:c0"
}
}
],
"filter": [
{
"range": {
"timestamp": {
"gte": "2021-08-10",
"lt": "2021-08-25"
}
}
}
]
}
},
{
"nested": {
"path": "sensor",
"query": {
"bool": {
"must": [
{
"match": {
"sensor.type": 1
}
}
],
"should": [
{
"nested": {
"path": "sensor.values",
"query": {
"bool": {
"must": [
{
"match": {
"sensor.values.type": "HUMIDITY"
}
},
{
"match": {
"sensor.values.type": "TEMPERATURE"
}
}
]
}
}
}
}
]
}
}
}
}
]
}
},
"aggs": {
"values_per_day": {
"date_histogram": {
"field": "timestamp",
"fixed_interval": "1d",
"format" : "yyyy-MM-dd HH:mm:ss"
},
"aggs": {
"agg_type": {
"nested": {
"path": "sensor"
},
"aggs": {
"type_only": {
"filter": {
"match": {
"sensor.type": 1
}
},
"aggs": {
"agg_by_type": {
"nested": {
"path": "sensor.values"
},
"aggs": {
"temperature_only": {
"filter": {
"match": {
"sensor.values.type": "TEMPERATURE"
}
},
"aggs": {
"max_value": {
"max": {
"field": "sensor.values.value"
}
},
"min_value": {
"min": {
"field": "sensor.values.value"
}
}
}
},
"humedity_only": {
"filter": {
"match": {
"sensor.values.type": "HUMIDITY"
}
},
"aggs": {
"max_value": {
"max": {
"field": "sensor.values.value"
}
},
"min_value": {
"min": {
"field": "sensor.values.value"
}
}
}
}
}
}
}
}
}
}
}
}
},
"from": 0,
"sort": [
{
"timestamp": {
"order": "desc"
}
}
]
}
I have this definition of a Vega-Lite chart
{
"$schema":"https://vega.github.io/schema/vega-lite/v4.json",
"data":{
"values":[
{
"stepid":"4444",
"stepname":"Name1",
"serialnumber":"SN3444444",
"lowval":45000,
"highval":45500,
"resultdecimal":45466
},
{
"stepid":"4444",
"stepname":"Name1",
"serialnumber":"SN3444445",
"lowval":45000,
"highval":45500,
"resultdecimal":45433
},
{
"stepid":"4444",
"stepname":"Name1",
"serialnumber":"SN3444446",
"lowval":45000,
"highval":45500,
"resultdecimal":45400
},
{
"stepid":"4444",
"stepname":"Name1",
"serialnumber":"SN3444447",
"lowval":45000,
"highval":45500,
"resultdecimal":45422
},
{
"stepid":"4444",
"stepname":"Name1",
"serialnumber":"SN3444448",
"lowval":45000,
"highval":45500,
"resultdecimal":45403
},
{
"stepid":"4444",
"stepname":"Name1",
"serialnumber":"SN3444449",
"lowval":45000,
"highval":45500,
"resultdecimal":45422
}
]
},
"repeat":{
"layer":[
"lowval",
"highval",
"resultdecimal"
]
},
"spec":{
"mark":{
"type":"line",
"strokeWidth":3,
"point":{
"size":45,
"filled":true
}
},
"encoding":{
"x":{
"field":"serialnumber",
"type":"ordinal",
"axis":{
"labelAngle":-70,
"title":"Selected Tests",
"titleFontSize":10
}
},
"y":{
"field":{
"repeat":"layer"
},
"type":"quantitative",
"axis":{
"title":"Teststeps in selected Tests",
"titleFontSize":10
},
"scale":{
"domain":[
45000,
45500
]
}
},
"tooltip":[
{
"field":"serialnumber",
"type":"ordinal"
},
{
"field":"resultdecimal",
"type":"quantitative"
}
],
"color":{
"datum":{
"repeat":"layer"
},
"type":"nominal"
}
}
},
"config":{
"font":"Roboto",
"axisX":{
"labelFontSize":9
},
"axisY":{
"labelFontSize":9
}
}
}
The outcome is like this:
What i want to achieve is to define the colors of the lines based on the field names
if( highval)
color = red
if( lowval)
color = red
if (resultdecimal)
color = blue
so that the min-max is in red, the result is in blue.
If there is another way of displaying three different chart-lines and defining the values there properly, any ideas are welcome!
i think i found the answer:
here the vega-lite definition for conditional color
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"data": {
"values": [
{
"stepid":"4444",
"stepname":"Name1",
"serialnumber":"SN3444444",
"lowval":45000,
"highval":45500,
"resultdecimal":45466
},
{
"stepid":"4444",
"stepname":"Name1",
"serialnumber":"SN3444445",
"lowval":45000,
"highval":45500,
"resultdecimal":45433
},
{
"stepid":"4444",
"stepname":"Name1",
"serialnumber":"SN3444446",
"lowval":45000,
"highval":45500,
"resultdecimal":45400
},
{
"stepid":"4444",
"stepname":"Name1",
"serialnumber":"SN3444447",
"lowval":45000,
"highval":45500,
"resultdecimal":45422
},
{
"stepid":"4444",
"stepname":"Name1",
"serialnumber":"SN3444448",
"lowval":45000,
"highval":45500,
"resultdecimal":45403
},
{
"stepid":"4444",
"stepname":"Name1",
"serialnumber":"SN3444449",
"lowval":45000,
"highval":45500,
"resultdecimal":45422
}
]
},
"repeat": {
"layer": ["lowval", "highval","resultdecimal"]
},
"spec": {
"mark":{
"type":"line",
"strokeWidth":3,
"point":{
"size":45,
"filled":true
}
},
"encoding": {
"x": {
"field": "serialnumber",
"type": "ordinal",
"axis":{
"labelAngle":-70,
"title":"Selected Tests",
"titleFontSize":10
}
},
"y": {
"field": {"repeat": "layer"},
"type": "quantitative",
"axis": {
"title": "Teststeps in selected Tests",
"titleFontSize": 10},
"scale":{
"domain":[45000,45500]
}
},
"tooltip":[
{
"field":"serialnumber",
"type":"ordinal"
},
{
"field":"resultdecimal",
"type":"quantitative"
}
],
"color": {
"datum": {"repeat": "layer"},
"type": "nominal",
"scale": {
"range": ["#e7ba52", "#c7c7c7", "#e7ba52"]
},
"legend": {"title": "Weather type"}
}
}
},
"config": {
"font": "Roboto",
"axisX": {
"labelFontSize": 9
},
"axisY": {
"labelFontSize": 9
}
}
}
I'm trying to apply different filters for different nested aggregations. Is there a way to do this?
"filter": {
"nested": {
"path": "hierarchy.productGroup",
"filter": {
"terms": {
"hierarchy.productGroup.name": ["iPhone"]
}
}
}
},
"aggs": {
"category": {
"nested": {
"path": "hierarchy.productGroup"
},
"aggs": {
"category": {
"terms": {
"field": "hierarchy.productGroup.name"
}
}
}
},
"color": {
"filter": {
"nested": {
"path": "hierarchy.productGroup",
"filter": {
"terms": {
"hierarchy.productGroup.name": ["iPhone"]
}
}
}
},
"nested": {
"path": "specs.measurementsProduct.colorName"
},
"aggs": {
"color": {
"terms": {
"field": "specs.measurementsProduct.colorName.name"
}
}
}
}
}
When I run this query I get the following error:
Error: Parse Failure [Found two aggregation type definitions in [color]: [filter] and [nested]]];
I would like to make my color aggregation dependent on the category filter.
You forgot a key starting and ending.
Try with this json:
{
"filter": {
"nested": {
"path": "hierarchy.productGroup",
"filter": {
"terms": {
"hierarchy.productGroup.name": ["iPhone"]
}
}
}
},
"aggs": {
"category": {
"nested": {
"path": "hierarchy.productGroup"
},
"aggs": {
"category": {
"terms": {
"field": "hierarchy.productGroup.name"
}
}
}
},
"color": {
"filter": {
"nested": {
"path": "hierarchy.productGroup",
"filter": {
"terms": {
"hierarchy.productGroup.name": ["iPhone"]
}
}
}
},
"nested": {
"path": "specs.measurementsProduct.colorName"
},
"aggs": {
"color": {
"terms": {
"field": "specs.measurementsProduct.colorName.name"
}
}
}
}
}
}