using a square symbol in flot

http://stackoverflow.com/questions/15662663/using-different-symbols-for-plotting-data-not-working

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/flot/0.7/jquery.flot.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/flot/0.7/jquery.flot.symbol.min.js"></script>
<div id="placeholder"></div>

CSS

#placeholder {
    width:200px;
    height:200px;
}

JavaScript

$.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'
}]);