Skip to content
Browse files

Use jQuery enumerable plugin

  • Loading branch information...
1 parent 2a58b09 commit 465e6b4c39784bf673129c7c3b6da848c45e262e @xaviershay committed
Showing with 56 additions and 21 deletions.
  1. +2 −1 index.html
  2. +35 −0 jquery.enumerable.js
  3. +18 −20 jquery.tufte-graph.js
  4. +1 −0 test/integration.html
View
3 index.html
@@ -4,6 +4,7 @@
<title>TufteGraph: beautiful charts with jQuery</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
+ <script type="text/javascript" src="jquery.enumerable.js"></script>
<script type="text/javascript" src="jquery.tufte-graph.js"></script>
<link rel="stylesheet" href="tufte-graph.css" type="text/css" media="screen" charset="utf-8" />
@@ -168,7 +169,7 @@
<p>That's it. Have a look at the <a href='test/integration.html'>integration tests</a> for a few combinations.</p>
<h2>Hot Tips</h2>
<ul>
- <li>You need to be using <code><a href="http://jquery.com">jQuery</a></code>. View source on this page if you don't quite get it.</li>
+ <li>You need to be using <code><a href="http://jquery.com">jQuery</a></code> and also the jQuery enumerable plugin (included). View source on this page if you don't quite get it.</li>
<li>By default your graph won't be that pretty because it needs to be styled. I recommend <code>tufte-graph.css</code> as a good starting point.</li>
<li>Find beautiful colors for your graphs at <a href="http://www.colourlovers.com/">ColourLovers</a></li>
<li>I have tested this in Firefox 3 and Safari 3 and nothing else. Buyer beware.</li>
View
35 jquery.enumerable.js
@@ -0,0 +1,35 @@
+(function ( $ ) {
+ $.collect = function (enumerable, callback) {
+ validateCallback(callback);
+
+ var result = [];
+ $.each(enumerable, function (index) {
+ result.push(callback.call(this, index));
+ });
+ return result;
+ }
+
+ $.fn.collect = function(callback) {
+ return $.collect(this, callback);
+ }
+
+ $.inject = function (enumerable, initialValue, callback) {
+ validateCallback(callback);
+
+ var accumulator = initialValue;
+
+ $.each(enumerable, function (index) {
+ accumulator = callback.call(this, accumulator, index);
+ });
+ return accumulator;
+ }
+
+ $.fn.inject = function(initialValue, callback) {
+ return $.inject(this, initialValue, callback);
+ }
+
+ function validateCallback(callback) {
+ if (!jQuery.isFunction(callback))
+ throw("callback needs to be a function, it was: " + callback);
+ }
+})( jQuery );
View
38 jquery.tufte-graph.js
@@ -38,8 +38,8 @@
var axis = plot.axis;
// Iterate over each bar
- for (var i = 0; i < options.data.length; ++i) {
- var element = options.data[i];
+ $(options.data).each(function (i) {
+ var element = this;
var x = i + 0.5;
var all_y = null;
@@ -73,7 +73,7 @@
ctx.save();
// Iterate over each data point for this bar and render a rectangle for each
- for (var stackedIndex = 0; stackedIndex < all_y.length; stackedIndex++) {
+ $(all_y).each(function(stackedIndex) {
var optionResolver = function(option) { // Curry resolveOption for convenience
return resolveOption(option, element, i, stackedIndex);
}
@@ -96,7 +96,7 @@
ctx.strokeRect( coords[0], coords[1], coords[2], coords[3] );
lastY = lastY + y;
- }
+ });
ctx.restore();
addLabel = function(klass, text, pos) {
@@ -117,7 +117,7 @@
top: t.Y(0),
width: t.W(1)
});
- }
+ });
addLegend(plot, options);
}
@@ -125,21 +125,20 @@
// absolutely positioned table placed at the top right of the graph
function addLegend(plot, options) {
if (options.legend.data) {
- var data = options.legend.data;
-
- elements = [];
- for (var i = data.length - 1; i >= 0; i--) {
- var element = data[i];
- var optionResolver = function(option) { // Curry resolveOption for convenience
- return resolveOption(option, element, i, null);
- }
+ elements = $(options.legend.data).collect(function(i) {
+ var optionResolver = (function (element) {
+ return function(option) { // Curry resolveOption for convenience
+ return resolveOption(option, element, i, null);
+ }
+ })(this);
var colorBox = '<div class="color-box" style="background-color:' + optionResolver(options.legend.color) + '"></div>';
var label = optionResolver(options.legend.label);
- elements += ["<tr><td>" + colorBox + "</td><td>" + label + "</td></tr>"];
- }
- $('<table class="legend">' + elements + '</table>').css({
+ return "<tr><td>" + colorBox + "</td><td>" + label + "</td></tr>";
+ });
+
+ $('<table class="legend">' + elements.join("") + '</table>').css({
position: 'absolute',
top: '0px',
left: plot.width + 'px'
@@ -172,14 +171,13 @@
axis.y.min = 0;
axis.y.max = 0;
- for (var i = 0; i < options.data.length; ++i) {
- element = options.data[i];
- var y = element[0]; // TODO: Support non-array y values
+ $(options.data).each(function() {
+ var y = this[0];
if (y.length)
y = sum(y);
if( y < axis.y.min ) throw("Negative values not supported");
if( y > axis.y.max ) axis.y.max = y;
- }
+ });
if( axis.x.max <= 0) throw("You must have at least one data point");
if( axis.y.max <= 0) throw("You must have at least one y-value greater than 0");
View
1 test/integration.html
@@ -4,6 +4,7 @@
<title>TufteGraph: Integration tests</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
+ <script type="text/javascript" src="../jquery.enumerable.js"></script>
<script type="text/javascript" src="../jquery.tufte-graph.js"></script>
<link rel="stylesheet" href="../tufte-graph.css" type="text/css" media="screen" charset="utf-8" />

0 comments on commit 465e6b4

Please sign in to comment.
Something went wrong with that request. Please try again.