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/bootstrap@5.1.3/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 class="container">
<div class="row">
<div class="col-md-12 text-center mt-5">
<h1>Insight</h1>
</div>
<div class="row text-center m-5">
<div class="col-md-6">
<div class="card border-info mx-sm-1 p-3 shadow-lg">
<div class="card border-danger shadow text-danger p-3 my-card"><span class="fa fa-heart"
aria-hidden="true"></span>
</div>
<div class="text-danger text-center mt-3"><h4>Total Donors</h4></div>
<div class="text-danger text-center mt-2"><h1><?php echo $donorcount; ?></h1></div>
</div>
</div>
<div class="col-md-6">
<div class="card border-success mx-sm-1 p-3 shadow-lg">
<div class="card border-success shadow text-success p-3 my-card"><span class="fa fa-eye"
aria-hidden="true"></span>
</div>
<div class="text-success text-center mt-3"><h4>Total Available Packets</h4></div>
<div class="text-success text-center mt-2"><h1><?php echo $packetcount; ?></h1></div>
</div>
</div>
</div>
</div>
</div>
<div class="chart-container container">
<div class="bar-chart-container">
<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/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.2/dist/chart.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
</html>
source https://stackoverflow.com/questions/70418802/accessing-data-in-an-associative-array-in-codeigniter-3
Comments
Post a Comment