Highcharts Drilldown Functionality With Angular Custom Directive And Web API

This article will demonstrate how to create "Add drilldown" (basically it is called nested charts) functionality using Highcharts Library in Angular JS with Web API.

This is the second part of this series, “Highcharts with Angular JS custom directive and Web API”. In the first part, we went through the preparation of the charts using the Highcharts Library and Web API. The first part covered database table creation with dummy data, the creation of a connection with a database using ADO.NET Entity Data Model, fetching data from a database using API Controller, and to show these data in form of charts. We have created Custom Directive in Angular JS which plotted our data in different types of charts based on the chart type.

This demonstration will cover all the steps which are required to show drilldown charts on click of the first chart plotted point.

The whole demonstration is divided into three different parts, as follows.

• Part 1: Create charts using Highcharts Library and AngularJS custom directive with Web API
• Part 2: Implement Drilldown functionality with charts [Nested charts]
• Part 3: Show loading image/message when rendering the charts

So, let’s move to practical implementation of PART 2 and create drill-down charts. This demonstration will cover only the drilldown chart and we will use existing codes which we have created in PART 1. So, to understand it clearly just follow up PART 1.

Below are the objectives of this article which will be covered step by step as following.

• TASK 1: Get data for drilldown chart from API Controller
• TASK 2: Add services method to get data from API
• TASK 3: Add drilldown event for the chart

So, let’s start with task one.

TASK 1 - Get data for drilldown chart from API Controller

As we have already created API Controller as “CricketController” in part 1 now we will add one more Action method which will get the data for drilldown chart. So, basically in the first part, we are getting the data for “Top ODI Batsmen in India”. If we click or select any batsman to see how he/she scored run year wise, then it will plot a new chart in the same section and this is called Drilldown chart or Nested charts. So, add following new action method as following.

[Route("Cricket/RunScoredByYear")]
[HttpGet]
public IHttpActionResult RunScoredByYear()
{
    try
    {
        using (var db = new BatsmenEntities())
        {
            var result = db.BatsmenRuns.ToList(); ;
            return Ok(result);
        }
    }
    catch (System.Exception)
    {
        throw;
    }
}

Above method “RunScoredByYear” will give you the list of Scored Runs by a single player yearly.

TASK 2 - Add services method to get data from API

To fetch data from API to client side we are using services in Angular JS. In angular js, service is the best to get data.  Actually, service is already created in part one, so what we need to do is to just add one method to get data for scored runs by year as highlighted.

(function (app) {
    'use strict'

    app.factory('ChartService', ['$http', ChartService]);

    function ChartService($http) {

        var getTopBatsmenInODI = function () {
          return $http.get('/Cricket/TopBatsmenInODI');
        };

        var getRunScoredByYear = function () {
            return $http.get('/Cricket/RunScoredByYear');
        };

        return {
            topBatsmenInODI: getTopBatsmenInODI,
            runScoredByYear: getRunScoredByYear
        }
    };
})(angular.module("chartApp"));

TASK 3 - Add drilldown event to the chart

A drilldown chart is nested functionality of the Highcharts so there are two events which are responsible to create a drilldown chart and these are “drilldown” and “drillup”. Drilldown event is basically used to create a nested chart and if you would like to come back again, then we have to use the drillup event.

If we select or click on any point which indicates specific player records, it will show you a drilldown chart. But when we add drilldown chart, we have to add one extra attribute to the data fo the main chart, that is called “drilldown” as following.

_.forEach(scope.data, function (item) {
  scope.categories.push(item.Name);

//Adding drilldown name here
  scope.seriesData.push({ name: item.Name, y: item.TotalRuns, drilldown: item.Name });
});

$timeout(function () {
  scope.chartConfig.addSeries({
    name: 'Top ODI Batsman',
    data: scope.seriesData
  });
}, 2000);

So, once we will click on any plotted point, it will fetch the name of the drilldown and create the drilldown based on name.

To create drilldown chart, we need data that we have already got from service in controller of the custom directive as below. So, here, the data is available in “runScoredByYear” score variable that will be used further in drilldown event.

controller: function ($scope, ChartService) {
  $scope.runScoredByYear = [];
  getRunScoredByYear();

  function getRunScoredByYear() {
    ChartService.runScoredByYear().then(function (response) {
      $scope.runScoredByYear = response.data;
    });
  }
}

So, we can see below code, there are two events for the chart and both are responsible to implement drilldown and drillup functionality. Once the data will be available in the drilldown event, we can get the chart instance and add new series to this as following.

chart: {
    type: scope.type,
    renderTo: 'chart_container_' + scope.type,
    events: {
    drilldown: function (e) {
      if (!e.seriesOptions) {
        var chart = this;

        var selectedColumn = e.point.name;
        var scoredRunFilteredData = _.filter(scope.runScoredByYear, { 'Name': selectedColumn });

        var scoredRunFilteredDataPoints = [];

        for (var i = 0; i < scoredRunFilteredData.length; i++) {
          scoredRunFilteredDataPoints.push({ name: scoredRunFilteredData[i].Year, y: scoredRunFilteredData[i].Runs });
        }

        chart.drilldowns = {
          series1: {
            type: 'line',
            name: selectedColumn,
            data: scoredRunFilteredDataPoints,
            color: 'red'
          }
        };

        var series = [chart.drilldowns.series1];

        setTimeout(function () {
          chart.addSingleSeriesAsDrilldown(e.point, series[0]);
          chart.setTitle({ text: e.point.name + ' <b>Scored Runs</b>' });
          chart.applyDrilldown();
        }, 1000);
      }
    },
    drillup: function (e) {
      var chart = this;
      chart.setTitle({ text: 'Top ODI Batsman in India' });
    }
    }
}

When drilldown chart will be plotted then there will be a Back button on the top. That is used to come back on the main chart. So, basically, here we are drilling up. On drillup event, we can customize the main chart again like change the title of the chart etc.

So, it is time to run the application and click on any plotted point. Below is the first or we can say the main chart where “Top ODI Batsmen in India” data is plotted;



If you click on any of the plotted points for any batsman, the drilldown chart will be plotted with their scored run by year as follows. For this demonstration, I am choosing “Sachin Tendulkar” and click to point where data for Sachin Tendulkar is plotted on every chart.

Note
We can change the chart type in drilldown as well.

Here is whole code for “ChartDirective.JS”.

(function (app) {
    'use strict'

    app.directive('chartDirective', ['$timeout', chartDirective]);

    function chartDirective($timeout) {
        return {
            restrict: 'E',
            templateUrl: function (element, attrs) {
                return "/App/directive/" + attrs.type + 'ChartTemplate.html'
            },
            scope: {
                type: '@',
                data: '='
            },
            link: function (scope, element, attribute) {
                scope.chartConfig = new Highcharts.Chart({
                    chart: {
                        type: scope.type,
                        renderTo: 'chart_container_' + scope.type,
                        events: {
                            drilldown: function (e) {
                                if (!e.seriesOptions) {
                                    var chart = this;

                                    var selectedColumn = e.point.name;
                                    var scoredRunFilteredData = _.filter(scope.runScoredByYear, { 'Name': selectedColumn });

                                    var scoredRunFilteredDataPoints = [];

                                    for (var i = 0; i < scoredRunFilteredData.length; i++) {
                                        scoredRunFilteredDataPoints.push({ name: scoredRunFilteredData[i].Year, y: scoredRunFilteredData[i].Runs });
                                    }

                                    chart.drilldowns = {
                                        series1: {
                                            type: 'line',
                                            name: selectedColumn,
                                            data: scoredRunFilteredDataPoints,
                                            color: 'red'
                                        }
                                    };

                                    var series = [chart.drilldowns.series1];

                                    setTimeout(function () {
                                        chart.addSingleSeriesAsDrilldown(e.point, series[0]);
                                        chart.setTitle({ text: e.point.name + ' <b>Scored Runs</b>' });
                                        chart.applyDrilldown();

                                    }, 1000);
                                }
                            },
                            drillup: function (e) {
                                var chart = this;
                                chart.setTitle({ text: 'Top ODI Batsman in India' });
                                chart.();
                            }
                        }
                    },
                    title: {
                        text: 'Top ODI Batsman in India'
                    },

                    xAxis: {
                        type: 'category',
                        categories: []
                    },
                    yAxis: {
                        title: {
                            text: 'Runs'
                        },
                        plotLines: [{
                            value: 0,
                            width: 1,
                            color: '#808080'
                        }]
                    },
                    tooltip: {
                        valueSuffix: ' Run Scored'
                    }
                });

                scope.seriesData = [];
                scope.categories = [];

                scope.$watch('data', function (newValue) {
                    if (newValue != undefined) {

                        _.forEach(scope.data, function (item) {
                            scope.categories.push(item.Name);
                            scope.seriesData.push({ name: item.Name, y: item.TotalRuns, drilldown: item.Name });
                        });

                        $timeout(function () {
                            scope.chartConfig.addSeries({
                                name: 'Top ODI Batsman',
                                data: scope.seriesData
                            });
                        }, 2000);
                    }
                });

            },
            controller: function ($scope, ChartService) {
                $scope.runScoredByYear = [];
                getRunScoredByYear();

                function getRunScoredByYear() {
                    ChartService.runScoredByYear().then(function (response) {
                        $scope.runScoredByYear = response.data;
                    });
                }
            }
        }
    }
})(angular.module("chartApp"));

Now, everything has been set up, and it’s time to run your application. Run and enjoy.

Conclusion

Today, we have learned how to implement Drilldown chart functionality using Highcharts and AngularJS custom directive and Web API.

I hope this post helps you. Please put your feedback which will help me improve the next post. If you have any doubts, please ask in the comments section.