Geek Answers Handbook

Dotted clicks / grid lines in the tray

I am new to this API. I want to have dashed grid / label lines, not a solid line in both the X axis and the Y axis. Can someone help me with this?

Thanks in advance!

+6
source share
2 answers

I managed to create dashed lines for grid layout by changing the library. I am currently using Flot ver 0.8.0

First I added a new attribute under the grid (around line 400), just below markingsLineWidth:

markingsStyle: 'dashed'

Since Flot uses the canvas to render charts, I added the dashedLineTo () extension for the canvas using this code from David Owens. I added it right after the color parser plugin on top of the Flot code, with loans granted to David. The dashedLineTo () function has the following parameters:

 dashedLineTo(fromX, fromY, toX, toY, pattern)

I used [5.5] for the template, which means that 5px dashes and 5px spaces will alternate.

Finally, I modified the drawGrid function in the plugin when marking is drawn.

 if(options.grid.markingsStyle == 'dashed') { ctx.dashedLineTo(xrange.from, yrange.from, xrange.to, yrange.to, [5,5]) } else { ctx.moveTo(xrange.from, yrange.from); ctx.lineTo(xrange.to, yrange.to); }

Just thought you could use this as a link when changing the library.

+12
source

Unfortunately, Flot does not currently allow you to change the grid / tick line styles. You will need to change the library itself.

0
source

More articles:


All Articles