Using the {% widthratio %} template tag with CSS to create a bar graph

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<style type="text/css" media="screen">
  ul {
    margin: 0;
    padding: 0;
    width: 190px;
    background-color: #fff;
  }
  
  ul li {
    font-size: 11px;
    line-height: 20px;
    margin: 0;
    padding: 0;
    list-style-type: none;
    border-bottom: 1px solid #ebeff2;
    background-color: #fff;
  }
 
 ul li span {
    background-color: #a9d2f2;
    display: block;
    color: #125a95;
    font-weight: bold;
    padding: 0 0 0 5px;
    white-space: nowrap;
  }
</style>

<h3>Election results</h3>
<ul>
  {% for candidate in candidate_list|slice:":6" %}
    <li><span style="width: {% widthratio candidate.votes candidate.get_race.get_total_votes 190 %}px">{{ candidate.first_name }} {{ candidate.last_name }}</span></li>
  {% endfor %}
</ul>

Comments

ericflo (on February 27, 2007):

This is awesome! It's a very creative way to use the widthratio tag.

#

grimboy (on March 6, 2007):

While this is quite clean anyone planning on using this should have the information in text as well so it can be read by someone using a screenreader.

#

(Forgotten your password?)

You may use Markdown syntax here, but raw HTML will be removed.