title: ChartJS TypeError: document.getElementById(...).getContext is not a function
body: <p>I am working with Symfony 2 and Twig Template. In Twig I want to draw <strong>two</strong> charts with Chart.js. </p>
  
  <p>So I included the following <code>js</code>:</p>
  
  <pre><code>{% block javascripts %}
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"&gt;&lt;/script&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"&gt;&lt;/script&gt;
  {% endblock %}
  </code></pre>
  
  <p>To differentiate these charts, I am passing one changing Variable in a loop throw a function:</p>
  
  <p><code>{{ groupedDimension[0][0].dimension }}</code> equals <code>gaoperatingSystem</code> (in first loop) and <code>gascreenResolution</code> (in second loop)</p>
  
  <pre><code>{% for groupedDimension in groupedResults %}
      &lt;script&gt;
          var jQueryId = jQuery('#{{ groupedDimension[0][0].dimension }}').attr('id');
          drawChart(jQueryId);
      &lt;/script&gt;
  {% endfor %}
  </code></pre>
  
  <p>The function which creates the chart:</p>
  
  <pre><code>&lt;script&gt;
  function drawChart(id) {
      var lineChartData = {
          labels : ["January","February","March","April","May","June","July"],
          datasets : [
              {
                  label: "My First dataset",
                  fillColor: "rgba(220,220,220,0.2)",
                  strokeColor: "rgba(220,220,220,1)",
                  pointColor: "rgba(220,220,220,1)",
                  pointStrokeColor: "#fff",
                  pointHighlightFill: "#fff",
                  pointHighlightStroke: "rgba(220,220,220,1)",
                  data: [65, 59, 80, 81, 56, 55, 40]
              }
          ]
      }
  
      console.log(id);  //proves gaoperatingSystem and gascreenResolution
      window.onload = function(){
          var ctx = document.getElementById(id).getContext("2d");
          window.myLine = new Chart(ctx).Line(lineChartData, {
              responsive: true
          });
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>The Error shows at the line <code>var ctx = document.getElementById(id).getContext("2d");</code></p>
  
  <p>In the <code>html</code> I have the <code>divs</code> for the two charts:</p>
  
  <pre><code>{% for groupedDimension in groupedResults %}
      &lt;div style="width:80%"&gt;
          &lt;div&gt;
              &lt;canvas id="{{ groupedDimension[0][0].dimension }}" height="450" width="600"&gt;&lt;/canvas&gt;
          &lt;/div&gt;
       &lt;/div&gt;
  {% endfor %}
  </code></pre>
  
  <p>The browser console shows the following error message:</p>
  
  <blockquote>
    <p>TypeError: document.getElementById(...).getContext is not a function</p>
  </blockquote>
  
  <p>What is causing the error and how can I fix it? </p>