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.
to add the percent symbol (%) after the values displayed on the pie slices,
you need to format the numbers in the data table accordingly.
to do so, you can use google's NumberFormat class.
after you create the data table for the pie chart...
// 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]);
create a number format using google's NumberFormat class...
var percentFormat = new google.visualization.NumberFormat({
fractionDigits: 0, // number of decimal places to display
suffix: '%' // text to display after the number
});
then use it to format the numbers in the second column (index = 1)...
percentFormat.format(sliceData, 1);
be sure to format the values as shown above before drawing the chart.
note: this will also format the number shown in the tooltip when hovering a slice.