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.
883 lines
28 KiB
883 lines
28 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 - Get All Users</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="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_get-all-users-b5141'].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: ['43', '126', '209', '292', '375', '457', '540', '623', '706', '789', '871', '954', '1037', '1120', '1202', '1285', '1368', '1451', '1534', '1616', '1699', '1782', '1865', '1948', '2030', '2113', '2196', '2279', '2362', '2444', '2527', '2610', '2693', '2775', '2858', '2941', '3024', '3107', '3189', '3272', '3355', '3438', '3521', '3603', '3686', '3769', '3852', '3935', '4017', '4100', '4183', '4266', '4348', '4431', '4514', '4597', '4680', '4762', '4845', '4928', '5011', '5094', '5176', '5259', '5342', '5425', '5508', '5590', '5673', '5756', '5839', '5921', '6004', '6087', '6170', '6253', '6335', '6418', '6501', '6584', '6667', '6749', '6832', '6915', '6998', '7081', '7163', '7246', '7329', '7412', '7494', '7577', '7660', '7743', '7826', '7908', '7991', '8074', '8157', '8240'],
|
|
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: [
|
|
47.39,5.31,3.5,5.09,2.6,0.79,1.58,1.01,0.9,1.58,1.58,1.01,1.01,1.13,0.33,0.33,0.11,0.33,0.67,0.45,0.45,0.56,0.9,0.22,0.67,0.79,0.33,0.33,0.22,0.22,0.45,0.33,0.67,0.67,0.45,0.11,0.0,0.9,0.67,0.45,0.45,0.33,0.56,0.22,0.33,0.45,0.56,0.56,0.79,0.67,0.79,0.56,0.11,0.45,0.33,0.45,0.33,0.33,0.33,0.45,0.11,0.0,0.0,0.33,0.45,0.11,0.22,0.11,0.11,0.0,0.11,0.11,0.0,0.11,0.0,0.0,0.11,0.0,0.0,0.0,0.22,0.11,0.11,0.22,0.11,0.33,0.33,0.11,0.0,0.22,0.11,0.45,0.11,0.0,0.0,0.0,0.0,0.0,0.0,0.11
|
|
],
|
|
tooltip: { yDecimals: 0, ySuffix: 'ms' }
|
|
},
|
|
{
|
|
type: 'column',
|
|
color: '#f15b4f',
|
|
name: 'KO',
|
|
data: [
|
|
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,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,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,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([[1675698432,[8,9,11,19,26,64,106,125,144,149]],[1675698433,[6,7,8,9,9,9,10,10,13,14]],[1675698434,[2,7,8,9,9,10,10,12,16,20]],[1675698435,[2,4,8,10,11,11,12,12,15,20]],[1675698436,[3,7,12,19,26,36,62,258,743,887]],[1675698437,[2,43,164,537,764,1067,1217,1867,2244,2313]],[1675698438,[96,310,885,2255,2768,4412,4857,5331,5608,5692]],[1675698439,[11,302,3381,4138,4253,4389,4809,4899,5447,5531]],[1675698440,[2,18,64,241,2772,3278,3744,4007,4266,4436]],[1675698441,[3,43,296,3458,3666,4035,6362,7236,7778,8281]],[1675698442,[1154,5087,6929,7194,7338,7498,7586,7612,7663,7678]],[1675698443,[144,334,2679,5629,5863,5918,5970,6012,6046,6055]],[1675698444,[2,15,35,144,199,226,2034,5132,5354,5371]],[1675698445,[203,213,2358,4595,4632,4652,4673,4694,4710,4715]],[1675698446,null],[1675698447,[1467,1907,2347,2787,2875,2963,3051,3138,3209,3227]],[1675698448,[1089,1101,1114,1126,1129,1131,1134,1136,1138,1139]],[1675698449,[4,651,835,924,940,1478,2529,2948,3317,3348]],[1675698450,[306,359,2507,4190,4280,4400,4560,4599,4656,4672]],[1675698451,[4010,4010,4010,4010,4010,4010,4010,4010,4010,4010]],[1675698452,[1674,2994,3543,3859,3983,4107,4231,4355,4455,4480]],[1675698453,[669,1151,1196,1625,1626,1628,1629,1631,1632,1633]],[1675698454,[1075,1998,2280,2763,2826,3081,3115,3538,3803,3856]],[1675698455,[312,682,1711,1967,1978,1989,2022,2059,2088,2096]],[1675698456,[36,139,175,805,931,1107,1180,1360,1637,1707]],[1675698457,[10,404,820,989,1020,1040,1064,1108,1413,1535]],[1675698458,[190,209,283,354,366,468,570,672,754,775]],[1675698459,[4,8,11,14,36,59,82,105,123,128]],[1675698460,null],[1675698461,null],[1675698462,null],[1675698463,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([[1675698432,[27,27,0]],[1675698433,[50,50,0]],[1675698434,[61,61,0]],[1675698435,[83,83,0]],[1675698436,[82,82,0]],[1675698437,[78,78,0]],[1675698438,[56,56,0]],[1675698439,[63,63,0]],[1675698440,[73,73,0]],[1675698441,[74,74,0]],[1675698442,[23,23,0]],[1675698443,[10,10,0]],[1675698444,[27,27,0]],[1675698445,[6,6,0]],[1675698446,[0,0,0]],[1675698447,[2,2,0]],[1675698448,[2,2,0]],[1675698449,[32,32,0]],[1675698450,[28,28,0]],[1675698451,[1,1,0]],[1675698452,[4,4,0]],[1675698453,[5,5,0]],[1675698454,[33,33,0]],[1675698455,[8,8,0]],[1675698456,[15,15,0]],[1675698457,[30,30,0]],[1675698458,[6,6,0]],[1675698459,[5,5,0]],[1675698460,[0,0,0]],[1675698461,[0,0,0]],[1675698462,[0,0,0]],[1675698463,[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([[1675698432,[27,27,0]],[1675698433,[50,50,0]],[1675698434,[60,60,0]],[1675698435,[83,83,0]],[1675698436,[76,76,0]],[1675698437,[67,67,0]],[1675698438,[40,40,0]],[1675698439,[16,16,0]],[1675698440,[86,86,0]],[1675698441,[40,40,0]],[1675698442,[7,7,0]],[1675698443,[48,48,0]],[1675698444,[61,61,0]],[1675698445,[14,14,0]],[1675698446,[0,0,0]],[1675698447,[3,3,0]],[1675698448,[7,7,0]],[1675698449,[34,34,0]],[1675698450,[37,37,0]],[1675698451,[3,3,0]],[1675698452,[6,6,0]],[1675698453,[3,3,0]],[1675698454,[10,10,0]],[1675698455,[9,9,0]],[1675698456,[35,35,0]],[1675698457,[27,27,0]],[1675698458,[27,27,0]],[1675698459,[8,8,0]],[1675698460,[0,0,0]],[1675698461,[0,0,0]],[1675698462,[0,0,0]],[1675698463,[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: 884.0, color: '#68b65c'},{name: 'KO', y: 0.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: [
|
|
[4,3138],[9,1136],[10,4355],[26,6012],[27,125],[31,1631],[51,1360],[54,2948],[57,3538],[76,10],[90,672],[90,105],[96,2059],[109,5132],[121,4010],[131,1108],[133,7612],[136,12],[136,4899],[145,4007],[167,4694],[182,4599],[208,12],[239,5331],[242,7236],[246,258],[265,1867]
|
|
]},
|
|
{
|
|
type: 'scatter',
|
|
color: '#f15b4f',
|
|
name: 'KO',
|
|
data: [
|
|
[]
|
|
]}
|
|
]
|
|
});
|
|
|
|
scatterChart.setTitle({
|
|
text: '<span class="chart_title">Response Time against Global Throughput</span>',
|
|
useHTML: true
|
|
});
|
|
|
|
});
|
|
</script>
|
|
</div>
|
|
</body>
|
|
</html>
|