title: How to pass string data from pandas dataframe to a google.visualization.DataTable using json and flask
body: <p>I'm trying to build a wordtree data visualisation website element using <a href="https://developers.google.com/chart/interactive/docs/gallery/wordtree" rel="nofollow noreferrer">google word trees</a>, and <code>flask</code>. </p>
  
  <p>The approach I've taken is based on <a href="https://stackoverflow.com/questions/16896219/how-can-i-convert-json-string-to-google-visualization-datatable">this</a> answer, including attempting to implement the formatting recommended <a href="https://github.com/google/google-visualization-python/blob/master/examples/static_example.py" rel="nofollow noreferrer">here</a>, and I've also tried following <a href="http://www.banjolanddesign.com/flask-google-charts.html" rel="nofollow noreferrer">this</a> tutorial, but my <code>word_trees.html</code> just keeps rendering a blank page.</p>
  
  <p>Apart from the data loading from a much larger, though equivalent <code>.csv</code> in the actual application, the relevant parts of <code>app.py</code> are:</p>
  
  <pre><code>from flask import Flask, render_template
  import pandas as pd
  import gviz_api
  
  #create to data
  lst = ["You've stolen a 'PIZZA' my heart! @CfgLaw Than",
         "Did your workplace buy you pizza for #national",
         "So last week on #NationalPizzaDay I had plans|",
         "Last week it was #NewStartersDay and #National",
         "@JurysInnsHotels #NationalPizzaDay Wow! I’m dr"]
  df = pd.DataFrame({'text':lst})
  
  #initiate app
  app = Flask(__name__)
  
  #create gvis formatted data
  def get_data():
    # Creating the data
    description = {"text": ("string", "Text")}
    data = [{"text":"{}".format(text)} for text in df.text]
    # Loading it into gviz_api.DataTable
    data_table = gviz_api.DataTable(description)
    data_table.LoadData(data)
    # Creating a JSon string
    json_string = data_table.ToJSon()
    return json_string
  
  #pass data to template 
  @app.route("/")
  def word_trees():
      data = get_data()
      return render_template('word_trees.html',tweets=data)
  
  if __name__ == "__main__":
      app.run(debug=True) 
  </code></pre>
  
  <p>And <code>word_trees.html</code> is:</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
        google.charts.load('current', {packages:['wordtree']});
        google.charts.setOnLoadCallback(drawChart);
  
        function drawChart() {
            var data = new google.visualization.DataTable(tweets);
          );
  
          var options = {
            wordtree: {
              format: 'implicit',
              word: 'pizza',
              type: 'double'
            }
          };
  
          var chart = new google.visualization.WordTree(document.getElementById('wordtree_basic'));
          chart.draw(data, options);
        }
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="wordtree_basic" style="width: 900px; height: 500px;"&gt;&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I expect the app to render a wordtree based on the data in <code>df.text</code>, but it keeps rending a blank page.</p>