I am not able to inject Router in Angular component class

Question

I am using fusion charts and my function requires redirection to a new page when a particular event is fired. I have successfully created the event handler. However router variable is not accessible from within the event handler.

I have included angular router in the component class and also injected router in the constructor.

My code looks something like this

export class StoregradesComponent implements OnInit {
  type = "treemap";
  width = "980";
  height = "400";
  dataFormat = "json";
  dataSource = [];
  treeMapData:any = {};
  bStoreGrades = false;

  constructor(private userService: UserdataService, private router: Router, private route: ActivatedRoute, private spinner: NgxSpinnerService) { 
  }

  public url:string = "http://localhost/stores/getData?id=1"

  ngOnInit() {
    this.spinner.show();
    this.userService.getData(this.url).subscribe(data => {
      debugger;
      this.dataSource = data;
      this.treeMapData = {
        "chart": {
          "animation": "0",
          "hideTitle": "1",     
          "horizontalPadding": "0",
          "verticalPadding": "0",
          "plotborderthickness": ".5",
          "plotbordercolor": "ffffff",
          "chartBottomMargin": "0",
          "labelGlow": "0",
          "labelFontColor": "000000",
          "legendpadding": "0",
          "legendItemFontSize": "10",
          "legendItemFontBold": "1",
          "legendPointerWidth": "8",
          "legenditemfontcolor": "3d5c5c",
          "legendScaleLineThickness": "0",
          "legendCaptionFontSize": "10",
          "algorithm": "squarified",
          "showchildlabels": "1",
          "labelFontSize": "12",
          "labelFontBold": "1",
          "showLegend": "0"
        },
        "colorrange": {
          "mapbypercent": "0",
          "gradient": "1",
          "minvalue": "0",
          "code": "dfff72",
          "startlabel": "Ideal",
          "endlabel": "Threshold",
          "color": [{
            "code": "062a3f",
            "maxvalue": "5",
            "label": "Threshold"
          }]
        },
        "data": this.dataSource
      }      
    this.spinner.hide();
    });
  }

  events = {
    "dataPlotClick": function($e) {
      debugger;
      this.router.navigate(['sales'],{relativeTo: this.route})
    }
  }
}

I get this error when the dataPlotClick event is invoked

zone-evergreen.js:172 Uncaught TypeError: Cannot read property 'navigate' of undefined
    at e.dataPlotClick (storegrades.component.ts:95)
    at i (fusioncharts.js:13)
    at o (fusioncharts.js:13)
    at f (fusioncharts.js:13)
    at e.r.fireChartInstanceEvent (fusioncharts.js:14)
    at click (fusioncharts.treemap.js:1)
    at Object.<anonymous> (fusioncharts.treemap.js:1)
    at e.i._firePlotEvent (fusioncharts.treemap.js:1)
    at e.i._mouseEvtHandler (fusioncharts.treemap.js:1)
    at t.handler (fusioncharts.js:28)
dataPlotClick @ storegrades.component.ts:95
i @ fusioncharts.js:13
o @ fusioncharts.js:13
f @ fusioncharts.js:13
r.fireChartInstanceEvent @ fusioncharts.js:14
click @ fusioncharts.treemap.js:1
(anonymous) @ fusioncharts.treemap.js:1
i._firePlotEvent @ fusioncharts.treemap.js:1
i._mouseEvtHandler @ fusioncharts.treemap.js:1
t.handler @ fusioncharts.js:28
i @ fusioncharts.js:13
o @ fusioncharts.js:13
f @ fusioncharts.js:13
t.fireEvent @ fusioncharts.js:13
n.length.o._middleListeners.<computed>.o._middleListeners.<computed> @ fusioncharts.js:13
n @ fusioncharts.js:13
invokeTask @ zone-evergreen.js:391
runTask @ zone-evergreen.js:168
invokeTask @ zone-evergreen.js:465
invokeTask @ zone-evergreen.js:1603
globalZoneAwareCallback @ zone-evergreen.js:1629
setTimeout (async)
scheduleTask @ zone-evergreen.js:2671
scheduleTask @ zone-evergreen.js:378
scheduleTask @ zone-evergreen.js:211
scheduleMacroTask @ zone-evergreen.js:234
scheduleMacroTaskWithCurrentZone @ zone-evergreen.js:1107
(anonymous) @ zone-evergreen.js:2686
proto.<computed> @ zone-evergreen.js:1428
i @ fusioncharts.js:13
o @ fusioncharts.js:13
f @ fusioncharts.js:13
r.fireChartInstanceEvent @ fusioncharts.js:14
click @ fusioncharts.treemap.js:1
(anonymous) @ fusioncharts.treemap.js:1
i._firePlotEvent @ fusioncharts.treemap.js:1
i._mouseEvtHandler @ fusioncharts.treemap.js:1
t.handler @ fusioncharts.js:28
i @ fusioncharts.js:13
o @ fusioncharts.js:13
f @ fusioncharts.js:13
t.fireEvent @ fusioncharts.js:13
n.length.o._middleListeners.<computed>.o._middleListeners.<computed> @ fusioncharts.js:13
n @ fusioncharts.js:13
invokeTask @ zone-evergreen.js:391
runTask @ zone-evergreen.js:168
invokeTask @ zone-evergreen.js:465
invokeTask @ zone-evergreen.js:1603
globalZoneAwareCallback @ zone-evergreen.js:1629

Could anyone tell me where I am going wrong?

score 2 · Answer 1 · answered Jan 06 '20 at 12:47

you can implement FusionCharts supported link attribute for navigating a specific URL while clicking over a data plot. Please check the following way.

{
"chart": {
   ...
},
"data": [{
    "label": "Apple",
    "value": "810000",
    "link": "https://en.wikipedia.org/wiki/Apple"
}, {
    "label": "Cranberry",
    "value": "620000",
    "link": "https://en.wikipedia.org/wiki/Cranberry"
}, {
    "label": "Grapes",
    "value": "350000",
    "link": "https://en.wikipedia.org/wiki/Grape"
}]

}

I am not able to inject Router in Angular component class

1 Answers1