jquery_visualize 0.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml ADDED
@@ -0,0 +1,7 @@
1
+ ---
2
+ SHA1:
3
+ metadata.gz: 794e343f90b91b632c064c785851105efb088928
4
+ data.tar.gz: 17672638a7816946dd5c62ac7a10f2be401760bf
5
+ SHA512:
6
+ metadata.gz: e86727a603e9129545c9599d52ae003eba04ff3711e4fb82d29ff9178f0e4a1dfcb8f827ac9f488de6b489af654daf12ab9ad03c56588ed2d0f25b016cbfa236
7
+ data.tar.gz: d7ece996f3619d242b2c122162bb651d8d22ac6cb82b67c1370b4aee69c981d91239c5d00782e7c8e92f0df29af99b1f58366be8fe9e0b8269cb81ea8e9905e2
data/.gitignore ADDED
@@ -0,0 +1,18 @@
1
+ *.gem
2
+ *.rbc
3
+ .bundle
4
+ .config
5
+ .yardoc
6
+ Gemfile.lock
7
+ InstalledFiles
8
+ _yardoc
9
+ coverage
10
+ doc/
11
+ lib/bundler/man
12
+ pkg
13
+ rdoc
14
+ spec/reports
15
+ test/tmp
16
+ test/version_tmp
17
+ tmp
18
+ .DS_Store
data/Gemfile ADDED
@@ -0,0 +1,4 @@
1
+ source 'https://rubygems.org'
2
+
3
+ # Specify your gem's dependencies in jquery_visualize.gemspec
4
+ gemspec
data/LICENSE.txt ADDED
@@ -0,0 +1,22 @@
1
+ Copyright (c) 2013 Sergey Chernyakov
2
+
3
+ MIT License
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining
6
+ a copy of this software and associated documentation files (the
7
+ "Software"), to deal in the Software without restriction, including
8
+ without limitation the rights to use, copy, modify, merge, publish,
9
+ distribute, sublicense, and/or sell copies of the Software, and to
10
+ permit persons to whom the Software is furnished to do so, subject to
11
+ the following conditions:
12
+
13
+ The above copyright notice and this permission notice shall be
14
+ included in all copies or substantial portions of the Software.
15
+
16
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
17
+ EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
18
+ MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
19
+ NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
20
+ LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
21
+ OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
22
+ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
data/README.md ADDED
@@ -0,0 +1,79 @@
1
+ # JqueryVisualize
2
+
3
+ This is gem for jQuery-Visualize plugin.
4
+ https://github.com/filamentgroup/jQuery-Visualize
5
+
6
+ ## Installation
7
+
8
+ Add this line to your application's Gemfile:
9
+
10
+ gem 'jquery_visualize'
11
+
12
+ And then execute:
13
+
14
+ $ bundle
15
+
16
+ Or install it yourself as:
17
+
18
+ $ gem install jquery_visualize
19
+
20
+ ## Usage
21
+
22
+ How to use Visualize
23
+
24
+ First, you'll need to create the table markup:
25
+
26
+ <table>
27
+ <caption>2009 Employee Sales by Department</caption>
28
+ <thead>
29
+ <tr>
30
+ <td></td>
31
+ <th scope="col">food</th>
32
+ <th scope="col">auto</th>
33
+ <th scope="col">household</th>
34
+ <th scope="col">furniture</th>
35
+ <th scope="col">kitchen</th>
36
+ <th scope="col">bath</th>
37
+ </tr>
38
+ </thead>
39
+ <tbody>
40
+ <tr>
41
+ <th scope="row">Mary</th>
42
+ <td>190</td>
43
+ <td>160</td>
44
+ <td>40</td>
45
+ <td>120</td>
46
+ <td>30</td>
47
+ <td>70</td>
48
+ </tr>
49
+ <tr>
50
+ <th scope="row">Tom</th>
51
+ <td>3</td>
52
+ <td>40</td>
53
+ <td>30</td>
54
+ <td>45</td>
55
+ <td>35</td>
56
+ <td>49</td>
57
+ </tr>
58
+ ...repetitive rows removed for brevity.
59
+ </tbody>
60
+ </table>
61
+
62
+ Note that we've used a caption element to summarize the table data. This will be used by the Visualize plugin to create a title on your graph. We've also defined our table headings using th elements, letting the script know which cells it should use as the titles for a data set.
63
+
64
+ Now that we have our HTML table, we can generate a chart. Just attach jQuery and our Visualize plugin's JavaScript and CSS files to your page, and call the visualize() method on the table, like this:
65
+
66
+ $('table').visualize();
67
+
68
+ That's it! By default, the Visualize plugin will generate the first bar chart shown above and append it to your page directly after the table.
69
+
70
+ Documentation:
71
+ http://www.filamentgroup.com/lab/update_to_jquery_visualize_accessible_charts_with_html5_from_designing_with/
72
+
73
+ ## Contributing
74
+
75
+ 1. Fork it
76
+ 2. Create your feature branch (`git checkout -b my-new-feature`)
77
+ 3. Commit your changes (`git commit -am 'Add some feature'`)
78
+ 4. Push to the branch (`git push origin my-new-feature`)
79
+ 5. Create new Pull Request
data/Rakefile ADDED
@@ -0,0 +1 @@
1
+ require "bundler/gem_tasks"
@@ -0,0 +1,463 @@
1
+ /*
2
+ * --------------------------------------------------------------------
3
+ * jQuery inputToButton plugin
4
+ * Author: Scott Jehl, scott@filamentgroup.com
5
+ * Copyright (c) 2009 Filament Group
6
+ * licensed under MIT (filamentgroup.com/examples/mit-license.txt)
7
+ * --------------------------------------------------------------------
8
+ */
9
+ (function($) {
10
+ $.fn.visualize = function(options, container){
11
+ return $(this).each(function(){
12
+ //configuration
13
+ var o = $.extend({
14
+ type: 'bar', //also available: area, pie, line
15
+ width: $(this).width(), //height of canvas - defaults to table height
16
+ height: $(this).height(), //height of canvas - defaults to table height
17
+ appendTitle: true, //table caption text is added to chart
18
+ title: null, //grabs from table caption if null
19
+ appendKey: true, //color key is added to chart
20
+ rowFilter: '*',
21
+ colFilter: '*',
22
+ colors: ['#be1e2d','#666699','#92d5ea','#ee8310','#8d10ee','#5a3b16','#26a4ed','#f45a90','#e9e744'],
23
+ textColors: [], //corresponds with colors array. null/undefined items will fall back to CSS
24
+ parseDirection: 'x', //which direction to parse the table data
25
+ pieMargin: 20, //pie charts only - spacing around pie
26
+ pieLabelsAsPercent: true,
27
+ pieLabelPos: 'inside',
28
+ lineWeight: 4, //for line and area - stroke weight
29
+ barGroupMargin: 10,
30
+ barMargin: 1, //space around bars in bar chart (added to both sides of bar)
31
+ yLabelInterval: 30 //distance between y labels
32
+ },options);
33
+
34
+ //reset width, height to numbers
35
+ o.width = parseFloat(o.width);
36
+ o.height = parseFloat(o.height);
37
+
38
+
39
+ var self = $(this);
40
+
41
+ //function to scrape data from html table
42
+ function scrapeTable(){
43
+ var colors = o.colors;
44
+ var textColors = o.textColors;
45
+ var tableData = {
46
+ dataGroups: function(){
47
+ var dataGroups = [];
48
+ if(o.parseDirection == 'x'){
49
+ self.find('tr:gt(0)').filter(o.rowFilter).each(function(i){
50
+ dataGroups[i] = {};
51
+ dataGroups[i].points = [];
52
+ dataGroups[i].color = colors[i];
53
+ if(textColors[i]){ dataGroups[i].textColor = textColors[i]; }
54
+ $(this).find('td').filter(o.colFilter).each(function(){
55
+ dataGroups[i].points.push( parseFloat($(this).text()) );
56
+ });
57
+ });
58
+ }
59
+ else {
60
+ var cols = self.find('tr:eq(1) td').filter(o.colFilter).size();
61
+ for(var i=0; i<cols; i++){
62
+ dataGroups[i] = {};
63
+ dataGroups[i].points = [];
64
+ dataGroups[i].color = colors[i];
65
+ if(textColors[i]){ dataGroups[i].textColor = textColors[i]; }
66
+ self.find('tr:gt(0)').filter(o.rowFilter).each(function(){
67
+ dataGroups[i].points.push( $(this).find('td').filter(o.colFilter).eq(i).text()*1 );
68
+ });
69
+ };
70
+ }
71
+ return dataGroups;
72
+ },
73
+ allData: function(){
74
+ var allData = [];
75
+ $(this.dataGroups()).each(function(){
76
+ allData.push(this.points);
77
+ });
78
+ return allData;
79
+ },
80
+ dataSum: function(){
81
+ var dataSum = 0;
82
+ var allData = this.allData().join(',').split(',');
83
+ $(allData).each(function(){
84
+ dataSum += parseFloat(this);
85
+ });
86
+ return dataSum
87
+ },
88
+ topValue: function(){
89
+ var topValue = 0;
90
+ var allData = this.allData().join(',').split(',');
91
+ $(allData).each(function(){
92
+ if(parseFloat(this,10)>topValue) topValue = parseFloat(this);
93
+ });
94
+ return topValue;
95
+ },
96
+ bottomValue: function(){
97
+ var bottomValue = 0;
98
+ var allData = this.allData().join(',').split(',');
99
+ $(allData).each(function(){
100
+ if(this<bottomValue) bottomValue = parseFloat(this);
101
+ });
102
+ return bottomValue;
103
+ },
104
+ memberTotals: function(){
105
+ var memberTotals = [];
106
+ var dataGroups = this.dataGroups();
107
+ $(dataGroups).each(function(l){
108
+ var count = 0;
109
+ $(dataGroups[l].points).each(function(m){
110
+ count +=dataGroups[l].points[m];
111
+ });
112
+ memberTotals.push(count);
113
+ });
114
+ return memberTotals;
115
+ },
116
+ yTotals: function(){
117
+ var yTotals = [];
118
+ var dataGroups = this.dataGroups();
119
+ var loopLength = this.xLabels().length;
120
+ for(var i = 0; i<loopLength; i++){
121
+ yTotals[i] =[];
122
+ var thisTotal = 0;
123
+ $(dataGroups).each(function(l){
124
+ yTotals[i].push(this.points[i]);
125
+ });
126
+ yTotals[i].join(',').split(',');
127
+ $(yTotals[i]).each(function(){
128
+ thisTotal += parseFloat(this);
129
+ });
130
+ yTotals[i] = thisTotal;
131
+
132
+ }
133
+ return yTotals;
134
+ },
135
+ topYtotal: function(){
136
+ var topYtotal = 0;
137
+ var yTotals = this.yTotals().join(',').split(',');
138
+ $(yTotals).each(function(){
139
+ if(parseFloat(this,10)>topYtotal) topYtotal = parseFloat(this);
140
+ });
141
+ return topYtotal;
142
+ },
143
+ totalYRange: function(){
144
+ return this.topValue() - this.bottomValue();
145
+ },
146
+ xLabels: function(){
147
+ var xLabels = [];
148
+ if(o.parseDirection == 'x'){
149
+ self.find('tr:eq(0) th').filter(o.colFilter).each(function(){
150
+ xLabels.push($(this).html());
151
+ });
152
+ }
153
+ else {
154
+ self.find('tr:gt(0) th').filter(o.rowFilter).each(function(){
155
+ xLabels.push($(this).html());
156
+ });
157
+ }
158
+ return xLabels;
159
+ },
160
+ yLabels: function(){
161
+ var yLabels = [];
162
+ yLabels.push(bottomValue);
163
+ var numLabels = Math.round(o.height / o.yLabelInterval);
164
+ var loopInterval = Math.ceil(totalYRange / numLabels) || 1;
165
+ while( yLabels[yLabels.length-1] < topValue - loopInterval){
166
+ yLabels.push(yLabels[yLabels.length-1] + loopInterval);
167
+ }
168
+ yLabels.push(topValue);
169
+ return yLabels;
170
+ }
171
+ };
172
+
173
+ return tableData;
174
+ };
175
+
176
+
177
+ //function to create a chart
178
+ var createChart = {
179
+ pie: function(){
180
+
181
+ canvasContain.addClass('visualize-pie');
182
+
183
+ if(o.pieLabelPos == 'outside'){ canvasContain.addClass('visualize-pie-outside'); }
184
+
185
+ var centerx = Math.round(canvas.width()/2);
186
+ var centery = Math.round(canvas.height()/2);
187
+ var radius = centery - o.pieMargin;
188
+ var counter = 0.0;
189
+ var toRad = function(integer){ return (Math.PI/180)*integer; };
190
+ var labels = $('<ul class="visualize-labels"></ul>')
191
+ .insertAfter(canvas);
192
+
193
+ //draw the pie pieces
194
+ $.each(memberTotals, function(i){
195
+ var fraction = (this <= 0 || isNaN(this))? 0 : this / dataSum;
196
+ ctx.beginPath();
197
+ ctx.moveTo(centerx, centery);
198
+ ctx.arc(centerx, centery, radius,
199
+ counter * Math.PI * 2 - Math.PI * 0.5,
200
+ (counter + fraction) * Math.PI * 2 - Math.PI * 0.5,
201
+ false);
202
+ ctx.lineTo(centerx, centery);
203
+ ctx.closePath();
204
+ ctx.fillStyle = dataGroups[i].color;
205
+ ctx.fill();
206
+ // draw labels
207
+ var sliceMiddle = (counter + fraction/2);
208
+ var distance = o.pieLabelPos == 'inside' ? radius/1.5 : radius + radius / 5;
209
+ var labelx = Math.round(centerx + Math.sin(sliceMiddle * Math.PI * 2) * (distance));
210
+ var labely = Math.round(centery - Math.cos(sliceMiddle * Math.PI * 2) * (distance));
211
+ var leftRight = (labelx > centerx) ? 'right' : 'left';
212
+ var topBottom = (labely > centery) ? 'bottom' : 'top';
213
+ var percentage = parseFloat((fraction*100).toFixed(2));
214
+
215
+ if(percentage){
216
+ var labelval = (o.pieLabelsAsPercent) ? percentage + '%' : this;
217
+ var labeltext = $('<span class="visualize-label">' + labelval +'</span>')
218
+ .css(leftRight, 0)
219
+ .css(topBottom, 0);
220
+ if(labeltext)
221
+ var label = $('<li class="visualize-label-pos"></li>')
222
+ .appendTo(labels)
223
+ .css({left: labelx, top: labely})
224
+ .append(labeltext);
225
+ labeltext
226
+ .css('font-size', radius / 8)
227
+ .css('margin-'+leftRight, -labeltext.width()/2)
228
+ .css('margin-'+topBottom, -labeltext.outerHeight()/2);
229
+
230
+ if(dataGroups[i].textColor){ labeltext.css('color', dataGroups[i].textColor); }
231
+ }
232
+ counter+=fraction;
233
+ });
234
+ },
235
+
236
+ line: function(area){
237
+
238
+ if(area){ canvasContain.addClass('visualize-area'); }
239
+ else{ canvasContain.addClass('visualize-line'); }
240
+
241
+ //write X labels
242
+ var xInterval = canvas.width() / (xLabels.length -1);
243
+ var xlabelsUL = $('<ul class="visualize-labels-x"></ul>')
244
+ .width(canvas.width())
245
+ .height(canvas.height())
246
+ .insertBefore(canvas);
247
+ $.each(xLabels, function(i){
248
+ var thisLi = $('<li><span>'+this+'</span></li>')
249
+ .prepend('<span class="line" />')
250
+ .css('left', xInterval * i)
251
+ .appendTo(xlabelsUL);
252
+ var label = thisLi.find('span:not(.line)');
253
+ var leftOffset = label.width()/-2;
254
+ if(i == 0){ leftOffset = 0; }
255
+ else if(i== xLabels.length-1){ leftOffset = -label.width(); }
256
+ label
257
+ .css('margin-left', leftOffset)
258
+ .addClass('label');
259
+ });
260
+
261
+ //write Y labels
262
+ var yScale = canvas.height() / totalYRange;
263
+ var liBottom = canvas.height() / (yLabels.length-1);
264
+ var ylabelsUL = $('<ul class="visualize-labels-y"></ul>')
265
+ .width(canvas.width())
266
+ .height(canvas.height())
267
+ .insertBefore(canvas);
268
+
269
+ $.each(yLabels, function(i){
270
+ var thisLi = $('<li><span>'+this+'</span></li>')
271
+ .prepend('<span class="line" />')
272
+ .css('bottom',liBottom*i)
273
+ .prependTo(ylabelsUL);
274
+ var label = thisLi.find('span:not(.line)');
275
+ var topOffset = label.height()/-2;
276
+ if(i == 0){ topOffset = -label.height(); }
277
+ else if(i== yLabels.length-1){ topOffset = 0; }
278
+ label
279
+ .css('margin-top', topOffset)
280
+ .addClass('label');
281
+ });
282
+
283
+ //start from the bottom left
284
+ ctx.translate(0,zeroLoc);
285
+ //iterate and draw
286
+ $.each(dataGroups,function(h){
287
+ ctx.beginPath();
288
+ ctx.lineWidth = o.lineWeight;
289
+ ctx.lineJoin = 'round';
290
+ var points = this.points;
291
+ var integer = 0;
292
+ ctx.moveTo(0,-(points[0]*yScale));
293
+ $.each(points, function(){
294
+ ctx.lineTo(integer,-(this*yScale));
295
+ integer+=xInterval;
296
+ });
297
+ ctx.strokeStyle = this.color;
298
+ ctx.stroke();
299
+ if(area){
300
+ ctx.lineTo(integer,0);
301
+ ctx.lineTo(0,0);
302
+ ctx.closePath();
303
+ ctx.fillStyle = this.color;
304
+ ctx.globalAlpha = .3;
305
+ ctx.fill();
306
+ ctx.globalAlpha = 1.0;
307
+ }
308
+ else {ctx.closePath();}
309
+ });
310
+ },
311
+
312
+ area: function(){
313
+ createChart.line(true);
314
+ },
315
+
316
+ bar: function(){
317
+
318
+ canvasContain.addClass('visualize-bar');
319
+
320
+ //write X labels
321
+ var xInterval = canvas.width() / (xLabels.length);
322
+ var xlabelsUL = $('<ul class="visualize-labels-x"></ul>')
323
+ .width(canvas.width())
324
+ .height(canvas.height())
325
+ .insertBefore(canvas);
326
+ $.each(xLabels, function(i){
327
+ var thisLi = $('<li><span class="label">'+this+'</span></li>')
328
+ .prepend('<span class="line" />')
329
+ .css('left', xInterval * i)
330
+ .width(xInterval)
331
+ .appendTo(xlabelsUL);
332
+ var label = thisLi.find('span.label');
333
+ label.addClass('label');
334
+ });
335
+
336
+ //write Y labels
337
+ var yScale = canvas.height() / totalYRange;
338
+ var liBottom = canvas.height() / (yLabels.length-1);
339
+ var ylabelsUL = $('<ul class="visualize-labels-y"></ul>')
340
+ .width(canvas.width())
341
+ .height(canvas.height())
342
+ .insertBefore(canvas);
343
+ $.each(yLabels, function(i){
344
+ var thisLi = $('<li><span>'+this+'</span></li>')
345
+ .prepend('<span class="line" />')
346
+ .css('bottom',liBottom*i)
347
+ .prependTo(ylabelsUL);
348
+ var label = thisLi.find('span:not(.line)');
349
+ var topOffset = label.height()/-2;
350
+ if(i == 0){ topOffset = -label.height(); }
351
+ else if(i== yLabels.length-1){ topOffset = 0; }
352
+ label
353
+ .css('margin-top', topOffset)
354
+ .addClass('label');
355
+ });
356
+
357
+ //start from the bottom left
358
+ ctx.translate(0,zeroLoc);
359
+ //iterate and draw
360
+ for(var h=0; h<dataGroups.length; h++){
361
+ ctx.beginPath();
362
+ var linewidth = (xInterval-o.barGroupMargin*2) / dataGroups.length; //removed +1
363
+ var strokeWidth = linewidth - (o.barMargin*2);
364
+ ctx.lineWidth = strokeWidth;
365
+ var points = dataGroups[h].points;
366
+ var integer = 0;
367
+ for(var i=0; i<points.length; i++){
368
+ var xVal = (integer-o.barGroupMargin)+(h*linewidth)+linewidth/2;
369
+ xVal += o.barGroupMargin*2;
370
+
371
+ ctx.moveTo(xVal, 0);
372
+ ctx.lineTo(xVal, Math.round(-points[i]*yScale));
373
+ integer+=xInterval;
374
+ }
375
+ ctx.strokeStyle = dataGroups[h].color;
376
+ ctx.stroke();
377
+ ctx.closePath();
378
+ }
379
+ }
380
+ };
381
+
382
+ //create new canvas, set w&h attrs (not inline styles)
383
+ var canvasNode = document.createElement("canvas");
384
+ canvasNode.setAttribute('height',o.height);
385
+ canvasNode.setAttribute('width',o.width);
386
+ var canvas = $(canvasNode);
387
+
388
+ //get title for chart
389
+ var title = o.title || self.find('caption').text();
390
+
391
+ //create canvas wrapper div, set inline w&h, append
392
+ var canvasContain = (container || $('<div class="visualize" role="img" aria-label="Chart representing data from the table: '+ title +'" />'))
393
+ .height(o.height)
394
+ .width(o.width)
395
+ .append(canvas);
396
+
397
+ //scrape table (this should be cleaned up into an obj)
398
+ var tableData = scrapeTable();
399
+ var dataGroups = tableData.dataGroups();
400
+ var allData = tableData.allData();
401
+ var dataSum = tableData.dataSum();
402
+ var topValue = tableData.topValue();
403
+ var bottomValue = tableData.bottomValue();
404
+ var memberTotals = tableData.memberTotals();
405
+ var totalYRange = tableData.totalYRange();
406
+ var zeroLoc = o.height * (topValue/totalYRange);
407
+ var xLabels = tableData.xLabels();
408
+ var yLabels = tableData.yLabels();
409
+
410
+ //title/key container
411
+ if(o.appendTitle || o.appendKey){
412
+ var infoContain = $('<div class="visualize-info"></div>')
413
+ .appendTo(canvasContain);
414
+ }
415
+
416
+ //append title
417
+ if(o.appendTitle){
418
+ $('<div class="visualize-title">'+ title +'</div>').appendTo(infoContain);
419
+ }
420
+
421
+
422
+ //append key
423
+ if(o.appendKey){
424
+ var newKey = $('<ul class="visualize-key"></ul>');
425
+ var selector;
426
+ if(o.parseDirection == 'x'){
427
+ selector = self.find('tr:gt(0) th').filter(o.rowFilter);
428
+ }
429
+ else{
430
+ selector = self.find('tr:eq(0) th').filter(o.colFilter);
431
+ }
432
+
433
+ selector.each(function(i){
434
+ $('<li><span class="visualize-key-color" style="background: '+dataGroups[i].color+'"></span><span class="visualize-key-label">'+ $(this).text() +'</span></li>')
435
+ .appendTo(newKey);
436
+ });
437
+ newKey.appendTo(infoContain);
438
+ };
439
+
440
+ //append new canvas to page
441
+
442
+ if(!container){canvasContain.insertAfter(this); }
443
+ if( typeof(G_vmlCanvasManager) != 'undefined' ){ G_vmlCanvasManager.init(); G_vmlCanvasManager.initElement(canvas[0]); }
444
+
445
+ //set up the drawing board
446
+ var ctx = canvas[0].getContext('2d');
447
+
448
+ //create chart
449
+ createChart[o.type]();
450
+
451
+ //clean up some doubled lines that sit on top of canvas borders (done via JS due to IE)
452
+ $('.visualize-line li:first-child span.line, .visualize-line li:last-child span.line, .visualize-area li:first-child span.line, .visualize-area li:last-child span.line, .visualize-bar li:first-child span.line,.visualize-bar .visualize-labels-y li:last-child span.line').css('border','none');
453
+ if(!container){
454
+ //add event for updating
455
+ canvasContain.bind('visualizeRefresh', function(){
456
+ self.visualize(o, $(this).empty());
457
+ });
458
+ }
459
+ }).next(); //returns canvas(es)
460
+ };
461
+ })(jQuery);
462
+
463
+
@@ -0,0 +1,32 @@
1
+ /*plugin styles*/
2
+ .visualize { border: 1px solid #888; position: relative; background: #fafafa; }
3
+ .visualize canvas { position: absolute; }
4
+ .visualize ul,.visualize li { margin: 0; padding: 0;}
5
+
6
+ /*table title, key elements*/
7
+ .visualize .visualize-info { padding: 3px 5px; background: #fafafa; border: 1px solid #888; position: absolute; top: -20px; right: 10px; opacity: .8; }
8
+ .visualize .visualize-title { display: block; color: #333; margin-bottom: 3px; font-size: 1.1em; }
9
+ .visualize ul.visualize-key { list-style: none; }
10
+ .visualize ul.visualize-key li { list-style: none; float: left; margin-right: 10px; padding-left: 10px; position: relative;}
11
+ .visualize ul.visualize-key .visualize-key-color { width: 6px; height: 6px; left: 0; position: absolute; top: 50%; margin-top: -3px; }
12
+ .visualize ul.visualize-key .visualize-key-label { color: #000; }
13
+
14
+ /*pie labels*/
15
+ .visualize-pie .visualize-labels { list-style: none; }
16
+ .visualize-pie .visualize-label-pos, .visualize-pie .visualize-label { position: absolute; margin: 0; padding:0; }
17
+ .visualize-pie .visualize-label { display: block; color: #fff; font-weight: bold; font-size: 1em; }
18
+ .visualize-pie-outside .visualize-label { color: #000; font-weight: normal; }
19
+
20
+ /*line,bar, area labels*/
21
+ .visualize-labels-x,.visualize-labels-y { position: absolute; left: 0; top: 0; list-style: none; }
22
+ .visualize-labels-x li, .visualize-labels-y li { position: absolute; bottom: 0; }
23
+ .visualize-labels-x li span.label, .visualize-labels-y li span.label { position: absolute; color: #555; }
24
+ .visualize-labels-x li span.line, .visualize-labels-y li span.line { position: absolute; border: 0 solid #ccc; }
25
+ .visualize-labels-x li { height: 100%; }
26
+ .visualize-labels-x li span.label { top: 100%; margin-top: 5px; }
27
+ .visualize-labels-x li span.line { border-left-width: 1px; height: 100%; display: block; }
28
+ .visualize-labels-x li span.line { border: 0;} /*hide vertical lines on area, line, bar*/
29
+ .visualize-labels-y li { width: 100%; }
30
+ .visualize-labels-y li span.label { right: 100%; margin-right: 5px; display: block; width: 100px; text-align: right; }
31
+ .visualize-labels-y li span.line { border-top-width: 1px; width: 100%; }
32
+ .visualize-bar .visualize-labels-x li span.label { width: 100%; text-align: center; }
@@ -0,0 +1,23 @@
1
+ # coding: utf-8
2
+ lib = File.expand_path('../lib', __FILE__)
3
+ $LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
4
+ require 'jquery_visualize/version'
5
+
6
+ Gem::Specification.new do |spec|
7
+ spec.name = "jquery_visualize"
8
+ spec.version = JqueryVisualize::VERSION
9
+ spec.authors = ["Sergey Chernyakov"]
10
+ spec.email = ["chernyakov.sergey@gmail.com"]
11
+ spec.description = %q{This is gem for jQuery-Visualize plugin.}
12
+ spec.summary = %q{https://github.com/filamentgroup/jQuery-Visualize}
13
+ spec.homepage = ""
14
+ spec.license = "MIT"
15
+
16
+ spec.files = `git ls-files`.split($/)
17
+ spec.executables = spec.files.grep(%r{^bin/}) { |f| File.basename(f) }
18
+ spec.test_files = spec.files.grep(%r{^(test|spec|features)/})
19
+ spec.require_paths = ["lib"]
20
+
21
+ spec.add_development_dependency "bundler", "~> 1.3"
22
+ spec.add_development_dependency "rake"
23
+ end
@@ -0,0 +1,6 @@
1
+ require "jquery_visualize/version"
2
+
3
+ module JqueryVisualize
4
+ class Engine < Rails::Engine
5
+ end
6
+ end
@@ -0,0 +1,3 @@
1
+ module JqueryVisualize
2
+ VERSION = "0.0.2"
3
+ end
metadata ADDED
@@ -0,0 +1,84 @@
1
+ --- !ruby/object:Gem::Specification
2
+ name: jquery_visualize
3
+ version: !ruby/object:Gem::Version
4
+ version: 0.0.2
5
+ platform: ruby
6
+ authors:
7
+ - Sergey Chernyakov
8
+ autorequire:
9
+ bindir: bin
10
+ cert_chain: []
11
+ date: 2013-06-24 00:00:00.000000000 Z
12
+ dependencies:
13
+ - !ruby/object:Gem::Dependency
14
+ name: bundler
15
+ requirement: !ruby/object:Gem::Requirement
16
+ requirements:
17
+ - - ~>
18
+ - !ruby/object:Gem::Version
19
+ version: '1.3'
20
+ type: :development
21
+ prerelease: false
22
+ version_requirements: !ruby/object:Gem::Requirement
23
+ requirements:
24
+ - - ~>
25
+ - !ruby/object:Gem::Version
26
+ version: '1.3'
27
+ - !ruby/object:Gem::Dependency
28
+ name: rake
29
+ requirement: !ruby/object:Gem::Requirement
30
+ requirements:
31
+ - - '>='
32
+ - !ruby/object:Gem::Version
33
+ version: '0'
34
+ type: :development
35
+ prerelease: false
36
+ version_requirements: !ruby/object:Gem::Requirement
37
+ requirements:
38
+ - - '>='
39
+ - !ruby/object:Gem::Version
40
+ version: '0'
41
+ description: This is gem for jQuery-Visualize plugin.
42
+ email:
43
+ - chernyakov.sergey@gmail.com
44
+ executables: []
45
+ extensions: []
46
+ extra_rdoc_files: []
47
+ files:
48
+ - .gitignore
49
+ - Gemfile
50
+ - LICENSE.txt
51
+ - README.md
52
+ - Rakefile
53
+ - app/assets/images/jquery_visualize/chartbg-vanilla.png
54
+ - app/assets/images/jquery_visualize/chartbg.png
55
+ - app/assets/javascripts/jquery_visualize/index.js
56
+ - app/assets/stylesheets/jquery_visualize/index.css
57
+ - jquery_visualize.gemspec
58
+ - lib/jquery_visualize.rb
59
+ - lib/jquery_visualize/version.rb
60
+ homepage: ''
61
+ licenses:
62
+ - MIT
63
+ metadata: {}
64
+ post_install_message:
65
+ rdoc_options: []
66
+ require_paths:
67
+ - lib
68
+ required_ruby_version: !ruby/object:Gem::Requirement
69
+ requirements:
70
+ - - '>='
71
+ - !ruby/object:Gem::Version
72
+ version: '0'
73
+ required_rubygems_version: !ruby/object:Gem::Requirement
74
+ requirements:
75
+ - - '>='
76
+ - !ruby/object:Gem::Version
77
+ version: '0'
78
+ requirements: []
79
+ rubyforge_project:
80
+ rubygems_version: 2.0.3
81
+ signing_key:
82
+ specification_version: 4
83
+ summary: https://github.com/filamentgroup/jQuery-Visualize
84
+ test_files: []