req_product-page-re--237514321.html 37 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <link rel="shortcut icon" type="image/x-icon" href="style/favicon.ico"/>
  6. <link href="style/style.css" rel="stylesheet" type="text/css" />
  7. <link href="style/bootstrap.min.css" rel="stylesheet" type="text/css" />
  8. <script src="js/jquery-3.5.1.min.js"></script>
  9. <script src="js/bootstrap.min.js"></script>
  10. <script src="js/gatling.js"></script>
  11. <script src="js/menu.js"></script>
  12. <script src="js/ellipsis.js"></script>
  13. <script src="js/all_sessions.js"></script>
  14. <script src="js/stats.js"></script>
  15. <script src="js/highstock.js"></script>
  16. <script src="js/highcharts-more.js"></script>
  17. <script src="js/theme.js"></script>
  18. <script src="js/unpack.js"></script>
  19. <title>Gatling Stats - Product Page Request</title>
  20. </head>
  21. <body>
  22. <script>
  23. const storedTheme = localStorage.getItem('theme') || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
  24. if (storedTheme) document.documentElement.setAttribute('data-theme', storedTheme)
  25. function toggleTheme() {
  26. const currentTheme = document.documentElement.getAttribute("data-theme");
  27. const targetTheme = currentTheme === "light" ? "dark" : "light";
  28. document.documentElement.setAttribute('data-theme', targetTheme)
  29. localStorage.setItem('theme', targetTheme);
  30. };
  31. </script>
  32. <div class="app-container">
  33. <div class="frise"></div>
  34. <div class="head">
  35. <div class="gatling-open-source">
  36. <a class="gatling-logo gatling-logo-light" href="https://gatling.io" target="blank_" title="Gatling Home Page"><img alt="Gatling" src="style/logo-light.svg"/></a>
  37. <a class="gatling-logo gatling-logo-dark" href="https://gatling.io" target="blank_" title="Gatling Home Page"><img alt="Gatling" src="style/logo-dark.svg"/></a>
  38. <a class="gatling-documentation" href="https://gatling.io/docs/" target="_blank">Documentation</a>
  39. </div>
  40. <div class="nav spacer"></div>
  41. <a class="enterprise" href="https://gatling.io/enterprise/next-step/" target="_blank"><strong>Try</strong>
  42. <img class="logo-enterprise-light" alt="Gatling Enterprise" src="style/logo-enterprise-light.svg"/>
  43. <img class="logo-enterprise-dark" alt="Gatling Enterprise" src="style/logo-enterprise-dark.svg"/>
  44. </a>
  45. <button id="theme-toggle" class="theme-toggle" type="button" onclick="toggleTheme()" aria-label="Toggle user interface mode">
  46. <span class="toggle-dark"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-moon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg></span>
  47. <span class="toggle-light"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-sun"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg></span>
  48. </button>
  49. </div>
  50. <div class="container details">
  51. <div class="nav">
  52. <ul></ul>
  53. </div>
  54. <div class="cadre">
  55. <div class="content">
  56. <div class="content-header">
  57. <div class="onglet">
  58. ProductsPageSimulation
  59. </div>
  60. <div class="sous-menu" id="sousMenu">
  61. <div class="sous-menu-spacer">
  62. <div class="item "><a href="index.html">Global</a></div>
  63. <div class="item ouvert"><a id="details_link" href="#">Details</a></div>
  64. </div>
  65. </div>
  66. </div>
  67. <div class="content-in">
  68. <div class="container-article">
  69. <div class="article">
  70. <div class="schema-container">
  71. <div id="ranges" class="schema ranges-large">
  72. </div>
  73. <div class="infos">
  74. <div class="infos-in">
  75. <div class="infos-title">Stats</div>
  76. <div class="info">
  77. <h2 class="first">Executions</h2>
  78. <table>
  79. <thead>
  80. <tr><th></th><th>Total</th><th>OK</th><th>KO</th></tr>
  81. </thead>
  82. <tbody>
  83. <tr>
  84. <td class="title">Total count</td>
  85. <td id="numberOfRequests" class="total"></td>
  86. <td id="numberOfRequestsOK" class="ok"></td>
  87. <td id="numberOfRequestsKO" class="ko"></td>
  88. </tr>
  89. <tr>
  90. <td class="title">Mean count/s</abbr></td>
  91. <td id="meanNumberOfRequestsPerSecond" class="total"></td>
  92. <td id="meanNumberOfRequestsPerSecondOK" class="ok"></td>
  93. <td id="meanNumberOfRequestsPerSecondKO" class="ko"></td>
  94. </tr>
  95. </tbody>
  96. </table>
  97. <h2 class="second">Response Time (ms)</h2>
  98. <table>
  99. <thead>
  100. <tr>
  101. <th></th>
  102. <th>Total</th>
  103. <th>OK</th>
  104. <th>KO</th>
  105. </tr>
  106. </thead>
  107. <tbody>
  108. <tr>
  109. <td class="title">Min</td>
  110. <td id="minResponseTime" class="total"></td>
  111. <td id="minResponseTimeOK" class="ok"></td>
  112. <td id="minResponseTimeKO" class="ko"></td>
  113. </tr>
  114. <tr>
  115. <td class="title">50th percentile</td>
  116. <td id="percentiles1" class="total"></td>
  117. <td id="percentiles1OK" class="ok"></td>
  118. <td id="percentiles1KO" class="ko"></td>
  119. </tr>
  120. <tr>
  121. <td class="title">75th percentile</td>
  122. <td id="percentiles2" class="total"></td>
  123. <td id="percentiles2OK" class="ok"></td>
  124. <td id="percentiles2KO" class="ko"></td>
  125. </tr>
  126. <tr>
  127. <td class="title">95th percentile</td>
  128. <td id="percentiles3" class="total"></td>
  129. <td id="percentiles3OK" class="ok"></td>
  130. <td id="percentiles3KO" class="ko"></td>
  131. </tr>
  132. <tr>
  133. <td class="title">99th percentile</td>
  134. <td id="percentiles4" class="total"></td>
  135. <td id="percentiles4OK" class="ok"></td>
  136. <td id="percentiles4KO" class="ko"></td>
  137. </tr>
  138. <tr>
  139. <td class="title">Max</td>
  140. <td id="maxResponseTime" class="total"></td>
  141. <td id="maxResponseTimeOK" class="ok"></td>
  142. <td id="maxResponseTimeKO" class="ko"></td>
  143. </tr>
  144. <tr>
  145. <td class="title">Mean</td>
  146. <td id="meanResponseTime" class="total"></td>
  147. <td id="meanResponseTimeOK" class="ok"></td>
  148. <td id="meanResponseTimeKO" class="ko"></td>
  149. </tr>
  150. <tr>
  151. <td class="title">Standard Deviation</td>
  152. <td id="standardDeviation" class="total"></td>
  153. <td id="standardDeviationOK" class="ok"></td>
  154. <td id="standardDeviationKO" class="ko"></td>
  155. </tr>
  156. </tbody>
  157. </table>
  158. </div>
  159. </div>
  160. </div>
  161. </div>
  162. <div class="statistics extensible-geant collapsed">
  163. <div class="title">
  164. Errors
  165. </div>
  166. <table id="container_errors" class="statistics-in extensible-geant">
  167. <thead>
  168. <tr>
  169. <th id="error-col-1" class="header sortable"><span>Error</span></th>
  170. <th id="error-col-2" class="header sortable"><span>Count</span></th>
  171. <th id="error-col-3" class="header sortable"><span>Percentage</span></th>
  172. </tr>
  173. </thead>
  174. <tbody>
  175. <tr>
  176. <td class="error-col-1 total ko">j.n.SocketException: No buffer space available (maximum connections reached?): connect<span class="value" style="display:none">0</span></td>
  177. <td class="value error-col-2 total ko">10931</td>
  178. <td class="value error-col-3 total ko">54.49%</td>
  179. </tr>
  180. <tr>
  181. <td class="error-col-1 total ko">i.n.c.ConnectTimeoutException: connection timed out after 10000 ms: ecomm.gatling.io/18.164.246.111:443<span class="value" style="display:none">1</span></td>
  182. <td class="value error-col-2 total ko">1973</td>
  183. <td class="value error-col-3 total ko">9.84%</td>
  184. </tr>
  185. <tr>
  186. <td class="error-col-1 total ko">i.n.c.ConnectTimeoutException: connection timed out after 10000 ms: ecomm.gatling.io/18.164.246.56:443<span class="value" style="display:none">2</span></td>
  187. <td class="value error-col-2 total ko">1954</td>
  188. <td class="value error-col-3 total ko">9.74%</td>
  189. </tr>
  190. <tr>
  191. <td class="error-col-1 total ko">i.n.c.ConnectTimeoutException: connection timed out after 10000 ms: ecomm.gatling.io/18.164.246.108:443<span class="value" style="display:none">3</span></td>
  192. <td class="value error-col-2 total ko">1940</td>
  193. <td class="value error-col-3 total ko">9.67%</td>
  194. </tr>
  195. <tr>
  196. <td class="error-col-1 total ko">i.n.c.ConnectTimeoutException: connection timed out after 10000 ms: ecomm.gatling.io/18.164.246.48:443<span class="value" style="display:none">4</span></td>
  197. <td class="value error-col-2 total ko">1928</td>
  198. <td class="value error-col-3 total ko">9.61%</td>
  199. </tr>
  200. <tr>
  201. <td class="error-col-1 total ko">j.n.BindException: Address already in use: getsockopt<span class="value" style="display:none">5</span></td>
  202. <td class="value error-col-2 total ko">1281</td>
  203. <td class="value error-col-3 total ko">6.39%</td>
  204. </tr>
  205. <tr>
  206. <td class="error-col-1 total ko">i.n.h.s.SslHandshakeTimeoutException: handshake timed out after 10000ms<span class="value" style="display:none">6</span></td>
  207. <td class="value error-col-2 total ko">51</td>
  208. <td class="value error-col-3 total ko">0.25%</td>
  209. </tr>
  210. <tr>
  211. <td class="error-col-1 total ko">Request timeout to ecomm.gatling.io/18.164.246.108:443 after 60000 ms<span class="value" style="display:none">7</span></td>
  212. <td class="value error-col-2 total ko">1</td>
  213. <td class="value error-col-3 total ko">0%</td>
  214. </tr>
  215. <tr>
  216. <td class="error-col-1 total ko">Request timeout to ecomm.gatling.io/18.164.246.111:443 after 60000 ms<span class="value" style="display:none">8</span></td>
  217. <td class="value error-col-2 total ko">1</td>
  218. <td class="value error-col-3 total ko">0%</td>
  219. </tr>
  220. </tbody>
  221. </table>
  222. </div>
  223. <div class="schema geant">
  224. <div id="responsetimeDistributionContainer" class="geant"></div>
  225. </div>
  226. <div class="schema geant">
  227. <div id="responsetimepercentilesovertimeokPercentilesContainer" class="geant"></div>
  228. </div>
  229. <div class="schema geant">
  230. <div id="requests" class="geant"></div>
  231. </div>
  232. <div class="schema geant">
  233. <div id="responses" class="geant"></div>
  234. </div>
  235. <div class="schema geant">
  236. <div id="container_response_time_dispersion" class="geant"></div>
  237. </div>
  238. </div>
  239. </div>
  240. </div>
  241. </div>
  242. </div>
  243. </div>
  244. <script>
  245. var pageStats = stats.contents['req_product-page-re--237514321'].stats;
  246. $(document).ready(function() {
  247. $('.simulation-tooltip').popover({trigger:'hover', placement:'left'});
  248. setDetailsLinkUrl();
  249. setDetailsMenu();
  250. setActiveMenu();
  251. fillStats(pageStats);
  252. Highcharts.setOptions({
  253. global: { useUTC: false }
  254. });
  255. var rangesChart = new Highcharts.Chart({
  256. chart: {
  257. renderTo: 'ranges',
  258. marginRight: 100
  259. },
  260. credits: { enabled: false },
  261. legend: { enabled: false },
  262. title: { text: 'A title to let highcharts reserve the place for the title set later' },
  263. xAxis: {
  264. categories: [
  265. pageStats.group1.htmlName,
  266. pageStats.group2.htmlName,
  267. pageStats.group3.htmlName,
  268. pageStats.group4.htmlName
  269. ]
  270. },
  271. yAxis: {
  272. title: { text: 'Number of Requests' },
  273. reversedStacks: false
  274. },
  275. tooltip: {
  276. formatter: function() {
  277. var s;
  278. if (this.point.name) { // the pie chart
  279. s = ''+ this.point.name +': '+ this.y +'% requests';
  280. } else {
  281. s = ''+ this.y + ' requests';
  282. }
  283. return s;
  284. }
  285. },
  286. plotOptions: {
  287. series: {
  288. stacking: 'normal',
  289. shadow: true
  290. }
  291. },
  292. series: [
  293. {
  294. type: 'column',
  295. data: [{
  296. color: '#68b65c',
  297. y: pageStats.group1.count
  298. },
  299. {
  300. color: '#FFDD00',
  301. y: pageStats.group2.count
  302. },
  303. {
  304. color: '#FFA900',
  305. y: pageStats.group3.count
  306. },
  307. {
  308. color: '#f15b4f',
  309. y: pageStats.group4.count
  310. }]
  311. },
  312. {
  313. type: 'pie',
  314. name: 'Percentages',
  315. data: [
  316. {
  317. name: pageStats.group1.name,
  318. y: pageStats.group1.percentage,
  319. color: '#68b65c'
  320. },
  321. {
  322. name: pageStats.group2.name,
  323. y: pageStats.group2.percentage,
  324. color: '#FFDD00'
  325. },
  326. {
  327. name: pageStats.group3.name,
  328. y: pageStats.group3.percentage,
  329. color: '#FFA900'
  330. },
  331. {
  332. name: pageStats.group4.name,
  333. y: pageStats.group4.percentage,
  334. color: '#f15b4f'
  335. }
  336. ],
  337. center: [368, 0],
  338. size: 90,
  339. showInLegend: false,
  340. dataLabels: { enabled: false }
  341. }
  342. ]
  343. });
  344. rangesChart.setTitle({
  345. text: '<span class="chart_title">Response Time Ranges</span>',
  346. useHTML: true
  347. });
  348. $('#container_errors').sortable('#container_errors');
  349. var responsetimeDistributionChart = new Highcharts.Chart({
  350. chart: {
  351. renderTo: 'responsetimeDistributionContainer',
  352. type: 'column',
  353. marginBottom: 60
  354. },
  355. credits: { enabled: false },
  356. legend: {
  357. enabled: true,
  358. floating: true,
  359. y: 5,
  360. borderWidth: 0,
  361. itemStyle: { fontWeight: "normal" },
  362. symbolRadius: 0
  363. },
  364. title: { text: 'A title to let highcharts reserve the place for the title set later' },
  365. navigator: {
  366. maskInside: false
  367. },
  368. xAxis: {
  369. categories: ['1705', '2291', '2877', '3463', '4049', '4635', '5221', '5807', '6393', '6979', '7564', '8150', '8736', '9322', '9908', '10494', '11080', '11666', '12252', '12838', '13424', '14010', '14596', '15182', '15768', '16354', '16940', '17526', '18112', '18698', '19283', '19869', '20455', '21041', '21627', '22213', '22799', '23385', '23971', '24557', '25143', '25729', '26315', '26901', '27487', '28073', '28659', '29245', '29831', '30417', '31002', '31588', '32174', '32760', '33346', '33932', '34518', '35104', '35690', '36276', '36862', '37448', '38034', '38620', '39206', '39792', '40378', '40964', '41550', '42136', '42721', '43307', '43893', '44479', '45065', '45651', '46237', '46823', '47409', '47995', '48581', '49167', '49753', '50339', '50925', '51511', '52097', '52683', '53269', '53855', '54440', '55026', '55612', '56198', '56784', '57370', '57956', '58542', '59128', '59714'],
  370. tickInterval: 20
  371. },
  372. yAxis: {
  373. min: 0,
  374. title: { text: 'Percentage of Requests' },
  375. reversedStacks: false
  376. },
  377. tooltip: {
  378. formatter: function() {
  379. return '<b>'+ this.x +' ms</b><br/>'+
  380. this.series.name +': '+ this.y +' %<br/>'+
  381. 'Total: '+ this.point.stackTotal + ' %';
  382. }
  383. },
  384. plotOptions: {
  385. series: {
  386. groupPadding: 0,
  387. stacking: 'normal',
  388. shadow: true
  389. }
  390. },
  391. series: [
  392. {
  393. type: 'column',
  394. color: '#68b65c',
  395. name: 'OK',
  396. data: [
  397. 0.11,0.3,0.45,0.13,0.0,0.22,0.11,0.0,0.0,0.14,0.88,0.16,0.38,0.22,0.84,2.76,0.54,0.64,1.41,0.02,0.64,5.03,0.36,0.16,0.14,0.1,0.18,0.18,0.16,0.1,0.12,0.1,0.08,0.07,0.11,0.1,0.11,0.14,0.1,0.12,0.1,0.08,0.08,0.06,0.04,0.04,0.07,0.07,0.03,0.08,0.1,0.06,0.08,0.06,0.08,0.11,0.14,0.11,0.1,0.08,0.06,0.08,0.03,0.03,0.05,0.02,0.04,0.02,0.02,0.02,0.03,0.02,0.0,0.01,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0
  398. ],
  399. tooltip: { yDecimals: 0, ySuffix: 'ms' }
  400. },
  401. {
  402. type: 'column',
  403. color: '#f15b4f',
  404. name: 'KO',
  405. data: [
  406. 0.92,0.0,6.68,1.66,3.84,4.67,2.31,0.12,6.27,5.11,0.51,1.38,1.52,0.62,0.62,0.97,1.4,2.44,1.43,2.29,1.06,0.76,0.52,0.01,0.01,0.9,0.45,0.05,0.02,1.66,0.21,0.23,0.63,0.33,0.68,0.54,0.89,0.87,0.36,0.0,0.07,0.07,0.38,0.01,0.01,0.04,0.12,0.18,0.0,1.1,1.5,1.21,1.12,1.23,1.28,0.56,0.0,0.07,0.11,0.0,0.0,0.02,0.0,0.0,0.26,0.0,1.36,4.02,2.46,1.72,4.18,1.22,0.68,0.0,0.0,0.0,0.01,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0
  407. ],
  408. tooltip: { yDecimals: 0, ySuffix: 'ms' }
  409. }
  410. ]
  411. });
  412. responsetimeDistributionChart.setTitle({
  413. text: '<span class="chart_title">Response Time Distribution</span>',
  414. useHTML: true
  415. });
  416. var responsetimepercentilesovertimeokPercentiles = unpack([[1744913838,[1412,3016,7418,8693,9236,10475,10554,10602,11636,14355]],[1744913839,[6732,10353,10957,14028,14120,14163,14201,21997,34794,44375]],[1744913840,[10388,13626,13992,14221,14579,16196,23202,31184,40806,57239]],[1744913841,[9360,18213,23698,33059,34432,35874,37608,40528,44969,58332]],[1744913842,[9173,20596,26819,35759,36291,37288,38573,42073,46112,47563]],[1744913843,[12569,17427,22969,34072,34456,35012,37462,40581,53506,53506]],[1744913844,[11760,17201,23421,32078,32771,33386,34496,36963,46335,46335]],[1744913845,[12453,15023,17269,21903,23595,25136,25324,34773,40414,40414]],[1744913846,[11278,14562,17292,18512,20581,20581,22326,22675,22675,22675]],[1744913847,null],[1744913848,null],[1744913849,null],[1744913850,null],[1744913851,null],[1744913852,null],[1744913853,null],[1744913854,null],[1744913855,null],[1744913856,null],[1744913857,null],[1744913858,null],[1744913859,null],[1744913860,null],[1744913861,null],[1744913862,null],[1744913863,null],[1744913864,null],[1744913865,null],[1744913866,null],[1744913867,null],[1744913868,null],[1744913869,null],[1744913870,null],[1744913871,null],[1744913872,null],[1744913873,null],[1744913874,null],[1744913875,null],[1744913876,null],[1744913877,null],[1744913878,null],[1744913879,null],[1744913880,null],[1744913881,null],[1744913882,null],[1744913883,null],[1744913884,null],[1744913885,null],[1744913886,null],[1744913887,null],[1744913888,null],[1744913889,null],[1744913890,null],[1744913891,null],[1744913892,null],[1744913893,null],[1744913894,null],[1744913895,null],[1744913896,null],[1744913897,null],[1744913898,null],[1744913899,null],[1744913900,null],[1744913901,null],[1744913902,null],[1744913903,null],[1744913904,null],[1744913905,null],[1744913906,null],[1744913907,null],[1744913908,null],[1744913909,null],[1744913910,null],[1744913911,null],[1744913912,null],[1744913913,null],[1744913914,null],[1744913915,null],[1744913916,null],[1744913917,null],[1744913918,null],[1744913919,null],[1744913920,null],[1744913921,null],[1744913922,null],[1744913923,null],[1744913924,null],[1744913925,null],[1744913926,null],[1744913927,null],[1744913928,null],[1744913929,null],[1744913930,null],[1744913931,null],[1744913932,null],[1744913933,null],[1744913934,null],[1744913935,null],[1744913936,null],[1744913937,null],[1744913938,null],[1744913939,null],[1744913940,null],[1744913941,null],[1744913942,null],[1744913943,null],[1744913944,null]]);
  417. var responsetimepercentilesovertimeokPercentilesChart = new Highcharts.StockChart({
  418. chart: {
  419. renderTo: 'responsetimepercentilesovertimeokPercentilesContainer',
  420. zoomType: 'x',
  421. marginBottom: 60
  422. },
  423. colors: ['#c4fd90', '#7ff77f', '#6ff2ad', '#61ede6', '#58c7e0', '#4ea1d4', '#487ad9', '#3f52cc', '#7335dc', '#c73905', '#FFA900'],
  424. credits: { enabled: false },
  425. legend: {
  426. enabled: true,
  427. floating: true,
  428. y: -65,
  429. borderWidth: 0,
  430. itemStyle: { fontWeight: "normal" },
  431. symbolRadius: 0
  432. },
  433. title: { text: 'A title to let highcharts reserve the place for the title set later' },
  434. navigator: {
  435. maskInside: false,
  436. baseSeries: 9
  437. },
  438. rangeSelector: {
  439. rangeSelector: { align: "left" },
  440. buttonSpacing: 0,
  441. buttonTheme: {
  442. fill: '#CFC9C6',
  443. padding: 1,
  444. stroke: '#000000',
  445. 'stroke-width': 0.25,
  446. style: {
  447. color: '#000000',
  448. fontWeight: 'bold',
  449. },
  450. states: {
  451. stroke: '#92918C',
  452. 'stroke-width': 0.25,
  453. hover: {
  454. fill: '#92918C',
  455. style: { color: 'black' }
  456. },
  457. select: {
  458. fill: '#FFA900',
  459. style: { color: 'white' }
  460. }
  461. }
  462. },
  463. buttons : [
  464. {
  465. type : 'minute',
  466. count : 1,
  467. text : '1m'
  468. }, {
  469. type : 'minute',
  470. count : 10,
  471. text : '10m'
  472. }, {
  473. type : 'hour',
  474. count : 1,
  475. text : '1h'
  476. }, {
  477. type : 'all',
  478. count : 1,
  479. text : 'All'
  480. }
  481. ],
  482. selected : 3,
  483. inputEnabled : false
  484. },
  485. xAxis: {
  486. type: 'datetime',
  487. ordinal: false,
  488. maxZoom: 10000 // three days
  489. },
  490. yAxis:[
  491. {
  492. min: 0,
  493. title: { text: 'Response Time (ms)' },
  494. opposite: false
  495. }, {
  496. min: 0,
  497. title: {
  498. text: 'Active Users',
  499. style: { color: '#FFA900' }
  500. },
  501. opposite: true
  502. }
  503. ],
  504. plotOptions: {
  505. arearange: { lineWidth: 1 },
  506. series: {
  507. dataGrouping: { enabled: false }
  508. }
  509. },
  510. series: [
  511. {
  512. pointInterval: 1000,
  513. name: 'min',
  514. data: responsetimepercentilesovertimeokPercentiles[0],
  515. tooltip: { yDecimals: 0, ySuffix: 'ms' },
  516. type : 'area',
  517. yAxis: 0,
  518. zIndex: 10
  519. },
  520. {
  521. pointInterval: 1000,
  522. name: '25%',
  523. data: responsetimepercentilesovertimeokPercentiles[1],
  524. tooltip: { yDecimals: 0, ySuffix: 'ms' },
  525. type : 'area',
  526. yAxis: 0,
  527. zIndex: 9
  528. },
  529. {
  530. pointInterval: 1000,
  531. name: '50%',
  532. data: responsetimepercentilesovertimeokPercentiles[2],
  533. tooltip: { yDecimals: 0, ySuffix: 'ms' },
  534. type : 'area',
  535. yAxis: 0,
  536. zIndex: 8
  537. },
  538. {
  539. pointInterval: 1000,
  540. name: '75%',
  541. data: responsetimepercentilesovertimeokPercentiles[3],
  542. tooltip: { yDecimals: 0, ySuffix: 'ms' },
  543. type : 'area',
  544. yAxis: 0,
  545. zIndex: 7
  546. },
  547. {
  548. pointInterval: 1000,
  549. name: '80%',
  550. data: responsetimepercentilesovertimeokPercentiles[4],
  551. tooltip: { yDecimals: 0, ySuffix: 'ms' },
  552. type : 'area',
  553. yAxis: 0,
  554. zIndex: 6
  555. },
  556. {
  557. pointInterval: 1000,
  558. name: '85%',
  559. data: responsetimepercentilesovertimeokPercentiles[5],
  560. tooltip: { yDecimals: 0, ySuffix: 'ms' },
  561. type : 'area',
  562. yAxis: 0,
  563. zIndex: 5
  564. },
  565. {
  566. pointInterval: 1000,
  567. name: '90%',
  568. data: responsetimepercentilesovertimeokPercentiles[6],
  569. tooltip: { yDecimals: 0, ySuffix: 'ms' },
  570. type : 'area',
  571. yAxis: 0,
  572. zIndex: 4
  573. },
  574. {
  575. pointInterval: 1000,
  576. name: '95%',
  577. data: responsetimepercentilesovertimeokPercentiles[7],
  578. tooltip: { yDecimals: 0, ySuffix: 'ms' },
  579. type : 'area',
  580. yAxis: 0,
  581. zIndex: 3
  582. },
  583. {
  584. pointInterval: 1000,
  585. name: '99%',
  586. data: responsetimepercentilesovertimeokPercentiles[8],
  587. tooltip: { yDecimals: 0, ySuffix: 'ms' },
  588. type : 'area',
  589. yAxis: 0,
  590. zIndex: 2
  591. },
  592. {
  593. pointInterval: 1000,
  594. name: 'max',
  595. data: responsetimepercentilesovertimeokPercentiles[9],
  596. tooltip: { yDecimals: 0, ySuffix: 'ms' },
  597. type : 'area',
  598. yAxis: 0,
  599. zIndex: 1
  600. },
  601. allUsersData
  602. ]
  603. });
  604. responsetimepercentilesovertimeokPercentilesChart.setTitle({
  605. text: '<span class="chart_title chart_title_">Response Time Percentiles over Time (OK)</span>',
  606. useHTML: true
  607. });
  608. var requests = unpack([[1744913838,[776,776,0]],[1744913839,[2710,1764,946]],[1744913840,[4569,1654,2915]],[1744913841,[4142,416,3726]],[1744913842,[3425,157,3268]],[1744913843,[1952,76,1876]],[1744913844,[1771,51,1720]],[1744913845,[4395,32,4363]],[1744913846,[1030,14,1016]],[1744913847,[230,0,230]],[1744913848,[0,0,0]],[1744913849,[0,0,0]],[1744913850,[0,0,0]],[1744913851,[0,0,0]],[1744913852,[0,0,0]],[1744913853,[0,0,0]],[1744913854,[0,0,0]],[1744913855,[0,0,0]],[1744913856,[0,0,0]],[1744913857,[0,0,0]],[1744913858,[0,0,0]],[1744913859,[0,0,0]],[1744913860,[0,0,0]],[1744913861,[0,0,0]],[1744913862,[0,0,0]],[1744913863,[0,0,0]],[1744913864,[0,0,0]],[1744913865,[0,0,0]],[1744913866,[0,0,0]],[1744913867,[0,0,0]],[1744913868,[0,0,0]],[1744913869,[0,0,0]],[1744913870,[0,0,0]],[1744913871,[0,0,0]],[1744913872,[0,0,0]],[1744913873,[0,0,0]],[1744913874,[0,0,0]],[1744913875,[0,0,0]],[1744913876,[0,0,0]],[1744913877,[0,0,0]],[1744913878,[0,0,0]],[1744913879,[0,0,0]],[1744913880,[0,0,0]],[1744913881,[0,0,0]],[1744913882,[0,0,0]],[1744913883,[0,0,0]],[1744913884,[0,0,0]],[1744913885,[0,0,0]],[1744913886,[0,0,0]],[1744913887,[0,0,0]],[1744913888,[0,0,0]],[1744913889,[0,0,0]],[1744913890,[0,0,0]],[1744913891,[0,0,0]],[1744913892,[0,0,0]],[1744913893,[0,0,0]],[1744913894,[0,0,0]],[1744913895,[0,0,0]],[1744913896,[0,0,0]],[1744913897,[0,0,0]],[1744913898,[0,0,0]],[1744913899,[0,0,0]],[1744913900,[0,0,0]],[1744913901,[0,0,0]],[1744913902,[0,0,0]],[1744913903,[0,0,0]],[1744913904,[0,0,0]],[1744913905,[0,0,0]],[1744913906,[0,0,0]],[1744913907,[0,0,0]],[1744913908,[0,0,0]],[1744913909,[0,0,0]],[1744913910,[0,0,0]],[1744913911,[0,0,0]],[1744913912,[0,0,0]],[1744913913,[0,0,0]],[1744913914,[0,0,0]],[1744913915,[0,0,0]],[1744913916,[0,0,0]],[1744913917,[0,0,0]],[1744913918,[0,0,0]],[1744913919,[0,0,0]],[1744913920,[0,0,0]],[1744913921,[0,0,0]],[1744913922,[0,0,0]],[1744913923,[0,0,0]],[1744913924,[0,0,0]],[1744913925,[0,0,0]],[1744913926,[0,0,0]],[1744913927,[0,0,0]],[1744913928,[0,0,0]],[1744913929,[0,0,0]],[1744913930,[0,0,0]],[1744913931,[0,0,0]],[1744913932,[0,0,0]],[1744913933,[0,0,0]],[1744913934,[0,0,0]],[1744913935,[0,0,0]],[1744913936,[0,0,0]],[1744913937,[0,0,0]],[1744913938,[0,0,0]],[1744913939,[0,0,0]],[1744913940,[0,0,0]],[1744913941,[0,0,0]],[1744913942,[0,0,0]],[1744913943,[0,0,0]],[1744913944,[0,0,0]]]);
  609. var requestsChart = new Highcharts.StockChart({
  610. chart: {
  611. renderTo: 'requests',
  612. zoomType: 'x',
  613. marginBottom: 60
  614. },
  615. credits: { enabled: false },
  616. legend: {
  617. enabled: true,
  618. floating: true,
  619. y: -65,
  620. borderWidth: 0,
  621. itemStyle: { fontWeight: "normal" },
  622. symbolRadius: 0
  623. },
  624. title: { text: 'A title to let highcharts reserve the place for the title set later' },
  625. navigator: {
  626. maskInside: false
  627. },
  628. rangeSelector: {
  629. buttonSpacing: 0,
  630. buttonTheme: {
  631. fill: '#CFC9C6',
  632. padding: 1,
  633. stroke: '#000000',
  634. 'stroke-width': 0.25,
  635. style: {
  636. color: '#000000',
  637. fontWeight: 'bold',
  638. },
  639. states: {
  640. stroke: '#000000',
  641. 'stroke-width': 0.25,
  642. hover: {
  643. fill: '#92918C',
  644. style: { color: 'black' }
  645. },
  646. select: {
  647. fill: '#FFA900',
  648. style: { color: 'white' }
  649. }
  650. }
  651. },
  652. buttons : [
  653. {
  654. type : 'minute',
  655. count : 1,
  656. text : '1m'
  657. }, {
  658. type : 'minute',
  659. count : 10,
  660. text : '10m'
  661. }, {
  662. type : 'hour',
  663. count : 1,
  664. text : '1h'
  665. }, {
  666. type : 'all',
  667. count : 1,
  668. text : 'All'
  669. }
  670. ],
  671. selected : 3,
  672. inputEnabled : false
  673. },
  674. plotOptions: {
  675. series: {
  676. dataGrouping: { enabled: false }
  677. },
  678. area: {
  679. stacking: 'normal'
  680. }
  681. },
  682. xAxis: {
  683. type: 'datetime',
  684. ordinal: false,
  685. maxZoom: 10000 // three days
  686. },
  687. yAxis:[
  688. {
  689. min: 0,
  690. title: { text: 'Number of requests' },
  691. opposite: false,
  692. reversedStacks: false
  693. }, {
  694. min: 0,
  695. title: {
  696. text: 'Active Users',
  697. style: { color: '#FFA900' }
  698. },
  699. opposite: true
  700. }
  701. ],
  702. series: [
  703. {
  704. color: '#5E7BE2',
  705. name: 'All',
  706. data: requests[0],
  707. tooltip: { yDecimals: 0, ySuffix: '', valueDecimals: 0 }
  708. ,type: 'area'},
  709. allUsersData
  710. ]
  711. });
  712. requestsChart.setTitle({
  713. text: '<span class="chart_title">Number of requests per second</span>',
  714. useHTML: true
  715. });
  716. var responses = unpack([[1744913838,[0,0,0]],[1744913839,[2,2,0]],[1744913840,[75,75,0]],[1744913841,[175,175,0]],[1744913842,[0,0,0]],[1744913843,[83,83,0]],[1744913844,[0,0,0]],[1744913845,[38,38,0]],[1744913846,[210,210,0]],[1744913847,[389,145,244]],[1744913848,[2577,73,2504]],[1744913849,[2441,780,1661]],[1744913850,[3242,226,3016]],[1744913851,[870,321,549]],[1744913852,[2128,204,1924]],[1744913853,[1686,919,767]],[1744913854,[1150,567,583]],[1744913855,[287,32,255]],[1744913856,[22,22,0]],[1744913857,[64,64,0]],[1744913858,[106,65,41]],[1744913859,[492,59,433]],[1744913860,[130,53,77]],[1744913861,[580,56,524]],[1744913862,[404,44,360]],[1744913863,[126,49,77]],[1744913864,[430,57,373]],[1744913865,[386,51,335]],[1744913866,[55,52,3]],[1744913867,[42,33,9]],[1744913868,[80,24,56]],[1744913869,[50,17,33]],[1744913870,[90,46,44]],[1744913871,[377,25,352]],[1744913872,[533,25,508]],[1744913873,[122,40,82]],[1744913874,[507,41,466]],[1744913875,[763,33,730]],[1744913876,[24,22,2]],[1744913877,[65,65,0]],[1744913878,[59,30,29]],[1744913879,[45,26,19]],[1744913880,[26,17,9]],[1744913881,[663,20,643]],[1744913882,[1715,14,1701]],[1744913883,[411,10,401]],[1744913884,[507,11,496]],[1744913885,[743,3,740]],[1744913886,[7,5,2]],[1744913887,[3,2,1]],[1744913888,[6,2,4]],[1744913889,[2,1,1]],[1744913890,[2,1,1]],[1744913891,[2,1,1]],[1744913892,[1,0,1]],[1744913893,[0,0,0]],[1744913894,[1,0,1]],[1744913895,[0,0,0]],[1744913896,[1,1,0]],[1744913897,[1,1,0]],[1744913898,[1,1,0]],[1744913899,[0,0,0]],[1744913900,[1,1,0]],[1744913901,[1,0,1]],[1744913902,[0,0,0]],[1744913903,[0,0,0]],[1744913904,[1,0,1]],[1744913905,[0,0,0]],[1744913906,[0,0,0]],[1744913907,[0,0,0]],[1744913908,[0,0,0]],[1744913909,[0,0,0]],[1744913910,[0,0,0]],[1744913911,[0,0,0]],[1744913912,[0,0,0]],[1744913913,[0,0,0]],[1744913914,[0,0,0]],[1744913915,[0,0,0]],[1744913916,[0,0,0]],[1744913917,[0,0,0]],[1744913918,[0,0,0]],[1744913919,[0,0,0]],[1744913920,[0,0,0]],[1744913921,[0,0,0]],[1744913922,[0,0,0]],[1744913923,[0,0,0]],[1744913924,[0,0,0]],[1744913925,[0,0,0]],[1744913926,[0,0,0]],[1744913927,[0,0,0]],[1744913928,[0,0,0]],[1744913929,[0,0,0]],[1744913930,[0,0,0]],[1744913931,[0,0,0]],[1744913932,[0,0,0]],[1744913933,[0,0,0]],[1744913934,[0,0,0]],[1744913935,[0,0,0]],[1744913936,[0,0,0]],[1744913937,[0,0,0]],[1744913938,[0,0,0]],[1744913939,[0,0,0]],[1744913940,[0,0,0]],[1744913941,[0,0,0]],[1744913942,[0,0,0]],[1744913943,[0,0,0]],[1744913944,[0,0,0]]]);
  717. var requestsChart = new Highcharts.StockChart({
  718. chart: {
  719. renderTo: 'responses',
  720. zoomType: 'x',
  721. marginBottom: 60
  722. },
  723. credits: { enabled: false },
  724. legend: {
  725. enabled: true,
  726. floating: true,
  727. y: -65,
  728. borderWidth: 0,
  729. itemStyle: { fontWeight: "normal" },
  730. symbolRadius: 0
  731. },
  732. title: { text: 'A title to let highcharts reserve the place for the title set later' },
  733. navigator: {
  734. maskInside: false
  735. },
  736. rangeSelector: {
  737. buttonSpacing: 0,
  738. buttonTheme: {
  739. fill: '#CFC9C6',
  740. padding: 1,
  741. stroke: '#000000',
  742. 'stroke-width': 0.25,
  743. style: {
  744. color: '#000000',
  745. fontWeight: 'bold',
  746. },
  747. states: {
  748. stroke: '#000000',
  749. 'stroke-width': 0.25,
  750. hover: {
  751. fill: '#92918C',
  752. style: { color: 'black' }
  753. },
  754. select: {
  755. fill: '#FFA900',
  756. style: { color: 'white' }
  757. }
  758. }
  759. },
  760. buttons : [
  761. {
  762. type : 'minute',
  763. count : 1,
  764. text : '1m'
  765. }, {
  766. type : 'minute',
  767. count : 10,
  768. text : '10m'
  769. }, {
  770. type : 'hour',
  771. count : 1,
  772. text : '1h'
  773. }, {
  774. type : 'all',
  775. count : 1,
  776. text : 'All'
  777. }
  778. ],
  779. selected : 3,
  780. inputEnabled : false
  781. },
  782. plotOptions: {
  783. series: {
  784. dataGrouping: { enabled: false }
  785. },
  786. area: {
  787. stacking: 'normal'
  788. }
  789. },
  790. xAxis: {
  791. type: 'datetime',
  792. ordinal: false,
  793. maxZoom: 10000 // three days
  794. },
  795. yAxis:[
  796. {
  797. min: 0,
  798. title: { text: 'Number of responses' },
  799. opposite: false,
  800. reversedStacks: false
  801. }, {
  802. min: 0,
  803. title: {
  804. text: 'Active Users',
  805. style: { color: '#FFA900' }
  806. },
  807. opposite: true
  808. }
  809. ],
  810. series: [
  811. {
  812. color: '#5E7BE2',
  813. name: 'All',
  814. data: responses[0],
  815. tooltip: { yDecimals: 0, ySuffix: '', valueDecimals: 0 }
  816. },
  817. {
  818. color: '#68b65c',
  819. name: 'OK',
  820. data: responses[1],
  821. tooltip: { yDecimals: 0, ySuffix: '', valueDecimals: 0 }
  822. ,type: 'area'},
  823. {
  824. color: '#f15b4f',
  825. name: 'KO',
  826. data: responses[2],
  827. tooltip: { yDecimals: 0, ySuffix: '', valueDecimals: 0 }
  828. ,type: 'area'},
  829. allUsersData,
  830. {
  831. type: 'pie',
  832. name: 'Distribution',
  833. data: [
  834. {name: 'OK', y: 4940.0, color: '#68b65c'},{name: 'KO', y: 20060.0, color: '#f15b4f'}
  835. ],
  836. center: [775, -40],
  837. size: 70,
  838. showInLegend: false,
  839. dataLabels: { enabled: false },
  840. dataGrouping: { enabled: false }
  841. }
  842. ]
  843. });
  844. requestsChart.setTitle({
  845. text: '<span class="chart_title">Number of responses per second</span>',
  846. useHTML: true
  847. });
  848. var scatterChart = new Highcharts.Chart({
  849. chart: {
  850. renderTo: 'container_response_time_dispersion',
  851. defaultSeriesType: 'scatter',
  852. zoomType: 'xy',
  853. marginBottom: 90
  854. },
  855. credits: { enabled: false },
  856. xAxis: {
  857. title: {
  858. enabled: true,
  859. text: 'Global number of requests per second',
  860. style: { fontWeight: 'bold' }
  861. },
  862. startOnTick: true,
  863. endOnTick: true,
  864. showLastLabel: true,
  865. min: 0
  866. },
  867. title: { text: 'A title to let highcharts reserve the place for the title set later' },
  868. yAxis: {
  869. min: 0,
  870. title: { text: 'Response Time (ms)' }
  871. },
  872. tooltip: {
  873. formatter: function() {
  874. return ''+ this.y +' ms at ' + this.x + ' allreq/s';
  875. }
  876. },
  877. legend: {
  878. enabled: true,
  879. floating: true,
  880. y: 0,
  881. borderWidth: 0,
  882. itemStyle: { fontWeight: "normal" },
  883. },
  884. plotOptions: {
  885. scatter: {
  886. marker: {
  887. radius: 3,
  888. states: {
  889. hover: {
  890. enabled: true,
  891. lineColor: 'rgb(100,100,100)'
  892. }
  893. }
  894. },
  895. states: {
  896. hover: {
  897. marker: { enabled: false }
  898. }
  899. }
  900. }
  901. },
  902. series: [
  903. {
  904. type: 'scatter',
  905. color: '#68b65c',
  906. name: 'OK',
  907. data: [
  908. [776,10602],[1659,22675],[1771,36963],[2201,40581],[2710,21997],[3425,42073],[4505,34773],[4670,40528],[4797,31184]
  909. ]},
  910. {
  911. type: 'scatter',
  912. color: '#f15b4f',
  913. name: 'KO',
  914. data: [
  915. [667,1573],[1659,13257],[1771,40295],[2201,41651],[2710,42897],[3425,42869],[4505,17513],[4670,43337],[4797,43189]
  916. ]}
  917. ]
  918. });
  919. scatterChart.setTitle({
  920. text: '<span class="chart_title">Response Time against Global Throughput</span>',
  921. useHTML: true
  922. });
  923. });
  924. </script>
  925. </div>
  926. </body>
  927. </html>