jquery flot, varying size and color for each point

Question

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.

Did you read the documenation (flot.googlecode.com/svn/trunk/API.txt)? Both of these options are available (under "Customizing the data series", fill and radius) — Mark
@Mark Umm, I read that. Plz correct me if I am getting it wrong but those options shadowSize and colors will take effect on all the points in the plot. I am trying to vary shadowSize and colors for individual points. Like a dot representing a country with higher population will have a bigger dot, something on those lines. — roopunk

Mark Mark · Accepted Answer · 2012-01-20T14:37:22

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

jquery flot, varying size and color for each point

1 Answers