Permalink
Browse files

Merge pull request #53 from tenXer/feature/custom-scales

Allow adding custom scale methods
  • Loading branch information...
2 parents ab46dd8 + 9ad245d commit f3d222690add67673ce36f478ae8c8f5bb59a465 @lgvital lgvital committed Aug 8, 2013
Showing with 79 additions and 42 deletions.
  1. +1 −1 docs.json
  2. +38 −0 docs/docs.html
  3. +15 −1 lib/chart.js
  4. +13 −34 lib/scales.js
  5. +1 −1 package.json
  6. +1 −1 scripts/wrap-start.js
  7. +10 −4 test/scales.test.js
View
@@ -1,3 +1,3 @@
{
- "version": "v0.2.0"
+ "version": "v0.3.0"
}
View
@@ -103,6 +103,41 @@
<hr>
+ <article id="scales" class="doc">
+ <h1>Custom Scales</h1>
+
+ <p>By default, xCharts includes four scale types: <i>ordinal</i>, <i>linear</i>, <i>time</i>, and <i>exponential</i>. However, you can create custom scale types very easily.</p>
+
+ <pre><code data-language="js">function myScale(data, axis, bounds, extents) {
+ return d3.scale.linear()
+ .domain(extents)
+ .nice()
+ .rangeRound(bounds);
+}
+xChart.setScale('scale-name', myScale);</code></pre>
+
+ <h2>Arguments</h2>
+ <dl>
+ <dt><var>data</var></dt>
+ <dd><code data-language="js">object</code></dd>
+ <dd>Merged set of all data that will be displayed on the chart.</dd>
+
+ <dt><var>axis</var></dt>
+ <dd><code data-language="js">string</code></dd>
+ <dd>Either <samp>x</samp> or <samp>y</samp>.</dd>
+
+ <dt><var>bounds</var></dt>
+ <dd><code data-language="js">array</code></dd>
+ <dd>Min and max screen position values for the given axis.</dd>
+
+ <dt><var>extents</var></dt>
+ <dd><code data-language="js">array</code></dd>
+ <dd>Min and max values for the <var>data</var>.</dd>
+ </dl>
+ </article>
+
+ <hr>
+
<article id="styles" class="doc">
<h1>Styling Your Chart</h1>
@@ -216,6 +251,9 @@
</ol>
</li>
<li>
+ <a href="#scales">Custom Scales</a>
+ </li>
+ <li>
<a href="#styles">Styling Your Chart</a>
</li>
<li>
View
@@ -177,8 +177,22 @@ xChart.getVis = function (type) {
return _.clone(_vis[type]);
};
+xChart.setScale = function (name, fn) {
+ if (_scales.hasOwnProperty(name)) {
+ throw 'Scale type "' + name + '" already exists.';
+ }
+
+ _scales[name] = fn;
+};
+
+xChart.getScale = function (name) {
+ if (!_scales.hasOwnProperty(name)) {
+ throw 'Scale type "' + name + '" does not exist.';
+ }
+ return _scales[name];
+};
+
xChart.visutils = _visutils;
-xChart.scales = _scales;
_.defaults(xChart.prototype, {
/**
View
@@ -14,34 +14,33 @@ function _getDomain(data, axis) {
.sort(d3.ascending);
}
-function ordinal(data, axis, bounds, spacing) {
- spacing = spacing || defaultSpacing;
+_scales.ordinal = function (data, axis, bounds, extents) {
var domain = _getDomain(data, axis);
return d3.scale.ordinal()
.domain(domain)
- .rangeRoundBands(bounds, spacing);
-}
+ .rangeRoundBands(bounds, defaultSpacing);
+};
-function linear(extents, bounds, axis) {
+_scales.linear = function (data, axis, bounds, extents) {
return d3.scale.linear()
.domain(extents)
.nice()
.rangeRound(bounds);
-}
+};
-function exponential(extents, bounds, axis) {
+_scales.exponential = function (data, axis, bounds, extents) {
return d3.scale.pow()
.exponent(0.65)
.domain(extents)
.nice()
.rangeRound(bounds);
-}
+};
-function time(extents, bounds) {
+_scales.time = function (data, axis, bounds, extents) {
return d3.time.scale()
.domain(_.map(extents, function (d) { return new Date(d); }))
.range(bounds);
-}
+};
function _extendDomain(domain, axis) {
var min = domain[0],
@@ -100,7 +99,7 @@ function _getExtents(options, data, xType, yType) {
return extents;
}
-function xy(self, data, xType, yType) {
+_scales.xy = function (self, data, xType, yType) {
var o = self._options,
extents = _getExtents(o, data, xType, yType),
scales = {},
@@ -111,30 +110,10 @@ function xy(self, data, xType, yType) {
_.each([xType, yType], function (type, i) {
var axis = (i === 0) ? 'x' : 'y',
- bounds = (i === 0) ? horiz : vert;
- switch (type) {
- case 'ordinal':
- scales[axis] = ordinal(data, axis, bounds);
- break;
- case 'linear':
- scales[axis] = linear(extents[axis], bounds, axis);
- break;
- case 'exponential':
- scales[axis] = exponential(extents[axis], bounds, axis);
- break;
- case 'time':
- scales[axis] = time(extents[axis], bounds);
- break;
- }
+ bounds = (i === 0) ? horiz : vert,
+ fn = xChart.getScale(type);
+ scales[axis] = fn(data, axis, bounds, extents[axis]);
});
return scales;
-}
-
-var _scales = {
- ordinal: ordinal,
- linear: linear,
- exponential: exponential,
- time: time,
- xy: xy
};
View
@@ -1,6 +1,6 @@
{
"name": "xcharts",
- "version": "0.2.0",
+ "version": "0.3.0-pre",
"description": "A D3-based library for building custom charts and graphs.",
"main": "build/xcharts.js",
"homepage": "http://tenxer.github.com/xcharts/",
View
@@ -1,5 +1,5 @@
/*!
-xCharts v0.2.0 Copyright (c) 2012, tenXer, Inc. All Rights Reserved.
+xCharts v0.3.0 Copyright (c) 2012, tenXer, Inc. All Rights Reserved.
@license MIT license. http://github.com/tenXer/xcharts for details
*/
View
@@ -1,6 +1,11 @@
(function () {
- var scales = xChart.scales,
+ var scales = {
+ xy: xChart.getScale('xy'),
+ linear: xChart.getScale('linear'),
+ exponential: xChart.getScale('exponential'),
+ ordinal: xChart.getScale('ordinal')
+ },
data = [
{
label: 'foobar',
@@ -44,20 +49,20 @@
describe('Linear', function () {
it('returns a linear scale', function () {
- var s = scales.linear([0, 60], [0, 100], 'y');
+ var s = scales.linear(null, 'y', [0, 100], [0, 60]);
_testLinear(s);
});
it('does not round values', function () {
- var s = scales.linear([1.1, 2.1], [0, 100], 'x');
+ var s = scales.linear(null, 'x', [0, 100], [1.1, 2.1]);
expect(s(1.4)).to.not.equal(s(1.1));
expect(s(1.9)).to.not.equal(s(2.1));
});
});
describe('Exponential', function () {
it('returns an exponential scale', function () {
- var s = scales.exponential([0, 500], [0, 100], 'y');
+ var s = scales.exponential(null, 'y', [0, 100], [0, 500]);
expect(s(10)).to.be.eql(8); // would be 2 on linear
expect(s(100)).to.be.eql(35); // would be 20 on linear
expect(s(400)).to.be.eql(86); // would be 80 on linear
@@ -79,6 +84,7 @@
_height: 100
},
s = scales.xy(foo, data, 'ordinal', 'linear');
+
window.a = s;
_testOrdinal(s.x);
_testLinear(s.y);

0 comments on commit f3d2226

Please sign in to comment.