Creating a custom Background Canvas

[kanafghan]

While reading the source codes of JIT 2.0.0b (which by the way is an awesome library), I noticed that it is lacking some documentation. For instance creation of custom Background Canvases is not mentioned at all. Actually it took me a while to figure out that it was possible.

I was looking for a way to extend the stacked bar charts with axes. In order to accomplish this I exploited a Background Canvas.

$jit.Canvas.Background.YAxis = function(viz, options) {

this.viz = viz,

this.config = $jit.util.merge({

idSuffix: '-bkcanvas',

levelDistance: 100,

numberOfLines: 3,

range: [0,100],

CanvasStyles: {},

offset: 5

}, options);

};

$jit.Canvas.Background.YAxis.prototype.resize = function(width, height, base) {

this.plot(base);

};

$jit.Canvas.Background.YAxis.prototype.plot = function(base) {

var ctx = base.getCtx(),

conf = this.config,

styles = conf.CanvasStyles,

size = base.getSize();

// Set the canvas styles

for (var s in styles) ctx[s] = styles[s];

base.translate(-(size.width/2),-(size.height/2), true);

var n = conf.numberOfLines;

for (var i=0; i<n; i++) {

ctx.beginPath();

ctx.moveTo(0+conf.offset, i*20+conf.offset);

ctx.lineTo(size.width-conf.offset, i*20+conf.offset);

ctx.stroke();

}

}; 

The above code creates a Background Canvas called YAxis. In order to use it in a visualization, you need the following code:

    var pie = new $jit.Viz({

        'injectInto': 'infovis',

        //Optional: create a background canvas and plot

        //concentric circles in it.

        'background': {

 numberOfLines: 10,

 type: 'YAxis',

          CanvasStyles: {

            strokeStyle: 'gray',

lineWidth: 0.3

          }

        },

        ...

    });

Notice the 'background' in the above code.

Happy coding! :-D

[Ross Wilson]

Thanks, I just did something similar to produce a vertical stripe and hierarchy label effect for the space tree.  I will post the code up here when I get the chance.

Ross

[Sumit Arora]

Thank you very very much  for posting this solution, It really worked for me as earlier I spent hours and done tons of experiment to find the solution.

Now one question : -  What is the meaning of this : base.translate(-(size.width/2),-(size.height/2), true); , 

Means why we need to translate the canvas from size.height to size.weight to  -(size.width/2),-(size.height/2) ?