ChartJS TypeError：document.getElementById（...）。getContext不是一个函数

我正在使用Symfony 2和Twig模板。在Twig中，我想使用Chart.js绘制两个图表。

因此，我包括以下内容js：

{% block javascripts %}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
{% endblock %}

为了区分这些图表，我在循环中传递了一个不断变化的Variable来抛出一个函数：

{{ groupedDimension[0][0].dimension }}等于gaoperatingSystem（在第一循环中）和gascreenResolution（在第二循环中）

{% for groupedDimension in groupedResults %}
    <script>
        var jQueryId = jQuery('#{{ groupedDimension[0][0].dimension }}').attr('id');
        drawChart(jQueryId);
    </script>
{% endfor %}

创建图表的函数：

<script>
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
        });
    }
}
</script>

错误显示在该行 var ctx = document.getElementById(id).getContext("2d");

在中，html我有divs两个图表：

{% for groupedDimension in groupedResults %}
    <div style="width:80%">
        <div>
            <canvas id="{{ groupedDimension[0][0].dimension }}" height="450" width="600"></canvas>
        </div>
     </div>
{% endfor %}

浏览器控制台显示以下错误消息：

TypeError：document.getElementById（...）。getContext不是一个函数

是什么导致错误，我该如何解决？