Loading data dynamically in the Highcharts ng library allows for real-time updates to the

I'm currently working on integrating highcharts ng into my Angular project, but I'm encountering issues with data not populating. It seems like there might be a problem related to the loading of the DOM and the function call.

Here's my HTML snippet:

<div style="width: 49%; float:right;"><highchart id="chart12" config="highchartsNG"></highchart></div>

Module section:

myApp = angular.module('myApp', ['LocalStorageModule', 'ui.bootstrap', 'highcharts-ng', 'ngAnimate', 'ui.router', 'angular-loading-bar', 'hc.marked', 'ngToast', 'angularMoment', 'slick', 'app-templates']);

Controller portion:

myApp.controller('ReportController', ['$scope', 'CompanyService', function ($scope, CompanyService) {
    (function () {
        loadReport();
    })();

    function loadReport() {
      CompanyService.getReportData().then(function (data) {
        if (data.status === 200){
            $scope.dates = data.data.date;
            $scope.counts = data.data.count;

            $scope.fetchedData = {
              data: data.data.count
            };
            ...
            
        }
      }, function (error) {

      });
    };

    $scope.dates = ['2017-03-19', '2017-03-18', '2017-03-17', '2017-03-16', '2017-03-15', '2017-03-14', '2017-03-13'];
    $scope.counts = [2,10,20, 25, 5, 15, 8];

  $scope.$watchGroup(['counts', 'dates'], function(newValues, oldValues) {
    ...

}]);

I've consulted resources, but I'm still facing console errors like "TypeError: Cannot set property 'getChartObj' of undefined". I believe a function needs to be triggered after the DOM is fully loaded, which should be handled by the $watchGroup. However, I'm struggling to implement it properly. Any tips or suggestions would be greatly appreciated.

javascriptangularjsajaxhighcharts-ng

Answer №1

Kindly use the code snippet provided below

myApp.controller('ReportController', ['$scope', 'CompanyService', function ($scope, CompanyService) {
  (function () {
    loadReport();
  })();

  $scope.highchartsNG = {
    chart: {
      type: 'column'
    },
    title: {
      text: 'Stacked column chart'
    },
    xAxis: {
      categories: []
    },
    yAxis: {
      min: 0,
      title: {
        text: 'Total count'
      },
      stackLabels: {
        enabled: true,
        style: {
          fontWeight: 'bold',
          color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
        }
      }
    },
    legend: {
      align: 'right',
      x: -70,
      verticalAlign: 'top',
      y: 20,
      floating: true,
      backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
      borderColor: '#CCC',
      borderWidth: 1,
      shadow: false
    },
    tooltip: {
      formatter: function() {
        return '<b>'+ this.x +'</b><br/>'+
        this.series.name +': '+ this.y +'<br/>'+
        'Total: '+ this.point.stackTotal;
      }
    },
    plotOptions: {
      column: {
        stacking: 'normal',
        dataLabels: {
          enabled: true,
          color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
          style: {
            textShadow: '0 0 3px black, 0 0 3px black'
          }
        }
      }
    },
    series: [{
      data: []
    }]
  };

  function loadReport() {
    CompanyService.getReportData().then(function (data) {
      if (data.status === 200){
        $scope.dates = data.data.date;
        $scope.counts = data.data.count;

        $scope.fetchedData = {
          data: data.data.count
        };
      }
    }, function (error) {

    });
  };

  $scope.dates = ['2017-03-19', '2017-03-18', '2017-03-17', '2017-03-16', '2017-03-15', '2017-03-14', '2017-03-13'];
  $scope.counts = [2,10,20, 25, 5, 15, 8];

  // Assign initial values
  $scope.highchartsNG.series[0].data = $scope.counts;
  $scope.highchartsNG.xAxis.categories = $scope.dates;

  $scope.$watchGroup(['counts', 'dates'], function(newValues, oldValues) {
    if(newValues !== oldValues) {
      // Update values only
      $scope.highchartsNG.series[0].data = $scope.counts;
      $scope.highchartsNG.xAxis.categories = $scope.dates;
    }
  });

}]);

Version 2

myApp.controller('ReportController', ['$scope', 'CompanyService', function ($scope, CompanyService) {

  $scope.highchartsNG = {
    chart: {
      type: 'column'
    },
    title: {
      text: 'Stacked column chart'
    },
    xAxis: {
      categories: []
    },
    yAxis: {
      min: 0,
      title: {
        text: 'Total count'
      },
      stackLabels: {
        enabled: true,
        style: {
          fontWeight: 'bold',
          color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
        }
      }
    },
    legend: {
      align: 'right',
      x: -70,
      verticalAlign: 'top',
      y: 20,
      floating: true,
      backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
      borderColor: '#CCC',
      borderWidth: 1,
      shadow: false
    },
    tooltip: {
      formatter: function() {
        return '<b>'+ this.x +'</b><br/>'+
        this.series.name +': '+ this.y +'<br/>'+
        'Total: '+ this.point.stackTotal;
      }
    },
    plotOptions: {
      column: {
        stacking: 'normal',
        dataLabels: {
          enabled: true,
          color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
          style: {
            textShadow: '0 0 3px black, 0 0 3px black'
          }
        }
      }
    },
    series: [{
      data: []
    }]
  };

  $scope.dates = ['2017-03-19', '2017-03-18', '2017-03-17', '2017-03-16', '2017-03-15', '2017-03-14', '2017-03-13'];
  $scope.counts = [2,10,20, 25, 5, 15, 8];

  // Assign initial values
  $scope.highchartsNG.series[0].data = $scope.counts;
  $scope.highchartsNG.xAxis.categories = $scope.dates;

  CompanyService.getReportData().then(function (data) {
    if (data.status === 200){
      $scope.dates = data.data.date;
      $scope.counts = data.data.count;

      $scope.fetchedData = {
        data: data.data.count
      };

      $scope.highchartsNG.series[0].data = $scope.counts;
      $scope.highchartsNG.xAxis.categories = $scope.dates;

    }
  }, function (error) {

  });

}]);

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

Select the hidden HTML option value automatically according to the previous option selected

I am working on a form that includes 2 select tags with the options male and female. The first select, "gender", is visible to the user while the second select, "age", is hidden. <select name="gender"> <option value="1">Male</option> ...

javascripthtml

What exactly does "nothing" mean in Node when using async await?

I have a method as shown below: private async sendToAll(clients) { for(const client of clients) { this.send(client, message); await true; // What should I put here to allow the rest of the application to continue executi ...

javascripttypescriptecmascript-6

Isotope animation glitches causing malfunction

I've been experimenting with CSS3 transitions on isotope items, but I'm encountering some strange behavior. My goal is to achieve a fading effect on the items, similar to this example: . Thank you in advance! Here's what I have so far: http ...

javascriptjquerycss

Opting out of accents in the Vue filter and utilizing the table filter feature provided by Bootstrap-Vue

I am currently utilizing the Bootstrap-vue Table for filtering purposes, and I require assistance in implementing a regex filter to exclude words or letters with accents. Here is the regex snippet: string.replace('/[áàãâä]/ui', 'a&apos ...

javascriptarraysvue.jsbootstrap-vue

Tips for implementing a live filter on an HTML table using JavaScript without the need to refresh the webpage

I successfully implemented these table filtering codes using plain JavaScript that I found on W3schools. The code filters table data based on input text and includes a select dropdown for additional filtering options. However, I encountered some issues whe ...

javascriptjquery

JavaScript JSON conversion from a list

If I have two different lists, such as: list1= ['blue', 'green', 'purple'] list2 = ['circle', 'square', 'triangle'] Is there a way to convert them into a JSON object structure by using another l ...

javascriptjsonlist

Continuously retrieving information from a database to display on a web page

Our team is currently developing a solution that requires a dashboard with basic views and charts that need to be updated every 10 seconds when active. Each user will have the same charts but showing filtered information. In order to achieve this function ...

javaajaxjsfweb

Sending information from a modal to a separate page using AngularJS

Seeking assistance with passing data from a modal to another page. Can you provide guidance on how to achieve this task? $scope.productdetails = function (size,selectedproduct) { var modalInstance = $uibModal.open({ templ ...

angularjsangularjs-scope

The state remains unchanged when useState is invoked

I am currently designing a unique restaurant website template. As part of the project, I have implemented a modal box with two arrow buttons to navigate between pages. The issue I am facing is that the value of the pageNumber variable, tracked using useSta ...

javascriptreactjsjsxuse-state

Call a function between two controllers by utilizing routeprovider

I have set up my route provider with AngularJS as shown below: var appModule = angular.module('ngLogin', ['ngRoute','restangular','btford.socket-io','ngSanitize','xeditable']); appModule.config( ...

angularjsangularjs-routingroute-provider

After updating to Angular 7, an error was encountered: "TypeError: Unable to execute map function on ctorParameters"

After updating my Angular project to version 7, I encountered a new issue. When running "ng serve --open" from the CLI, I received the following error message: Uncaught TypeError: ctorParameters.map is not a function at ReflectionCapabilities._own ...

javascriptnode.jsangulartypescriptnpm

Exploring the process of retrieving array elements from an AJAX response transmitted from PHP

Here is an example of jQuery code for an ajax function: $(document).ready(function() { $("#zip_code").keyup(function() { var el = $(this); var module_url = $('#module_url').val(); if (el.val().length === 5) { $.ajax({ ...

javascriptphpjqueryajaxajax-request

jQuery, Transform the $.ajax function into a $.post request

Currently, I am in the process of creating a simple form for uploading files using jQuery/ajax. Below is a snippet of my code: var formData = new FormData($(this)[0]); $.ajax({ url: 'uploader.php', type: 'POST', data: formData, async: ...

jqueryajaxformspostmethods

Managing the response from a variable returned by jQuery's .load method

I am facing an issue with my code. I am using jQuery post to validate whether the name of the filter is available for use. $.post('check-username.php', $("#myform").serialize(), function(data) { alert(data); }); When I use the alert to disp ...

javascriptphpjquery

Tips for properly styling Ajax Response Data?

I recently started working with Ajax and was able to successfully retrieve cross-domain data using a proxy. The output that I received is as follows: {"error":"\r\n\r\n\r\n\r\n\r\n\r\n\r&bso ...

ajaxjson

Tips for dividing by a large number

I am currently attempting the following: const numerator = 268435456; const denominator = 2 ** 64; const decimalFraction = numerator / denominator; In order to achieve this, I have experimented with utilizing the code provided in this link: : const rawVal ...

javascriptreactjstypescriptcreate-react-appbigint

wiping out a column in Excel spreadsheets with the help of Node.js or its corresponding node modules

I've attempted various approaches without success. Can you provide guidance on deleting and adding columns within an Excel sheet using Node.js? ...

javascriptnode.jsexcelnpm

unable to make a request to the express server with axios

I am in the process of developing a chat application similar to whatsapp. One of the key features I'm working on is that when a user clicks on another person's name, their chats will be displayed. However, currently, I'm facing an issue wher ...

javascriptreactjsexpress

Encountering issue while starting npm: expressjs server facing problem with MongoDB

Running npm start on Windows went smoothly, but I encountered an error when trying it on macOS. The error message is as follows: > node ./bin/www.js www error: SyntaxError: Unexpected token ? If you require any additional information, please do not he ...

javascriptexpress

Error: The function `push` cannot be used on the variable `result` (TypeError)

Here is a snippet from my react component const mockFetch = () => Promise.resolve({ json: () => new Promise((resolve) => setTimeout(() => resolve({ student1: { studentName: 'student1' }, student2: { studen ...

javascriptreactjserror-handling