Anchoring to Panel corners.
18 views
Skip to first unread message
Marvalo
Nov 7, 2011, 7:16:31 AM11/7/11
to protovis
Hi
I need to anchor to corners of a Panel top-left, top-right, bottom-
left and bottom-right. I saw the use of vis.anchor("right bottom") on
this forum and it works only for bottom right in the example below
vis.anchor("right top") doesn't work infact vis.anchor("right ") with
a space after the position right does the same thing. So it looks like
vis.anchor("right bottom") is a red herring and bottom right is the
default if protovis doesn't recognise the anchor position.
I'm wondering if any knows of a good solution for anchoring to the
corners of a Panel
I'm using anchors because my charts are resizable and in my scenario I
want to control the placement of a legend within the margin.
thanks for any help.
M
<head>
<html>
<head>
<title>Test Panel Anchors</title>
<script src="protovis.js" type="text/javascript"></script>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
/* The root panel. */
var vis = new pv.Panel()
.canvas('chart')
.overflow(false)
.fillStyle("#cccccc")
.width(200)
.height(200)
.bottom(50)
.left(50)
.right(50)
.top(50);
vis.anchor("right top")
.add(pv.Dot)
.fillStyle("red");
vis.anchor("right bottom")
.add(pv.Dot)
.fillStyle("yellow");
vis.anchor("right")
.add(pv.Dot)
.fillStyle("blue");
vis.render();
});
</script>
</head>
<body>
<div id="chart"></div>
</body>
</html>
I need to anchor to corners of a Panel top-left, top-right, bottom-
left and bottom-right. I saw the use of vis.anchor("right bottom") on
this forum and it works only for bottom right in the example below
vis.anchor("right top") doesn't work infact vis.anchor("right ") with
a space after the position right does the same thing. So it looks like
vis.anchor("right bottom") is a red herring and bottom right is the
default if protovis doesn't recognise the anchor position.
I'm wondering if any knows of a good solution for anchoring to the
corners of a Panel
I'm using anchors because my charts are resizable and in my scenario I
want to control the placement of a legend within the margin.
thanks for any help.
M
<head>
<html>
<head>
<title>Test Panel Anchors</title>
<script src="protovis.js" type="text/javascript"></script>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
/* The root panel. */
var vis = new pv.Panel()
.canvas('chart')
.overflow(false)
.fillStyle("#cccccc")
.width(200)
.height(200)
.bottom(50)
.left(50)
.right(50)
.top(50);
vis.anchor("right top")
.add(pv.Dot)
.fillStyle("red");
vis.anchor("right bottom")
.add(pv.Dot)
.fillStyle("yellow");
vis.anchor("right")
.add(pv.Dot)
.fillStyle("blue");
vis.render();
});
</script>
</head>
<body>
<div id="chart"></div>
</body>
</html>
Reply all
Reply to author
Forward
0 new messages