javascript - using flask render_template to make a highchart on the front end

Question

I have a simple python method which will generate a highcharts json

@app.route('/make/a/chart')
def make_chart():
  data = get_data()
  c = Counter
  for each in data:
    c['AGE'] += 1

  highchart_json = {
    'chart': {
      'type': 'column'
    }
    'title': {
      'text': 'arranged by age'
    }
    'x-axis': {
      'categories': [x for x in c]
    }
    'series': {
      'name': 'Groups By Age',
      'data': [c[x] for x in c]
    }
  }
  return render_template('some_template.html', json=highchart_json)

is it possible to have it render with a template, or is the only real way to turn it into a highchart by jsonifying it and sendng it to the front end?

Answer 1

You can put JSON into a template as a Javascript structure:

<script type="text/javascript">
    var chart_data = {{ highchart_json|tojson|safe }};
</script>

and you can then use this client-side in your JS code. JSON is a subset of JavaScript, after all, or at least the JSON produced by the Python json module is.

This uses the Flask tojson filter, which produces HTML safe JSON values; any HTML-metacharacters are escaped for you using JSON uxxxx escape codes.