Plotting stacked bar chart using google charts
Question
I have this script which should plot stacked google chart from the json data kept at wwwroot -
<html>
<head>
<title>DevOps Monitoring Application</title>
<link rel="icon" type="image/png" href="https://icons.iconarchive.com/icons/martz90/circle/256/plex-icon.png" />
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
tr > th::first-line {
font-size: 1.5em;
font-weight: bolder;
text-decoration: underline;
}
</style>
<script type="text/javascript">
google.charts.load("current", {
packages: ["corechart"]
}).then(function () {
$.ajax({
type: "GET",
url: "http://localhost/TestExecutionResult.json",
dataType: "json"
}).done(function (jsonData) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task');
data.addColumn('number', 'Test case execution time');
$.each(jsonData, function (key, value) {
data.addRow([key, parseInt(value)]);
});
var options = {
title: 'DevOps Monitoring Chart',
isStacked: true,
legend: { position: 'bottom', maxLines: 3, textStyle: { fontSize: 6 } },
bar: { groupWidth: "50%" },
hAxis: {
format: 'HH:mm', gridlines: { count: 50 },
slantedText: false, slantedTextAngle: 45, textStyle: { fontSize: 11 }
},
vAxis: {
title: 'Total execution time (seconds)',
viewWindow: {
max: 30,
min: 0
}
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('barchart'));
chart.draw(data, options);
}).fail(function (jqXHR, status, errorThrown) {
console.log(jqXHR, status, errorThrown)
// add fail callback
alert('error: ' + errorThrown);
});
});
</script>
</head>
<body>
<table border="1">
<tr>
<td>
<ul class="breadcrumb">
<li>
<u><a href="https://example/TestExecutionResultPOD1.zip">Logs</a></u>
</li>
<li>
<u><a id="Release link">Release Link</a></u>
</li>
<li>
<h id="TestLogFileName">
Last 5 Results: <select>
<option value="--Select Results--">--Select Results--</option>
<option value="Test Run at 9:30am">Test Run at 9:30am</option>
<option value="Test Run at 9:00am">Test Run at 9:00am</option>
<option value="Test Run at 8:30am">Test Run at 8:30am</option>
<option value="Test Run at 8:00am">Test Run at 8:00am</option>
<option value="Test Run at 7:30am">Test Run at 7:30am</option>
</select>
</h>
</li>
</ul>
<div id="LastSuccessfulRun" style="font-size:12px;color:green;margin-top: -15px;margin-bottom: 10px;padding-left: 5px;">Last successful run at: 06-03-2022 09:43:31</div>
<div id="barchart" style="width: 1000px; height: 600px"></div>
</td>
</table>
</body>
</html>
The json file has following data -
{"NewAdvisorAccountCreation":4,"AccountActivation":13,"OrganizationCreationForAdvisor":31,"AddingWidgetForDashboard":0}
But its plotting a simple column chart and not a stacked column chart. How do I populate a single column chart with these 4 values stacked over one another in different colors. The legend should have the 4 json keys plotting the 4 json values. Any help, pointers indicators would be much appreciated. Thank you in advance!
1 answers
solution1
1 ACCPTED 2022-06-06 15:51:08
The problem is that you are creating one row for each "column".
I think this code will work for you:
var columns = ['Test Execution'], row = ["test execution X"];
$.each(jsonData, function (key, value) {
columns.push(key);
row.push(value);
});
var data = google.visualization.arrayToDataTable([
columns,
row,
]);
Your json is the data for a single row. So we label that row (on my example "test execution X") and loop over the json to add columns and values for each entry on that json.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.