javascript - NVD3.js line graphs fail to scale y axis to max and min values - Stack Overflow

admin管理员组

文章数量:1425820

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.

/

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 /

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.

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/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/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.

• javascript
• html
• twitter-bootstrap
• d3.js
• nvd3.js

Share Improve this question Follow edited May 30, 2014 at 8:52 rioted asked May 29, 2014 at 13:32 riotedrioted 1,1021313 silver badges2424 bronze badges 3

• What do you mean fails to find the maximum value , by looking at the charts it looks like there might be a problem with your dataset. What exactly are you trying to achieve here?? – shabeer90 Commented May 30, 2014 at 7:35
• Hi @shabeer90, fails to find the maximum value means that the set of values on the y axis is on some graphs singificantly smaller than of others, with no system obvious to me. The expected behaviour was that any dataset will render graphs where the whole line is visible, but that is obviously not the case. I have no idea what dataset problems to look for, could you give me some pointers please? It's all integers, with javascript's weak typing, representing them as strins shouldn't be a problem, right? thank you very much – rioted Commented May 30, 2014 at 8:47
• I'm having a similar issue. NVD3 isn't using the largest Y value for the axis max value. Instead, it's using a different, smaller value. All my values are Fixnum (Fixnum is a subclass of Integer). Any ideas? – Mike Commented Jul 14, 2014 at 20:08

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

Values should be integers, not JSON-decoded-as-strings integers, then it works like a charm.

本文标签： javascriptNVD3js line graphs fail to scale y axis to max and min valuesStack Overflow