D3.js and AngularJS Group Bar Chart

AngularJs + d3Js + bar chart example usign directives

by Abhishek Hingu

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<div ng-app="myApp" ng-controller="Ctrl">
    <d3-location-trend-chart group-chart-data="myData" width="400" height="400"></d3-location-trend-chart>
</div>

CSS

body {
    font: 11px sans-serif;
}
.axis path, .axis line {
    fill: none;
    stroke: steelblue;
    opacity: 0.5;
}
.line {
    fill: none;
    stroke: steelblue;
    stroke-width: 1.5px;
}

JavaScript

angular.module('myApp', []).
directive('d3LocationTrendChart', function ($parse) {
    return {
        restrict: 'AE',
        scope: {
            groupChartData: '='
        },
        link: function (scope, element, attrs) {
            scope.$watch('groupChartData', function (newVal, oldVal) {
                var canvasId = scope.canvasId;
                var chartTitle = scope.chartTitle;
                var chartData = scope.groupChartData;
                var chartDataCount = chartData.length - 1;

                var monthformat = d3.time.format("%B");
                var yearformat = d3.time.format("%Y");

                var quarter = function (date, i) {
                    debugger;
                    if (i >= 0) {
                        var date2 = new Date();
                        date2.setMonth(date.getMonth() - 1);
                        q = Math.ceil((date2.getMonth()) / 3);
                        return "Q" + q;
                    }
                }

                var seriesColors = ["#2D9DC0", "#48AF24", "#E22400", "#8A8D8D"];
                var seriesLineStrokes = ["3px", "2px", "2px", "1px"];
                var seriesPointShapes = ["circle", "circle", "square", "diamond"];
                var seriesPointWidth = ["5", "4", "8", "8"];
                var seriesPointFill = ["white", "white", "white", "white"];
                var xLabel = "date";

                var margin = {
                    top: 40,
                    right: 80,
                    bottom: 50,
                    left: 50
                };

                var canvasWidth = d3.select(element[0]).attr("width");
                var canvasHeight = d3.select(element[0]).attr("height");
                var width = canvasWidth - margin.left - margin.right;
                var height = canvasHeight - margin.top - margin.bottom;
                var yearformat = d3.time.format("%Y");

                var parseDate = d3.time.format("%Y%m%d").parse;

               ...