Refactored chart JS code.

Made charts support resizing.

Author: heyman

locust/static/chart.js

@@ -0,0 +1,76 @@
+(function() {
+ class LocustLineChart {
+ constructor(container, title, unit) {
+ this.container = $(container);
+ this.title = title;
+ 
+ this.element = $('<div class="chart"></div>').css("width", "100%").appendTo(container);
+ this.data = [];
+ this.dates = [];
+ 
+ this.chart = echarts.init(this.element[0], 'vintage');
+ this.chart.setOption({
+ title: {
+ text: this.title,
+ x: 10,
+ y: 10,
+ },
+ tooltip: {
+ trigger: 'axis',
+ formatter: function (params) {
+ if (!!params && params.length > 0 && !!params[0].value) {
+ var param = params[0];
+ return param.name + ': ' + param.value + ' ' + unit;
+ } else {
+ return "No data";
+ }
+ },
+ axisPointer: {
+ animation: true
+ }
+ },
+ xAxis: {
+ type: 'category',
+ splitLine: {
+ show: false
+ },
+ data: this.dates,
+ },
+ yAxis: {
+ type: 'value',
+ boundaryGap: [0, '100%'],
+ splitLine: {
+ show: false
+ }
+ },
+ series: [{
+ name: 'RPS',
+ type: 'line',
+ showSymbol: true,
+ hoverAnimation: false,
+ data: this.data,
+ }],
+ grid: {x:60, y:70, x2:40, y2:40},
+ })
+ }
+ 
+ addValue(value) {
+ value = Math.round(value * 100) / 100;
+ this.dates.push(new Date().toLocaleTimeString());
+ this.data.push(value);
+ this.chart.setOption({
+ xAxis: {
+ data: this.dates,
+ },
+ series: [{
+ data: this.data,
+ }]
+ });
+ }
+ 
+ resize() {
+ this.chart.resize();
+ }
+ }
+ window.LocustLineChart = LocustLineChart;
+})();

locust/static/locust.js

@@ -38,7 +38,13 @@ $(".close_link").click(function(event) {
 
 var alternate = false;
 
-$("ul.tabs").tabs("div.panes > div");
+$("ul.tabs").tabs("div.panes > div").on("onClick", function(event) {
+ if (event.target == $(".chart-tab-link")[0]) {
+ // trigger resizing of charts
+ rpsChart.resize();
+ responseTimeChart.resize();
+ }
+});
 
 var stats_tpl = $('#stats-template');
 var errors_tpl = $('#errors-template');
@@ -108,174 +114,9 @@ $(".stats_label").click(function(event) {
  $('#errors tbody').jqoteapp(errors_tpl, (report.errors).sort(sortBy(sortAttribute, desc)));
 });
 
-
-var charts = {}
-
-function initChart(stat) {
- var width = $(".main").width();
- var rps_element = $('<div class="chart"></div>').css("width", width);
- var avt_element = $('<div class="chart"></div>').css("width", width);
- rps_element.appendTo("#charts .charts-container");
- avt_element.appendTo("#charts .charts-container");
-
- var date = [];
- var rps_data = [];
- var avt_data = [];
-
- now = new Date().toLocaleTimeString();
- date.push(now);
- rps_data.push({
- "name": now,
- "value": Math.round(stat.current_rps*100)/100
- });
-
- avt_data.push({
- "name": now,
- "value": Math.round(stat.avg_response_time)
- });
- 
- var gridSettings = {x:60, y:70, x2:40, y2:40};
-
- var rps_chart = echarts.init(rps_element.get(0), 'vintage');
- rps_chart.setOption({
- title: {
- text: 'Total Requests per Second',
- x: 10,
- y: 10,
- },
- tooltip: {
- trigger: 'axis',
- formatter: function (params) {
- param = params[0];
- return param.name + ': ' + param.value + ' reqs/s';
- },
- axisPointer: {
- animation: true
- }
- },
- xAxis: {
- type: 'category',
- splitLine: {
- show: false
- },
- data: date
- },
- yAxis: {
- type: 'value',
- boundaryGap: [0, '100%'],
- splitLine: {
- show: false
- }
- },
- series: [{
- name: 'RPS',
- type: 'line',
- showSymbol: false,
- hoverAnimation: false,
- data: rps_data
- }],
- grid: gridSettings,
- });
-
- var avt_chart = echarts.init(avt_element.get(0), 'vintage');
- avt_chart.setOption({
- title: {
- text: 'Average Response Time',
- x: 10,
- y: 10,
- },
- tooltip: {
- trigger: 'axis',
- formatter: function (params) {
- param = params[0];
- return param.name + ': ' + param.value + 'ms';
- },
- axisPointer: {
- animation: true
- }
- },
- xAxis: {
- type: 'category',
- splitLine: {
- show: false
- },
- data: date
- },
- yAxis: {
- type: 'value',
- boundaryGap: [0, '100%'],
- splitLine: {
- show: false
- }
- },
- series: [{
- name: 'AVT',
- type: 'line',
- showSymbol: false,
- hoverAnimation: false,
- data: avt_data
- }],
- grid: gridSettings,
- });
-
- charts[stat.name] = {};
- charts[stat.name]["date"] = date;
- charts[stat.name]["rps_chart"] = rps_chart;
- charts[stat.name]["rps_data"] = rps_data;
- charts[stat.name]["avt_chart"] = avt_chart;
- charts[stat.name]["avt_data"] = avt_data;
-
-}
-
-function updateCharts(stats) {
- var rps_chart, rps_data, now, date, avt_chart, avt_data;
- 
- $.each(stats, function(index, stat){
- if (stat.name != "Total") {
- // Only render charts for the total data
- return;
- }
- if (stat.name in charts) {
- now = new Date().toLocaleTimeString();
- date = charts[stat.name]["date"];
- date.push(now);
-
- rps_chart = charts[stat.name]["rps_chart"];
- rps_data = charts[stat.name]["rps_data"];
- rps_data.push({
- "name": now,
- "value": Math.round(stat.current_rps*100)/100
- });
- rps_chart.setOption({
- xAxis: {
- data: date
- },
- series: [{
- data: rps_data
- }]
- });
-
- avt_chart = charts[stat.name]["avt_chart"];
- avt_data = charts[stat.name]["avt_data"];
- avt_data.push({
- "name": now,
- "value": Math.round(stat.avg_response_time)
- });
-
- avt_chart.setOption({
- xAxis: {
- data: date
- },
- series: [{
- data: avt_data
- }]
- });
- } else {
- initChart(stat);
- }
- });
-}
-
+// init charts
+var rpsChart = new LocustLineChart($(".charts-container"), "Total Requests per Second", "reqs/s");
+var responseTimeChart = new LocustLineChart($(".charts-container"), "Average Response Time", "ms");
 
 function updateStats() {
  $.get('/stats/requests', function (data) {
@@ -302,7 +143,11 @@ function updateStats() {
  $('#errors tbody').jqoteapp(errors_tpl, (report.errors).sort(sortBy(sortAttribute, desc)));
 
  if (report.state !== "stopped"){
- updateCharts(sortedStats);
+ // get total stats row
+ var total = report.stats[report.stats.length-1];
+ // update charts
+ rpsChart.addValue(total.current_rps);
+ responseTimeChart.addValue(total.avg_response_time);
  }
 
  setTimeout(updateStats, 2000);

locust/templates/index.html

@@ -84,7 +84,7 @@ <h2>Change the locust count</h2>
  <div class="status" id="status">
  <ul class="tabs">
  <li><a href="#">Statistics</a></li>
- <li><a href="#">Charts</a></li>
+ <li><a href="#" class="chart-tab-link">Charts</a></li>
  <li><a href="#">Failures</a></li>
  <li><a href="#">Exceptions</a></li>
  <li><a href="#">Download Data</a></li>
@@ -230,6 +230,7 @@ <h1>Version</h1>
  <% alternate = !alternate; %>
  ]]>
  </script>
+ <script type="text/javascript" src="/static/chart.js"></script>
  <script type="text/javascript" src="/static/locust.js"></script>
 </body>
 </html>