Nitish2023
Posts: 3
Joined: Mon Feb 17, 2020 9:58 am

Unable to create a simple network graph.

Hi, I'm trying to create a simple network graph with the below chartOptions code.

Code: Select all

this.chartOptions = {
      chart: {
        type: 'networkgraph',
        height: '100%'
      },
      title: {
        text: 'Complete Data Network'
      },
      subtitle: {
        text: 'Every Error At A Glance'
      },
      plotOptions: {
        networkgraph: {
          keys: ['from', 'to'],
          layoutAlgorithm: {
            enableSimulation: true,
            friction: -0.9
          }
        }
      },
      credits: {
        enabled: false
      },
      series: [
        {
          dataLabels: {
            enabled: true
          },
          id: 'Data-Network',
          data: this.data === undefined ? [] : this.data,
        }
      ]
    };
The data I'm passing here is something like this:

Code: Select all

["Error", "BASIS"]
["BASIS", "/IWBEP/CM_MGW_RT - 020"]
["BASIS", "/IWBEP/CM_MGW_RT - 021"]
["BASIS", "/IWBEP/CM_MGW_RT - 107"]
["BASIS", "/IWBEP/CM_MGW_RT - 126"]
["BASIS", "/IWBEP/CM_MGW_RT - 127"]
["BASIS", "/IWFND/CM_CONSUMER - 101"]
["BASIS", "/IWFND/CM_CONSUMER - 108"]
["BASIS", "/IWFND/CM_LOGGING - 006"]
["BASIS", "/IWFND/MED - 167"]
 ["BASIS", "/IWFND/MED - 170"]
 ["BASIS", "DB6PM - 835"]
 ["BASIS", "FTR0 - 013"]
 ["BASIS", "FTR0 - 161"]
 ["BASIS", "R1 - 201"]
 ["BASIS", "T0 - 739"]
 ["BASIS", "T2 - 300"]
 ["BASIS", "T7 - 002"]
 ["BASIS", "TI - 011"]
 ["BASIS", "ZFIN_FINANCE - 006"]
 ["Error", "BW"]
 ["BW", "D0 - 322"]
 ["BW", "R3 - 038"]
 ["BW", "R3 - 039"]
 ["BW", "R3 - 088"]
 ["BW", "R3 - 089"]
 ["Error", "EHS"]
 ["EHS", "CM_REPORT_GEN - 005"]
 ["EHS", "ZEHS - 614"]
 ["Error", "FI"]
 ["FI", "00 - 065"]
 ["FI", "00 - 359"]
 ["FI", "BFIBL02 - 160"]
 ["FI", "BFIBL02 - 616"]
 ["FI", "F5 - 071"]
 ["FI", "F5 - 074"]
 ["FI", "F5 - 078"]
 ["FI", "F5 - 168"]
 ["FI", "F5 - 263"]
 ["FI", "F5 - 312"]
 ["FI", "FB - 736"]
 ["FI", "FB - 866"]
 ["FI", "FD - 070"]
 ["FI", "FD - 340"]
 ["FI", "FEB_BSIMP - 028"]
 ["FI", "FEB_BSIMP - 039"]
 ["FI", "FEB_BSIMP - 082"]
 ["FI", "FEB_BSIMP - 083"]
 ["FI", "KI - 222"]
 ["FI", "KM - 423"]
 ["FI", "KM - 424"]
 ["FI", "KM - 447"]
 ["Error", "MISC"]
 ["MISC", "BS - 013"]
 ["MISC", "CLBW - 029"]
 ["Error", "MM"]
 ["MM", "M3 - 022"]
 ["MM", "MK - 101"]
 ["MM", "MK - 102"]
 ["MM", "MK - 103"]
 ["Error", "PP"]
 ["PP", "CM_BOMBOS - 005"]
 ["PP", "CM_BOMBOS - 014"]
 ["PP", "CM_BOMBOS - 015"]
 ["Error", "QM"]
 ["QM", "QI - 011"]
 ["QM", "QI - 019"]
 ["QM", "QI - 027"]
 ["Error", "SD"]
 ["SD", "C$ - 137"]
 ["SD", "CB - 010"]
 ["SD", "CB - 345"]
 ["SD", "CB - 346"]
 ["SD", "CB - 352"]
 ["SD", "CB - 355"]
 ["SD", "CB - 380"]
 ["SD", "CB - 382"]
 ["SD", "CB - 506"]
 ["SD", "CB - 519"]
 ["SD", "CB - 522"]
 ["SD", "CB - 533"]
 ["SD", "CB - 536"]
 ["SD", "CB - 537"]
 ["SD", "L9 - 019"]
 ["SD", "M7 - 018"]
 ["SD", "M7 - 021"]
 ["SD", "M7 - 022"]
 ["SD", "M7 - 042"]
 ["SD", "M7 - 053"]
 ["SD", "MFLOW - 014"]
 ["SD", "RU - 030"]
 ["SD", "RU - 036"]
 ["SD", "RU - 139"]
 ["SD", "VF - 342"]
 ["Error", "VIM"]
 ["VIM", "/OPT/VIM_ICC - 000"]
 ["VIM", "/OPT/VIM_ICC - 026"]
 ["VIM", "/OPT/VIM_ICC - 027"]
 ["VIM", "/OPT/VIM_ICC - 029"]
 ["VIM", "BL - 001"]

Now, when building the chart I'm getting the below multiple errors in console and I cannot find any solution to it.

core.js:5845 ERROR TypeError: Cannot read property 'removeElementFromCollection' of undefined
at h.destroy (networkgraph.js:42)
at g (highcharts.js:397)
at h.remove (highcharts.js:398)
at h.update (highcharts.js:400)
at c.Chart.<anonymous> (highcharts.js:393)
at Array.forEach (<anonymous>)
at c.Chart.update (highcharts.js:393)
at HighchartsChartComponent.updateOrCreateChart (highcharts-angular.js:58)
at HighchartsChartComponent.wrappedUpdateOrCreateChart (highcharts-angular.js:50)
at HighchartsChartComponent.set options [as options] (highcharts-angular.js:27)


ERROR TypeError: Cannot read property 'length' of undefined
at highcharts.js:144
at Array.forEach (<anonymous>)
at e.<anonymous> (highcharts.js:143)
at c.fireEvent (highcharts.js:29)
at e.getSeriesExtremes (highcharts.js:143)
at e.setScale (highcharts.js:165)
at highcharts.js:295
at Array.forEach (<anonymous>)
at c.Chart.setSize (highcharts.js:294)
at highcharts.js:293

core.js:5845 ERROR TypeError: Cannot set property 'length' of undefined
at highcharts.js:342
at Array.forEach (<anonymous>)
at h.setData (highcharts.js:341)
at h.update (highcharts.js:399)
at highcharts.js:392
at Array.forEach (<anonymous>)
at highcharts.js:392
at Array.forEach (<anonymous>)
at c.Chart.update (highcharts.js:391)
at HighchartsChartComponent.updateOrCreateChart (highcharts-angular.js:58)

Do any of you have any idea why the first error ("Cannot read property 'removeElementFromCollection' of undefined") is occurring?

Please let me know if you guys need any more info regarding anything.

Thanks :)
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Unable to create a simple network graph.

Hi,

Welcome to our forum and thanks for contacting us with your questions.

Your data and chart's config are fine, see the online jsFiddle demo: https://jsfiddle.net/BlackLabel/5pq8Lym1

What environment are you using? What is "this" in your project? Can you create an online demo reproducing your issue so I can take a closer look at it? Did you make sure that your data is in a format of "array of arrays"?

Best regards!
Rafal Sebestjanski,
Highcharts Team Lead
Nitish2023
Posts: 3
Joined: Mon Feb 17, 2020 9:58 am

Re: Unable to create a simple network graph.

I'm using Angular 9 and Typescript. Yes, my data is in the form of array of arrays.
I'm getting the data from a RESTApi and its takes a few seconds to get the data. So how do I redraw the component chart data in Typescript after I get the data. Basically how do I refresh the data for the network graph after sometime?
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Unable to create a simple network graph.

Hi,

Are you using our official highcharts-angular wrapper? If yes, you can find docs here: https://github.com/highcharts/highcharts-angular with some demos showing how to update data.

In general, you need to update your options and set update flag to true, see: https://github.com/highcharts/highchart ... ns-details

Best regards!
Rafal Sebestjanski,
Highcharts Team Lead
Nitish2023
Posts: 3
Joined: Mon Feb 17, 2020 9:58 am

Re: Unable to create a simple network graph.

Hello,

I solved the error by setting a setInterval function and creating new instance of chart if the data is not filled.
Now the graph is working completely fine. But I am getting another issues.
First, although the chart is loading completely fine now. I'm getting the below error in console:

core.js:5845 ERROR TypeError: Cannot read property 'responsive' of undefined
at c.Chart.e.setResponsive (highcharts.js:487)
at c.Chart.update (highcharts.js:390)
at HighchartsChartComponent.updateOrCreateChart (highcharts-angular.js:58)
at HighchartsChartComponent.wrappedUpdateOrCreateChart (highcharts-angular.js:50)
at HighchartsChartComponent.set options [as options] (highcharts-angular.js:27)
at setInputsForProperty (core.js:13504)
at elementPropertyInternal (core.js:12319)
at ɵɵproperty (core.js:20842)
at NetworkComponent_Template (template.html:5)
at executeTemplate (core.js:11858)


And the second issue is that whenever I'm moving away from the chart component, to whichever component, the next component is not loading(also the routing, address is aloso not changing.)
In the console I'm getting the below error:

core.js:5845 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'forExport' of undefined
TypeError: Cannot read property 'forExport' of undefined
at c.Chart.destroy (highcharts.js:305)
at HighchartsChartComponent.ngOnDestroy (highcharts-angular.js:73)
at executeOnDestroys (core.js:14041)
at cleanUpView (core.js:13948)
at destroyViewTree (core.js:13717)
at destroyLView (core.js:13899)
at RootViewRef.destroy (core.js:14754)
at ComponentRef$1.destroy (core.js:33556)
at RouterOutlet.deactivate (router.js:8912)
at ActivateRoutes.deactivateRouteAndOutlet (router.js:3963)
at resolvePromise (zone-evergreen.js:793)
at resolvePromise (zone-evergreen.js:752)
at zone-evergreen.js:854
at ZoneDelegate.invokeTask (zone-evergreen.js:400)
at Object.onInvokeTask (core.js:40772)
at ZoneDelegate.invokeTask (zone-evergreen.js:399)
at Zone.runTask (zone-evergreen.js:168)
at drainMicroTaskQueue (zone-evergreen.js:570)
at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:485)
at invokeTask (zone-evergreen.js:1596)

Please advise if you have seen any of these errors before or what they mean.
Thank You so much.
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Unable to create a simple network graph.

I haven't seen them before. Could you reproduce your errors in some online code editor?
And sorry, but I have to ask again - are you using our official wrapper?
Rafal Sebestjanski,
Highcharts Team Lead
w99910
Posts: 8
Joined: Wed May 05, 2021 11:52 am

Re: Unable to create a simple network graph.

I'm having the same problem too " Uncaught Type: Cannot read property 'removeElementFromCollection' of undefined " .

Can you please explain what you did in setTimeInterval function?
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: Unable to create a simple network graph.

Hello w99910!

We appreciate you reaching out to us!

Unfortunately, it's hard to say why this error occurs without taking a look at your code.

Could you reproduce the issue in an online editor that I could work on? I don't know in what environment you work so in the link below you can find demo templates for a bunch of frameworks.

Link:
https://codesandbox.io/s/highcharts-react-demo-e1ue3
https://codesandbox.io/s/highcharts-vue-demo-ttner
https://stackblitz.com/edit/highcharts- ... basic-line

Best regards!
Dominik Chudy
Highcharts Developer
w99910
Posts: 8
Joined: Wed May 05, 2021 11:52 am

Re: Unable to create a simple network graph.

Hi dominik.c .

I'm sorry for late reply.
I was able to solve my problem.
It's because id attributes of some nodes were of number type and some are of strings. So I tried to cast those attributes to string and it solved the problem.

Thanks for your help and much appreciated!

Sincerely.
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: Unable to create a simple network graph.

Hi again!

All right, so congrats on finding the solution. :)

In case of any further questions, feel free to contact us again.
Best regards!
Dominik Chudy
Highcharts Developer

Return to “Highcharts Usage”