NVD3.js multichart with fixed x- and y-axis

Question

I´m using a NVD3.js multichart to display various data. Is it possible set a fixed range for the x- and y-axis. I´ve made a Plunker example: http://plnkr.co/edit/OLN87eIE21tImHktYIH6?p=preview

 var chart = nv.models.multiChart()
            .margin({top: 30, right: 60, bottom: 50, left: 70})
            .color(d3.scale.category10().range());
            chart.xAxis.tickFormat(function(d) {
                  return d3.time.format('%H:%m')(new Date(d));
                });

            chart.yAxis1.tickFormat(d3.format(',.1f'));
            chart.yAxis2.tickFormat(d3.format(',.1f'));
            d3.select('#diagramChart svg')
            .datum(bpmData)
            .transition().duration(500).call(chart);

I´d like to set the x-axis from 00:00 to 23:59 and stop it from resizing when one data is deselected. Same with the y-axis, but with other values. Is there a way to do this? Thanks!

Yamamoto

Answer 1

you're referencing an older version of nvd3 on plnkr. There is an documentation and a new version 1.7.x - many charts are using shared libraries since especially multiChart was buggy. And you did no search really well, there are already some questions about this.

so for your question try

            chart
            .yDomain1([0,200])
            .yDomain2([0,10]); 

I could not get s.th. like that working for xAxis. But i read not all is workin in multiChart if it works on line or bar or stacked area chart, so that could maybe the problem.

posts:

nvd3-multi-bar-horizontal-chart-x-axis-domain

change-range-for-one-y-axis-nvd3-d3

how-can-i-specify-a-domain-x-axis-in-nvd3-linechart

UPDATE: thats part of my code on a multiChart which is running and in nvd3 1.7 (but could have som deprecated notation since I updated it from 1.1):

nv.addGraph(function() {
var chart = nv.models.multiChart()
  .yDomain1([-20, 80]) 
  .yDomain2([-50, 200]) //important! works only with manual tickValues definiton (see chart1.yAxis2.tickValues([...]) !) 
  .margin({top: 30, right: 75, bottom: 40, left: 70}) //important for display of lable on y2Axis!
  ;

//chart option settings  
var options = {
    showControls: false,
    showLegend: true
}
chart1.options(options); 

d3.json(filepath, function(error, json) {
  if (error) {
    return console.warn(error);
  }
  var _inputdata = json.map(function(series) {
    series.values = series.values.map(function(d) {
      return { x: d[0], y: d[1] }
    });
    series.key = series.key.map(function(d) {
      return d[lang]
    });
  return series;
  });

  chart1.xAxis
    .axisLabel("Date")
    .tickFormat(function(d) { return (d3.time.format('%d.%m. %H:%M')(new Date(d))) })
    ;

  chart1.yAxis1
   .axisLabel('leftAxis')
   .axisLabelDistance(10)
   .tickFormat(d3.format('.2f'))
   ;

  chart1.yAxis2
    .axisLabel('rightAxis')
    .tickFormat(d3.format('.2f'))
    //(problem is, nvd3 does always tickValues of 20 and then jumps to tickVlaues of 50). 
    //not possible to set fixed steps of ticks like "y2ticks(10), workaround (-50 til 200):"
    .tickValues([-50,-25,0,25,50,75,100,125,150,175,200]) 
    ;

  d3.select('#chart_1').append("svg")
    .attr("id", "chart1")
    .attr("height", 500)
    .datum(_inputdata)
    .transition()
    .duration(300)
    .call(chart1)
    ;

  nv.utils.windowResize(function() {
    chart1.update();
  });

  //update chart to correct alignments of objects (e.g. wrapping o. elements) 
  chart1.update();

});  

});

Sluggard

I´m sorry but this isn´t working either, give it a try on the plnker above. The version that is used is the one provided by plnker, but in my on project its not working either, even with den current version. I also saw the other posts but none seems to be working – Yamamoto

hmm to sad it is not running. I posted some of my code as an update. Be aware, the part of d3.json(...){ } is using some variables/functions of global functions in my code. – Sluggard