Skip to content
Browse files

allow specifying custom x and y scales; closes #346

  • Loading branch information...
1 parent ae207e9 commit 958c043b954cf9a60b2b026f21e0ba042ba1d2f4 @dchester dchester committed Dec 1, 2013
Showing with 113 additions and 4 deletions.
  1. +56 −0 examples/timescale.html
  2. +5 −4 src/js/Rickshaw.Graph.js
  3. +52 −0 tests/Rickshaw.Graph.js
View
56 examples/timescale.html
@@ -0,0 +1,56 @@
+<!doctype html>
+<link type="text/css" rel="stylesheet" href="../src/css/graph.css">
+<link type="text/css" rel="stylesheet" href="css/lines.css">
+
+<script src="../vendor/d3.v3.js"></script>
+
+<script src="../rickshaw.min.js"></script>
+
+<div id="chart"></div>
+<div id="slider"></div>
+
+<script>
+
+var seriesData = [ [], [] ];
+var random = new Rickshaw.Fixtures.RandomData(1500000);
+
+for (var i = 0; i < 900; i++) {
+ random.addData(seriesData);
+}
+
+var graph = new Rickshaw.Graph({
+ element: document.getElementById("chart"),
+ width: 960,
+ height: 500,
+ stroke: true,
+ strokeWidth: 0.5,
+ renderer: 'area',
+ xScale: d3.time.scale(),
+ yScale: d3.scale.sqrt(),
+ series:[
+ { color: 'steelblue', data: seriesData[0] },
+ { color: '#99d4ee', data: seriesData[1] }
+ ]
+});
+
+graph.render();
+
+var xAxis = new Rickshaw.Graph.Axis.X({
+ graph: graph,
+ tickFormat: graph.x.tickFormat()
+});
+
+xAxis.render();
+
+var yAxis = new Rickshaw.Graph.Axis.Y({
+ graph: graph
+});
+
+yAxis.render();
+
+var slider = new Rickshaw.Graph.RangeSlider.Preview({
+ graph: graph,
+ element: document.getElementById('slider')
+});
+
+</script>
View
9 src/js/Rickshaw.Graph.js
@@ -21,7 +21,9 @@ Rickshaw.Graph = function(args) {
offset: 'zero',
min: undefined,
max: undefined,
- preserve: false
+ preserve: false,
+ xScale: undefined,
+ yScale: undefined
};
this._loadRenderers();
@@ -103,9 +105,8 @@ Rickshaw.Graph = function(args) {
var domain = this.renderer.domain();
- this.x = d3.scale.linear().domain(domain.x).range([0, this.width]);
-
- this.y = d3.scale.linear().domain(domain.y).range([this.height, 0]);
+ this.x = (this.xScale || d3.scale.linear()).domain(domain.x).range([0, this.width]);
+ this.y = (this.yScale || d3.scale.linear()).domain(domain.y).range([this.height, 0]);
this.y.magnitude = d3.scale.linear()
.domain([domain.y[0] - domain.y[0], domain.y[1] - domain.y[0]])
View
52 tests/Rickshaw.Graph.js
@@ -79,6 +79,58 @@ exports.validate = function(test) {
};
+exports.scales = function(test) {
+
+ var el = document.createElement("div");
+
+ var times = [1380000000000, 1390000000000];
+
+ var series = [
+ {
+ color: 'steelblue',
+ data: [ { x: times[0], y: 40 }, { x: times[1], y: 49 } ]
+ }
+ ];
+
+ var graph = new Rickshaw.Graph({
+ element: el,
+ width: 960,
+ height: 500,
+ xScale: d3.time.scale(),
+ yScale: d3.scale.sqrt(),
+ series: series
+ });
+
+ graph.render();
+
+ var xAxis = new Rickshaw.Graph.Axis.X({
+ graph: graph,
+ tickFormat: graph.x.tickFormat()
+ });
+
+ xAxis.render();
+
+ var yAxis = new Rickshaw.Graph.Axis.Y({
+ graph: graph
+ });
+
+ yAxis.render();
+
+ test.ok(graph.x.ticks()[0] instanceof Date);
+
+ var xTicks = el.getElementsByClassName('x_ticks_d3')[0].getElementsByTagName('text');
+ test.equal(xTicks[0].innerHTML, 'Sep 29');
+ test.equal(xTicks[1].innerHTML, 'Oct 06');
+ test.equal(xTicks[8].innerHTML, 'Nov 24');
+
+ var yTicks = el.getElementsByClassName('y_ticks')[0].getElementsByTagName('g');
+ test.equal(yTicks[0].getAttribute('transform'), 'translate(0,500)');
+ test.equal(yTicks[1].getAttribute('transform'), 'translate(0,275.24400874015976)');
+ test.equal(yTicks[2].getAttribute('transform'), 'translate(0,182.14702893572513)');
+
+ test.done();
+};
+
exports.inconsistent = function(test) {
var el = document.createElement("div");

0 comments on commit 958c043

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