I am trying to add the "%" symbol in the Google pie chart slices. I have attached the below. I am using the Codeigniter framework. The below code creates a Google pie chart which pops up another pie chart when clicked on one of the slices. The secondary pie chart shows the values of "s1", "s2", "s3", and "s4". I want to display the "%" symbol beside the values of the slices. Please find the code below:
The code inside index.php
<div id="IR-SLA" style="width: 400px; height: 300px;"></div>
<script>
function updateQuery() {
var month = parseInt(document.getElementById('chooseMonth').value);
var year = document.getElementById('chooseYear').value;
updateIncidentsWithinSLA(month, year);
}
function updateIncidentsWithinSLA(month, year) {
var xhrISLA = new XMLHttpRequest();
xhrISLA.onreadystatechange = function() {
if (xhrISLA.readyState === XMLHttpRequest.DONE) {
if (xhrISLA.status === 200) {
// Handle the response from the server
var response = xhrISLA.responseText;
var updatedDataISLA = JSON.parse(response);
drawChartISLA(updatedDataISLA);
} else {
// Handle the error case
console.error('Request failed for incidents logged chart.');
}
}
};
// Send an asynchronous POST request to update the query
xhrISLA.open('POST', '<?php echo base_url(); ?
>index.php/IndexController/updateQueryISLA', true);
xhrISLA.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhrISLA.send('month=' + month + '&year=' + year);
}
<script type="text/javascript">
google.charts.load('current', {
'packages': ['corechart']
});
function drawChartISLA(updatedDataISLA) {
// Create the data table
var data = new google.visualization.DataTable();
data.addColumn('string', 'opco_name');
data.addColumn('number', 'count');
data.addColumn('number', 's1_sla_met_count');
data.addColumn('number', 's2_sla_met_count');
data.addColumn('number', 's3_sla_met_count');
data.addColumn('number', 's4_sla_met_count');
data.addRows(updatedDataISLA);
// Set chart options
var options = {
'title': 'Incidents SLA met percentage - ',
'pieSliceText': 'value',
is3D: 'true',
'tooltip': {
trigger: 'none'
}
};
// Instantiate and draw the chart
var chart = new google.visualization.PieChart(document.getElementById('IR-SLA'));
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 sliceS1 = data.getValue(selection.row, 2);
var sliceS2 = data.getValue(selection.row, 3);
var sliceS3 = data.getValue(selection.row, 4);
var sliceS4 = data.getValue(selection.row, 5);
// Create data table for selected slice
var sliceData = new google.visualization.DataTable();
sliceData.addColumn('string', 'Severity');
sliceData.addColumn('number', 'Incident Count');
sliceData.addRow(['S1', sliceS1]);
sliceData.addRow(['S2', sliceS2]);
sliceData.addRow(['S3', sliceS3]);
sliceData.addRow(['S4', sliceS4]);
// Set chart options for selected slice
var sliceOptions = {
'title': sliceName + ' SLA met percentage - ',
pieSliceText: 'value',
'width': 500,
'height': 300,
is3D: 'true',
'tooltip': {
'text': 'value'
}
};
// Open popup window with slice data
var popup = window.open('', 'myPopup', 'width=600,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>
The "updateQuery()" is called when a button is clicked.
The below code is in the "IndexController.php" file
public function updateQueryISLA()
{
// 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, s1_incidents_count, s2_incidents_count,
s3_incidents_count, s4_incidents_count, ((i.s1_sla_met_count + i.s2_sla_met_count +
i.s3_sla_met_count + i.s4_sla_met_count)/(s1_incidents_count +
s2_incidents_count+s3_incidents_count+s4_incidents_count))* 100 as count,
(i.s1_sla_met_count/s1_incidents_count)*100 as s1,
(i.s2_sla_met_count/s2_incidents_count)*100 as s2,
(i.s3_sla_met_count/s3_incidents_count)*100 as s3,
(i.s4_sla_met_count/s4_incidents_count)*100 as s4 FROM opcos_list o inner JOIN
incidents_summary 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 = [];
foreach ($rows as $row) {
$data[] = [
$row['opco_name'],
(int)$row['count'],
(int)$row['s1'],
(int)$row['s2'],
(int)$row['s3'],
(int)$row['s4'],
];
}
// Return the updated query result as JSON
echo json_encode($data);
}
I tried to add "%" in the query using the concate function. The query worked in Mysql workbench but did not appear on the pie charts. Please provide me a solution.
