Accessing data in an assosciative array in CodeIgniter 3-CodePudding

I'm using CodeIgniter 3 and I'm passing an associative array from the controller to the view. In the view I'm trying to render a chart using ChartJS so I need to get the data of 0th and 1st indexes separately. {"label":["A ","AB-","B ","B-","O "],"data":["6","2","5","2","3"]} is the associative array I'm passing. Below is the code in the controller.

public function bloodTypesChart()
    {
        $totalPackets = $this->db->count_all_results();

        $chartData = [];
        $blood_types = $this->db->query("SELECT (BloodType) as blood_type FROM packets WHERE (isAvailable) = '1' GROUP BY blood_type")->result_array();

        $record = $this->db->from('packets')
            ->select('count(PacketID) count, BloodType blood_type')
            ->group_by('blood_type')
            ->get()
            ->result_array();

        foreach ($record as $row) {
            $chartData['label'][] = $row['blood_type'];
            $chartData['data'][] = $row['count'];
        }
        $chartData['chart_data'] = json_encode($chartData);
        $this->load->view('insight', $chartData);
    }

I need to pass data in the label and data indexes separately to the ChartJS function. How can I do that in the view?

View

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"/>
    <link rel="stylesheet" type="text/css" href="<?php echo base_url('assests/styles/table.css'); ?>">
    <title>Kegalle Blood Bank - Blood Types Insight</title>
</head>
<body style="margin-bottom: 50px">
<?php include_once 'navbars/navbar2.php' ?>

<?php
if (!($this->session->userdata('isStaffLoggedIn'))) {
    redirect('home/login');
}
?>


<div >
    <div >
        <div >
            <h1>Insight</h1>
        </div>
        <div >
            <div >
                <div >
                    <div ><span 
                                                                                         aria-hidden="true"></span>
                    </div>
                    <div ><h4>Total Donors</h4></div>
                    <div ><h1><?php echo $donorcount; ?></h1></div>

                </div>
            </div>
            <div >
                <div >
                    <div ><span 
                                                                                           aria-hidden="true"></span>
                    </div>
                    <div ><h4>Total Available Packets</h4></div>
                    <div ><h1><?php echo $packetcount; ?></h1></div>
                </div>
            </div>
        </div>
    </div>
</div>

<div >
    <div >
        <canvas id="bar-chart" style="background: #fff"></canvas>
    </div>
</div>

<?php include_once 'footer/footer.php' ?>
</body>

<script>
    new Chart(document.getElementById("bar-chart"), {
        type: 'bar',
        data: {
            labels: <?php echo $label?>,
            datasets: [
                {
                    label: "Population (millions)",
                    backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
                    data: <?php echo $data?>
                }
            ]
        },
        options: {
            legend: { display: false },
            title: {
                display: true,
                text: 'Predicted world population (millions) in 2050'
            }
        }
    });
</script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>

</html>

CodePudding user response：

Since you want your variables appear in Javascript you need to json_encode them. your $label and $data is still in PHP you can just echo it out into a json.

in your view you can do following

   data: {
        labels: <?= json_encode($label)?>,
        datasets: [
            {
                label: "Population (millions)",
                backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
                data: <?= json_encode($data)?>
            }
        ]
    },