Below Codeigniter code generates two pie charts. Let's name the main pie chart Parent 1 and the secondary chart Child 1. The Child 1 chart is popped up when clicking on a slice of Parent 1 with the values corresponding to the selected slice. Now, I need to create another pie chart, let's call it "parent 2". The parent 2 chart should be the main chart and parent 1 should be the child of parent 2 and child 1 should be the child of parent 1. Overall, I need to add another chart parent 2 which will be the main chart and when clicked on a slice, parent 1 should be popped up with the corresponding slice's data and when clicked on a slice of parent 1, child 1 should be popped up with corresponding data.
The slice values of the parent 2 chart should be app_count, function_count, data_issue_count, platform_count, NFR_count, tec_issue_count, 3pp_count, clarification_count, no_fcr_count, process_count, know_gap_count in the query:
SELECT o.opco_name, sum(app_issue_count) as app_count,
sum(fun_issue_count) as function_count,
sum(data_issue_count) as data_issue_count,
sum(plat_issue_count) as platform_count,
sum(NFR_issue_count) as NFR_count,
sum(tec_issue_count) as tec_issue_count,
sum(3pp_issue_count) as 3pp_count,
sum(clar_issue_count) as clarification_count,
sum(no_fcr_count) as no_fcr_count,
sum(process_gap_count) as process_count,
sum(know_gap_count) as know_gap_count,
(i.app_issue_count + i.fun_issue_count + i.data_issue_count + i.plat_issue_count +
i.NFR_issue_count + i.tec_issue_count + i.3pp_issue_count + i.clar_issue_count +
i.no_fcr_count + i.process_gap_count + i.know_gap_count) as count, i.app_issue_count,
i.fun_issue_count, i.data_issue_count, i.plat_issue_count, i.NFR_issue_count,
i.tec_issue_count, i.3pp_issue_count, i.clar_issue_count, i.no_fcr_count,
i.process_gap_count, i.know_gap_count FROM opcos_list o INNER JOIN incidents_reason i ON
o.id = i.opcos_list_id
WHERE i.month_number = $selected_month AND i.year = $selected_year".
index.php:
<?php
$months = array(
1 => 'January',
2 => 'February',
3 => 'March',
4 => 'April',
5 => 'May',
6 => 'June',
7 => 'July',
8 => 'August',
9 => 'September',
10 => 'October',
11 => 'November',
12 => 'December'
);
$selected_month = isset($_POST['month']) ? $_POST['month'] : date('n');
$selected_year = isset($_POST['year']) ? $_POST['year'] : date('Y');
?>
<div class="row">
<div class="col-md-5">
<form method="post" style="margin: 0 0 10px;">
<select class="form-control" name="month" id="chooseMonth">
<?php foreach ($months as $month_number => $month_name) : ?>
<option value="<?php echo $month_number ?>" <?php echo $selected_month
==$month_number?'selected' : '' ?>><?php echo $month_name ?></option>
<?php endforeach; ?>
</select>
</form>
</div>
<div class="col-md-5">
<form method="post" style="margin: 0 0 10px;">
<select class="form-control" name="year" id="chooseYear">
<?php for ($year = 2020; $year <= 2100; $year++) : ?>
<option value="<?php echo $year ?>" <?php echo $selected_year == $year?'selected':'' ?>>
<?php echo $year ?></option>
<?php endfor; ?>
</select>
</form>
</div>
<div class="col-md-2 text-right">
<button class="btn btn-primary ms-e" onclick="updateQuery()">Update</button>
</div>
</div>
<script>
function updateQuery() {
var month = parseInt(document.getElementById('chooseMonth').value);
var year = document.getElementById('chooseYear').value;
var monthName =
document.getElementById('chooseMonth').
options[document.getElementById('chooseMonth').selectedIndex].text;
var yearName =
document.getElementById('chooseYear').
options[document.getElementById('chooseYear').selectedIndex].text;
updateIncidentsReason(month, year, monthName, yearName);
}
function updateIncidentsReason(month, year, monthName, yearName) {
var xhrISRe = new XMLHttpRequest();
xhrISRe.onreadystatechange = function() {
if (xhrISRe.readyState === XMLHttpRequest.DONE) {
if (xhrISRe.status === 200) {
// Handle the response from the server
var response = xhrISRe.responseText;
var updatedDataISRe = JSON.parse(response);
drawChartISRe(updatedDataISRe, monthName, yearName);
} else {
// Handle the error case
console.error('Request failed for incidents logged chart.');
}
}
};
<script type="text/javascript">
google.charts.load('current', {
'packages': ['corechart']
});
function drawChartISRe(updatedDataISRe, monthName, yearName) {
// Create the data table
var data = new google.visualization.DataTable();
data.addColumn('string', 'opco_name');
data.addColumn('number', 'count');
data.addColumn('number', 'app_issue_count');
data.addColumn('number', 'fun_issue_count');
data.addColumn('number', 'data_issue_count');
data.addColumn('number', 'plat_issue_count');
data.addColumn('number', 'NFR_issue_count');
data.addColumn('number', 'tec_issue_count');
data.addColumn('number', '3pp_issue_count');
data.addColumn('number', 'clar_issue_count');
data.addColumn('number', 'no_fcr_count');
data.addColumn('number', 'process_gap_count');
data.addColumn('number', 'know_gap_count');
data.addRows(updatedDataISRe);
// Set chart options
var options = {
'title': 'Component wise incidents breakup for the of ' + monthName + ' ' + yearName,
'pieSliceText': 'value',
is3D: 'true',
'tooltip': {
trigger: 'none'
},
chartArea: {
width: '70%',
height: '60%',
}
};
// Instantiate and draw the chart
var chart = new
google.visualization.PieChart(document.getElementById('incidents_reason'));
chart.draw(data, options);
// Add event listener for slice selection
google.visualization.events.addListener(chart, 'select', selectHandler);
// Slice selection handler
function selectHandler() {
// Get selected slice data
var selection = chart.getSelection()[0];
if (selection) {
var sliceName = data.getValue(selection.row, 0);
var sliceCount = data.getValue(selection.row, 1);
var sliceApi = data.getValue(selection.row, 2);
var sliceFni = data.getValue(selection.row, 3);
var sliceDi = data.getValue(selection.row, 4);
var slicePi = data.getValue(selection.row, 5);
var sliceNfr = data.getValue(selection.row, 6);
var sliceTec = data.getValue(selection.row, 7);
var slice3pp = data.getValue(selection.row, 8);
var sliceClar = data.getValue(selection.row, 9);
var sliceNoFcr = data.getValue(selection.row, 10);
var slicePgap = data.getValue(selection.row, 11);
var sliceKgap = data.getValue(selection.row, 12);
// Create data table for selected slice
var sliceData = new google.visualization.DataTable();
sliceData.addColumn('string', 'Severity');
sliceData.addColumn('number', 'Incident Count');
sliceData.addRow(['Application issue', sliceApi]);
sliceData.addRow(['Functionality issue', sliceFni]);
sliceData.addRow(['Data issue', sliceDi]);
sliceData.addRow(['Platform issue', slicePi]);
sliceData.addRow(['NFR issue', sliceNfr]);
sliceData.addRow(['Tecnology issue', sliceTec]);
sliceData.addRow(['3PP issue', slice3pp]);
sliceData.addRow(['Clarification issue', sliceClar]);
sliceData.addRow(['No FCR training', sliceNoFcr]);
sliceData.addRow(['Process gap', slicePgap]);
sliceData.addRow(['Knowledge gap', sliceKgap]);
// Set chart options for selected slice
var sliceOptions = {
'title': sliceName + ' component wise workorders breakup for the month of ' + monthName
+ ' ' + yearName,
pieSliceText: 'value',
'width': 550,
'height': 300,
is3D: 'true',
'tooltip': {
'text': 'value'
},
chartArea: {
left: '0',
width: '100%',
height: '60%',
}
};
// Open popup window with slice data
var popup = window.open('', 'myPopup', 'width=700,height=400');
popup.document.write('<div style="margin:auto" id="slice_chart_div"></div>');
centerPopup(popup);
// Instantiate and draw the chart for selected slice
var sliceChart = new
google.visualization.PieChart(popup.document.getElementById('slice_chart_div'));
sliceChart.draw(sliceData, sliceOptions);
}
}
function centerPopup(popup) {
var left = (screen.width - popup.outerWidth) / 2;
var top = (screen.height - popup.outerHeight) / 2;
popup.moveTo(left, top);
}
}
</script>
IndexController.php file:
public function updateQueryISRe()
{
// Get the posted month and year values
$selected_month = $this->input->post('month') ? $this->input->post('month') : date('n');
$selected_year = $this->input->post('year') ? $this->input->post('year') : date('Y');
// Update the query with the new parameters
$query = $this->db->query("SELECT o.opco_name, sum(app_issue_count) as app_count,
sum(fun_issue_count) as function_count,
sum(data_issue_count) as data_issue_count,
sum(plat_issue_count) as platform_count,
sum(NFR_issue_count) as NFR_count,
sum(tec_issue_count) as tec_issue_count,
sum(3pp_issue_count) as 3pp_count,
sum(clar_issue_count) as clarification_count,
sum(no_fcr_count) as no_fcr_count,
sum(process_gap_count) as process_count,
sum(know_gap_count) as know_gap_count,
(i.app_issue_count + i.fun_issue_count + i.data_issue_count + i.plat_issue_count +
i.NFR_issue_count + i.tec_issue_count + i.3pp_issue_count + i.clar_issue_count +
i.no_fcr_count + i.process_gap_count + i.know_gap_count) as count, i.app_issue_count,
i.fun_issue_count, i.data_issue_count, i.plat_issue_count, i.NFR_issue_count,
i.tec_issue_count, i.3pp_issue_count, i.clar_issue_count, i.no_fcr_count,
i.process_gap_count, i.know_gap_count FROM opcos_list o INNER JOIN incidents_reason i ON
o.id = i.opcos_list_id
WHERE i.month_number = $selected_month AND i.year = $selected_year");
$rows = $query->result_array();
// Prepare the data array for the response
$data = [];
for each ($rows as $row) {
$data[] = [
// $row['opco_name'],
(int)$row['app_count'],
(int)$row['function_count'],
(int)$row['data_issue_count'],
(int)$row['platform_count'],
(int)$row['NFR_count'],
(int)$row['tec_issue_count'],
(int)$row['3pp_count'],
(int)$row['clarification_count'],
(int)$row['no_fcr_count'],
(int)$row['process_count'],
(int)$row['know_gap_count'],
];
}
// Return the updated query result as JSON
echo json_encode($data);
}