|
0
|
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); |