highchart with angular and ionic framework error

Question

I want to make a graph on my web app.

I don't understand how angular with highcharts works.

I use this lib : github.com/pablojim/highcharts-ng and this framework : ionicframework.com/

I think it can be the same with apache cordova.

I made a simple page with :

<highchart id="chart1" config="chartConfig"></highchart>

then, on my app.js :

var app = angular.module('myApp', ['ionic', 'ui.router', 'highcharts-ng']);

then on my controller js page :

angular.module('myApp').controller('Dashboard',....) 
{
    $scope.chartConfig = {
        options: {
            chart: {
                type: 'bar'
            }
        },
        series: [{
            data: [10, 15, 12, 8, 7]
        }],
        title: {
            text: 'Hello'
        },

        loading: false
    };

}

and of course : no graph, an error on the js console :

TypeError: undefined is not a function
    at Object.Xa.init (http://localhost:63342/www/js/highcharts.js:190:242)
    at Object.Xa (http://localhost:63342/www/js/highcharts.js:15:293)
    at link.m (http://localhost:63342/www/js/highcharts-ng.min.js:8:2964)
    at link (http://localhost:63342/www/js/highcharts-ng.min.js:8:3058)
    at http://localhost:63342/www/lib/ionic/js/ionic.bundle.js:15996:44
    at nodeLinkFn (http://localhost:63342/www/lib/ionic/js/ionic.bundle.js:15605:13)
    at compositeLinkFn (http://localhost:63342/www/lib/ionic/js/ionic.bundle.js:15009:15)
    at nodeLinkFn (http://localhost:63342/www/lib/ionic/js/ionic.bundle.js:15599:24)
    at compositeLinkFn (http://localhost:63342/www/lib/ionic/js/ionic.bundle.js:15009:15)
    at compositeLinkFn (http://localhost:63342/www/lib/ionic/js/ionic.bundle.js:15012:13) <div id="chart1" config="chartConfig">

My questions :

If I put the dependency on

angular.module('myApp', ['highcharts-ng']).controller('Dashboard',....)

blank page, so I assume that it's on app.js only.... right or wrong ?

How to solve my problem ?

PS : To JSFiddle or CodePen user, here is your graal : http://codepen.io/anon/pen/ateyI

Is not exactly my project but reproduce this problem. Thanks !

At the beginning, attach a jquery, but next error is in te ionic.bundle.js 30705 line, so maybe update ionic framework. — Sebastian Bochan
– Sebastian Bochan, Commented Sep 1, 2014 at 12:08

Rahul · Accepted Answer · 2014-08-29 18:24:09Z

2

Debug it using chrome's web inspector. For me, when i had the same error, the addEvent function was the culprit. Checking the definition made me realise that I had forgotten to include jquery. I suspect it's the same case for you.

answered Aug 29, 2014 at 18:24

Rahul

4121 gold badge4 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vlad Bezden · Accepted Answer · 2015-02-05 16:09:57Z

1

Have you included standalone-frameform.js?

<script src="lib/highcharts-release/adapters/standalone-framework.js"></script>

Hope this will help.

answered Feb 5, 2015 at 16:09

Vlad Bezden

90.8k27 gold badges261 silver badges190 bronze badges

Comments

Deurco · Accepted Answer · 2015-02-05 16:22:17Z

1

Vlad is right. You need to include standalone-framework.js. Moreover, you don't need to load Angular, since the Ionic Bundle includes it.

So, the scripts are:

<script src="http://code.ionicframework.com/1.0.0-beta.10/js/ionic.bundle.js"></script>
<script src="http://code.highcharts.com/adapters/standalone-framework.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="https://rawgit.com/pablojim/highcharts-ng/master/src/highcharts-ng.js"></script>

Here is a working version of your Codepen: http://codepen.io/anon/pen/VYrvvV

answered Feb 5, 2015 at 16:22

Deurco

5302 silver badges8 bronze badges

2 Comments

zambono Over a year ago

It needs to be clearer in highcharts documentation that you need both highcharts.js and standalone framework included

Deurco Over a year ago

@zambono Note that it's the case only if you don't include jQuery in your page, as stated in the "Installation" page of the documentation (option 2). It is true, though, that mentioning it in the README of highcharts-ng would be useful. I just submitted a pull request :)

Collectives™ on Stack Overflow

highchart with angular and ionic framework error

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related