CODEWITHSUNDEEP
javascripthtmlgraphicsflot
Giorgio Robino
Giorgio Robino

Reputation: 2265

flotchart.org: how to draw scatterplots with full circle as symbol?

using flotchart.org , I would like to substitute the default 'circle' shape to represent a point, with just a similar circle, but filled with the color of the series; by example, with color "red" associated to a certain series: the symbol I would like to represent is, using HTML5 canvas API:

var ctx=c.getContext("2d");ctx.beginPath(); ctx.arc(100,75,3,0,2*Math.PI); ctx.fillStyle="red"; ctx.fill();

But I can't obtain the result, coding what suggested by flotchart documentation.

As suggested in above doc, in options I wrote the custom function:

          points: {
            show: true,
            radius: 2,
            symbol: 
                function fullCircle(ctx, x, y, radius, shadow) {        
                    ctx.arc(x, y, radius, 0, shadow ? Math.PI : Math.PI * 2, false);
                    ctx.fill();
                },

The ctx.fill do not work as desired: the circle is filled with BLACK color and just after pointing, instead I would like to fill the circle with the color associated with the corresponding series, before focusing the point...

sorry for my ignorance about canvas ctx...

Upvotes: 3

Views: 941

Answers (1)

samuel
samuel

Reputation: 371

there is a combination of flot settings to draw filled circles (discs) to represent series points quoted from the documentation https://github.com/flot/flot/blob/master/API.md

"fill" is whether the shape should be filled. For lines, this produces area graphs. You can use "fillColor" to specify the color of the fill. If "fillColor" evaluates to false (default for everything except points which are filled with white), the fill color is auto-set to the color of the data series. You can adjust the opacity of the fill by setting "fill" to a number between 0 (fully transparent) and 1 (fully opaque).

so you simply set series.points.fillColor option to false (to use series color, or to whatever color you like). and series.points.fill to 1 for full opacity. Just play around with the fiddle.

Here is the JsFiddle.

Upvotes: 1

Related Questions