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
}
},
series:
{
0: { color: '#11a7f7' },
1: { color: '#f9961c' },
2: { color: '#ae00ff' },
3: { color: '#085680' },
4: { color: '#7aeb34' },
5: { color: '#030747' },
6: { color: '#eef527' },
7: { color: 'darkgray' }
}
};
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>
<style>
ul.breadcrumb {
padding: 10px 10px;
list-style: none;
background-color: #eee;
/*background-color: #FFFFFF*/
}
ul.breadcrumb li {
display: inline;
font-size: 12px;
}
ul.breadcrumb li:nth-child(1) + li:before {
padding: 8px;
color: black;
content: "|\00a0";
}
ul.breadcrumb li:nth-child(2) + li:before {
padding: 8px;
color: rgb(110, 107, 107);
content: "|\00a0";
}
ul.breadcrumb li a {
color: #0275d8;
text-decoration: none;
}
ul.breadcrumb li {
color: #0275d8;
text-decoration: none;
}
ul.breadcrumb li a:hover {
color: #01447e;
text-decoration: underline;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
right: 0;
/*background-color: #f9f9f9;*/
background-color: red;
min-width: 150px;
z-index: 1;
background: none;
}
.dropdown-content a {
color: black;
padding: 10px 10px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #eee;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
</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!
The json data above and google visualization used plots a simple column chart something like this -
from Plotting stacked bar chart using google charts
No comments:
Post a Comment