CODEWITHSUNDEEP
javascriptnvd3.js
swapneel
swapneel

Reputation: 3061

Donut Pie Chart NVD3

below code does not display any chart my jsbin link

data1 = [
{
values :
[
  {"label":"One","value":29.765957771107},
  {"label":"Two","value":0},
  {"label":"Three","value":32.807804682612}
]
  }
];

nv.addGraph(function () 
            {
              var chart = nv.models.pieChart()
                .x(function (d) { return d.label; })
                .y(function (d) { return d.value; })
                .donut(true)
                .donutLabelsOutside(false)
                .showLegend(true)
              .showLabels(true);


    d3.select("#chart svg")
.datum([{"label":"One","value":29.765957771107},{"label":"Two","value":0.0},{"label":"Three","value":32.807804682612}])
        .transition().duration(100)
        .call(chart);

        return chart;
    });

where as if I change binding as below Jsbin Link it works.

But i want to bind my data on server side through a html helper extension. what will be the correct format to pass objects to d3? any Ideas?

      d3.select("#chart svg")
.datum(data1)
.transition().duration(2200)
.call(chart);

Upvotes: 0

Views: 2404

Answers (1)

Tyrone Wilson
Tyrone Wilson

Reputation: 4618

Like most of the comments to your question, I found that replacing your inline data with data1 makes it work.

data1 = [
{
values :
[
  {"label":"One","value":29.765957771107},
  {"label":"Two","value":0},
  {"label":"Three","value":32.807804682612}
]
  }
];

nv.addGraph(function () 
            {
              var chart = nv.models.pieChart()
                .x(function (d) { return d.label; })
                .y(function (d) { return d.value; })
                .donut(true)
                .donutLabelsOutside(false)
                .showLegend(true)
              .showLabels(true);


    d3.select("#chart svg")
.datum(data1)
        .transition().duration(100)
        .call(chart);

        return chart;
    });

Not sure why you have a variable to store your values and then place them inline as well but they are obviously not the same.

nvd3 expects an array of hashed configuration options and one of those is values:. you still have to follow the structure.

This works:

.datum([{values:[{"label":"One","value":29.765957771107},{"label":"Two","value":0.0},{"label":"Three","value":32.807804682612}]}])

All I did was take [what you had] and make it [{values:[what you had]}]

Upvotes: 1

Related Questions