title: Using javascript in play template
body: <p>I'm using the Play! Framework. And I have a scala.html template file.</p>
  
  <p>I'm trying to add a Google javascript library to add graphs to the Web app.</p>
  
  <p>Basiclly Ineed to populate the follwoing function with my own values:</p>
  
  <pre><code>function drawChart() {
          var data = google.visualization.arrayToDataTable([
            ['Date', 'Sales'],
            ['2004',  1000],
            ['2005',  1170],
            ['2006',  660],
            ['2007',  1030]
          ]);
  </code></pre>
  
  <p>So I did the following (this works in other parts of the HTML file, but not within Javasript):</p>
  
  <pre><code>@for(run &lt;- currentPage.getList) {
        [@run.date.format("dd MMM yyyy"),@run.sales],
                        }
  </code></pre>
  
  <p>But the Scala code that is prefixed with @ symbol is not working inside Javascript.</p>
  
  <p>Can anyone please advise?</p>
  
  <p>Thanks.</p>
  
  <p>Here is the whole piece of code:</p>
  
  <pre><code>@main {
  
      &lt;h1 id="homeTitle"&gt;@Messages("runs.listRuns.title", currentPage.getTotalRowCount)&lt;/h1&gt;
  
      @if(flash.containsKey("success")) {
          &lt;div class="alert-message warning"&gt;
              &lt;strong&gt;Done!&lt;/strong&gt; @flash.get("success")
          &lt;/div&gt;
      }
  
  
      &lt;!-- CHART  --&gt;
           &lt;html&gt;
            &lt;head&gt;
              &lt;script type="text/javascript"
                    src="https://www.google.com/jsapi?autoload={
                      'modules':[{
                        'name':'visualization',
                        'version':'1',
                        'packages':['corechart']
                      }]
                    }"&gt;&lt;/script&gt;
  
              &lt;script type="text/javascript"&gt;
                google.setOnLoadCallback(drawChart);
  
                function drawChart() {
                        var data = google.visualization.arrayToDataTable([
                        ['Date', 'Success Percentage'],
  
                        @for(run &lt;- currentPage.getList) {
                            [@run.runDate.format("dd MMM yyyy"), @run.successPercentage],
                        }
  
                    ]);
  
  
  
                  var options = {
                    title: 'Engineless Performance Monitoring',
                    curveType: 'function',
                    legend: { position: 'bottom' }
                  };
  
                  var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
  
                  chart.draw(data, options);
                }
              &lt;/script&gt;
            &lt;/head&gt;
            &lt;body&gt;
              &lt;div id="curve_chart" style="width: 80%; height: 500px"&gt;&lt;/div&gt;
            &lt;/body&gt;
          &lt;/html&gt;
      &lt;!-- CHART --&gt;
  
      &lt;div id="actions"&gt;    
          &lt;form action="@link(0, "name")" method="GET"&gt;
              &lt;input type="search" id="searchbox" name="f" value="@currentFilter" placeholder="Filter by Run Name..."&gt;
              &lt;input type="submit" id="searchsubmit" value="Filter by Run Name" class="btn primary"&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  </code></pre>