how to show dotted grid lines in jqplot instead of solid lines

Question

$(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 chart i have to set dotted grid lines in background. is this possible to draw dotted grid lines in jqplot

frost · Accepted Answer · 2015-05-12T11:14:35.570

2

I don't know whether an easier way to accomplish this exists, but this works:

Open jquery.jqplot.js. In function $.jqplot.CanvasGridRenderer.prototype.draw add line ctx.setLineDash([1, 5]); after line ctx.save();. Then just minimize the file, save it as jquery.jqplot.min.js (or apply those changes directly on minimized version) and you're good to go.

Bear in mind that all your charts will have dotted lines now. If that's a problem, then you would need to add a new property to Grid class like lineDash and process it accordingly in $.jqplot.CanvasGridRenderer.prototype.draw.

enter image description here

edited May 12 '15 at 11:14

answered May 12 '15 at 11:03

frost

1,003
1
12
21

thanks it worked . but if i have to remove vertical lines , can u suggest me ? – Tarika 6 mins ago – Tarika May 12 '15 at 16:52
1

@Tarika already answered here http://stackoverflow.com/questions/10126889/jqplot-remove-vertical-grid-lines – frost May 12 '15 at 17:21

how to show dotted grid lines in jqplot instead of solid lines

1 Answers1