How to use Apex charts with Wappler and change the font and grid color in Charts component

Thank you!

I’ve followed this by the book and cannot get any chart to show data.
I get the chart block, but no line.
Can anyone see anything glaringly obvious?

Error Message: It is a possibility that you may have not included ‘data’ property in series

My page is broken down as below

<dmx-serverconnect id="serverconnect1" url="api/myQuery" onsuccess="chartUpdate()"></dmx-serverconnect>

<div class="container mt-5" id="ApexChartsBlock">
    <div class="row">
        <div class="col">
            <div id="chart"></div>
        </div>
    </div>
</div>

<script src="js/chart1.js"></script>

my chart1.js is as follows

var options = {
    chart: {
        height: 350,
        type: 'line',
    },
    dataLabels: {
        enabled: false
    },
    series: [],
    title: {
        text: 'Apex Chart Test',
    },
    noData: {
        text: 'Loading...'
    }
}

var chart = new ApexCharts(
    document.querySelector("#chart"),
    options
);

chart.render();

function chartUpdate() {
    chart.updateSeries(
        [{
            name: 'Cost',
            data: dmx.parse('serverconnect1.data.query1')
        }]
    )
};

and my serverconnect1 returns the following:

{"query1":[{"x":"DEMO1","y":105},{"x":"DEMO2,"y":100},{"x":"DEMO3","y":90},{"x":"DEMO4r","y":105},{"x":"DEMO1","y":107},{"x":"DEMO3","y":85},{"x":"DEMO1","y":12},{"x":"DEMO2","y":58},{"x":"DEMO2","y":88},{"x":"DEMO4","y":96}]}

Result

Thanks in advance

is the chartUpdate function called using the success event of the Server Connect action?

Are u working in PHP or NODE? cause if u are working with php your server connect URL should be

url="dmxConnect/api/myQuery"

As far as I can see the script is correct and you have correctly set in server connect onsuccess = “chartUpdate ()”
So the problem must be that the data from your database does not reach your page. To test that I would generate a table and see if it returns the values correctly.

Hi @Max_Saravia its NODE and that URL was correct no dmxconnect needed.
I created a table with a repeat and data was listed as expected.

I managed to resolve this, but I don’t know the reason.

The chart was initially created as a content page.
When I recreated with a normal page structure it worked.

Probably due to a timing issue.

This approach is OK for simple things, but when you get into complex javascript binding events and firing them you will end with quite some spaghetti code trying to make your vanilla js work in harmony with App Connect library. So I stopped recommending this approach for 3rd party libraries.

Now I recommend creating custom wappler components that leverage App Connect framework.

Here you have additional info on how to create one:

And if you are looking specifically for ApexCharts here you have a quick example I created a month ago:

It’s basic but it will get you going. Since then I improved my ApexCharts custom component and I’m just waiting for the team to release custom component UI support in order to release it as an extension.

Even if you are not comfortable with JS and how App Connect works I advise you to go this route because you will get a reliable and smoother experience and less “I managed to resolve this, but I don’t know the reason.”

Good luck.

Thanks for the detailed write up @Max_Saravia. I was able to get ApexCharts working. In my haste to build a quick POC I learned (after too long debugging) that dmx.parse will not work if the serverconnect is on the content page. After adding the serverconnect to the layout things worked as expected. Hopefully this saves someone time in the future!

Hey Frank,
dmx.parse should still work but you usually need to prefix it with content.

e.g.

dmx.parse("serverconnect1.data.test")

on a content page would be

dmx.parse("content.serverconnect1.data.test")

Something that I use all the time to check data references is dmx.app.data
You can check the full path to and dmx data item on the page.

1 Like

That is super-helpful. Thank you!

1 Like

Hi Max_Saravia,
Thank you so much for your help. Beautifully explained and that’s why first time I tried it, and it worked. I do though want to know if I want to have a trend type apex chart, let’s say 7 days trend for {{serverconnect3.data.cpuload.value}} datapoint. This data point is coming stright from an opc ua server device. I can bring the point in, and I can read it all fine on any element using dynamic attribute, but how can I insert 7 days every 5 minutes of it in the apexchart? using dmx.parse(‘serverconnect3.data.cpuload.value’) is not working! any help would appreciated so much.
Ashur…

Hi Ashur, sorry for the delay in the response, I was traveling and quite disconnected. I’m glad my explanation was helpful to you.
Regarding your question, exactly how do you get that data? from a sql database, a json file, or some other way? On the other hand, did you set the Aliases correctly in the server-side query?

No worries Max. Thanks a lot for your response.
So there is an opc ua extension where you can use to bring in your data from an opc ua devices. the extension is made by sw11, and this link shows how you install it https://watch.screencastify.com/v/DNaA62ZIJco7KGFP8qTJ
so that’s my plan on how to bring the data in. but I’m not sure if it’s the best way compare to other ways like MySQL database. Please check it out and let me know your thoughts. It’s interesting extension
Best regards.

So did u set the aliases x and y so the script can read the data for the correct axis and display it?

like i did here:

Of corse u gonna have to do it inside your code extension.

so this extension goes straight to the data. there is no query type connection. it connects Like this,

So I can connect to to it using {{SC.data.cpuload.value}} through dynamic attribute, but when I put that in data: dmx.parse(‘SC.data.cpuload.value’) it doesn’t work because how can I say that y or x! like in your query image, that’s one issue . The other thing Max. let’s say I use database query like you way, when I have 3 Ys and one X how do you do that in the query?

Since I don’t know how your extension displays the information that you receive, I guess the easiest way to do it would be to pass it to a database and from there create a server action that you can then display with apex.charts.

Regarding the “3 Y” I guess you could use three different graphs instead of just one or make a join between the three fields into one and then display the information in a single Y.

1 Like

Thanks Max, but those graphs have to be in one chart.

Ok then u can use a Dashed line chart.

1 Like

I evidently chose the right place to put this request!
Thanks, @Max_Saravia !

I’ve pulled together several of your replies to charts topics in the Forum and they should really help me!

YOU dah MAN!

1 Like

thanks Max.
Please forgive my knowledge, but
in series: [{
name: “Session Duration”,
data: [what is the syntax here to get my_API values?]
},
{
name: “Page Views”,
data: [what is the syntax here to get my_API values?]
},
{
name: ‘Total Visits’,
data: [what is the syntax here to get my_API values?]
}
],
I tried [{{sc.data.my_API.value}}] and it didn’t work.

May be im wrong cause i dont know your schema, but i think it should be [{{sc.data.my_API}}]