novus / nvd3

A reusable charting library written in d3.js
http://nvd3.org/
Other
7.22k stars 2.15k forks source link

Applying color for Pie chart which is coming from data #652

Closed sr77in closed 9 years ago

sr77in commented 10 years ago

Hi, I tried the 'LiveCode' http://nvd3.org/livecode/index.html#codemirrorNav I tried with Pie Chart.

Modified code like this : JavaScript

nv.addGraph(function() {

var chart = nv.models.pieChart()

  .x(function(d) { return d.label })
  .y(function(d) { return d.value })
  .showLabels(true) ;

d3.scale.myColors = function() { return d3.scale.ordinal().range(function(d) {return d.color}); };

chart.color(d3.scale.myColors().range());

d3.select("#chart svg")
    .datum(data)
  .transition().duration(1200)      
    .call(chart);

return chart; });

and JSON like follows


[ { "label": "One", "value" : 29.765957771107, "color":"#28aabb" } , { "label": "Two", "value" : 9, "color": "#bb5599" } , { "label": "Three", "value" : 32.807804682612, "color":"#88aabb" } , { "label": "Four", "value" : 196.45946739256, "color":"#700abb" } , { "label": "Five", "value" : 0.19434030906893, "color":"#2855bb" } , { "label": "Six", "value" : 98.079782601442, "color":"#a8aa88" } , { "label": "Seven", "value" : 13.925743130903, "color":"#f8aa55" } , { "label": "Eight", "value" : 5.1387322875705, "color":"#a8aa33" } ]


It's showing colors in legends but not affecting the graph. What I have to do for fixing the issue? Thanks Shine

liquidpele commented 9 years ago

chart.colors() expects an array of colors, where the indexes correlate to the indexes of data. Try passing just a simple array you build from the data array...

However, I really like the idea of specifying color with the data! I'll have to integrate that as an option that "just works" in my fork: https://github.com/liquidpele/nvd3/tree/development

liquidpele commented 9 years ago

Closing for now, please provide a jsfiddle or plunkr example if the issue persists with the latest version of nvd3, thanks!