title: Python Bottle: Assigning a python variable to Javascript variable
body: <p>I am using  <a href="http://bottlepy.org/docs/dev/index.html" rel="nofollow">Bottle</a> web framework to render webpages. I am using bottle template engine to pass the variables from Python and then process them accordingly in the template file, which has embedded Python code. </p>
  
  <p>Now the problem comes when I use <code>javascript</code> within my template. If I try to access my Python variable inside the <code>javascript</code> function, it fails with <code>TypeError: unhashable type: 'list'</code></p>
  
  <p>I am calling my template in my python file:</p>
  
  <pre><code>list_vals = [['Mushrooms', 3, 5], ['Onions', 1, 4], ['Olives', 1, 5], ['Zucchini', 1, 2]]    
  return bottle.template(os.path.join(os.path.dirname(__file__), 'templates', 'pizzaStats.html'), vals=list_vals)
  </code></pre>
  
  <p>In my template file I am using the <code>vals</code> variable currently just to print inside the javascript, as shown below (just the script part of the template is shown):</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
    // Load the Visualization API and the piechart package.
    google.load('visualization', '1.0', {'packages':['corechart']});
  
    // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(drawChart);
  
    // Callback that creates and populates a data table,
    // instantiates the pie chart, passes in the data and
    // draws it.
    function drawChart() {
  
      // Create the data table.
      var data = new google.visualization.DataTable();
      %print ({{ vals }})
      var graphdata = {{ vals }}; 
      data.addColumn('string', 'Topping');
      data.addColumn('number', 'Slices');
      data.addColumn('number', 'pieces');
      data.addRows(graphdata);
  
      // Set chart options
      // to smoothen the lines - 'curveType':'function'
      var options = {'title':'How Much Pizza I Ate Last Night',
                     'width':400,
                     'height':300};
  
      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>Even if I change the type of the variable from <code>list</code> to <code>dict</code> type, it still complains. <code>TypeError: unhashable type: 'dict'</code> The error is coming from the <code>print()</code> but if I remove the <code>print()</code> nothing happens and no graph is drawn, meaning the variable is not correctly assigned.</p>
  
  <p>The end goal is to assign this variable to a javascript variable which will then plot the graph using Google APIs. What is the correct way to assign a Python variable to a javascript variable inside the bottle template? Thanks.</p>