Hello,

I have added an admin report to my app. I have been able to use vars_for_admin_report to pass values to the admin report page using the template and have those values listed. I am trying to display a histogram of those values using HighCharts. I have been able to get the histogram to display using hard coded data. But I have not been able figure out how to pass the values to the javascript for that page. Since the admin report page is not part of my app, I am not sure how to do the equivalent of:

class Page_Name(page):
      
      @staticmethod
      def js_vars(subsession: Subsession):
      return dict(value=subsession.value)
      
Any help is greatly appreciated. Thanks.

JavaScript can access the values generate by `vars_for_admin_report`.

Here is an example, using a bar chart created manually, extending the example from https://otree.readthedocs.io/en/latest/admin.html#customizing-the-admin-interface-admin-reports.


######################
##  In __init__.py  ##
######################


def vars_for_admin_report(subsession):

    payoffs = [[p.id_in_subsession, p.payoff] for p in subsession.get_players()]
    return dict(payoffs=payoffs)


#########################
##  admin_report.html  ##
#########################


<h4>Payoffs in round {{ subsession.round_number }}</h4>

<div style="height: 120px; display: flex;">
  {{ for payoff in payoffs }}
    <div class="bg-primary border-1 border-bottom border-secondary" id="bar_{{ payoff.0 }}" style="height: 1px; width: 80px; display: inline-block; margin-top: auto; margin-right: 5px;">
    </div>
  {{ endfor }}
</div>
<div style="vertical-align: top; display: flex;">
  {{ for payoff in payoffs }}
    <div class="text-secondary" style="height: 10px; width: 80px; display: inline-block; text-align: center; margin-right: 5px;">
      Player {{ payoff.0 }}
    </div>
  {{ endfor }}
</div>

<script>
  var payoffs = {{ payoffs|json }};
  for (var i = 0; i < payoffs.length; i++) {
    document.getElementById('bar_' + payoffs[i][0]).style.height = payoffs[i][1] + 'px';
  }
</script>

Awesome. Thank you so much! That first line in the script is what I was missing.