CODEWITHSUNDEEP
javascriptplotflot
Mads Skjern
Mads Skjern

Reputation: 5879

Major and minor ticks in FLOT

Some charting/plotting libraries, e.g. matplotlib for Python, has the concept of major and minor ticks (with corresponding major and minor gridlines). I have been looking around, and I think this doesn't exist in FLOT. It seems that there is only one category of tick.

Isn't it possible to make something like below, and if yes, then how?

E.g., as in the illustration below, major ticks for every 1.0, and minor ticks for every 0.2.

enter image description here

Upvotes: 4

Views: 709

Answers (2)

anoldermark
anoldermark

Reputation: 381

If anyone wants to add your own unlabelled minor ticks at the minortick divisions you want you can do this. (Default minor ticks is 5 and can't easily be overidden) My data is time based showing two years with markers every three months.

xaxis: {
mode: "time",
    timeformat: "%b %Y",
    minTickSize: [3, "month"],
    showMinorTicks:false,
},
grid: {
markings: function (axes) {
    var markings = [];
    var month_time= 2629700; // year in seconds divided by 12
    var offset=0;
    var linespread=36000; // set line thickness
    var xTicks = axes.xaxis.ticks;
    for (var i = 0; i < xTicks.length; i++){ 
        // loop all the ticks and add a dark line at each main group 
        markings.push({ xaxis: { from: xTicks[i].v  - linespread, to: xTicks[i].v  + linespread }, color: '#aaa' });
        for (var k = 1; k < 3; k++){
            //use subdvision to add minor ticks
            offset=month_time*k;
            markings.push({ xaxis: { from: xTicks[i].v + offset - linespread, to: xTicks[i].v + offset + linespread }, color: '#ddf' });
        }
    }
    return markings;
}

}

Upvotes: 0

Mark
Mark

Reputation: 108512

You are correct that flot does not support this natively.

To replicate your drawing, I would use grid markings and add a thicker line at each whole number tick:

   $.plot("#placeholder", [ d1 ], {
      xaxis: {
       tickSize: 0.2 // regular tick at 0.2
      },
      grid: {
       markings: function (axes) {
        var markings = [];
        var xTicks = axes.xaxis.ticks;
        for (var i = 0; i < xTicks.length; i++){ // loop all the ticks and add a black line at each whole number
          if (xTicks[i].v % 1 === 0){
            markings.push({ xaxis: { from: xTicks[i].v - 0.005, to: xTicks[i].v + 0.005 }, color: 'black' });
          }
        }
        return markings;
    }
  }
});

Produces (example here):

enter image description here

Upvotes: 5

Related Questions