Google Charts не показывает данные

Question

У меня есть этот шаблон:

{% block header %}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div align="center" style="margin-top:35px;"><a href="/"><button type="button" class="btn btn-primary">Back to latest</button></a></div>
{% endblock %}
{% block body %}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"  style="width: 900px; height: 500px;"><div>


<script type='text/javascript'>//<![CDATA[ 

google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

  var data = google.visualization.arrayToDataTable([
    ['Currency', 'Rate', { role: 'style' }],
    ['USD', parseFloat({{rates.0}}), 'gold'],
    ['GBP', parseFloat({{rates.1}}), 'silver'],
    ['HKD', parseFloat({{rates.2}}), 'brown'],
    ['AUD', parseFloat({{rates.3}}), 'blue'],
    ['SEK', parseFloat({{rates.1}}), 'red'],
    ['JPY', parseFloat({{rates.2}}), 'yellow'],
    ['NOK', parseFloat({{rates.3}}), 'orange'],
    ['EUR', parseFloat({{rates.3}}), 'orange'],
  ]);



  var options = {
    title: 'Exchange rate overview',
    chartArea: {width: '50%'},
    hAxis: {
      title: '',
      minValue: 0
    },
    vAxis: {
      title: ''
    }
  };

  var chart = new google.visualization.BarChart(document.getElementById('chart_div'));

  chart.draw(data, options);
}
//]]>  

</script>


{% endblock %}

Прямо сейчас, это показывает мне это:

Что с этим не так? Он должен показывать несколько баров с данными, какие-либо идеи?

Кстати, данные json действительно извлекаются из приложения Django.

Если вам нужны дополнительные объяснения, пожалуйста, дайте мне знать.