Saturday, May 14, 2011

Line Chart - Multiple Absis

<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(1100).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