Setting Y axis range in dc series chart
Asked Answered
S

2

5

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();

});
Swing answered 5/4, 2014 at 17:18 Comment(0)
A
6

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.

Aschim answered 22/6, 2014 at 11:14 Comment(0)
E
3

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.

Exasperation answered 13/7, 2015 at 15:9 Comment(1)
Worked! I had to set .yAxisPadding(-1) in order to get it to show. But your answer at least got my y axis ticks to show.Meimeibers

© 2022 - 2024 — McMap. All rights reserved.