javascript - running highcharts with flaskr and jinja2 -


i can't seem working demo of highcharts flaskr , jinja2. these 3 errors when open page.i intend use javascript call json object python code provide render chart.

uncaught typeerror: undefined not 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 

here python code renders template

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

i put script src highcharts jquery in block in layout.html , function should create chart in login.html.

this 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> {% message in get_flashed_messages() %} <div class=flash>{{ message }}</div> {% endfor %} {% block body %}{% endblock %} </div> 

this login.html i'm trying render code

{% 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 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 %} 

what doing wrong? how can fix working demo?

first load jquery, highstock, see:

<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> 

Comments

Popular posts from this blog

php - Wordpress website dashboard page or post editor content is not showing but front end data is showing properly -

javascript - Get parameter of GET request -

javascript - Twitter Bootstrap - how to add some more margin between tooltip popup and element -