diff --git a/README.md b/README.md index 5d5c1b2f..235aed58 100644 --- a/README.md +++ b/README.md @@ -24,13 +24,13 @@ graph.render(); ``` See the [overview](http://code.shutterstock.com/rickshaw/), [tutorial](http://shutterstock.github.com/rickshaw/tutorial/introduction.html), and [examples](http://shutterstock.github.com/rickshaw/examples/) for more. -## Rickshaw.Graph +## Rickshaw.Graph A Rickshaw graph. Send an `element` reference, `series` data, and optionally other properties to the constructor before calling `render()` to point the graph. A listing of properties follows. Send these as arguments to the constructor, and optionally set them later on already-instantiated graphs with a call to `configure()` ##### element -A reference to an HTML element that should hold the graph. +A reference to an HTML element that should hold the graph. ##### series @@ -56,6 +56,14 @@ Lower value on the Y-axis, or `auto` for the lowest value in the series. Defaul Highest value on the Y-axis. Defaults to the highest value in the series. +##### x_min + +Lowest value on the X-axis. Defaults to the lowest value in the series. + +##### x_max + +Highest value on the Y-axis. Defaults to the highest value in the series. + ##### padding An object containing any of `top`, `right`, `bottom`, and `left` properties specifying a padding percentage around the extrema of the data in the graph. Defaults to 0.01 on top for 1% padding, and 0 on other sides. Padding on the bottom only applies when the `yMin` is either negative or `auto`. @@ -123,7 +131,7 @@ Rickshaw comes with a few color schemes. Instantiate a palette and specify a sch ```javascript var palette = new Rickshaw.Color.Palette( { scheme: 'spectrum2001' } ); - + palette.color() // => first color in the palette palette.color() // => next color in the palette... ``` @@ -146,7 +154,7 @@ For graphs with more series than palettes have colors, specify an `interpolatedS This library works in modern browsers and Internet Explorer 9+. -Rickshaw relies on the HTMLElement#classList API, which isn't natively supported in Internet Explorer 9. Rickshaw adds support by including a shim which implements the classList API by extending the HTMLElement prototype. You can disable this behavior if you like, by setting `RICKSHAW_NO_COMPAT` to a true value before including the library. +Rickshaw relies on the HTMLElement#classList API, which isn't natively supported in Internet Explorer 9. Rickshaw adds support by including a shim which implements the classList API by extending the HTMLElement prototype. You can disable this behavior if you like, by setting `RICKSHAW_NO_COMPAT` to a true value before including the library. ## Dependencies & Building diff --git a/src/js/Rickshaw.Graph.Renderer.js b/src/js/Rickshaw.Graph.Renderer.js index fc34edaf..6fdbe008 100644 --- a/src/js/Rickshaw.Graph.Renderer.js +++ b/src/js/Rickshaw.Graph.Renderer.js @@ -63,6 +63,9 @@ Rickshaw.Graph.Renderer = Rickshaw.Class.create( { xMin -= (xMax - xMin) * this.padding.left; xMax += (xMax - xMin) * this.padding.right; + xMin = this.graph.x_min === undefined ? xMin : this.graph.x_min || 0; + xMax = this.graph.x_max === undefined ? xMax : this.graph.x_max || 0; + yMin = this.graph.min === 'auto' ? yMin : this.graph.min || 0; yMax = this.graph.max === undefined ? yMax : this.graph.max; diff --git a/src/js/Rickshaw.Graph.js b/src/js/Rickshaw.Graph.js index 11e3a9ef..0c8dded3 100644 --- a/src/js/Rickshaw.Graph.js +++ b/src/js/Rickshaw.Graph.js @@ -21,6 +21,8 @@ Rickshaw.Graph = function(args) { offset: 'zero', min: undefined, max: undefined, + x_min: undefined, + x_max: undefined, preserve: false, xScale: undefined, yScale: undefined diff --git a/tests/Rickshaw.Graph.Renderer.js b/tests/Rickshaw.Graph.Renderer.js index df09562f..f0d636f4 100644 --- a/tests/Rickshaw.Graph.Renderer.js +++ b/tests/Rickshaw.Graph.Renderer.js @@ -51,6 +51,7 @@ exports.domain = function(test) { domain = graph.renderer.domain(); test.deepEqual(domain, { x: [ 0, 4 ], y: [ -72, 49 ] }, 'domain matches with negative numbers and min auto'); + // different series lengths graph.series.push({ @@ -74,6 +75,35 @@ exports.domain = function(test) { domain = graph.renderer.domain(); test.deepEqual(domain, { x: [ 1, 3 ], y: [ 3, 49 ] }, "null values don't set min to zero"); + + // x_min should be used to calculate the domain + + graph.series.splice(0, graph.series.length); + graph.series.push({ data: [ { x: 1, y: 27 }, { x: 2, y: 49 }, { x: 3, y: 14 } ] }); + graph.series.push({ data: [ { x: 1, y: null }, { x: 2, y: 9 }, { x: 3, y: 3 } ] }); + + graph.configure({ x_min: '100' }); + graph.stackData(); + + domain = graph.renderer.domain(); + test.deepEqual(domain, { x: [ 100, 3 ], y: [ 3, 49 ] }, "x_min should be used to calculate the domain"); + graph.configure({ x_min: void 0 }); + + + // x_max should be used to calculate the domain + + graph.series.splice(0, graph.series.length); + graph.series.push({ data: [ { x: 1, y: 27 }, { x: 2, y: 49 }, { x: 3, y: 14 } ] }); + graph.series.push({ data: [ { x: 1, y: null }, { x: 2, y: 9 }, { x: 3, y: 3 } ] }); + + graph.configure({ x_max: '100' }); + graph.stackData(); + + domain = graph.renderer.domain(); + test.deepEqual(domain, { x: [ 1, 100 ], y: [ 3, 49 ] }, "x_max should be used to calculate the domain"); + graph.configure({ x_max: void 0 }); + + // max of zero graph.series.push({ data: [ { x: 1, y: -29 }, { x: 2, y: -9 }, { x: 3, y: -3 } ] }); @@ -91,11 +121,11 @@ exports.domain = function(test) { exports.respectStrokeFactory = function(test) { var el = document.createElement("div"); - + Rickshaw.Graph.Renderer.RespectStrokeFactory = Rickshaw.Class.create( Rickshaw.Graph.Renderer, { name: 'respectStrokeFactory', - + seriesPathFactory: function() { var graph = this.graph; var factory = d3.svg.line() @@ -105,7 +135,7 @@ exports.respectStrokeFactory = function(test) { factory.defined && factory.defined( function(d) { return d.y !== null } ); return factory; }, - + seriesStrokeFactory: function() { var graph = this.graph; var factory = d3.svg.line() @@ -116,7 +146,7 @@ exports.respectStrokeFactory = function(test) { return factory; } }); - + var graph = new Rickshaw.Graph({ element: el, stroke: true, @@ -137,17 +167,17 @@ exports.respectStrokeFactory = function(test) { ] }); graph.render(); - + var path = graph.vis.select('path.path.fnord'); test.equals(path.size(), 1, "we have a fnord path"); - + var stroke = graph.vis.select('path.stroke.fnord'); test.equals(stroke.size(), 1, "we have a fnord stroke"); - + // should also be availeable via series var firstSeries = graph.series[0]; test.ok(d3.select(firstSeries.path).classed('path'), "selectable path"); test.ok(d3.select(firstSeries.stroke).classed('stroke', "selectable stroke")); - + test.done(); };