Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jquery flot, varying size and color for each point

Tags:

jquery

flot

Can we change the following properties of the points in a jquery flot plot:

the size of dots : I am basically trying to plot a three dimensional graph. First two dimensions are the x and y values and the third dimension value will be reflected in the size of the points. Larger the value, larger the point.

the color of the dots: Again, am trying to display a property other than the x and y values. larger the value, darker the point.

[EDIT]: I am trying to control these properties for points individually and not for the whole plot.

like image 292
roopunk Avatar asked Jan 19 '12 13:01

roopunk


1 Answers

I understand you now. The only way I can see doing this is by passing a callback function to the point symbol option:

function someFunc(ctx, x, y, radius, shadow) 
{
  someFunc.calls++;
   if (someFunc.calls % 2 == 0)
   {
    ctx.arc(x, y, radius * 4, 0, shadow ? Math.PI : Math.PI * 2, false);
   }
   else
   {
     ctx.arc(x, y, radius, 0, shadow ? Math.PI : Math.PI * 2, false);
   }
}
someFunc.calls = 0;

var options = {
  series: {
    lines: { show: true },
    points: { show: true, symbol: someFunc}
  }
};

somePlot = $.plot($("#placeholder"), [ d1 ], options);

In the above I am adjusting the radius size for every other point:

enter image description here

EXAMPLE HERE

like image 110
Mark Avatar answered Nov 10 '22 15:11

Mark