Multilevel pie drilldown sample

[Richard]

Hi, I have a tree of objects with several attributes (type, class, name, url) and I want to use a pie chart with drilldown plus a grid to display attributes of the clicked pie section.

As the tree can have many levels please let me know if the pie chart supports multilevel drilldown actions.

When the user clicks on the chart two things would happen:

- if there is data below the clicked item the drilldown will happen

- the data card (grid) will be filled with attributes of the clicked item

I am attaching a mockup picture of what I am after.

Please let me know if I can achieve that.

Attachment: Capture_7db56111.zip

[Baby Palanidurai]

Hi Richard, 

 

Thanks for using Syncfusion products. 

 

We have analyzed your query.  Your requirement can be achieved by pointClick event in chart. In this event, you will get the information about the points, based on this, we can change the data source for the series and refresh the chart. Kindly find the code snippet below to achieve this requirement. 

 

JS: 

 

var data = [ 

      {x: 'SUV', y: 25, z : [{x: 'Toyota', y: 8, z: [{x: '2000', y: 20}, {x: '2001', y: 30}, {x: '2002', y: 40}]},{ x: 'Ford', y: 12 },{ x: 'GM', y: 17 }, { x: 'Renault', y: 6 } ]}, 

      {x: 'Car', y: 37, z :  [{ x: 'Toyota', y: 7 }, { x: 'Chrysler', y: 12 },{ x: 'Nissan', y: 9 }, { x: 'Ford', y: 15 }] }, 

      {x: 'Pickup', y: 15, z : [{ x: 'Nissan', y: 9 }, { x: 'Chrysler', y: 4 },{ x: 'Ford', y: 7 }, { x: 'Toyota', y: 20 }] }, 

      {x: 'Minivan', y: 23, z : [{ x: 'Hummer', y: 11 }, { x: 'Ford', y: 5 },{ x: 'GM', y: 12 }, { x: 'Chrysler', y: 3 }]} 

      ]; 

 

 

Var pie =  new ej.charts.AccumulationChart({ 

      

     pointClick: pointClick, 

 

}); 

 

var pointClick = function (args) { 

           pie.series[0].dataSource = data[args.pointIndex].z; 

           pie.title = data[args.pointIndex].z[0].title  

           pie.refresh(); 

} 

 

 

Screenshot: 

First Level 

 

 Second Level 

     

  

 Third Level 

            

 

 

Sample for reference can be find from below link. 

http://plnkr.co/edit/jPhDZ8RL0WV3GCii1q5z?p=preview 

 

kindly revert us, if you have any concerns. 

 

Thanks, 

Baby. 

[Richard]

Hi, I managed to work in Plunker the code with my data. I stay with two levels only, apparently my tree is no deeper than that.

I installed a test on my site at https://www.dentfix.ro/wp-content/plugins/semantic-navigation/index.html basically by copying files from Plunker

When I attempt to transport the code to my site like here https://www.dentfix.ro/servicii/chirurgie-orala/ I see the code executes correctly until this line:

pie.appendTo('#drill-container');

Here I get javascript errors such as Uncaught DataManager: Invalid arguments Error: DataManager: Invalid arguments in some ej2.min.js function

I am also using jQuery on site and I try to run the code on jQuery(document).ready() so the divs are already present in DOM.

Inspecting data variable in dev tools output proper data, copying this data over the html file shows that data works.

Even inspecting pie variable I can see everything normal, so the appending to the div container is failing for some reason.

[Baby Palanidurai]

Hi Richard, 

We have analyzed your query. We are unable to reproduce the reported issue with the provided information and the sample is working properly in our end.  We suspect that the data source you have bind to the chart is invalid, so the error occurs, when processing the data for chart. So please check the data source format or share the datasource details so that we could reproduce the issue and provide you an appropriate solution sooner. 

 

Kindly revert us, if you have any concerns. 

Thanks, 

Baby. 

[Richard]

Yes, you are right. I missed a bit of code:

data = jQuery.parseJSON(data);

[Baby Palanidurai]

Hi  Richard, 

Thanks for your update, 

Please let us know if you need any further assistance on this. 

Regards, 

 Baby

[Richard]

It can be closed with many thanks. I would close it but I cannot find how to do it...

[Baby Palanidurai]

Hi Richard, 

  

Its is a open thread. So it cannot be closed. 

  

Regards, 

Baby.