Page 1 of 1

Apex charts

Posted: Mon May 03, 2021 1:28 pm
by GlenMcCabe
I have several simple Apex charts based around referrals to an organisation.

eg

referrals by coordinator responsible for referral
referrals by reason for referral
referrals by location

I am now trying to chart more complex charts.

eg referrals by coordinator and reason. I can select the information and produce an array of the format
user reason referrals
user1, reason1, 7
user1, reason3, 24
user4, reason2, 8
user5, reason2, 14
user5, reason4, 6

user and reason are text referrals is numeric.
The array is working as I can plot simple graphs from it.
I would like to plot a chart with user on the xaxis and bars representing the reasons with a legend for the reasons.

the number of users reasons and referrals will depend on the dates chosen.

Below is my latest attempt

<div id="chart">
<div id="apex-chart"></div>
</div>

<script>

$sd="#start_date#";
$ed="#end_date#";

$uks=$sd.slice(8, 10) + "-" +$sd.slice(5, 7) + "-" + $sd.slice(0, 4)
$uke=$ed.slice(8, 10) + "-" +$ed.slice(5, 7) + "-" + $ed.slice(0, 4)

$(function() {

var col0 = gdata.map(d => d[0]).slice(1);
var col1 = gdata.map(d => d[1]).slice(1);
var col2 = gdata.map(d => d[2]).slice(1);

var options = {
chart: {
background: '#fff',
width: "100%",
height: 400,
type: graph_type,
stacked: true,

},


dataLabels: { enabled: true, },

series: [ { x: col1,
y: col2 },

],

xaxis: { categories: col0},


title: {
text: 'Referrals by Coordinator ' + $uks + ' to ' + $uke,
},

};

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

});

</script>

I have tried several variants and feel the problem lies with the series.

Any suggestions would be very helpful.

Re: Apex charts

Posted: Tue May 04, 2021 6:39 pm
by Janusz
Hi,
For Apexcharts there are some limitation in the free library. What I would suggest first is to look on the available charts library if any on the chart is OK for your application and then there is as well the sample code attached. Belowe just any example from the apexcharts demo :
https://apexcharts.com/javascript-chart ... rts/basic/
As far as I know but was not using it -there are as well more advanced charts available in the Fusion charts but they are not free and not a part of standard nuBuilder distribution. But of course you can add any charts library to your version of nuBuilder.
There are as well other libraries which you can potentially use for example:
https://gionkunz.github.io/chartist-js/index.html
https://www.rgraph.net/

Re: Apex charts

Posted: Wed May 05, 2021 9:47 am
by kev1n
Hi,

You could also ask this questions in an Apex forum (if there is any) or at stackoverflow. The question is not specific to nuBuilder.

Re: Apex charts

Posted: Thu May 06, 2021 5:07 pm
by GlenMcCabe
Kevin

Thanks for your reply. I think my problem lies with the actual series definitions. Using the array columns as series for charts works fine for 2 tier charts such as referrals by location. They do not work for 3 tier charts such as referrals by reason within location. I will try to manipulate the arrays to reformat the series.

I have seen looking on line and will try stack overflow.

Glen