Boa tarde, estou criando um gráfico customizado utilizando o Vega e, gostaria de criar e utilizar um dataset do tipo “Time Series Query”. Estou tendo dificuldades para utilizar este dataset criado utilizando a versão “Vega V5”.
Os exemplos apresentados na documentação da wegnology mostram apenas como utilizar datasets com o vega-lite.
Agradeço pela atenção.
Olá Gasperin,
Você poderia dar mais detalhes da sua dificuldade?
O que posso te sugerir sem ter muitos detalhes é de buscar um exemplo da configuração no site do Vega (Example Gallery | Vega).
Você vai notar que uma das diferenças é que o field data passa a ser um array:
Essa imagem da configuração do data eu peguei como exemplo de Bar Chart Example | Vega. Para concluir a configuração no WEGnology usando essa configuração de exemplo, é necessário renomear as referências ao nome table para o nome do seu query name, bem como os fields para time e value:
Fico no aguardo dos detalhes.
Abraço,
Bruno
Bom dia Bruno! Muito grato pela resposta.
Estou tentando desenvolver um gráfico similar ao mapa de calor do MFM, mas para outra aplicação. Encontrei um exemplo do Vega muito similar e já modifiquei alguns detalhes para se encaixar em minha aplicação, porém, não estava conseguindo inserir os dados no modelo.
Tentei reproduzir suas dicas no exemplo de Bar Chart Example | Vega. Segue o código que adaptei deste exemplo para utilizar datasets:
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"description": "A basic bar chart example, with value labels shown upon mouse hover.",
"width": 400,
"height": 200,
"padding": 5,
"datasets": {
"table": [
{"category": "A", "amount": 28},
{"category": "B", "amount": 55},
{"category": "C", "amount": 43},
{"category": "D", "amount": 91},
{"category": "E", "amount": 81},
{"category": "F", "amount": 53},
{"category": "G", "amount": 19},
{"category": "H", "amount": 87}
]
},
"data": [
{
"name": "table"
}
],
"signals": [
{
"name": "tooltip",
"value": {},
"on": [
{"events": "rect:mouseover", "update": "datum"},
{"events": "rect:mouseout", "update": "{}"}
]
}
],
"scales": [
{
"name": "xscale",
"type": "band",
"domain": {"data": "table", "field": "category"},
"range": "width",
"padding": 0.05,
"round": true
},
{
"name": "yscale",
"domain": {"data": "table", "field": "amount"},
"nice": true,
"range": "height"
}
],
"enter": {
"x": {"scale": "xscale","field": "category"},
"y": {"scale": "yscale","field":"amount"}
},
"x": {"scale": "xscale","field": "tooltip.category"},
"y": {"scale": "yscale","field":"tooltip.amount"},
"text":{"signal":"tooltip.amount"},
"axes": [
{ "orient": "bottom", "scale": "xscale" },
{ "orient": "left", "scale": "yscale" }
],
"marks": [
{
"type": "rect",
"from": {"data":"table"},
"encode": {
"enter": {
"x": {"scale": "xscale", "field": "category"},
"width": {"scale": "xscale", "band": 1},
"y": {"scale": "yscale", "field": "amount"},
"y2": {"scale": "yscale", "value": 0}
},
"update": {
"fill": {"value": "steelblue"}
},
"hover": {
"fill": {"value": "red"}
}
}
},
{
"type": "text",
"encode": {
"enter": {
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#333"}
},
"update": {
"x": {"scale": "xscale", "signal": "tooltip.category", "band": 0.5},
"y": {"scale": "yscale", "signal": "tooltip.amount", "offset": -2},
"text": {"signal": "tooltip.amount"},
"fillOpacity": [
{"test": "datum === tooltip", "value": 0},
{"value": 1}
]
}
}
}
]
}
Não fui bem sucedido com essa adaptação. Saberia me informar oque posso estar fazendo de errado?
Agradeço pela atenção.
Gasparin,
Tentei simular o exemplo que você mandou. Precisei fazer algumas adaptações. Ficou da seguinte forma:
{
"description": "A basic bar chart example, with value labels shown upon mouse hover.",
"padding": 5,
"width": 400,
"height": 200,
"data": [
{
"name": "table"
}
],
"signals": [
{
"name": "tooltip",
"value": {},
"on": [
{"events": "rect:mouseover", "update": "datum"},
{"events": "rect:mouseout", "update": "{}"}
]
}
],
"scales": [
{
"name": "xscale",
"type": "band",
"domain": {"data": "table", "field": "time"},
"range": "width",
"padding": 0.05,
"round": true
},
{
"name": "yscale",
"domain": {"data": "table", "field": "value"},
"nice": true,
"range": "height"
}
],
"enter": {
"x": {"scale": "xscale","field": "time"},
"y": {"scale": "yscale","field":"value"}
},
"x": {"scale": "xscale","field": "tooltip.time"},
"y": {"scale": "yscale","field":"tooltip.value"},
"text":{"signal":"tooltip.value"},
"axes": [
{ "orient": "bottom", "scale": "xscale" },
{ "orient": "left", "scale": "yscale" }
],
"marks": [
{
"type": "rect",
"from": {"data":"table"},
"encode": {
"enter": {
"x": {"scale": "xscale", "field": "time"},
"width": {"scale": "xscale", "band": 1},
"y": {"scale": "yscale", "field": "value"},
"y2": {"scale": "yscale", "value": 0}
},
"update": {
"fill": {"value": "steelblue"}
},
"hover": {
"fill": {"value": "red"}
}
}
},
{
"type": "text",
"encode": {
"enter": {
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#333"}
},
"update": {
"x": {"scale": "xscale", "signal": "tooltip.time", "band": 0.5},
"y": {"scale": "yscale", "signal": "tooltip.value", "offset": -2},
"text": {"signal": "tooltip.value"},
"fillOpacity": [
{"test": "datum === tooltip", "value": 0},
{"value": 1}
]
}
}
}
]
}
É importante que você verifique também se o data name é igual ao do dataset configurado:
Isso já deve ser suficiente para que a visualização do gráfico fique disponível e te permita fazer os demais ajustes para a sua necessidade.
Abraço,
Bruno.
Bom dia!
Muito obrigado bruno! A sua solução funcionou para mim.
Estou novamente com um problema para inserir os dados de um “dataset” com o “Vega V5”.
A tabela que estou tentando utilizar é a seguinte:
https://raw.githubusercontent.com/G4sperin/test2/main/6203c2a4b04f50667fecbf1d-data-table-data-1644413758054.csv
E este é o código que estou tentando rodar:
{
"description": "Area charts of stock prices, with an interactive overview and filtered detail views.",
"width": 720,
"height": 480,
"padding": 5,
"data": [
{
"name": "data-table-0"
}
],
"signals": [
{
"name": "detailDomain"
}
],
"marks": [
{
"type": "group",
"name": "detail",
"encode": {
"enter": {
"height": {"value": 390},
"width": {"value": 720}
}
},
"scales": [
{
"name": "xDetail",
"type": "time",
"range": "width",
"domain": {"data": "data-table-0", "field": "Timestamp"},
"domainRaw": {"signal": "detailDomain"}
},
{
"name": "yDetail",
"type": "linear",
"range": [390, 0],
"domain": {"data": "data-table-0", "field": "CNP_kWh"},
"nice": true, "zero": true
}
],
"axes": [
{"orient": "bottom", "scale": "xDetail"},
{"orient": "left", "scale": "yDetail"}
],
"marks": [
{
"type": "group",
"encode": {
"enter": {
"height": {"field": {"group": "height"}},
"width": {"field": {"group": "width"}},
"clip": {"value": true}
}
},
"marks": [
{
"type": "area",
"from": {"data": "data-table-0"},
"encode": {
"update": {
"x": {"scale": "xDetail", "field": "Timestamp"},
"y": {"scale": "yDetail", "field": "CNP_kWh"},
"y2": {"scale": "yDetail", "value": 0},
"fill": {"value": "steelblue"}
}
}
}
]
}
]
},
{
"type": "group",
"name": "overview",
"encode": {
"enter": {
"x": {"value": 0},
"y": {"value": 430},
"height": {"value": 70},
"width": {"value": 720},
"fill": {"value": "transparent"}
}
},
"signals": [
{
"name": "brush", "value": 0,
"on": [
{
"events": "@overview:mousedown",
"update": "[x(), x()]"
},
{
"events": "[@overview:mousedown, window:mouseup] > window:mousemove!",
"update": "[brush[0], clamp(x(), 0, width)]"
},
{
"events": {"signal": "delta"},
"update": "clampRange([anchor[0] + delta, anchor[1] + delta], 0, width)"
}
]
},
{
"name": "anchor", "value": null,
"on": [{"events": "@brush:mousedown", "update": "slice(brush)"}]
},
{
"name": "xdown", "value": 0,
"on": [{"events": "@brush:mousedown", "update": "x()"}]
},
{
"name": "delta", "value": 0,
"on": [
{
"events": "[@brush:mousedown, window:mouseup] > window:mousemove!",
"update": "x() - xdown"
}
]
},
{
"name": "detailDomain",
"push": "outer",
"on": [
{
"events": {"signal": "brush"},
"update": "span(brush) ? invert('xOverview', brush) : null"
}
]
}
],
"scales": [
{
"name": "xOverview",
"type": "time",
"range": "width",
"domain": {"data": "data-table-0", "field": "Timestamp"}
},
{
"name": "yOverview",
"type": "linear",
"range": [70, 0],
"domain": {"data": "data-table-0", "field": "CNP_kWh"},
"nice": true, "zero": true
}
],
"axes": [
{"orient": "bottom", "scale": "xOverview"}
],
"marks": [
{
"type": "area",
"interactive": false,
"from": {"data": "data-table-0"},
"encode": {
"update": {
"x": {"scale": "xOverview", "field": "Timestamp"},
"y": {"scale": "yOverview", "field": "CNP_kWh"},
"y2": {"scale": "yOverview", "value": 0},
"fill": {"value": "steelblue"}
}
}
},
{
"type": "rect",
"name": "brush",
"encode": {
"enter": {
"y": {"value": 0},
"height": {"value": 70},
"fill": {"value": "#333"},
"fillOpacity": {"value": 0.2}
},
"update": {
"x": {"signal": "brush[0]"},
"x2": {"signal": "brush[1]"}
}
}
},
{
"type": "rect",
"interactive": false,
"encode": {
"enter": {
"y": {"value": 0},
"height": {"value": 70},
"width": {"value": 1},
"fill": {"value": "firebrick"}
},
"update": {
"x": {"signal": "brush[0]"}
}
}
},
{
"type": "rect",
"interactive": false,
"encode": {
"enter": {
"y": {"value": 0},
"height": {"value": 70},
"width": {"value": 1},
"fill": {"value": "firebrick"}
},
"update": {
"x": {"signal": "brush[1]"}
}
}
}
]
}
]
}
Os dados do gráfico não são plotados, como segue a imagem:
O que me deixa confuso é que se eu utilizar esse mesmo código, adaptado para url no editor do vega, este mesmo funciona.
Segue código adaptado para o editor do vega:
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"description": "Area charts of stock prices, with an interactive overview and filtered detail views.",
"width": 720,
"height": 480,
"padding": 5,
"data": [
{
"name": "data-table-0",
"url": "https://raw.githubusercontent.com/G4sperin/test2/main/6203c2a4b04f50667fecbf1d-data-table-data-1644413758054.csv",
"format": {"type": "csv", "parse": {"CNP_kWh": "number", "Timestamp": "date"}}
}
],
"signals": [
{
"name": "detailDomain"
}
],
"marks": [
{
"type": "group",
"name": "detail",
"encode": {
"enter": {
"height": {"value": 390},
"width": {"value": 720}
}
},
"scales": [
{
"name": "xDetail",
"type": "time",
"range": "width",
"domain": {"data": "data-table-0", "field": "Timestamp"},
"domainRaw": {"signal": "detailDomain"}
},
{
"name": "yDetail",
"type": "linear",
"range": [390, 0],
"domain": {"data": "data-table-0", "field": "CNP_kWh"},
"nice": true, "zero": true
}
],
"axes": [
{"orient": "bottom", "scale": "xDetail"},
{"orient": "left", "scale": "yDetail"}
],
"marks": [
{
"type": "group",
"encode": {
"enter": {
"height": {"field": {"group": "height"}},
"width": {"field": {"group": "width"}},
"clip": {"value": true}
}
},
"marks": [
{
"type": "area",
"from": {"data": "data-table-0"},
"encode": {
"update": {
"x": {"scale": "xDetail", "field": "Timestamp"},
"y": {"scale": "yDetail", "field": "CNP_kWh"},
"y2": {"scale": "yDetail", "value": 0},
"fill": {"value": "steelblue"}
}
}
}
]
}
]
},
{
"type": "group",
"name": "overview",
"encode": {
"enter": {
"x": {"value": 0},
"y": {"value": 430},
"height": {"value": 70},
"width": {"value": 720},
"fill": {"value": "transparent"}
}
},
"signals": [
{
"name": "brush", "value": 0,
"on": [
{
"events": "@overview:mousedown",
"update": "[x(), x()]"
},
{
"events": "[@overview:mousedown, window:mouseup] > window:mousemove!",
"update": "[brush[0], clamp(x(), 0, width)]"
},
{
"events": {"signal": "delta"},
"update": "clampRange([anchor[0] + delta, anchor[1] + delta], 0, width)"
}
]
},
{
"name": "anchor", "value": null,
"on": [{"events": "@brush:mousedown", "update": "slice(brush)"}]
},
{
"name": "xdown", "value": 0,
"on": [{"events": "@brush:mousedown", "update": "x()"}]
},
{
"name": "delta", "value": 0,
"on": [
{
"events": "[@brush:mousedown, window:mouseup] > window:mousemove!",
"update": "x() - xdown"
}
]
},
{
"name": "detailDomain",
"push": "outer",
"on": [
{
"events": {"signal": "brush"},
"update": "span(brush) ? invert('xOverview', brush) : null"
}
]
}
],
"scales": [
{
"name": "xOverview",
"type": "time",
"range": "width",
"domain": {"data": "data-table-0", "field": "Timestamp"}
},
{
"name": "yOverview",
"type": "linear",
"range": [70, 0],
"domain": {"data": "data-table-0", "field": "CNP_kWh"},
"nice": true, "zero": true
}
],
"axes": [
{"orient": "bottom", "scale": "xOverview"}
],
"marks": [
{
"type": "area",
"interactive": false,
"from": {"data": "data-table-0"},
"encode": {
"update": {
"x": {"scale": "xOverview", "field": "Timestamp"},
"y": {"scale": "yOverview", "field": "CNP_kWh"},
"y2": {"scale": "yOverview", "value": 0},
"fill": {"value": "steelblue"}
}
}
},
{
"type": "rect",
"name": "brush",
"encode": {
"enter": {
"y": {"value": 0},
"height": {"value": 70},
"fill": {"value": "#333"},
"fillOpacity": {"value": 0.2}
},
"update": {
"x": {"signal": "brush[0]"},
"x2": {"signal": "brush[1]"}
}
}
},
{
"type": "rect",
"interactive": false,
"encode": {
"enter": {
"y": {"value": 0},
"height": {"value": 70},
"width": {"value": 1},
"fill": {"value": "firebrick"}
},
"update": {
"x": {"signal": "brush[0]"}
}
}
},
{
"type": "rect",
"interactive": false,
"encode": {
"enter": {
"y": {"value": 0},
"height": {"value": 70},
"width": {"value": 1},
"fill": {"value": "firebrick"}
},
"update": {
"x": {"signal": "brush[1]"}
}
}
}
]
}
]
}
Muito grato pela atenção, fico no aguardo para alguma possível solução.
Bom dia, Gasperin!
FIco feliz que o outro problema tenha sido resolvido. Obrigado pelo feedback.
Acredito que o problema nesse novo caso seja o formato do dado. Veja a diferença entre o formato do timestamp no arquivo que você enviou e no site do Vega:
Fiz um teste rápido inserindo em um data table poucos valores conforme a sua tabela para tentar simular o problema.
Mudei o conteúdo do Timestamp com o epoch que obtive usando o site https://www.epochconverter.com/
Com o valor nesse formato, começou a aparecer conteúdo no meu gráfico:
Abraço,
Bruno
Muito obrigado novamente Bruno.
Sua solução funcionou aqui.
