345 lines
7.3 KiB
HTML
345 lines
7.3 KiB
HTML
<p>Here is the sorted list of payoffs in round {{ subsession.round_number }}</p>
|
|
|
|
<ul>
|
|
{{ for payoff in payoffs }}
|
|
<li>{{ payoff }}</li>
|
|
{{ endfor }}
|
|
</ul>
|
|
|
|
|
|
<script src="https://code.highcharts.com/highcharts.js"></script>
|
|
<script src="https://code.highcharts.com/modules/histogram-bellcurve.js"></script>
|
|
<script src="https://code.highcharts.com/modules/exporting.js"></script>
|
|
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
|
|
|
|
<figure class="highcharts-figure">
|
|
<div id="container">
|
|
</div>
|
|
<p class="highcharts-description">
|
|
Chart showing players' offers.
|
|
</p>
|
|
</figure>
|
|
<script>
|
|
|
|
|
|
|
|
var offers_list = {{ all_offers|json }};
|
|
console.log(offers_list)
|
|
// let data = offers_list
|
|
// console.log(data)
|
|
// console.log(typeof(js_vars.taken))
|
|
//
|
|
// let data = [15, 15, 15, 15, 15, 30, 45, 20, 10, 50, 50, 35, 25, 30, 45, 20, 10, 50, 50, 35, 25, 33, 22, 10, 5, 15, 0, 0, 1, 2, 5, 5, 4, 4, 7, 15, 20, 15];
|
|
|
|
// Highcharts.chart('container', {
|
|
// title: {
|
|
// text: 'Highcharts Histogram'
|
|
// },
|
|
//
|
|
// xAxis: [{
|
|
// title: { text: 'Number of offer' },
|
|
// alignTicks: false
|
|
// }, {
|
|
// title: { text: 'Offer value' },
|
|
// alignTicks: false,
|
|
// opposite: true
|
|
// }],
|
|
//
|
|
// yAxis: [{
|
|
// title: { text: 'Offer value' }
|
|
// }, {
|
|
// title: { text: 'Histogram' },
|
|
// opposite: true
|
|
// }],
|
|
//
|
|
// plotOptions: {
|
|
// histogram: {
|
|
// accessibility: {
|
|
// point: {
|
|
// valueDescriptionFormat: '{index}. {point.x:.3f} to {point.x2:.3f}, {point.y}.'
|
|
// }
|
|
// }
|
|
// }
|
|
// },
|
|
//
|
|
// series: [{
|
|
// name: 'Amount frequency',
|
|
// type: 'histogram',
|
|
// xAxis: 1,
|
|
// yAxis: 1,
|
|
// baseSeries: 's1',
|
|
// zIndex: -1
|
|
// }, {
|
|
// name: 'Offer amount',
|
|
// type: 'scatter',
|
|
// data: data,
|
|
// id: 's1',
|
|
// marker: {
|
|
// radius: 5
|
|
// }
|
|
// }]
|
|
// });
|
|
|
|
Highcharts.setOptions({
|
|
global: {
|
|
useUTC: false
|
|
},
|
|
colors: [
|
|
'rgba( 0, 154, 253, 0.9 )', // bright blue
|
|
'rgba( 253, 99, 0, 0.9 )', // bright orange
|
|
'rgba( 40, 40, 56, 0.9 )', // dark
|
|
'rgba( 253, 0, 154, 0.9 )', // bright pink
|
|
'rgba( 154, 253, 0, 0.9 )', // bright green
|
|
'rgba( 145, 44, 138, 0.9 )', // mid purple
|
|
'rgba( 45, 47, 238, 0.9 )', // mid blue
|
|
'rgba( 177, 69, 0, 0.9 )', // dark orange
|
|
'rgba( 140, 140, 156, 0.9 )', // mid
|
|
'rgba( 238, 46, 47, 0.9 )', // mid red
|
|
'rgba( 44, 145, 51, 0.9 )', // mid green
|
|
'rgba( 103, 16, 192, 0.9 )' // dark purple
|
|
],
|
|
chart: {
|
|
alignTicks: false,
|
|
type: '',
|
|
margin: [60, 25, 100, 90],
|
|
style: {
|
|
fontFamily: 'Abel,serif'
|
|
}
|
|
},
|
|
title: {
|
|
text: 'Histogram of offers',
|
|
align: 'left',
|
|
margin: 10,
|
|
x: 50,
|
|
style: {
|
|
fontWeight: 'bold',
|
|
color: 'rgba(0,0,0,.9)'
|
|
}
|
|
},
|
|
legend: {
|
|
enabled: true
|
|
},
|
|
plotOptions: {
|
|
area: {
|
|
lineWidth: 1,
|
|
marker: {
|
|
enabled: false,
|
|
symbol: 'circle',
|
|
radius: 4
|
|
}
|
|
},
|
|
arearange: {
|
|
lineWidth: 1
|
|
},
|
|
areaspline: {
|
|
lineWidth: 1,
|
|
marker: {
|
|
enabled: false,
|
|
symbol: 'circle',
|
|
radius: 4
|
|
}
|
|
},
|
|
areasplinerange: {
|
|
lineWidth: 1
|
|
},
|
|
boxplot: {
|
|
groupPadding: 0.05,
|
|
pointPadding: 0.05,
|
|
fillColor: 'rgba(255,255,255,.75)'
|
|
},
|
|
bubble: {
|
|
minSize: '0.25%',
|
|
maxSize: '17%'
|
|
},
|
|
column: {
|
|
// stacking:'normal',
|
|
groupPadding: 0.05,
|
|
pointPadding: 0.05
|
|
},
|
|
columnrange: {
|
|
groupPadding: 0.05,
|
|
pointPadding: 0.05
|
|
},
|
|
errorbar: {
|
|
groupPadding: 0.05,
|
|
pointPadding: 0.05,
|
|
showInLegend: true
|
|
},
|
|
line: {
|
|
lineWidth: 1,
|
|
marker: {
|
|
enabled: false,
|
|
symbol: 'circle',
|
|
radius: 4
|
|
}
|
|
},
|
|
scatter: {
|
|
marker: {
|
|
symbol: 'circle',
|
|
radius: 5
|
|
}
|
|
},
|
|
spline: {
|
|
lineWidth: 1,
|
|
marker: {
|
|
enabled: false,
|
|
symbol: 'circle',
|
|
radius: 4
|
|
}
|
|
},
|
|
series: {
|
|
shadow: false,
|
|
borderWidth: 0,
|
|
states: {
|
|
hover: {
|
|
lineWidthPlus: 0
|
|
}
|
|
}
|
|
}
|
|
},
|
|
xAxis: {
|
|
title: {
|
|
text: 'X Axis Title',
|
|
rotation: 0,
|
|
textAlign: 'center',
|
|
style: {
|
|
color: 'rgba(0,0,0,.9)'
|
|
}
|
|
},
|
|
labels: {
|
|
style: {
|
|
color: 'rgba(0,0,0,.9)',
|
|
fontSize: '9px'
|
|
}
|
|
},
|
|
lineWidth: 0.5,
|
|
lineColor: 'rgba(0,0,0,.5)',
|
|
tickWidth: 0.5,
|
|
tickLength: 3,
|
|
tickColor: 'rgba(0,0,0,.75)'
|
|
},
|
|
yAxis: {
|
|
minPadding: 0,
|
|
maxPadding: 0,
|
|
gridLineColor: 'rgba(204,204,204,.25)',
|
|
gridLineWidth: 0.5,
|
|
title: {
|
|
text: 'Y Axis<br/>Title',
|
|
rotation: 0,
|
|
textAlign: 'middle',
|
|
y: -15, // Adjust this to position the title higher.
|
|
margin: 25,
|
|
style: {
|
|
color: 'rgba(0,0,0,.9)'
|
|
}
|
|
},
|
|
labels: {
|
|
style: {
|
|
color: 'rgba(0,0,0,.9)',
|
|
fontSize: '9px'
|
|
}
|
|
},
|
|
lineWidth: 0.5,
|
|
lineColor: 'rgba(0,0,0,.5)',
|
|
tickWidth: 0.5,
|
|
tickLength: 3,
|
|
tickColor: 'rgba(0,0,0,.75)'
|
|
}
|
|
});
|
|
|
|
|
|
|
|
const binData = data => {
|
|
var hData = [], // the output array
|
|
size = data.length, // how many data points
|
|
bins = Math.round(Math.sqrt(size)); // determine how many bins we need
|
|
bins = bins > 50 ? 50 : bins; // adjust if more than 50 cells
|
|
var max = Math.max.apply(null, data), // lowest data value
|
|
min = Math.min.apply(null, data), // highest data value
|
|
range = max - min, // total range of the data
|
|
width = range / bins, // size of the bins
|
|
binBottom, // place holders for the bounds of each bin
|
|
binTop;
|
|
|
|
// loop through the number of cells
|
|
for (var i = 0; i < bins; i++) {
|
|
|
|
// set the upper and lower limits of the current cell
|
|
binBottom = min + (i * width);
|
|
binTop = binBottom + width;
|
|
|
|
// . check for and set the x value of the bin
|
|
if (!hData[i]) {
|
|
hData[i] = [];
|
|
hData[i][0] = binBottom + (width / 2);
|
|
}
|
|
|
|
// loop through the data to see if it fits in this bin
|
|
for (var j = 0; j < size; j++) {
|
|
var x = data[j];
|
|
|
|
// adjust if it's the first pass
|
|
binBottom = i === 0 && j === 0 ? binBottom -= 1 : binBottom;
|
|
|
|
// if it fits in the bin, add it
|
|
if (x > binBottom && x <= binTop) {
|
|
hData[i][1] = !hData[i][1] ? 1 : hData[i][1] += 1;
|
|
}
|
|
}
|
|
}
|
|
hData.forEach((point, i) => {
|
|
if (typeof point[1] === 'undefined') {
|
|
hData[i][1] = null;
|
|
}
|
|
});
|
|
return hData;
|
|
};
|
|
|
|
|
|
var chart;
|
|
|
|
// Binning data
|
|
var binnedData = binData(offers_list);
|
|
|
|
chart = Highcharts.chart('container', {
|
|
chart: {
|
|
type: 'column',
|
|
margin: [100, 25, 100, 50]
|
|
},
|
|
legend: {
|
|
enabled: true
|
|
},
|
|
tooltip: {},
|
|
plotOptions: {
|
|
series: {
|
|
pointPadding: 0,
|
|
groupPadding: 0,
|
|
borderWidth: 0.5,
|
|
borderColor: 'rgba(255,255,255,0.5)'
|
|
}
|
|
},
|
|
xAxis: [{
|
|
title: {
|
|
text: 'Offer value'
|
|
}
|
|
|
|
}],
|
|
yAxis: {
|
|
title: {
|
|
text: 'Frequency'
|
|
},
|
|
min: 0
|
|
}
|
|
});
|
|
|
|
// Adding data to the chart
|
|
chart.addSeries({
|
|
name: 'Offers',
|
|
data: binnedData,
|
|
color: 'rgba( 0, 154, 253, 0.9 )' // bright blue
|
|
});
|
|
|
|
|
|
</script>
|
|
|