Using javascript in play template

Question

I'm using the Play! Framework. And I have a scala.html template file.

I'm trying to add a Google javascript library to add graphs to the Web app.

Basiclly Ineed to populate the follwoing function with my own values:

function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Date', 'Sales'],
          ['2004',  1000],
          ['2005',  1170],
          ['2006',  660],
          ['2007',  1030]
        ]);

So I did the following (this works in other parts of the HTML file, but not within Javasript):

@for(run <- currentPage.getList) {
      [@run.date.format("dd MMM yyyy"),@run.sales],
                      }

But the Scala code that is prefixed with @ symbol is not working inside Javascript.

Can anyone please advise?

Thanks.

Here is the whole piece of code:

@main {

    <h1 id="homeTitle">@Messages("runs.listRuns.title", currentPage.getTotalRowCount)</h1>

    @if(flash.containsKey("success")) {
        <div class="alert-message warning">
            <strong>Done!</strong> @flash.get("success")
        </div>
    }


    <!-- CHART  -->
         <html>
          <head>
            <script type="text/javascript"
                  src="https://www.google.com/jsapi?autoload={
                    'modules':[{
                      'name':'visualization',
                      'version':'1',
                      'packages':['corechart']
                    }]
                  }"></script>

            <script type="text/javascript">
              google.setOnLoadCallback(drawChart);

              function drawChart() {
                      var data = google.visualization.arrayToDataTable([
                      ['Date', 'Success Percentage'],

                      @for(run <- 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);
              }
            </script>
          </head>
          <body>
            <div id="curve_chart" style="width: 80%; height: 500px"></div>
          </body>
        </html>
    <!-- CHART -->

    <div id="actions">    
        <form action="@link(0, "name")" method="GET">
            <input type="search" id="searchbox" name="f" value="@currentFilter" placeholder="Filter by Run Name...">
            <input type="submit" id="searchsubmit" value="Filter by Run Name" class="btn primary">
        </form>
    </div>

Can you post the whole call (with the javascript and scala combined)? (It should work, I'm doing this all the time ;)) — Peanut
– Peanut, Commented May 7, 2015 at 9:00
are you using separate javascript file for this and then including in html? — Govind Singh
– Govind Singh, Commented May 7, 2015 at 9:58
Check your browser's console! It won't work cause JS doesn't accept last comma char, maybe also you'll find other errors — biesior
– biesior, Commented May 7, 2015 at 10:41
Check your source code by inspect element what it is printing there, for graphData values. — Himanshu Goel
– Himanshu Goel, Commented May 7, 2015 at 10:55

biesior · Accepted Answer · 2015-05-07 11:27:58Z

4

First thing: you should use your browser inspection tool to read the error(s) anyway, collecting data like this by simple loop isn't good idea as - as you can see you have an orphan comma char after last item - JavaScript doesn't accept this.

The best option is building JSON object in the controller's action and then passing it as param to the view. It guarantees that you won't have any syntax errors, like orphan commas, unclosed brackets, etc. Also if no items it will generate valid JS code like
var data = google.visualization.arrayToDataTable([]); (empty array)

The Java pseudo code looks like this (of course in your case you need to iterate your collection to fill the myValues List

public static Result chartData() {

    // For JS you need an array of arrays, so use a List of Lists in Java
    List<List<Object>> myValues = new ArrayList<>();

    // Add the header
    myValues.add(new ArrayList<Object>(Arrays.asList("Date", "Sale")));

    // Inserting dummy data, 
    // in this place you should iterate your `currentPage.getList()` instead
    myValues.add(new ArrayList<Object>(Arrays.asList("2010", 1000)));
    myValues.add(new ArrayList<Object>(Arrays.asList("2011", 1030)));
    myValues.add(new ArrayList<Object>(Arrays.asList("2012", 1530)));
    myValues.add(new ArrayList<Object>(Arrays.asList("2013", 3507)));


    // Convert the values to JSON 
    // and wrap it with play.twirl.api.Html, so you won't need to do this within the template
    Html chartData = new Html(Json.toJson(myValues).toString());

    return ok(views.html.myChart.render(chartData));
}

and your myChart.scala.html view

@(chartData: Html)

<script>
    var chartData = @chartData;
    console.log(chartData);

    // Or in your case...
    var data = google.visualization.arrayToDataTable(@chartData);
</script>

The result HTML code in browser is:

<script>
    var chartData = [["Date","Sale"],["2010",1000],["2011",1030],["2012",1530],["2013",3507]];
    console.log(chartData);

    // Or in your case...
    var data = google.visualization.arrayToDataTable([["Date","Sale"],["2010",1000],["2011",1030],["2012",1530],["2013",3507]]);
</script>

edited May 7, 2015 at 11:27

answered May 7, 2015 at 11:20

biesior

55.8k10 gold badges128 silver badges186 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

biesior Over a year ago

And sorry I have no experience in Scala to prepare same sample, anyway I'm pretty sure there's is no problem to 'translate' it into Scala action.

Michael Over a year ago

Thank you for the answer. At list I get the direction now!

Peanut · Accepted Answer · 2015-05-07 10:34:05Z

0

I think you need to add a quotation marks around the date:

@for(run <- currentPage.getList) {
  ['@run.runDate.format("yyyy")', @run.successPercentage],
 }

edited May 7, 2015 at 10:34

answered May 7, 2015 at 10:26

Peanut

4,0034 gold badges34 silver badges51 bronze badges

2 Comments

Michael Over a year ago

This still doesn't work. Probably, something else. Just cannot figure it out.

Peanut Over a year ago

I edited the date format, so it shows year-numbers, as your example does... Can you show us your errors? (JavaScript console probably?)

Collectives™ on Stack Overflow

Using javascript in play template

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related