Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Setting Y axis range in dc series chart

Tags:

d3.js

dc.js

I am using dc.js to build a series chart. I am not able to set the Y axis start and end as desired. Can someone please suggest how to achieve a Y-axis that starts from 90 instead of 0 ? Ideally I would like to set Y-axis start as minimum of the data value and end as the maximum of the data value.

Code:

d3.csv("data/compareData.txt", function(data) {

  ndx = crossfilter(data);
  runDimension = ndx.dimension(function(d) {return [+d3.time.format.iso.parse(d.timestamp), +d.meterid]; });
  runGroup = runDimension.group().reduceSum(function(d) { return +d.voltagemagnitude*100; });

  testChart
    .width(768)
    .height(480)
    .chart(function(c) { return dc.lineChart(c).interpolate('basis'); })
    .x(d3.time.scale().domain([1366621166000, 1366621179983]))
    .y(d3.scale.linear().domain([90, 100]))
    .brushOn(false)
    .yAxisLabel("Measured Speed km/s")
    .xAxisLabel("Run")
    .elasticY(true)
    .dimension(runDimension)
    .group(runGroup)
    .mouseZoomable(false)
    .seriesAccessor(function(d) {return "PMU: " + d.key[1];})
    .keyAccessor(function(d) {return +d.key[0];})
    .valueAccessor(function(d) {return +d.value;})
    .legend(dc.legend().x(350).y(350).itemHeight(13).gap(5).horizontal(1).legendWidth(140).itemWidth(70));
  testChart.yAxis().tickFormat(function(d) {return d3.format(',d')(d);});
  testChart.margins().left += 40;

  dc.renderAll();

});
like image 223
Andy897 Avatar asked Apr 05 '14 17:04

Andy897


People also ask

What is the Y axis range?

The range of data (on a graph) is the difference between the highest and lowest values for data in the direction of the Y axis. (the vertical axis).


2 Answers

I think you want something like this:

var runMin = +runDimension.bottom(1)[0].voltagemagnitude*100;
var runMax = +runDimension.top(1)[0].voltagemagnitude*100;

Then you can set the domain for your y axis:

.y(d3.scale.linear().domain([runMin, runMax]))

Note that bottom and top return a data row, so you need to extract the value from it and transform it in the same way that you do for reduceSum.

like image 196
Tom Avatar answered Oct 24 '22 02:10

Tom


I had a similar issue and all it took was removing the .yAxisPadding. Not exactly an answer to your problem but hopefully of use to others who read this post.

like image 24
MrWiLofDoom Avatar answered Oct 24 '22 03:10

MrWiLofDoom