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
29 KiB
905 lines
29 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">231</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: ['51', '150', '249', '347', '446', '545', '644', '742', '841', '940', '1038', '1137', '1236', '1335', '1433', '1532', '1631', '1729', '1828', '1927', '2026', '2124', '2223', '2322', '2420', '2519', '2618', '2717', '2815', '2914', '3013', '3111', '3210', '3309', '3407', '3506', '3605', '3704', '3802', '3901', '4000', '4098', '4197', '4296', '4395', '4493', '4592', '4691', '4789', '4888', '4987', '5086', '5184', '5283', '5382', '5480', '5579', '5678', '5777', '5875', '5974', '6073', '6171', '6270', '6369', '6468', '6566', '6665', '6764', '6862', '6961', '7060', '7158', '7257', '7356', '7455', '7553', '7652', '7751', '7849', '7948', '8047', '8146', '8244', '8343', '8442', '8540', '8639', '8738', '8837', '8935', '9034', '9133', '9231', '9330', '9429', '9528', '9626', '9725', '9824'],
|
|
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: [
|
|
12.75,1.59,2.05,2.27,0.0,0.45,1.13,0.22,0.45,0.68,0.45,1.36,1.13,0.68,0.45,0.68,2.05,0.0,0.68,0.91,0.45,0.45,0.0,0.45,0.0,0.0,0.45,0.68,0.22,0.0,0.0,0.91,0.22,0.68,0.91,0.22,0.45,0.45,1.59,0.45,0.0,0.45,0.45,0.68,0.45,0.22,0.45,0.68,0.0,0.91,0.22,0.22,0.22,0.22,0.22,0.22,0.0,0.0,0.22,0.0,0.0,0.22,0.0,0.22,0.22,0.0,0.0,0.0,0.22,0.22,0.0,0.0,0.0,0.22,0.45,0.22,0.0,0.22,0.0,0.0,0.0,0.0,0.22,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.22
|
|
],
|
|
tooltip: { yDecimals: 0, ySuffix: 'ms' }
|
|
},
|
|
{
|
|
type: 'column',
|
|
color: '#f15b4f',
|
|
name: 'KO',
|
|
data: [
|
|
12.98,2.5,2.73,0.91,1.13,1.13,1.59,0.91,0.22,0.0,0.45,1.13,0.91,0.22,0.22,0.68,1.36,0.45,0.91,1.13,1.36,0.68,0.22,0.22,0.91,0.45,0.45,0.22,0.22,0.45,0.45,0.91,0.45,0.22,0.45,0.22,0.45,0.45,0.22,0.22,0.45,0.0,0.68,1.36,0.45,0.91,0.91,0.45,0.0,0.22,0.22,0.0,0.22,0.45,0.22,0.22,0.22,0.68,0.45,0.22,0.0,0.0,0.22,0.0,0.22,0.0,0.45,0.0,0.0,0.0,0.22,0.45,0.0,0.45,0.22,0.22,0.0,0.0,0.0,0.22,0.0,0.22,0.22,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,null],[1675698433,null],[1675698434,null],[1675698435,[5,7,11,112,112,118,136,154,168,172]],[1675698436,[4,6,12,100,105,160,215,564,843,913]],[1675698437,[79,217,309,328,343,588,963,1496,1951,2065]],[1675698438,[36,1219,1570,1843,1917,1956,2173,2299,2339,2350]],[1675698439,[3840,3840,3840,3840,3840,3840,3840,3840,3840,3840]],[1675698440,[5,1402,3127,3294,3390,3529,3754,3979,4159,4205]],[1675698441,[45,58,3121,3702,3747,4502,6678,7438,7481,7492]],[1675698442,[1865,4170,7072,7580,7666,8217,8769,9321,9762,9873]],[1675698443,[6792,6792,6792,6792,6792,6792,6792,6792,6792,6792]],[1675698444,[25,76,128,179,189,200,210,220,228,231]],[1675698445,[213,4315,4531,4558,4615,4673,5381,6740,7827,8099]],[1675698446,[6416,6416,6416,6416,6416,6416,6416,6416,6416,6416]],[1675698447,null],[1675698448,[1368,1368,1368,1368,1368,1368,1368,1368,1368,1368]],[1675698449,[664,664,664,664,664,664,664,664,664,664]],[1675698450,[335,3444,3804,4215,4299,4399,4726,5259,6744,7213]],[1675698451,[1253,4684,4915,5322,5457,5684,5911,6108,6217,6245]],[1675698452,[2645,2645,2645,2645,2645,2645,2645,2645,2645,2645]],[1675698453,[1302,1449,1639,2311,2631,2951,3270,3590,3846,3910]],[1675698454,[1458,1626,1956,2745,2862,2980,3098,3216,3310,3334]],[1675698455,[796,1384,1835,2067,2091,2096,2102,2461,2748,2820]],[1675698456,[1158,1201,1320,1469,1497,1524,1552,1579,1601,1607]],[1675698457,[503,717,1072,1156,1197,1225,1227,1369,1540,1583]],[1675698458,[170,297,378,591,596,604,617,630,640,643]],[1675698459,[3,3,5,10,12,47,82,117,145,152]],[1675698460,[3,3,4,8,13,13,14,76,224,261]],[1675698461,[3,3,3,3,4,4,11,43,69,76]],[1675698462,[4,4,4,4,4,4,4,4,4,5]],[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,[0,0,0]],[1675698433,[0,0,0]],[1675698434,[0,0,0]],[1675698435,[13,7,6]],[1675698436,[21,11,10]],[1675698437,[24,12,12]],[1675698438,[32,14,18]],[1675698439,[11,1,10]],[1675698440,[12,7,5]],[1675698441,[26,13,13]],[1675698442,[13,6,7]],[1675698443,[3,1,2]],[1675698444,[8,2,6]],[1675698445,[19,9,10]],[1675698446,[4,1,3]],[1675698447,[0,0,0]],[1675698448,[1,1,0]],[1675698449,[5,1,4]],[1675698450,[53,26,27]],[1675698451,[27,16,11]],[1675698452,[1,1,0]],[1675698453,[8,4,4]],[1675698454,[6,5,1]],[1675698455,[30,11,19]],[1675698456,[8,4,4]],[1675698457,[25,13,12]],[1675698458,[15,7,8]],[1675698459,[13,6,7]],[1675698460,[33,16,17]],[1675698461,[23,10,13]],[1675698462,[5,3,2]],[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,[0,0,0]],[1675698433,[0,0,0]],[1675698434,[0,0,0]],[1675698435,[10,5,5]],[1675698436,[21,12,9]],[1675698437,[23,11,12]],[1675698438,[5,3,2]],[1675698439,[10,3,7]],[1675698440,[19,10,9]],[1675698441,[17,7,10]],[1675698442,[1,1,0]],[1675698443,[7,2,5]],[1675698444,[28,11,17]],[1675698445,[13,4,9]],[1675698446,[0,0,0]],[1675698447,[1,0,1]],[1675698448,[0,0,0]],[1675698449,[18,10,8]],[1675698450,[15,6,9]],[1675698451,[2,1,1]],[1675698452,[4,3,1]],[1675698453,[3,2,1]],[1675698454,[43,22,21]],[1675698455,[11,4,7]],[1675698456,[30,17,13]],[1675698457,[44,20,24]],[1675698458,[24,12,12]],[1675698459,[29,13,16]],[1675698460,[33,16,17]],[1675698461,[23,10,13]],[1675698462,[5,3,2]],[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: 208.0, color: '#68b65c'},{name: 'KO', y: 231.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: [
|
|
[9,1368],[10,2645],[16,4],[26,6792],[31,3590],[45,6416],[46,43],[51,1579],[54,664],[57,3216],[90,630],[90,117],[96,2461],[108,76],[109,220],[121,6108],[131,1369],[133,9321],[136,3840],[145,3979],[167,6740],[182,5259],[208,154],[239,2299],[242,7438],[246,564],[265,1496]
|
|
]},
|
|
{
|
|
type: 'scatter',
|
|
color: '#f15b4f',
|
|
name: 'KO',
|
|
data: [
|
|
[16,4],[26,426],[31,2712],[45,7708],[46,35],[51,1810],[54,695],[57,2418],[90,641],[90,146],[96,2551],[108,287],[109,3977],[121,6559],[131,1453],[133,7363],[136,4610],[145,3978],[167,8125],[182,6658],[208,128],[239,5841],[242,5434],[246,179],[265,1296]
|
|
]}
|
|
]
|
|
});
|
|
|
|
scatterChart.setTitle({
|
|
text: '<span class="chart_title">Response Time against Global Throughput</span>',
|
|
useHTML: true
|
|
});
|
|
|
|
});
|
|
</script>
|
|
</div>
|
|
</body>
|
|
</html>
|