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?

Answer 1

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"
}]

}

Answer 2

You can try with below sample code -

// Require AngularJS

var angular = require('angular');

// Require FusionCharts 
var FusionCharts = require('fusioncharts');

// Require angularjs-fusioncharts 
require('angularjs-fusioncharts');

// Require Chart modules 
var Charts = require('fusioncharts/fusioncharts.charts');

// Require Fusion theme
var FusionTheme = require('fusioncharts/themes/fusioncharts.theme.fusion');

// Initialize Charts with FusionCharts instance
Charts(FusionCharts);

// Initialize FusionTheme with FusionCharts instance
FusionTheme(FusionCharts);

var myApp = angular.module('myApp', ['ng-fusioncharts']);

myApp.controller('MyController', ['$scope', function($scope) {
    var DataSource = {
        "chart": {
            "caption": "Top 3 Juice Flavors",
            "subcaption": "Last year",
            "xaxisname": "Flavor",
            "yaxisname": "Amount (In USD)",
            "numberprefix": "$",
            "theme": "fusion",
            "rotateValues": "0",
            "id": "myChart"
        },
        "data": [{
                "label": "Apple",
                "value": "810000",
                "link": "newchart-xml-apple"
            },
            {
                "label": "Cranberry",
                "value": "620000",
                "link": "newchart-xml-cranberry"
            },
            {
                "label": "Grapes",
                "value": "350000",
                "link": "newchart-xml-grapes"
            }
        ],
        "linkeddata": [{
                "id": "apple",
                "linkedchart": {
                    "chart": {
                        "caption": "Apple Juice - Quarterly Sales",
                        "subcaption": "Last year",
                        "numberprefix": "$",
                        "theme": "fusion",
                        "rotateValues": "0",
                        "plottooltext": "$label, $dataValue,  $percentValue"
                    },
                    "data": [{
                            "label": "Q1",
                            "value": "157000"
                        },
                        {
                            "label": "Q2",
                            "value": "172000"
                        },
                        {
                            "label": "Q3",
                            "value": "206000"
                        },
                        {
                            "label": "Q4",
                            "value": "275000"
                        }
                    ]
                }
            },
            {
                "id": "cranberry",
                "linkedchart": {
                    "chart": {
                        "caption": "Cranberry Juice - Quarterly Sales",
                        "subcaption": "Last year",
                        "numberprefix": "$",
                        "theme": "fusion",
                        "plottooltext": "$label, $dataValue,  $percentValue"
                    },
                    "data": [{
                            "label": "Q1",
                            "value": "102000"
                        },
                        {
                            "label": "Q2",
                            "value": "142000"
                        },
                        {
                            "label": "Q3",
                            "value": "187000"
                        },
                        {
                            "label": "Q4",
                            "value": "189000"
                        }
                    ]
                }
            },
            {
                "id": "grapes",
                "linkedchart": {
                    "chart": {
                        "caption": "Grapes Juice - Quarterly Sales",
                        "subcaption": "Last year",
                        "numberprefix": "$",
                        "theme": "fusion",
                        "rotateValues": "0",
                        "plottooltext": "$label, $dataValue,  $percentValue"
                    },
                    "data": [{
                            "label": "Q1",
                            "value": "45000"
                        },
                        {
                            "label": "Q2",
                            "value": "72000"
                        },
                        {
                            "label": "Q3",
                            "value": "95000"
                        },
                        {
                            "label": "Q4",
                            "value": "108000"
                        }
                    ]
                }
            }
        ]
    };
    $scope.myDataSource = DataSource;

    $scope.events = {
        renderComplete: function(e, a) {
            e.sender.configureLink({
                type: "pie2d",
                renderAt: "myChart",
                overlayButton: {
                    message: 'close',
                    fontColor: '880000',
                    bgColor: 'FFEEEE',
                    borderColor: '660000'
                }
            }, 0)
        }
    };
}

Try implementing with Drill-down functionality -

"data": [{
                "label": "Apple",
                "value": "810000",
                "link": "newchart-xml-apple"
            },
            {
                "label": "Cranberry",
                "value": "620000",
                "link": "newchart-xml-cranberry"
            },
            {
                "label": "Grapes",
                "value": "350000",
                "link": "newchart-xml-grapes"
            }
        ],

Document refer - https://www.fusioncharts.com/dev/getting-started/angular/angularjs/add-drill-down-using-angularjs