Simple pv.Rule Samples

Sample 1

---

<script type="text/javascript+protovis"> 
    /* The root panel. */ 
    var vis = new pv.Panel()
    .width(200) 
    .height(150) 
    .fillStyle("rgba(255,0,0,0.2)"); 
     
    vis.add(pv.Rule) 
        .bottom(1) 
        .strokeStyle("black"); 
         
    vis.render(); 
</script>

---

Output :

Sample 2

---

<script type="text/javascript+protovis"> 
    /* The root panel. */ 
    var vis = new pv.Panel()
    .width(200) 
    .height(150) 
    .fillStyle("rgba(255,0,0,0.2)"); 
     
    vis.add(pv.Rule) 
        .data([10,20,40]) 
        .bottom(function(d) d) 
        .strokeStyle("black"); 
         
    vis.render(); 
</script>

---

Output :

Sample 3

---

<script type="text/javascript+protovis"> 
    /* The root panel. */ 
    var vis = new pv.Panel()
    .width(200) 
    .height(150) 
    .fillStyle("rgba(255,0,0,0.2)"); 
     
    vis.add(pv.Rule) 
        .data([10,20,40]) 
        .left(function(d) d) 
        .strokeStyle("black"); 
         
    vis.render(); 
</script>

---

Output :

Reference : http://vis.stanford.edu/protovis/docs/rule.html

Set Panel's Background Color

This is the sample code to fill our panel with color using fillStyle method. We can use following color format :

• #rgb
• #rrggbb
• rgb(rvalue, gvalue, bvalue)
• rgb(rvalue%, gvalue%, bvalue%)
• hsl(rvalue%, gvalue%, bvalue%)
• rgba(rvalue, gvalue, bvalue,alphavalue%)
• hsla(value/value%,value/value%, value/value%, alphavalue%)

---

<div id="fig">
<script type="text/javascript+protovis">
/* The root panel. */
var vis = new pv.Panel()
.width(400)
.height(300)
.fillStyle("#ff0000"); // Fill the background with red
vis.render();
</script>
</div>

---

Output :