Using app connect values in js functions

Wappler General Need Help
1

Trying to get the basics of dmx.parse() up and running but getting undefined in console when running the function.

Just using this code before I work with and array:

<dmx-value id="var1" dmx-bind:value="123"></dmx-value>
<script>
    function myFunction() {
    var myVar = dmx.parse('var1.value');
    console.log(myVar);
}
</script>

Then I just added a static event onclick of a button:

<button id="btn1" class="btn" onclick="myFunction()">Button</button>

With the above inclucing dmx.parse I get undefined in console

If I remove dmx.parse I obviously get ‘var1.value’ printed and not the 123 value of the data variable.

What am I missing in terms of getting dmx.parse working?

2

On what page is the var1.value located?
You can see the correct path to it by entering dmx.app.data in the console. So if it’s a content page it will be content.var1.value.

3

It is a content page.

When entering dmx.app.data in console I only get ‘dmx.app.data’ back

Screenshot 2021-11-23 at 11.53.51

4

Well :slight_smile: press enter and expand the result.

5

that is what Safari Browser gives me - cannot expand - was after pressing enter

Did with Chrome now and get this back:

Screenshot 2021-11-23 at 11.58.52

6

Click he little arrow in front of the expression and expand it. You can see your app structure and construct the correct path for your expression.

appdata
appdata1101×604 188 KB

1 Like
7

Ok, My bad… Got it. What am I looking for?

Screenshot 2021-11-23 at 12.24.25
Screenshot 2021-11-23 at 12.24.251397×864 98.8 KB

8

So your correct expression would be:

dmx.parse('content.var1.value');

Screenshot_4
Screenshot_41389×778 197 KB

1 Like
9

Ok, great. I now replaced the ‘123’ value with results from the server connect query and my data shows.

Data comes back as {year: 2022} {year: 2023} {year: 2024} etc

Graph code needs is this way:

xAxis: {
data: [‘2022’, ‘2023’, ‘2024’, ‘2025’, ‘2026’, ‘2027’]
},

I hope there is a way to prepare it :grimacing:

10

Isn’t the values formatter doing the job for you?

serverconnect1.data.query.values(`year`)
1 Like
11

never knew about that one… BUT now I do!

last one and then I hope I am out of your hair for today. Syntax for now using it with the charts code. I need to use myVar that has all the data in and replace [‘Shirts’, ‘Cardigans’, ‘Chiffons’, ‘Pants’, ‘Heels’, ‘Socks’] in this section:

xAxis: {
data: [‘Shirts’, ‘Cardigans’, ‘Chiffons’, ‘Pants’, ‘Heels’, ‘Socks’]
},

Thanks for your help

12

I don't quite understand your question, can you clarify please?

13

This is the code to add data to echarts:

Screenshot 2021-11-23 at 13.10.53
Screenshot 2021-11-23 at 13.10.53728×480 28.2 KB

I want to now use the parsed data in myVar to populate the xAxis of the graph and then other data to populate the y-axis.

14

Have you already tried using dmx.parse the data there? I thought you were doing this the whole time?

xAxis: {
data: dmx.parse('serverconnect1.data.query.values(`year`)')
},

?

15

Graph renders but does not resemble the values in the dataset.

Screenshot 2021-11-23 at 13.26.27

Screenshot 2021-11-23 at 13.27.07

16

You need to initialize the chart after the data has finished loading. So you need to wrap your chart script in a function like:

function chartInit() {

// Initialize the echarts instance based on the prepared dom
var myChart = echarts.init(document.getElementById('main'));
...
...
...
myChart.setOption(option);
}

and then load it onsuccess of the server connect component on the page…

<dmx-serverconnect id="serverconnect1" url="dmxConnect/api/data/myaction.php" onsuccess="chartInit()"></dmx-serverconnect>

are you sure you have the required skills to use third party script like this and all its option?
What is missing from the charts component in Wappler?

1 Like
17

Thanks, building my skills as I go along with your help. Was always able to get things done by getting help from you or others.

Cannot format numbers with thousand seperator with Chart.js (Wappler Charts) and also cannot style easily. There are methods to add number formatting that I found in forums, but the way it is implimented in Wappler does not allow that type of customisation.

Let me use your code advise and see if I can get the chart showing. Thanks

18

I changed the code but it seems to still load the graph without the data…

Attached my page zipped if you can see if you see a problem. Cannot see one.

charts.ejs.zip (1.4 KB)

19

I also put the chartInit() to run at onclick of the button long after data loaded and it does the same, so it seems to be the parsed data that is the problem and not only when ithe chart is loaded.

20

Are you 100% sure you want these to be in the xAxis and not yAxis??

Also:

That is already possible:

1 Like