Test_Johanne/dictator/admin_report.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>