You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
905 lines
27 KiB
905 lines
27 KiB
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<link rel="shortcut icon" type="image/x-icon" href="style/favicon.ico"/>
|
|
<link href="style/style.css" rel="stylesheet" type="text/css" />
|
|
<link href="style/bootstrap.min.css" rel="stylesheet" type="text/css" />
|
|
<script src="js/jquery-3.5.1.min.js"></script>
|
|
<script src="js/bootstrap.min.js"></script>
|
|
<script src="js/gatling.js"></script>
|
|
<script src="js/menu.js"></script>
|
|
<script src="js/ellipsis.js"></script>
|
|
<script src="js/all_sessions.js"></script>
|
|
<script src="js/stats.js"></script>
|
|
<script src="js/highstock.js"></script>
|
|
<script src="js/highcharts-more.js"></script>
|
|
<script src="js/theme.js"></script>
|
|
<script src="js/unpack.js"></script>
|
|
<title>Gatling Stats - Update User</title>
|
|
</head>
|
|
<body>
|
|
<div class="app-container">
|
|
<div class="frise"></div>
|
|
<div class="head">
|
|
<div class="gatling-open-source">
|
|
<a class="gatling-logo" href="https://gatling.io" target="blank_" title="Gatling Home Page"><img alt="Gatling" src="style/logo.svg"/></a>
|
|
<a class="gatling-documentation" href="https://gatling.io/docs/" target="_blank">Documentation</a>
|
|
</div>
|
|
<a class="enterprise" href="https://gatling.io/enterprise/next-step/" target="_blank">Try <img alt="Gatling Enterprise" src="style/logo-enterprise.svg"/></a></div>
|
|
<div class="container details">
|
|
<div class="nav">
|
|
<ul></ul>
|
|
</div>
|
|
<div class="cadre">
|
|
<div class="content">
|
|
<div class="content-header">
|
|
<div class="onglet">
|
|
UserSimulation
|
|
</div>
|
|
<div class="sous-menu" id="sousMenu">
|
|
<div class="sous-menu-spacer">
|
|
<div class="item "><a href="index.html">Global</a></div>
|
|
<div class="item ouvert"><a id="details_link" href="#">Details</a></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="content-in">
|
|
<div class="container-article">
|
|
<div class="article">
|
|
|
|
|
|
<div class="schema-container">
|
|
|
|
<div id="ranges" class="schema ranges-large">
|
|
</div>
|
|
|
|
<div class="infos">
|
|
<div class="infos-in">
|
|
<div class="infos-title">Stats</div>
|
|
<div class="repli"></div>
|
|
<div class="info">
|
|
<h2 class="first">Executions</h2>
|
|
<table>
|
|
<thead>
|
|
<tr><th></th><th>Total</th><th>OK</th><th>KO</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="title">Total count</td>
|
|
<td id="numberOfRequests" class="total"></td>
|
|
<td id="numberOfRequestsOK" class="ok"></td>
|
|
<td id="numberOfRequestsKO" class="ko"></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="title">Mean count/s</abbr></td>
|
|
<td id="meanNumberOfRequestsPerSecond" class="total"></td>
|
|
<td id="meanNumberOfRequestsPerSecondOK" class="ok"></td>
|
|
<td id="meanNumberOfRequestsPerSecondKO" class="ko"></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<h2 class="second">Response Time (ms)</h2>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th></th>
|
|
<th>Total</th>
|
|
<th>OK</th>
|
|
<th>KO</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="title">Min</td>
|
|
<td id="minResponseTime" class="total"></td>
|
|
<td id="minResponseTimeOK" class="ok"></td>
|
|
<td id="minResponseTimeKO" class="ko"></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="title">50th percentile</td>
|
|
<td id="percentiles1" class="total"></td>
|
|
<td id="percentiles1OK" class="ok"></td>
|
|
<td id="percentiles1KO" class="ko"></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="title">75th percentile</td>
|
|
<td id="percentiles2" class="total"></td>
|
|
<td id="percentiles2OK" class="ok"></td>
|
|
<td id="percentiles2KO" class="ko"></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="title">95th percentile</td>
|
|
<td id="percentiles3" class="total"></td>
|
|
<td id="percentiles3OK" class="ok"></td>
|
|
<td id="percentiles3KO" class="ko"></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="title">99th percentile</td>
|
|
<td id="percentiles4" class="total"></td>
|
|
<td id="percentiles4OK" class="ok"></td>
|
|
<td id="percentiles4KO" class="ko"></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="title">Max</td>
|
|
<td id="maxResponseTime" class="total"></td>
|
|
<td id="maxResponseTimeOK" class="ok"></td>
|
|
<td id="maxResponseTimeKO" class="ko"></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="title">Mean</td>
|
|
<td id="meanResponseTime" class="total"></td>
|
|
<td id="meanResponseTimeOK" class="ok"></td>
|
|
<td id="meanResponseTimeKO" class="ko"></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="title">Standard Deviation</td>
|
|
<td id="standardDeviation" class="total"></td>
|
|
<td id="standardDeviationOK" class="ok"></td>
|
|
<td id="standardDeviationKO" class="ko"></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="statistics extensible-geant collapsed">
|
|
<div class="title">
|
|
Errors
|
|
</div>
|
|
<table id="container_errors" class="statistics-in extensible-geant">
|
|
<thead>
|
|
<tr>
|
|
<th id="error-col-1" class="header sortable"><span>Error</span></th>
|
|
<th id="error-col-2" class="header sortable"><span>Count</span></th>
|
|
<th id="error-col-3" class="header sortable"><span>Percentage</span></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
<tr>
|
|
<td class="error-col-1 total ko">status.find.is(201), but actually found 200<span class="value" style="display:none">0</span></td>
|
|
<td class="value error-col-2 total ko">213</td>
|
|
<td class="value error-col-3 total ko">100 %</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="schema geant">
|
|
<div id="responsetimeDistributionContainer" class="geant"></div>
|
|
</div>
|
|
|
|
<div class="schema geant">
|
|
<div id="responsetimepercentilesovertimeokPercentilesContainer" class="geant"></div>
|
|
</div>
|
|
|
|
<div class="schema geant">
|
|
<div id="requests" class="geant"></div>
|
|
</div>
|
|
|
|
<div class="schema geant">
|
|
<div id="responses" class="geant"></div>
|
|
</div>
|
|
|
|
<div class="schema geant">
|
|
<div id="container_response_time_dispersion" class="geant"></div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
var pageStats = stats.contents['req_update-user-6b160'].stats;
|
|
$(document).ready(function() {
|
|
$('.simulation-tooltip').popover({trigger:'hover', placement:'left'});
|
|
setDetailsLinkUrl();
|
|
setDetailsMenu();
|
|
setActiveMenu();
|
|
fillStats(pageStats);
|
|
|
|
Highcharts.setOptions({
|
|
global: { useUTC: false }
|
|
});
|
|
|
|
var rangesChart = new Highcharts.Chart({
|
|
chart: {
|
|
renderTo: 'ranges',
|
|
marginRight: 100
|
|
},
|
|
credits: { enabled: false },
|
|
legend: { enabled: false },
|
|
title: { text: 'A title to let highcharts reserve the place for the title set later' },
|
|
xAxis: {
|
|
categories: [
|
|
pageStats.group1.htmlName,
|
|
pageStats.group2.htmlName,
|
|
pageStats.group3.htmlName,
|
|
pageStats.group4.htmlName
|
|
]
|
|
},
|
|
yAxis: {
|
|
title: { text: 'Number of Requests' },
|
|
reversedStacks: false
|
|
},
|
|
tooltip: {
|
|
formatter: function() {
|
|
var s;
|
|
if (this.point.name) { // the pie chart
|
|
s = ''+ this.point.name +': '+ this.y +'% requests';
|
|
} else {
|
|
s = ''+ this.y + ' requests';
|
|
}
|
|
return s;
|
|
}
|
|
},
|
|
plotOptions: {
|
|
series: {
|
|
stacking: 'normal',
|
|
shadow: true
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
type: 'column',
|
|
data: [{
|
|
color: '#68b65c',
|
|
y: pageStats.group1.count
|
|
},
|
|
{
|
|
color: '#FFDD00',
|
|
y: pageStats.group2.count
|
|
},
|
|
{
|
|
color: '#FFA900',
|
|
y: pageStats.group3.count
|
|
},
|
|
{
|
|
color: '#f15b4f',
|
|
y: pageStats.group4.count
|
|
}]
|
|
},
|
|
{
|
|
type: 'pie',
|
|
name: 'Percentages',
|
|
data: [
|
|
{
|
|
name: pageStats.group1.name,
|
|
y: pageStats.group1.percentage,
|
|
color: '#68b65c'
|
|
},
|
|
{
|
|
name: pageStats.group2.name,
|
|
y: pageStats.group2.percentage,
|
|
color: '#FFDD00'
|
|
},
|
|
{
|
|
name: pageStats.group3.name,
|
|
y: pageStats.group3.percentage,
|
|
color: '#FFA900'
|
|
},
|
|
{
|
|
name: pageStats.group4.name,
|
|
y: pageStats.group4.percentage,
|
|
color: '#f15b4f'
|
|
}
|
|
],
|
|
center: [368, 0],
|
|
size: 90,
|
|
showInLegend: false,
|
|
dataLabels: { enabled: false }
|
|
}
|
|
]
|
|
});
|
|
|
|
rangesChart.setTitle({
|
|
text: '<span class="chart_title">Response Time Ranges</span>',
|
|
useHTML: true
|
|
});
|
|
|
|
$('#container_errors').sortable('#container_errors');
|
|
|
|
var responsetimeDistributionChart = new Highcharts.Chart({
|
|
chart: {
|
|
renderTo: 'responsetimeDistributionContainer',
|
|
type: 'column',
|
|
marginBottom: 60
|
|
},
|
|
credits: { enabled: false },
|
|
legend: {
|
|
enabled: true,
|
|
floating: true,
|
|
y: 5,
|
|
borderWidth: 0,
|
|
itemStyle: { fontWeight: "normal" },
|
|
symbolRadius: 0
|
|
},
|
|
title: { text: 'A title to let highcharts reserve the place for the title set later' },
|
|
navigator: {
|
|
maskInside: false
|
|
},
|
|
xAxis: {
|
|
categories: ['23', '66', '109', '153', '196', '239', '282', '326', '369', '412', '456', '499', '542', '585', '629', '672', '715', '759', '802', '845', '888', '932', '975', '1018', '1062', '1105', '1148', '1191', '1235', '1278', '1321', '1365', '1408', '1451', '1495', '1538', '1581', '1624', '1668', '1711', '1754', '1798', '1841', '1884', '1927', '1971', '2014', '2057', '2101', '2144', '2187', '2230', '2274', '2317', '2360', '2404', '2447', '2490', '2533', '2577', '2620', '2663', '2707', '2750', '2793', '2836', '2880', '2923', '2966', '3010', '3053', '3096', '3140', '3183', '3226', '3269', '3313', '3356', '3399', '3443', '3486', '3529', '3572', '3616', '3659', '3702', '3746', '3789', '3832', '3875', '3919', '3962', '4005', '4049', '4092', '4135', '4178', '4222', '4265', '4308'],
|
|
tickInterval: 20
|
|
},
|
|
yAxis: {
|
|
min: 0,
|
|
title: { text: 'Percentage of Requests' },
|
|
reversedStacks: false
|
|
},
|
|
tooltip: {
|
|
formatter: function() {
|
|
return '<b>'+ this.x +' ms</b><br/>'+
|
|
this.series.name +': '+ this.y +' %<br/>'+
|
|
'Total: '+ this.point.stackTotal + ' %';
|
|
}
|
|
},
|
|
plotOptions: {
|
|
series: {
|
|
groupPadding: 0,
|
|
stacking: 'normal',
|
|
shadow: true
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
type: 'column',
|
|
color: '#68b65c',
|
|
name: 'OK',
|
|
data: [
|
|
30.16,1.85,2.08,0.69,0.23,0.0,0.23,0.46,0.46,0.23,0.23,0.46,0.69,0.0,0.0,0.69,0.23,0.0,0.23,0.69,0.46,0.23,0.23,0.46,0.23,0.23,0.69,0.46,0.46,0.0,0.0,0.46,0.92,0.0,0.0,0.0,0.46,0.46,0.23,0.46,0.46,0.23,0.0,0.23,0.0,0.23,0.0,0.23,0.92,0.0,0.0,0.0,0.23,0.23,0.23,0.0,0.0,0.23,0.0,0.0,0.0,0.23,0.0,0.0,0.23,0.0,0.23,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.23,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.23
|
|
],
|
|
tooltip: { yDecimals: 0, ySuffix: 'ms' }
|
|
},
|
|
{
|
|
type: 'column',
|
|
color: '#f15b4f',
|
|
name: 'KO',
|
|
data: [
|
|
28.3,0.92,1.85,0.46,0.23,0.0,0.46,0.0,0.69,0.46,0.0,1.16,0.23,0.23,0.46,0.46,0.0,0.46,0.69,0.23,0.69,0.69,0.23,0.23,0.69,0.46,0.69,0.23,0.23,0.0,0.46,0.23,0.0,0.46,0.23,0.23,0.0,0.46,0.46,0.46,0.23,0.0,0.23,0.23,0.0,0.0,0.46,0.0,0.23,0.0,0.0,0.0,0.69,0.0,0.23,0.0,0.46,0.0,0.46,0.23,0.23,0.0,0.0,0.0,0.0,0.0,0.23,0.23,0.0,0.0,0.0,0.46,0.23,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0
|
|
],
|
|
tooltip: { yDecimals: 0, ySuffix: 'ms' }
|
|
}
|
|
]
|
|
});
|
|
|
|
responsetimeDistributionChart.setTitle({
|
|
text: '<span class="chart_title">Response Time Distribution</span>',
|
|
useHTML: true
|
|
});
|
|
|
|
var responsetimepercentilesovertimeokPercentiles = unpack([[1675698347,null],[1675698348,null],[1675698349,null],[1675698350,[180,180,180,180,180,180,180,180,180,180]],[1675698351,[2,5,10,102,112,151,250,297,314,319]],[1675698352,[4,6,11,809,915,1003,1021,1154,1340,1387]],[1675698353,[4,7,10,682,691,767,867,902,1244,1351]],[1675698354,[5,7,74,1168,1264,1427,1748,1975,2092,2122]],[1675698355,[4,6,8,15,18,136,1642,2455,2631,2676]],[1675698356,[4,9,1640,2049,2508,2838,3032,3513,4166,4330]],[1675698357,[4,5,11,875,1729,1915,2102,2107,2111,2113]],[1675698358,[3,6,12,1197,1868,2289,2349,2414,2469,2483]],[1675698359,[6,11,45,698,928,1199,1335,1468,1596,1629]],[1675698360,[3,7,51,1173,1220,1365,1722,1780,2041,2110]],[1675698361,[5,10,16,694,952,1030,1094,1110,1123,1127]],[1675698362,[4,5,9,359,378,403,483,526,535,538]],[1675698363,[3,3,3,114,129,140,143,148,153,155]],[1675698364,[1,3,3,79,81,84,87,89,90,91]],[1675698365,[3,3,3,4,4,4,4,4,4,5]],[1675698366,[4,4,4,4,4,4,4,4,4,4]],[1675698367,[4,4,4,4,4,4,4,4,4,4]],[1675698368,null]]);
|
|
|
|
var responsetimepercentilesovertimeokPercentilesChart = new Highcharts.StockChart({
|
|
chart: {
|
|
renderTo: 'responsetimepercentilesovertimeokPercentilesContainer',
|
|
zoomType: 'x',
|
|
marginBottom: 60
|
|
},
|
|
colors: ['#c4fd90', '#7ff77f', '#6ff2ad', '#61ede6', '#58c7e0', '#4ea1d4', '#487ad9', '#3f52cc', '#7335dc', '#c73905', '#FFA900'],
|
|
credits: { enabled: false },
|
|
legend: {
|
|
enabled: true,
|
|
floating: true,
|
|
y: -65,
|
|
borderWidth: 0,
|
|
itemStyle: { fontWeight: "normal" },
|
|
symbolRadius: 0
|
|
},
|
|
title: { text: 'A title to let highcharts reserve the place for the title set later' },
|
|
navigator: {
|
|
maskInside: false,
|
|
baseSeries: 9
|
|
},
|
|
rangeSelector: {
|
|
rangeSelector: { align: "left" },
|
|
buttonSpacing: 0,
|
|
buttonTheme: {
|
|
fill: '#CFC9C6',
|
|
padding: 1,
|
|
stroke: '#000000',
|
|
'stroke-width': 0.25,
|
|
style: {
|
|
color: '#000000',
|
|
fontWeight: 'bold',
|
|
},
|
|
states: {
|
|
stroke: '#92918C',
|
|
'stroke-width': 0.25,
|
|
hover: {
|
|
fill: '#92918C',
|
|
style: { color: 'black' }
|
|
},
|
|
select: {
|
|
fill: '#FFA900',
|
|
style: { color: 'white' }
|
|
}
|
|
}
|
|
},
|
|
buttons : [
|
|
{
|
|
type : 'minute',
|
|
count : 1,
|
|
text : '1m'
|
|
}, {
|
|
type : 'minute',
|
|
count : 10,
|
|
text : '10m'
|
|
}, {
|
|
type : 'hour',
|
|
count : 1,
|
|
text : '1h'
|
|
}, {
|
|
type : 'all',
|
|
count : 1,
|
|
text : 'All'
|
|
}
|
|
],
|
|
selected : 3,
|
|
inputEnabled : false
|
|
},
|
|
xAxis: {
|
|
type: 'datetime',
|
|
ordinal: false,
|
|
maxZoom: 10000 // three days
|
|
},
|
|
yAxis:[
|
|
{
|
|
min: 0,
|
|
title: { text: 'Response Time (ms)' },
|
|
opposite: false
|
|
}, {
|
|
min: 0,
|
|
title: {
|
|
text: 'Active Users',
|
|
style: { color: '#FFA900' }
|
|
},
|
|
opposite: true
|
|
}
|
|
],
|
|
plotOptions: {
|
|
arearange: { lineWidth: 1 },
|
|
series: {
|
|
dataGrouping: { enabled: false }
|
|
}
|
|
},
|
|
series: [
|
|
|
|
|
|
{
|
|
pointInterval: 1000,
|
|
name: 'min',
|
|
data: responsetimepercentilesovertimeokPercentiles[0],
|
|
tooltip: { yDecimals: 0, ySuffix: 'ms' },
|
|
type : 'area',
|
|
yAxis: 0,
|
|
zIndex: 10
|
|
},
|
|
{
|
|
pointInterval: 1000,
|
|
name: '25%',
|
|
data: responsetimepercentilesovertimeokPercentiles[1],
|
|
tooltip: { yDecimals: 0, ySuffix: 'ms' },
|
|
type : 'area',
|
|
yAxis: 0,
|
|
zIndex: 9
|
|
},
|
|
{
|
|
pointInterval: 1000,
|
|
name: '50%',
|
|
data: responsetimepercentilesovertimeokPercentiles[2],
|
|
tooltip: { yDecimals: 0, ySuffix: 'ms' },
|
|
type : 'area',
|
|
yAxis: 0,
|
|
zIndex: 8
|
|
},
|
|
{
|
|
pointInterval: 1000,
|
|
name: '75%',
|
|
data: responsetimepercentilesovertimeokPercentiles[3],
|
|
tooltip: { yDecimals: 0, ySuffix: 'ms' },
|
|
type : 'area',
|
|
yAxis: 0,
|
|
zIndex: 7
|
|
},
|
|
{
|
|
pointInterval: 1000,
|
|
name: '80%',
|
|
data: responsetimepercentilesovertimeokPercentiles[4],
|
|
tooltip: { yDecimals: 0, ySuffix: 'ms' },
|
|
type : 'area',
|
|
yAxis: 0,
|
|
zIndex: 6
|
|
},
|
|
{
|
|
pointInterval: 1000,
|
|
name: '85%',
|
|
data: responsetimepercentilesovertimeokPercentiles[5],
|
|
tooltip: { yDecimals: 0, ySuffix: 'ms' },
|
|
type : 'area',
|
|
yAxis: 0,
|
|
zIndex: 5
|
|
},
|
|
{
|
|
pointInterval: 1000,
|
|
name: '90%',
|
|
data: responsetimepercentilesovertimeokPercentiles[6],
|
|
tooltip: { yDecimals: 0, ySuffix: 'ms' },
|
|
type : 'area',
|
|
yAxis: 0,
|
|
zIndex: 4
|
|
},
|
|
{
|
|
pointInterval: 1000,
|
|
name: '95%',
|
|
data: responsetimepercentilesovertimeokPercentiles[7],
|
|
tooltip: { yDecimals: 0, ySuffix: 'ms' },
|
|
type : 'area',
|
|
yAxis: 0,
|
|
zIndex: 3
|
|
},
|
|
{
|
|
pointInterval: 1000,
|
|
name: '99%',
|
|
data: responsetimepercentilesovertimeokPercentiles[8],
|
|
tooltip: { yDecimals: 0, ySuffix: 'ms' },
|
|
type : 'area',
|
|
yAxis: 0,
|
|
zIndex: 2
|
|
},
|
|
{
|
|
pointInterval: 1000,
|
|
name: 'max',
|
|
data: responsetimepercentilesovertimeokPercentiles[9],
|
|
tooltip: { yDecimals: 0, ySuffix: 'ms' },
|
|
type : 'area',
|
|
yAxis: 0,
|
|
zIndex: 1
|
|
},
|
|
allUsersData
|
|
]
|
|
});
|
|
|
|
responsetimepercentilesovertimeokPercentilesChart.setTitle({
|
|
text: '<span class="chart_title chart_title_">Response Time Percentiles over Time (OK)</span>',
|
|
useHTML: true
|
|
});
|
|
|
|
var requests = unpack([[1675698347,[0,0,0]],[1675698348,[0,0,0]],[1675698349,[0,0,0]],[1675698350,[4,1,3]],[1675698351,[21,13,8]],[1675698352,[23,14,9]],[1675698353,[43,25,18]],[1675698354,[27,14,13]],[1675698355,[31,14,17]],[1675698356,[31,18,13]],[1675698357,[30,11,19]],[1675698358,[21,14,7]],[1675698359,[40,15,25]],[1675698360,[34,22,12]],[1675698361,[26,10,16]],[1675698362,[31,14,17]],[1675698363,[30,13,17]],[1675698364,[24,13,11]],[1675698365,[10,4,6]],[1675698366,[4,2,2]],[1675698367,[1,1,0]],[1675698368,[0,0,0]]]);
|
|
|
|
var requestsChart = new Highcharts.StockChart({
|
|
chart: {
|
|
renderTo: 'requests',
|
|
zoomType: 'x',
|
|
marginBottom: 60
|
|
},
|
|
credits: { enabled: false },
|
|
legend: {
|
|
enabled: true,
|
|
floating: true,
|
|
y: -65,
|
|
borderWidth: 0,
|
|
itemStyle: { fontWeight: "normal" },
|
|
symbolRadius: 0
|
|
},
|
|
title: { text: 'A title to let highcharts reserve the place for the title set later' },
|
|
navigator: {
|
|
maskInside: false
|
|
},
|
|
rangeSelector: {
|
|
buttonSpacing: 0,
|
|
buttonTheme: {
|
|
fill: '#CFC9C6',
|
|
padding: 1,
|
|
stroke: '#000000',
|
|
'stroke-width': 0.25,
|
|
style: {
|
|
color: '#000000',
|
|
fontWeight: 'bold',
|
|
},
|
|
states: {
|
|
stroke: '#000000',
|
|
'stroke-width': 0.25,
|
|
hover: {
|
|
fill: '#92918C',
|
|
style: { color: 'black' }
|
|
},
|
|
select: {
|
|
fill: '#FFA900',
|
|
style: { color: 'white' }
|
|
}
|
|
}
|
|
},
|
|
buttons : [
|
|
{
|
|
type : 'minute',
|
|
count : 1,
|
|
text : '1m'
|
|
}, {
|
|
type : 'minute',
|
|
count : 10,
|
|
text : '10m'
|
|
}, {
|
|
type : 'hour',
|
|
count : 1,
|
|
text : '1h'
|
|
}, {
|
|
type : 'all',
|
|
count : 1,
|
|
text : 'All'
|
|
}
|
|
],
|
|
selected : 3,
|
|
inputEnabled : false
|
|
},
|
|
plotOptions: {
|
|
series: {
|
|
dataGrouping: { enabled: false }
|
|
},
|
|
area: {
|
|
stacking: 'normal'
|
|
}
|
|
},
|
|
xAxis: {
|
|
type: 'datetime',
|
|
ordinal: false,
|
|
maxZoom: 10000 // three days
|
|
},
|
|
yAxis:[
|
|
{
|
|
min: 0,
|
|
title: { text: 'Number of requests' },
|
|
opposite: false,
|
|
reversedStacks: false
|
|
}, {
|
|
min: 0,
|
|
title: {
|
|
text: 'Active Users',
|
|
style: { color: '#FFA900' }
|
|
},
|
|
opposite: true
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
color: '#5E7BE2',
|
|
name: 'All',
|
|
data: requests[0],
|
|
tooltip: { yDecimals: 0, ySuffix: '', valueDecimals: 0 }
|
|
,type: 'area'},
|
|
allUsersData
|
|
]
|
|
});
|
|
|
|
requestsChart.setTitle({
|
|
text: '<span class="chart_title">Number of requests per second</span>',
|
|
useHTML: true
|
|
});
|
|
|
|
var responses = unpack([[1675698347,[0,0,0]],[1675698348,[0,0,0]],[1675698349,[0,0,0]],[1675698350,[3,0,3]],[1675698351,[20,12,8]],[1675698352,[15,11,4]],[1675698353,[36,20,16]],[1675698354,[29,17,12]],[1675698355,[36,18,18]],[1675698356,[16,6,10]],[1675698357,[25,10,15]],[1675698358,[28,20,8]],[1675698359,[36,15,21]],[1675698360,[40,21,19]],[1675698361,[31,15,16]],[1675698362,[39,17,22]],[1675698363,[38,16,22]],[1675698364,[24,13,11]],[1675698365,[10,4,6]],[1675698366,[4,2,2]],[1675698367,[1,1,0]],[1675698368,[0,0,0]]]);
|
|
|
|
var requestsChart = new Highcharts.StockChart({
|
|
chart: {
|
|
renderTo: 'responses',
|
|
zoomType: 'x',
|
|
marginBottom: 60
|
|
},
|
|
credits: { enabled: false },
|
|
legend: {
|
|
enabled: true,
|
|
floating: true,
|
|
y: -65,
|
|
borderWidth: 0,
|
|
itemStyle: { fontWeight: "normal" },
|
|
symbolRadius: 0
|
|
},
|
|
title: { text: 'A title to let highcharts reserve the place for the title set later' },
|
|
navigator: {
|
|
maskInside: false
|
|
},
|
|
rangeSelector: {
|
|
buttonSpacing: 0,
|
|
buttonTheme: {
|
|
fill: '#CFC9C6',
|
|
padding: 1,
|
|
stroke: '#000000',
|
|
'stroke-width': 0.25,
|
|
style: {
|
|
color: '#000000',
|
|
fontWeight: 'bold',
|
|
},
|
|
states: {
|
|
stroke: '#000000',
|
|
'stroke-width': 0.25,
|
|
hover: {
|
|
fill: '#92918C',
|
|
style: { color: 'black' }
|
|
},
|
|
select: {
|
|
fill: '#FFA900',
|
|
style: { color: 'white' }
|
|
}
|
|
}
|
|
},
|
|
buttons : [
|
|
{
|
|
type : 'minute',
|
|
count : 1,
|
|
text : '1m'
|
|
}, {
|
|
type : 'minute',
|
|
count : 10,
|
|
text : '10m'
|
|
}, {
|
|
type : 'hour',
|
|
count : 1,
|
|
text : '1h'
|
|
}, {
|
|
type : 'all',
|
|
count : 1,
|
|
text : 'All'
|
|
}
|
|
],
|
|
selected : 3,
|
|
inputEnabled : false
|
|
},
|
|
plotOptions: {
|
|
series: {
|
|
dataGrouping: { enabled: false }
|
|
},
|
|
area: {
|
|
stacking: 'normal'
|
|
}
|
|
},
|
|
xAxis: {
|
|
type: 'datetime',
|
|
ordinal: false,
|
|
maxZoom: 10000 // three days
|
|
},
|
|
yAxis:[
|
|
{
|
|
min: 0,
|
|
title: { text: 'Number of responses' },
|
|
opposite: false,
|
|
reversedStacks: false
|
|
}, {
|
|
min: 0,
|
|
title: {
|
|
text: 'Active Users',
|
|
style: { color: '#FFA900' }
|
|
},
|
|
opposite: true
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
color: '#5E7BE2',
|
|
name: 'All',
|
|
data: responses[0],
|
|
tooltip: { yDecimals: 0, ySuffix: '', valueDecimals: 0 }
|
|
},
|
|
{
|
|
color: '#68b65c',
|
|
name: 'OK',
|
|
data: responses[1],
|
|
tooltip: { yDecimals: 0, ySuffix: '', valueDecimals: 0 }
|
|
,type: 'area'},
|
|
{
|
|
color: '#f15b4f',
|
|
name: 'KO',
|
|
data: responses[2],
|
|
tooltip: { yDecimals: 0, ySuffix: '', valueDecimals: 0 }
|
|
,type: 'area'},
|
|
allUsersData,
|
|
{
|
|
|
|
type: 'pie',
|
|
name: 'Distribution',
|
|
data: [
|
|
{name: 'OK', y: 218.0, color: '#68b65c'},{name: 'KO', y: 213.0, color: '#f15b4f'}
|
|
],
|
|
center: [775, -40],
|
|
size: 70,
|
|
showInLegend: false,
|
|
dataLabels: { enabled: false },
|
|
dataGrouping: { enabled: false }
|
|
|
|
}
|
|
|
|
]
|
|
});
|
|
|
|
requestsChart.setTitle({
|
|
text: '<span class="chart_title">Number of responses per second</span>',
|
|
useHTML: true
|
|
});
|
|
|
|
var scatterChart = new Highcharts.Chart({
|
|
chart: {
|
|
renderTo: 'container_response_time_dispersion',
|
|
defaultSeriesType: 'scatter',
|
|
zoomType: 'xy',
|
|
marginBottom: 90
|
|
},
|
|
credits: { enabled: false },
|
|
xAxis: {
|
|
title: {
|
|
enabled: true,
|
|
text: 'Global number of requests per second',
|
|
style: { fontWeight: 'bold' }
|
|
},
|
|
startOnTick: true,
|
|
endOnTick: true,
|
|
showLastLabel: true,
|
|
min: 0
|
|
},
|
|
title: { text: 'A title to let highcharts reserve the place for the title set later' },
|
|
yAxis: {
|
|
min: 0,
|
|
title: { text: 'Response Time (ms)' }
|
|
},
|
|
tooltip: {
|
|
formatter: function() {
|
|
return ''+ this.y +' ms at ' + this.x + ' allreq/s';
|
|
}
|
|
},
|
|
legend: {
|
|
enabled: true,
|
|
floating: true,
|
|
y: 0,
|
|
borderWidth: 0,
|
|
itemStyle: { fontWeight: "normal" },
|
|
},
|
|
plotOptions: {
|
|
scatter: {
|
|
marker: {
|
|
radius: 3,
|
|
states: {
|
|
hover: {
|
|
enabled: true,
|
|
lineColor: 'rgb(100,100,100)'
|
|
}
|
|
}
|
|
},
|
|
states: {
|
|
hover: {
|
|
marker: { enabled: false }
|
|
}
|
|
}
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
type: 'scatter',
|
|
color: '#68b65c',
|
|
name: 'OK',
|
|
data: [
|
|
[3,4],[9,4],[32,4],[70,89],[109,148],[129,526],[145,2414],[154,1110],[174,1468],[187,1780],[195,2107],[206,180],[239,297],[254,3513],[274,1154],[275,2455],[276,902],[277,1975]
|
|
]},
|
|
{
|
|
type: 'scatter',
|
|
color: '#f15b4f',
|
|
name: 'KO',
|
|
data: [
|
|
[9,3],[32,53],[70,103],[109,110],[129,611],[145,2199],[154,1350],[174,1991],[187,1363],[195,3083],[206,7],[239,108],[254,2979],[274,1062],[275,2557],[276,1397],[277,2087]
|
|
]}
|
|
]
|
|
});
|
|
|
|
scatterChart.setTitle({
|
|
text: '<span class="chart_title">Response Time against Global Throughput</span>',
|
|
useHTML: true
|
|
});
|
|
|
|
});
|
|
</script>
|
|
</div>
|
|
</body>
|
|
</html>
|