Display max number of td elements in table row - html

Question

I am using the http://www.highcharts.com/demo/gauge-speedometer on a page that dynamically renders multiple gauges. The gauges are grouped by their current level. I only want a maximum of 6 gauges in a row with any additional gauges to display on a new row.
The gauges are all working properly. However, if there are 7 gauges with a level of "red", they are flowing off the page.
My view returns a "gauge_list" which is a list of dictionaries for each gauge like this:
{'cnt': 48, 'yellow_to': 66, 'level': 'yellow', 'gauge_min': 0, 'gauge_link': 'gauges:contracts', 'green_to': 33, 'gauge_max': 100, 'gauge_title': 'contracts', 'gauge_name': 'Contracts'}
Any suggestions on the best way to handle this?
<div class="row">
<div class="span12">
<table>
{% for gauge in gauge_list %}
{% if gauge.level == "red" %}
<td><div id="{{gauge.gauge_title}}" style="width: 280px; height: 210px; margin: 0 auto"></div></td>
{% endif %}
{% endfor %}
</table>
</div>
</div>
<div class="row">
<div class="span12">
<table>
{% for gauge in gauge_list %}
{% if gauge.level == 'yellow' %}
<td><div id="{{gauge.gauge_title}}" style="width: 280px; height: 210px; margin: 0 auto"></div></td>
{% endif %}
{% endfor %}
</table>
</div>
</div>
<div class="row">
<div class="span12">
<table>
{% for gauge in gauge_list %}
{% if gauge.level == 'green' %}
<td><div id="{{gauge.gauge_title}}" style="width: 280px; height: 210px; margin: 0 auto"></div></td>
{% endif %}
{% endfor %}
</table>
</div>
</div>

Answer 1

I think the simplest way to do this is to either a) determine the grouped lists in the view or b) use the built-in groupby template tag. groupby requires that the list of dictionaries be arranged by the grouping key, which would be level here. That's best done in the view, since you probably don't want the naive alphabetic sorting that the dictsort filter would give you.
{% regroup gauge_list by level as level_list %}
{% for level in level_list %}
<div class="row">
<div class="span12">
<table>
{% for gauge in level.list %}
{% if forloop.counter0|divisibleby:"6" %}
{% if not forloop.first %}</tr>{% endif %}
<tr>
{% endif %}
<td><div id="{{gauge.gauge_title}}" style="width: 280px; height: 210px; margin: 0 auto"></div></td>
{% endfor %}
</tr>
</table>
</div>
</div>
{% endfor %}
By doing it in the view, I mean something like providing a nested data structure instead of a simple list. Something like:
levels_and_gauges = [['red', [...red guage dicts]],
['yellow', [...yellow guage dicts]],
['green'], [...green guage dicts]]]
The template code would then be something like this:
{% for level, guages in levels_and_guages %}
<div class="row">
<div class="span12">
<table>
{% for guage in guages %}
{% if forloop.counter0|divisibleby:"6" %}
{% if not forloop.first %}</tr>{% endif %}
<tr>
{% endif %}
<td><div id="{{gauge.gauge_title}}" style="width: 280px; height: 210px; margin: 0 auto"></div></td>
{% endfor %}
</tr>
</table>
</div>
</div>
{% endfor %}
Or you could group into 6-length rows in the view rather than the template.

Answer 2

{% for level in ["red", "yellow", "green"] %}
<div class="row">
<div class="span12">
<table>
{% for gauge in gauge_list %}
{% if gauge.level == level %}
<td><div id="{{gauge.gauge_title}}" style="width: 280px; height: 210px; margin: 0 auto"></div></td>
{% endif %}
{% endfor %}
</table>
</div>
</div>
{% endfor %}