CODEWITHSUNDEEP
angularjshighchartsangularjs-directiveangularjs-scope
Aj1
Aj1

Reputation: 973

Render Two charts separate charts using angular js directives

I am trying to render two seperate charts using seperate directives for each charts, since the data is different ( also I am no expert in AngualrJs ). But only one chart was rendering to view. Please can someone help with what I have to do so that I can see both charts.Thanks.

'use strict';

angular.module('AngularApp',['AngularApp.directives']);

/*Controllers*/

 var HighChartController = function HighChartController($scope) {

$scope.templateUrl = '/_layouts/AngularControls/TestController/View2.html';
$scope.type = '107';


$scope.initData = function () {
    $scope.data = [
 ['Fire', 47.0],
 ['Wind', 33.0],
 ['Natural', 20.0]
 ];

}
$scope.loadChart = function () {

    $scope.data1 = [60];
    $scope.data2 = [40];
}

$scope.initData();
$scope.loadChart();
}

 /* Directives */

 angular.module('AngularApp.directives', []).

  directive('drawPieChart', function () {

    return function (scope, element, attrs) {

        var container = $(element).attr("id");
        scope.$watch('data', function () {
            console.log('data');
            drawPlot();
        }, true);

        var drawPlot = function () {
            var chart;
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: container,
                    margin: [0, 0, 0, 0],
                    spacingTop: 0,
                    spacingBottom: 0,
                    spacingLeft: 0,
                    spacingRight: 0
                },
                title: {
                    text: null
                },
                credits: {
                    enabled: false
                },

                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage}%</b>',
                    percentageDecimals: 1
                },
                plotOptions: {
                    pie: {
                        size: '100%',
                        dataLabels: {
                            enabled: false
                        }
                    }
                },
                series: [{
                    type: 'pie',
                    name: 'Browser share',
                    data: scope.data
                }]
            });


        }


    }
});

angular.module('AngularApp.directives', []).

directive('drawBarChart', function () {

    return function (scope, element, attrs) {

        var container = $(element).attr("id");
        scope.$watch('data', function () {
            drawPlot();
        }, true);

        var drawPlot = function () {
            var chart = new Highcharts.Chart({
                chart: {
                    type: 'column',
                    renderTo: container,
                    marginRight: 50,
                    events: {

                    }
                },
                title: {
                    text: 'Test Scores',
                    style: {
                        color: 'black',
                        fontWeight: '700',
                        fontFamily: 'Arial',
                        fontSize: 20
                    }
                },
                xAxis: {
                    categories: [],
                    title: {
                        text: null
                    },
                    gridLineWidth: 0,
                    minorGridLineWidth: 0,
                    labels: {
                        style: {
                            color: 'black',
                            fontWeight: '700',
                            fontFamily: 'Arial',
                            fontSize: 11,
                            width: 90
                        }
                    }
                },
                yAxis: {
                    min: 0,
                    max: 100,
                    gridLineWidth: 0,
                    minorGridLineWidth: 0,
                    labels: {
                        enabled: false
                    },
                    title: {
                        text: null
                    }
                },
                tooltip: {
                    valueSuffix: ' million'
                },
                plotOptions: {
                    series: {
                        stacking: 'percent'
                    },
                    bar: {
                        dataLabels: {
                            enabled: false
                        }
                    }
                },
                legend: {
                    enabled: false,
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'bottom',
                    x: -40,
                    y: 100,
                    floating: true,
                    borderWidth: 1,
                    backgroundColor: '#FFFFFF',
                    shadow: true
                },
                credits: {
                    enabled: false
                },
                series: [{
                    name: 'null',
                    data: scope.data2,
                    borderRadius: 0,
                    color: "gray"
                }, {
                    name: 'Values',
                    data: scope.data1,
                    color: "green",
                    borderRadius: 0
                }]
            });
        }
    }

});

Here is the markup

 <div id="barChartContainer" draw-bar-chart =""></div>
 </div>
 <div id="pieChartContainer" draw-pie-chart="">
 </div>

Upvotes: 1

Views: 2413

Answers (2)

JoseM
JoseM

Reputation: 4302

As Oledje mentioned, you declared the AngularApp.directives twice, but there was also an issue with how you are actually referencing the data for the charts in the directive code. I would recommended that you create an isolated scope for each directive and map the properties for the chart data in the scope definition.

So instead of 

  .directive('drawPieChart', function () {

    return function (scope, element, attrs) {

        var container = $(element).attr("id");
        scope.$watch('data', function () {
            console.log('data');
            drawPlot();
        }, true);

        var drawPlot = function () {...};
     };
  }

You should do

  .directive('drawPieChart', function () {

    return {
       restrict: 'E',
       scope: {
           chartData: "="
       },
       link: function (scope, element, attrs) {

         scope.$watch('chartData', function (newVal,oldVal) {
             if (newVal) {
                  drawPlot();
             }
         }, true);
         var drawPlot = function () {
             // use scope.chartData for the data
         };
       }
    };
  }

And then you also need the corresponding HTML

<draw-pie-chart chart-data="pieChartData">

And in your Controller do $scope.pieChartData=[];

Here is a jsFiddle with all of my changes: http://jsfiddle.net/callado4/9far5/5/ (look at the history to see how I progressed)

Upvotes: 1

Goodnickoff
Goodnickoff

Reputation: 2267

I think that your problem is that you declare a module twice.

try write not

angular.module('AngularApp.directives', []).
directive('drawPieChart'...)

angular.module('AngularApp.directives', []).
directive('drawBarChart'...)

but

angular.module('AngularApp.directives', []).
directive('drawPieChart'...).
directive('drawBarChart'...)

or

var app = angular.module('AngularApp.directives', []);
app.controller('Ctrl', ...)
app.directive('drawPieChart'...);
app.directive('drawBarChart'...);

Examples:

http://jsfiddle.net/GDQ6B/2/

http://jsfiddle.net/EYz9U/1/

Upvotes: 1

Related Questions