Highcharts with angularjs drilled down does not work

Question

I am developing a drilled down chart using HichartJS, the chart is getting generated but drill down is not functioning properly.

I need the back button as well so that user can go back to the previous data.

Here is my code,

HTML:

 <div ng-controller="myctrl">
        <highchart id="chart1" config="highchartsNG"></highchart>
 </div>

JS:

var myapp = angular.module('myapp', ["highcharts-ng"]);
myapp.controller('myctrl', function ($scope) {
    $scope.highchartsNG = {
        options: {
            chart: {
                type: 'column'
            }
        },
        title: {
            text: 'Basic drilldown'
        },
        xAxis: {
            type: 'category'
        },

        legend: {
            enabled: false
        },

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

        series: [{"data":[{"name":"Hiring","y":390309.25,"drilldown":"PRIME MOVER"},{"name":"Private","y":406746.97,"drilldown":"PRIME MOVER"}],"name":"series1","color":"","type":"area"}],
        drilldown: {
            series:  [{"id":"Hiring","data":[["MOTOR CAR",97610],["VAN",129750],["THREE WHEELER",62949.25],["PRIME MOVER",100000]]},{"id":"Private","data":[["MOTOR CAR",488356.97],["VAN",129750],["THREE WHEELER",78949.25],["PRIME MOVER",100000]]}]
        }
    }

});

Here is the Plunker

did u seen this http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/drilldown/basic/ — Nishith Kant Chaturvedi, Sep 18 '15 at 11:15
getting deprecated warning in console 'webkitMovementX' is deprecated. Please use 'movementX' instead. in your plunker — Nishith Kant Chaturvedi, Sep 18 '15 at 11:19
issue in series , brackets are not closed properly,formatting issue — Nishith Kant Chaturvedi, Sep 18 '15 at 11:22
When I corrected I got this http://jsfiddle.net/Nishith/uqpgnf8y/2/ — Nishith Kant Chaturvedi, Sep 18 '15 at 11:47

score 2 · Accepted Answer · edited May 23 '17 at 10:27

2

Update2 I have made changes for your data , The problem was in formatting of json and the second problem was you were not calling proper id in drillDown. Check the fiddle updated Here with your data

Update1 I have made changes and now its working on fiddle Here . I have added changes to highcharts-ng in script tag in html section of fiddle. Also I changed the data, because your data was not formatted for me.

I just realize that drillDown feature isn't supported by highcharts-ng .see the link Highcharts-ng with drilldown Following edit was done at source code to make it work.

if(config.drilldown) {
  mergedOptions.drilldown = config.drilldown;
 };

edited May 23 '17 at 10:27

Community

1
1

answered Sep 18 '15 at 12:06

Nishith Kant Chaturvedi

4,719
2
16
24

@Sajeetharan check the updated fiddle in my answer, its working now – Nishith Kant Chaturvedi Sep 18 '15 at 13:11
Its working check http://jsfiddle.net/Nishith/uqpgnf8y/4/ . Do you want it to be work with your data ? You can simply copy > if(config.drilldown) { mergedOptions.drilldown = config.drilldown;} to your code in highcharts-ng – Nishith Kant Chaturvedi Sep 18 '15 at 13:19
your sample shows the data as animals, i want the chart to appear for my data. sory if am bothering – Sajeetharan Sep 18 '15 at 13:20
That's Ok :) I am updating – Nishith Kant Chaturvedi Sep 18 '15 at 13:20
@Sajeetharan check the update 2 in answer, I have added fiddle with your data. – Nishith Kant Chaturvedi Sep 18 '15 at 13:26
Found it bro, it was actually a css issue ! – Sajeetharan Sep 19 '15 at 14:24
great !! finally its functional for you. – Nishith Kant Chaturvedi Sep 19 '15 at 14:35

Highcharts with angularjs drilled down does not work

1 Answers1

Linked