Use different symbols for dots

Question

I’m using the plugin float Charts to generate line graphics. Until then I have this chart:

As a configuration of plugin, I am informing you that this line must have a symbol of the kind circle

But I need the middle symbol, not to be a circle, to be another symbol according to a certain condition

How can I do that? There are some extra plugin or even another plugin for Charts that let me do this ?

[Edit]

As requested.

The graph itself is generated from the data that is passed to it. Currently I am passing as follows:

  var data = [
            {
                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 quoted, the value of symbol is circle, that is, every point will be a circle, but I wish that some points, according to a certain condition, this point is not circle

It also has the options, which are like this:

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

Answer 1

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 logic of creating the symbols. I took the logic here https://code.google.com/p/flot/source/browse/trunk/jquery.flot.symbol.js?r=263 this also allows you to create any symbol.

According to the Flot documentation, the Symbol parameter can receive a callback function. Documentation here https://github.com/flot/flot/blob/master/API.md#Plot-options of a CTRL + F Symbol and you’ll find it Symbol: "Circle" or Function

See this example working here http://jsfiddle.net/yx659y9f/

To convert coordinate points to dataset points

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 = to 2 http://jsfiddle.net/9hz947s9/