javascript - Draw an arbitrary number of lines on a protovis chart -
my goal
i'm trying add arbitrary number of vertical lines chart in protovis. given array of x-intercept values, i'd loop on array , draw vertical line every intercept value. right now, i'm able draw fixed number of lines, having trouble generalizing.
what i've done
i've made jsfiddle showing how can add fixed number of lines graph, , reproduced code below. here, i've added 2 lines explicitly coding x_value0 , x_value1. in code, there 2 pieces of protovis code relevant, i've labelled section a , section b. section a protovis function defines line drawn, , section b calls functions.
// x intercept values hard coded var x_value0 = 30; var x_value1 = 70; new pvc.metricdotchart({ canvas: "cccexample", width: 500, height: 400, axisgrid: true, axiszeroline: false, selectable: true, extensionpoints: { plot_add: function() { var panel = new pv.panel() // quadrant rules above grid, below dots. .zorder(-1) //// // section begin //// // line 1 .def('l0', function() { var ccc = this.getcontext(); var scale = ccc.chart.axes.base.scale; var li = ccc.panel._layoutinfo; return li.paddings.left + scale(x_value0); }) // line 2 .def('l1', function() { var ccc = this.getcontext(); var scale = ccc.chart.axes.base.scale; var li = ccc.panel._layoutinfo; return li.paddings.left + scale(x_value1); }) //// // section end //// ; //// // section b begin //// // line 1 panel .add(pv.rule) .top(0) .left (function() { return this.parent.l0(); }) .height(function() { return this.parent.height(); }) .width(null) ; // line 2 panel .add(pv.rule) .top(0) .left (function() { return this.parent.l1(); }) .height(function() { return this.parent.height(); }) .width(null) ; //// // section b end //// return panel; } } }) .setdata(testldot2) .render(); what i'd instead define xvalues array, , loop on that. i'm kind of half way there in attempt. made second jsfiddle try move xvalues array. problem can't seem wrap relevant part in for-loop. code jsfiddle is:
// x intercept values in array var x_values = [30, 60]; new pvc.metricdotchart({ canvas: "cccexample", width: 500, height: 400, axisgrid: true, axiszeroline: false, selectable: true, extensionpoints: { plot_add: function() { var panel = new pv.panel() // quadrant rules above grid, below dots. .zorder(-1) //// // section begin - how can put inside of loop? //// // line 1 .def('l0', function() { var ccc = this.getcontext(); var scale = ccc.chart.axes.base.scale; var li = ccc.panel._layoutinfo; return li.paddings.left + scale(x_values[0]); }) // line 2 .def('l1', function() { var ccc = this.getcontext(); var scale = ccc.chart.axes.base.scale; var li = ccc.panel._layoutinfo; return li.paddings.left + scale(x_values[1]); }) //// // section end //// ; //// // section b begin - i'm able loop part //// (i = 0; < x_values.length; i++) { // name of .def function defined above var fn_name = 'this.parent.l' + + '()'; // draw lines panel .add(pv.rule) .top(0) .left (function() { return eval(fn_name); }) .height(function() { return this.parent.height(); }) .width(null) ; } //// // section b end //// return panel; } } }) .setdata(testldot2) .render(); i'm able wrap section b inside of for-loop, , i'd similar section a:
for (i = 0; < x_values.length; i++) { .def('l'+i, function() { var ccc = this.getcontext(); var scale = ccc.chart.axes.base.scale; var li = ccc.panel._layoutinfo; return li.paddings.left + scale(x_values[i]); }) } or similar. problem protovis doesn't seem allow me put code around .def block.
i've tried generating string each item in x_values array, contains definition of section a function, , calling inside of protovis code using eval(), hasn't worked far.
any here appreciated!
edit - more progress
i seem have gotten closer want eliminating section a , moving function inside of section b. see my latest jsfiddle code. previously, in section b, .left line called 1 of functions defined in section a. instead, moved function's definition inside of .left line of code, so:
//// // section b begin //// (var = 0; < x_values.length; i++) { var x = x_values[i]; // lines panel .add(pv.rule) .top(0) .left (function() { var ccc = this.parent.getcontext(); var scale = ccc.chart.axes.base.scale; var li = ccc.panel._layoutinfo; return li.paddings.left + scale(x); }) .height(function() { return this.parent.height(); }) .width(null) ; } this running now, still not quite right: it's drawing last line in x_values array , overwriting previous ones. ideas?
replace loop following code
panel .add(pv.rule) .data(x_values) .top(0) .left ( function(d) { this.index * 20 + 15 var ccc = this.parent.getcontext(); var scale = ccc.chart.axes.base.scale; var li = ccc.panel._layoutinfo; return li.paddings.left + scale(d); }) .height(function() { return this.parent.height(); }) .width(null) ;
Comments
Post a Comment