ChartJS Directives

directive.js

angular.module("ITApp").directive('diskspacevisulization', function () {

    return {
        restrict: 'E',
        //template: '<canvas height=\"200\" width=\"200\" id=\"{{dsName}}\"></canvas>',
        replace: true,
        scope: {
            dsdata: '=',
            dsName: '@name'
        },
        link: function (scope, element, attrs) {

            element.append('<div style=\"float: left; width:200px; \"><canvas height=\"200\" width=\"200\"></canvas><span style="text-align: center;\"></span></div>');
            var dsChart = element.children()[0].children[0];
            var dsChartTitle = element.children()[0].children[1];

            scope.$watch('dsData', function () {
                dsChartTitle.innerHTML = scope.dsdata.diskName + ' - ' + scope.dsdata.freeSpace + 'GB Free';
                var cData = [{ value: (scope.dsdata.pctFree * 100), color: "#01DF01" }, { value: 100 - (scope.dsdata.pctFree * 100), color: "#FF0000" }]
                var ctx = dsChart.getContext('2d');
                var chart = new Chart(ctx).Pie(cData);
            });
            
        }
    };
});