1 /* Javascript plotting library for jQuery, v. 0.6.

     2  *

     3  * Released under the MIT license by IOLA, December 2007.

     4  *

     5  */

     6 

     7 // first an inline dependency, jquery.colorhelpers.js, we inline it here

     8 // for convenience

     9 

    10 /* Plugin for jQuery for working with colors.

    11  * 

    12  * Version 1.0.

    13  * 

    14  * Inspiration from jQuery color animation plugin by John Resig.

    15  *

    16  * Released under the MIT license by Ole Laursen, October 2009.

    17  *

    18  * Examples:

    19  *

    20  *   $.color.parse("#fff").scale('rgb', 0.25).add('a', -0.5).toString()

    21  *   var c = $.color.extract($("#mydiv"), 'background-color');

    22  *   console.log(c.r, c.g, c.b, c.a);

    23  *   $.color.make(100, 50, 25, 0.4).toString() // returns "rgba(100,50,25,0.4)"

    24  *

    25  * Note that .scale() and .add() work in-place instead of returning

    26  * new objects.

    27  */ 

    28 (function(){jQuery.color={};jQuery.color.make=function(E,D,B,C){var F={};F.r=E||0;F.g=D||0;F.b=B||0;F.a=C!=null?C:1;F.add=function(I,H){for(var G=0;G<I.length;++G){F[I.charAt(G)]+=H}return F.normalize()};F.scale=function(I,H){for(var G=0;G<I.length;++G){F[I.charAt(G)]*=H}return F.normalize()};F.toString=function(){if(F.a>=1){return"rgb("+[F.r,F.g,F.b].join(",")+")"}else{return"rgba("+[F.r,F.g,F.b,F.a].join(",")+")"}};F.normalize=function(){function G(I,J,H){return J<I?I:(J>H?H:J)}F.r=G(0,parseInt(F.r),255);F.g=G(0,parseInt(F.g),255);F.b=G(0,parseInt(F.b),255);F.a=G(0,F.a,1);return F};F.clone=function(){return jQuery.color.make(F.r,F.b,F.g,F.a)};return F.normalize()};jQuery.color.extract=function(C,B){var D;do{D=C.css(B).toLowerCase();if(D!=""&&D!="transparent"){break}C=C.parent()}while(!jQuery.nodeName(C.get(0),"body"));if(D=="rgba(0, 0, 0, 0)"){D="transparent"}return jQuery.color.parse(D)};jQuery.color.parse=function(E){var D,B=jQuery.color.make;if(D=/rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(E)){return B(parseInt(D[1],10),parseInt(D[2],10),parseInt(D[3],10))}if(D=/rgba\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]+(?:\.[0-9]+)?)\s*\)/.exec(E)){return B(parseInt(D[1],10),parseInt(D[2],10),parseInt(D[3],10),parseFloat(D[4]))}if(D=/rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(E)){return B(parseFloat(D[1])*2.55,parseFloat(D[2])*2.55,parseFloat(D[3])*2.55)}if(D=/rgba\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\s*\)/.exec(E)){return B(parseFloat(D[1])*2.55,parseFloat(D[2])*2.55,parseFloat(D[3])*2.55,parseFloat(D[4]))}if(D=/#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(E)){return B(parseInt(D[1],16),parseInt(D[2],16),parseInt(D[3],16))}if(D=/#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(E)){return B(parseInt(D[1]+D[1],16),parseInt(D[2]+D[2],16),parseInt(D[3]+D[3],16))}var C=jQuery.trim(E).toLowerCase();if(C=="transparent"){return B(255,255,255,0)}else{D=A[C];return B(D[0],D[1],D[2])}};var A={aqua:[0,255,255],azure:[240,255,255],beige:[245,245,220],black:[0,0,0],blue:[0,0,255],brown:[165,42,42],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgrey:[169,169,169],darkgreen:[0,100,0],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkviolet:[148,0,211],fuchsia:[255,0,255],gold:[255,215,0],green:[0,128,0],indigo:[75,0,130],khaki:[240,230,140],lightblue:[173,216,230],lightcyan:[224,255,255],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightyellow:[255,255,224],lime:[0,255,0],magenta:[255,0,255],maroon:[128,0,0],navy:[0,0,128],olive:[128,128,0],orange:[255,165,0],pink:[255,192,203],purple:[128,0,128],violet:[128,0,128],red:[255,0,0],silver:[192,192,192],white:[255,255,255],yellow:[255,255,0]}})();

    29 

    30 // the actual Flot code

    31 (function($) {

    32     function Plot(placeholder, data_, options_, plugins) {

    33         // data is on the form:

    34         //   [ series1, series2 ... ]

    35         // where series is either just the data as [ [x1, y1], [x2, y2], ... ]

    36         // or { data: [ [x1, y1], [x2, y2], ... ], label: "some label", ... }

    37         

    38         var series = [],

    39             options = {

    40                 // the color theme used for graphs

    41                 colors: ["#edc240", "#afd8f8", "#cb4b4b", "#4da74d", "#9440ed"],

    42                 legend: {

    43                     show: true,

    44                     noColumns: 1, // number of colums in legend table

    45                     labelFormatter: null, // fn: string -> string

    46                     labelBoxBorderColor: "#ccc", // border color for the little label boxes

    47                     container: null, // container (as jQuery object) to put legend in, null means default on top of graph

    48                     position: "ne", // position of default legend container within plot

    49                     margin: 5, // distance from grid edge to default legend container within plot

    50                     backgroundColor: null, // null means auto-detect

    51                     backgroundOpacity: 0.85 // set to 0 to avoid background

    52                 },

    53                 xaxis: {

    54                     mode: null, // null or "time"

    55                     transform: null, // null or f: number -> number to transform axis

    56                     inverseTransform: null, // if transform is set, this should be the inverse function

    57                     min: null, // min. value to show, null means set automatically

    58                     max: null, // max. value to show, null means set automatically

    59                     autoscaleMargin: null, // margin in % to add if auto-setting min/max

    60                     ticks: null, // either [1, 3] or [[1, "a"], 3] or (fn: axis info -> ticks) or app. number of ticks for auto-ticks

    61                     tickFormatter: null, // fn: number -> string

    62                     labelWidth: null, // size of tick labels in pixels

    63                     labelHeight: null,

    64                     

    65                     // mode specific options

    66                     tickDecimals: null, // no. of decimals, null means auto

    67                     tickSize: null, // number or [number, "unit"]

    68                     minTickSize: null, // number or [number, "unit"]

    69                     monthNames: null, // list of names of months

    70                     timeformat: null, // format string to use

    71                     twelveHourClock: false // 12 or 24 time in time mode

    72                 },

    73                 yaxis: {

    74                     autoscaleMargin: 0.02

    75                 },

    76                 x2axis: {

    77                     autoscaleMargin: null

    78                 },

    79                 y2axis: {

    80                     autoscaleMargin: 0.02

    81                 },

    82                 series: {

    83                     points: {

    84                         show: false,

    85                         radius: 3,

    86                         lineWidth: 2, // in pixels

    87                         fill: true,

    88                         fillColor: "#ffffff"

    89                     },

    90                     lines: {

    91                         // we don't put in show: false so we can see

    92                         // whether lines were actively disabled 

    93                         lineWidth: 2, // in pixels

    94                         fill: false,

    95                         fillColor: null,

    96                         steps: false

    97                     },

    98                     bars: {

    99                         show: false,

   100                         lineWidth: 2, // in pixels

   101                         barWidth: 1, // in units of the x axis

   102                         fill: true,

   103                         fillColor: null,

   104                         align: "left", // or "center" 

   105                         horizontal: false // when horizontal, left is now top

   106                     },

   107                     shadowSize: 3

   108                 },

   109                 grid: {

   110                     show: true,

   111                     aboveData: false,

   112                     color: "#545454", // primary color used for outline and labels

   113                     backgroundColor: null, // null for transparent, else color

   114                     tickColor: "rgba(0,0,0,0.15)", // color used for the ticks

   115                     labelMargin: 5, // in pixels

   116                     borderWidth: 2, // in pixels

   117                     borderColor: null, // set if different from the grid color

   118                     markings: null, // array of ranges or fn: axes -> array of ranges

   119                     markingsColor: "#f4f4f4",

   120                     markingsLineWidth: 2,

   121                     // interactive stuff

   122                     clickable: false,

   123                     hoverable: false,

   124                     autoHighlight: true, // highlight in case mouse is near

   125                     mouseActiveRadius: 10 // how far the mouse can be away to activate an item

   126                 },

   127                 hooks: {}

   128             },

   129         canvas = null,      // the canvas for the plot itself

   130         overlay = null,     // canvas for interactive stuff on top of plot

   131         eventHolder = null, // jQuery object that events should be bound to

   132         ctx = null, octx = null,

   133         axes = { xaxis: {}, yaxis: {}, x2axis: {}, y2axis: {} },

   134         plotOffset = { left: 0, right: 0, top: 0, bottom: 0},

   135         canvasWidth = 0, canvasHeight = 0,

   136         plotWidth = 0, plotHeight = 0,

   137         hooks = {

   138             processOptions: [],

   139             processRawData: [],

   140             processDatapoints: [],

   141             draw: [],

   142             bindEvents: [],

   143             drawOverlay: []

   144         },

   145         plot = this;

   146 

   147         // public functions

   148         plot.setData = setData;

   149         plot.setupGrid = setupGrid;

   150         plot.draw = draw;

   151         plot.getPlaceholder = function() { return placeholder; };

   152         plot.getCanvas = function() { return canvas; };

   153         plot.getPlotOffset = function() { return plotOffset; };

   154         plot.width = function () { return plotWidth; };

   155         plot.height = function () { return plotHeight; };

   156         plot.offset = function () {

   157             var o = eventHolder.offset();

   158             o.left += plotOffset.left;

   159             o.top += plotOffset.top;

   160             return o;

   161         };

   162         plot.getData = function() { return series; };

   163         plot.getAxes = function() { return axes; };

   164         plot.getOptions = function() { return options; };

   165         plot.highlight = highlight;

   166         plot.unhighlight = unhighlight;

   167         plot.triggerRedrawOverlay = triggerRedrawOverlay;

   168         plot.pointOffset = function(point) {

   169             return { left: parseInt(axisSpecToRealAxis(point, "xaxis").p2c(+point.x) + plotOffset.left),

   170                      top: parseInt(axisSpecToRealAxis(point, "yaxis").p2c(+point.y) + plotOffset.top) };

   171         };

   172         

   173 

   174         // public attributes

   175         plot.hooks = hooks;

   176         

   177         // initialize

   178         initPlugins(plot);

   179         parseOptions(options_);

   180         constructCanvas();

   181         setData(data_);

   182         setupGrid();

   183         draw();

   184         bindEvents();

   185 

   186 

   187         function executeHooks(hook, args) {

   188             args = [plot].concat(args);

   189             for (var i = 0; i < hook.length; ++i)

   190                 hook[i].apply(this, args);

   191         }

   192 

   193         function initPlugins() {

   194             for (var i = 0; i < plugins.length; ++i) {

   195                 var p = plugins[i];

   196                 p.init(plot);

   197                 if (p.options)

   198                     $.extend(true, options, p.options);

   199             }

   200         }

   201         

   202         function parseOptions(opts) {

   203             $.extend(true, options, opts);

   204             if (options.grid.borderColor == null)

   205                 options.grid.borderColor = options.grid.color;

   206             // backwards compatibility, to be removed in future

   207             if (options.xaxis.noTicks && options.xaxis.ticks == null)

   208                 options.xaxis.ticks = options.xaxis.noTicks;

   209             if (options.yaxis.noTicks && options.yaxis.ticks == null)

   210                 options.yaxis.ticks = options.yaxis.noTicks;

   211             if (options.grid.coloredAreas)

   212                 options.grid.markings = options.grid.coloredAreas;

   213             if (options.grid.coloredAreasColor)

   214                 options.grid.markingsColor = options.grid.coloredAreasColor;

   215             if (options.lines)

   216                 $.extend(true, options.series.lines, options.lines);

   217             if (options.points)

   218                 $.extend(true, options.series.points, options.points);

   219             if (options.bars)

   220                 $.extend(true, options.series.bars, options.bars);

   221             if (options.shadowSize)

   222                 options.series.shadowSize = options.shadowSize;

   223 

   224             for (var n in hooks)

   225                 if (options.hooks[n] && options.hooks[n].length)

   226                     hooks[n] = hooks[n].concat(options.hooks[n]);

   227 

   228             executeHooks(hooks.processOptions, [options]);

   229         }

   230 

   231         function setData(d) {

   232             series = parseData(d);

   233             fillInSeriesOptions();

   234             processData();

   235         }

   236         

   237         function parseData(d) {

   238             var res = [];

   239             for (var i = 0; i < d.length; ++i) {

   240                 var s = $.extend(true, {}, options.series);

   241 

   242                 if (d[i].data) {

   243                     s.data = d[i].data; // move the data instead of deep-copy

   244                     delete d[i].data;

   245 

   246                     $.extend(true, s, d[i]);

   247 

   248                     d[i].data = s.data;

   249                 }

   250                 else

   251                     s.data = d[i];

   252                 res.push(s);

   253             }

   254 

   255             return res;

   256         }

   257         

   258         function axisSpecToRealAxis(obj, attr) {

   259             var a = obj[attr];

   260             if (!a || a == 1)

   261                 return axes[attr];

   262             if (typeof a == "number")

   263                 return axes[attr.charAt(0) + a + attr.slice(1)];

   264             return a; // assume it's OK

   265         }

   266         

   267         function fillInSeriesOptions() {

   268             var i;

   269             

   270             // collect what we already got of colors

   271             var neededColors = series.length,

   272                 usedColors = [],

   273                 assignedColors = [];

   274             for (i = 0; i < series.length; ++i) {

   275                 var sc = series[i].color;

   276                 if (sc != null) {

   277                     --neededColors;

   278                     if (typeof sc == "number")

   279                         assignedColors.push(sc);

   280                     else

   281                         usedColors.push($.color.parse(series[i].color));

   282                 }

   283             }

   284             

   285             // we might need to generate more colors if higher indices

   286             // are assigned

   287             for (i = 0; i < assignedColors.length; ++i) {

   288                 neededColors = Math.max(neededColors, assignedColors[i] + 1);

   289             }

   290 

   291             // produce colors as needed

   292             var colors = [], variation = 0;

   293             i = 0;

   294             while (colors.length < neededColors) {

   295                 var c;

   296                 if (options.colors.length == i) // check degenerate case

   297                     c = $.color.make(100, 100, 100);

   298                 else

   299                     c = $.color.parse(options.colors[i]);

   300 

   301                 // vary color if needed

   302                 var sign = variation % 2 == 1 ? -1 : 1;

   303                 c.scale('rgb', 1 + sign * Math.ceil(variation / 2) * 0.2)

   304 

   305                 // FIXME: if we're getting to close to something else,

   306                 // we should probably skip this one

   307                 colors.push(c);

   308                 

   309                 ++i;

   310                 if (i >= options.colors.length) {

   311                     i = 0;

   312                     ++variation;

   313                 }

   314             }

   315 

   316             // fill in the options

   317             var colori = 0, s;

   318             for (i = 0; i < series.length; ++i) {

   319                 s = series[i];

   320                 

   321                 // assign colors

   322                 if (s.color == null) {

   323                     s.color = colors[colori].toString();

   324                     ++colori;

   325                 }

   326                 else if (typeof s.color == "number")

   327                     s.color = colors[s.color].toString();

   328 

   329                 // turn on lines automatically in case nothing is set

   330                 if (s.lines.show == null) {

   331                     var v, show = true;

   332                     for (v in s)

   333                         if (s[v].show) {

   334                             show = false;

   335                             break;

   336                         }

   337                     if (show)

   338                         s.lines.show = true;

   339                 }

   340 

   341                 // setup axes

   342                 s.xaxis = axisSpecToRealAxis(s, "xaxis");

   343                 s.yaxis = axisSpecToRealAxis(s, "yaxis");

   344             }

   345         }

   346         

   347         function processData() {

   348             var topSentry = Number.POSITIVE_INFINITY,

   349                 bottomSentry = Number.NEGATIVE_INFINITY,

   350                 i, j, k, m, length,

   351                 s, points, ps, x, y, axis, val, f, p;

   352 

   353             for (axis in axes) {

   354                 axes[axis].datamin = topSentry;

   355                 axes[axis].datamax = bottomSentry;

   356                 axes[axis].used = false;

   357             }

   358 

   359             function updateAxis(axis, min, max) {

   360                 if (min < axis.datamin)

   361                     axis.datamin = min;

   362                 if (max > axis.datamax)

   363                     axis.datamax = max;

   364             }

   365 

   366             for (i = 0; i < series.length; ++i) {

   367                 s = series[i];

   368                 s.datapoints = { points: [] };

   369                 

   370                 executeHooks(hooks.processRawData, [ s, s.data, s.datapoints ]);

   371             }

   372             

   373             // first pass: clean and copy data

   374             for (i = 0; i < series.length; ++i) {

   375                 s = series[i];

   376 

   377                 var data = s.data, format = s.datapoints.format;

   378 

   379                 if (!format) {

   380                     format = [];

   381                     // find out how to copy

   382                     format.push({ x: true, number: true, required: true });

   383                     format.push({ y: true, number: true, required: true });

   384 

   385                     if (s.bars.show)

   386                         format.push({ y: true, number: true, required: false, defaultValue: 0 });

   387                     

   388                     s.datapoints.format = format;

   389                 }

   390 

   391                 if (s.datapoints.pointsize != null)

   392                     continue; // already filled in

   393 

   394                 if (s.datapoints.pointsize == null)

   395                     s.datapoints.pointsize = format.length;

   396                 

   397                 ps = s.datapoints.pointsize;

   398                 points = s.datapoints.points;

   399 

   400                 insertSteps = s.lines.show && s.lines.steps;

   401                 s.xaxis.used = s.yaxis.used = true;

   402                 

   403                 for (j = k = 0; j < data.length; ++j, k += ps) {

   404                     p = data[j];

   405 

   406                     var nullify = p == null;

   407                     if (!nullify) {

   408                         for (m = 0; m < ps; ++m) {

   409                             val = p[m];

   410                             f = format[m];

   411 

   412                             if (f) {

   413                                 if (f.number && val != null) {

   414                                     val = +val; // convert to number

   415                                     if (isNaN(val))

   416                                         val = null;

   417                                 }

   418 

   419                                 if (val == null) {

   420                                     if (f.required)

   421                                         nullify = true;

   422                                     

   423                                     if (f.defaultValue != null)

   424                                         val = f.defaultValue;

   425                                 }

   426                             }

   427                             

   428                             points[k + m] = val;

   429                         }

   430                     }

   431                     

   432                     if (nullify) {

   433                         for (m = 0; m < ps; ++m) {

   434                             val = points[k + m];

   435                             if (val != null) {

   436                                 f = format[m];

   437                                 // extract min/max info

   438                                 if (f.x)

   439                                     updateAxis(s.xaxis, val, val);

   440                                 if (f.y)

   441                                     updateAxis(s.yaxis, val, val);

   442                             }

   443                             points[k + m] = null;

   444                         }

   445                     }

   446                     else {

   447                         // a little bit of line specific stuff that

   448                         // perhaps shouldn't be here, but lacking

   449                         // better means...

   450                         if (insertSteps && k > 0

   451                             && points[k - ps] != null

   452                             && points[k - ps] != points[k]

   453                             && points[k - ps + 1] != points[k + 1]) {

   454                             // copy the point to make room for a middle point

   455                             for (m = 0; m < ps; ++m)

   456                                 points[k + ps + m] = points[k + m];

   457 

   458                             // middle point has same y

   459                             points[k + 1] = points[k - ps + 1];

   460 

   461                             // we've added a point, better reflect that

   462                             k += ps;

   463                         }

   464                     }

   465                 }

   466             }

   467 

   468             // give the hooks a chance to run

   469             for (i = 0; i < series.length; ++i) {

   470                 s = series[i];

   471                 

   472                 executeHooks(hooks.processDatapoints, [ s, s.datapoints]);

   473             }

   474 

   475             // second pass: find datamax/datamin for auto-scaling

   476             for (i = 0; i < series.length; ++i) {

   477                 s = series[i];

   478                 points = s.datapoints.points,

   479                 ps = s.datapoints.pointsize;

   480 

   481                 var xmin = topSentry, ymin = topSentry,

   482                     xmax = bottomSentry, ymax = bottomSentry;

   483                 

   484                 for (j = 0; j < points.length; j += ps) {

   485                     if (points[j] == null)

   486                         continue;

   487 

   488                     for (m = 0; m < ps; ++m) {

   489                         val = points[j + m];

   490                         f = format[m];

   491                         if (!f)

   492                             continue;

   493                         

   494                         if (f.x) {

   495                             if (val < xmin)

   496                                 xmin = val;

   497                             if (val > xmax)

   498                                 xmax = val;

   499                         }

   500                         if (f.y) {

   501                             if (val < ymin)

   502                                 ymin = val;

   503                             if (val > ymax)

   504                                 ymax = val;

   505                         }

   506                     }

   507                 }

   508                 

   509                 if (s.bars.show) {

   510                     // make sure we got room for the bar on the dancing floor

   511                     var delta = s.bars.align == "left" ? 0 : -s.bars.barWidth/2;

   512                     if (s.bars.horizontal) {

   513                         ymin += delta;

   514                         ymax += delta + s.bars.barWidth;

   515                     }

   516                     else {

   517                         xmin += delta;

   518                         xmax += delta + s.bars.barWidth;

   519                     }

   520                 }

   521                 

   522                 updateAxis(s.xaxis, xmin, xmax);

   523                 updateAxis(s.yaxis, ymin, ymax);

   524             }

   525 

   526             for (axis in axes) {

   527                 if (axes[axis].datamin == topSentry)

   528                     axes[axis].datamin = null;

   529                 if (axes[axis].datamax == bottomSentry)

   530                     axes[axis].datamax = null;

   531             }

   532         }

   533 

   534         function constructCanvas() {

   535             function makeCanvas(width, height) {

   536                 var c = document.createElement('canvas');

   537                 c.width = width;

   538                 c.height = height;

   539                 if ($.browser.msie) // excanvas hack

   540                     c = window.G_vmlCanvasManager.initElement(c);

   541                 return c;

   542             }

   543             

   544             canvasWidth = placeholder.width();

   545             canvasHeight = placeholder.height();

   546             placeholder.html(""); // clear placeholder

   547             if (placeholder.css("position") == 'static')

   548                 placeholder.css("position", "relative"); // for positioning labels and overlay

   549 

   550             if (canvasWidth <= 0 || canvasHeight <= 0)

   551                 throw "Invalid dimensions for plot, width = " + canvasWidth + ", height = " + canvasHeight;

   552 

   553             if ($.browser.msie) // excanvas hack

   554                 window.G_vmlCanvasManager.init_(document); // make sure everything is setup

   555             

   556             // the canvas

   557             canvas = $(makeCanvas(canvasWidth, canvasHeight)).appendTo(placeholder).get(0);

   558             ctx = canvas.getContext("2d");

   559 

   560             // overlay canvas for interactive features

   561             overlay = $(makeCanvas(canvasWidth, canvasHeight)).css({ position: 'absolute', left: 0, top: 0 }).appendTo(placeholder).get(0);

   562             octx = overlay.getContext("2d");

   563             octx.stroke();

   564         }

   565 

   566         function bindEvents() {

   567             // we include the canvas in the event holder too, because IE 7

   568             // sometimes has trouble with the stacking order

   569             eventHolder = $([overlay, canvas]);

   570 

   571             // bind events

   572             if (options.grid.hoverable)

   573                 eventHolder.mousemove(onMouseMove);

   574 

   575             if (options.grid.clickable)

   576                 eventHolder.click(onClick);

   577 

   578             executeHooks(hooks.bindEvents, [eventHolder]);

   579         }

   580 

   581         function setupGrid() {

   582             function setTransformationHelpers(axis, o) {

   583                 function identity(x) { return x; }

   584                 

   585                 var s, m, t = o.transform || identity,

   586                     it = o.inverseTransform;

   587                     

   588                 // add transformation helpers

   589                 if (axis == axes.xaxis || axis == axes.x2axis) {

   590                     // precompute how much the axis is scaling a point

   591                     // in canvas space

   592                     s = axis.scale = plotWidth / (t(axis.max) - t(axis.min));

   593                     m = t(axis.min);

   594 

   595                     // data point to canvas coordinate

   596                     if (t == identity) // slight optimization

   597                         axis.p2c = function (p) { return (p - m) * s; };

   598                     else

   599                         axis.p2c = function (p) { return (t(p) - m) * s; };

   600                     // canvas coordinate to data point

   601                     if (!it)

   602                         axis.c2p = function (c) { return m + c / s; };

   603                     else

   604                         axis.c2p = function (c) { return it(m + c / s); };

   605                 }

   606                 else {

   607                     s = axis.scale = plotHeight / (t(axis.max) - t(axis.min));

   608                     m = t(axis.max);

   609                     

   610                     if (t == identity)

   611                         axis.p2c = function (p) { return (m - p) * s; };

   612                     else

   613                         axis.p2c = function (p) { return (m - t(p)) * s; };

   614                     if (!it)

   615                         axis.c2p = function (c) { return m - c / s; };

   616                     else

   617                         axis.c2p = function (c) { return it(m - c / s); };

   618                 }

   619             }

   620 

   621             function measureLabels(axis, axisOptions) {

   622                 var i, labels = [], l;

   623                 

   624                 axis.labelWidth = axisOptions.labelWidth;

   625                 axis.labelHeight = axisOptions.labelHeight;

   626 

   627                 if (axis == axes.xaxis || axis == axes.x2axis) {

   628                     // to avoid measuring the widths of the labels, we

   629                     // construct fixed-size boxes and put the labels inside

   630                     // them, we don't need the exact figures and the

   631                     // fixed-size box content is easy to center

   632                     if (axis.labelWidth == null)

   633                         axis.labelWidth = canvasWidth / (axis.ticks.length > 0 ? axis.ticks.length : 1);

   634 

   635                     // measure x label heights

   636                     if (axis.labelHeight == null) {

   637                         labels = [];

   638                         for (i = 0; i < axis.ticks.length; ++i) {

   639                             l = axis.ticks[i].label;

   640                             if (l)

   641                                 labels.push('<div class="tickLabel" style="float:left;width:' + axis.labelWidth + 'px">' + l + '</div>');

   642                         }

   643                         

   644                         if (labels.length > 0) {

   645                             var dummyDiv = $('<div style="position:absolute;top:-10000px;width:10000px;font-size:smaller">'

   646                                              + labels.join("") + '<div style="clear:left"></div></div>').appendTo(placeholder);

   647                             axis.labelHeight = dummyDiv.height();

   648                             dummyDiv.remove();

   649                         }

   650                     }

   651                 }

   652                 else if (axis.labelWidth == null || axis.labelHeight == null) {

   653                     // calculate y label dimensions

   654                     for (i = 0; i < axis.ticks.length; ++i) {

   655                         l = axis.ticks[i].label;

   656                         if (l)

   657                             labels.push('<div class="tickLabel">' + l + '</div>');

   658                     }

   659                     

   660                     if (labels.length > 0) {

   661                         var dummyDiv = $('<div style="position:absolute;top:-10000px;font-size:smaller">'

   662                                          + labels.join("") + '</div>').appendTo(placeholder);

   663                         if (axis.labelWidth == null)

   664                             axis.labelWidth = dummyDiv.width();

   665                         if (axis.labelHeight == null)

   666                             axis.labelHeight = dummyDiv.find("div").height();

   667                         dummyDiv.remove();

   668                     }

   669                     

   670                 }

   671 

   672                 if (axis.labelWidth == null)

   673                     axis.labelWidth = 0;

   674                 if (axis.labelHeight == null)

   675                     axis.labelHeight = 0;

   676             }

   677             

   678             function setGridSpacing() {

   679                 // get the most space needed around the grid for things

   680                 // that may stick out

   681                 var maxOutset = options.grid.borderWidth;

   682                 for (i = 0; i < series.length; ++i)

   683                     maxOutset = Math.max(maxOutset, 2 * (series[i].points.radius + series[i].points.lineWidth/2));

   684                 

   685                 plotOffset.left = plotOffset.right = plotOffset.top = plotOffset.bottom = maxOutset;

   686                 

   687                 var margin = options.grid.labelMargin + options.grid.borderWidth;

   688                 

   689                 if (axes.xaxis.labelHeight > 0)

   690                     plotOffset.bottom = Math.max(maxOutset, axes.xaxis.labelHeight + margin);

   691                 if (axes.yaxis.labelWidth > 0)

   692                     plotOffset.left = Math.max(maxOutset, axes.yaxis.labelWidth + margin);

   693                 if (axes.x2axis.labelHeight > 0)

   694                     plotOffset.top = Math.max(maxOutset, axes.x2axis.labelHeight + margin);

   695                 if (axes.y2axis.labelWidth > 0)

   696                     plotOffset.right = Math.max(maxOutset, axes.y2axis.labelWidth + margin);

   697             

   698                 plotWidth = canvasWidth - plotOffset.left - plotOffset.right;

   699                 plotHeight = canvasHeight - plotOffset.bottom - plotOffset.top;

   700             }

   701             

   702             var axis;

   703             for (axis in axes)

   704                 setRange(axes[axis], options[axis]);

   705             

   706             if (options.grid.show) {

   707                 for (axis in axes) {

   708                     prepareTickGeneration(axes[axis], options[axis]);

   709                     setTicks(axes[axis], options[axis]);

   710                     measureLabels(axes[axis], options[axis]);

   711                 }

   712 

   713                 setGridSpacing();

   714             }

   715             else {

   716                 plotOffset.left = plotOffset.right = plotOffset.top = plotOffset.bottom = 0;

   717                 plotWidth = canvasWidth;

   718                 plotHeight = canvasHeight;

   719             }

   720             

   721             for (axis in axes)

   722                 setTransformationHelpers(axes[axis], options[axis]);

   723 

   724             if (options.grid.show)

   725                 insertLabels();

   726             

   727             insertLegend();

   728         }

   729         

   730         function setRange(axis, axisOptions) {

   731             var min = +(axisOptions.min != null ? axisOptions.min : axis.datamin),

   732                 max = +(axisOptions.max != null ? axisOptions.max : axis.datamax),

   733                 delta = max - min;

   734 

   735             if (delta == 0.0) {

   736                 // degenerate case

   737                 var widen = max == 0 ? 1 : 0.01;

   738 

   739                 if (axisOptions.min == null)

   740                     min -= widen;

   741                 // alway widen max if we couldn't widen min to ensure we

   742                 // don't fall into min == max which doesn't work

   743                 if (axisOptions.max == null || axisOptions.min != null)

   744                     max += widen;

   745             }

   746             else {

   747                 // consider autoscaling

   748                 var margin = axisOptions.autoscaleMargin;

   749                 if (margin != null) {

   750                     if (axisOptions.min == null) {

   751                         min -= delta * margin;

   752                         // make sure we don't go below zero if all values

   753                         // are positive

   754                         if (min < 0 && axis.datamin != null && axis.datamin >= 0)

   755                             min = 0;

   756                     }

   757                     if (axisOptions.max == null) {

   758                         max += delta * margin;

   759                         if (max > 0 && axis.datamax != null && axis.datamax <= 0)

   760                             max = 0;

   761                     }

   762                 }

   763             }

   764             axis.min = min;

   765             axis.max = max;

   766         }

   767 

   768         function prepareTickGeneration(axis, axisOptions) {

   769             // estimate number of ticks

   770             var noTicks;

   771             if (typeof axisOptions.ticks == "number" && axisOptions.ticks > 0)

   772                 noTicks = axisOptions.ticks;

   773             else if (axis == axes.xaxis || axis == axes.x2axis)

   774                  // heuristic based on the model a*sqrt(x) fitted to

   775                  // some reasonable data points

   776                 noTicks = 0.3 * Math.sqrt(canvasWidth);

   777             else

   778                 noTicks = 0.3 * Math.sqrt(canvasHeight);

   779             

   780             var delta = (axis.max - axis.min) / noTicks,

   781                 size, generator, unit, formatter, i, magn, norm;

   782 

   783             if (axisOptions.mode == "time") {

   784                 // pretty handling of time

   785                 

   786                 // map of app. size of time units in milliseconds

   787                 var timeUnitSize = {

   788                     "second": 1000,

   789                     "minute": 60 * 1000,

   790                     "hour": 60 * 60 * 1000,

   791                     "day": 24 * 60 * 60 * 1000,

   792                     "month": 30 * 24 * 60 * 60 * 1000,

   793                     "year": 365.2425 * 24 * 60 * 60 * 1000

   794                 };

   795 

   796 

   797                 // the allowed tick sizes, after 1 year we use

   798                 // an integer algorithm

   799                 var spec = [

   800                     [1, "second"], [2, "second"], [5, "second"], [10, "second"],

   801                     [30, "second"], 

   802                     [1, "minute"], [2, "minute"], [5, "minute"], [10, "minute"],

   803                     [30, "minute"], 

   804                     [1, "hour"], [2, "hour"], [4, "hour"],

   805                     [8, "hour"], [12, "hour"],

   806                     [1, "day"], [2, "day"], [3, "day"],

   807                     [0.25, "month"], [0.5, "month"], [1, "month"],

   808                     [2, "month"], [3, "month"], [6, "month"],

   809                     [1, "year"]

   810                 ];

   811 

   812                 var minSize = 0;

   813                 if (axisOptions.minTickSize != null) {

   814                     if (typeof axisOptions.tickSize == "number")

   815                         minSize = axisOptions.tickSize;

   816                     else

   817                         minSize = axisOptions.minTickSize[0] * timeUnitSize[axisOptions.minTickSize[1]];

   818                 }

   819 

   820                 for (i = 0; i < spec.length - 1; ++i)

   821                     if (delta < (spec[i][0] * timeUnitSize[spec[i][1]]

   822                                  + spec[i + 1][0] * timeUnitSize[spec[i + 1][1]]) / 2

   823                        && spec[i][0] * timeUnitSize[spec[i][1]] >= minSize)

   824                         break;

   825                 size = spec[i][0];

   826                 unit = spec[i][1];

   827                 

   828                 // special-case the possibility of several years

   829                 if (unit == "year") {

   830                     magn = Math.pow(10, Math.floor(Math.log(delta / timeUnitSize.year) / Math.LN10));

   831                     norm = (delta / timeUnitSize.year) / magn;

   832                     if (norm < 1.5)

   833                         size = 1;

   834                     else if (norm < 3)

   835                         size = 2;

   836                     else if (norm < 7.5)

   837                         size = 5;

   838                     else

   839                         size = 10;

   840 

   841                     size *= magn;

   842                 }

   843 

   844                 if (axisOptions.tickSize) {

   845                     size = axisOptions.tickSize[0];

   846                     unit = axisOptions.tickSize[1];

   847                 }

   848                 

   849                 generator = function(axis) {

   850                     var ticks = [],

   851                         tickSize = axis.tickSize[0], unit = axis.tickSize[1],

   852                         d = new Date(axis.min);

   853                     

   854                     var step = tickSize * timeUnitSize[unit];

   855 

   856                     if (unit == "second")

   857                         d.setUTCSeconds(floorInBase(d.getUTCSeconds(), tickSize));

   858                     if (unit == "minute")

   859                         d.setUTCMinutes(floorInBase(d.getUTCMinutes(), tickSize));

   860                     if (unit == "hour")

   861                         d.setUTCHours(floorInBase(d.getUTCHours(), tickSize));

   862                     if (unit == "month")

   863                         d.setUTCMonth(floorInBase(d.getUTCMonth(), tickSize));

   864                     if (unit == "year")

   865                         d.setUTCFullYear(floorInBase(d.getUTCFullYear(), tickSize));

   866                     

   867                     // reset smaller components

   868                     d.setUTCMilliseconds(0);

   869                     if (step >= timeUnitSize.minute)

   870                         d.setUTCSeconds(0);

   871                     if (step >= timeUnitSize.hour)

   872                         d.setUTCMinutes(0);

   873                     if (step >= timeUnitSize.day)

   874                         d.setUTCHours(0);

   875                     if (step >= timeUnitSize.day * 4)

   876                         d.setUTCDate(1);

   877                     if (step >= timeUnitSize.year)

   878                         d.setUTCMonth(0);

   879 

   880 

   881                     var carry = 0, v = Number.NaN, prev;

   882                     do {

   883                         prev = v;

   884                         v = d.getTime();

   885                         ticks.push({ v: v, label: axis.tickFormatter(v, axis) });

   886                         if (unit == "month") {

   887                             if (tickSize < 1) {

   888                                 // a bit complicated - we'll divide the month

   889                                 // up but we need to take care of fractions

   890                                 // so we don't end up in the middle of a day

   891                                 d.setUTCDate(1);

   892                                 var start = d.getTime();

   893                                 d.setUTCMonth(d.getUTCMonth() + 1);

   894                                 var end = d.getTime();

   895                                 d.setTime(v + carry * timeUnitSize.hour + (end - start) * tickSize);

   896                                 carry = d.getUTCHours();

   897                                 d.setUTCHours(0);

   898                             }

   899                             else

   900                                 d.setUTCMonth(d.getUTCMonth() + tickSize);

   901                         }

   902                         else if (unit == "year") {

   903                             d.setUTCFullYear(d.getUTCFullYear() + tickSize);

   904                         }

   905                         else

   906                             d.setTime(v + step);

   907                     } while (v < axis.max && v != prev);

   908 

   909                     return ticks;

   910                 };

   911 

   912                 formatter = function (v, axis) {

   913                     var d = new Date(v);

   914 

   915                     // first check global format

   916                     if (axisOptions.timeformat != null)

   917                         return $.plot.formatDate(d, axisOptions.timeformat, axisOptions.monthNames);

   918                     

   919                     var t = axis.tickSize[0] * timeUnitSize[axis.tickSize[1]];

   920                     var span = axis.max - axis.min;

   921                     var suffix = (axisOptions.twelveHourClock) ? " %p" : "";

   922                     

   923                     if (t < timeUnitSize.minute)

   924                         fmt = "%h:%M:%S" + suffix;

   925                     else if (t < timeUnitSize.day) {

   926                         if (span < 2 * timeUnitSize.day)

   927                             fmt = "%h:%M" + suffix;

   928                         else

   929                             fmt = "%b %d %h:%M" + suffix;

   930                     }

   931                     else if (t < timeUnitSize.month)

   932                         fmt = "%b %d";

   933                     else if (t < timeUnitSize.year) {

   934                         if (span < timeUnitSize.year)

   935                             fmt = "%b";

   936                         else

   937                             fmt = "%b %y";

   938                     }

   939                     else

   940                         fmt = "%y";

   941                     

   942                     return $.plot.formatDate(d, fmt, axisOptions.monthNames);

   943                 };

   944             }

   945             else {

   946                 // pretty rounding of base-10 numbers

   947                 var maxDec = axisOptions.tickDecimals;

   948                 var dec = -Math.floor(Math.log(delta) / Math.LN10);

   949                 if (maxDec != null && dec > maxDec)

   950                     dec = maxDec;

   951 

   952                 magn = Math.pow(10, -dec);

   953                 norm = delta / magn; // norm is between 1.0 and 10.0

   954                 

   955                 if (norm < 1.5)

   956                     size = 1;

   957                 else if (norm < 3) {

   958                     size = 2;

   959                     // special case for 2.5, requires an extra decimal

   960                     if (norm > 2.25 && (maxDec == null || dec + 1 <= maxDec)) {

   961                         size = 2.5;

   962                         ++dec;

   963                     }

   964                 }

   965                 else if (norm < 7.5)

   966                     size = 5;

   967                 else

   968                     size = 10;

   969 

   970                 size *= magn;

   971                 

   972                 if (axisOptions.minTickSize != null && size < axisOptions.minTickSize)

   973                     size = axisOptions.minTickSize;

   974 

   975                 if (axisOptions.tickSize != null)

   976                     size = axisOptions.tickSize;

   977 

   978                 axis.tickDecimals = Math.max(0, (maxDec != null) ? maxDec : dec);

   979 

   980                 generator = function (axis) {

   981                     var ticks = [];

   982 

   983                     // spew out all possible ticks

   984                     var start = floorInBase(axis.min, axis.tickSize),

   985                         i = 0, v = Number.NaN, prev;

   986                     do {

   987                         prev = v;

   988                         v = start + i * axis.tickSize;

   989                         ticks.push({ v: v, label: axis.tickFormatter(v, axis) });

   990                         ++i;

   991                     } while (v < axis.max && v != prev);

   992                     return ticks;

   993                 };

   994 

   995                 formatter = function (v, axis) {

   996                     return v.toFixed(axis.tickDecimals);

   997                 };

   998             }

   999 

  1000             axis.tickSize = unit ? [size, unit] : size;

  1001             axis.tickGenerator = generator;

  1002             if ($.isFunction(axisOptions.tickFormatter))

  1003                 axis.tickFormatter = function (v, axis) { return "" + axisOptions.tickFormatter(v, axis); };

  1004             else

  1005                 axis.tickFormatter = formatter;

  1006         }

  1007         

  1008         function setTicks(axis, axisOptions) {

  1009             axis.ticks = [];

  1010 

  1011             if (!axis.used)

  1012                 return;

  1013             

  1014             if (axisOptions.ticks == null)

  1015                 axis.ticks = axis.tickGenerator(axis);

  1016             else if (typeof axisOptions.ticks == "number") {

  1017                 if (axisOptions.ticks > 0)

  1018                     axis.ticks = axis.tickGenerator(axis);

  1019             }

  1020             else if (axisOptions.ticks) {

  1021                 var ticks = axisOptions.ticks;

  1022 

  1023                 if ($.isFunction(ticks))

  1024                     // generate the ticks

  1025                     ticks = ticks({ min: axis.min, max: axis.max });

  1026                 

  1027                 // clean up the user-supplied ticks, copy them over

  1028                 var i, v;

  1029                 for (i = 0; i < ticks.length; ++i) {

  1030                     var label = null;

  1031                     var t = ticks[i];

  1032                     if (typeof t == "object") {

  1033                         v = t[0];

  1034                         if (t.length > 1)

  1035                             label = t[1];

  1036                     }

  1037                     else

  1038                         v = t;

  1039                     if (label == null)

  1040                         label = axis.tickFormatter(v, axis);

  1041                     axis.ticks[i] = { v: v, label: label };

  1042                 }

  1043             }

  1044 

  1045             if (axisOptions.autoscaleMargin != null && axis.ticks.length > 0) {

  1046                 // snap to ticks

  1047                 if (axisOptions.min == null)

  1048                     axis.min = Math.min(axis.min, axis.ticks[0].v);

  1049                 if (axisOptions.max == null && axis.ticks.length > 1)

  1050                     axis.max = Math.max(axis.max, axis.ticks[axis.ticks.length - 1].v);

  1051             }

  1052         }

  1053       

  1054         function draw() {

  1055             ctx.clearRect(0, 0, canvasWidth, canvasHeight);

  1056 

  1057             var grid = options.grid;

  1058             

  1059             if (grid.show && !grid.aboveData)

  1060                 drawGrid();

  1061 

  1062             for (var i = 0; i < series.length; ++i)

  1063                 drawSeries(series[i]);

  1064 

  1065             executeHooks(hooks.draw, [ctx]);

  1066             

  1067             if (grid.show && grid.aboveData)

  1068                 drawGrid();

  1069         }

  1070 

  1071         function extractRange(ranges, coord) {

  1072             var firstAxis = coord + "axis",

  1073                 secondaryAxis = coord + "2axis",

  1074                 axis, from, to, reverse;

  1075 

  1076             if (ranges[firstAxis]) {

  1077                 axis = axes[firstAxis];

  1078                 from = ranges[firstAxis].from;

  1079                 to = ranges[firstAxis].to;

  1080             }

  1081             else if (ranges[secondaryAxis]) {

  1082                 axis = axes[secondaryAxis];

  1083                 from = ranges[secondaryAxis].from;

  1084                 to = ranges[secondaryAxis].to;

  1085             }

  1086             else {

  1087                 // backwards-compat stuff - to be removed in future

  1088                 axis = axes[firstAxis];

  1089                 from = ranges[coord + "1"];

  1090                 to = ranges[coord + "2"];

  1091             }

  1092 

  1093             // auto-reverse as an added bonus

  1094             if (from != null && to != null && from > to)

  1095                 return { from: to, to: from, axis: axis };

  1096             

  1097             return { from: from, to: to, axis: axis };

  1098         }

  1099         

  1100         function drawGrid() {

  1101             var i;

  1102             

  1103             ctx.save();

  1104             ctx.translate(plotOffset.left, plotOffset.top);

  1105 

  1106             // draw background, if any

  1107             if (options.grid.backgroundColor) {

  1108                 ctx.fillStyle = getColorOrGradient(options.grid.backgroundColor, plotHeight, 0, "rgba(255, 255, 255, 0)");

  1109                 ctx.fillRect(0, 0, plotWidth, plotHeight);

  1110             }

  1111 

  1112             // draw markings

  1113             var markings = options.grid.markings;

  1114             if (markings) {

  1115                 if ($.isFunction(markings))

  1116                     // xmin etc. are backwards-compatible, to be removed in future

  1117                     markings = markings({ xmin: axes.xaxis.min, xmax: axes.xaxis.max, ymin: axes.yaxis.min, ymax: axes.yaxis.max, xaxis: axes.xaxis, yaxis: axes.yaxis, x2axis: axes.x2axis, y2axis: axes.y2axis });

  1118 

  1119                 for (i = 0; i < markings.length; ++i) {

  1120                     var m = markings[i],

  1121                         xrange = extractRange(m, "x"),

  1122                         yrange = extractRange(m, "y");

  1123 

  1124                     // fill in missing

  1125                     if (xrange.from == null)

  1126                         xrange.from = xrange.axis.min;

  1127                     if (xrange.to == null)

  1128                         xrange.to = xrange.axis.max;

  1129                     if (yrange.from == null)

  1130                         yrange.from = yrange.axis.min;

  1131                     if (yrange.to == null)

  1132                         yrange.to = yrange.axis.max;

  1133 

  1134                     // clip

  1135                     if (xrange.to < xrange.axis.min || xrange.from > xrange.axis.max ||