I tested this code:
public static void main(String[] args)
{
Application.launch(args);
}
#Override
public void start(Stage primaryStage)
{
// Image
Image image = new Image("za.png");
ImageView imageView = new ImageView();
imageView.setImage(image);
// Text
Text t = new Text();
t.setText("Do you want to quit?");
// Buttons
Button btnYes = new Button("Yes");
Button btnNo = new Button("No");
btnYes.setStyle("-fx-background-color:\n"
+ " #090a0c,\n"
+ " linear-gradient(#38424b 0%, #1f2429 20%, #191d22 100%),\n"
+ " linear-gradient(#20262b, #191d22),\n"
+ " radial-gradient(center 50% 0%, radius 100%, rgba(114,131,148,0.9), rgba(255,255,255,0));\n"
+ " -fx-background-radius: 5,4,3,5;\n"
+ " -fx-background-insets: 0,1,2,0;\n"
+ " -fx-text-fill: white;\n"
+ " -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 5, 0.0 , 0 , 1 );\n"
+ " -fx-font-family: \"Arial\";\n"
+ " -fx-text-fill: linear-gradient(white, #d0d0d0);\n"
+ " -fx-font-size: 12px;\n"
+ " -fx-padding: 10 20 10 20;");
btnNo.setStyle("-fx-background-color:\n"
+ " #090a0c,\n"
+ " linear-gradient(#38424b 0%, #1f2429 20%, #191d22 100%),\n"
+ " linear-gradient(#20262b, #191d22),\n"
+ " radial-gradient(center 50% 0%, radius 100%, rgba(114,131,148,0.9), rgba(255,255,255,0));\n"
+ " -fx-background-radius: 5,4,3,5;\n"
+ " -fx-background-insets: 0,1,2,0;\n"
+ " -fx-text-fill: white;\n"
+ " -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 5, 0.0 , 0 , 1 );\n"
+ " -fx-font-family: \"Arial\";\n"
+ " -fx-text-fill: linear-gradient(white, #d0d0d0);\n"
+ " -fx-font-size: 12px;\n"
+ " -fx-padding: 10 20 10 20;");
// Buttons layout
HBox hbox = new HBox(8); // spacing = 8
hbox.setStyle("-fx-padding: 15; -fx-font-size: 15pt;");
hbox.getChildren().addAll(btnYes, btnNo);
hbox.setAlignment(Pos.BASELINE_RIGHT);
BorderPane bp = new BorderPane();
bp.setStyle("-fx-background-color: linear-gradient(#ffffff,#f3f3f4);\n"
+ " -fx-border-width: 1 1 1 1;\n"
+ " -fx-border-color: #b4b4b4 transparent #b4b4b4 transparent;\n"
+ " -fx-font-size: 1.083333em;\n"
+ " -fx-text-fill: #292929;");
bp.setPadding(new Insets(10, 20, 10, 20));
//Button btnTop = new Button("Top");
bp.setTop(null);
//Button btnLeft = new Button("Left");
bp.setLeft(imageView);
//Button btnCenter = new Button("Center");
bp.setCenter(t);
//Button btnRight = new Button("Right");
bp.setRight(null);
//Button btnBottom = new Button("Bottom");
bp.setBottom(hbox);
Scene scene = new Scene(bp, 500, 200);
primaryStage.setScene(scene);
primaryStage.show();
}
I get this error:
Executing com.javafx.main.Main from /home/rcbandit/Desktop/test/DX-57DC/dist/run429319394/DX-57DC.jar using platform /opt/jdk1.8.0/bin/java
Exception in Application start method
java.lang.reflect.InvocationTargetException
at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:57)
at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
at java.lang.reflect.Method.invoke(Method.java:491)
at com.javafx.main.Main.launchApp(Main.java:642)
at com.javafx.main.Main.main(Main.java:805)
Caused by: java.lang.RuntimeException: Exception in Application start method
at com.sun.javafx.application.LauncherImpl.launchApplication1(LauncherImpl.java:403)
at com.sun.javafx.application.LauncherImpl.access$000(LauncherImpl.java:47)
at com.sun.javafx.application.LauncherImpl$1.run(LauncherImpl.java:115)
at java.lang.Thread.run(Thread.java:724)
Caused by: java.lang.IllegalArgumentException: Invalid URL: Invalid URL or resource not found
at javafx.scene.image.Image.validateUrl(Image.java:986)
at javafx.scene.image.Image.<init>(Image.java:538)
at com.dx57dc.main.DX57DC.start(DX57DC.java:28)
at com.sun.javafx.application.LauncherImpl$5.run(LauncherImpl.java:319)
at com.sun.javafx.application.PlatformImpl$5.run(PlatformImpl.java:215)
at com.sun.javafx.application.PlatformImpl$4$1.run(PlatformImpl.java:179)
at com.sun.javafx.application.PlatformImpl$4$1.run(PlatformImpl.java:176)
at java.security.AccessController.doPrivileged(Native Method)
at com.sun.javafx.application.PlatformImpl$4.run(PlatformImpl.java:176)
at com.sun.glass.ui.InvokeLaterDispatcher$Future.run(InvokeLaterDispatcher.java:76)
at com.sun.glass.ui.gtk.GtkApplication._runLoop(Native Method)
at com.sun.glass.ui.gtk.GtkApplication$3$1.run(GtkApplication.java:82)
... 1 more
Caused by: java.lang.IllegalArgumentException: Invalid URL or resource not found
at javafx.scene.image.Image.validateUrl(Image.java:979)
... 12 more
Java Result: 1
Deleting directory /home/rcbandit/Desktop/test/DX-57DC/dist/run429319394
jfxsa-run:
BUILD SUCCESSFUL (total time: 6 seconds)
I placed the image file next to the java source code file but the file is not found. Can you tell me how to fix this?
Image image = new Image("za.png");
The constructor of this needs to point to a URI, so if you're pointing to something on the file system it'd be:
Image image = new Image("file:za.png");
Alternatively, you could do:
Image image = new Image(new File("za.png").toURI().toString());
...which is arguably neater. If the image is bundled in your jar rather than on the filesystem, you can obtain the URI like so:
Image image = new Image(getClass().getResource("za.jpg").toURI().toString());
Most methods / constructors in JavaFX that take a string as a parameter in this way (i.e. specifying a resource) do so via string URI's rather than just a plain file path or URL.
Do
javafx.scene.image.Image image = new javafx.scene.image.Image(getClass().getResource("za.jpg").toExternalForm());
ImageView iv = new ImageView(image);
Or simply
ImageView iv = new ImageView(getClass().getResource("za.jpg").toExternalForm());
Related
I recreated the scrolling text box tutorial in my game. However, it is running a bit glitchy on mobile. For example, if I swipe up, the text first goes down for a second and then follows my finger up. You’ll see the problem if you open the tutorial on mobile. Any thoughts? I copied my code below.
var graphics = scene.make.graphics();
graphics.fillRect(x, y + 10, width, height - 20);
var mask = new Phaser.Display.Masks.GeometryMask(scene, graphics);
var text = scene.add.text(x + 20, y + 20, content, {
fontFamily: 'Assistant',
fontSize: '28px',
color: '#000000',
wordWrap: { width: width - 20 }
}).setOrigin(0);
text.setMask(mask);
var minY = height - text.height - 20;
if (text.height <= height - 20) {
minY = y + 20;
}
// The rectangle they can 'drag' within
var zone = scene.add.zone(x, y - 3, width, height + 6).setOrigin(0).setInteractive({useHandCursor: true});
zone.on('pointermove', function (pointer) {
if (pointer.isDown) {
text.y += (pointer.velocity.y / 10);
text.y = Phaser.Math.Clamp(text.y, minY, y + 20);
}
});
I had the same issue. My solution is using "pointer.y" instead of "pointer.velocity.y".
Here is my code:
var previousPointerPositionY;
var currentPointerPositionY;
zone.on('pointerdown', function (pointer) {
previousPointerPositionY = pointer.y;
});
zone.on('pointermove', function (pointer) {
if (pointer.isDown) {
currentPointerPositionY = pointer.y;
if(currentPointerPositionY > previousPointerPositionY){
text.y += 5;
} else if(currentPointerPositionY < previousPointerPositionY){
text.y -= 5;
}
previousPointerPositionY = currentPointerPositionY;
text.y = Phaser.Math.Clamp(text.y, -360, 150);
}
});
What I have tried is
CAShapeLayer shapeLayer = new CAShapeLayer();
shapeLayer.Path = new CGPath();
shapeLayer.Path.AddLines(new CGPoint [] { startingPoint, endingPoint});
shapeLayer.StrokeColor = UIColor.Blue.CGColor;
shapeLayer.LineWidth = (System.nfloat)3.0;
shapeLayer.FillColor = UIColor.Clear.CGColor;
var width = Math.Abs(latestPoint.X - initioalPoint.X) + initioalPoint.X;
var height = Math.Abs(latestPoint.Y - initioalPoint.Y) + initioalPoint.Y;
var padding = 10;
shapeLayer.Frame = new CGRect(5, 5, width + padding - 2, height + padding - 2);
var view = new UIView();
view.Layer.AddSubLayer(shapeLayer);
CanvasView canvasDrawLine = new CanvasView(subView);
canvasDrawLine.Frame = new CGRect(5, 5, width + padding, height + padding[![enter image description here][1]][1]);
Public Class CanvasView : UIView
{
public CanvasView(drawline)
{
drawLine.ClipsToBounds = true;
var width = Math.Abs(endingPoint.X - initioalPoint.X) + initioalPoint.X;
var height = Math.Abs(endingPoint.Y - initioalPoint.Y) + initioalPoint.Y;
var padding = 10;
drawLine.Frame = new CGRect(5,5, width + padding, height + padding);
this.AddSubview(drawLine);
setUpGestures();
}
}
scrollView.AddSubview(canvasDrawLine );
when I set the width and height of the frame default, my gestures not working properly, for example If I have apply a pan gesture to the draw line even out of the draw line also pan gesture is working.How can I restrict all gestures are working only draw line area.
you can calculate bounds of your area covered by line :
CoreGraphics.CGPoint initialPoint = new CoreGraphics.CGPoint(1, 2);
CoreGraphics.CGPoint latestPoint = new CoreGraphics.CGPoint(1, 2);
var width = Math.Abs(latestPoint.X - initialPoint.X);
var height = Math.Abs(latestPoint.X - initialPoint.X);
var padding = 10;
subView.Frame = new CGRect(0, 0, width+padding, height+padding);
I have created sample code with simple view controller class -- Have assigned red colour to view containing line. And its working perfect. gesture recogniser is working on red part only --where line is.
public partial class ViewController : UIViewController
{
protected ViewController(IntPtr handle) : base(handle)
{
// Note: this .ctor should not contain any initialization logic.
}
public override void ViewDidLoad()
{
base.ViewDidLoad();
CGPoint initioalPoint = new CGPoint(12, 12);
CGPoint latestPoint = new CGPoint(80, 45);
var shapeLayer = new CAShapeLayer();
shapeLayer.Path = new CGPath();
shapeLayer.Path.AddLines(new CGPoint[] { initioalPoint, latestPoint });
shapeLayer.StrokeColor = UIColor.Blue.CGColor;
shapeLayer.LineWidth = (System.nfloat)3.0;
shapeLayer.FillColor = UIColor.Clear.CGColor;
var subView = new UIView();
var width = Math.Abs(latestPoint.X - initioalPoint.X) + initioalPoint.X;
var height = Math.Abs(latestPoint.Y - initioalPoint.Y) + initioalPoint.Y;
var padding = 10;
subView.Frame = new CGRect(5, 5, width + padding, height + padding);
subView.Layer.AddSublayer(shapeLayer);
shapeLayer.Frame = new CGRect(5, 5, width + padding-2, height + padding-2);
subView.BackgroundColor = UIColor.Red;
var mainView = new UIView();
mainView.Frame = new CGRect(40, 40, width + padding+200, height + padding+200);
mainView.AddSubview(subView);
mainView.BackgroundColor = UIColor.Yellow;
this.View.AddSubview(mainView);
UITapGestureRecognizer tap = new UITapGestureRecognizer();
tap.AddTarget((obj) => {new UIAlertView("tapped","",null,"ok",null).Show();});
subView.AddGestureRecognizer(tap);
//UITapGestureRecognizer tap = new UITapGestureRecognizer(() => Console.WriteLine("tap"));
// Perform any additional setup after loading the view, typically from a nib.
}
public override void DidReceiveMemoryWarning()
{
base.DidReceiveMemoryWarning();
// Release any cached data, images, etc that aren't in use.
}
}
///To check if Touch Point is inside Given Polygon::
CGPoint pt1 = new CGPoint(initioalPoint.X - 50, initioalPoint.Y - 50);
CGPoint pt2 = new CGPoint(initioalPoint.X + 50, initioalPoint.Y - 50);
CGPoint pt3 = new CGPoint(latestPoint.X - 50, latestPoint.Y + 50);
CGPoint pt4 = new CGPoint(latestPoint.X + 50, latestPoint.Y + 50);
UIBezierPath path = new UIBezierPath();
path.MoveTo(pt1);
path.AddLineTo(pt2);
path.AddLineTo(pt3);
path.AddLineTo(pt4);
path.AddLineTo(pt1);
if (!path.ContainsPoint(ToucPoint))
return;
I've seen this question and many other examples, but it isn't helping. I'm trying the last example on this page and after 5 seconds, I want the curved path that is being drawn, to completely disappear and 5 more seconds later, I want a new path to be created.
I've tried the below code, but although the entire svg element itself is removed, when I use appendGraph() to created the svg and the path again, the same old path re-appears. How can I ensure that the old path is completely removed and that the tick function also does not get called when the graph is removed?
The fiddle is here: http://jsfiddle.net/nav9/5uygqj9v/
And the code is:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style>
svg {
font: 10px sans-serif;
}
.noselect {
/* these are to disable text selection */
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
opacity: 0.5;
shape-rendering: crispEdges;
}
rect.zoom {
stroke: steelblue;
fill-opacity: 0.3;
}
#placeholder {margin: 10px 5px 15px 70px;}
</style>
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
</head>
<body>
<div id="placeholder" ></div>
<script>
//---------globals
var timer = null, interval = 500, value = 0;
var value1 = 0;
var n = 143, duration = interval, now = new Date(Date.now() - duration), count = 0, data = d3.range(n).map(function() { return 0; });
var margin = {top: 20, right: 40, bottom: 50, left: 60}, width = 580 - margin.right, height = 420 - margin.top - margin.bottom;
var x = d3.time.scale().domain([now - (n - 2) * duration, now - duration]).range([0, width]);
var y = d3.scale.linear().domain([-1, 1]).range([height, 0]);
var line = d3.svg.line().interpolate("basis")
.x(function(d, i) { return x(now - (n - 1 - i) * duration); })
.y(function(d, i) { return y(d); });
var svg, path, yaxis, axis;
//--------program starts
appendGraph();
tick();
value1 = 0;
setTimeout(function() {removeGraph();}, 5000);
setTimeout(function() {addGraphAgain();}, 10000);
//-------------------------------functions -------------------------------
function appendGraph()
{
svg = d3.select("body").select("#placeholder").append("p").append("svg:svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.attr("id", "mainSVG")
.style("margin-left", -margin.left + "px")
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("defs").append("clipPath")
.attr("id", "clip")
.append("rect")
.attr("width", width)
.attr("height", height);
axis = svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(x.axis = d3.svg.axis().scale(x).orient("bottom"));
yaxis = svg.append("g")
.attr("class", "y axis")
.call(y.axis = d3.svg.axis().scale(y).orient("left"));
path = svg.append("g")
.attr("clip-path", "url(#clip)")
.append("path")
.data([data])
.attr("id", "line1")
.attr("fill", "none")
.attr("stroke", "black")
.attr("stroke-width", "1.5px")
.style("visibility","visible");
}//appendGraph
//TODO: These tick functions could be simplified to handle more lines on the graph
function tick()
{
// push the accumulated count onto the back, and reset the count
value1 = Math.random() * 100;
if (value1 >= 0) {data.push(value1);} else {data.push(0);}//ensure that no NaN or undefined values corrupt the range
// update the domains
now = new Date();
x.domain([now - (n - 2) * duration, now - duration]);
count = 0;
// redraw the lines
svg.select("#line1").attr("d", line).attr("transform", null);
// slide the line left
path.transition().duration(duration).ease("linear").attr("transform", "translate(" + x(now - (n - 1) * duration) + ")").each("end", tick);
y.domain([0, 100]);
y = d3.scale.linear().domain([0, 100]).range([height, 0]);
yaxis.call(y.axis = d3.svg.axis().scale(y).orient("left"));
// pop the old data point off the front
data.shift();
console.log("tick being called");
}
function removeGraph()
{
path.transition().duration(0).each(function() { this.__transition__.active = 0; });//at least this is stopping tick from being called
svg.selectAll("*").remove();
//-------tried these too
// d3.select("#mainSVG").remove("svg");
// d3.select("#line1").remove("path");
// path.remove();
//d3.selectAll("path").attr("d", "Z");
console.log("REMOVED");
}//removeGraph
function addGraphAgain()
{
appendGraph();
tick();
value1 = 0;
console.log("ADDED AGAIN");
}//addGraphAgain
</script>
</body>
</html>
Not an exact answer to this question, but since the reason I asked this was because I wanted to have phases where I wanted to send null inputs to the graph and there seemed no other way to do it other than to remove the line and replace it with a new line.
The trick to handle null or NaN data or missing data in d3.js or to simply not display data for a while is to use defined.
A working example of it here and in the line transition, it's like this:
I supply a random number at if (counter%5==0) ran = null;data.push(ran); and .defined(function(d) { return d != null; }) takes care of the null, by not drawing a line there.
<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg {
font: 10px sans-serif;
}
.line {
fill: none;
stroke: #000;
stroke-width: 1.5px;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var n = 40,
random = d3.random.normal(0, .2),
data = d3.range(n).map(random);
var margin = {top: 20, right: 20, bottom: 20, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scale.linear()
.domain([0, n - 1])
.range([0, width]);
var y = d3.scale.linear()
.domain([-1, 1])
.range([height, 0]);
var line = d3.svg.line()
.defined(function(d) { return d != null; })
.x(function(d, i) { return x(i); })
.y(function(d, i) { return y(d); });
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("defs").append("clipPath")
.attr("id", "clip")
.append("rect")
.attr("width", width)
.attr("height", height);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + y(0) + ")")
.call(d3.svg.axis().scale(x).orient("bottom"));
svg.append("g")
.attr("class", "y axis")
.call(d3.svg.axis().scale(y).orient("left"));
var path = svg.append("g")
.attr("clip-path", "url(#clip)")
.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);
var counter = 0;
tick();
function tick()
{
// push a new data point onto the back
var ran = random();
counter++;
if (counter%5==0) ran = null;
data.push(ran);
// redraw the line, and slide it to the left
path
.attr("d", line)
.attr("transform", null)
.transition()
.duration(500)
.ease("linear")
.attr("transform", "translate(" + x(-1) + ",0)")
.each("end", tick);
// pop the old data point off the front
data.shift();
}
</script>
I have a TextField in my JavaFX application. I want to programmatically display a message on the right side of the text (like the validation message). I thought of using Popup and setting the Label with message in that Popup. But I'm not sure how I can position this to the right side of the text field. Below is the sample code for this. Can you please help me with this?
public void start(Stage primaryStage) {
primaryStage.setTitle("JavaFX Welcome");
GridPane grid = new GridPane();
grid.setAlignment(Pos.CENTER);
grid.setHgap(10);
grid.setVgap(10);
grid.setPadding(new Insets(25, 25, 25, 25));
Text scenetitle = new Text("Welcome");
scenetitle.setFont(Font.font("Tahoma", FontWeight.NORMAL, 20));
grid.add(scenetitle, 0, 0, 2, 1);
Label userName = new Label("User Name:");
grid.add(userName, 0, 1);
TextField userTextField = new TextField();
grid.add(userTextField, 1, 1);
Label pw = new Label("Password:");
grid.add(pw, 0, 2);
PasswordField pwBox = new PasswordField();
grid.add(pwBox, 1, 2);
Label label=new Label();
label.setText("This is an error message");
final Text actiontarget = new Text();
grid.add(actiontarget, 1, 6);
final Popup popup = new Popup();
popup.getContent().add(label);
//Want to display this popup to the right of the userTextField.
Scene scene = new Scene(grid, 300, 275);
primaryStage.setScene(scene);
primaryStage.show();
}
After showing the stage, do
Bounds userTextFieldBounds = userTextField.getBoundsInLocal();
Point2D popupLocation = userTextField.localToScreen(userTextFieldBounds.getMaxX(), userTextFieldBounds.getMinY());
popup.show(userTextField, popupLocation.getX(), popupLocation.getY());
The localToScreen(...) method was introduced in Java 8; if you are in an earlier version you will need
Bounds userTextFieldBounds = userTextField.getBoundsInLocal();
Point2D popupLocation = userTextField.localToScene(userTextFieldBounds.getMaxX(), userTextFieldBounds.getMinY());
popup.show(userTextField,
popupLocation.getX()+scene.getX()+primaryStage.getX(),
popupLocation.getY()+scene.getY()+primaryStage.getY());
im new to this d3.js stuff and i'm willing to learn it, i'm doing a site and i need my path to be open at the end and i want to add some tooltips to it, i've done read a few documents over the web and none made sense in my code, can anyone shed some light into it please, thanks in advance!! :)
my code is the following, it generates two graphics:
function getDateX(day2)
{
day = new String(day2);
return new Date(day.substring(0, 4) + '-' + day.substring(4, 6) + '-' + day.substring(6, 8));
}
function plotData(id, data, type)
{
var margin = {top: 40, right: 15, bottom: 30, left: 55},
width = 455,
height = 270 - margin.top - margin.bottom;
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
var xAxis = d3.svg.axis().scale(x).orient("bottom").ticks(data.length < 7 ? data.length : (data.length > 14 ? data.length / 5 : data.length / 3) ).tickFormat(d3.time.format("%d/%m"));
var yAxis = d3.svg.axis().scale(y).orient("left").ticks(5);
var area = d3.svg.area()
.x(function(d) { return x(getDateX(d.day)); })
.y0(height)
.y1(function(d) { return y( type == 'score' ? parseFloat(d.score) : d.good + d.neutral + d.bad)});
var svg = d3.select("#" + id)
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.data(data);
x.domain(d3.extent(data, function(d) { return getDateX(d.day); }));
var min = d3.min(data, function(d) { return parseFloat(d.score); });
if(min > 6)
min = 6;
else if(min > 1)
min--;
if(type == 'score')
y.domain([min, 10]);
else
y.domain([0, d3.max(data, function(d) { return d.good + d.neutral + d.bad; })]);
svg.append("path").datum(data).attr("class", "area").attr("d", area);
svg.append("g").attr("class", "x axis").attr("transform", "translate(0," + height + ")").call(xAxis);
svg.append("g").attr("class", "y axis").call(yAxis);
}
var scores =
[
<%
boolean appendComma = false;
for(MovieGrade grade : info.getGrades())
{
if(appendComma)
out.print(",");
else
appendComma = true;
out.print("{\"day\":" + grade.getDay() + ", \"good\":" + grade.getGood() + ", \"neutral\":" + grade.getNeutral() + ", \"bad\":" + grade.getBad() + ", \"score\":\"" + grade.getScore() + "\"}");
}
%>
];
plotData('evolucao-score', scores, 'score');
plotData('evolucao-comments', scores, 'comments');