CODEWITHSUNDEEP
javascripthighcharts
user3175030
user3175030

Reputation: 259

Highcharts saying undefined is not a function when trying to add a new chart

I'm trying to put highcharts into my angular app. I'm getting my data from Google Sheets and returning a promise object from the call to google. I then call the Highcharts.Chart() method with my options object.

I get the error below when making the call. I've tried to figure out what's going on but I am currently lost. I have a prototype that I do not use angular and the chart works great. When I go and add the line new Highcharts.Chart(options) I get the error below. I remove that line the error goes away.

Any thoughts/help would be great!

Error:

TypeError: undefined is not a function
    at Object.Chart.init (/highcharts.src.js:11014:4)
    at Object.Chart (/highcharts.src.js:10937:12)
    at data.then.$scope.sheetdata (/js/controllers/controlChartCtrl.js:11:17)
    at wrappedCallback (/angularjs/1.2.6/angular.js:10905:81)
    at /angularjs/1.2.6/angular.js:10991:26
    at Scope.$eval (/angularjs/1.2.6/angular.js:11906:28)
    at Scope.$digest (/angularjs/1.2.6/angular.js:11734:31)
    at Scope.$delegate.__proto__.$digest (<anonymous>:844:31)
    at /angularjs/1.2.6/angular.js:11945:26
    at completeOutstandingRequest (/angularjs/1.2.6/angular.js:4098:10)

Partial: 

Features:
<div id="feature"></div>

Controller: 

angular.module('controlChartCtrl', []).
  controller('ControlChartCtrl', ['$scope', 'GoogleService', function($scope, GoogleService) {
    var data = GoogleService.getData();
    $scope.helloworld = "hello world!";
    data.then(function (data) {
        // create charts here
        var options = getOptionsForChart('Feature', 'feature', data);
        var chart = new Highcharts.Chart(options);
    }, function (error) {
        $scope.sheetdata = error;
    });

    var getOptionsForChart = function (title, div, data) {
        return {
            chart: {
                renderTo: div,
                type: 'line'
            },
            title: {
                text: title + ' Control Chart'
            },
            xAxis: {
                title: {
                    text: 'End Dates'
                },
                categories: data.endDates
            },
            yAxis: {
                title: {
                    text: 'Lead Time'
                }
            },
            series: [{
                name: 'Lead Time',
                data: data.leadTimes
            }]
        };
    } 

}]);

Upvotes: 10

Views: 16804

Answers (2)

mikemaccana
mikemaccana

Reputation: 123058

Highcharts does not require JQuery to work (the current answer is wrong), however you need to load the 'standalone framework' library first:

define([
    'vnd/highcharts/standalone-framework',
    'vnd/highcharts/highcharts',
], function(){
    ...
}

See @Sebastian's jsfiddle for a demo: http://jsfiddle.net/highcharts/aEuGP/

Upvotes: 10

user3175030
user3175030

Reputation: 259

I resolved the issue. The solution is as follows.

Highcharts requires jQuery to function correctly. When I added the jquery.js file above the highcharts.js file the angular application started to work correctly.

Thanks for the feedback!

Upvotes: 15

Related Questions