title: Passing an Array from a Flask view to the javascript code of another view
body: <p>I have an array of data (it's a python list in my flask view) obtained after parsing a twitter feed.</p>
  
  <p>I want to use it to build a chart in another view. </p>
  
  <p>I succeeded passing it onto the Flask template tags of the next view, but I can't figure out how to use this data inside the javascript code that will build the chart using Chart.js</p>
  
  <p>For example: </p>
  
  <p>After researching on Google, I tried this to pass the array of the chart labels to javascript. <em>The issue I have is that only the first element is passed and the data type is now <code>string</code> instead of <code>Array</code>.</em></p>
  
  <p>What would be the right way to do pass the <code>values</code> variable of routes.py to the <code>labelsData</code> variable in pie.html ?</p>
  
  <p>Flask- routes.py</p>
  
  <pre><code>[...]
  @app.route("/piechart/&lt;twitterhandle&gt;")
  def pie(twitterhandle):
  
      from app.twitter_parser import twitter_parser as tp
  
      alltweets = tp.get_all_tweets(twitterhandle)
      word_dict = tp.word_count(alltweets)
      keywords_dict = tp.top10words(word_dict)
  
      # keywords_dict is a dictionnary containing the 10 most
      # used words as keys and their respective count as value
      values = [values for labels, values in keywords_dict]
      labels = [labels for labels, values in keywords_dict]
      colors = [ "#F7464A", "#46BFBD", "#FDB45C", "#FEDCBA","#ABCDEF", "#DDDDDD", "#ABCABC", "#CAABB9", "#46F7F3", "#EFCDAB"]
  
  
      # Render the Template
      return render_template('pie.html', values=values, labels=labels,
              colors=colors)
  </code></pre>
  
  <p>pie.html</p>
  
  <pre><code>[...]    
  &lt;meta id="labels_data" data-labels={{labels}}&gt;
  &lt;meta id="values_data" data-values={{values}}&gt;
  &lt;meta id="colors_data" data-colors={{colors}}&gt;
  [...]
      &lt;script&gt;
          var labelsData=document.getElementById("labels_data").dataset.labels;
          var valuesData=document.getElementById("values_data").dataset.values;
          var colorsData=document.getElementById("colors_data").dataset.colors;
  
          new Chart(document.getElementById("pie-chart"), {
           type: 'pie',
            data: {
              labels: labelsData,
              datasets: [{
                label: "Pie Chart",
                backgroundColor: colorsData,
              data: valuesData
              }]
            },
            options: {
              title: {
                display: true,
                text: 'Pie Chart Title'
              }
            }
          });
        &lt;/script&gt;
  </code></pre>