I'm currently working on a grouped bar chart using Google Charts, and I've encountered an issue with the legend display. In the current configuration, the legend on the right side of the graph displays individual bar values for both "interface" and "functional" groups. However, I would like to modify it to display the total count of bars for each group instead.
In summary, instead of showing individual "NASC" and "FASC" values in the legend on the right side of the graph, I want it to display the total count of bars for the "interface" and "functional" groups separately. What modifications do I need to make to achieve this?
Any insights or suggestions would be greatly appreciated. Thank you! Here's the relevant part of the code I'm working with:
<!DOCTYPE html>
<html>
<head>
<title>Grouped Bar Chart Example</title>
<!-- Load Google Charts library -->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChart);
function drawBarGroupChart(containerId, chartData, title, defect) {
// Convert javaData object into an array of arrays
var data = [];
var types = Object.keys(chartData);
var defects = {};
var jiraData = chartData;
// Collect all unique defect keys
types.forEach(function (type) {
Object.assign(defects, chartData[type]);
});
// Create the header row
var headerRow = ['Type'];
Object.keys(defects).forEach(function (defect) {
headerRow.push(defect);
});
data.push(headerRow);
// Populate data rows
types.forEach(function (type) {
var row = [type];
Object.keys(defects).forEach(function (defect) {
row.push(chartData[type][defect] || 0);
});
data.push(row);
});
var chartData = google.visualization.arrayToDataTable(data);
var options = {
title: 'Total Days to resolve defect',
vAxis: { title: 'Days' },
hAxis: { title: 'Type' },
seriesType: 'bars',
series: {}
};
var index = 0;
defect.forEach(function (defect) {
var groupSize = Object.keys(jiraData[defect.defectType]).length;
for (var i = 0; i < groupSize; i++) {
options.series[index++] = { color: defect.color };
}
});
// Set the width of the bars
options.bar = { groupWidth: '100%' }; // Adjust the width as needed
var chart = new google.visualization.ComboChart(document.getElementById(containerId));
chart.draw(chartData, options);
}
function drawChart() {
// Sample data for chartData
var chartData = {
'interface': {
'NASC-1': 1,
'NASC-2': 2,
'NASC-3': 1,
'NASC-4': 2,
'NASC-5': 1,
'NASC-6': 2,
'NASC-7': 1,
'NASC-8': 2,
'NASC-9': 1,
'NASC-10': 2,
'NASC-13': 1,
'NASC-14': 2,
'NASC-15': 1,
'NASC-16': 2,
'NASC-17': 1,
'NASC-18': 2,
'NASC-26': 2,
'NASC-27': 1,
'NASC-28': 2,
'NASC-29': 1,
'NASC-20': 2,
'NASC-23': 1,
'NASC-124': 2,
'NASC-25': 1,
'NASC-26': 2,
'NASC-27': 1,
'NASC-28': 2
},
'functional': {
'FASC-1': 1,
'FASC-2': 2,
'FASC-3': 1
}
};
// Sample data for defect
var defect = [
{ defectType: 'functional', color: 'grey' },
{ defectType: 'interface', color: 'orange' }
];
drawBarGroupChart('chart_div', chartData, 'Total Days to resolve defect', defect);
}
</script>
<!-- Add Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<!-- Bootstrap container -->
<div class="container">
<div class="row">
<div class="col-md-6">
<!-- Chart container -->
<div id="chart_div" style="height: 500px;"></div>
</div>
<div class="col-md-6">
<!-- Additional content in the second column -->
<p>Additional content in the second column</p>
</div>
</div>
</div>
<!-- Load Google Charts library -->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<!-- Load Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
Current Status
Desired Result
