NVD3 Bar Chart Constant Colors by ramnathv

index.html

<!doctype HTML>
<meta charset = 'utf-8'>
<html>
  <head>
    <link rel='stylesheet' href="//netdna.bootstrapcdn.com/bootswatch/2.3.1/cosmo/bootstrap.min.css">
     <link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-responsive.min.css" >
    <link rel='stylesheet' href="//getbootstrap.com/2.3.2/assets/js/google-code-prettify/prettify.css">
    <link rel='stylesheet' href="//aozora.github.io/bootplus/assets/css/docs.css">
    <link rel='stylesheet' href='//nvd3.org/src/nv.d3.css'>
    
    <script src='//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>
    <script src='//d3js.org/d3.v2.min.js' type='text/javascript'></script>
    <script src='//nvd3.org/nv.d3.js' type='text/javascript'></script>
    <script src='//nvd3.org/lib/fisheye.js' type='text/javascript'></script>
    
    <style>
    .rChart {
      display: block
      margin: auto auto;
      width: 100%;
      height: 400px;
    }
    /*
    body {
      margin-top: 60px;
    }
    */
    </style>
    
  </head>
  <body>
    <div class='container'>
      <div class='row'>
        <div class='span8'>
          <div class="bs-docs-example">
            <div id='chart1118431a8a4e3' class='rChart nvd3'>
            </div> 
          <br/>
<pre><code class='r'>data(cars) 
speedTableVec &lt;- table(cars$speed) 
speedTable &lt;- data.frame(speedTableVec)
require(rCharts)
n1 &lt;- nPlot(Freq ~ Var1, data = speedTable, type=&quot;discreteBarChart&quot;)
n1$chart(color = &quot;#! function(d){ return 'blue'} !#&quot;)
n1
</code></pre>
</div>
        </div>
      </div>
    </div>
      
    <script type='text/javascript'>
 $(document).ready(function(){
      drawchart1118431a8a4e3()
    });
    function drawchart1118431a8a4e3(){  
      var opts = {
 "dom": "chart1118431a8a4e3",
"width":    700,
"height":    400,
"x": "Var1",
"y": "Freq",
"type": "discreteBarChart",
"id": "chart1118431a8a4e3" 
},
        data = [
 {
 "Var1": "4",
"Freq": 2 
},
{
 "Var1": "7",
"Freq": 2 
},
{
 "Var1": "8",
"Freq": 1 
},
{
 "Var1": "9",
"Freq": 1 
},
{
 "Var1": "10",
"Freq": 3 
},
{
 "Var1": "11",
"Freq": 2 
},
{
 "Var1": "12",
"Freq": 4 
},
{
 "Var1": "13",
"Freq": 4 
},
{
 "Var1": "14",
"Freq": 4 
},
{
 "Var1": "15",
"Freq": 3 
},
{
 "Var1": "16",
"Freq": 2 
},
{
 "Var1": "17",
"Freq": 3 
},
{
 "Var1": "18",
"Freq": 4 
},
{
 "Var1": "19",
"Freq": 3 
},
{
 "Var1": "20",
"Freq": 5 
},
{
 "Var1": "22",
"Freq": 1 
},
{
 "Var1": "23",
"Freq": 1 
},
{
 "Var1": "24",
"Freq": 4 
},
{
 "Var1": "25",
"Freq": 1 
} 
]
  
      var data = d3.nest()
        .key(function(d){
          return opts.group === undefined ? 'main' : d[opts.group]
        })
        .entries(data)
      
      nv.addGraph(function() {
        var chart = nv.models[opts.type]()
          .x(function(d) { return d[opts.x] })
          .y(function(d) { return d[opts.y] })
          .width(opts.width)
          .height(opts.height)
         
        chart
  .color( function(d){ return 'blue'} )
          
        

        
        
        
      
       d3.select("#" + opts.id)
        .append('svg')
        .datum(data)
        .transition().duration(500)
        .call(chart);

       nv.utils.windowResize(chart.update);
       return chart;
      });
    };
</script>
    
  </body>
  <!-- Google Prettify -->
  <script src="//cdnjs.cloudflare.com/ajax/libs/prettify/188.0.0/prettify.js"></script>
  <script 
    src='https://google-code-prettify.googlecode.com/svn-history/r232/trunk/src/lang-r.js'>
  </script>
  <script>
    var pres = document.getElementsByTagName("pre");
    for (var i=0; i < pres.length; ++i) {
      pres[i].className = "prettyprint linenums";
    }
    prettyPrint();
  </script>
</html>

code.R

data(cars) 
speedTableVec <- table(cars$speed) 
speedTable <- data.frame(speedTableVec)
require(rCharts)
n1 <- nPlot(Freq ~ Var1, data = speedTable, type="discreteBarChart")
n1$chart(color = "#! function(d){ return 'blue'} !#")
n1