CODEWITHSUNDEEP
javascriptflot
MonOve
MonOve

Reputation: 1101

Flot with curved grid marking

I am trying to create a Flot scatter graph for BMI levels.

How do I create curved grid markings along with labels - as can be see below - for Obese, Overweight, etc

enter image description here

Upvotes: 0

Views: 295

Answers (1)

Mark
Mark

Reputation: 108512

I wouldn't think of those lines as grid lines but just additional series to be plotted. You can then style them to look like grid lines.

// function to generate series for each BMI
function genData(bmi){
    var data = [];
    for (var m = 1.3; m < 2.01; m+=0.01){
        data.push([m,bmiEq(bmi,m)]);
    }
    return {color: 'gray', data: data, shadowSize: 0};
}
function bmiEq(bmi,m){
   return bmi * Math.pow(m,2); 
}

var somePlot = $.plot("#container", [ genData(18.5), genData(22), genData(25) ]);

// add some labels on the "grid" lines
var ctx = somePlot.getCanvas().getContext("2d");  //canvas context
var series = somePlot.getData();
var xaxis = somePlot.getXAxes()[0];
var yaxis = somePlot.getYAxes()[0];
var offset = somePlot.getPlotOffset();
ctx.font = "14px 'Segoe UI'";
ctx.fillStyle = "black";
var xPos = xaxis.p2c(1.85)+offset.left;
var yPos = yaxis.p2c(bmiEq(18.5,1.85)) + offset.top;
ctx.fillText('18.5', xPos, yPos);

This produces (fiddle here):

enter image description here

Upvotes: 1

Related Questions