datasaur/site/surveyapp/templates/graphs/histogram.html
2026-01-25 15:56:01 +00:00

38 lines
1.7 KiB
HTML

{% extends "graphs/graph.html" %} {% block axis %}
<!-- Axes settings -->
<section class="col-md-3 order-md-1">
<div class="h-100 bg-gradient text-light rounded p-3">
<!-- ------X AXIS------ -->
<section class="x-axis-details">
<h3>X-axis</h3>
<div class="axis-variable">
{{ form.x_axis.label() }}
{{ form.x_axis(class="custom-select x-axis-value axis-setting") }}
</div>
<small data-toggle='help' class="text-light help"
title="A histogram requires numerical type data. If you don't see your variable it is because it was not recognised as numerical.">
<i class="far fa-question-circle mr-2"></i>Don't see your variable?</small>
<div class="axis-variable extra-settings-group hidden-down">
<p>X-axis range</p>
<div class="d-flex justify-content-between">
{{ form.x_axis_from.label() }} {{ form.x_axis_from(class="form-control extra-setting x-from w-25") }}
{{ form.x_axis_to.label() }} {{ form.x_axis_to(class="form-control extra-setting x-to w-25") }}
</div>
<div class="y-axis-group">
<div class="axis-variable">
{{ form.group_count.label() }}
{{ form.group_count(class="form-control extra-setting number-groups") }}
</div>
</div>
<small>This is not precise. If you specify the number of groups, the graph will approximate what is possible close to that number.</small>
</div>
</section>
<!-- End of x-axis -->
</div>
</section>
<!-- End of Axis settings -->
<!-- Scripts specific to histogram -->
<script src="https://d3js.org/d3.v5.min.js" defer></script>
<script src="{{ url_for('static', filename='graphscripts/histogram.js') }}" defer></script>
{% endblock axis %}