CODEWITHSUNDEEP
javascriptjsond3.jschartsnvd3.js
async_soul
async_soul

Reputation: 133

filter the json data and draw the nvd3 chart using filtered data

d3.json('http://www.mocky.io/v2/57d14d2f100000cd19208e19', function (error, historicalBarChart) {

(function () {


    nv.addGraph(function() {
    var chart = nv.models.discreteBarChart()
        .x(function(d) { return d.label })
        .y(function(d) { return d.value })
        .staggerLabels(true)
        //.staggerLabels(historicalBarChart[0].values.length > 8)
        .showValues(true)
        .duration(250)
        .height(300)
        .width(400)
        ;


        var filtered1=historicalBarChart[0].values.filter(function(d) { return d.value > 15;});

    console.log(filtered1); // getting filtered json here

    d3.select('#chart2 svg')
        .datum(filtered1) // doesn't render chart for filtered json
        .transition().duration(500)
        .call(chart);
    nv.utils.windowResize(chart.update);
    return chart;

    });
})();
});

I am trying to filter the data for values greater than 15 in the api data and draw the chart.But the data is not getting filtered and the chart is not rendered due to non availability of data. How to filter the data and display the nvd3 charts ? Thanks in advance !!

Upvotes: 0

Views: 573

Answers (2)

async_soul
async_soul

Reputation: 133

After trying a lot stumbled upon this solution,putting the filtered data in the json format needed by the nvd3 does the trick..code to do so is below..

var filtered = [{ key: "Cumulative Return", values: filtered1 }]

Upvotes: 0

codename44
codename44

Reputation: 887

Your test set (http://www.mocky.io/v2/57d14d2f100000cd19208e19) doesn't contain objects with label and value keys. It contains an array which has only one object, which contains a value key.

So you should use : var filtered1 = historicalBarChart[0].values.filter(..) instead of just historicalBarChart.filter(...)

Upvotes: 1

Related Questions