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
Post a Comment