Data not showing in the RadialBar chart.

[ronanocoigligh]

I’m at a dead end to try fix this issue. I am trying to get data from a database to show in the radialbar chart. All is working correctly apart from the chart displaying the data.
In the console I can see the data coming through from the DB in JSON format.
Parsed JSON data: Object { OutBound: 24, InBound: 76, Generic: 0 }’ ‘Series data to be updated: Array(3) [ 76, 24, 0 ] 0: 76 1: 24 2: 0 length: 3
In the NETWORK tab I click the URL and I have this in Response:
OutBound | 24 InBound | 76 Generic | 0
So the data is there, but not showing. The Radialbar works fine with hard coded data in the JS, so i know all the correct files (JS / CSS) are being called. But not when I try get the data from the DB into the chart.

Here is my JS code for the Radialbar:

`document.getElementById('dataForm').addEventListener('submit', function(event) {
console.log("Form submitted");
event.preventDefault();

let startDate = document.getElementById('rangeCalendarFlatpickr').value.split(' to ')[0];
let endDate = document.getElementById('rangeCalendarFlatpickr').value.split(' to ')[1];
let userId = document.getElementById('operatorSelect').value;

console.log("Start Date:", startDate);
console.log("End Date:", endDate);
console.log("User ID:", userId);

// Fetch and update the chart data
fetchChartData();
});

function fetchChartData() {
let startDate = document.getElementById('rangeCalendarFlatpickr').value.split(' to ')[0];
let endDate = document.getElementById('rangeCalendarFlatpickr').value.split(' to ')[1];
let userId = document.getElementById('operatorSelect').value;

let chartDataUrl = ../src/php/radialbar.php?start_date=${startDate}&end_date=${endDate}&user_id=${userId};

console.log("Fetching chart data from URL:", chartDataUrl);

fetch(chartDataUrl)
.then(response => {
if (!response.ok) {
throw new Error(HTTP error! status: ${response.status});
}
return response.text();
})
.then(text => {
console.log("Raw response text:", text);
try {
const data = JSON.parse(text);
console.log("Parsed JSON data:", data);

    console.log("Series data to be updated:", [
      Math.round(data.InBound),
      Math.round(data.OutBound),
      Math.round(data.Generic)
    ]);
    // Update the chart series data
    chartCircle.updateOptions({
      series: [
        data.InBound !== null ? Math.round(data.InBound) : 0,
        data.OutBound !== null ? Math.round(data.OutBound) : 0,
        data.Generic !== null ? Math.round(data.Generic) : 0
      ]
    });
    console.log("InBound data:", data.InBound);
    console.log("OutBound data:", data.OutBound);
    console.log("Generic data:", data.Generic);


    console.log("Chart data updated");
  } catch (e) {
    console.error("Error parsing JSON:", e);
  }
})
.catch(error => {
  console.error("Error fetching chart data:", error);
});

}

// Initialize the Donut Chart
var optionsCircle = {
chart: {
type: "radialBar",
height: 500,
offsetX: 0
},
plotOptions: {
radialBar: {
inverseOrder: false,
hollow: {
margin: 5,
size: "48%",
background: "transparent"
},
track: {
show: true,
background: "#40475D",
strokeWidth: "10%",
opacity: 1,
margin: 3 // margin is in pixels
}
}
},
series: [],
labels: ["InBound", "OutBound", "Generic"],
legend: {
show: true,
position: "bottom",
offsetX: -30,
offsetY: -10,
formatter: function(val, opts) {
return val + " - " + Math.round(opts.w.globals.series[opts.seriesIndex]) + "%";
}
},
fill: {
type: "gradient",
gradient: {
shade: "dark",
type: "horizontal",
shadeIntensity: 0.5,
inverseColors: true,
opacityFrom: 1,
opacityTo: 1,
stops: [0, 100]
}
}
};

var chartCircle = new ApexCharts(
document.querySelector("#circlechart2"),
optionsCircle
);
chartCircle.render();
console.log(chartCircle);`

[ronanocoigligh]

Found bug in the JS code. Fixed