Can you provide a link please? I can't find it...
I have managed to recreate this simple example in Vue.
At the same time I'm trying to get everything working before I try to move to using Vega Vue component (using build step).
Here are my questions (if anyone have time to respond):
1. When using 2 or more VegaEmbed functions everything loads OK - the static datasets anyway. However when try to load data dynamicaly I get this error:
vega.js:123 Uncaught Error: Unrecognized data set: table
Here is only this piece of the JS code
const origData = [
{"x": 0, "y": 0, "c": 0}, {"x": 0, "y": 0, "c": 1},
{"x": 1, "y": 0, "c": 0}, {"x": 1, "y": 0, "c": 1},
{"x": 2, "y": 0, "c": 0}, {"x": 2, "y": 0, "c": 1},
{"x": 3, "y": 0, "c": 0}, {"x": 3, "y": 0, "c": 1},
{"x": 4, "y": 0, "c": 0}, {"x": 4, "y": 0, "c": 1},
{"x": 5, "y": 0, "c": 0}, {"x": 5, "y": 0, "c": 1},
{"x": 6, "y": 0, "c": 0}, {"x": 6, "y": 0, "c": 1},
{"x": 7, "y": 0, "c": 0}, {"x": 7, "y": 0, "c": 1},
{"x": 8, "y": 0, "c": 0}, {"x": 8, "y": 0, "c": 1},
{"x": 9, "y": 0, "c": 0}, {"x": 9, "y": 0, "c": 1}
]
var origData2 = [
{"x": 0, "y": 58, "c": 0}, {"x": 0, "y": 55, "c": 1},
{"x": 1, "y": 43, "c": 0}, {"x": 1, "y": 91, "c": 1},
{"x": 2, "y": 81, "c": 0}, {"x": 2, "y": 53, "c": 1},
{"x": 3, "y": 19, "c": 0}, {"x": 3, "y": 87, "c": 1},
{"x": 4, "y": 52, "c": 0}, {"x": 4, "y": 48, "c": 1},
{"x": 5, "y": 24, "c": 0}, {"x": 5, "y": 49, "c": 1},
{"x": 6, "y": 87, "c": 0}, {"x": 6, "y": 66, "c": 1},
{"x": 7, "y": 17, "c": 0}, {"x": 7, "y": 87, "c": 1},
{"x": 8, "y": 18, "c": 0}, {"x": 8, "y": 16, "c": 1},
{"x": 9, "y": 49, "c": 0}, {"x": 9, "y": 15, "c": 1}
]
const vlJson = "bar.json"
// Embed visualization and save view as window.view:
vegaEmbed('#view', vlJson).then( res => {
res.view
.insert('table', origData)
.run()
// Save the view to window.view for later use
window.view = res.view
})
const vlJson2 = "bar2.json"
vegaEmbed('#view2', vlJson2).then( res => {
res.view
.insert('table2', origData2)
.run()
// Save the view to window.view for later use
window.view = res.view
})
//console.log(vega.changeset())
uibuilder.onChange('msg', function(msg){
console.info('[indexjs:uibuilder.onChange] msg received from Node-RED server:', msg)
app.msgRecvd = msg
app.msgsReceived = uibuilder.get('msgsReceived')
app.lastMsg = msg
var changeSet = vega
.changeset()
.insert(msg.payload)
// .remove(function (t) {
// return t.x < minimumX
// })
window.view.change('table', changeSet).run().resize()
// Changeset needs to remove everything first, then insert new data
// let changeset = vega.changeset().remove(() => true).insert(data);
// For some reason source_0 is the default dataset name
// view.change('source_0', changeset).run()
})
I cant find the link on the web and I have no Idea whats wrong and how to solve this..
2. I tried load the JSON using fetch like @UnborN suggested but I don't know JS good and I can't seem to find the solution on the web.
I've tried this:
var vlJson2;
fetch("bar.json")
.then((response) => {
return response.json();
})
.then(data => console.log(data))
.then((data) => {
var vlJson2 = data;
})
but vlJson2 isn't usable outside the callback.
I've also tried this:
//var vlJson2;
fetch("bar.json")
.then((response) => {
return response.json();
})
.then(data => console.log(data))
.then((data) => {
//var vlJson2 = data;
vegaEmbed('#view2', data).then( res => {
res.view
.insert('table2', origData2)
.run()
// Save the view to window.view for later use
window.view = res.view
})
})
But it gave me error:
Uncaught (in promise) TypeError: Cannot read properties at chart load.
3. This part I still dont understand. Is it only me or does anyone else have this kind of problems?
So, ATM I just copy-pasted the JS vega files to the static folder and I'm loading them from there.
You're saying its better to install them using NPM? like npm i vega-embed and then load to them to the uibuilder? How? I have all the uibuilder examples installed but I've only found this:
<!-- Loading from CDN, use uibuilder to install packages and change to vendor links -->
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-apexcharts"></script>
