Home | History | Annotate | Download | only in flot
      1 /* Flot plugin that adds some extra symbols for plotting points.
      2 
      3 Copyright (c) 2007-2014 IOLA and Ole Laursen.
      4 Licensed under the MIT license.
      5 
      6 The symbols are accessed as strings through the standard symbol options:
      7 
      8 	series: {
      9 		points: {
     10 			symbol: "square" // or "diamond", "triangle", "cross"
     11 		}
     12 	}
     13 
     14 */
     15 
     16 (function ($) {
     17     function processRawData(plot, series, datapoints) {
     18         // we normalize the area of each symbol so it is approximately the
     19         // same as a circle of the given radius
     20 
     21         var handlers = {
     22             square: function (ctx, x, y, radius, shadow) {
     23                 // pi * r^2 = (2s)^2  =>  s = r * sqrt(pi)/2
     24                 var size = radius * Math.sqrt(Math.PI) / 2;
     25                 ctx.rect(x - size, y - size, size + size, size + size);
     26             },
     27             diamond: function (ctx, x, y, radius, shadow) {
     28                 // pi * r^2 = 2s^2  =>  s = r * sqrt(pi/2)
     29                 var size = radius * Math.sqrt(Math.PI / 2);
     30                 ctx.moveTo(x - size, y);
     31                 ctx.lineTo(x, y - size);
     32                 ctx.lineTo(x + size, y);
     33                 ctx.lineTo(x, y + size);
     34                 ctx.lineTo(x - size, y);
     35             },
     36             triangle: function (ctx, x, y, radius, shadow) {
     37                 // pi * r^2 = 1/2 * s^2 * sin (pi / 3)  =>  s = r * sqrt(2 * pi / sin(pi / 3))
     38                 var size = radius * Math.sqrt(2 * Math.PI / Math.sin(Math.PI / 3));
     39                 var height = size * Math.sin(Math.PI / 3);
     40                 ctx.moveTo(x - size/2, y + height/2);
     41                 ctx.lineTo(x + size/2, y + height/2);
     42                 if (!shadow) {
     43                     ctx.lineTo(x, y - height/2);
     44                     ctx.lineTo(x - size/2, y + height/2);
     45                 }
     46             },
     47             cross: function (ctx, x, y, radius, shadow) {
     48                 // pi * r^2 = (2s)^2  =>  s = r * sqrt(pi)/2
     49                 var size = radius * Math.sqrt(Math.PI) / 2;
     50                 ctx.moveTo(x - size, y - size);
     51                 ctx.lineTo(x + size, y + size);
     52                 ctx.moveTo(x - size, y + size);
     53                 ctx.lineTo(x + size, y - size);
     54             }
     55         };
     56 
     57         var s = series.points.symbol;
     58         if (handlers[s])
     59             series.points.symbol = handlers[s];
     60     }
     61 
     62     function init(plot) {
     63         plot.hooks.processDatapoints.push(processRawData);
     64     }
     65 
     66     $.plot.plugins.push({
     67         init: init,
     68         name: 'symbols',
     69         version: '1.0'
     70     });
     71 })(jQuery);
     72