nuBuilder Forum

I have a chart form to display a chart of referrals with several options which the user can pick from drop downs.

data type - owner, reason, locality
start date
end date

i use these to build my SQL selects and this is now working fine.

I have a drop down for graph type bar, line, pie, donut

I have an HTML object to display the chart and in the coding area I have

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

<script>

$sd="#start_date#";
$ed="#end_date#";
$dt="#data_type#";
$gt="#graph_type#";

$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 options = {
chart: {
background: '#fff',
width: "100%",
height: 400,
type: graph_type,

toolbar: {
show: true,
offsetX: 0,
offsetY: 0,
tools: {
download: true,

},
export: {
csv: {
filename: undefined,
columnDelimiter: ',',
headerCategory: 'category',
headerValue: 'value',
dateFormatter(timestamp) {
return new Date(timestamp).toDateString()
}
},
svg: {
filename: undefined,
},
png: {
filename: undefined,
}
},

},

},


dataLabels: { enabled: true, },


series: [ {
name: 'referrals',
data: col1
}, ],

xaxis: { categories: col0,},


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

};


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

});

</script>

This works happily for line and bar but not pie or donut

If I replace
series: [ {
name: 'referrals',
data: col1
}, ],

xaxis: { categories: col0,},

with
series: col1
labels: col0

pie and donut work but not line and bar.

I have tried to use if else construct and case statement to select values but have not been able to do so. I see errors when I use F12 can case /if else be used inthis situation or is it down to my poor programming.

Sorted

Again down to structure of if else.