Python flask passing variable to html file not working under script tag

Question

I have a python flask app that I need to create a java script bar chart. I have tried various ways and I know my variables are getting passed to the html file as I have moved them to other places in the html file and its working. The place I need to pass these variables to is under the script tag in the html file. I am new to all of this and is there some special handling i need to do to make my variables show up, so the chart can be built?

Not sure if it matters but the variables I am passing is just a date and number.

# this is my python route that calls a function that fetches a date and a 
# number from mongodb. This data im trying to display in my graph.
@app.route('/meritgraph/')
def meritgraph():

score_graph_data, score_date = get_chart_data()

return render_template("graphing.html", chart_data=zip(score_date, 
score_graph_data))



# This is working for me but I want this to run inside a javascript tag.
<ol>{% for score_date, score_graph_data in chart_data %}
    <li>{{score_date|safe}} and {{score_graph_data}}</li>
    {% endfor %}
</ol>{%endblock%}

# for the example above I get the following return output.

Wed May 24 18:11:01 PDT 2017 and 100
Tue May 23 14:39:27 PDT 2017 and 77
Tue May 23 14:14:02 PDT 2017 and 62

# This is what I would like to do inside the script tag. Some reason when I 
# run it inside the script tag it wont work. Is there anything special I 
# need to do here?
<script type="text/javascript">

<ol>{% for score_date, score_graph_data in chart_data %}
    <li>{{score_date|safe}} and {{score_graph_data}}</li>
    {% endfor %}
</ol>{%endblock%}

</script>

try wrapping in quotes '{{score_date}}' '{{score_graph_data}}' — karthick
– karthick, Commented May 25, 2017 at 5:07
No that did not work. I tried that and still same thing. I see the chart back ground but the chart data is not passed. — Max Powers
– Max Powers, Commented May 25, 2017 at 5:09
"dataProvider": [ { "category": '{{score_date}}', "column-1": '{{score_graph_data}}' }, ] — Max Powers
– Max Powers, Commented May 25, 2017 at 5:11

gtdavidv · Accepted Answer · 2017-05-27 23:34:39Z

1

You've messed up your commas a bit. Try the below. If that doesn't work, please provide more information on the error you're getting (probably in the JavaScript execution)

<script type="text/javascript">
    AmCharts.makeChart("chartdiv",
        {
            "type": "serial",
            "categoryField": "category",
            "dataDateFormat": "YYYY-MM-DD",
            "startDuration": 1,
            "theme": "dark",
            "categoryAxis": {
                "gridPosition": "start",
                "parseDates": true
            },
            "chartCursor": {
                "enabled": true
            },
            "chartScrollbar": {
                "enabled": true
            },
            "trendLines": [],
            "graphs": [
                {
                    "fillAlphas": 1,
                    "id": "AmGraph-1",
                    "title": "graph 1",
                    "type": "column",
                    "valueField": "column-1"
                }
            ],
            "guides": [],
            "valueAxes": [
                {
                    "id": "ValueAxis-1",
                    "title": "score range"
                }
            ],
            "allLabels": [],
            "balloon": {},
            "titles": [
                {
                    "id": "Title-1",
                    "size": 15,
                    "text": "Merit Score Chart"
                }
            ],
            "dataProvider": [
                {% for score_date, score_graph_data in chart_data %}
                    {
                        "category": '{{score_date|safe}}',
                        "column-1": '{{score_graph_data}}'
                    }
                    {{ "," if not loop.last }}
                {% endfor %}
            ]
        }
    );
</script>

edited May 27, 2017 at 23:34

answered May 25, 2017 at 16:16

gtdavidv

2763 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Max Powers Over a year ago

Thanks for pointing out the syntax error. I tried this but I still get same issue of the chart being returned but with no values. Im not sure who to check if any javascript errors as the page is loading fine just without any data in the chart.

gtdavidv Over a year ago

codex.wordpress.org/… - Step 3 at this website has instructions on how to open the console in the various browsers. You should see any JavaScript errors there

Max Powers Over a year ago

Great thank you so much let me check that out and see if I can find any errors.

Max Powers Over a year ago

Thanks for your suggestions. I actually ran the java script console from inside my browser. The unfortunate thing is I am actually not getting any errors. After playing around with this what I see is this works when I don't have the script tag. The behavior I am observing is basically the list values dont get returned and its as if the variables are just empty.

Max Powers Over a year ago

Thanks this looks to be making things progress a little further. I checked the browser console and I see the following error. "SyntaxError: missing ) after argument list chart_sandbox:59:28" I checked the code and there is a opening and a closing parenthesis so not sure why it's complaining about some syntax error.

|

Adrianopolis · Accepted Answer · 2017-05-25 16:44:36Z

0

Try changing your syntax within the script for jinja per this example: {{score_date}} to <%=score_date%>

answered May 25, 2017 at 16:44

Adrianopolis

1,2921 gold badge11 silver badges15 bronze badges

1 Comment

Max Powers Over a year ago

No Sorry I tried in that syntax and got same issue.

Mark Seagoe · Accepted Answer · 2018-12-23 06:41:12Z

0

karthick was right at least in my experience the jinja within script tags needs to be in quotes. On top of that you shouldn't put html tags inside script tags, you would use document.all or document.getElementById functions.

answered Dec 23, 2018 at 6:41

Mark Seagoe

62910 silver badges20 bronze badges

Collectives™ on Stack Overflow

Python flask passing variable to html file not working under script tag

3 Answers 3

6 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related