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="={
'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>
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./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>
- 1 Can you post the whole call (with the javascript and scala bined)? (It should work, I'm doing this all the time ;)) – Peanut Commented May 7, 2015 at 9:00
- are you using separate javascript file for this and then including in html? – Govind Singh Commented May 7, 2015 at 9:58
- Check your browser's console! It won't work cause JS doesn't accept last ma char, maybe also you'll find other errors – 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 Commented May 7, 2015 at 10:55
2 Answers
Reset to default 4First 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 ma 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 mas, 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>
I think you need to add a quotation marks around the date:
@for(run <- currentPage.getList) {
['@run.runDate.format("yyyy")', @run.successPercentage],
}