1 /**

     2 *

     3 * jquery.sparkline.js

     4 *

     5 * v1.4.2

     6 * (c) Splunk, Inc 

     7 * Contact: Gareth Watts (gareth@splunk.com)

     8 * http://omnipotent.net/jquery.sparkline/

     9 *

    10 * Generates inline sparkline charts from data supplied either to the method

    11 * or inline in HTML

    12 * 

    13 * Compatible with Internet Explorer 6.0+ and modern browsers equipped with the canvas tag

    14 * (Firefox 2.0+, Safari, Opera, etc)

    15 *

    16 * License: New BSD License

    17 * 

    18 * Copyright (c) 2009, Splunk Inc.

    19 * All rights reserved.

    20 * 

    21 * Redistribution and use in source and binary forms, with or without modification, 

    22 * are permitted provided that the following conditions are met:

    23 * 

    24 *     * Redistributions of source code must retain the above copyright notice, 

    25 *       this list of conditions and the following disclaimer.

    26 *     * Redistributions in binary form must reproduce the above copyright notice, 

    27 *       this list of conditions and the following disclaimer in the documentation 

    28 *       and/or other materials provided with the distribution.

    29 *     * Neither the name of Splunk Inc nor the names of its contributors may 

    30 *       be used to endorse or promote products derived from this software without 

    31 *       specific prior written permission.

    32 * 

    33 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY 

    34 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES 

    35 * OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT 

    36 * SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, 

    37 * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT 

    38 * OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) 

    39 * HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, 

    40 * OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS 

    41 * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

    42 * 

    43 *

    44 * Usage: 

    45 *  $(selector).sparkline(values, options)

    46 *

    47 * If values is undefined or set to 'html' then the data values are read from the specified tag:

    48 *   <p>Sparkline: <span class="sparkline">1,4,6,6,8,5,3,5</span></p>

    49 *   $('.sparkline').sparkline();

    50 * There must be no spaces in the enclosed data set

    51 *

    52 * Otherwise values must be an array of numbers

    53 *    <p>Sparkline: <span id="sparkline1">This text replaced if the browser is compatible</span></p>

    54 *    $('#sparkline1').sparkline([1,4,6,6,8,5,3,5])

    55 *

    56 * For line charts, x values can also be specified:

    57 *   <p>Sparkline: <span class="sparkline">1:1,2.7:4,3.4:6,5:6,6:8,8.7:5,9:3,10:5</span></p>

    58 *    $('#sparkline1').sparkline([ [1,1], [2.7,4], [3.4,6], [5,6], [6,8], [8.7,5], [9,3], [10,5] ])

    59 *

    60 * Supported options:

    61 *   lineColor - Color of the line used for the chart

    62 *   fillColor - Color used to fill in the chart - Set to '' or false for a transparent chart

    63 *   width - Width of the chart - Defaults to 3 times the number of values in pixels

    64 *   height - Height of the chart - Defaults to the height of the containing element

    65 *   chartRangeMin - Specify the minimum value to use for the range of the chart - Defaults to the minimum value supplied

    66 *   chartRangeMax - Specify the maximum value to use for the range of the chart - Defaults to the maximum value supplied

    67 *   composite - If true then don't erase any existing chart attached to the tag, but draw

    68 *           another chart over the top - Note that width and height are ignored if an

    69 *           existing chart is detected.

    70 *

    71 * There are 7 types of sparkline, selected by supplying a "type" option of 'line' (default),

    72 * 'bar', 'tristate', 'bullet', 'discrete', 'pie' or 'box'

    73 *    line - Line chart.  Options:

    74 *       spotColor - Set to '' to not end each line in a circular spot

    75 *       minSpotColor - If set, color of spot at minimum value

    76 *       maxSpotColor - If set, color of spot at maximum value

    77 *       spotRadius - Radius in pixels

    78 *       normalRangeMin 

    79 *       normalRangeMax - If set draws a filled horizontal bar between these two values marking the "normal"

    80 *                      or expected range of values

    81 *       normalRangeColor - Color to use for the above bar

    82 *       defaultPixelsPerValue - Defaults to 3 pixels of width for each value in the chart

    83 *

    84 *   bar - Bar chart.  Options:

    85 *       barColor - Color of bars for postive values

    86 *       negBarColor - Color of bars for negative values

    87 *       barWidth - Width of bars in pixels

    88 *       barSpacing - Gap between bars in pixels

    89 *       zeroAxis - Centers the y-axis around zero if true

    90 *

    91 *   tristate - Charts values of win (>0), lose (<0) or draw (=0)

    92 *       posBarColor - Color of win values

    93 *       negBarColor - Color of lose values

    94 *       zeroBarColor - Color of draw values

    95 *       barWidth - Width of bars in pixels

    96 *       barSpacing - Gap between bars in pixels

    97 *       colorMap - Optional mappnig of values to colors to override the *BarColor values above

    98 *

    99 *   discrete - Options:

   100 *       lineHeight - Height of each line in pixels - Defaults to 30% of the graph height

   101 *       thesholdValue - Values less than this value will be drawn using thresholdColor instead of lineColor

   102 *       thresholdColor

   103 *

   104 *   bullet - Values for bullet graphs msut be in the order: target, performance, range1, range2, range3, ...

   105 *       options:

   106 *       targetColor - The color of the vertical target marker

   107 *       targetWidth - The width of the target marker in pixels

   108 *       performanceColor - The color of the performance measure horizontal bar

   109 *       rangeColors - Colors to use for each qualitative range background color

   110 *

   111 *   pie - Pie chart. Options:

   112 *       sliceColors - An array of colors to use for pie slices

   113 *       offset - Angle in degrees to offset the first slice - Try -90 or +90

   114 *

   115 *   box - Box plot. Options:

   116 *       raw - Set to true to supply pre-computed plot points as values

   117 *             values should be: low_outlier, low_whisker, q1, median, q3, high_whisker, high_outlier

   118 *             When set to false you can supply any number of values and the box plot will

   119 *             be computed for you.  Default is false.

   120 *       showOutliers - Set to true (default) to display outliers as circles

   121 *       outlierIRQ - Interquartile range used to determine outliers.  Default 1.5

   122 *       boxLineColor - Outline color of the box

   123 *       boxFillColor - Fill color for the box

   124 *       whiskerColor - Line color used for whiskers

   125 *       outlierLineColor - Outline color of outlier circles

   126 *       outlierFillColor - Fill color of the outlier circles

   127 *       spotRadius - Radius of outlier circles

   128 *       medianColor - Line color of the median line

   129 *       target - Draw a target cross hair at the supplied value (default undefined)

   130 *      

   131 *   

   132 *       

   133 *   Examples:

   134 *   $('#sparkline1').sparkline(myvalues, { lineColor: '#f00', fillColor: false });

   135 *   $('.barsparks').sparkline('html', { type:'bar', height:'40px', barWidth:5 });

   136 *   $('#tristate').sparkline([1,1,-1,1,0,0,-1], { type:'tristate' }):

   137 *   $('#discrete').sparkline([1,3,4,5,5,3,4,5], { type:'discrete' });

   138 *   $('#bullet').sparkline([10,12,12,9,7], { type:'bullet' });

   139 *   $('#pie').sparkline([1,1,2], { type:'pie' });

   140 */

   141 

   142 

   143 (function($) {

   144 

   145     // Provide a cross-browser interface to a few simple drawing primitives

   146     $.fn.simpledraw = function(width, height, use_existing) {

   147         if (use_existing && this[0].vcanvas) return this[0].vcanvas;

   148         if (width==undefined) width=$(this).innerWidth();

   149         if (height==undefined) height=$(this).innerHeight();

   150         if ($.browser.hasCanvas) {

   151             return new vcanvas_canvas(width, height, this);

   152         } else if ($.browser.msie) {

   153             return new vcanvas_vml(width, height, this);

   154         } else {

   155             return false;

   156         }

   157     };

   158 

   159     var pending = [];

   160 

   161     $.fn.sparkline = function(uservalues, options) {

   162         var options = $.extend({

   163             type : 'line',

   164             lineColor : '#00f',

   165             fillColor : '#cdf',

   166             defaultPixelsPerValue : 3,

   167             width : 'auto', 

   168             height : 'auto',

   169             composite : false

   170         }, options ? options : {});

   171         

   172         return this.each(function() {

   173             var render = function() {

   174                 var values = (uservalues=='html' || uservalues==undefined) ? $(this).text().split(',') : uservalues;

   175 

   176                 var width = options.width=='auto' ? values.length*options.defaultPixelsPerValue : options.width;

   177                 if (options.height == 'auto') {

   178                     if (!options.composite || !this.vcanvas) {

   179                         // must be a better way to get the line height

   180                         var tmp = document.createElement('span');

   181                         tmp.innerHTML = 'a';

   182                         $(this).html(tmp);

   183                         height = $(tmp).innerHeight();

   184                         $(tmp).remove();

   185                     }

   186                 } else {

   187                     height = options.height;

   188                 }

   189 

   190                 $.fn.sparkline[options.type].call(this, values, options, width, height);

   191             }

   192             // jQuery 1.3.0 completely changed the meaning of :hidden :-/

   193             if (($(this).html() && $(this).is(':hidden')) || ($.fn.jquery < "1.3.0" && $(this).parents().is(':hidden'))) {

   194                 pending.push([this, render]);

   195             } else {

   196                 render.call(this);

   197             }

   198         });

   199     };

   200 

   201 

   202     $.sparkline_display_visible = function() {

   203         for (var i=pending.length-1; i>=0; i--) {

   204             var el = pending[i][0];

   205             if ($(el).is(':visible') && !$(el).parents().is(':hidden')) {

   206                 pending[i][1].call(el);

   207                 pending.splice(i, 1);

   208             }

   209         }

   210     };

   211 

   212     $.fn.sparkline.line = function(values, options, width, height) {

   213         var options = $.extend({

   214             spotColor : '#f80',

   215             spotRadius : 1.5,

   216             minSpotColor : '#f80',

   217             maxSpotColor : '#f80',

   218             normalRangeMin : undefined,

   219             normalRangeMax : undefined,

   220             normalRangeColor : '#ccc',

   221             chartRangeMin : undefined,

   222             chartRangeMax : undefined

   223         }, options ? options : {});

   224 

   225         var xvalues = [], yvalues = [];

   226         for (i=0; i<values.length; i++) {

   227             var isstr = typeof(values[i])=='string';

   228             var isarray = typeof(values[i])=='object' && values[i] instanceof Array;

   229             var sp = isstr && values[i].split(':');

   230             if (isstr && sp.length == 2) { // x:y

   231                 xvalues.push(Number(sp[0]));

   232                 yvalues.push(Number(sp[1]));

   233             } else if (isarray) {

   234                 xvalues.push(values[i][0]);

   235                 yvalues.push(values[i][1]);

   236             } else {

   237                 xvalues.push(i);

   238                 yvalues.push(Number(values[i]));

   239             }

   240         }

   241         if (options.xvalues) {

   242             xvalues = options.xvalues;

   243         }

   244 

   245         var maxy = Math.max.apply(Math, yvalues);

   246         var maxyval = maxy;

   247         var miny = Math.min.apply(Math, yvalues);

   248         var minyval = miny;

   249 

   250         var maxx = Math.max.apply(Math, xvalues);

   251         var maxxval = maxx;

   252         var minx = Math.min.apply(Math, xvalues);

   253         var minxval = minx;

   254 

   255         if (options.normalRangeMin!=undefined) {

   256             if (options.normalRangeMin<miny)

   257                 miny = options.normalRangeMin;

   258             if (options.normalRangeMax>maxy)

   259                 maxy = options.normalRangeMax;

   260         }

   261         if (options.chartRangeMin!=undefined && options.chartRangeMin<miny) {

   262             miny = options.chartRangeMin;

   263         }

   264         if (options.chartRangeMax!=undefined && options.chartRangeMax>maxy) {

   265             maxy = options.chartRangeMax;

   266         }

   267         var rangex = maxx-minx == 0 ? 1 : maxx-minx;

   268         var rangey = maxy-miny == 0 ? 1 : maxy-miny;

   269         var vl = yvalues.length-1;

   270 

   271         if (vl<1) {

   272             this.innerHTML = '';

   273             return;

   274         }

   275 

   276         var target = $(this).simpledraw(width, height, options.composite);

   277         if (target) {

   278             var canvas_width = target.pixel_width;

   279             var canvas_height = target.pixel_height;

   280             var canvas_top = 0;

   281             var canvas_left = 0;

   282 

   283             if (options.spotRadius && (canvas_width < (options.spotRadius*4) || canvas_height < (options.spotRadius*4))) {

   284                 options.spotRadius = 0;

   285             }

   286             if (options.spotRadius) {

   287                 // adjust the canvas size as required so that spots will fit

   288                 if (options.minSpotColor || (options.spotColor && yvalues[vl]==miny)) 

   289                     canvas_height -= Math.ceil(options.spotRadius);

   290                 if (options.maxSpotColor || (options.spotColor && yvalues[vl]==maxy)) {

   291                     canvas_height -= Math.ceil(options.spotRadius);

   292                     canvas_top += Math.ceil(options.spotRadius);

   293                 }

   294                 if (options.minSpotColor || options.maxSpotColor && (yvalues[0]==miny || yvalues[0]==maxy)) {

   295                     canvas_left += Math.ceil(options.spotRadius);

   296                     canvas_width -= Math.ceil(options.spotRadius);

   297                 }

   298                 if (options.spotColor || (options.minSpotColor || options.maxSpotColor && (yvalues[vl]==miny||yvalues[vl]==maxy)))

   299                     canvas_width -= Math.ceil(options.spotRadius);

   300             }

   301 

   302 

   303             canvas_height--;

   304             if (options.normalRangeMin!=undefined) {

   305                 var ytop = canvas_top+Math.round(canvas_height-(canvas_height*((options.normalRangeMax-miny)/rangey)));

   306                 var height = Math.round((canvas_height*(options.normalRangeMax-options.normalRangeMin))/rangey);

   307                 target.drawRect(canvas_left, ytop, canvas_width, height, undefined, options.normalRangeColor);

   308             }

   309 

   310             var path = [ [canvas_left, canvas_top+canvas_height] ];

   311             for(var i=0; i<yvalues.length; i++) {

   312                 var x=xvalues[i], y=yvalues[i];

   313                 path.push([canvas_left+Math.round((x-minx)*(canvas_width/rangex)), canvas_top+Math.round(canvas_height-(canvas_height*((y-miny)/rangey)))]);

   314             }

   315             if (options.fillColor) {

   316                 path.push([canvas_left+canvas_width, canvas_top+canvas_height-1]);

   317                 target.drawShape(path, undefined, options.fillColor);

   318                 path.pop();

   319             }

   320             path[0] = [ canvas_left, canvas_top+Math.round(canvas_height-(canvas_height*((yvalues[0]-miny)/rangey))) ];

   321             target.drawShape(path, options.lineColor);

   322             if (options.spotRadius && options.spotColor) {

   323                 target.drawCircle(canvas_left+canvas_width,  canvas_top+Math.round(canvas_height-(canvas_height*((yvalues[vl]-miny)/rangey))), options.spotRadius, undefined, options.spotColor);

   324             }

   325             if (maxy!=minyval) {

   326                 if (options.spotRadius && options.minSpotColor) {

   327                     var x = xvalues[yvalues.indexOf(minyval)];

   328                     target.drawCircle(canvas_left+Math.round((x-minx)*(canvas_width/rangex)),  canvas_top+Math.round(canvas_height-(canvas_height*((minyval-miny)/rangey))), options.spotRadius, undefined, options.minSpotColor);

   329                 }

   330                 if (options.spotRadius && options.maxSpotColor) {

   331                     var x = xvalues[yvalues.indexOf(maxyval)];

   332                     target.drawCircle(canvas_left+Math.round((x-minx)*(canvas_width/rangex)),  canvas_top+Math.round(canvas_height-(canvas_height*((maxyval-miny)/rangey))), options.spotRadius, undefined, options.maxSpotColor);

   333                 }

   334             }

   335         } else {

   336             // Remove the tag contents if sparklines aren't supported

   337             this.innerHTML = '';

   338         }

   339     };

   340 

   341     $.fn.sparkline.bar = function(values, options, width, height) {

   342         values = $.map(values, Number);

   343         var options = $.extend({

   344             type : 'bar',

   345             barColor : '#00f',

   346             negBarColor : '#f44',

   347             zeroColor: undefined,

   348             zeroAxis : undefined,

   349             barWidth : 4,

   350             barSpacing : 1,

   351             chartRangeMax: undefined,

   352             chartRangeMin: undefined

   353         }, options ? options : {});

   354 

   355         var width = (values.length * options.barWidth) + ((values.length-1) * options.barSpacing);

   356         var max = Math.max.apply(Math, values);

   357         var min = Math.min.apply(Math, values);

   358         if (options.chartRangeMin!=undefined && options.chartRangeMin<min) {

   359             min = options.chartRangeMin;

   360         }

   361         if (options.chartRangeMax!=undefined && options.chartRangeMax>max) {

   362             max = options.chartRangeMax;

   363         }

   364         if (options.zeroAxis == undefined) options.zeroAxis = min<0;

   365         var range = max-min == 0 ? 1 : max-min;

   366 

   367         var target = $(this).simpledraw(width, height);

   368         if (target) {

   369             var canvas_width = target.pixel_width;

   370             var canvas_height = target.pixel_height;

   371             var yzero = min<0 && options.zeroAxis ? canvas_height-Math.round(canvas_height * (Math.abs(min)/range))-1 : canvas_height-1;

   372 

   373             for(var i=0; i<values.length; i++) {

   374                 var x = i*(options.barWidth+options.barSpacing);

   375                 var val = values[i];

   376                 var color = (val < 0) ? options.negBarColor : options.barColor;

   377                 if (options.zeroAxis && min<0) {

   378                     var height = Math.round(canvas_height*((Math.abs(val)/range)))+1;

   379                     var y = (val < 0) ? yzero : yzero-height;

   380                 } else {

   381                     var height = Math.round(canvas_height*((val-min)/range))+1;

   382                     var y = canvas_height-height;

   383                 }

   384                 if (val==0 && options.zeroColor!=undefined) {

   385                     color = options.zeroColor;

   386                 }

   387                 target.drawRect(x, y, options.barWidth-1, height-1, color, color);

   388             }

   389         } else {

   390             // Remove the tag contents if sparklines aren't supported

   391             this.innerHTML = '';

   392         }

   393     };

   394 

   395     $.fn.sparkline.tristate = function(values, options, width, height) {

   396         values = $.map(values, Number);

   397         var options = $.extend({

   398             barWidth : 4,

   399             barSpacing : 1,

   400             posBarColor: '#6f6',

   401             negBarColor : '#f44',

   402             zeroBarColor : '#999',

   403             colorMap : {}

   404         }, options);

   405 

   406         var width = (values.length * options.barWidth) + ((values.length-1) * options.barSpacing);

   407 

   408         var target = $(this).simpledraw(width, height);

   409         if (target) {

   410             var canvas_width = target.pixel_width;

   411             var canvas_height = target.pixel_height;

   412             var half_height = Math.round(canvas_height/2);

   413 

   414             for(var i=0; i<values.length; i++) {

   415                 var x = i*(options.barWidth+options.barSpacing);

   416                 if (values[i] < 0) {

   417                     var y = half_height;

   418                     var height = half_height-1;

   419                     var color = options.negBarColor;

   420                 } else if (values[i] > 0) {

   421                     var y = 0;

   422                     var height = half_height-1;

   423                     var color = options.posBarColor;

   424                 } else {

   425                     var y = half_height-1;

   426                     var height = 2;

   427                     var color = options.zeroBarColor;

   428                 }

   429                 if (options.colorMap[values[i]]) {

   430                     color = options.colorMap[values[i]];

   431                 }

   432                 target.drawRect(x, y, options.barWidth-1, height-1, color, color);

   433             }

   434         } else {

   435             // Remove the tag contents if sparklines aren't supported

   436             this.innerHTML = '';

   437         }

   438     };

   439 

   440     $.fn.sparkline.discrete = function(values, options, width, height) {

   441         values = $.map(values, Number);

   442         var options = $.extend({

   443             lineHeight: 'auto',

   444             thresholdColor: undefined,

   445             thresholdValue : 0,

   446             chartRangeMax: undefined,

   447             chartRangeMin: undefined

   448         }, options);

   449 

   450         width = options.width=='auto' ? values.length*2 : width;

   451         var interval = Math.floor(width / values.length);

   452 

   453         var target = $(this).simpledraw(width, height);

   454         if (target) {

   455             var canvas_width = target.pixel_width;

   456             var canvas_height = target.pixel_height;

   457             var line_height = options.lineHeight == 'auto' ? Math.round(canvas_height * 0.3) : options.lineHeight;

   458             var pheight = canvas_height - line_height;

   459             var min = Math.min.apply(Math, values);

   460             var max = Math.max.apply(Math, values);

   461             if (options.chartRangeMin!=undefined && options.chartRangeMin<min) {

   462                 min = options.chartRangeMin;

   463             }

   464             if (options.chartRangeMax!=undefined && options.chartRangeMax>max) {

   465                 max = options.chartRangeMax;

   466             }

   467             var range = max-min;

   468 

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

   470                 var val = values[i];

   471                 var x = (i*interval);

   472                 var ytop = Math.round(pheight-pheight*((val-min)/range));

   473                 target.drawLine(x, ytop, x, ytop+line_height, (options.thresholdColor && val < options.thresholdValue) ? options.thresholdColor : options.lineColor);

   474             }

   475         }  else {

   476             // Remove the tag contents if sparklines aren't supported

   477             this.innerHTML = '';

   478         }

   479                 

   480     };

   481 

   482     $.fn.sparkline.bullet = function(values, options, width, height) {

   483         values = $.map(values, Number);

   484         // target, performance, range1, range2, range3

   485         var options = $.extend({

   486             targetColor : 'red',

   487             targetWidth : 3, // width of the target bar in pixels

   488             performanceColor : 'blue',

   489             rangeColors : ['#D3DAFE', '#A8B6FF', '#7F94FF' ],

   490             base : undefined // set this to a number to change the base start number

   491         }, options);

   492 

   493         

   494         width = options.width=='auto' ? '4.0em' : width;

   495 

   496         var target = $(this).simpledraw(width, height);

   497         if (target && values.length>1) {

   498             var canvas_width = target.pixel_width-Math.ceil(options.targetWidth/2);

   499             var canvas_height = target.pixel_height;

   500 

   501             var min = Math.min.apply(Math, values);

   502             var max = Math.max.apply(Math, values);

   503             if (options.base == undefined) {

   504                 var min = min < 0 ? min : 0;

   505             } else {

   506                 min = options.base;

   507             }

   508             var range = max-min;

   509 

   510             // draw range values

   511             for(i=2; i<values.length; i++) {

   512                 var rangeval = parseInt(values[i]);

   513                 var rangewidth = Math.round(canvas_width*((rangeval-min)/range));

   514                 target.drawRect(0, 0, rangewidth-1, canvas_height-1, options.rangeColors[i-2], options.rangeColors[i-2]);

   515             }

   516 

   517             // draw the performance bar

   518             var perfval = parseInt(values[1]);

   519             var perfwidth = Math.round(canvas_width*((perfval-min)/range));

   520             target.drawRect(0, Math.round(canvas_height*0.3), perfwidth-1, Math.round(canvas_height*0.4)-1, options.performanceColor, options.performanceColor);

   521 

   522             // draw the target linej

   523             var targetval = parseInt(values[0]);

   524             var x = Math.round(canvas_width*((targetval-min)/range)-(options.targetWidth/2));

   525             var targettop = Math.round(canvas_height*0.10);

   526             var targetheight = canvas_height-(targettop*2);

   527             target.drawRect(x, targettop, options.targetWidth-1, targetheight-1, options.targetColor, options.targetColor);

   528         }  else {

   529             // Remove the tag contents if sparklines aren't supported

   530             this.innerHTML = '';

   531         }

   532     };

   533 

   534     $.fn.sparkline.pie = function(values, options, width, height) {

   535         values = $.map(values, Number);

   536         var options = $.extend({

   537             sliceColors : ['#f00', '#0f0', '#00f']

   538         }, options);

   539 

   540         width = options.width=='auto' ? height : width;

   541 

   542         var target = $(this).simpledraw(width, height);

   543         if (target && values.length>1) {

   544             var canvas_width = target.pixel_width;

   545             var canvas_height = target.pixel_height;

   546                 

   547             var radius = Math.floor(Math.min(canvas_width, canvas_height)/2);

   548             var total = 0;

   549             for(var i=0; i<values.length; i++)

   550                 total += values[i];

   551             var next = 0;

   552             if (options.offset) {

   553                 next += (2*Math.PI)*(options.offset/360);

   554             }

   555             var circle = 2*Math.PI;

   556             for(var i=0; i<values.length; i++) {

   557                 var start = next;

   558                 var end = next;

   559                 if (total > 0) {  // avoid divide by zero

   560                     end = next + (circle*(values[i]/total));

   561                 }

   562                 target.drawPieSlice(radius, radius, radius, start, end, undefined, options.sliceColors[i % options.sliceColors.length]);

   563                 next = end;

   564             }

   565         }

   566     };

   567 

   568     function quartile(values, q) {

   569         if (q==2) {

   570             var vl2 = Math.floor(values.length/2);

   571             return values.length % 2 ? values[vl2] : (values[vl2]+values[vl2+1])/2;

   572         } else {

   573             var vl4 = Math.floor(values.length/4);

   574             return values.length % 2 ? (values[vl4*q]+values[vl4*q+1])/2 : values[vl4*q];

   575         }

   576     };

   577 

   578     $.fn.sparkline.box = function(values, options, width, height) {

   579         values = $.map(values, Number);

   580         var options = $.extend({

   581             raw: false,

   582             boxLineColor: 'black',

   583             boxFillColor: '#cdf',

   584             whiskerColor: 'black',

   585             outlierLineColor: '#333',

   586             outlierFillColor: 'white',

   587             medianColor: 'red',

   588             showOutliers: true,

   589             outlierIQR: 1.5,

   590             spotRadius: 1.5,

   591             target: undefined,

   592             targetColor: '#4a2',

   593             chartRangeMax: undefined,

   594             chartRangeMin: undefined

   595         }, options);

   596 

   597         width = options.width=='auto' ? '4.0em' : width;

   598 

   599         minvalue = options.chartRangeMin==undefined ? Math.min.apply(Math, values) : options.chartRangeMin;

   600         maxvalue = options.chartRangeMax==undefined ? Math.max.apply(Math, values) : options.chartRangeMax;

   601         var target = $(this).simpledraw(width, height);

   602         if (target && values.length>1) {

   603             var canvas_width = target.pixel_width;

   604             var canvas_height = target.pixel_height;

   605             if (options.raw) {

   606                 if (options.showOutliers && values.length>5) {

   607                     var loutlier=values[0], lwhisker=values[1], q1=values[2], q2=values[3], q3=values[4], rwhisker=values[5], routlier=values[6];

   608                 } else {

   609                     var lwhisker=values[0], q1=values[1], q2=values[2], q3=values[3], rwhisker=values[4];

   610                 }

   611             } else {

   612                 values.sort(function(a, b) { return a-b; });

   613                 var q1 = quartile(values, 1);

   614                 var q2 = quartile(values, 2);

   615                 var q3 = quartile(values, 3);

   616                 var iqr = q3-q1;

   617                 if (options.showOutliers) {

   618                     var lwhisker=undefined, rwhisker=undefined;

   619                     for(var i=0; i<values.length; i++) {

   620                         if (lwhisker==undefined && values[i] > q1-(iqr*options.outlierIQR))

   621                             lwhisker = values[i];

   622                         if (values[i] < q3+(iqr*options.outlierIQR))

   623                             rwhisker = values[i];

   624                     }

   625                     var loutlier = values[0];

   626                     var routlier = values[values.length-1];

   627                 } else {

   628                     var lwhisker = values[0];

   629                     var rwhisker = values[values.length-1];

   630                 }

   631             }

   632 

   633             var unitsize = canvas_width / (maxvalue-minvalue+1);

   634             var canvas_left = 0;

   635             if (options.showOutliers) {

   636                 canvas_left = Math.ceil(options.spotRadius);

   637                 canvas_width -= 2*Math.ceil(options.spotRadius);

   638                 var unitsize = canvas_width / (maxvalue-minvalue+1);

   639                 if (loutlier < lwhisker)

   640                     target.drawCircle((loutlier-minvalue)*unitsize+canvas_left, canvas_height/2, options.spotRadius, options.outlierLineColor, options.outlierFillColor);

   641                 if (routlier > rwhisker)

   642                     target.drawCircle((routlier-minvalue)*unitsize+canvas_left, canvas_height/2, options.spotRadius, options.outlierLineColor, options.outlierFillColor);

   643             }

   644 

   645             // box

   646             target.drawRect(

   647                 Math.round((q1-minvalue)*unitsize+canvas_left),

   648                 Math.round(canvas_height*0.1),

   649                 Math.round((q3-q1)*unitsize), 

   650                 Math.round(canvas_height*0.8), 

   651                 options.boxLineColor, 

   652                 options.boxFillColor);

   653             // left whisker

   654             target.drawLine(

   655                 Math.round((lwhisker-minvalue)*unitsize+canvas_left), 

   656                 Math.round(canvas_height/2), 

   657                 Math.round((q1-minvalue)*unitsize+canvas_left), 

   658                 Math.round(canvas_height/2), 

   659                 options.lineColor);

   660             target.drawLine(

   661                 Math.round((lwhisker-minvalue)*unitsize+canvas_left), 

   662                 Math.round(canvas_height/4), 

   663                 Math.round((lwhisker-minvalue)*unitsize+canvas_left), 

   664                 Math.round(canvas_height-canvas_height/4), 

   665                 options.whiskerColor);

   666             // right whisker

   667             target.drawLine(Math.round((rwhisker-minvalue)*unitsize+canvas_left), 

   668                 Math.round(canvas_height/2), 

   669                 Math.round((q3-minvalue)*unitsize+canvas_left), 

   670                 Math.round(canvas_height/2), 

   671                 options.lineColor);

   672             target.drawLine(

   673                 Math.round((rwhisker-minvalue)*unitsize+canvas_left), 

   674                 Math.round(canvas_height/4), 

   675                 Math.round((rwhisker-minvalue)*unitsize+canvas_left), 

   676                 Math.round(canvas_height-canvas_height/4), 

   677                 options.whiskerColor);

   678             // median line

   679             target.drawLine(

   680                 Math.round((q2-minvalue)*unitsize+canvas_left), 

   681                 Math.round(canvas_height*0.1),

   682                 Math.round((q2-minvalue)*unitsize+canvas_left), 

   683                 Math.round(canvas_height*0.9),

   684                 options.medianColor);

   685             if (options.target) {

   686                 var size = Math.ceil(options.spotRadius);

   687                 target.drawLine(

   688                     Math.round((options.target-minvalue)*unitsize+canvas_left), 

   689                     Math.round((canvas_height/2)-size), 

   690                     Math.round((options.target-minvalue)*unitsize+canvas_left), 

   691                     Math.round((canvas_height/2)+size), 

   692                     options.targetColor);

   693                 target.drawLine(

   694                     Math.round((options.target-minvalue)*unitsize+canvas_left-size), 

   695                     Math.round(canvas_height/2), 

   696                     Math.round((options.target-minvalue)*unitsize+canvas_left+size), 

   697                     Math.round(canvas_height/2), 

   698                     options.targetColor);

   699             }

   700         }  else {

   701             // Remove the tag contents if sparklines aren't supported

   702             this.innerHTML = '';

   703         }

   704     };

   705 

   706 

   707     // IE doesn't provide an indexOf method for arrays :-(

   708     if (!Array.prototype.indexOf) {

   709         Array.prototype.indexOf = function(entry) {

   710             for(var i=0; i<this.length; i++) {

   711                 if (this[i] == entry)

   712                     return i;

   713             }

   714             return -1;

   715         }

   716     }

   717 

   718     // Setup a very simple "virtual canvas" to make drawing the few shapes we need easier

   719     // This is accessible as $(foo).simpledraw()

   720 

   721     if ($.browser.msie && !document.namespaces['v']) {

   722         document.namespaces.add('v', 'urn:schemas-microsoft-com:vml', '#default#VML');

   723     }

   724 

   725     if ($.browser.hasCanvas == undefined) {

   726         var t = document.createElement('canvas');

   727         $.browser.hasCanvas = t.getContext!=undefined;

   728     }

   729 

   730     var vcanvas_base = function(width, height, target) {

   731     };

   732 

   733     vcanvas_base.prototype = {

   734         init : function(width, height, target) {

   735             this.width = width;

   736             this.height = height;

   737             this.target = target;

   738             if (target[0]) target=target[0];

   739             target.vcanvas = this;

   740         },

   741 

   742         drawShape : function(path, lineColor, fillColor) {

   743             alert('drawShape not implemented');

   744         },

   745 

   746         drawLine : function(x1, y1, x2, y2, lineColor) {

   747             return this.drawShape([ [x1,y1], [x2,y2] ], lineColor);

   748         },

   749 

   750         drawCircle : function(x, y, radius, lineColor, fillColor) {

   751             alert('drawCircle not implemented');

   752         },

   753 

   754         drawPieSlice : function(x, y, radius, startAngle, endAngle, lineColor, fillColor) {

   755             alert('drawPieSlice not implemented');

   756         },

   757 

   758         drawRect : function(x, y, width, height, lineColor, fillColor) {

   759             alert('drawRect not implemented');

   760         },

   761 

   762         getElement : function() {

   763             return this.canvas;

   764         },

   765 

   766         _insert : function(el, target) {

   767             $(target).html(el);

   768         }

   769     };

   770 

   771     var vcanvas_canvas = function(width, height, target) {

   772         return this.init(width, height, target);

   773     };

   774 

   775     vcanvas_canvas.prototype = $.extend(new vcanvas_base, {

   776         _super : vcanvas_base.prototype,

   777 

   778         init : function(width, height, target) {

   779             this._super.init(width, height, target);

   780             this.canvas = document.createElement('canvas');

   781             if (target[0]) target=target[0];

   782             target.vcanvas = this;

   783             $(this.canvas).css({ display:'inline-block', width:width, height:height, verticalAlign:'top' });

   784             this._insert(this.canvas, target);

   785             this.pixel_height = $(this.canvas).height();

   786             this.pixel_width = $(this.canvas).width();

   787             this.canvas.width = this.pixel_width;

   788             this.canvas.height = this.pixel_height;

   789             $(this.canvas).css({width: this.pixel_width, height: this.pixel_height});

   790         },

   791 

   792         _getContext : function(lineColor, fillColor) {

   793             var context = this.canvas.getContext('2d');

   794             if (lineColor != undefined)

   795                 context.strokeStyle = lineColor;

   796             context.lineWidth = 1;

   797             if (fillColor != undefined)

   798                 context.fillStyle = fillColor;

   799             return context;

   800         },

   801 

   802         drawShape : function(path, lineColor, fillColor) {

   803             var context = this._getContext(lineColor, fillColor);

   804             context.beginPath();

   805             context.moveTo(path[0][0]+0.5, path[0][1]+0.5);

   806             for(var i=1; i<path.length; i++) {

   807                 context.lineTo(path[i][0]+0.5, path[i][1]+0.5); // the 0.5 offset gives us crisp pixel-width lines

   808             }

   809             if (lineColor != undefined) {

   810                 context.stroke();

   811             }

   812             if (fillColor != undefined) {

   813                 context.fill();

   814             }

   815         },

   816 

   817         drawCircle : function(x, y, radius, lineColor, fillColor) {

   818             var context = this._getContext(lineColor, fillColor);

   819             context.beginPath();

   820             context.arc(x, y, radius, 0, 2*Math.PI, false);

   821             if (lineColor != undefined) {

   822                 context.stroke();

   823             }

   824             if (fillColor != undefined) {

   825                 context.fill();

   826             }

   827         }, 

   828 

   829         drawPieSlice : function(x, y, radius, startAngle, endAngle, lineColor, fillColor) {

   830             var context = this._getContext(lineColor, fillColor);

   831             context.beginPath();

   832             context.moveTo(x, y);

   833             context.arc(x, y, radius, startAngle, endAngle, false);

   834             context.lineTo(x, y);

   835             context.closePath();

   836             if (lineColor != undefined) {

   837                 context.stroke();

   838             }

   839             if (fillColor) {

   840                 context.fill();

   841             }

   842         },

   843 

   844         drawRect : function(x, y, width, height, lineColor, fillColor) {

   845             return this.drawShape([ [x,y], [x+width, y], [x+width, y+height], [x, y+height], [x, y] ], lineColor, fillColor);

   846         }

   847         

   848     });

   849 

   850     var vcanvas_vml = function(width, height, target) {

   851         return this.init(width, height, target);

   852     };

   853 

   854     vcanvas_vml.prototype = $.extend(new vcanvas_base, {

   855         _super : vcanvas_base.prototype,

   856 

   857         init : function(width, height, target) {

   858             this._super.init(width, height, target);

   859             if (target[0]) target=target[0];

   860             target.vcanvas = this;

   861             this.canvas = document.createElement('span');

   862             $(this.canvas).css({ display:'inline-block', position: 'relative', overflow:'hidden', width:width, height:height, margin:'0px', padding:'0px', verticalAlign: 'top'});

   863             this._insert(this.canvas, target);

   864             this.pixel_height = $(this.canvas).height();

   865             this.pixel_width = $(this.canvas).width();

   866             this.canvas.width = this.pixel_width;

   867             this.canvas.height = this.pixel_height;;

   868             var groupel = '<v:group coordorigin="0 0" coordsize="'+this.pixel_width+' '+this.pixel_height+'"'

   869                     +' style="position:absolute;top:0;left:0;width:'+this.pixel_width+'px;height='+this.pixel_height+'px;"></v:group>';

   870             this.canvas.insertAdjacentHTML('beforeEnd', groupel);

   871             this.group = $(this.canvas).children()[0];

   872         },

   873 

   874         drawShape : function(path, lineColor, fillColor) {

   875             var vpath = [];

   876             for(var i=0; i<path.length; i++) {

   877                 vpath[i] = ''+(path[i][0])+','+(path[i][1]);

   878             }

   879             var initial = vpath.splice(0,1);

   880             var stroke = lineColor == undefined ? ' stroked="false" ' : ' strokeWeight="1" strokeColor="'+lineColor+'" ';

   881             var fill = fillColor == undefined ? ' filled="false"' : ' fillColor="'+fillColor+'" filled="true" ';

   882             var closed = vpath[0] == vpath[vpath.length-1] ? 'x ' : '';

   883             var vel = '<v:shape coordorigin="0 0" coordsize="'+this.pixel_width+' '+this.pixel_height+'" '

   884                 + stroke

   885                 + fill

   886                 +' style="position:absolute;left:0px;top:0px;height:'+this.pixel_height+'px;width:'+this.pixel_width+'px;padding:0px;margin:0px;" '

   887                 +' path="m '+initial+' l '+vpath.join(', ')+' '+closed+'e">'

   888                 +' </v:shape>';

   889              this.group.insertAdjacentHTML('beforeEnd', vel);

   890         },

   891 

   892         drawCircle : function(x, y, radius, lineColor, fillColor) {

   893             x -= radius+1;

   894             y -= radius+1;

   895             var stroke = lineColor == undefined ? ' stroked="false" ' : ' strokeWeight="1" strokeColor="'+lineColor+'" ';

   896             var fill = fillColor == undefined ? ' filled="false"' : ' fillColor="'+fillColor+'" filled="true" ';

   897             var vel = '<v:oval '

   898                 + stroke

   899                 + fill

   900                 +' style="position:absolute;top:'+y+'px; left:'+x+'px; width:'+(radius*2)+'px; height:'+(radius*2)+'px"></v:oval>';

   901             this.group.insertAdjacentHTML('beforeEnd', vel);

   902             

   903         },

   904         

   905         drawPieSlice : function(x, y, radius, startAngle, endAngle, lineColor, fillColor) {

   906             if (startAngle == endAngle) {

   907                 return;  // VML seems to have problem when start angle equals end angle.

   908             }

   909             if ((endAngle - startAngle) == (2*Math.PI)) {

   910                 startAngle = 0.0;  // VML seems to have a problem when drawing a full circle that doesn't start 0

   911                 endAngle = (2*Math.PI);

   912             }

   913 

   914             var startx = x + Math.round(Math.cos(startAngle) * radius);

   915             var starty = y + Math.round(Math.sin(startAngle) * radius);

   916             var endx = x + Math.round(Math.cos(endAngle) * radius);

   917             var endy = y + Math.round(Math.sin(endAngle) * radius);

   918 

   919             var vpath = [  x-radius, y-radius, x+radius, y+radius, startx, starty, endx, endy ]; 

   920             var stroke = lineColor == undefined ? ' stroked="false" ' : ' strokeWeight="1" strokeColor="'+lineColor+'" ';

   921             var fill = fillColor == undefined ? ' filled="false"' : ' fillColor="'+fillColor+'" filled="true" ';

   922             var vel = '<v:shape coordorigin="0 0" coordsize="'+this.pixel_width+' '+this.pixel_height+'" '

   923                 + stroke

   924                 + fill

   925                 +' style="position:absolute;left:0px;top:0px;height:'+this.pixel_height+'px;width:'+this.pixel_width+'px;padding:0px;margin:0px;" '

   926                 +' path="m '+x+','+y+' wa '+vpath.join(', ')+' x e">'

   927                 +' </v:shape>';

   928              this.group.insertAdjacentHTML('beforeEnd', vel);

   929         },

   930 

   931         drawRect : function(x, y, width, height, lineColor, fillColor) {

   932             return this.drawShape( [ [x, y], [x, y+height], [x+width, y+height], [x+width, y], [x, y] ], lineColor, fillColor);

   933         }

   934     });

   935 

   936 })(jQuery);