<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container1"></div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div id="container2"></div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div id="container3"></div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div id="container4" style="min-width: 310px; height: 500px; margin: 0 auto"></div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div id="container5" style="min-width: 310px; height: 500px; margin: 0 auto"></div>
<script type="text/javascript">
$(function() {
Highcharts.chart('container1', {
chart: {
type: 'column'
},
title: {
text: ''
},
xAxis: {
categories: [
'1 user',
'5 users',
'10 users',
'25 users',
'50 users'
],
crosshair: true
},
yAxis: {
min: 5,
tickInterval: 2,
max:31,
labels: {
enabled: true,
formatter: function() { return this.value},
},
title: {
text: 'Throughput (TR): Requests handled per second'
}
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
format: '{point.y:.2f}', // one decimal
y: 10, // 10 pixels down from the top
style: {
fontSize: '8px',
fontFamily: 'Verdana, sans-serif'
}
}
}
},
legend: {
align: 'center',
verticalAlign: 'bottom',
x: 0,
y: 0
},
tooltip: {
shared: true
},
series: [{
name: 'NO',
data: [8.37, 22.28, 28.84, 30.42, 30.45],
color: '#C9C9C9'
}, {
name: 'DEV',
data: [9.13, 22.73, 29.21, 30.49, 30.5],
color: '#787878'
}, {
name: 'AP',
data: [9.15, 22.9, 29.35, 30.57, 30.59],
color: '#000000'
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
Highcharts.chart('container2', {
chart: {
type: 'column'
},
title: {
text: ''
},
xAxis: {
categories: [
'1 user',
'5 users',
'10 users',
'25 users',
'50 users'
],
crosshair: true
},
yAxis: {
min: 5,
tickInterval: 1,
max:14,
labels: {
enabled: true,
formatter: function() { return this.value},
},
title: {
text: 'Throughput (TR): Requests handled per second'
}
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
format: '{point.y:.2f}', // one decimal
y: 10, // 10 pixels down from the top
style: {
fontSize: '8px',
fontFamily: 'Verdana, sans-serif'
}
}
}
},
legend: {
align: 'center',
verticalAlign: 'bottom',
x: 0,
y: 0
},
tooltip: {
shared: true
},
series: [{
name: 'NO',
data: [7.06, 7.68, 8.38, 10.41, 12.21],
color: '#C9C9C9'
}, {
name: 'DEV',
data: [7.25, 8.47, 8.90, 10.75, 12.92],
color: '#787878'
}, {
name: 'AP',
data: [7.39, 9.01, 9.11, 10.93, 13.39],
color: '#000000'
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
Highcharts.chart('container3', {
chart: {
type: 'column'
},
title: {
text: ''
},
xAxis: {
categories: [
'1 user',
'5 users',
'10 users',
'25 users',
'50 users'
],
crosshair: true
},
yAxis: {
min: 1,
tickInterval: 1,
max:31,
labels: {
enabled: true,
formatter: function() { return this.value},
},
title: {
text: 'Throughput (TR): Requests handled per second'
}
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
format: '{point.y:.2f}', // one decimal
y: 10, // 10 pixels down from the top
style: {
fontSize: '8px',
fontFamily: 'Verdana, sans-serif'
}
}
}
},
legend: {
align: 'center',
verticalAlign: 'bottom',
x: 0,
y: 0
},
tooltip: {
shared: true
},
series: [{
name: 'NO',
data: [4.65, 15.92, 22.20, 26.61, 28.15],
color: '#C9C9C9'
}, {
name: 'DEV',
data: [4.86, 16.25, 23.64, 27.34, 29.32],
color: '#787878'
}, {
name: 'AP',
data: [5.09, 16.96, 24.56, 28.02, 30.69],
color: '#000000'
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
});
</script>