Forum Discussion
Power BI - Deneb visual - Read a JSON to create the visuals
JSON.parse() is not a valid expression in Vega. For security reasons, you don't have access to JavaScript in Vega, and they provide many expressions that solve a lot of common scenarios. Even if Vega did have access to JS through its runtime, we would not be able to execute it in a certified visual, as MS certification rules prohibit it. In addition to it being a powerful language, it's one of the reasons I chose Vega for this visual, as their parser solves many challenges that the certification rules impose without me having to solve them myself.
Right now, I don't think that what you're attempting will be possible. If you can add a column that can potentially work in a comma-separated format, you might be able to do something with that (e.g., split() ) in a transform to turn it into an array of values, but you won't be able to parse a JSON string into an object.
Regards,
Daniel
But when I use JSON.parse I have lot of different errrors.What are these?
I would recommend you start with a much smaller sample. Single column, single JSON value etc. Then try to parse that and render in your visual.
If you provide a small proof of concept it will be easier to help.
Hi Ibendlin,
Thanks for your answer.
Please find here a small code with an embedded example. I still have : [Error] Illegal callee type: MemberExpression as result and I don't see my
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"description": "A minimal Vega example demonstrating how to parse a JSON string and create a simple chart.",
"width": 500,
"height": 200,
"padding": 5,
"data": [
{
"name": "source",
"values": [
{
"my_json_column": "{\"schedule_rules\":[{\"day_num\":\"0\",\"segments\":[{\"end_time\":\"23:59\",\"start_time\":\"00:00\",\"type\":\"No Production\"}]},{\"day_num\":\"1\",\"segments\":[{\"end_time\":\"12:30\",\"start_time\":\"08:30\",\"type\":\"Normal\"},{\"end_time\":\"16:30\",\"start_time\":\"13:30\",\"type\":\"Normal\"}]},{\"day_num\":\"2\",\"segments\":[{\"end_time\":\"12:30\",\"start_time\":\"08:30\",\"type\":\"Normal\"},{\"end_time\":\"16:30\",\"start_time\":\"13:30\",\"type\":\"Normal\"}]},{\"day_num\":\"3\",\"segments\":[{\"end_time\":\"12:30\",\"start_time\":\"08:30\",\"type\":\"Normal\"},{\"end_time\":\"16:30\",\"start_time\":\"13:30\",\"type\":\"Normal\"}]},{\"day_num\":\"4\",\"segments\":[{\"end_time\":\"12:30\",\"start_time\":\"08:30\",\"type\":\"Normal\"},{\"end_time\":\"16:30\",\"start_time\":\"13:30\",\"type\":\"Normal\"}]},{\"day_num\":\"5\",\"segments\":[{\"end_time\":\"12:30\",\"start_time\":\"08:30\",\"type\":\"Normal\"},{\"end_time\":\"16:30\",\"start_time\":\"13:30\",\"type\":\"Normal\"}]},{\"day_num\":\"6\",\"segments\":[{\"end_time\":\"23:59\",\"start_time\":\"00:00\",\"type\":\"No Production\"}]}]}"
}
],
"transform": [
{
"type": "formula",
"as": "parsed_json",
"expr": "JSON.parse(datum.my_json_column)"
},
{
"type": "flatten",
"fields": ["parsed_json.schedule_rules"],
"as": ["rule"]
},
{
"type": "flatten",
"fields": ["rule.segments"],
"as": ["segment"]
},
{
"type": "formula",
"as": "startTime",
"expr": "toNumber(split(datum.segment.start_time, ':')[0]) + (toNumber(split(datum.segment.start_time, ':')[1]) / 60)"
},
{
"type": "formula",
"as": "endTime",
"expr": "toNumber(split(datum.segment.end_time, ':')[0]) + (toNumber(split(datum.segment.end_time, ':')[1]) / 60)"
},
{
"type": "formula",
"as": "day",
"expr": "datum.rule.day_num"
},
{
"type": "formula",
"as": "type",
"expr": "datum.segment.type"
}
]
}
],
"scales": [
{
"name": "yscale",
"type": "band",
"range": "height",
"domain": {"data": "source", "field": "day"},
"padding": 0.1
},
{
"name": "xscale",
"type": "linear",
"range": "width",
"domain": [0, 24]
},
{
"name": "color",
"type": "ordinal",
"range": "category",
"domain": {"data": "source", "field": "type"}
}
],
"axes": [
{"orient": "bottom", "scale": "xscale", "tickCount": 24, "title": "Hour of Day"},
{"orient": "left", "scale": "yscale", "title": "Day of Week"}
],
"legends": [
{"fill": "color", "title": "Segment Type"}
],
"marks": [
{
"type": "rect",
"from": {"data": "source"},
"encode": {
"enter": {
"y": {"scale": "yscale", "field": "day"},
"height": {"scale": "yscale", "band": 1},
"x": {"scale": "xscale", "field": "startTime"},
"x2": {"scale": "xscale", "field": "endTime"},
"fill": {"scale": "color", "field": "type"}
}
}
}
]
}
JSON.parse() is not a valid expression in Vega. For security reasons, you don't have access to JavaScript in Vega, and they provide many expressions that solve a lot of common scenarios. Even if Vega did have access to JS through its runtime, we would not be able to execute it in a certified visual, as MS certification rules prohibit it. In addition to it being a powerful language, it's one of the reasons I chose Vega for this visual, as their parser solves many challenges that the certification rules impose without me having to solve them myself.
Right now, I don't think that what you're attempting will be possible. If you can add a column that can potentially work in a comma-separated format, you might be able to do something with that (e.g., split() ) in a transform to turn it into an array of values, but you won't be able to parse a JSON string into an object.
Regards,
Daniel