бегущие высокие диаграммы с флякром и jinja2

Question

Я не могу получить рабочую демонстрацию высоких карт с флякром и jinja2. Я получаю эти три ошибки, когда открываю страницу. Я намерен использовать javascript для вызова json-объекта, который мой код на Python предоставит для отображения диаграммы.

Uncaught TypeError: undefined is not a function highstock.js:287 
Uncaught TypeError: Cannot read property 'prototype' of undefined exporting.js:9 
Uncaught TypeError: Object [object Object] has no method 'highcharts' 127.0.0.1:32 

Вот мой питон код, который делает шаблон

@app.route('/') 
def route(): 
    return render_template('login.html') 

Я положил СРК скрипт для Highcharts, а также JQuery в блоке в layout.html и функцию, которая должна создать диаграмму в login.html.

Это layout.html

<title>Flaskr</title> 
{% block head %} 
<script src="http://code.highcharts.com/stock/highstock.js"></script> 
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
{% endblock %} 
<link rel=stylesheet type=text/css href="{{ url_for('static', filename='style.css') }}"> 
<div class=page> 
<h1>Flaskr</h1> 
<div class=metanav> 

</div> 
{% for message in get_flashed_messages() %} 
<div class=flash>{{ message }}</div> 
{% endfor %} 
{% block body %}{% endblock %} 
</div> 

Это мой login.html, где я пытаюсь сделать код

{% extends "layout.html" %} 
{% block body %} 
<h2>Login</h2> 
{% if error %}<p class=error><strong>Error:</strong> {{ error }}{% endif %} 
<form action="" method=post> 
<dl> 
    <dt>Username: 
    <dd><input type=text name=username> 
    <dt>Password: 
    <dd><input type=password name=password> 
    <dd><input type=submit value=Login> 
</dl> 
</form> 
<script type="text/javascript"> 
$(document).ready(function() { 
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-ohlc.json&callback=?', function(data) { 

    // create the chart 
    $('#container').highcharts('StockChart', { 


     rangeSelector : { 
      selected : 2 
     }, 

     title : { 
      text : 'AAPL Stock Price' 
     }, 

     series : [{ 
      type : 'ohlc', 
      name : 'AAPL Stock Price', 
      data : data, 
      dataGrouping : { 
       units : [[ 
        'week', // unit name 
        [1] // allowed multiples 
       ], [ 
        'month', 
        [1, 2, 3, 4, 6] 
       ]] 
      } 
     }] 
    }); 
}); 
}); 
</script> 
<div id="container" style="height: 500px; min-width: 500px"></div> 
{% endblock %} 

Что я делаю неправильно? Также как я могу исправить это, чтобы получить рабочую демонстрацию?

Answer 1

Первый JQuery нагрузки, то Highstock см:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="http://code.highcharts.com/stock/highstock.js"></script> 
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>