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
26 KiB
883 lines
26 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 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="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-user-00551'].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: ['21', '61', '102', '142', '182', '223', '263', '303', '344', '384', '424', '464', '505', '545', '585', '626', '666', '706', '747', '787', '827', '867', '908', '948', '988', '1029', '1069', '1109', '1150', '1190', '1230', '1270', '1311', '1351', '1391', '1432', '1472', '1512', '1553', '1593', '1633', '1673', '1714', '1754', '1794', '1835', '1875', '1915', '1956', '1996', '2036', '2076', '2117', '2157', '2197', '2238', '2278', '2318', '2359', '2399', '2439', '2479', '2520', '2560', '2600', '2641', '2681', '2721', '2762', '2802', '2842', '2882', '2923', '2963', '3003', '3044', '3084', '3124', '3165', '3205', '3245', '3285', '3326', '3366', '3406', '3447', '3487', '3527', '3568', '3608', '3648', '3688', '3729', '3769', '3809', '3850', '3890', '3930', '3971', '4011'],
|
|
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: [
|
|
62.45,0.22,4.47,1.26,0.91,0.45,0.34,0.34,0.45,0.34,0.57,0.22,0.68,0.11,0.57,0.57,0.8,0.22,0.45,0.11,0.8,0.34,0.91,0.57,0.8,0.22,0.68,0.68,1.14,0.45,0.68,0.8,0.34,0.22,0.68,0.45,0.57,0.45,0.34,0.68,0.57,0.34,0.34,0.68,0.34,0.45,0.0,0.22,0.0,0.11,0.22,0.45,0.45,0.8,0.45,0.22,0.45,0.11,0.22,0.11,0.22,0.11,0.34,0.34,0.22,0.34,0.45,0.34,0.0,0.11,0.11,0.22,0.11,0.22,0.34,0.11,0.0,0.11,0.22,0.11,0.0,0.0,0.0,0.0,0.22,0.22,0.0,0.0,0.11,0.45,0.0,0.11,0.11,0.11,0.0,0.0,0.0,0.0,0.11,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([[1675698347,null],[1675698348,[1,2,2,3,3,3,3,61,89,91]],[1675698349,[1,1,2,2,3,3,3,12,122,126]],[1675698350,[1,2,2,99,112,131,166,182,206,212]],[1675698351,[1,2,3,82,89,101,106,208,277,293]],[1675698352,[2,3,6,618,660,810,934,1038,1371,1616]],[1675698353,[1,3,5,570,790,932,1121,1240,1510,1535]],[1675698354,[1,3,8,1224,1285,1422,1755,2190,2645,2698]],[1675698355,[1,3,10,2165,2250,2464,2951,3615,3969,4031]],[1675698356,[1,4,1605,2577,2732,2900,3049,3400,3613,3684]],[1675698357,[1,3,5,1760,1941,2250,2611,2911,3254,3427]],[1675698358,[1,3,6,1296,1415,1619,2077,2244,2814,2995]],[1675698359,[1,4,62,1160,1485,1702,1806,1877,2061,2127]],[1675698360,[1,3,6,912,1137,1238,1372,1480,1630,1651]],[1675698361,[1,3,172,1046,1085,1117,1177,1267,1430,1472]],[1675698362,[2,4,6,381,439,494,506,515,564,577]],[1675698363,[1,2,84,101,102,131,137,139,160,166]],[1675698364,[1,3,43,92,95,95,96,97,97,98]],[1675698365,[2,2,2,2,2,2,2,2,2,2]],[1675698366,null],[1675698367,null],[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,[27,27,0]],[1675698349,[50,50,0]],[1675698350,[73,73,0]],[1675698351,[76,76,0]],[1675698352,[79,79,0]],[1675698353,[74,74,0]],[1675698354,[77,77,0]],[1675698355,[79,79,0]],[1675698356,[81,81,0]],[1675698357,[60,60,0]],[1675698358,[38,38,0]],[1675698359,[30,30,0]],[1675698360,[42,42,0]],[1675698361,[36,36,0]],[1675698362,[20,20,0]],[1675698363,[22,22,0]],[1675698364,[6,6,0]],[1675698365,[1,1,0]],[1675698366,[0,0,0]],[1675698367,[0,0,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,[27,27,0]],[1675698349,[50,50,0]],[1675698350,[65,65,0]],[1675698351,[80,80,0]],[1675698352,[65,65,0]],[1675698353,[72,72,0]],[1675698354,[68,68,0]],[1675698355,[58,58,0]],[1675698356,[58,58,0]],[1675698357,[52,52,0]],[1675698358,[53,53,0]],[1675698359,[63,63,0]],[1675698360,[50,50,0]],[1675698361,[43,43,0]],[1675698362,[37,37,0]],[1675698363,[21,21,0]],[1675698364,[8,8,0]],[1675698365,[1,1,0]],[1675698366,[0,0,0]],[1675698367,[0,0,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: 871.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: [
|
|
[32,2],[70,97],[77,61],[109,139],[129,515],[145,2244],[148,12],[154,1267],[174,1877],[187,1480],[195,2911],[206,182],[239,208],[254,3400],[274,1038],[275,3615],[276,1240],[277,2190]
|
|
]},
|
|
{
|
|
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>
|