Angular and Ionic Framework Highchart: Troubleshooting the Issue

I am trying to create a graph on my web application.

However, I am struggling to understand how to integrate Angular with Highcharts.

I am utilizing the highcharts-ng library from github.com/pablojim and the Ionic framework from ionicframework.com.

I believe the process would be similar with Apache Cordova.

So far, I have created a basic page with :

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

Then, in my app.js file :

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

Next, in my controller JS file :

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

        loading: false
    };

}

Despite setting everything up correctly, there is no graph displayed, and an error appears on the 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 queries are:

  • If I include the dependency on 

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

The page remains blank, leading me to think that the issue lies only in the app.js file...is this assumption correct?

  • How can I resolve this problem?

    • PS : For JSFiddle or CodePen users, you can find a working example here: http://codepen.io/anon/pen/ateyI

    This may not be an exact replica of my project but it illustrates the same issue. Thank you!

    javascriptangularjscordovahighcharts

    Answer №1

    Try troubleshooting by utilizing Chrome's web inspector tool. In my experience, I encountered a similar error caused by the addEvent function. Upon inspecting the code definition, I discovered that I neglected to properly include jquery. It seems like this may be the issue you are facing as well.

    Answer №2

    Did you remember to add standalone-frameform.js?

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

    I trust this information will be useful.

    Answer №3

    It's important to take note of Vlad's advice, which is to make sure you include standalone-framework.js in your code. Additionally, there is no need to load Angular separately as it is already included in the Ionic Bundle.

    Therefore, the necessary scripts to include 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>

    If you'd like to see a working example of your Codepen, you can check it out here: http://codepen.io/anon/pen/VYrvvV

    Similar questions

    If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

    Adding Parameters to an Angular Service

    I am facing a challenge that I can't seem to solve (I apologize for the multitude of questions, but Angular is really challenging me). Here is my Controller: friendsApp.controller('friendsController', ['$scope','friendsFacto ...

    angularjs

    Utilizing JavaScript functions within Django framework

    I'm in the process of developing an app using django. My goal is to create a score counter that increases based on the number of people watching through their webcam. After successfully implementing a function to determine the live audience count, I ...

    javascriptjquerydjango

    AngularJS ng-repeat nested loop allows you to iterate through an array

    I am currently working with the following JSON data: { "ListNhomThanhTra": [ { "ListKeHoachThanhTra": [ { "ListDoiTuong": [ { "MA_DV_DUOC_TT": "DT01", ...

    htmlangularjshtml-table

    How do prototype, the $.extend method, and the concept of "return this" all connect with each other?

    I've been assigned a legacy project, and I find myself puzzled by the purpose of this code. define(['jquery', 'components/BaseComponent', 'bootstrap'], function( $, BaseComponent, bootstrap ) { 'use strict&a ...

    javascriptjquerybackbone.js

    Retrieve the Vue.js JavaScript file from the designated static directory

    This is my inaugural attempt at creating a web application, so I am venturing into Vue.js Javascript programming as a newcomer. I have chosen to work with the Beagle Bootstrap template. Within my Static folder, I have a file named app-charts-morris.js whi ...

    javascripthtmlvue.jsdonut-chart

    Using Angular 4 constructor value in a condition with *ngIf

    Within this TypeScript snippet, there is a variable called moreinfo that is initially set to 1. In the constructor, however, the value of moreinfo is changed to 2. Subsequently, based on whether the value is 1 or 2, different div elements are displayed usi ...

    javascripthtmlangulartypescript

    Instructions for adding a Key every time a user clicks the space Key within an Input field

    I built a Movie Search Page with the OMDB API. My current issue is that the API returns an error when searching for a movie with more than one word because the API URL requires a + key between each word. I am looking for a way to automatically add the + ke ...

    javascripthtmlapiinput

    Sending a JSON array to a WebMethod

    I encountered an issue when attempting to convert an object to a JSON array as a string, resulting in an Internal Server Error. Fortunately, the GetServerTime method is functioning properly. My goal is to send an array of objects to the server and conver ...

    javascriptjqueryjsonc#-4.0webmethod

    Optimizing resources by efficiently adding an event listener on socket.io

    Recently, I've been delving into how JavaScript manages functions. Let's consider an example: io.on("connection", function(socket) { socket.on("hi", function(data) { socket.emit("emit", "hey") }) }) ...

    javascriptnode.jsmemory-managementsocket.ioevent-handling

    Upgrading from angular 1.2 to 1.5

    After migrating from Angular v1.2.26 to either v1.5.0 or v1.4.8, my application suddenly stopped functioning properly. What specific updates in the code of v1.2.26 should I take note of to ensure that the application runs smoothly again? ...

    angularjs

    Guide on crafting a scrollable and touch-responsive grid using CSS and JavaScript

    I am seeking guidance on creating a grid with a variable number of columns and rows. It should be contained within a separate div and should not interfere with other objects or alter the parent's size. The grid needs to be square and I am currently u ...

    javascriptcsslaraveltailwind-csslaravel-livewire

    Deliver the Stripe API response from the backend to the frontend page

    I'm struggling to retrieve the response object from Stripe after creating a subscription using npm. import Stripe from 'stripe'; const key = require("stripe")("XXXXXXXXXXXXXXXXX"); export function subscribe(cus, items) { key.subscription ...

    javascriptnode.jsnpmstripe-paymentsvelo

    Efficiently transfer the array elements by cutting and pasting

    While I am aware that $pull and $push can be used to update array elements in mongodb, I am interested in cutting an element and pasting it to a different index. To illustrate my question, consider the following scenarios: Scenario 1 Starting with the ...

    javascriptarraysnode.jsalgorithmmongodb

    Inquire about the specific Node-RED version from within a function node

    I am seeking to create code within a function node that will check for the Node-RED runtime version number. Depending on the version number, certain parts of the code within this function node may or may not be executed. This is crucial to me as I work wi ...

    javascriptnode.jsruntimeversionnode-red

    Exploring the dynamic changes in user authentication state with Angular Fire subscriptions

    At the moment, I have been listening to authentication state changes in my ngOnInit method of my AppComponent: export class AppComponent implements OnInit { constructor(public fireAuth: AngularFireAuth) { } ngOnInit(): void { this.fireAuth.auth ...

    javascriptangularfirebase-authenticationangularfire2angular11

    What is the significance of property placement in a Mongo query: at the beginning versus at the

    Currently, I am in the process of creating a query to retrieve data from the mango collection. Interestingly, I have written the same query in two different ways. Here is my working query: db.getCollection('routes').find({"routes.routeId": "r1q ...

    javascriptarraysnode.jsmongodbexpress

    Foreign keys in a one-to-many relationship with Sequelize.js

    I am in the process of developing a survey application using Node.js/Express and MySQL incorporating Sequelize.js ORM. However, I am encountering difficulties while establishing the relationship between the two models. My goal is to have the Questions&apo ...

    javascriptmysqlnode.jsexpresssequelize.js

    Vue event emissions are not triggered or detected

    This is the functionality of the Child Component: registerUser() { if (this.$refs.form.validate()) { this.$emit('showLoader', true); // Triggers this.$fireAuth .createUserWithEmailAndPassword(this.email, this.password) .the ...

    javascriptvue.js

    What could be the reason that the MVC controller action method marked as HttpPost is not being triggered by an external JavaScript file?

    Below is the View cshtml code that is relevant: <tbody> @foreach (var job in Model.JobsList) { <tr> <th onclick="OnJobSelected('@job.JobID')">@job.JobTitle</th> <th>@job.Statu ...

    javascriptasp.net-mvcasp.net-mvc-4asp.net-ajax

    Using VueJS to apply filters to an object causes a decrease in my application's performance

    Recently, I've been working on implementing a filter for a search bar. However, I've noticed that whenever I input something into the search bar, there is a noticeable delay as it loads the entries. I'm not sure if this issue is related to ...

    javascriptvue.js