Make pretty graphs with javascript, using jQuery
90 |Measured by standard combo multiplier
94 |Total revenue per year
101 |It is different from other javascript charting libraries because:
106 |jQuery(document).ready(function () {
116 | jQuery('#awesome-graph').tufteBar({
117 | data: [
118 | // First element is the y-value
119 | // Other elements are arbitary - they are not used by the lib
120 | // but are passed back into callback functions
121 | [1.0, {label: 'Dog'}],
122 | [1.3, {label: 'Raccoon'}],
123 | // etc...
124 |
125 | // For stacked graphs, pass an array of non-cumulative y values
126 | [[1.5, 1.0, 0.51], {label: '2005'}]
127 | ],
128 |
129 | // Any of the following properties can be either static values
130 | // or a function that will be called for each data point.
131 | // For functions, 'this' will be set to the current data element,
132 | // just like jQuery's $.each
133 |
134 | // Bar width in arbitrary units, 1.0 means the bars will be snuggled
135 | // up next to each other
136 | barWidth: 0.8,
137 |
138 | // The label on top of the bar - can contain HTML
139 | // formatNumber inserts commas as thousands separators in a number
140 | barLabel: function(index) {
141 | return $.tufteBar.formatNumber(this[0]) + 'x'
142 | },
143 |
144 | // The label on the x-axis - can contain HTML
145 | axisLabel: function(index) { return this[1].label },
146 |
147 | // The color of the bar
148 | color: function(index) {
149 | return ['#E57536', '#82293B'][index % 2]
150 | },
151 |
152 | // Stacked graphs also pass a stackedIndex parameter
153 | color: function(index, stackedIndex) {
154 | return ['#E57536', '#82293B'][stackedIndex % 2]
155 | },
156 |
157 | // Alternatively, you can just override the default colors and keep
158 | // the built in color functions
159 | colors: ['#82293B', '#E57536', '#FFBE33'],
160 |
161 | // Legend is optional
162 | legend: {
163 | // Data can be an array of any type of object, but the default
164 | // formatter works with strings
165 | data: ["North", "East", "West"],
166 |
167 | // By default, the colors of the graph are used
168 | color: function(index) {
169 | return ['#E57536', '#82293B'][index % 2]
170 | },
171 |
172 | // You can customize the element label - can contain HTML
173 | label: function(index) { return this }
174 | }
175 | });
176 | });
177 | That's it. Have a look at the integration tests for a few combinations.
179 |jQuery and also the jQuery enumerable plugin (included). View source on this page if you don't quite get it.tufte-graph.css as a good starting point.
194 |
195 |
196 |
--------------------------------------------------------------------------------
/jquery.tufte-graph.js:
--------------------------------------------------------------------------------
1 | (function($) {
2 | //
3 | // Public interface
4 | //
5 |
6 | // The main event - creates a pretty graph. See index.html for documentation.
7 | $.fn.tufteBar = function(options) {
8 | var defaultCopy = $.extend(true, {}, $.fn.tufteBar.defaults);
9 | var options = $.extend(true, defaultCopy, options);
10 |
11 | return this.each(function () {
12 | draw(makePlot($(this), options), options);
13 | });
14 | }
15 |
16 | // Defaults are exposed publically so you can reuse bits that you find
17 | // handy (the colors, for instance)
18 | $.fn.tufteBar.defaults = {
19 | barWidth: 0.8,
20 | colors: ['#07093D', '#0C0F66', '#476FB2'],
21 | color: function(index, stackedIndex, options) { return options.colors[stackedIndex % options.colors.length]; },
22 | barLabel: function(index, stackedIndex) {
23 | return $.tufteBar.formatNumber(totalValue(this[0]));
24 | },
25 | axisLabel: function(index, stackedIndex) { return index; },
26 | legend: {
27 | color: function(index, options) { return options.colors[index % options.colors.length]; },
28 | label: function(index) { return this; }
29 | }
30 | }
31 |
32 | $.tufteBar = {
33 | // Add thousands separators to a number to make it look pretty.
34 | // 1000 -> 1,000
35 | formatNumber: function(nStr) {
36 | // http://www.mredkj.com/javascript/nfbasic.html
37 | nStr += '';
38 | x = nStr.split('.');
39 | x1 = x[0];
40 | x2 = x.length > 1 ? '.' + x[1] : '';
41 | var rgx = /(\d+)(\d{3})/;
42 | while (rgx.test(x1)) {
43 | x1 = x1.replace(rgx, '$1' + ',' + '$2');
44 | }
45 | return x1 + x2;
46 | }
47 | }
48 |
49 | //
50 | // Private functions
51 | //
52 |
53 | // This function should be applied to any option used from the options hash.
54 | // It allows options to be provided as either static values or functions which are
55 | // evaluated each time they are used
56 | function resolveOption(option, element) {
57 | // the @arguments@ special variable looks like an array, but really isn't, so we
58 | // need to transform it in order to perform array function on it
59 | function toArray() {
60 | var result = []
61 | for (var i = 0; i < this.length; i++)
62 | result.push(this[i])
63 | return(result)
64 | }
65 |
66 | return $.isFunction(option) ? option.apply(element, toArray.apply(arguments).slice(2, arguments.length)) : option;
67 | }
68 |
69 | // Returns the total value of a bar, for labeling or plotting. Y values can either be
70 | // a single number (for a normal graph), or an array of numbers (for a stacked graph)
71 | function totalValue(value) {
72 | if (value instanceof Array)
73 | return $.sum(value);
74 | else
75 | return value;
76 | }
77 |
78 | function draw(plot, options) {
79 | var ctx = plot.ctx;
80 | var axis = plot.axis;
81 |
82 | // Iterate over each bar
83 | $(options.data).each(function (i) {
84 | var element = this;
85 | var x = i + 0.5;
86 | var all_y = null;
87 |
88 | if (element[0] instanceof Array) {
89 | // This is a stacked bar, so the data is all good to go
90 | all_y = element[0];
91 | } else {
92 | // This is a normal bar, wrap in an array to make it a stacked bar with one data point
93 | all_y = [element[0]];
94 | }
95 |
96 | if ($(all_y).any(function() { return isNaN(+this); })) {
97 | throw("Non-numeric value provided for y: " + element[0]);
98 | }
99 |
100 | var lastY = 0;
101 |
102 | pixel_scaling_function = function(axis) {
103 | var scale = axis.pixelLength / (Math.abs(axis.max - axis.min));
104 | return function (value) {
105 | return value * scale;
106 | }
107 | }
108 |
109 | // These functions transform a value from plot coordinates to pixel coordinates
110 | var t = {}
111 | t.W = pixel_scaling_function(axis.x);
112 | t.H = pixel_scaling_function(axis.y);
113 | t.X = t.W;
114 | // Y needs to invert the result since 0 in plot coords is bottom left, but 0 in pixel coords is top left
115 | t.Y = function(y) { return axis.y.pixelLength - t.H(y) };
116 |
117 | // Iterate over each data point for this bar and render a rectangle for each
118 | $(all_y).each(function(stackedIndex) {
119 | var optionResolver = function(option) { // Curry resolveOption for convenience
120 | return resolveOption(option, element, i, stackedIndex, options);
121 | }
122 |
123 | var y = all_y[stackedIndex];
124 | var halfBar = optionResolver(options.barWidth) / 2;
125 | var left = x - halfBar,
126 | width = halfBar * 2,
127 | height = Math.abs(y);
128 |
129 | // Need to both fill and stroke the rect to make sure the whole area is covered
130 | // You get nasty artifacts otherwise
131 | var color = optionResolver(options.color);
132 | if( y > 0 ) {
133 | var top = lastY + y + Math.abs(axis.y.min);
134 | var coords = [t.X(left), t.Y(top), t.W(width), t.H(height)];
135 | } else {
136 | var top = lastY + Math.abs(axis.y.min);
137 | var coords = [t.X(left), t.Y(top), t.W(width), t.H(height)];
138 | }
139 |
140 | ctx.rect(coords[0], coords[1], coords[2], coords[3]).attr({stroke: color, fill: color});
141 |
142 | if( (lastY >= 0 && y >= 0) || (lastY <= 0 && y <= 0) ) {
143 | lastY = lastY + y;
144 | } else {
145 | lastY = 0;
146 | }
147 |
148 | });
149 |
150 | addLabel = function(klass, text, pos) {
151 | html = '| Test | 259 |Result | 260 |
|---|---|
| Non-numeric y-value for bar graph | Not run |
| Non-numeric y-value for stacked graph | Not run |
| Input | 270 |Expected | 271 |Actual | 272 |Status | 273 |
|---|
| Label | 281 |Amount | 282 |
|---|---|
| A | 1.0 |
| B | 1.3 |
| C | 3.6 |
| D | 4.0 |
| E | 5.2 |
| F | 7.0 |