# Uibuilder vega chart and db-s integration

**URL:** <https://discourse.nodered.org/t/uibuilder-vega-chart-and-db-s-integration/55611>\
**Category:** General\
**Tags:** uibuilder\
**Created:** [23 December 2021 12:53 UTC](https://discourse.nodered.org/t/uibuilder-vega-chart-and-db-s-integration/55611 "2021-12-23T12:53:29Z")\
**Posts on this page:** 1\
**Showing post:** 9

<div class="post-metadata">

**Author:** ![nerevar](https://avatars.discourse-cdn.com/v4/letter/n/f475e1/32.png) [@nerevar](https://discourse.nodered.org/u/nerevar)\
**Post date:** [26 January 2022 13:42 UTC](https://discourse.nodered.org/t/uibuilder-vega-chart-and-db-s-integration/55611/9 "2022-01-26T13:42:51Z")

</div>

> [@TotallyInformation](#):
>
> Sorry but I've never used Vega. I simply grabbed an example from their website.

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**
>
> ```auto
> 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.

> [@Uibuilder error 404 (not found)](https://discourse.nodered.org/t/uibuilder-error-404-not-found/56919/12):
>
> also what do you expect to happen with this line ?  
> `const vlJson = "bar.json"`  
> read and load the bar.json file ?  
> ([look into using Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) or better send the bar.json file from Node-red to uibuilder and then trigger the draw of the chart )

I've tried this:

```auto
        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:

```auto
//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?

> [@Uibuilder error 404 (not found)](https://discourse.nodered.org/t/uibuilder-error-404-not-found/56919/13):
>
> Vega and Vega-lite are both available as npm packages. That means that you can use uibuilder to serve the code.

> [@Uibuilder error 404 (not found)](https://discourse.nodered.org/t/uibuilder-error-404-not-found/56919/15):
>
> There are examples of using similar libraries in the WIKI. Start with using the CDN versions so you know that it is working. Then Install the libraries using the library manager and follow the instructions for finding the right URL.

> [@Node-RED projects + uibuilder: How to include installation of vue, bootstrap, bootstrap-vue?](https://discourse.nodered.org/t/node-red-projects-uibuilder-how-to-include-installation-of-vue-bootstrap-bootstrap-vue/43898/2):
>
> Hi Michael, there are two places where you need the list of installed libraries. ~/.node-red/package.json - required for the npm package installation ~/.node-red/uibuilder/.config/packageList.json - required so that uibuilder knows which installed packages to serve up using its web server. I think (though I don't use projects so I'm a little vague on memory sorry) that the uibuilder folder is under the project folder. ~/.node-red/projects/\<projectName\>/uibuilder/.config/packageList.json. Ho…

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:

```auto
    <!-- 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>

```

---

_[View the full topic](https://discourse.nodered.org/t/uibuilder-vega-chart-and-db-s-integration/55611)._