Optional drawing of grid-lines

11 views
Skip to first unread message

phatlewtz

unread,
May 9, 2008, 1:04:10 PM5/9/08
to Flot graphs
I needed to only draw y-axis lines in a project I am working on so I
made a small change to enable that. Thought that someone might find it
useful:

In options.grid:

grid: {
show: 'both',
tickWidth: 1,
...

and the drawGrid function is modified as:

// draw the inner grid
ctx.lineWidth = options.grid.tickWidth;
ctx.strokeStyle = options.grid.tickColor;
ctx.beginPath();
var v;
if( options.grid.show == 'x' || options.grid.show == 'both' ) {
for (i = 0; i < xaxis.ticks.length; ++i) {
v = xaxis.ticks[i].v;
if (v <= xaxis.min || v >= xaxis.max)
continue; // skip those lying on the axes

ctx.moveTo(Math.floor(tHoz(v)) + ctx.lineWidth/2, 0);
ctx.lineTo(Math.floor(tHoz(v)) + ctx.lineWidth/2, plotHeight);
}
}
if( options.grid.show == 'y' || options.grid.show == 'both' ) {
for (i = 0; i < yaxis.ticks.length; ++i) {
v = yaxis.ticks[i].v;
if (v <= yaxis.min || v >= yaxis.max)
continue;

ctx.moveTo(0, Math.floor(tVert(v)) + ctx.lineWidth/2);
ctx.lineTo(plotWidth, Math.floor(tVert(v)) + ctx.lineWidth/2);
}

ctx.stroke();

so you can draw either the x or y axis ticks, or both or none, and you
can set the width of the lines (I wanted to match the appearance of
the border)
Reply all
Reply to author
Forward
0 new messages