Use different symbols for points

Question

Use different symbols for points

Navigation

#1 by (1 votes)

1

I'm using the float charts plugin to generate line charts. Until then I have this chart:

Asasettingforplugin,Iamsayingthatthislineshouldhaveasymboloftypecircle

ButIneedthemiddlesymbol,notacircle,oranothersymbolaccordingtoagivencondition

HowcanIdothis?Arethereanyextrapluginsorevenanotherpluginforchartsthatletmedothat?

[Edit]

Asrequested.

Thegraphitselfisgeneratedfromthedatathatispassedtoit.CurrentlyI'mpassingitasfollows:

vardata=[{data:[[1,100],[2,150],[3,200],[4,205],[5,100],[6,100],[7,100],[8,200],[9,100],[10,100]],color:'#21610B',points:{symbol:"circle" }
            },

            ];

As I've mentioned, the value of symbol is circle , that is, every point will be a circle, but I wish some points, according to a certain condition, this point is not circle

It also has the options, which look like this:

 var options = {
            series: {
                lines: {
                    show: true
                },
                points: {
                    show: true,
                    radius: 3
                }
            }
         }

jquery flot

asked by anonymous 02.10.2015 / 14:12

1 answer

Store and retrieve variable containing HTML list using localStorage Copy text from a textbox

score 1 · Accepted Answer

Rod.

Yes it is possible.

$.plot('#placeholder', [{
    data: [
        [1, 1],
        [2, 3],
        [4, 4],
        [5, 9]
    ],
    lines: {
        show: true
    },
    points: {
        show: true,
        symbol: function(ctx, x, y, radius, shadow) {

            if (x == 0) {
                 var size = radius * Math.sqrt(2 * Math.PI / Math.sin(Math.PI / 3));
                var height = size * Math.sin(Math.PI / 3);
                ctx.moveTo(x - size/2, y + height/2);
                ctx.lineTo(x + size/2, y + height/2);
                if (!shadow) {
                    ctx.lineTo(x, y - height/2);
                    ctx.lineTo(x - size/2, y + height/2);
                }
            }
            else {
                var size = radius * Math.sqrt(Math.PI) / 2;
                ctx.rect(x - size, y - size, size + size, size + size);
            }

        }
    },
    color: '#CB4B4B',
    label: 'My Data'
}]);

But you will have to use the symbol creation logic. I took the logic here link that too allows you to create any symbol.

According to the flot documentation, the symbol parameter can receive a callback function. Documentation here link for a CTRL + F symbol and you'll find this symbol: "circle" or function

See this example working here link

To convert the coordinate points to the points in the dataset

console.log(this.allocatedAxes[0].c2p(x));

console.log(this.allocatedAxes[1].c2p(y));

Example in jsfiddle where I change the point when X is = a 2 link