How to show dotted grid lines in jqplot instead of solid lines
$(document).ready(function(){
// Our data renderer function, returns an array of the form:
// [[[x1, sin(x1)], [x2, sin(x2)], ...]]
var sineRenderer = function() {
var data = [[]];
for (var i=0; i<13; i+=0.5) {
data[0].push([i, Math.sin(i)]);
}
return data;
};
// we have an empty data array here, but use the "dataRenderer"
// option to tell the plot to get data from our renderer.
var plot1 = $.jqplot('chart1',[],{
title: 'Sine Data Renderer',
dataRenderer: sineRenderer
});
});
In this diagram, I have to set the dotted grid lines in the background. is it possible to draw dotted grid lines in jqplot
source to share
I don't know if there is an easier way to do this, but this works:
Open up jquery.jqplot.js
. In the function, $.jqplot.CanvasGridRenderer.prototype.draw
add a line ctx.setLineDash([1, 5]);
after the line ctx.save();
. Then just hide the file, save it as jquery.jqplot.min.js
(or apply those changes directly on the collapsed version) and you're good to go.
Keep in mind that all your charts will now have dotted lines. If this is a problem, you need to add a new property to the class Grid
, for example lineDash
, and handle it accordingly in $.jqplot.CanvasGridRenderer.prototype.draw
.
source to share