<script type="text/javascript+protovis">
/* Sizing and scales. */
var w = 400,
h = 400,
maxx = 110,
maxy = 1,
maxy2 = 100,
x = pv.Scale.linear(0, maxx).range(0, w),
y = pv.Scale.linear(0, maxy).range(0, h),
y2 = pv.Scale.linear(0, maxy2).range(0, h),
c = pv.Scale.log(1, 100).range("orange", "brown");
/* The root panel. */
var vis = new pv.Panel()
.width(w+40)
.height(h+20)
.bottom(20)
.left(20)
.right(10)
.top(5);
/* Y-axis and ticks. */
vis.add(pv.Rule)
.data(y.ticks())
.width(w)
.bottom(y)
.strokeStyle(function(d) d ? "#eee" : "#000")
.anchor("left").add(pv.Label)
//.visible(function(d) d > 0 && d < 1)
.text(y.tickFormat);
// For y2
vis.add(pv.Rule)
.data(y2.ticks())
.width(w)
.bottom(y2)
.strokeStyle(function(d) d ? "#eee" : "#000")
.anchor("right").add(pv.Label).left(w+5)
//.visible(function(d) d > 0 && d < 1)
.text(y.tickFormat)
.textStyle("#aaa");
/* X-axis and ticks. */
vis.add(pv.Rule)
.data(x.ticks())
.bottom(0)
.height(h)
.left(x)
.strokeStyle(function(d) (d==0 || d==110) ? "#000" : "#eee")
.anchor("bottom").add(pv.Label)
.visible(function(d) d > 0 && d <= 100)
.text(x.tickFormat);
var mydata1 = [[10,0.5],[20,0.3],[30,0.2],[40,0.4],[50,0.6],[60,0.6]];
var mydata2 = [[10,0.1],[20,0.2],[30,0.4]];
var mydata3 = [[10,43],[20,62],[30,40],[40,45],[50,43],[60,42],[70,40],[80,45]];
var line1 = vis.add(pv.Line)
.data(mydata1)
.left(function(d) d[0] * w/maxx)
.bottom(function(d) d[1] * h / maxy);
var line2 = vis.add(pv.Line)
.data(mydata2)
.left(function(d) d[0] * w/maxx)
.bottom(function(d) d[1] * h / maxy)
.strokeStyle("red");
var line3 = vis.add(pv.Line)
.data(mydata3)
.left(function(d) d[0] * w/maxx)
.bottom(function(d) d[1] * h / maxy2)
.strokeStyle("green");
vis.add(pv.Dot)
.left(mydata1[mydata1.length-1][0] * w/maxx)
.bottom(mydata1[mydata1.length-1][1] * h / maxy)
.anchor("right")
.add(pv.Label)
.text("Legend 1")
.textStyle("#1F77B4");
vis.add(pv.Dot)
.left(mydata2[mydata2.length-1][0] * w/maxx)
.bottom(mydata2[mydata2.length-1][1] * h / maxy)
.strokeStyle("red")
.radius(0)
.anchor("right")
.add(pv.Label)
.text("Legend 2")
.textStyle("red");
vis.add(pv.Dot)
.left(mydata3[mydata3.length-1][0] * w/maxx)
.bottom(mydata3[mydata3.length-1][1] * h/maxy2)
.strokeStyle("green")
.radius(0)
.anchor("right")
.add(pv.Label)
.text("Legend 3")
.textStyle("green");
vis.render();
</script>
/* Sizing and scales. */
var w = 400,
h = 400,
maxx = 110,
maxy = 1,
maxy2 = 100,
x = pv.Scale.linear(0, maxx).range(0, w),
y = pv.Scale.linear(0, maxy).range(0, h),
y2 = pv.Scale.linear(0, maxy2).range(0, h),
c = pv.Scale.log(1, 100).range("orange", "brown");
/* The root panel. */
var vis = new pv.Panel()
.width(w+40)
.height(h+20)
.bottom(20)
.left(20)
.right(10)
.top(5);
/* Y-axis and ticks. */
vis.add(pv.Rule)
.data(y.ticks())
.width(w)
.bottom(y)
.strokeStyle(function(d) d ? "#eee" : "#000")
.anchor("left").add(pv.Label)
//.visible(function(d) d > 0 && d < 1)
.text(y.tickFormat);
// For y2
vis.add(pv.Rule)
.data(y2.ticks())
.width(w)
.bottom(y2)
.strokeStyle(function(d) d ? "#eee" : "#000")
.anchor("right").add(pv.Label).left(w+5)
//.visible(function(d) d > 0 && d < 1)
.text(y.tickFormat)
.textStyle("#aaa");
/* X-axis and ticks. */
vis.add(pv.Rule)
.data(x.ticks())
.bottom(0)
.height(h)
.left(x)
.strokeStyle(function(d) (d==0 || d==110) ? "#000" : "#eee")
.anchor("bottom").add(pv.Label)
.visible(function(d) d > 0 && d <= 100)
.text(x.tickFormat);
var mydata1 = [[10,0.5],[20,0.3],[30,0.2],[40,0.4],[50,0.6],[60,0.6]];
var mydata2 = [[10,0.1],[20,0.2],[30,0.4]];
var mydata3 = [[10,43],[20,62],[30,40],[40,45],[50,43],[60,42],[70,40],[80,45]];
var line1 = vis.add(pv.Line)
.data(mydata1)
.left(function(d) d[0] * w/maxx)
.bottom(function(d) d[1] * h / maxy);
var line2 = vis.add(pv.Line)
.data(mydata2)
.left(function(d) d[0] * w/maxx)
.bottom(function(d) d[1] * h / maxy)
.strokeStyle("red");
var line3 = vis.add(pv.Line)
.data(mydata3)
.left(function(d) d[0] * w/maxx)
.bottom(function(d) d[1] * h / maxy2)
.strokeStyle("green");
vis.add(pv.Dot)
.left(mydata1[mydata1.length-1][0] * w/maxx)
.bottom(mydata1[mydata1.length-1][1] * h / maxy)
.anchor("right")
.add(pv.Label)
.text("Legend 1")
.textStyle("#1F77B4");
vis.add(pv.Dot)
.left(mydata2[mydata2.length-1][0] * w/maxx)
.bottom(mydata2[mydata2.length-1][1] * h / maxy)
.strokeStyle("red")
.radius(0)
.anchor("right")
.add(pv.Label)
.text("Legend 2")
.textStyle("red");
vis.add(pv.Dot)
.left(mydata3[mydata3.length-1][0] * w/maxx)
.bottom(mydata3[mydata3.length-1][1] * h/maxy2)
.strokeStyle("green")
.radius(0)
.anchor("right")
.add(pv.Label)
.text("Legend 3")
.textStyle("green");
vis.render();
</script>
Multi Absis |
No comments:
Post a Comment