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

Tips for resolving the issue: "Encountered error loading module script..." in Angular 8 and Electron 5

I have been working on developing an Electron 5 app using Angular 8. Despite following numerous online tutorials, I keep encountering the same error. Initially, I set up a new project and ran ng serve --open, which successfully displayed the default angul ...

javascriptangularelectron

Navigating with Next.js Router: Dynamic URLs and the power of the back button

Utilizing the Router from the package next/router allows for a dynamic URL and loading of different content on the page: Router.push('/contract', `/contract/${id}`); An issue arises where the back button does not function as expected after runni ...

javascriptreactjsbrowsernext.jsrouter

Does the onChange event fire when the value is modified by the parent element?

let [number, set_number] = useState({x: 1}); <ChildComponent number={number} onUpdate={onUpdateFunction} </ChildComponent> set_number({x: 2}) After running set_number({x: 2}), will this action prompt the execution of onUpdateFunction refere ...

javascripthtmlreactjsmaterial-ui

Verifying the visibility of a div and triggering its closure upon clicking outside of it

Would anyone be able to provide guidance on how I can merge these two scripts into one? Thank you in advance! $(document).ready(function(){ if ($('.myContainer').is(':visible')) { alert('Hello'); } }); $(doc ...

javascript

Add buttons to images to provide further explanations

While browsing the Excel Learn website, I came across a picture that displayed buttons explaining various functions in Excel. By clicking on the picture, a menu would open up to further explain the corresponding button. If you want to see this in action, ...

javascripthtmlcss

What is the best way to define the scope of an HTTP request within my application?

I need assistance with setting the scope for an http request in my Ionic App. Our Backend is built with Node.JS using the Hapi Framework. Since I primarily work on the frontend, I lack knowledge of server-side operations. Currently, I am able to successfu ...

javascriptnode.jsionic-frameworkhapi.js

When refreshing a page in Next.js, the loading indicator does not properly turn off

I'm currently working on my portfolio using next.js and I have implemented a 'loading' state to prevent displaying partially loaded gallery images. The 'loading' state should turn off (set to 0) once all the photos are fully loaded ...

javascriptreactjsnext.js

Dynamic collapsible containers

I discovered a useful feature on w3schools for collapsing elements: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_collapsible_symbol However, I would like to reverse it so that all elements are initially shown when the page loads, and then ...

javascripthtmlcss

What could be causing the promises in Promise.all to remain in a pending state?

After restructuring my code to correctly utilize promises, I encountered a challenge with ensuring that the lastStep function can access both the HTML and URL of each page. To overcome this issue, I'm attempting to return an object in nextStep(). Alt ...

javascriptnode.jsweb-scrapingpromise

Issue with Component not displaying properly upon refreshing

I'm currently using react.js and I have a button with an onClick event. My goal is to reload the page after clicking the button and then display a specific component on the page. However, I've encountered an issue where the component doesn't ...

javascriptreactjsjsx

What is the process for reporting a security vulnerability in an npm package if you are the maintainer and publisher?

If I discover a security flaw in my published packages, how can I indicate which versions are vulnerable so that users running `npm audit` will be alerted? ...

javascriptnode.jssecuritynpmnpm-audit

Exploring the angular js repeater component's context menu options

In one of my current projects, the client has specifically requested a right-click menu feature. However, the challenge lies in ensuring that the function triggered by the menu options has access to relevant information from the model. For instance, you ...

javascriptangularjscontextmenuright-click

issues with jquery progress bar not updating value

How can I display two progress bars with the same value specified in the data attribute? Here is the HTML code: <div> <div class="p" data-value="54"></div> </div> <div> <div class="p" data-value="45"></div> < ...

javascriptjqueryjquery-ui

unable to fix slideshow glitch after multiple cycles

I've encountered an issue with my custom JavaScript picture scroll. After 3-4 photo changes, the script crashes the page unexpectedly. I'm not sure what is causing this problem! Can someone provide assistance? Below is the code snippet: <di ...

javascriptslideshow

The component is unable to access VueJS references

Below is a simplified version of the code I am working with: <html> <head> <script src="file:///D:/OtherWork/javascript/vue/vue.js"></script> </head> <body> <div id="app"> & ...

javascriptvue.js

The .each method is failing to iterate over the next object

Currently, I have been working with JSON data retrieved from the web. After successfully receiving the data, I proceed to create a JavaScript object to work with it. However, there seems to be an issue with retrieving the values of fname and lname from th ...

javascriptjqueryajax

Is there a way to position the tooltip above the sorter icon in Ant Design (antd) component?

I'm currently working on creating a table with sorter columns using the antd framework. Can anyone guide me on how to position the tooltip above the sorter icon? Below is a snippet of my UI. Specifically, I included this property within the 'dat ...

javascriptcssreactjsantd

The search text box is mysteriously absent from each column in the datatables

I am utilizing jQuery Datatables to construct a table with data retrieved from MySQL. This is how my table appears: LOT_LOCATION, Zone Attribute, LOTID, Design_ID, Board_ID1, QA_WORK_REQUEST_NO, QA_CONTACT_NAME, QA_PROCESS_NAME, CURRENT_QTY, Date, Temp ...

javascriptjqueryjsondatatables

Mobile devices do not support internal link scrolling in Material UI

Currently, I'm utilizing internal links like /lessons/lesson-slug#heading-slug for smooth scrolling within a page. While everything functions perfectly on desktop, it ceases to work on mobile view due to an overlaid drawer nav component. Take a look a ...

javascriptreactjsmaterial-uinext.js

Is it feasible to run AJAX requests to execute PHP code from an external file?

Can I use ajax to fetch an external file (database) through a link or form (example.php), run PHP code in that file, and then show the output to the user? Regards, Bart ...

phpmysqlajax