Apex charts
Posted: Mon May 03, 2021 1:28 pm
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.
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.