{% extends "base.html" %}

<!-- Example row of columns -->
{% block stuff %}

<div class="row">
  {% for i in range(23) %}
    <div class="span4">
      <h2>000{{ i }}</h2>
        <div id="chart_container">
          <div id="chart_{{ i }}"></div>
        </div>
      <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
  {% end %}
</div>
<div class="row">
</div>

<script>
{% for i in range(23) %}

var my_data_{{ i }}
var graph_{{ i }}
$.getJSON("/data/test/{{ 10 + i }}", function(data) {
  my_data_{{ i }} = data[0];

  graph_{{ i }} = new Rickshaw.Graph( {

    element: document.getElementById("chart_{{ i }}"),
    renderer: 'bar',
    series: [
      {
        data:  my_data_{{ i }}["data"],
        name: my_data_{{ i }}["name"],
        color: '#0093b9',
      }
    ]
  } );

  graph_{{ i }}.render();

});

{% end %}

</script>

{% end %}


{% extends "base.html" %}

<!-- Example row of columns -->
{% block stuff %}

<div class="row">
  {% for i in range(23) %}
    <div class="span4">
      <h2>000{{ i }}</h2>
        <div id="chart_container">
          <div id="chart_{{ i }}"></div>
        </div>
      <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
  {% end %}
</div>
<div class="row">
</div>

<script>
{% for i in range(23) %}

var my_data_{{ i }}
var graph_{{ i }}
$.getJSON("/data/test/{{ 10 + i }}", function(data) {
  my_data_{{ i }} = data[0];

  graph_{{ i }} = new Rickshaw.Graph( {

    element: $("#chart_{{ i }}").get(0),
    renderer: 'bar',
    series: [
      {
        data:  my_data_{{ i }}["data"],
        name: my_data_{{ i }}["name"],
        color: '#0093b9',
      }
    ]
  } );

  graph_{{ i }}.render();

});

{% end %}

</script>

{% end %}


Use jquery selector in stead of document.getElementById
Use jquery selector in stead of document.getElementById
