bar group

by abenrob

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<div ng-app="MyApp">
    <div class="chartbox" ng-controller="MyController">
         <div 
            vcichart 
            chart-width="cWidth"
            chart-height="cHeight"
            chart-data="data"
            chart-palette="cPalette"
        ></div>
    </div>
</div>

CSS

.chartbox {
    width: 300px;
    height: 200px;
}
svg text {
    fill: #777;
    font-size: 12px;
    font-family: sans-serif;
    font-weight: 200;
}
.axis path,
.axis line {
  fill: none;
  stroke: #777;
  shape-rendering: crispEdges;
}
.x.axis path {
  display: none;
}

JavaScript

var myApp = angular.module('MyApp', []);
myApp.directive('vcichart', function () {
        
		var link = function (scope, elem, attrs) {
            
            var shell = d3.select(elem[0].parentNode)[0][0];
            shHeight = shell.clientHeight;
            shWidth = shell.clientWidth;
            var margin = {top: 20, right: 20, bottom: 30, left: 40},
                width = (scope.chartWidth || shWidth) - margin.left - margin.right,
                height = (scope.chartHeight || shHeight) - margin.top - margin.bottom;
            
            var defaultPalette = ['rgb(255,0,0)','rgb(0,255,0)','rgb(0,0,255)'];
            
            var svg = d3.select(elem[0]).append("svg")
                .attr("width", width + margin.left + margin.right)
                .attr("height", height + margin.top + margin.bottom)
              .append("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
            
            function makeChart(data){
                // clear out old if exists
                svg.selectAll('*').remove();
                
                // Set the ranges
                var x0 = d3.scale.ordinal()
                    .rangeRoundBands([0, width], .1);
                var x1 = d3.scale.ordinal();
                var y = d3.scale.linear()
                    .range([height, 0]);
                
                // set colors
                var color = d3.scale.ordinal()
                    .range(scope.chartPalette || defaultPalette);
    
                // set x axis
                var xAxis = d3.svg.axis()
                    .scale(x0)
                    .orient("bottom");;
                
                var yAxis = d3.svg.axis()
                    .scale(y)
                    .orient("left")
                    .tickFormat(d3.format(".2s"));
                
                svg
                    .attr("width", width + margin.left + margin.right)
                    .attr("height",...