CODEWITHSUNDEEP
javascriptangularhighcharts
Ajoshi
Ajoshi

Reputation: 163

Is there sub sub Drill-down support in High chart?

I am looking to get sub sub Drill down in my Chart, Following is the code for the same.

// Create the chart
Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Highcharts multi-series drilldown'
    },
    subtitle: {
        text: 'Click columns to drill down to single series. Click categories to drill down both.'
    },
    xAxis: {
        type: 'category'
    },

    plotOptions: {
        series: {
            borderWidth: 0,
            dataLabels: {
                enabled: true
            }
        }
    },
    series: [
      {
          name: '2010',
          data: [{
              name: 'Republican2',
              y: 5,
              drilldown: 'republican-2010'
          }]
      }
    ],
    drilldown: {
        series: [
          {
                name: 'Republican3',
              id: 'republican-2010',
              data: [{
                name: 'test',
                y: 3,
                drilldown: 'republican-2080'
              }]
          }
        ],
        drilldown: {
            series: [{
              id: 'republican-2080',
              data: [
                  ['East', 4],
                  ['West', 2],
                  ['North', 1],
                  ['South', 4]
              ]
                }]
        }
    },// End Main drill down

});

It's working fine till first Drill-down and I've followed the main Drill-down structure to get sub sub Drill-down. Not sure if it supported by High chart or I am doing something wrong..

Any help would be appropriated..

Upvotes: 0

Views: 88

Answers (1)

Rahul Singh
Rahul Singh

Reputation: 19640

You can find a working example of the same in

https://rahulrsingh09.github.io/AngularConcepts

under Additional -> Angular 2 + HighCharts

Charts Component .ts

import {Component, OnInit} from '@angular/core';
import {WeatherService} from "../shared/weather.service";

@Component({
  selector: 'app-charts',
  templateUrl: './charts.component.html',
  styleUrls: ['./charts.component.css']
})
export class ChartsComponent implements OnInit {

  drilldown: Object;



  constructor() {
  }

   ngOnInit(){
   this.drilldown = {
      chart: {
        type: 'column'
      },
      title: {
        text: 'Basic drilldown'
      },
      xAxis: {
        type: 'category'
      },

      legend: {
        enabled: false
      },

      plotOptions: {
        series: {
          borderWidth: 0,
          dataLabels: {
            enabled: true
          }
        }
      },

      series: [{
        name: 'Country',
        colorByPoint: true,
        data: [{
          name: 'India',
          y: 2,
          drilldown: 'india'
        }, {
          name: 'United Kindom',
          y: 2,
          drilldown: 'uk'
        }]
      }],
      drilldown: {
        series: [{
          name: 'Popular Destinations',
          id: 'india',
          data: [{
            name: 'WB',
            y: 3,
            drilldown: 'wbdes'
          },
            {
              name: 'CHD',
              y: 2,
              drilldown: 'chddes'
            }]
        }, {
          name: 'Popular Destinations',
          id: 'uk',
          data: [{
            name: 'london',
            y: 2,
            drilldown: 'londondes'
          },
            {
              name: 'manchester',
              y: 1,
              drilldown: 'manchesterdes'
            }]
        }, {
          name: 'votes',
          id: 'londondes',
          data: [
            ['Stamford Bridge', 40],
            ['Kings Road', 2]
          ]
        },
          {
            name: 'votes',
            id: 'manchesterdes',
            data: [
              ['Old Trafford', 4]
            ]
          },
          {
            name: 'votes',
            id: 'wbdes',
            data: [
              ['victoria memorial', 4],
              ['eden garden', 2],
              ['Home', 1]
            ]
          },
          {
            name: 'votes',
            id: 'chddes',
            data: [
              ['Sukhna Lake', 4],
              ['Infosys', 2]
            ]
          }]
      }
    };

}

}

Template code 

<div class="row">
  <div class="col-md-6"><chart [options]="drilldown"></chart></div>
</div>

app.module.ts

export function highchartsFactory() {
  var hc = require('highcharts');
  var hcm = require('highcharts/highcharts-more');
  var exp = require('highcharts/modules/exporting');
  var drill = require('highcharts/modules/drilldown');

  hcm(hc);
  exp(hc);
  drill(hc)
  return hc;
}

@NgModule({
providers :[
{
                provide: HighchartsStatic,
                useFactory: highchartsFactory
              }
]

})

Upvotes: 1

Related Questions