git.roojs.org Git - web.mtrack/blob - js/jquery.flot.pack.js

   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 ||
1136                         yrange.to < yrange.axis.min || yrange.from > yrange.axis.max)
1137                         continue;
1138
1139                     xrange.from = Math.max(xrange.from, xrange.axis.min);
1140                     xrange.to = Math.min(xrange.to, xrange.axis.max);
1141                     yrange.from = Math.max(yrange.from, yrange.axis.min);
1142                     yrange.to = Math.min(yrange.to, yrange.axis.max);
1143
1144                     if (xrange.from == xrange.to && yrange.from == yrange.to)
1145                         continue;
1146
1147                     // then draw
1148                     xrange.from = xrange.axis.p2c(xrange.from);
1149                     xrange.to = xrange.axis.p2c(xrange.to);
1150                     yrange.from = yrange.axis.p2c(yrange.from);
1151                     yrange.to = yrange.axis.p2c(yrange.to);
1152
1153                     if (xrange.from == xrange.to || yrange.from == yrange.to) {
1154                         // draw line
1155                         ctx.beginPath();
1156                         ctx.strokeStyle = m.color || options.grid.markingsColor;
1157                         ctx.lineWidth = m.lineWidth || options.grid.markingsLineWidth;
1158                         //ctx.moveTo(Math.floor(xrange.from), yrange.from);
1159                         //ctx.lineTo(Math.floor(xrange.to), yrange.to);
1160                         ctx.moveTo(xrange.from, yrange.from);
1161                         ctx.lineTo(xrange.to, yrange.to);
1162                         ctx.stroke();
1163                     }
1164                     else {
1165                         // fill area
1166                         ctx.fillStyle = m.color || options.grid.markingsColor;
1167                         ctx.fillRect(xrange.from, yrange.to,
1168                                      xrange.to - xrange.from,
1169                                      yrange.from - yrange.to);
1170                     }
1171                 }
1172             }
1173
1174             // draw the inner grid
1175             ctx.lineWidth = 1;
1176             ctx.strokeStyle = options.grid.tickColor;
1177             ctx.beginPath();
1178             var v, axis = axes.xaxis;
1179             for (i = 0; i < axis.ticks.length; ++i) {
1180                 v = axis.ticks[i].v;
1181                 if (v <= axis.min || v >= axes.xaxis.max)
1182                     continue;   // skip those lying on the axes
1183
1184                 ctx.moveTo(Math.floor(axis.p2c(v)) + ctx.lineWidth/2, 0);
1185                 ctx.lineTo(Math.floor(axis.p2c(v)) + ctx.lineWidth/2, plotHeight);
1186             }
1187
1188             axis = axes.yaxis;
1189             for (i = 0; i < axis.ticks.length; ++i) {
1190                 v = axis.ticks[i].v;
1191                 if (v <= axis.min || v >= axis.max)
1192                     continue;
1193
1194                 ctx.moveTo(0, Math.floor(axis.p2c(v)) + ctx.lineWidth/2);
1195                 ctx.lineTo(plotWidth, Math.floor(axis.p2c(v)) + ctx.lineWidth/2);
1196             }
1197
1198             axis = axes.x2axis;
1199             for (i = 0; i < axis.ticks.length; ++i) {
1200                 v = axis.ticks[i].v;
1201                 if (v <= axis.min || v >= axis.max)
1202                     continue;
1203
1204                 ctx.moveTo(Math.floor(axis.p2c(v)) + ctx.lineWidth/2, -5);
1205                 ctx.lineTo(Math.floor(axis.p2c(v)) + ctx.lineWidth/2, 5);
1206             }
1207
1208             axis = axes.y2axis;
1209             for (i = 0; i < axis.ticks.length; ++i) {
1210                 v = axis.ticks[i].v;
1211                 if (v <= axis.min || v >= axis.max)
1212                     continue;
1213
1214                 ctx.moveTo(plotWidth-5, Math.floor(axis.p2c(v)) + ctx.lineWidth/2);
1215                 ctx.lineTo(plotWidth+5, Math.floor(axis.p2c(v)) + ctx.lineWidth/2);
1216             }
1217
1218             ctx.stroke();
1219
1220             if (options.grid.borderWidth) {
1221                 // draw border
1222                 var bw = options.grid.borderWidth;
1223                 ctx.lineWidth = bw;
1224                 ctx.strokeStyle = options.grid.borderColor;
1225                 ctx.strokeRect(-bw/2, -bw/2, plotWidth + bw, plotHeight + bw);
1226             }
1227
1228             ctx.restore();
1229         }
1230
1231         function insertLabels() {
1232             placeholder.find(".tickLabels").remove();
1233
1234             var html = ['<div class="tickLabels" style="font-size:smaller;color:' + options.grid.color + '">'];
1235
1236             function addLabels(axis, labelGenerator) {
1237                 for (var i = 0; i < axis.ticks.length; ++i) {
1238                     var tick = axis.ticks[i];
1239                     if (!tick.label || tick.v < axis.min || tick.v > axis.max)
1240                         continue;
1241                     html.push(labelGenerator(tick, axis));
1242                 }
1243             }
1244
1245             var margin = options.grid.labelMargin + options.grid.borderWidth;
1246
1247             addLabels(axes.xaxis, function (tick, axis) {
1248                 return '<div style="position:absolute;top:' + (plotOffset.top + plotHeight + margin) + 'px;left:' + Math.round(plotOffset.left + axis.p2c(tick.v) - axis.labelWidth/2) + 'px;width:' + axis.labelWidth + 'px;text-align:center" class="tickLabel">' + tick.label + "</div>";
1249             });
1250
1251
1252             addLabels(axes.yaxis, function (tick, axis) {
1253                 return '<div style="position:absolute;top:' + Math.round(plotOffset.top + axis.p2c(tick.v) - axis.labelHeight/2) + 'px;right:' + (plotOffset.right + plotWidth + margin) + 'px;width:' + axis.labelWidth + 'px;text-align:right" class="tickLabel">' + tick.label + "</div>";
1254             });
1255
1256             addLabels(axes.x2axis, function (tick, axis) {
1257                 return '<div style="position:absolute;bottom:' + (plotOffset.bottom + plotHeight + margin) + 'px;left:' + Math.round(plotOffset.left + axis.p2c(tick.v) - axis.labelWidth/2) + 'px;width:' + axis.labelWidth + 'px;text-align:center" class="tickLabel">' + tick.label + "</div>";
1258             });
1259
1260             addLabels(axes.y2axis, function (tick, axis) {
1261                 return '<div style="position:absolute;top:' + Math.round(plotOffset.top + axis.p2c(tick.v) - axis.labelHeight/2) + 'px;left:' + (plotOffset.left + plotWidth + margin) +'px;width:' + axis.labelWidth + 'px;text-align:left" class="tickLabel">' + tick.label + "</div>";
1262             });
1263
1264             html.push('</div>');
1265
1266             placeholder.append(html.join(""));
1267         }
1268
1269         function drawSeries(series) {
1270             if (series.lines.show)
1271                 drawSeriesLines(series);
1272             if (series.bars.show)
1273                 drawSeriesBars(series);
1274             if (series.points.show)
1275                 drawSeriesPoints(series);
1276         }
1277
1278         function drawSeriesLines(series) {
1279             function plotLine(datapoints, xoffset, yoffset, axisx, axisy) {
1280                 var points = datapoints.points,
1281                     ps = datapoints.pointsize,
1282                     prevx = null, prevy = null;
1283
1284                 ctx.beginPath();
1285                 for (var i = ps; i < points.length; i += ps) {
1286                     var x1 = points[i - ps], y1 = points[i - ps + 1],
1287                         x2 = points[i], y2 = points[i + 1];
1288
1289                     if (x1 == null || x2 == null)
1290                         continue;
1291
1292                     // clip with ymin
1293                     if (y1 <= y2 && y1 < axisy.min) {
1294                         if (y2 < axisy.min)
1295                             continue;   // line segment is outside
1296                         // compute new intersection point
1297                         x1 = (axisy.min - y1) / (y2 - y1) * (x2 - x1) + x1;
1298                         y1 = axisy.min;
1299                     }
1300                     else if (y2 <= y1 && y2 < axisy.min) {
1301                         if (y1 < axisy.min)
1302                             continue;
1303                         x2 = (axisy.min - y1) / (y2 - y1) * (x2 - x1) + x1;
1304                         y2 = axisy.min;
1305                     }
1306
1307                     // clip with ymax
1308                     if (y1 >= y2 && y1 > axisy.max) {
1309                         if (y2 > axisy.max)
1310                             continue;
1311                         x1 = (axisy.max - y1) / (y2 - y1) * (x2 - x1) + x1;
1312                         y1 = axisy.max;
1313                     }
1314                     else if (y2 >= y1 && y2 > axisy.max) {
1315                         if (y1 > axisy.max)
1316                             continue;
1317                         x2 = (axisy.max - y1) / (y2 - y1) * (x2 - x1) + x1;
1318                         y2 = axisy.max;
1319                     }
1320
1321                     // clip with xmin
1322                     if (x1 <= x2 && x1 < axisx.min) {
1323                         if (x2 < axisx.min)
1324                             continue;
1325                         y1 = (axisx.min - x1) / (x2 - x1) * (y2 - y1) + y1;
1326                         x1 = axisx.min;
1327                     }
1328                     else if (x2 <= x1 && x2 < axisx.min) {
1329                         if (x1 < axisx.min)
1330                             continue;
1331                         y2 = (axisx.min - x1) / (x2 - x1) * (y2 - y1) + y1;
1332                         x2 = axisx.min;
1333                     }
1334
1335                     // clip with xmax
1336                     if (x1 >= x2 && x1 > axisx.max) {
1337                         if (x2 > axisx.max)
1338                             continue;
1339                         y1 = (axisx.max - x1) / (x2 - x1) * (y2 - y1) + y1;
1340                         x1 = axisx.max;
1341                     }
1342                     else if (x2 >= x1 && x2 > axisx.max) {
1343                         if (x1 > axisx.max)
1344                             continue;
1345                         y2 = (axisx.max - x1) / (x2 - x1) * (y2 - y1) + y1;
1346                         x2 = axisx.max;
1347                     }
1348
1349                     if (x1 != prevx || y1 != prevy)
1350                         ctx.moveTo(axisx.p2c(x1) + xoffset, axisy.p2c(y1) + yoffset);
1351
1352                     prevx = x2;
1353                     prevy = y2;
1354                     ctx.lineTo(axisx.p2c(x2) + xoffset, axisy.p2c(y2) + yoffset);
1355                 }
1356                 ctx.stroke();
1357             }
1358
1359             function plotLineArea(datapoints, axisx, axisy) {
1360                 var points = datapoints.points,
1361                     ps = datapoints.pointsize,
1362                     bottom = Math.min(Math.max(0, axisy.min), axisy.max),
1363                     top, lastX = 0, areaOpen = false;
1364
1365                 for (var i = ps; i < points.length; i += ps) {
1366                     var x1 = points[i - ps], y1 = points[i - ps + 1],
1367                         x2 = points[i], y2 = points[i + 1];
1368
1369                     if (areaOpen && x1 != null && x2 == null) {
1370                         // close area
1371                         ctx.lineTo(axisx.p2c(lastX), axisy.p2c(bottom));
1372                         ctx.fill();
1373                         areaOpen = false;
1374                         continue;
1375                     }
1376
1377                     if (x1 == null || x2 == null)
1378                         continue;
1379
1380                     // clip x values
1381
1382                     // clip with xmin
1383                     if (x1 <= x2 && x1 < axisx.min) {
1384                         if (x2 < axisx.min)
1385                             continue;
1386                         y1 = (axisx.min - x1) / (x2 - x1) * (y2 - y1) + y1;
1387                         x1 = axisx.min;
1388                     }
1389                     else if (x2 <= x1 && x2 < axisx.min) {
1390                         if (x1 < axisx.min)
1391                             continue;
1392                         y2 = (axisx.min - x1) / (x2 - x1) * (y2 - y1) + y1;
1393                         x2 = axisx.min;
1394                     }
1395
1396                     // clip with xmax
1397                     if (x1 >= x2 && x1 > axisx.max) {
1398                         if (x2 > axisx.max)
1399                             continue;
1400                         y1 = (axisx.max - x1) / (x2 - x1) * (y2 - y1) + y1;
1401                         x1 = axisx.max;
1402                     }
1403                     else if (x2 >= x1 && x2 > axisx.max) {
1404                         if (x1 > axisx.max)
1405                             continue;
1406                         y2 = (axisx.max - x1) / (x2 - x1) * (y2 - y1) + y1;
1407                         x2 = axisx.max;
1408                     }
1409
1410                     if (!areaOpen) {
1411                         // open area
1412                         ctx.beginPath();
1413                         ctx.moveTo(axisx.p2c(x1), axisy.p2c(bottom));
1414                         areaOpen = true;
1415                     }
1416
1417                     // now first check the case where both is outside
1418                     if (y1 >= axisy.max && y2 >= axisy.max) {
1419                         ctx.lineTo(axisx.p2c(x1), axisy.p2c(axisy.max));
1420                         ctx.lineTo(axisx.p2c(x2), axisy.p2c(axisy.max));
1421                         lastX = x2;
1422                         continue;
1423                     }
1424                     else if (y1 <= axisy.min && y2 <= axisy.min) {
1425                         ctx.lineTo(axisx.p2c(x1), axisy.p2c(axisy.min));
1426                         ctx.lineTo(axisx.p2c(x2), axisy.p2c(axisy.min));
1427                         lastX = x2;
1428                         continue;
1429                     }
1430
1431                     // else it's a bit more complicated, there might
1432                     // be two rectangles and two triangles we need to fill
1433                     // in; to find these keep track of the current x values
1434                     var x1old = x1, x2old = x2;
1435
1436                     // and clip the y values, without shortcutting
1437
1438                     // clip with ymin
1439                     if (y1 <= y2 && y1 < axisy.min && y2 >= axisy.min) {
1440                         x1 = (axisy.min - y1) / (y2 - y1) * (x2 - x1) + x1;
1441                         y1 = axisy.min;
1442                     }
1443                     else if (y2 <= y1 && y2 < axisy.min && y1 >= axisy.min) {
1444                         x2 = (axisy.min - y1) / (y2 - y1) * (x2 - x1) + x1;
1445                         y2 = axisy.min;
1446                     }
1447
1448                     // clip with ymax
1449                     if (y1 >= y2 && y1 > axisy.max && y2 <= axisy.max) {
1450                         x1 = (axisy.max - y1) / (y2 - y1) * (x2 - x1) + x1;
1451                         y1 = axisy.max;
1452                     }
1453                     else if (y2 >= y1 && y2 > axisy.max && y1 <= axisy.max) {
1454                         x2 = (axisy.max - y1) / (y2 - y1) * (x2 - x1) + x1;
1455                         y2 = axisy.max;
1456                     }
1457
1458
1459                     // if the x value was changed we got a rectangle
1460                     // to fill
1461                     if (x1 != x1old) {
1462                         if (y1 <= axisy.min)
1463                             top = axisy.min;
1464                         else
1465                             top = axisy.max;
1466
1467                         ctx.lineTo(axisx.p2c(x1old), axisy.p2c(top));
1468                         ctx.lineTo(axisx.p2c(x1), axisy.p2c(top));
1469                     }
1470
1471                     // fill the triangles
1472                     ctx.lineTo(axisx.p2c(x1), axisy.p2c(y1));
1473                     ctx.lineTo(axisx.p2c(x2), axisy.p2c(y2));
1474
1475                     // fill the other rectangle if it's there
1476                     if (x2 != x2old) {
1477                         if (y2 <= axisy.min)
1478                             top = axisy.min;
1479                         else
1480                             top = axisy.max;
1481
1482                         ctx.lineTo(axisx.p2c(x2), axisy.p2c(top));
1483                         ctx.lineTo(axisx.p2c(x2old), axisy.p2c(top));
1484                     }
1485
1486                     lastX = Math.max(x2, x2old);
1487                 }
1488
1489                 if (areaOpen) {
1490                     ctx.lineTo(axisx.p2c(lastX), axisy.p2c(bottom));
1491                     ctx.fill();
1492                 }
1493             }
1494
1495             ctx.save();
1496             ctx.translate(plotOffset.left, plotOffset.top);
1497             ctx.lineJoin = "round";
1498
1499             var lw = series.lines.lineWidth,
1500                 sw = series.shadowSize;
1501             // FIXME: consider another form of shadow when filling is turned on
1502             if (lw > 0 && sw > 0) {
1503                 // draw shadow as a thick and thin line with transparency
1504                 ctx.lineWidth = sw;
1505                 ctx.strokeStyle = "rgba(0,0,0,0.1)";
1506                 // position shadow at angle from the mid of line
1507                 var angle = Math.PI/18;
1508                 plotLine(series.datapoints, Math.sin(angle) * (lw/2 + sw/2), Math.cos(angle) * (lw/2 + sw/2), series.xaxis, series.yaxis);
1509                 ctx.lineWidth = sw/2;
1510                 plotLine(series.datapoints, Math.sin(angle) * (lw/2 + sw/4), Math.cos(angle) * (lw/2 + sw/4), series.xaxis, series.yaxis);
1511             }
1512
1513             ctx.lineWidth = lw;
1514             ctx.strokeStyle = series.color;
1515             var fillStyle = getFillStyle(series.lines, series.color, 0, plotHeight);
1516             if (fillStyle) {
1517                 ctx.fillStyle = fillStyle;
1518                 plotLineArea(series.datapoints, series.xaxis, series.yaxis);
1519             }
1520
1521             if (lw > 0)
1522                 plotLine(series.datapoints, 0, 0, series.xaxis, series.yaxis);
1523             ctx.restore();
1524         }
1525
1526         function drawSeriesPoints(series) {
1527             function plotPoints(datapoints, radius, fillStyle, offset, circumference, axisx, axisy) {
1528                 var points = datapoints.points, ps = datapoints.pointsize;
1529
1530                 for (var i = 0; i < points.length; i += ps) {
1531                     var x = points[i], y = points[i + 1];
1532                     if (x == null || x < axisx.min || x > axisx.max || y < axisy.min || y > axisy.max)
1533                         continue;
1534
1535                     ctx.beginPath();
1536                     ctx.arc(axisx.p2c(x), axisy.p2c(y) + offset, radius, 0, circumference, false);
1537                     if (fillStyle) {
1538                         ctx.fillStyle = fillStyle;
1539                         ctx.fill();
1540                     }
1541                     ctx.stroke();
1542                 }
1543             }
1544
1545             ctx.save();
1546             ctx.translate(plotOffset.left, plotOffset.top);
1547
1548             var lw = series.lines.lineWidth,
1549                 sw = series.shadowSize,
1550                 radius = series.points.radius;
1551             if (lw > 0 && sw > 0) {
1552                 // draw shadow in two steps
1553                 var w = sw / 2;
1554                 ctx.lineWidth = w;
1555                 ctx.strokeStyle = "rgba(0,0,0,0.1)";
1556                 plotPoints(series.datapoints, radius, null, w + w/2, Math.PI,
1557                            series.xaxis, series.yaxis);
1558
1559                 ctx.strokeStyle = "rgba(0,0,0,0.2)";
1560                 plotPoints(series.datapoints, radius, null, w/2, Math.PI,
1561                            series.xaxis, series.yaxis);
1562             }
1563
1564             ctx.lineWidth = lw;
1565             ctx.strokeStyle = series.color;
1566             plotPoints(series.datapoints, radius,
1567                        getFillStyle(series.points, series.color), 0, 2 * Math.PI,
1568                        series.xaxis, series.yaxis);
1569             ctx.restore();
1570         }
1571
1572         function drawBar(x, y, b, barLeft, barRight, offset, fillStyleCallback, axisx, axisy, c, horizontal) {
1573             var left, right, bottom, top,
1574                 drawLeft, drawRight, drawTop, drawBottom,
1575                 tmp;
1576
1577             if (horizontal) {
1578                 drawBottom = drawRight = drawTop = true;
1579                 drawLeft = false;
1580                 left = b;
1581                 right = x;
1582                 top = y + barLeft;
1583                 bottom = y + barRight;
1584
1585                 // account for negative bars
1586                 if (right < left) {
1587                     tmp = right;
1588                     right = left;
1589                     left = tmp;
1590                     drawLeft = true;
1591                     drawRight = false;
1592                 }
1593             }
1594             else {
1595                 drawLeft = drawRight = drawTop = true;
1596                 drawBottom = false;
1597                 left = x + barLeft;
1598                 right = x + barRight;
1599                 bottom = b;
1600                 top = y;
1601
1602                 // account for negative bars
1603                 if (top < bottom) {
1604                     tmp = top;
1605                     top = bottom;
1606                     bottom = tmp;
1607                     drawBottom = true;
1608                     drawTop = false;
1609                 }
1610             }
1611
1612             // clip
1613             if (right < axisx.min || left > axisx.max ||
1614                 top < axisy.min || bottom > axisy.max)
1615                 return;
1616
1617             if (left < axisx.min) {
1618                 left = axisx.min;
1619                 drawLeft = false;
1620             }
1621
1622             if (right > axisx.max) {
1623                 right = axisx.max;
1624                 drawRight = false;
1625             }
1626
1627             if (bottom < axisy.min) {
1628                 bottom = axisy.min;
1629                 drawBottom = false;
1630             }
1631
1632             if (top > axisy.max) {
1633                 top = axisy.max;
1634                 drawTop = false;
1635             }
1636
1637             left = axisx.p2c(left);
1638             bottom = axisy.p2c(bottom);
1639             right = axisx.p2c(right);
1640             top = axisy.p2c(top);
1641
1642             // fill the bar
1643             if (fillStyleCallback) {
1644                 c.beginPath();
1645                 c.moveTo(left, bottom);
1646                 c.lineTo(left, top);
1647                 c.lineTo(right, top);
1648                 c.lineTo(right, bottom);
1649                 c.fillStyle = fillStyleCallback(bottom, top);
1650                 c.fill();
1651             }
1652
1653             // draw outline
1654             if (drawLeft || drawRight || drawTop || drawBottom) {
1655                 c.beginPath();
1656
1657                 // FIXME: inline moveTo is buggy with excanvas
1658                 c.moveTo(left, bottom + offset);
1659                 if (drawLeft)
1660                     c.lineTo(left, top + offset);
1661                 else
1662                     c.moveTo(left, top + offset);
1663                 if (drawTop)
1664                     c.lineTo(right, top + offset);
1665                 else
1666                     c.moveTo(right, top + offset);
1667                 if (drawRight)
1668                     c.lineTo(right, bottom + offset);
1669                 else
1670                     c.moveTo(right, bottom + offset);
1671                 if (drawBottom)
1672                     c.lineTo(left, bottom + offset);
1673                 else
1674                     c.moveTo(left, bottom + offset);
1675                 c.stroke();
1676             }
1677         }
1678
1679         function drawSeriesBars(series) {
1680             function plotBars(datapoints, barLeft, barRight, offset, fillStyleCallback, axisx, axisy) {
1681                 var points = datapoints.points, ps = datapoints.pointsize;
1682
1683                 for (var i = 0; i < points.length; i += ps) {
1684                     if (points[i] == null)
1685                         continue;
1686                     drawBar(points[i], points[i + 1], points[i + 2], barLeft, barRight, offset, fillStyleCallback, axisx, axisy, ctx, series.bars.horizontal);
1687                 }
1688             }
1689
1690             ctx.save();
1691             ctx.translate(plotOffset.left, plotOffset.top);
1692
1693             // FIXME: figure out a way to add shadows (for instance along the right edge)
1694             ctx.lineWidth = series.bars.lineWidth;
1695             ctx.strokeStyle = series.color;
1696             var barLeft = series.bars.align == "left" ? 0 : -series.bars.barWidth/2;
1697             var fillStyleCallback = series.bars.fill ? function (bottom, top) { return getFillStyle(series.bars, series.color, bottom, top); } : null;
1698             plotBars(series.datapoints, barLeft, barLeft + series.bars.barWidth, 0, fillStyleCallback, series.xaxis, series.yaxis);
1699             ctx.restore();
1700         }
1701
1702         function getFillStyle(filloptions, seriesColor, bottom, top) {
1703             var fill = filloptions.fill;
1704             if (!fill)
1705                 return null;
1706
1707             if (filloptions.fillColor)
1708                 return getColorOrGradient(filloptions.fillColor, bottom, top, seriesColor);
1709
1710             var c = $.color.parse(seriesColor);
1711             c.a = typeof fill == "number" ? fill : 0.4;
1712             c.normalize();
1713             return c.toString();
1714         }
1715
1716         function insertLegend() {
1717             placeholder.find(".legend").remove();
1718
1719             if (!options.legend.show)
1720                 return;
1721
1722             var fragments = [], rowStarted = false,
1723                 lf = options.legend.labelFormatter, s, label;
1724             for (i = 0; i < series.length; ++i) {
1725                 s = series[i];
1726                 label = s.label;
1727                 if (!label)
1728                     continue;
1729
1730                 if (i % options.legend.noColumns == 0) {
1731                     if (rowStarted)
1732                         fragments.push('</tr>');
1733                     fragments.push('<tr>');
1734                     rowStarted = true;
1735                 }
1736
1737                 if (lf)
1738                     label = lf(label, s);
1739
1740                 fragments.push(
1741                     '<td class="legendColorBox"><div style="border:1px solid ' + options.legend.labelBoxBorderColor + ';padding:1px"><div style="width:4px;height:0;border:5px solid ' + s.color + ';overflow:hidden"></div></div></td>' +
1742                     '<td class="legendLabel">' + label + '</td>');
1743             }
1744             if (rowStarted)
1745                 fragments.push('</tr>');
1746
1747             if (fragments.length == 0)
1748                 return;
1749
1750             var table = '<table style="font-size:smaller;color:' + options.grid.color + '">' + fragments.join("") + '</table>';
1751             if (options.legend.container != null)
1752                 $(options.legend.container).html(table);
1753             else {
1754                 var pos = "",
1755                     p = options.legend.position,
1756                     m = options.legend.margin;
1757                 if (m[0] == null)
1758                     m = [m, m];
1759                 if (p.charAt(0) == "n")
1760                     pos += 'top:' + (m[1] + plotOffset.top) + 'px;';
1761                 else if (p.charAt(0) == "s")
1762                     pos += 'bottom:' + (m[1] + plotOffset.bottom) + 'px;';
1763                 if (p.charAt(1) == "e")
1764                     pos += 'right:' + (m[0] + plotOffset.right) + 'px;';
1765                 else if (p.charAt(1) == "w")
1766                     pos += 'left:' + (m[0] + plotOffset.left) + 'px;';
1767                 var legend = $('<div class="legend">' + table.replace('style="', 'style="position:absolute;' + pos +';') + '</div>').appendTo(placeholder);
1768                 if (options.legend.backgroundOpacity != 0.0) {
1769                     // put in the transparent background
1770                     // separately to avoid blended labels and
1771                     // label boxes
1772                     var c = options.legend.backgroundColor;
1773                     if (c == null) {
1774                         c = options.grid.backgroundColor;
1775                         if (c && typeof c == "string")
1776                             c = $.color.parse(c);
1777                         else
1778                             c = $.color.extract(legend, 'background-color');
1779                         c.a = 1;
1780                         c = c.toString();
1781                     }
1782                     var div = legend.children();
1783                     $('<div style="position:absolute;width:' + div.width() + 'px;height:' + div.height() + 'px;' + pos +'background-color:' + c + ';"> </div>').prependTo(legend).css('opacity', options.legend.backgroundOpacity);
1784                 }
1785             }
1786         }
1787
1788
1789         // interactive features
1790
1791         var highlights = [],
1792             redrawTimeout = null;
1793
1794         // returns the data item the mouse is over, or null if none is found
1795         function findNearbyItem(mouseX, mouseY, seriesFilter) {
1796             var maxDistance = options.grid.mouseActiveRadius,
1797                 smallestDistance = maxDistance * maxDistance + 1,
1798                 item = null, foundPoint = false, i, j;
1799
1800             for (i = 0; i < series.length; ++i) {
1801                 if (!seriesFilter(series[i]))
1802                     continue;
1803
1804                 var s = series[i],
1805                     axisx = s.xaxis,
1806                     axisy = s.yaxis,
1807                     points = s.datapoints.points,
1808                     ps = s.datapoints.pointsize,
1809                     mx = axisx.c2p(mouseX), // precompute some stuff to make the loop faster
1810                     my = axisy.c2p(mouseY),
1811                     maxx = maxDistance / axisx.scale,
1812                     maxy = maxDistance / axisy.scale;
1813
1814                 if (s.lines.show || s.points.show) {
1815                     for (j = 0; j < points.length; j += ps) {
1816                         var x = points[j], y = points[j + 1];
1817                         if (x == null)
1818                             continue;
1819
1820                         // For points and lines, the cursor must be within a
1821                         // certain distance to the data point
1822                         if (x - mx > maxx || x - mx < -maxx ||
1823                             y - my > maxy || y - my < -maxy)
1824                             continue;
1825
1826                         // We have to calculate distances in pixels, not in
1827                         // data units, because the scales of the axes may be different
1828                         var dx = Math.abs(axisx.p2c(x) - mouseX),
1829                             dy = Math.abs(axisy.p2c(y) - mouseY),
1830                             dist = dx * dx + dy * dy; // we save the sqrt
1831
1832                         // use <= to ensure last point takes precedence
1833                         // (last generally means on top of)
1834                         if (dist <= smallestDistance) {
1835                             smallestDistance = dist;
1836                             item = [i, j / ps];
1837                         }
1838                     }
1839                 }
1840
1841                 if (s.bars.show && !item) { // no other point can be nearby
1842                     var barLeft = s.bars.align == "left" ? 0 : -s.bars.barWidth/2,
1843                         barRight = barLeft + s.bars.barWidth;
1844
1845                     for (j = 0; j < points.length; j += ps) {
1846                         var x = points[j], y = points[j + 1], b = points[j + 2];
1847                         if (x == null)
1848                             continue;
1849
1850                         // for a bar graph, the cursor must be inside the bar
1851                         if (series[i].bars.horizontal ?
1852                             (mx <= Math.max(b, x) && mx >= Math.min(b, x) &&
1853                              my >= y + barLeft && my <= y + barRight) :
1854                             (mx >= x + barLeft && mx <= x + barRight &&
1855                              my >= Math.min(b, y) && my <= Math.max(b, y)))
1856                                 item = [i, j / ps];
1857                     }
1858                 }
1859             }
1860
1861             if (item) {
1862                 i = item[0];
1863                 j = item[1];
1864                 ps = series[i].datapoints.pointsize;
1865
1866                 return { datapoint: series[i].datapoints.points.slice(j * ps, (j + 1) * ps),
1867                          dataIndex: j,
1868                          series: series[i],
1869                          seriesIndex: i };
1870             }
1871
1872             return null;
1873         }
1874
1875         function onMouseMove(e) {
1876             if (options.grid.hoverable)
1877                 triggerClickHoverEvent("plothover", e,
1878                                        function (s) { return s["hoverable"] != false; });
1879         }
1880
1881         function onClick(e) {
1882             triggerClickHoverEvent("plotclick", e,
1883                                    function (s) { return s["clickable"] != false; });
1884         }
1885
1886         // trigger click or hover event (they send the same parameters
1887         // so we share their code)
1888         function triggerClickHoverEvent(eventname, event, seriesFilter) {
1889             var offset = eventHolder.offset(),
1890                 pos = { pageX: event.pageX, pageY: event.pageY },
1891                 canvasX = event.pageX - offset.left - plotOffset.left,
1892                 canvasY = event.pageY - offset.top - plotOffset.top;
1893
1894             if (axes.xaxis.used)
1895                 pos.x = axes.xaxis.c2p(canvasX);
1896             if (axes.yaxis.used)
1897                 pos.y = axes.yaxis.c2p(canvasY);
1898             if (axes.x2axis.used)
1899                 pos.x2 = axes.x2axis.c2p(canvasX);
1900             if (axes.y2axis.used)
1901                 pos.y2 = axes.y2axis.c2p(canvasY);
1902
1903             var item = findNearbyItem(canvasX, canvasY, seriesFilter);
1904
1905             if (item) {
1906                 // fill in mouse pos for any listeners out there
1907                 item.pageX = parseInt(item.series.xaxis.p2c(item.datapoint[0]) + offset.left + plotOffset.left);
1908                 item.pageY = parseInt(item.series.yaxis.p2c(item.datapoint[1]) + offset.top + plotOffset.top);
1909             }
1910
1911             if (options.grid.autoHighlight) {
1912                 // clear auto-highlights
1913                 for (var i = 0; i < highlights.length; ++i) {
1914                     var h = highlights[i];
1915                     if (h.auto == eventname &&
1916                         !(item && h.series == item.series && h.point == item.datapoint))
1917                         unhighlight(h.series, h.point);
1918                 }
1919
1920                 if (item)
1921                     highlight(item.series, item.datapoint, eventname);
1922             }
1923
1924             placeholder.trigger(eventname, [ pos, item ]);
1925         }
1926
1927         function triggerRedrawOverlay() {
1928             if (!redrawTimeout)
1929                 redrawTimeout = setTimeout(drawOverlay, 30);
1930         }
1931
1932         function drawOverlay() {
1933             redrawTimeout = null;
1934
1935             // draw highlights
1936             octx.save();
1937             octx.clearRect(0, 0, canvasWidth, canvasHeight);
1938             octx.translate(plotOffset.left, plotOffset.top);
1939
1940             var i, hi;
1941             for (i = 0; i < highlights.length; ++i) {
1942                 hi = highlights[i];
1943
1944                 if (hi.series.bars.show)
1945                     drawBarHighlight(hi.series, hi.point);
1946                 else
1947                     drawPointHighlight(hi.series, hi.point);
1948             }
1949             octx.restore();
1950
1951             executeHooks(hooks.drawOverlay, [octx]);
1952         }
1953
1954         function highlight(s, point, auto) {
1955             if (typeof s == "number")
1956                 s = series[s];
1957
1958             if (typeof point == "number")
1959                 point = s.data[point];
1960
1961             var i = indexOfHighlight(s, point);
1962             if (i == -1) {
1963                 highlights.push({ series: s, point: point, auto: auto });
1964
1965                 triggerRedrawOverlay();
1966             }
1967             else if (!auto)
1968                 highlights[i].auto = false;
1969         }
1970
1971         function unhighlight(s, point) {
1972             if (s == null && point == null) {
1973                 highlights = [];
1974                 triggerRedrawOverlay();
1975             }
1976
1977             if (typeof s == "number")
1978                 s = series[s];
1979
1980             if (typeof point == "number")
1981                 point = s.data[point];
1982
1983             var i = indexOfHighlight(s, point);
1984             if (i != -1) {
1985                 highlights.splice(i, 1);
1986
1987                 triggerRedrawOverlay();
1988             }
1989         }
1990
1991         function indexOfHighlight(s, p) {
1992             for (var i = 0; i < highlights.length; ++i) {
1993                 var h = highlights[i];
1994                 if (h.series == s && h.point[0] == p[0]
1995                     && h.point[1] == p[1])
1996                     return i;
1997             }
1998             return -1;
1999         }
2000
2001         function drawPointHighlight(series, point) {
2002             var x = point[0], y = point[1],
2003                 axisx = series.xaxis, axisy = series.yaxis;
2004
2005             if (x < axisx.min || x > axisx.max || y < axisy.min || y > axisy.max)
2006                 return;
2007
2008             var pointRadius = series.points.radius + series.points.lineWidth / 2;
2009             octx.lineWidth = pointRadius;
2010             octx.strokeStyle = $.color.parse(series.color).scale('a', 0.5).toString();
2011             var radius = 1.5 * pointRadius;
2012             octx.beginPath();
2013             octx.arc(axisx.p2c(x), axisy.p2c(y), radius, 0, 2 * Math.PI, false);
2014             octx.stroke();
2015         }
2016
2017         function drawBarHighlight(series, point) {
2018             octx.lineWidth = series.bars.lineWidth;
2019             octx.strokeStyle = $.color.parse(series.color).scale('a', 0.5).toString();
2020             var fillStyle = $.color.parse(series.color).scale('a', 0.5).toString();
2021             var barLeft = series.bars.align == "left" ? 0 : -series.bars.barWidth/2;
2022             drawBar(point[0], point[1], point[2] || 0, barLeft, barLeft + series.bars.barWidth,
2023                     0, function () { return fillStyle; }, series.xaxis, series.yaxis, octx, series.bars.horizontal);
2024         }
2025
2026         function getColorOrGradient(spec, bottom, top, defaultColor) {
2027             if (typeof spec == "string")
2028                 return spec;
2029             else {
2030                 // assume this is a gradient spec; IE currently only
2031                 // supports a simple vertical gradient properly, so that's
2032                 // what we support too
2033                 var gradient = ctx.createLinearGradient(0, top, 0, bottom);
2034
2035                 for (var i = 0, l = spec.colors.length; i < l; ++i) {
2036                     var c = spec.colors[i];
2037                     if (typeof c != "string") {
2038                         c = $.color.parse(defaultColor).scale('rgb', c.brightness);
2039                         c.a *= c.opacity;
2040                         c = c.toString();
2041                     }
2042                     gradient.addColorStop(i / (l - 1), c);
2043                 }
2044
2045                 return gradient;
2046             }
2047         }
2048     }
2049
2050     $.plot = function(placeholder, data, options) {
2051         var plot = new Plot($(placeholder), data, options, $.plot.plugins);
2052         /*var t0 = new Date();
2053         var t1 = new Date();
2054         var tstr = "time used (msecs): " + (t1.getTime() - t0.getTime())
2055         if (window.console)
2056             console.log(tstr);
2057         else
2058             alert(tstr);*/
2059         return plot;
2060     };
2061
2062     $.plot.plugins = [];
2063
2064     // returns a string with the date d formatted according to fmt
2065     $.plot.formatDate = function(d, fmt, monthNames) {
2066         var leftPad = function(n) {
2067             n = "" + n;
2068             return n.length == 1 ? "0" + n : n;
2069         };
2070
2071         var r = [];
2072         var escape = false;
2073         var hours = d.getUTCHours();
2074         var isAM = hours < 12;
2075         if (monthNames == null)
2076             monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
2077
2078         if (fmt.search(/%p|%P/) != -1) {
2079             if (hours > 12) {
2080                 hours = hours - 12;
2081             } else if (hours == 0) {
2082                 hours = 12;
2083             }
2084         }
2085         for (var i = 0; i < fmt.length; ++i) {
2086             var c = fmt.charAt(i);
2087
2088             if (escape) {
2089                 switch (c) {
2090                 case 'h': c = "" + hours; break;
2091                 case 'H': c = leftPad(hours); break;
2092                 case 'M': c = leftPad(d.getUTCMinutes()); break;
2093                 case 'S': c = leftPad(d.getUTCSeconds()); break;
2094                 case 'd': c = "" + d.getUTCDate(); break;
2095                 case 'm': c = "" + (d.getUTCMonth() + 1); break;
2096                 case 'y': c = "" + d.getUTCFullYear(); break;
2097                 case 'b': c = "" + monthNames[d.getUTCMonth()]; break;
2098                 case 'p': c = (isAM) ? ("" + "am") : ("" + "pm"); break;
2099                 case 'P': c = (isAM) ? ("" + "AM") : ("" + "PM"); break;
2100                 }
2101                 r.push(c);
2102                 escape = false;
2103             }
2104             else {
2105                 if (c == "%")
2106                     escape = true;
2107                 else
2108                     r.push(c);
2109             }
2110         }
2111         return r.join("");
2112     };
2113
2114     // round to nearby lower multiple of base
2115     function floorInBase(n, base) {
2116         return base * Math.floor(n / base);
2117     }
2118
2119 })(jQuery);