score:0

You can create a directive and use that directive in your htmls..sample code provided here

Directive: 

  angularAMD.directive('graphDirective', function () {
        return {
            restrict: 'E',
            template: '<div></div>',
            scope: {
                chartData: "=value",
                chartObj: "=?",
                page: "=",
            },
            transclude: true,
            replace: true,
            link: function ($scope, $element, $attrs) {
                // Update when charts data changes
                $scope.$watch('chartData', function (value) {
                    if (!value) {
                        return;
                    }
                        var graphData = {
                            chart: {
                                type: 'area',
                                marginLeft: 65,
                                marginRight: 1,
                                marginBottom: 40,
                                plotBackgroundColor: '#FFF',
                                backgroundColor: 'transparent',
                                plotBorderWidth: 1,
                                plotBorderColor: '#CCC',
                                animation: false,
                                renderTo: $element[0]
                            },
                            legend: {
                                enabled: true,
                                align: 'right',
                                verticalAlign: 'top',
                                layout: 'horizontal',
                                backgroundColor: '#FFF',
                                borderColor: '#FFF',
                                borderWidth: 1,
                                symbolHeight: 20,
                                symbolWidth:20
                            },
                            title: {
                                text: ''
                            },
                            credits: {
                                enabled: false
                            },
                            xAxis: {
                                min: 0,
                                categories: [],
                                title: {
                                    margin: 0,
                                },
                                tickInterval: 1,
                                tickmarkPlacement: 'on',
                                gridLineWidth: 1,
                                gridLineColor: '#bbb',
                                alternateGridColor: '#FFF',
                                gridZIndex: 1,
                                startOnTick: true,
                                endOnTick: false,
                                minPadding: 0,
                                maxPadding: 0,
                                lineWidth: 1
                            },
                            yAxis: {
                                // min: 0,
                                title: {
                                    margin: 10,
                                    text: 'Target'
                                },
                                labels: {
                                    formatter: function () {
                                        return this.value;
                                    }
                                },
                                gridLineWidth: 1,
                                gridLineColor: '#ddd',
                                lineWidth: 1,
                                tickInterval: 10
                            },
                            plotOptions: {
                                series: {
                                    states: {
                                        hover: ''
                                    },
                                },
                                area: {
                                    //pointStart: 5,
                                    marker: {
                                        enabled: true,
                                        symbol: 'circle',
                                        radius: 4,
                                        lineWidth: 2,
                                        lineColor: '#FFF',
                                        states: {
                                            hover: {
                                                enabled: true
                                            }
                                        }
                                    }
                                }
                            },
                            series: [
                               {
                                   animation: false,
                                   fillOpacity: 0.4,
                                   name: 'Actual',
                                   color: "#5F8605",
                                   data: [],
                                   connectNulls: true
                               },
                               {

                                    animation: false,
                                    fillOpacity: 0.4,
                                    name: 'Strech Goal',
                                    color: "#61DDD3",
                                    data: [],
                                    connectNulls: true
                                },
                                {
                                    animation: false,
                                    fillOpacity: 0.4,
                                    name: 'Goal',
                                    color: "#31ABEA",
                                    data: [],
                                    connectNulls: true
                                }
                            ]
                        };
                        graphData.series[0].data = $scope.chartData.series[0].data;
                        graphData.series[2].data = $scope.chartData.series[2].data;
                        graphData.series[1].data = $scope.chartData.series[1].data;
                        graphData.yAxis.min = $scope.chartData.yAxis.min;
                        graphData.yAxis.max = $scope.chartData.yAxis.max;
                        graphData.xAxis.categories = $scope.chartData.xAxis.categories;
                        graphData.yAxis.title.align = 'high';
                        graphData.yAxis.title.offset = -15;
                        graphData.yAxis.title.rotation = 0;
                        graphData.yAxis.title.y = -10;
                        graphData.xAxis.min = graphData.xAxis.min;
                        graphData.xAxis.max = $scope.chartData.xAxis.max;
                        graphData.xAxis.labels = {
                            formatter: function () {...}
                        };
                        graphData.tooltip = {
                            formatter: function () {..}
                        };                       
                        $scope.chartObj = new Highcharts.Chart(graphData);
                    }
                }, true);
            }
        };
    });

In HTML: 

<graph-directive class="cls" page="ctrl.graphPlottingPage"   value='ctrl.graphData'></graph-directive >

each graphData you can set via your controllers

score:3

A super simple option for your case is a 'common' controller with 'loadDataChart1' functionality.

//Step 1 
app.controller('CommonChartsController', function($scope) {
    $scope.createCharts = function (dataMale, dataFem) {    
      var chartProfiles = $('#container').highcharts();

      obj_female =  JSON.parse('{ "data":' + dataFem + ' }');
      obj_male =  JSON.parse('{ "data":' + dataMale + ' }');

      chartProfiles.series[0].update(obj_female);    
      chartProfiles.series[1].update(obj_male);
  };      
}
               
//Step 2
app.controller('MainController', function($scope, $controller) {

    $controller('CommonChartsController', {
        $scope: $scope               
    });

    Item.Rest("datePerUser",null).then(function(totalDatePerUser){
        var objectDate = totalDatePerUser.data;

        var femDate = objectDate.Chart1Fem;
        var mascDate = objectDate.Chart1Masc;    

        $scope.createCharts(mascDate, femDate);            
    });
}

//Step 3
app.controller('MenuController', function($scope, $controller) {

    $controller('CommonChartsController', {
        $scope: $scope               
    });

    PeriodItem.Rest("datePerUser_",Obj).then(function(datePerUserTeste){
      var objectDate = datePerUserTeste.data;

      newFemDate = objectDate.Chart1Fem;
      newMaleDate = objectDate.Chart1Masc;    

      $scope.createCharts(newMaleDate, newFemDate);
    }); 
}


Related Query

More Query from same tag