Charts - multiple sets but only one data source?

Wappler General How To
#1

Hi Wapplers,

I am trying to show more than one data set on one chart. However, there is only place for one data source. I need to show on the same graph different data based on different conditions. Is there a way to do this? At the moment I am only able to grab values from the one query.

If not, this would certainly be a much needed feature!

#2

First and last time I tried to use Wappler charts, I switched to Apex Charts

Wappler charts are in need of updates

#3

Agreed! Major improvement needed for charts.

How do I use dynamic data in Apex charts? I have it working just not sure how to get data sets

JS options in the script as follows - not sure what to put in data

data: [dmx-bind:data=“getmydealss.data.query”]
}, {
name: ‘series2’,
data: [11, 32, 45, 32, 34, 52, 41]
}],

#4

Hey,

Sorry, I currently lack the time to give a proper tutorial :frowning:

I can give you some snippets to help you a bit, but it doesn’t chart as-is:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.39.0/apexcharts.min.js" integrity="sha512-jZMUAHj0E1ZO8dGoWdvwCQ/bh4sefOi6lwM5XcjnpzyTfOc409SrdZAdbvum112UT1c/SqVSPZAzksUkxVcQ8w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.39.0/apexcharts.min.css" integrity="sha512-tJYqW5NWrT0JEkWYxrI4IK2jvT7PAiOwElIGTjALSyr8ZrilUQf+gjw2z6woWGSZqeXASyBXUr+WbtqiQgxUYg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

Where you want to place the chart, place this:

<div id="mychart1"></div>
<script>
function runChart() {
  // ApexCharts stuff goes here - check their documentation
  // var options = (...)
  const chart = new ApexCharts(document.querySelector("#mychart1"), options);
  chart.render();
}
</script>

To get the data of a server connect, use in Apex Charts options:

series: [
                                            {
                                                name: "My data 1",
                                                data: dmx.parse("content.sc_mydata.data.mydata1"),
                                            },

The data “mydata1” I believe it must be an array, so server-side you need to use the .flatten formatter after the DB query (use a Set Value)

To run the chart, use a Dynamic Event on your server connect, to run the Javascript function “runChart” we defined previously