req_gatling-png--306285301.html 37 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940
  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 - gatling.png</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">Request timeout to ecomm.gatling.io/18.164.246.48:443 after 60000 ms<span class="value" style="display:none">0</span></td>
  177. <td class="value error-col-2 total ko">76</td>
  178. <td class="value error-col-3 total ko">26.39%</td>
  179. </tr>
  180. <tr>
  181. <td class="error-col-1 total ko">Request timeout to ecomm.gatling.io/18.164.246.56:443 after 60000 ms<span class="value" style="display:none">1</span></td>
  182. <td class="value error-col-2 total ko">74</td>
  183. <td class="value error-col-3 total ko">25.69%</td>
  184. </tr>
  185. <tr>
  186. <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">2</span></td>
  187. <td class="value error-col-2 total ko">73</td>
  188. <td class="value error-col-3 total ko">25.35%</td>
  189. </tr>
  190. <tr>
  191. <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">3</span></td>
  192. <td class="value error-col-2 total ko">65</td>
  193. <td class="value error-col-3 total ko">22.57%</td>
  194. </tr>
  195. </tbody>
  196. </table>
  197. </div>
  198. <div class="schema geant">
  199. <div id="responsetimeDistributionContainer" class="geant"></div>
  200. </div>
  201. <div class="schema geant">
  202. <div id="responsetimepercentilesovertimeokPercentilesContainer" class="geant"></div>
  203. </div>
  204. <div class="schema geant">
  205. <div id="requests" class="geant"></div>
  206. </div>
  207. <div class="schema geant">
  208. <div id="responses" class="geant"></div>
  209. </div>
  210. <div class="schema geant">
  211. <div id="container_response_time_dispersion" class="geant"></div>
  212. </div>
  213. </div>
  214. </div>
  215. </div>
  216. </div>
  217. </div>
  218. </div>
  219. <script>
  220. var pageStats = stats.contents['req_gatling-png--306285301'].stats;
  221. $(document).ready(function() {
  222. $('.simulation-tooltip').popover({trigger:'hover', placement:'left'});
  223. setDetailsLinkUrl();
  224. setDetailsMenu();
  225. setActiveMenu();
  226. fillStats(pageStats);
  227. Highcharts.setOptions({
  228. global: { useUTC: false }
  229. });
  230. var rangesChart = new Highcharts.Chart({
  231. chart: {
  232. renderTo: 'ranges',
  233. marginRight: 100
  234. },
  235. credits: { enabled: false },
  236. legend: { enabled: false },
  237. title: { text: 'A title to let highcharts reserve the place for the title set later' },
  238. xAxis: {
  239. categories: [
  240. pageStats.group1.htmlName,
  241. pageStats.group2.htmlName,
  242. pageStats.group3.htmlName,
  243. pageStats.group4.htmlName
  244. ]
  245. },
  246. yAxis: {
  247. title: { text: 'Number of Requests' },
  248. reversedStacks: false
  249. },
  250. tooltip: {
  251. formatter: function() {
  252. var s;
  253. if (this.point.name) { // the pie chart
  254. s = ''+ this.point.name +': '+ this.y +'% requests';
  255. } else {
  256. s = ''+ this.y + ' requests';
  257. }
  258. return s;
  259. }
  260. },
  261. plotOptions: {
  262. series: {
  263. stacking: 'normal',
  264. shadow: true
  265. }
  266. },
  267. series: [
  268. {
  269. type: 'column',
  270. data: [{
  271. color: '#68b65c',
  272. y: pageStats.group1.count
  273. },
  274. {
  275. color: '#FFDD00',
  276. y: pageStats.group2.count
  277. },
  278. {
  279. color: '#FFA900',
  280. y: pageStats.group3.count
  281. },
  282. {
  283. color: '#f15b4f',
  284. y: pageStats.group4.count
  285. }]
  286. },
  287. {
  288. type: 'pie',
  289. name: 'Percentages',
  290. data: [
  291. {
  292. name: pageStats.group1.name,
  293. y: pageStats.group1.percentage,
  294. color: '#68b65c'
  295. },
  296. {
  297. name: pageStats.group2.name,
  298. y: pageStats.group2.percentage,
  299. color: '#FFDD00'
  300. },
  301. {
  302. name: pageStats.group3.name,
  303. y: pageStats.group3.percentage,
  304. color: '#FFA900'
  305. },
  306. {
  307. name: pageStats.group4.name,
  308. y: pageStats.group4.percentage,
  309. color: '#f15b4f'
  310. }
  311. ],
  312. center: [368, 0],
  313. size: 90,
  314. showInLegend: false,
  315. dataLabels: { enabled: false }
  316. }
  317. ]
  318. });
  319. rangesChart.setTitle({
  320. text: '<span class="chart_title">Response Time Ranges</span>',
  321. useHTML: true
  322. });
  323. $('#container_errors').sortable('#container_errors');
  324. var responsetimeDistributionChart = new Highcharts.Chart({
  325. chart: {
  326. renderTo: 'responsetimeDistributionContainer',
  327. type: 'column',
  328. marginBottom: 60
  329. },
  330. credits: { enabled: false },
  331. legend: {
  332. enabled: true,
  333. floating: true,
  334. y: 5,
  335. borderWidth: 0,
  336. itemStyle: { fontWeight: "normal" },
  337. symbolRadius: 0
  338. },
  339. title: { text: 'A title to let highcharts reserve the place for the title set later' },
  340. navigator: {
  341. maskInside: false
  342. },
  343. xAxis: {
  344. categories: ['315', '915', '1515', '2115', '2715', '3315', '3915', '4515', '5115', '5715', '6315', '6915', '7515', '8115', '8715', '9315', '9915', '10515', '11115', '11715', '12315', '12915', '13515', '14115', '14715', '15315', '15915', '16515', '17115', '17715', '18315', '18915', '19515', '20115', '20715', '21315', '21915', '22515', '23115', '23715', '24315', '24915', '25515', '26115', '26715', '27315', '27915', '28515', '29115', '29715', '30316', '30916', '31516', '32116', '32716', '33316', '33916', '34516', '35116', '35716', '36316', '36916', '37516', '38116', '38716', '39316', '39916', '40516', '41116', '41716', '42316', '42916', '43516', '44116', '44716', '45316', '45916', '46516', '47116', '47716', '48316', '48916', '49516', '50116', '50716', '51316', '51916', '52516', '53116', '53716', '54316', '54916', '55516', '56116', '56716', '57316', '57916', '58516', '59116', '59716'],
  345. tickInterval: 20
  346. },
  347. yAxis: {
  348. min: 0,
  349. title: { text: 'Percentage of Requests' },
  350. reversedStacks: false
  351. },
  352. tooltip: {
  353. formatter: function() {
  354. return '<b>'+ this.x +' ms</b><br/>'+
  355. this.series.name +': '+ this.y +' %<br/>'+
  356. 'Total: '+ this.point.stackTotal + ' %';
  357. }
  358. },
  359. plotOptions: {
  360. series: {
  361. groupPadding: 0,
  362. stacking: 'normal',
  363. shadow: true
  364. }
  365. },
  366. series: [
  367. {
  368. type: 'column',
  369. color: '#68b65c',
  370. name: 'OK',
  371. data: [
  372. 9.79,13.39,9.52,9.44,6.73,5.29,10.53,6.46,6.43,2.68,1.9,2.36,1.17,0.28,0.36,0.26,0.24,0.28,0.17,0.15,0.19,0.36,0.42,0.46,0.17,0.07,0.03,0.07,0.13,0.09,0.07,0.11,0.13,0.01,0.15,0.09,0.09,0.07,0.19,0.09,0.26,0.17,0.19,0.24,0.23,0.32,0.15,0.01,0.07,0.0,0.0,0.01,0.03,0.03,0.03,0.01,0.05,0.01,0.05,0.03,0.01,0.01,0.01,0.0,0.01,0.0,0.01,0.0,0.03,0.01,0.03,0.0,0.03,0.01,0.01,0.05,0.0,0.01,0.03,0.03,0.05,0.03,0.05,0.0,0.05,0.07,0.28,0.03,0.05,0.05,0.17,0.05,0.01,0.09,0.05,0.03,0.01,0.07,0.11,0.01
  373. ],
  374. tooltip: { yDecimals: 0, ySuffix: 'ms' }
  375. },
  376. {
  377. type: 'column',
  378. color: '#f15b4f',
  379. name: 'KO',
  380. data: [
  381. 0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,5.52
  382. ],
  383. tooltip: { yDecimals: 0, ySuffix: 'ms' }
  384. }
  385. ]
  386. });
  387. responsetimeDistributionChart.setTitle({
  388. text: '<span class="chart_title">Response Time Distribution</span>',
  389. useHTML: true
  390. });
  391. var responsetimepercentilesovertimeokPercentiles = unpack([[1744367146,null],[1744367147,null],[1744367148,[2257,2265,4683,4692,4694,4696,4698,4703,4703,4703]],[1744367149,null],[1744367150,[1845,1888,2195,2378,2448,2454,4598,4623,4627,4627]],[1744367151,[1452,3496,3940,4438,4476,4524,4565,4953,5116,5117]],[1744367152,[550,2376,3000,4499,4526,4546,4554,4569,4593,4596]],[1744367153,[564,4843,4862,4884,4893,4895,4898,4918,4926,4927]],[1744367154,[15,1047,1089,1479,1483,1501,1529,1536,3166,3168]],[1744367155,[56,986,1814,2617,2619,2619,2620,2620,2621,2621]],[1744367156,[78,2286,2579,5639,6007,6690,8445,24013,57611,59683]],[1744367157,[456,3810,4984,6917,8081,11194,18927,25734,49208,59265]],[1744367158,[188,2522,3673,4435,5079,6056,7406,22815,52769,58901]],[1744367159,[278,602,1168,2240,2421,3159,3493,4157,23238,23238]],[1744367160,[168,405,569,1097,1135,1904,1944,2051,2325,2325]],[1744367161,[277,346,429,764,802,898,1041,1120,1167,1167]],[1744367162,[139,283,322,975,1023,1192,1826,6505,6505,6505]],[1744367163,[164,445,837,1262,1400,1678,2066,4135,56978,59358]],[1744367164,[174,337,453,1095,1281,1897,2231,6789,52024,52024]],[1744367165,[104,711,1158,2132,2411,3450,7400,14394,51971,51971]],[1744367166,[415,717,1127,3652,7051,13656,15464,51688,56294,56294]],[1744367167,[446,848,1359,3627,6867,7432,14268,27858,58438,58438]],[1744367168,[445,1414,2509,7126,13761,14720,27521,54397,55985,55985]],[1744367169,[420,1101,1880,6961,13115,13898,14393,27060,52073,52073]],[1744367170,[291,731,1267,3364,3759,6697,7868,50945,58471,58471]],[1744367171,[302,700,1265,2098,2568,6720,7099,20495,54798,54798]],[1744367172,[414,1000,1667,3793,6700,7250,9659,13501,55092,55092]],[1744367173,[415,970,1733,3622,3897,4447,7001,7343,45173,45173]],[1744367174,[437,973,1881,4572,4928,7013,7602,9389,52027,52027]],[1744367175,[300,751,1690,3393,3571,3767,4093,52196,59320,59320]],[1744367176,[309,954,1796,2626,3439,3840,4782,7292,54132,54132]],[1744367177,[314,708,1092,1612,1755,2522,2764,4551,54314,54314]],[1744367178,[315,839,1170,2174,2293,2440,3737,13540,13551,13551]],[1744367179,[300,567,983,2043,2133,2850,3783,5043,7060,7060]],[1744367180,[309,461,687,1005,1266,1726,1822,1917,54139,54139]],[1744367181,[174,421,623,1210,1438,1593,1919,3486,3729,3729]],[1744367182,[190,436,633,966,1054,1472,2023,3861,7356,7356]],[1744367183,[176,429,612,1630,1741,1829,2009,4610,27150,27150]],[1744367184,[290,567,1023,3394,3431,6956,13192,54294,55981,55981]],[1744367185,[450,936,1112,2096,4428,6542,27241,51416,51690,51690]],[1744367186,[315,1104,1659,8123,8629,26558,27620,28999,51559,51559]],[1744367187,[306,590,1969,26401,26534,26831,27948,51669,53471,53471]],[1744367188,[550,1378,2135,7240,13074,25773,26913,27593,45196,45196]],[1744367189,[550,1375,2011,7130,26189,26615,27017,27097,27369,27369]],[1744367190,[428,979,2152,7593,14384,14472,26029,26119,27406,27406]],[1744367191,[581,860,1101,2039,3245,3822,22357,35952,35952,35952]],[1744367192,[313,586,2027,2615,2615,2789,2789,25911,25911,25911]],[1744367193,[952,1609,1931,22838,22838,22838,27474,27474,27474,27474]],[1744367194,[865,865,990,3964,3964,3964,3964,3964,3964,3964]],[1744367195,[8232,8232,8993,8993,8993,8993,8993,8993,8993,8993]],[1744367196,[2123,2123,2123,2123,2123,2123,2123,2123,2123,2123]],[1744367197,[691,1247,2296,7233,27232,27232,27232,27232,27232,27232]],[1744367198,[1511,1511,25584,25584,25584,25584,25584,25584,25584,25584]],[1744367199,null],[1744367200,[2994,2994,14273,14273,14273,14273,14273,14273,14273,14273]],[1744367201,[14721,14721,14721,14721,14721,14721,14721,14721,14721,14721]],[1744367202,null],[1744367203,[16145,16145,16145,16145,16145,16145,16145,16145,16145,16145]],[1744367204,null],[1744367205,null],[1744367206,null],[1744367207,null],[1744367208,[2066,2066,2066,2066,2066,2066,2066,2066,2066,2066]],[1744367209,[4099,4099,4099,4099,4099,4099,4099,4099,4099,4099]],[1744367210,null],[1744367211,null],[1744367212,null],[1744367213,null],[1744367214,null],[1744367215,null],[1744367216,null],[1744367217,null],[1744367218,null],[1744367219,null],[1744367220,null],[1744367221,null],[1744367222,null],[1744367223,null],[1744367224,null],[1744367225,null],[1744367226,null],[1744367227,null],[1744367228,null],[1744367229,null],[1744367230,null],[1744367231,null],[1744367232,null],[1744367233,null],[1744367234,null],[1744367235,null],[1744367236,null],[1744367237,null],[1744367238,null],[1744367239,null],[1744367240,null],[1744367241,null],[1744367242,null],[1744367243,null],[1744367244,null],[1744367245,null]]);
  392. var responsetimepercentilesovertimeokPercentilesChart = new Highcharts.StockChart({
  393. chart: {
  394. renderTo: 'responsetimepercentilesovertimeokPercentilesContainer',
  395. zoomType: 'x',
  396. marginBottom: 60
  397. },
  398. colors: ['#c4fd90', '#7ff77f', '#6ff2ad', '#61ede6', '#58c7e0', '#4ea1d4', '#487ad9', '#3f52cc', '#7335dc', '#c73905', '#FFA900'],
  399. credits: { enabled: false },
  400. legend: {
  401. enabled: true,
  402. floating: true,
  403. y: -65,
  404. borderWidth: 0,
  405. itemStyle: { fontWeight: "normal" },
  406. symbolRadius: 0
  407. },
  408. title: { text: 'A title to let highcharts reserve the place for the title set later' },
  409. navigator: {
  410. maskInside: false,
  411. baseSeries: 9
  412. },
  413. rangeSelector: {
  414. rangeSelector: { align: "left" },
  415. buttonSpacing: 0,
  416. buttonTheme: {
  417. fill: '#CFC9C6',
  418. padding: 1,
  419. stroke: '#000000',
  420. 'stroke-width': 0.25,
  421. style: {
  422. color: '#000000',
  423. fontWeight: 'bold',
  424. },
  425. states: {
  426. stroke: '#92918C',
  427. 'stroke-width': 0.25,
  428. hover: {
  429. fill: '#92918C',
  430. style: { color: 'black' }
  431. },
  432. select: {
  433. fill: '#FFA900',
  434. style: { color: 'white' }
  435. }
  436. }
  437. },
  438. buttons : [
  439. {
  440. type : 'minute',
  441. count : 1,
  442. text : '1m'
  443. }, {
  444. type : 'minute',
  445. count : 10,
  446. text : '10m'
  447. }, {
  448. type : 'hour',
  449. count : 1,
  450. text : '1h'
  451. }, {
  452. type : 'all',
  453. count : 1,
  454. text : 'All'
  455. }
  456. ],
  457. selected : 3,
  458. inputEnabled : false
  459. },
  460. xAxis: {
  461. type: 'datetime',
  462. ordinal: false,
  463. maxZoom: 10000 // three days
  464. },
  465. yAxis:[
  466. {
  467. min: 0,
  468. title: { text: 'Response Time (ms)' },
  469. opposite: false
  470. }, {
  471. min: 0,
  472. title: {
  473. text: 'Active Users',
  474. style: { color: '#FFA900' }
  475. },
  476. opposite: true
  477. }
  478. ],
  479. plotOptions: {
  480. arearange: { lineWidth: 1 },
  481. series: {
  482. dataGrouping: { enabled: false }
  483. }
  484. },
  485. series: [
  486. {
  487. pointInterval: 1000,
  488. name: 'min',
  489. data: responsetimepercentilesovertimeokPercentiles[0],
  490. tooltip: { yDecimals: 0, ySuffix: 'ms' },
  491. type : 'area',
  492. yAxis: 0,
  493. zIndex: 10
  494. },
  495. {
  496. pointInterval: 1000,
  497. name: '25%',
  498. data: responsetimepercentilesovertimeokPercentiles[1],
  499. tooltip: { yDecimals: 0, ySuffix: 'ms' },
  500. type : 'area',
  501. yAxis: 0,
  502. zIndex: 9
  503. },
  504. {
  505. pointInterval: 1000,
  506. name: '50%',
  507. data: responsetimepercentilesovertimeokPercentiles[2],
  508. tooltip: { yDecimals: 0, ySuffix: 'ms' },
  509. type : 'area',
  510. yAxis: 0,
  511. zIndex: 8
  512. },
  513. {
  514. pointInterval: 1000,
  515. name: '75%',
  516. data: responsetimepercentilesovertimeokPercentiles[3],
  517. tooltip: { yDecimals: 0, ySuffix: 'ms' },
  518. type : 'area',
  519. yAxis: 0,
  520. zIndex: 7
  521. },
  522. {
  523. pointInterval: 1000,
  524. name: '80%',
  525. data: responsetimepercentilesovertimeokPercentiles[4],
  526. tooltip: { yDecimals: 0, ySuffix: 'ms' },
  527. type : 'area',
  528. yAxis: 0,
  529. zIndex: 6
  530. },
  531. {
  532. pointInterval: 1000,
  533. name: '85%',
  534. data: responsetimepercentilesovertimeokPercentiles[5],
  535. tooltip: { yDecimals: 0, ySuffix: 'ms' },
  536. type : 'area',
  537. yAxis: 0,
  538. zIndex: 5
  539. },
  540. {
  541. pointInterval: 1000,
  542. name: '90%',
  543. data: responsetimepercentilesovertimeokPercentiles[6],
  544. tooltip: { yDecimals: 0, ySuffix: 'ms' },
  545. type : 'area',
  546. yAxis: 0,
  547. zIndex: 4
  548. },
  549. {
  550. pointInterval: 1000,
  551. name: '95%',
  552. data: responsetimepercentilesovertimeokPercentiles[7],
  553. tooltip: { yDecimals: 0, ySuffix: 'ms' },
  554. type : 'area',
  555. yAxis: 0,
  556. zIndex: 3
  557. },
  558. {
  559. pointInterval: 1000,
  560. name: '99%',
  561. data: responsetimepercentilesovertimeokPercentiles[8],
  562. tooltip: { yDecimals: 0, ySuffix: 'ms' },
  563. type : 'area',
  564. yAxis: 0,
  565. zIndex: 2
  566. },
  567. {
  568. pointInterval: 1000,
  569. name: 'max',
  570. data: responsetimepercentilesovertimeokPercentiles[9],
  571. tooltip: { yDecimals: 0, ySuffix: 'ms' },
  572. type : 'area',
  573. yAxis: 0,
  574. zIndex: 1
  575. },
  576. allUsersData
  577. ]
  578. });
  579. responsetimepercentilesovertimeokPercentilesChart.setTitle({
  580. text: '<span class="chart_title chart_title_">Response Time Percentiles over Time (OK)</span>',
  581. useHTML: true
  582. });
  583. var requests = unpack([[1744367146,[0,0,0]],[1744367147,[0,0,0]],[1744367148,[18,18,0]],[1744367149,[0,0,0]],[1744367150,[74,74,0]],[1744367151,[295,295,0]],[1744367152,[247,247,0]],[1744367153,[140,140,0]],[1744367154,[238,238,0]],[1744367155,[113,113,0]],[1744367156,[555,500,55]],[1744367157,[1027,877,150]],[1744367158,[829,750,79]],[1744367159,[74,73,1]],[1744367160,[24,24,0]],[1744367161,[21,21,0]],[1744367162,[17,17,0]],[1744367163,[173,173,0]],[1744367164,[86,86,0]],[1744367165,[82,82,0]],[1744367166,[38,37,1]],[1744367167,[38,38,0]],[1744367168,[57,57,0]],[1744367169,[65,65,0]],[1744367170,[69,69,0]],[1744367171,[72,71,1]],[1744367172,[81,81,0]],[1744367173,[63,62,1]],[1744367174,[56,56,0]],[1744367175,[56,56,0]],[1744367176,[52,52,0]],[1744367177,[46,46,0]],[1744367178,[37,37,0]],[1744367179,[36,36,0]],[1744367180,[36,36,0]],[1744367181,[49,49,0]],[1744367182,[38,38,0]],[1744367183,[52,52,0]],[1744367184,[36,36,0]],[1744367185,[29,29,0]],[1744367186,[22,22,0]],[1744367187,[28,28,0]],[1744367188,[32,32,0]],[1744367189,[26,26,0]],[1744367190,[25,25,0]],[1744367191,[18,18,0]],[1744367192,[12,12,0]],[1744367193,[8,8,0]],[1744367194,[3,3,0]],[1744367195,[2,2,0]],[1744367196,[1,1,0]],[1744367197,[5,5,0]],[1744367198,[2,2,0]],[1744367199,[0,0,0]],[1744367200,[2,2,0]],[1744367201,[1,1,0]],[1744367202,[0,0,0]],[1744367203,[1,1,0]],[1744367204,[0,0,0]],[1744367205,[0,0,0]],[1744367206,[0,0,0]],[1744367207,[0,0,0]],[1744367208,[1,1,0]],[1744367209,[1,1,0]],[1744367210,[0,0,0]],[1744367211,[0,0,0]],[1744367212,[0,0,0]],[1744367213,[0,0,0]],[1744367214,[0,0,0]],[1744367215,[0,0,0]],[1744367216,[0,0,0]],[1744367217,[0,0,0]],[1744367218,[0,0,0]],[1744367219,[0,0,0]],[1744367220,[0,0,0]],[1744367221,[0,0,0]],[1744367222,[0,0,0]],[1744367223,[0,0,0]],[1744367224,[0,0,0]],[1744367225,[0,0,0]],[1744367226,[0,0,0]],[1744367227,[0,0,0]],[1744367228,[0,0,0]],[1744367229,[0,0,0]],[1744367230,[0,0,0]],[1744367231,[0,0,0]],[1744367232,[0,0,0]],[1744367233,[0,0,0]],[1744367234,[0,0,0]],[1744367235,[0,0,0]],[1744367236,[0,0,0]],[1744367237,[0,0,0]],[1744367238,[0,0,0]],[1744367239,[0,0,0]],[1744367240,[0,0,0]],[1744367241,[0,0,0]],[1744367242,[0,0,0]],[1744367243,[0,0,0]],[1744367244,[0,0,0]],[1744367245,[0,0,0]]]);
  584. var requestsChart = new Highcharts.StockChart({
  585. chart: {
  586. renderTo: 'requests',
  587. zoomType: 'x',
  588. marginBottom: 60
  589. },
  590. credits: { enabled: false },
  591. legend: {
  592. enabled: true,
  593. floating: true,
  594. y: -65,
  595. borderWidth: 0,
  596. itemStyle: { fontWeight: "normal" },
  597. symbolRadius: 0
  598. },
  599. title: { text: 'A title to let highcharts reserve the place for the title set later' },
  600. navigator: {
  601. maskInside: false
  602. },
  603. rangeSelector: {
  604. buttonSpacing: 0,
  605. buttonTheme: {
  606. fill: '#CFC9C6',
  607. padding: 1,
  608. stroke: '#000000',
  609. 'stroke-width': 0.25,
  610. style: {
  611. color: '#000000',
  612. fontWeight: 'bold',
  613. },
  614. states: {
  615. stroke: '#000000',
  616. 'stroke-width': 0.25,
  617. hover: {
  618. fill: '#92918C',
  619. style: { color: 'black' }
  620. },
  621. select: {
  622. fill: '#FFA900',
  623. style: { color: 'white' }
  624. }
  625. }
  626. },
  627. buttons : [
  628. {
  629. type : 'minute',
  630. count : 1,
  631. text : '1m'
  632. }, {
  633. type : 'minute',
  634. count : 10,
  635. text : '10m'
  636. }, {
  637. type : 'hour',
  638. count : 1,
  639. text : '1h'
  640. }, {
  641. type : 'all',
  642. count : 1,
  643. text : 'All'
  644. }
  645. ],
  646. selected : 3,
  647. inputEnabled : false
  648. },
  649. plotOptions: {
  650. series: {
  651. dataGrouping: { enabled: false }
  652. },
  653. area: {
  654. stacking: 'normal'
  655. }
  656. },
  657. xAxis: {
  658. type: 'datetime',
  659. ordinal: false,
  660. maxZoom: 10000 // three days
  661. },
  662. yAxis:[
  663. {
  664. min: 0,
  665. title: { text: 'Number of requests' },
  666. opposite: false,
  667. reversedStacks: false
  668. }, {
  669. min: 0,
  670. title: {
  671. text: 'Active Users',
  672. style: { color: '#FFA900' }
  673. },
  674. opposite: true
  675. }
  676. ],
  677. series: [
  678. {
  679. color: '#5E7BE2',
  680. name: 'All',
  681. data: requests[0],
  682. tooltip: { yDecimals: 0, ySuffix: '', valueDecimals: 0 }
  683. ,type: 'area'},
  684. allUsersData
  685. ]
  686. });
  687. requestsChart.setTitle({
  688. text: '<span class="chart_title">Number of requests per second</span>',
  689. useHTML: true
  690. });
  691. var responses = unpack([[1744367146,[0,0,0]],[1744367147,[0,0,0]],[1744367148,[0,0,0]],[1744367149,[0,0,0]],[1744367150,[0,0,0]],[1744367151,[8,8,0]],[1744367152,[135,135,0]],[1744367153,[28,28,0]],[1744367154,[100,100,0]],[1744367155,[356,356,0]],[1744367156,[300,300,0]],[1744367157,[163,163,0]],[1744367158,[326,326,0]],[1744367159,[96,96,0]],[1744367160,[285,285,0]],[1744367161,[450,450,0]],[1744367162,[502,502,0]],[1744367163,[229,229,0]],[1744367164,[254,254,0]],[1744367165,[112,112,0]],[1744367166,[61,61,0]],[1744367167,[64,64,0]],[1744367168,[47,47,0]],[1744367169,[44,44,0]],[1744367170,[57,57,0]],[1744367171,[74,74,0]],[1744367172,[77,77,0]],[1744367173,[68,68,0]],[1744367174,[55,55,0]],[1744367175,[57,57,0]],[1744367176,[56,56,0]],[1744367177,[67,67,0]],[1744367178,[71,71,0]],[1744367179,[71,71,0]],[1744367180,[54,54,0]],[1744367181,[66,66,0]],[1744367182,[70,70,0]],[1744367183,[83,83,0]],[1744367184,[42,42,0]],[1744367185,[30,30,0]],[1744367186,[29,29,0]],[1744367187,[23,23,0]],[1744367188,[20,20,0]],[1744367189,[19,19,0]],[1744367190,[28,28,0]],[1744367191,[18,18,0]],[1744367192,[31,31,0]],[1744367193,[8,8,0]],[1744367194,[17,17,0]],[1744367195,[15,15,0]],[1744367196,[9,9,0]],[1744367197,[5,5,0]],[1744367198,[4,4,0]],[1744367199,[4,4,0]],[1744367200,[5,5,0]],[1744367201,[1,1,0]],[1744367202,[5,5,0]],[1744367203,[3,3,0]],[1744367204,[5,5,0]],[1744367205,[5,5,0]],[1744367206,[5,5,0]],[1744367207,[0,0,0]],[1744367208,[2,2,0]],[1744367209,[2,2,0]],[1744367210,[5,5,0]],[1744367211,[0,0,0]],[1744367212,[4,4,0]],[1744367213,[5,5,0]],[1744367214,[8,8,0]],[1744367215,[9,9,0]],[1744367216,[70,15,55]],[1744367217,[156,6,150]],[1744367218,[82,3,79]],[1744367219,[4,3,1]],[1744367220,[2,2,0]],[1744367221,[5,5,0]],[1744367222,[4,4,0]],[1744367223,[2,2,0]],[1744367224,[2,2,0]],[1744367225,[6,6,0]],[1744367226,[2,1,1]],[1744367227,[5,5,0]],[1744367228,[0,0,0]],[1744367229,[2,2,0]],[1744367230,[1,1,0]],[1744367231,[1,0,1]],[1744367232,[1,1,0]],[1744367233,[2,1,1]],[1744367234,[1,1,0]],[1744367235,[1,1,0]],[1744367236,[0,0,0]],[1744367237,[3,3,0]],[1744367238,[2,2,0]],[1744367239,[1,1,0]],[1744367240,[2,2,0]],[1744367241,[0,0,0]],[1744367242,[0,0,0]],[1744367243,[0,0,0]],[1744367244,[0,0,0]],[1744367245,[0,0,0]]]);
  692. var requestsChart = new Highcharts.StockChart({
  693. chart: {
  694. renderTo: 'responses',
  695. zoomType: 'x',
  696. marginBottom: 60
  697. },
  698. credits: { enabled: false },
  699. legend: {
  700. enabled: true,
  701. floating: true,
  702. y: -65,
  703. borderWidth: 0,
  704. itemStyle: { fontWeight: "normal" },
  705. symbolRadius: 0
  706. },
  707. title: { text: 'A title to let highcharts reserve the place for the title set later' },
  708. navigator: {
  709. maskInside: false
  710. },
  711. rangeSelector: {
  712. buttonSpacing: 0,
  713. buttonTheme: {
  714. fill: '#CFC9C6',
  715. padding: 1,
  716. stroke: '#000000',
  717. 'stroke-width': 0.25,
  718. style: {
  719. color: '#000000',
  720. fontWeight: 'bold',
  721. },
  722. states: {
  723. stroke: '#000000',
  724. 'stroke-width': 0.25,
  725. hover: {
  726. fill: '#92918C',
  727. style: { color: 'black' }
  728. },
  729. select: {
  730. fill: '#FFA900',
  731. style: { color: 'white' }
  732. }
  733. }
  734. },
  735. buttons : [
  736. {
  737. type : 'minute',
  738. count : 1,
  739. text : '1m'
  740. }, {
  741. type : 'minute',
  742. count : 10,
  743. text : '10m'
  744. }, {
  745. type : 'hour',
  746. count : 1,
  747. text : '1h'
  748. }, {
  749. type : 'all',
  750. count : 1,
  751. text : 'All'
  752. }
  753. ],
  754. selected : 3,
  755. inputEnabled : false
  756. },
  757. plotOptions: {
  758. series: {
  759. dataGrouping: { enabled: false }
  760. },
  761. area: {
  762. stacking: 'normal'
  763. }
  764. },
  765. xAxis: {
  766. type: 'datetime',
  767. ordinal: false,
  768. maxZoom: 10000 // three days
  769. },
  770. yAxis:[
  771. {
  772. min: 0,
  773. title: { text: 'Number of responses' },
  774. opposite: false,
  775. reversedStacks: false
  776. }, {
  777. min: 0,
  778. title: {
  779. text: 'Active Users',
  780. style: { color: '#FFA900' }
  781. },
  782. opposite: true
  783. }
  784. ],
  785. series: [
  786. {
  787. color: '#5E7BE2',
  788. name: 'All',
  789. data: responses[0],
  790. tooltip: { yDecimals: 0, ySuffix: '', valueDecimals: 0 }
  791. },
  792. {
  793. color: '#68b65c',
  794. name: 'OK',
  795. data: responses[1],
  796. tooltip: { yDecimals: 0, ySuffix: '', valueDecimals: 0 }
  797. ,type: 'area'},
  798. {
  799. color: '#f15b4f',
  800. name: 'KO',
  801. data: responses[2],
  802. tooltip: { yDecimals: 0, ySuffix: '', valueDecimals: 0 }
  803. ,type: 'area'},
  804. allUsersData,
  805. {
  806. type: 'pie',
  807. name: 'Distribution',
  808. data: [
  809. {name: 'OK', y: 4921.0, color: '#68b65c'},{name: 'KO', y: 288.0, color: '#f15b4f'}
  810. ],
  811. center: [775, -40],
  812. size: 70,
  813. showInLegend: false,
  814. dataLabels: { enabled: false },
  815. dataGrouping: { enabled: false }
  816. }
  817. ]
  818. });
  819. requestsChart.setTitle({
  820. text: '<span class="chart_title">Number of responses per second</span>',
  821. useHTML: true
  822. });
  823. var scatterChart = new Highcharts.Chart({
  824. chart: {
  825. renderTo: 'container_response_time_dispersion',
  826. defaultSeriesType: 'scatter',
  827. zoomType: 'xy',
  828. marginBottom: 90
  829. },
  830. credits: { enabled: false },
  831. xAxis: {
  832. title: {
  833. enabled: true,
  834. text: 'Global number of requests per second',
  835. style: { fontWeight: 'bold' }
  836. },
  837. startOnTick: true,
  838. endOnTick: true,
  839. showLastLabel: true,
  840. min: 0
  841. },
  842. title: { text: 'A title to let highcharts reserve the place for the title set later' },
  843. yAxis: {
  844. min: 0,
  845. title: { text: 'Response Time (ms)' }
  846. },
  847. tooltip: {
  848. formatter: function() {
  849. return ''+ this.y +' ms at ' + this.x + ' allreq/s';
  850. }
  851. },
  852. legend: {
  853. enabled: true,
  854. floating: true,
  855. y: 0,
  856. borderWidth: 0,
  857. itemStyle: { fontWeight: "normal" },
  858. },
  859. plotOptions: {
  860. scatter: {
  861. marker: {
  862. radius: 3,
  863. states: {
  864. hover: {
  865. enabled: true,
  866. lineColor: 'rgb(100,100,100)'
  867. }
  868. }
  869. },
  870. states: {
  871. hover: {
  872. marker: { enabled: false }
  873. }
  874. }
  875. }
  876. },
  877. series: [
  878. {
  879. type: 'scatter',
  880. color: '#68b65c',
  881. name: 'OK',
  882. data: [
  883. [3,2123],[3,14721],[3,16145],[3,2066],[3,4099],[6,8993],[6,25584],[6,14273],[9,3964],[15,27232],[24,27474],[36,25911],[51,6505],[54,35952],[63,1120],[66,28999],[72,2051],[75,26119],[78,27097],[84,51669],[87,51416],[96,27593],[108,5043],[108,1917],[108,54294],[111,13540],[114,51688],[114,27858],[114,3861],[138,4551],[147,3486],[156,7292],[156,4610],[168,9389],[168,52196],[171,54397],[189,7343],[195,27060],[207,50945],[216,20495],[222,4157],[243,13501],[246,14394],[258,6789],[339,2620],[519,4135],[714,1536],[1547,4918],[1665,24013],[2488,22815],[3005,4623],[3080,25734],[3388,4703],[4129,4569],[5224,4953]
  884. ]},
  885. {
  886. type: 'scatter',
  887. color: '#f15b4f',
  888. name: 'KO',
  889. data: [
  890. [114,60003],[189,60016],[216,60005],[222,60004],[1665,60007],[2488,60006],[3080,60011]
  891. ]}
  892. ]
  893. });
  894. scatterChart.setTitle({
  895. text: '<span class="chart_title">Response Time against Global Throughput</span>',
  896. useHTML: true
  897. });
  898. });
  899. </script>
  900. </div>
  901. </body>
  902. </html>