CODEWITHSUNDEEP
javascriptd3.jsdc.js
MBehtemam
MBehtemam

Reputation: 7919

Creating Column Chart with DC.js

I want to create a column chart with DC.js like below image : enter image description here

and my Data is like this :

var data =[
  {name:'Venezuela',sale:300},
  {name:'Saudi',sale:253},
  {name:'Canada',sale:150},
  {name:'Iran',sale:125},
  {name:'Russia',sale:110},
  {name:'UAE',sale:90},
  {name:'US',sale:40},
  {name'China',sale:37}
]

i try to create but i don't know exactly what happen.i don't know how to draw x-Axis or y-Axis.i search and find some example,but in that examples all the x-axis is time sole it use .x(d3.time.scale() but my x-axis is not time and i don't know how to control it.

Update

adding color to chart 

 var colorScale = d3.scale.ordinal().range(['#DB0A5B','#F62459','#F1A9A0','#2C3E50','#26A65B','#E87E04','#D35400']);
 chart.colors(d3.scale.ordinal().range(colorScale);

Upvotes: 2

Views: 1239

Answers (1)

DJ Martin
DJ Martin

Reputation: 2579

Here is a quick sample to get you started: http://jsfiddle.net/djmartin_umich/s9c84/

chart
.height(300)
.width(800)
.dimension(countryDimension)
.group(countryGroup)

As Gordon said, you need to set an ordinal scale:

.x(d3.scale.ordinal().domain(countries))
.xUnits(dc.units.ordinal)

Here is how you can manage the axis labels:

.xAxisLabel("MMbbl = one million barrels")
.yAxisLabel("Reserves (MMbbl)")
.elasticY(true)
.xAxis().ticks(3);

This will get you to a graph like this:

enter image description here

Like Gordon mentioned, you will need to use a renderlet to control there colors. The example fiddle is updated with this code:

 chart
    .renderlet(function(chart){
        debugger;
    var colors = d3.scale.ordinal().domain(countries)
        .range(["steelblue", "brown", "red", "green", "yellow", "grey", "blue", "black"]);
    chart.selectAll('rect.bar').each(function(d){
         d3.select(this).attr("style", "fill: " + colors(d.data.key));
});

Upvotes: 1

Related Questions