CDE: Protovis Scatter Plot

En este tutorial veremos cómo añadir y configurar un Scatter Plot en nuestros Dashboards CDE, utilizando Protovis.
 
Aquí el código utilizado:
 
function f(vis,queryResult){

var data = queryResult.resultset;
var myself = this;

var w = myself.placeholder().width()-40,
    h = myself.placeholder().height()-40,
    yMax = pv.max(data,function(d){return d[0]}),
    xMax = pv.max(data,function(d){return d[1]}),
    zMax = pv.max(data,function(d){return d[2]}),
    y = pv.Scale.linear(0, yMax).range(0, h),
    x = pv.Scale.linear(0, xMax).range(0, w),
    z = pv.Scale.linear(0, zMax/2, zMax).range("red","blue" ,"green");

vis = vis.add(pv.Panel).width(w).height(h)
    .bottom(30).left(30).right(10).top(10)
    .strokeStyle("#d8cbbb");

vis.add(pv.Rule)
    .data(x.ticks())
    .left(x)
    .strokeStyle("#d8cbbb")
 .anchor("bottom").add(pv.Label)
    .text(function(d){return Dashboards.numberFormat(d, '$#,##A');});

vis.add(pv.Rule)
    .data(y.ticks())
    .bottom(y)
    .strokeStyle("#d8cbbb")
 .anchor("left").add(pv.Label)
    .text(y.tickFormat);
    
vis.add(pv.Dot).data(data)
    .left(function(d){ return x(d[1])})
    .bottom(function(d){ return y(d[0])})
    .strokeStyle(function(d){ return z(d[2])})
    .fillStyle(function(d){ return z(d[2]).alpha(.2)})
    .text(function(d){ return d[3]})
    .event("mouseover", pv.Behavior.tipsy({gravity: 'n', fade: true}));

}
 
 
Si les gustó (ya saben) manito arriba, ya que eso me impulsa a seguir subiendo videos
 
CURSOS PENTAHO:

Media: 5 (2 votos)