xprogram
Posts: 2
Joined: Tue May 04, 2021 12:27 am

Drilldown not working with data from array

Hello, Im currently stuck on this..I have already read various posts about it here but cant seem to find the answer, I already tried with just direct data and IT WORKS..example like this...

Code: Select all

  
                                 series: [{
                                 name: 'Routes',
                                 colorByPoint: true,
                                 data: [{
                                     name: 'Completed',
                                     y: 1,
                                     drilldown: "a"
                                 }, {
                                     name: 'Pending',
                                     y: 3,
                                     drilldown: "b"
                                 }, {
                                     name: 'Canceled',
                                     y: 2,
                                     drilldown: "c"
                                 }],
                                 

                             }],
                             drilldown: {
                                 series: [{
                                     name: "Completed drilldown",
                                     id: "a",
                                     data: [
                                         ['cats', 4]
                                     ]
                                 }]
                             }
                             
The problem is that my data comes from just only one Array and it works but NOT the drilldown this is how I have my code..

Code: Select all

                                 series: [{
                                 name: 'Routes',
                                 colorByPoint: true,
                                 data: LPR,
                                 drilldown: "a"
                             }],
                             drilldown: {
                                 series: [{
                                     name:"Completed drilldown",
                                     id:"a",
                                     data:[
                                         ['cats',4]
                                          ]
                                         }]
                                        }
Can someone guide me, thx.
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: Drilldown not working with data from array

Hello xprogram!

Welcome to our forum and thanks for contacting us with your question!

How does your array look like? You need to have a specified drilldown value for each point over there, there's no other way to make it work. You can modify the content of the array before parsing it to the chart.

Demo: https://jsfiddle.net/BlackLabel/apow45eu/

Best regards!
Dominik Chudy
Highcharts Developer
xprogram
Posts: 2
Joined: Tue May 04, 2021 12:27 am

Re: Drilldown not working with data from array

Hello dominik.c first let me say thank you for your help, now I understand that I definitely need to separate each point as you mentioned, i modified my array so that it only gives me data like this with 3 items inside

LPR[0]=99
LPR[1]=32
LPR[2]=4

So what I did was tried first on a fiddle was this to see if it worked and it did.. https://jsfiddle.net/xprogram/mrazenfd/6/

But when I tried it on my code didn't work am I missing something?

LPR[0]=99

Code: Select all



                     function LoadPlannedRoutes(LPR) {
                         var test = [{
                             name: 'Completed',
                             y: LPR[0],
                             drilldown:"a"
                         }  
                         ]

                         Highcharts.chart('plannedroutes', {
                             chart: {
                                 plotBackgroundColor: null,
                                 plotBorderWidth: null,
                                 plotShadow: false,
                                 type: 'pie'
                             },

                             credits: {
                                 enabled: false
                             },
                             title: {
                                 text: 'Northbound Available Loads',
                                 margin: -15,
                
                             },

                             reserved: true,

                             tooltip: {
                                 pointFormat: '<b>{point.percentage:.1f}%</b>'
                             },
                             plotOptions: {
                                 pie: {
                                     cursor: 'pointer',
                                     dataLabels: {
                                         enabled: true,
                                         distance:5,
                                         format: '{point.y}',
                                         style: {
                                             color: (Highcharts.theme && Highcharts.theme.contastTextColor) || 'black',
                                         }
                                     },
                                     showInLegend: true
                                 }
                             },
                             legend:{
                                 itemStyle:{
                                     color: 'black',
                                     fontWeight: 'bold',
     
                                 }
                             },
                             series: [{
                                 name: 'Routes',
                                 colorByPoint: true,
                                 data:test,
                                 legendIndex: 1,
                                 }],
                             drilldown: {
                                 series: [{
                                     name:"Completed drilldown",
                                     id:"a",
                                     data:[
                                         ['trips',4]
                                          ]
                                         }]
                                        }
                     })

                 }

dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: Drilldown not working with data from array

Hi again!

You're trying to define a chart inside the LoadPlannedRoutes function, and that's the reason why it doesn't work. Another problem is that LPR array is not defined too.

We can fix it like that: https://jsfiddle.net/BlackLabel/e9n04358/

Check it out and tell me if it works fine for you. :-)
Best regards!
Dominik Chudy
Highcharts Developer

Return to “Highcharts Usage”