javascript - What the right way to graph negative numbers in Protovis? -


for simplest use case, bar chart values ranging -10 10, how 1 go coding cleanly using protovis javascript charting library?

by cleanly mean centering axis, showing x , y axis labels, , representing column values of chart negative values fall below y axis , positive values exceed y axis.

here's working example: http://jsfiddle.net/nrabinowitz/yk5by/3/

the important parts of follows:

  • make x-axis scale going min value max value (in case, pv.scale.linear(-10,10).range(0,w); in example, calculate min , max based on data).

  • base width of bar on absolute distance of datum 0:

    .width(function(d) { return math.abs(x(d) - x(0)); }) 
  • then adjust .left() property based on whether datum positive or negative:

    .left(function(d) { return d > 0 ? x(0) : x(0) - this.width(); }); 
  • because we're using simple x-axis scale, adding axis labels super-easy:

    vis.add(pv.label)     .data(x.ticks()) // use pv.range(min, max, 1) here     .left(x); 

Comments

Popular posts from this blog

c# - How to set Z index when using WPF DrawingContext? -

razor - Is this a bug in WebMatrix PageData? -

visual c++ - Using relative values in array sorting ( asm ) -