NVD3.js line graphs fail to scale y axis to max and min values
d3.js, html, javascript, nvd3.js, twitter-bootstrap
Solution
Values should be integers, not JSON-decoded-as-strings integers, then it works like a charm.
Problem
Building a page with multiple graphs, I've decided to use NVD3. The problem is that NVD3 fails to find the maximum value, rendering some useless graphs. http://jsfiddle.net/pxU8c/ ``` function renderGraph(parent, data) { function getGraph(svgElement, data) { var height = 500; var chart = nv.models.lineChart() chart.options({ noData: "Not enough data to graph", transitionDuration: 500, showLegend: true, showXAxis: true, showYAxis: true, rightAlignYAxis: false }); chart.xAxis //Chart x-axis settings .axisLabel(data['x-label']) .tickFormat(function(d) { return d3.time.format('%d.%m.%Y')(new Date(+d)) }); chart.yAxis //Chart y-axis settings .axisLabel(data['y-label']) .tickFormat(d3.format('.02f')) ; svgElement //Select the <svg> element you want to render the chart in. .datum(data['data']) //Populate the <svg> element with chart data... .call(chart); //Finally, render the chart! //Update the chart when window resizes. nv.utils.windowResize(function() { chart.update() }); return chart; } var svgELement = d3.select('svg#chart_'+data['code']); nv.addGraph(getGraph(svgELement, data)); } ``` I'm also using twitter bootstrap for layout, if it helps. EDIT following fiddle should be more useful since it contains less garbage http://jsfiddle.net/Bh578/ the first and the seconds graphs are displaying the problem while the third is rendered accordingly to my expectations (i.e. you can see the whole line) I have also added the useInteractiveGuideline: true option so it's more obvious that there are values outside of the visible graph area that I'd like to see on the chart too.