HighCharts is undefined because multiple Html pages in Javascript file

Question

I'm trying to get a div id called "container" like this:

var chart = $(#container).highcharts();

It works perfectly when I call by a controller that is defined in my html page. But When I try to call this function by another controller which is not referred by my Html page, it isn't working.

SO, How can I call my div inside other controller which is associate in other html page?

Example:

It works and is defined in my controller "main" which is defined in my html page "main.html"

    Item.Rest("datePerUser",null).then(function(totalDatePerUser){

        var objectDate = totalDatePerUser.data;

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

        loadDataChart1(mascDate, femDate);            

    });

It isn't work and is defined in my controller "menu" which is defined in my html page "menu.html"

    PeriodItem.Rest("datePerUser_",Obj).then(function(datePerUserTeste){

                      var objectDate = datePerUserTeste.data;

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

                      loadDataChart1(newMaleDate, newFemDate);

                  });

A both call the follow function

function loadDataChart1(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);

}

Just to information, I'm using angularJS with Rest Service, to get data from DB, and I have multiple Html pages.

Maybe this SO topic will help you: http://stackoverflow.com/questions/9293423/can-one-controller-call-another — Grzegorz Blachliński, Aug 16 '16 at 09:23
Thank you for your Answer. Unfortunately I've tried it before, but, it does not work because I can't emit an event to a controller which is not defined in my html page. — Alisson Ravaglio Santos, Aug 17 '16 at 14:02
There's no glaring issue with your code. If it were me, I'd set breakpoints where I expected `.highcharts()` to be defined, and investigate from there. If I had to guess, I'd say that you're loading highcharts after you load angular and/or it's a timing thing. — adamdport, Aug 18 '16 at 18:36
What do you mean the controller is not in the same page? Do you mean a different view\partial, or is it literally a different angular app on a different html document? — I think I can code, Aug 20 '16 at 02:59
Is your menu a section in your main html page? I am guessing the menu is a part of your main page and you want to share control of the chart. If so, using the menu controller within a directive and binding the chart using bind to controller should give the controller access to the chart. Is there a reason you aren't parsing the JSON and building/updating the chart data series in a factory that you can share between controllers? Then you can just make calls to the factory to update the data and have a listener in your main controller to a factory event that updates the chart on changes. — Jinw, Aug 20 '16 at 09:29

Stanislav Ostapenko · Answer 1 · 2016-08-25T22:43:37.307

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);
    }); 
}

Also, you can create a directive for 'loadDataChart1' functionality. — Stanislav Ostapenko, Aug 23 '16 at 23:25

score 0 · Answer 2 · answered Aug 24 '16 at 06:37

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

HighCharts is undefined because multiple Html pages in Javascript file

2 Answers2