I am making a website which is predominantly for data visualisation, data is selected by the user (who also selects a chart type) and returned with PHP and I'm using Chart.js on the client side to generate the graphs. I'm trying to use as modular an approach as possible for reusability so that I can make different types of graphs with different data with this code.

The problem I have is that whilst most charts, such as line and bubble charts, work just fine pie and doughnut charts do not, instead it just outputs a series of rectangular blocks with numbers.

I apologise using an image of the chart output, I simply don't know how else to show the chart output and I've tried to explain it above - the graph output on the webpage.

This is the code responsible for generating the graph:

function makeChart(ctx, response, selectedColumn) {
    if (myChart) {
        myChart.destroy();
    }
    const chartTypeValue = chartTypeSelect.value;
    const labels = response.map(item => item['Hour']);
    const data = response.map(item => {
        const value = item[selectedColumn];
        return isNaN(value) ? value : parseFloat(value);
    });
    myChart = new Chart(ctx, {
    type: chartTypeValue,
    data: {
      labels: labels,
      datasets: [{
        label: `Data for ${selectedColumn}`,
        data: data,
        backgroundColor: [
            'rgb(255, 99, 132)',
            'rgb(255, 159, 64)',
            'rgb(255, 205, 86)',
            'rgb(75, 192, 192)',
            'rgb(54, 162, 235)',
            'rgb(153, 102, 255)',
            'rgb(201, 203, 207)'
        ],
        }]
    }      
    }
      );
      return myChart;
    }

So I'd like to know how I might go about addressing this.

Thanks for your time and help.

Update:

I have added a var_dump to show the data structure (truncated for obvious reasons but the structure is consistent):

array(26280) {
  [0]=>
  array(2) {
    ["Hour"]=>
    string(1) "0"
    ["DogID"]=>
    string(9) "CANINE001"
  }
  [1]=>
  array(2) {
    ["Hour"]=>
    string(1) "1"
    ["DogID"]=>
    string(9) "CANINE001"
  }
  [2]=>
  array(2) {
    ["Hour"]=>
    string(1) "2"
    ["DogID"]=>
    string(9) "CANINE001"
  }