CODEWITHSUNDEEP
javascripthtmltwitter-bootstrapd3.jsnvd3.js
rioted
rioted

Reputation: 1092

NVD3.js line graphs fail to scale y axis to max and min values

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.

Upvotes: 2

Views: 1943

Answers (1)

rioted
rioted

Reputation: 1092

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

Upvotes: 9

Related Questions