Using javascript in a game template
I am using Play! Framework. And I have a scala.html template file.
I am trying to add google javascript library for adding graphs to a web application.
Basiclly Ineed to populate the following 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 (it works in other parts of the HTML file, but not in Javasript):
@for(run <- currentPage.getList) {
[@run.date.format("dd MMM yyyy"),@run.sales],
}
But Scala code, prefixed with @ symbol, doesn't work inside Javascript.
Anyone have any advice?
Thank.
Here's 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>
source to share
First, you have to use a browser checker to read the error (s) anyway, collecting data like this with a simple loop is not a good idea as you can see that you have an orphan comma char after the last item - JavaScript does not accept this.
The best option is to create a JSON object in a controller action and pass it as a parameter for the view. This will ensure that you don't have any syntax errors like orphan commas, closed parentheses, etc. Also if there are no elements, it will generate valid JS code like
var data = google.visualization.arrayToDataTable([]);
(empty array)
Java pseudocode looks like this (of course, in your case, you need to iterate over your collection to populate 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>
As a result, the HTML code in the browser:
<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>
source to share