Trouble setting up chartkick with flask

Question

I would like to use the python package chartkick-0.4.0 to add graphs in my flask app. However, I am new to flask and having trouble setting it up. The readme file for the project states:

 Add chartkick to jinja_env and static_folder:

 app = Flask(__name__, static_folder=chartkick.js(),
 static_url_path='/static')
 app.jinja_env.add_extension("chartkick.ext.charts")

I have added chartstick.js to my templates/js folder. However, the line

app=Flask(__name__,static_folder=chartkick.js(), static_url_path='/static/js/')

throws a

NameError: "chartstic" is not defined.

What am I doing wrong ? How do i set up chartstick properly with flask?

This is my template:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src=""{{ url_for('static', filename='js/chartkick.js') }}"></script>
{% bar_chart data %}

UPDATE * * and this is my views file now:

from flask import Flask, jsonify, render_template, request
import chartkick

app=Flask(__name__,static_folder=chartkick.js(), static_url_path='/static/js/')
app.jinja_env.add_extension("chartkick.ext.charts")


@app.route('/chart')
def first_graph():
    data = {'Chrome': 52.9, 'Opera': 1.6, 'Firefox': 27.7}
        return render_template('first_graph.html', data=data)

if __name__=="__main__":
    app.run(debug=True)

Answer 1

The problem is really simple. You have invalid HTML in this statement:

<script src=""{{ url_for('static', filename='js/chartkick.js') }}"></script>

Note the doubled left-side quotes. A secondary problem is that you have to specify the Javascript file without a path. The statement with these two errors fixed becomes:

<script src="{{ url_for('static', filename='chartkick.js') }}"></script>

And now you should get your chart.

Note: the way their documentation tells you to set up your static path folder is awful. They are basically pointing the application's static folder to their own folder, which will prevent you from having any of your own static files. A much better way to handle this is to create a blueprint for chartkick and have the static folder for the blueprint point to their Javascript file.